|
|
|
@ -14,216 +14,216 @@ |
|
|
|
<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" |
|
|
|
: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 |
|
|
|
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> |
|
|
|
<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> |
|
|
|
<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 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 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> |
|
|
|
<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 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> |
|
|
|
@ -449,9 +449,7 @@ export default { |
|
|
|
letter-spacing: 0.02em; |
|
|
|
color: #232323; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
#app { |
|
|
|
overflow-y: hidden; |
|
|
|
|
