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($route.query).length < 2">
      <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="user_mail"
          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($route.query).length >= 2 && !resetSuccess">
      <p class="title">{{ $t("Reset Password") }}</p>
      <v-form v-model="resetValid">
        <v-text-field
          v-model="userData.user_new_pass"
          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,
      user_mail: "",
      userConfirmPass: "",
      userData: {
        user_id: "",
        auth_code: "",
        user_new_pass: "",
      },
      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.user_new_pass ||
          this.$t("Your password and confirmation password do not match"),
      },
    };
  },
  methods: {
    sendForgotMail() {
      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);
      this.$axios
        .get(`/member/users/forgot/${this.user_mail}?lang=${this.$i18n.locale}`)
        .then((result) => {})
        .catch((err) => {
          console.log(err);
        });
    },
    resetUserPass() {
      if (
        this.userData.user_new_pass === 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(`/member/users/reset/?lang=${this.$i18n.locale}`, this.userData)
          .then((result) => {
            this.resetSuccess = !this.resetSuccess;
            this.countdown = 5;
            this.timer = setInterval(() => {
              if (this.countdown > 0) {
                this.countdown--;
              } else {
                clearInterval(this.timer);
                this.$router.push(this.localePath("/"));
              }
            }, 1000);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
  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>