ShowEasyFrontEnd/FrontEnd/pages/user/forgot.vue

<template>
  <div
    class="tw-bg-white md:tw-rounded-[24px] md:tw-mt-[30px] md:tw-pt-[60px] md:tw-pb-[150px] md:tw-px-[30px]"
  >
    <div v-if="Object.keys(result).length < 1">
      <p class="tw-text-[26px] tw-font-bold tw-mb-[20px] md:tw-text-[18px]">
        {{ $t("Forgot Password") }}
      </p>
      <p class="tw-body-3 tw-text-black tw-mb-[24px]">
        {{
          $t(
            "Dont worry! It happens. Please enter the address associated with your account."
          )
        }}
      </p>
      <v-form v-model="resendValid">
        <v-text-field
          v-model="Email"
          background-color="neutrals darken-1"
          :label="this.$t('Email')"
          placeholder=""
          filled
          rounded
          dense
          single-line
          :rules="[rules.email, rules.require]"
        ></v-text-field>
      </v-form>
      <div class="md:tw-flex md:tw-justify-center md:tw-items-center">
        <button
          @click="sendForgotMail"
          :disabled="!resendValid"
          :class="[
            'tw-block tw-w-full tw-py-[10px] tw-rounded-[16px] tw-border tw-border-solid tw-body-3 tw-font-normal tw-transition-all tw-duration-200 tw-ease-in-out',
            resendValid
              ? 'tw-text-white tw-bg-primary-default tw-border-primary-default'
              : 'tw-text-base-disable tw-bg-neutral-100 tw-border-neutral-100',
          ]"
        >
          {{ $t("Reset Password")
          }}<span v-if="disableBtn">({{ this.countdown }})</span>
        </button>
      </div>
    </div>
    <div v-if="Object.keys(result).length >= 1 && !resetSuccess">
      <p class="title">{{ $t("Reset Password") }}</p>
      <v-form v-model="resetValid">
        <v-text-field
          v-model="userData.Password"
          background-color="neutrals darken-1"
          :label="this.$t('Password') + '*'"
          :type="showPass ? 'text' : 'password'"
          placeholder=""
          filled
          rounded
          dense
          single-line
          persistent-hint
          :rules="[rules.checkPassword, rules.require]"
          :hint="
            this.$t(
              'Passwords must be 8-20 characters with at least 1 number, 1 lower case letter and 1 upper case letter'
            )
          "
          :append-icon="showPass ? 'mdi-eye' : 'mdi-eye-off'"
          @click:append="showPass = !showPass"
        ></v-text-field>
        <v-text-field
          v-model="userConfirmPass"
          background-color="neutrals darken-1"
          :label="this.$t('Confirm Password') + '*'"
          :type="showConfirmPass ? 'text' : 'password'"
          placeholder=""
          filled
          rounded
          dense
          single-line
          :rules="[rules.checkPassword, rules.require, rules.confirmPass]"
          :append-icon="showConfirmPass ? 'mdi-eye' : 'mdi-eye-off'"
          @click:append="showConfirmPass = !showConfirmPass"
        ></v-text-field>
      </v-form>
      <div class="md:tw-flex md:tw-justify-center md:tw-items-center">
        <button
          @click="resetUserPass"
          :disabled="!resetValid"
          :class="[
            'tw-block tw-w-full tw-py-[10px] tw-rounded-[16px] tw-border tw-border-solid tw-body-3 tw-font-normal tw-transition-all tw-duration-200 tw-ease-in-out',
            resendValid
              ? 'tw-text-white tw-bg-primary-default tw-border-primary-default'
              : 'tw-text-base-disable tw-bg-neutral-100 tw-border-neutral-100',
          ]"
        >
          {{ $t("Reset Password") }}
        </button>
      </div>
    </div>
    <div v-if="resetSuccess">
      <p class="title">{{ $t("Password Reset") }}</p>
      <p class="neutrals--text text--darken-5 text-size-14">
        {{ $t("Congrats! Your password has been successfully reset") }}
      </p>
      <nuxt-link :to="localePath('/')">
        <v-btn
          @click="redirectHome"
          width="100%"
          color="primary"
          class="border-radius-16 mt-4"
        >
          <span class="text-capitalize">{{ $t("Explore with ShowEasy") }}</span>
        </v-btn>
      </nuxt-link>
      <v-spacer class="d-flex justify-center mt-5">
        <span
          class="text-size-12 primary--text"
          v-html="$t('Go to ShowEasy in sec', { second: this.countdown })"
        ></span>
      </v-spacer>
    </div>
  </div>
</template>

<script>
export default {
  name: "Forgot",
  layout: "login",
  auth: false,
  data() {
    return {
      showPass: false,
      showConfirmPass: false,
      resendValid: false,
      resetValid: false,
      disableBtn: false,
      resetSuccess: false,
      countdown: 60,
      Email: "",
      userConfirmPass: "",
      userData: {
        //user_id: "",
        //auth_code: "",
        Password: "",
      },
      result: "",
      rules: {
        require: (value) => !!value || this.$t("Required."),
        email: (v) =>
          /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/.test(
            v
          ) || this.$t("Invalid email"),
        checkPassword: (v) =>
          (/(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])/.test(v) &&
            v.length >= 8 &&
            v.length <= 20) ||
          this.$t(
            "Passwords must be 8-20 characters with at least 1 number, 1 lower case letter and 1 upper case letter"
          ),
        confirmPass: (v) =>
          v === this.userData.Password ||
          this.$t("Your password and confirmation password do not match"),
      },
    };
  },
  methods: {
    sendForgotMail() {
      this.$axios
        .post(`/trending/api/Signup/SendForgotMail?Email=${this.Email}`)
        .then((response) => {
          //console.log(JSON.stringify(response));
          if(response.data.STATUSCODE == "404"){
            //console.log("此帳號未認證或已註銷");
            this.resendValid = false;
          }
          if(response && response.data && response.data.DATA && response.data.DATA.rel){
            let data = response.data.DATA.rel
            if(data){
              this.result = data;
              this.disableBtn = !this.disableBtn;
              this.timeout = setInterval(() => {
                if (this.countdown > 0) {
                  this.countdown--;
                }
                if (this.countdown === 0) {
                  this.disableBtn = !this.disableBtn;
                  this.countdown = 60;
                  clearInterval(this.timeout);
                }
              }, 1000);
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    resetUserPass() {
      if (
        this.userData.Password === this.userConfirmPass &&
        this.resetValid
      ) {
        //this.userData.user_id = this.$route.query.user_uuid;
        //this.userData.auth_code = this.$route.query.auth_code;
        this.$axios
          .post(`/trending/api/Signup/ResetPassword?Email=${this.result}&Password=${this.userData.Password}`)
          .then((response) => {
          console.log(JSON.stringify(response));
          if(response && response.data && response.data.DATA && response.data.DATA.rel){
            let data = response.data.DATA.rel
            if(data){
              this.resetSuccess = !this.resetSuccess;
              this.countdown = 3;
              this.timer = setInterval(() => {
                if (this.countdown > 0) {
                  this.countdown--;
                } else {
                  clearInterval(this.timer);
                  this.$router.push(this.localePath("/"));
                }
              }, 1000);
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
      }
    },
  },
  beforeUnmount() {
    clearInterval(this.timeout);
    clearInterval(this.timer);
  },
};
</script>

<style scoped>
.title {
  font-weight: 700;
  font-size: 26px;
  line-height: 34px;
  letter-spacing: 0.02em;
  color: #232323;
}
</style>