|
|
|
@ -67,47 +67,65 @@ |
|
|
|
: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',valid?'tw-text-white tw-bg-primary-default tw-border-primary-default':'tw-text-base-disable tw-bg-neutral-100 tw-border-neutral-100']">{{ |
|
|
|
$t("Login") |
|
|
|
}}</button></div> |
|
|
|
<v-dialog v-model="resendDialog" :width=" $vuetify.breakpoint.smAndUp ? 423 : 294 " |
|
|
|
<v-dialog v-model="dialog" :width="$vuetify.breakpoint.smAndUp ? 423 : 294" |
|
|
|
@click:outside="$router.push(localePath('/user'))"> |
|
|
|
<v-card class="pa-7 " v-if="!verifyEmailSent" :height=" $vuetify.breakpoint.smAndUp ? 249 : 206 "> |
|
|
|
<v-spacer class="d-flex"> |
|
|
|
<v-spacer class="text-size-20 neutrals--text text--darken-5">{{ $t('Verify your email') }}</v-spacer> |
|
|
|
<v-btn icon @click="resendDialog = !resendDialog"> |
|
|
|
<v-icon>mdi-close</v-icon> |
|
|
|
<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="$router.push(localePath('/user'))" icon> |
|
|
|
<v-icon> mdi-close </v-icon> |
|
|
|
</v-btn> |
|
|
|
</v-spacer> |
|
|
|
<v-spacer class="text-size-16 my-7 neutrals--text text--darken-4"> |
|
|
|
{{ $t("We've sent a verification email to")}} |
|
|
|
<br /> |
|
|
|
<span class="primary--text"> |
|
|
|
{{ userData.Password }} |
|
|
|
</span>. {{ $t("Please click the link within to activate your account.") }} |
|
|
|
<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> |
|
|
|
<v-btn @click="resendVerifyEmail" class="primary no-text-transform" width="100%" rounded> |
|
|
|
<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") }} |
|
|
|
</v-btn> |
|
|
|
</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-card class="pa-7 " v-else :height=" $vuetify.breakpoint.smAndUp ? 249 : 206 "> |
|
|
|
<v-spacer class="text-size-20 neutrals--text text--darken-5"> |
|
|
|
{{ $t('Verify your email') }} |
|
|
|
</v-dialog> |
|
|
|
<v-dialog v-model="deleteDialog" :width="$vuetify.breakpoint.smAndUp ? 423 : 294" |
|
|
|
@click:outside="$router.push(localePath('/user'))"> |
|
|
|
<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="$router.push(localePath('/user'))" icon> |
|
|
|
<v-icon> mdi-close </v-icon> |
|
|
|
</v-btn> |
|
|
|
</v-spacer> |
|
|
|
<v-spacer class="text-size-16 my-7 neutrals--text text--darken-4"> |
|
|
|
{{ $t("We've sent a verification email to") |
|
|
|
}} |
|
|
|
<br /> |
|
|
|
<span class="primary--text"> |
|
|
|
{{ userData.Password }} |
|
|
|
</span>. {{ $t("Please click the link within to activate your account.") }} |
|
|
|
<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> |
|
|
|
<v-btn @click="resendVerifyEmail" class="primary no-text-transform" width="100%" rounded |
|
|
|
<button 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"> |
|
|
|
{{ $t("Resend") }} |
|
|
|
<span v-if="countdown > 0"> |
|
|
|
{{ `(${this.countdown})` }} |
|
|
|
</span> |
|
|
|
</v-btn> |
|
|
|
</v-btn> --> |
|
|
|
</v-card> |
|
|
|
</v-dialog> |
|
|
|
</v-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -126,7 +144,7 @@ |
|
|
|
verifyEmailSent: false, |
|
|
|
valid: false, |
|
|
|
remember: false, |
|
|
|
countdown: 60, |
|
|
|
countdown: 0, |
|
|
|
userData: { |
|
|
|
Account: '', |
|
|
|
Password: '', |
|
|
|
@ -137,6 +155,8 @@ |
|
|
|
// checkPassword: v => (/(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])/.test(v) && v.length >= 8 && v.length <= 20) || '請輸入密碼', |
|
|
|
checkPassword: v => v.length >= 1 || '請輸入密碼', |
|
|
|
}, |
|
|
|
deleteDialog: false, |
|
|
|
dialog: false, |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
@ -186,6 +206,14 @@ |
|
|
|
} |
|
|
|
}else if(response.data.STATUSCODE==500){ |
|
|
|
that.$auth.redirect('login'); |
|
|
|
}else if(response.data.STATUSCODE==401){ |
|
|
|
if(response.data.MSG == "0"){ |
|
|
|
this.dialog = true; |
|
|
|
}else if(response.data.MSG == "2"){ |
|
|
|
this.deleteDialog = true; |
|
|
|
}else if(response.data.MSG == "帳號或密碼不正確"){ |
|
|
|
this.wrongMessageActive = true; |
|
|
|
} |
|
|
|
}else{ |
|
|
|
// that.resendDialog = !that.resendDialog; |
|
|
|
that.wrongMessageActive = true; |
|
|
|
@ -198,18 +226,31 @@ |
|
|
|
} |
|
|
|
}, |
|
|
|
resendVerifyEmail() { |
|
|
|
this.countdown = 60 |
|
|
|
// this.$axios.get(`/member/users/resend/${this.userData.email}?lang=${this.$i18n.locale}`) |
|
|
|
// .then((res) => { |
|
|
|
// clearInterval(this.timer) |
|
|
|
// this.verifyEmailSent = true |
|
|
|
// this.timer = setInterval(() => { |
|
|
|
// if (this.countdown > 0) { this.countdown-- } |
|
|
|
// if (this.countdown === 0) { clearInterval(this.timer) } |
|
|
|
// }, 1000) |
|
|
|
// }) |
|
|
|
// .catch((err) => { console.log(err); }) |
|
|
|
}, |
|
|
|
this.countdown = 60; |
|
|
|
this.$axios |
|
|
|
.post( |
|
|
|
`/trending/api/Signup/ReSendVerifyMail?Email=${this.userData.Account}` |
|
|
|
) |
|
|
|
.then((response) => { |
|
|
|
//console.log(JSON.stringify(response)) |
|
|
|
if(response && response.data){ |
|
|
|
|
|
|
|
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); |
|
|
|
}); |
|
|
|
|
|
|
|
}, |
|
|
|
updateValid(){ |
|
|
|
if(this.userData.Account !=='' && this.userData.Password !==''){ |
|
|
|
this.valid = true; |
|
|
|
|
Janie
2 years ago