You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
538 lines
19 KiB
538 lines
19 KiB
<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>
|
|
<!-- 會員未認證Modal -->
|
|
<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>
|
|
<!-- 重啟帳號Modal -->
|
|
<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>
|
|
<!-- 忘記密碼信件Modal -->
|
|
<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>
|
|
<!-- 認證碼Modal -->
|
|
<VerifyCode @user-verifyCode="userVerifyCode" @resend-mail="resendVerifyEmail" :error="error" :account="userData.Account"></VerifyCode>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import VerifyCode from "@/components/newcomponent/modal/VerifyCodeModal.vue";
|
|
export default {
|
|
name: "Forgot",
|
|
layout: "login",
|
|
auth: false,
|
|
components: {
|
|
VerifyCode
|
|
},
|
|
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,
|
|
error: false,
|
|
userInfo: {},
|
|
user: {
|
|
Account: '',
|
|
Password: '',
|
|
}
|
|
};
|
|
},
|
|
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.resendValid = false;
|
|
this.$axios
|
|
.post(`/trending/api/Signup/SendForgotMail?Email=${this.Email}`)
|
|
.then((response) => {
|
|
//console.log(response);
|
|
if(response.data.STATUSCODE == "404"){
|
|
if(response.data.MSG == "0"){
|
|
//this.dialog = true; //原先的認證moadl
|
|
this.resendVerifyEmail();
|
|
this.$modal.show('VerifyCode');
|
|
}else if(response.data.MSG == "2"){
|
|
this.deleteDialog = true;
|
|
}else{
|
|
this.wrongMessageActive = true;
|
|
|
|
}
|
|
}
|
|
else 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.$axios
|
|
.post(
|
|
`/trending/api/Signup/ReSendVerifyMail?Email=${this.Email}`
|
|
)
|
|
.then((response) => {
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
let data = response.data.DATA.rel
|
|
if(data){
|
|
this.userInfo = data;
|
|
this.resendValid = true;
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
},
|
|
//認證會員
|
|
userVerifyCode(value){
|
|
this.error = false;
|
|
this.$axios
|
|
.get(
|
|
`/trending/api/Signup/VerifyAccount?OrgID=${this.userInfo.OrgID}&MemberID=${this.userInfo.MemberID}&Code=${value}`
|
|
)
|
|
.then((response) => {
|
|
//console.log(response);
|
|
if(response.data.STATUSCODE == 200){
|
|
this.$modal.hide('VerifyCode');
|
|
this.decrypt();
|
|
}
|
|
else{
|
|
this.error = true;
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
//解密
|
|
decrypt(){
|
|
this.$axios
|
|
.post(
|
|
`/trending/api/Signup/DecryptPassword?OrgID=${this.userInfo.OrgID}&Account=${this.userInfo.Account}`
|
|
)
|
|
.then((response) => {
|
|
//console.log(response);
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
let data = response.data.DATA.rel;
|
|
if(data){
|
|
this.user.Password = data;
|
|
this.Login();
|
|
}
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
//重啟帳號
|
|
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);
|
|
});
|
|
},
|
|
//登入
|
|
async Login(){
|
|
this.user.Account = this.userInfo.Account;
|
|
const response = await this.$auth.loginWith('local', { data: this.user });
|
|
if(response.data.STATUSCODE == 200){
|
|
let data = response.data.DATA;
|
|
if(data.authtoken){
|
|
const authtoken = data.authtoken;
|
|
this.$auth.$storage.removeUniversal('authtoken');
|
|
this.$auth.$storage.setUniversal('authtoken', authtoken);
|
|
let path = this.$auth.$storage.getUniversal('userBeforePath');
|
|
if(path == "/user"){
|
|
path = "/";
|
|
}
|
|
this.$router.push({path: path});
|
|
}
|
|
}
|
|
}
|
|
},
|
|
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>
|