|
|
<template> <div :class="['tw-h-full tw-p-[30px] tw-bg-white md:tw-bg-primary-pale']"> <div class="xl:tw-grid xl:tw-grid-cols-[auto_414px] xl:tw-gap-[96px] xl:tw-max-w-[1246px] xl:tw-mx-auto xl:tw-px-[60px]"> <div class="tw-hidden xl:tw-block xl:tw-mt-[30px]"> <p class="welcome tw-text-primary-light">{{ $t("Welcome to ShowEasy") }}</p> <p class="sub tw-text-neutral-400"> {{ $t( "Your best guide from trip to show and from show to the world." ) }} </p> <img class="mt-11 ml-15" :src="require('@/assets/img/UserLoginMain.png')" /> </div> <div class="md:tw-w-[414px] md:tw-mx-auto"> <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="getPath == null"> <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> <div v-if="wrongMessageActive" class="warning--text text-size-14 ps-1 mb-3"> {{ $t('The Email entered is incorrect') }} </div> <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" :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="getPath != null && resetSuccess == false"> <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" :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 tw-text-white tw-bg-primary-default tw-border-primary-default']" > {{ $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> <v-dialog v-model="dialog" :width="$vuetify.breakpoint.smAndUp ? 423 : 294" @click:outside="colseDialog()"> <v-card class="tw-p-[30px]" :height="$vuetify.breakpoint.smAndUp ? 289 : 290"> <v-spacer class="d-flex align-center tw-justify-between tw-mb-[30px]"> <div class="tw-text-[20px] tw-font-bold tw-text-black"> {{ $t("Verify your email") }} </div> <v-btn @click="colseDialog()" icon> <v-icon> mdi-close </v-icon> </v-btn> </v-spacer> <v-spacer class="tw-mb-[40px]"> <div class="tw-text-[16px] tw-text-neutrals-800"> {{ $t("Oops! Seems like you haven't verified your email,please click the button below to resend a verification email.")}} </div> </v-spacer> <button @click="resendVerifyEmail()" class="tw-bg-primary-1 hover:tw-bg-primary-light tw-text-white tw-text-[18px] tw-rounded-[16px] tw-px-[77px] tw-py-[13px]"> {{ $t("Resend verification email") }} </button> <!-- <v-btn @click="resendVerifyEmail" class="primary tw-text-[18px] tw-w-auto" rounded :disabled="countdown > 0"> <span v-if="countdown > 0"> {{ `(${this.countdown})` }} </span> </v-btn> --> </v-card> </v-dialog> <v-dialog v-model="deleteDialog" :width="$vuetify.breakpoint.smAndUp ? 423 : 294" @click:outside="colseDialog()"> <v-card class="tw-p-[30px]" :height="$vuetify.breakpoint.smAndUp ? 289 : 290"> <v-spacer class="d-flex tw-justify-between align-center tw-mb-[30px]"> <div class="tw-text-[20px] tw-text-black tw-font-bold"> {{ $t("Reactivate your account") }} </div> <v-btn @click="colseDialog()" icon> <v-icon> mdi-close </v-icon> </v-btn> </v-spacer> <v-spacer class="tw-mb-[40px]"> <div class="tw-text-[16px] tw-text-neutrals-800 tw-font-bold"> {{ $t("Welcome back!")}} </div> <div class="tw-text-[16px] tw-text-neutrals-800"> {{ $t("Looks like your account has been deactivated.")}} <br /> {{ $t("Would you like to reactivate this account?")}} </div> </v-spacer> <button @click="ReactivateAccount()" class="tw-bg-primary-1 tw-text-white hover:tw-bg-primary-light tw-text-[18px] tw-rounded-[16px] tw-px-[86px] tw-py-[13px]"> {{ $t("Reactivate my account") }} </button> <!-- <v-btn class="primary tw-w-auto" rounded :disabled="countdown > 0"> <span v-if="countdown > 0"> {{ `(${this.countdown})` }} </span> </v-btn> --> </v-card> </v-dialog> <v-dialog v-model="chackMailDialog" :width="$vuetify.breakpoint.smAndUp ? 463 : 294" @click:outside="colseDialog()"> <v-card class="tw-p-[30px]" :height="$vuetify.breakpoint.smAndUp ? 289 : 290"> <v-spacer class="d-flex tw-justify-between align-center tw-mb-[30px]"> <div class="tw-text-[20px] tw-text-black tw-font-bold"> {{ $t("Check your email") }} </div> <v-btn @click="colseDialog()" icon> <v-icon> mdi-close </v-icon> </v-btn> </v-spacer> <v-spacer class="tw-mb-[40px]"> <div class="tw-text-[16px] tw-text-neutrals-800 tw-font-bold"> {{ $t("We've sent a password reset link to")}} </div> <div class="tw-text-[16px] tw-text-primary-1"> {{ Email }} </div> <div class="tw-text-[16px] tw-text-neutrals-800 tw-font-bold"> {{ $t("Please tap the link inside that email to continue.")}} </div> </v-spacer> <button @click="colseDialog()" class="tw-bg-primary-1 tw-text-white hover:tw-bg-primary-light tw-text-[18px] tw-rounded-[16px] tw-px-[169px] tw-py-[13px]"> {{ $t("OK") }} </button> <!-- <v-btn class="primary tw-w-auto" rounded :disabled="countdown > 0"> <span v-if="countdown > 0"> {{ `(${this.countdown})` }} </span> </v-btn> --> </v-card> </v-dialog> </div> </div> </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: 5, Email: "", userConfirmPass: "", userData: { //user_id: "",
//auth_code: "",
Password: "", }, result: "", getPath: null, 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"), }, dialog: false, deleteDialog: false, wrongMessageActive: false, chackMailDialog: false, }; }, created(){ this.$auth.$storage.removeUniversal('userPassword'); this.$auth.$storage.removeUniversal('userAccount'); this.getPAth();
}, methods: { colseDialog(){ this.dialog = false; if(this.dialog == false){ this.resendValid = false; } this.deleteDialog = false; if(this.deleteDialog == false){ this.resendValid = false; } this.chackMailDialog = false; if(this.chackMailDialog == false){ this.resendValid = false; } }, getPAth(){ let vm = this; if (this.$route.query.Email) { vm.getPath = vm.$route.query.Email; }else{ vm.getPath = null; } }, sendForgotMail() { this.countdown = 60; this.resendValid = false; this.$axios .post(`/trending/api/Signup/SendForgotMail?Email=${this.Email}`) .then((response) => { //console.log(JSON.stringify(response));
if(response.data.STATUSCODE == "404"){ this.resendValid = false; if(response.data.MSG == "0"){ this.dialog = true; }else if(response.data.MSG == "2"){ this.deleteDialog = true; }else{ this.wrongMessageActive = true; } } if(response && response.data && response.data.DATA && response.data.DATA.rel){ let data = response.data.DATA.rel if(data){ this.result = data; this.disableBtn = false; this.resendValid = false;
this.chackMailDialog = true;
this.disableBtn = !this.disableBtn; this.timeout = setInterval(() => { if (this.countdown > 0) { this.countdown--; } if (this.countdown == 0) { this.resendValid = true; this.disableBtn = true; 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.getPath}&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); }); } }, resendVerifyEmail() { this.countdown = 60; this.$axios .post( `/trending/api/Signup/ReSendVerifyMail?Email=${this.Email}` ) .then((response) => { //console.log(JSON.stringify(response))
if(response && response.data){
this.dialog = false; this.resendValid = true;
clearInterval(this.timer); this.timer = setInterval(() => { if (this.countdown > 0) { this.countdown--; } if (this.countdown === 0) { clearInterval(this.timer); } }, 1000); } }) .catch((error) => { console.log(error); }); },
ReactivateAccount(){ this.$axios .post( `/trending/api/Members/ReactivateAccount?Email=${this.Email}` ) .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.deleteDialog = false; window.location.href = '/';
} } }) .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><style lang="scss" scoped>#app { overflow-y: hidden;}
.welcome { color: #f5cda8; font-family: Damion; font-size: 48px; margin-bottom: 0px; font-weight: 400; line-height: 66px; letter-spacing: 0.02em;}
.sub { color: #9c9c9c; font-style: italic; font-weight: 400; font-size: 22px; line-height: 29px; letter-spacing: 0.02em;}</style>
|
