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.
376 lines
15 KiB
376 lines
15 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]">
|
|
<v-spacer v-if="emailSignUp">
|
|
<h1 class="tw-text-[40px] tw-font-bold tw-mb-[20px] md:tw-text-[24px] md:tw-mb-[14px]">{{ $t("Sign Up") }}</h1>
|
|
<p class="tw-body-3 tw-text-neutral-400 tw-mb-[16px] md:tw-mb-[12px]">
|
|
{{ $t("Welcome to ShowEasy!") }}
|
|
</p>
|
|
<p class="tw-body-3 tw-mb-[45px] md:tw-mb-[32px]">
|
|
{{ $t("Already have an account?") }}
|
|
<nuxt-link :to="localePath('/user')" class="primary--text text-decoration-none">{{ $t("Login") }}</nuxt-link>
|
|
</p>
|
|
<div class="tw-grid tw-grid-cols-1 tw-gap-[10px] md:tw-gap-[12px]">
|
|
<!-- <button @click="googleLogin"
|
|
class="tw-flex tw-justify-center tw-items-center tw-w-full tw-py-[8px] tw-rounded-[16px] tw-border tw-border-solid tw-text-black tw-border-neutrals-200"><img
|
|
width="24px" height="24px" src="~/assets/img/g-normal.png" class="mr-5" />{{ $t("Sign up with Google")
|
|
}}</button>
|
|
<button @click="facebookLogin"
|
|
class="tw-flex tw-justify-center tw-items-center tw-w-full tw-py-[8px] tw-rounded-[16px] tw-border tw-border-solid tw-text-black tw-border-neutrals-200"><img
|
|
width="20px" height="20px" src="~/assets/img/f_logo_RGB-Blue_72.png" class="mr-5" />
|
|
{{ $t("Sign up with Facebook") }}
|
|
</button> -->
|
|
<button @click="emailSignUp = !emailSignUp"
|
|
class="tw-flex tw-justify-center tw-items-center tw-w-full tw-py-[8px] tw-rounded-[16px] tw-border tw-border-solid tw-text-black tw-border-neutrals-200">
|
|
<unicon name="envelope" width="20px" height="20px"
|
|
class="tw-flex tw-justify-center tw-items-center tw-mr-[20px]">
|
|
</unicon>{{ $t("Sign up with Email") }}
|
|
</button>
|
|
</div>
|
|
</v-spacer>
|
|
<v-spacer v-if="!emailSignUp">
|
|
<p class="title">{{ $t("Sign up with Email") }}</p>
|
|
<p class="neutrals--text text--darken-3 text-size-14">
|
|
{{ $t("Welcome to ShowEasy!") }}
|
|
</p>
|
|
<v-form v-model="valid">
|
|
<v-text-field v-model="user.FirstName" background-color="neutrals darken-1"
|
|
:label="this.$t('First Name') + '*'" placeholder="" filled rounded dense single-line :rules="[rules.require]">
|
|
</v-text-field>
|
|
<v-text-field v-model="user.LastName" background-color="neutrals darken-1"
|
|
:label="this.$t('Last Name') + '*'" placeholder="" filled rounded dense single-line :rules="[rules.require]">
|
|
</v-text-field>
|
|
<v-text-field v-model="user.Email" background-color="neutrals darken-1" :label="this.$t('Email') + '*'"
|
|
filled rounded dense single-line :rules="[rules.email, rules.require]" validate-on-blur></v-text-field>
|
|
<v-text-field v-model="user.Password" background-color="neutrals darken-1"
|
|
:label="this.$t('Password') + '*'" :type="showPass ? 'text' : 'password'" placeholder="" filled rounded dense
|
|
single-line :rules="[rules.checkPassword, rules.require]" :hint="
|
|
this.$t(
|
|
'userProfile.passwordsHint'
|
|
)
|
|
" persistent-hint :append-icon="showPass ? 'mdi-eye' : 'mdi-eye-off'" @click:append="showPass = !showPass"
|
|
validate-on-blur></v-text-field>
|
|
<v-text-field v-model="confirmPasswordText" background-color="neutrals darken-1"
|
|
:label="this.$t('Confirm Password') + '*'" :type="showConfirmPass ? 'text' : 'password'" placeholder="" filled
|
|
rounded dense single-line :rules="[rules.checkConfirmPassword, rules.require]"
|
|
:append-icon="showConfirmPass ? 'mdi-eye' : 'mdi-eye-off'" @click:append="showConfirmPass = !showConfirmPass"
|
|
validate-on-blur></v-text-field>
|
|
</v-form>
|
|
<v-checkbox v-model="user.Subscribe" class="mt-n2 ml-1">
|
|
<template v-slot:label>
|
|
<span class="neutrals--text text--darken-4 text-size-14">
|
|
{{ $t("Subscribe to ShowEasy\’s newsletter") }}
|
|
</span>
|
|
</template>
|
|
</v-checkbox>
|
|
<div class="md:tw-flex md:tw-justify-center md:tw-items-center">
|
|
<button @click="userRegister" :disabled="!validFormat" :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("Sign Up") }}
|
|
</button>
|
|
</div>
|
|
<!-- 原註冊流程Modal(信箱連結認證) -->
|
|
<v-dialog v-model="dialog" :width="$vuetify.breakpoint.smAndUp ? 423 : 294"
|
|
@click:outside="$router.push(localePath('/user'))">
|
|
<v-card class="pa-7" :height="$vuetify.breakpoint.smAndUp ? 249 : 290">
|
|
<v-spacer class="d-flex align-center text-size-20 neutrals--text text--darken-5">
|
|
{{ $t("Verify your email") }}
|
|
<v-spacer></v-spacer>
|
|
<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">{{ user.Email }}</span>{{
|
|
$t(". Please click the link within to activate your account.")
|
|
}}
|
|
</v-spacer>
|
|
<v-btn @click="resendVerifyEmail" class="primary no-text-transform" width="153px" rounded
|
|
:disabled="countdown > 0">
|
|
{{ $t("Resend") }}
|
|
<span v-if="countdown > 0">
|
|
{{ `(${this.countdown})` }}
|
|
</span>
|
|
</v-btn>
|
|
</v-card>
|
|
</v-dialog>
|
|
<!-- 帳號已存在Modal -->
|
|
<v-dialog v-model="errorDialog" :width="$vuetify.breakpoint.smAndUp ? 423 : 294">
|
|
<v-card class="pa-7 border-radius-16" :max-height="$vuetify.breakpoint.smAndUp ? 249 : 290">
|
|
<v-spacer class="d-flex align-center text-size-20 neutrals--text text--darken-5">
|
|
{{ $t("Error") }}
|
|
<v-spacer></v-spacer>
|
|
<v-btn @click="errorDialog = !errorDialog" 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("Same email has been created already.") }}
|
|
</v-spacer>
|
|
<v-spacer class="d-flex justify-center">
|
|
<v-btn class="border-radius-16" color="primary" @click="errorDialog = !errorDialog">{{ $t("ok") }}</v-btn>
|
|
</v-spacer>
|
|
</v-card>
|
|
</v-dialog>
|
|
<p align="center" class="neutrals--text text--darken-3 text-size-14 mt-7">
|
|
{{ $t("By signing up,") }}<br />
|
|
{{ $t("you agree to the") }}
|
|
<nuxt-link :to="localePath('/termsandconditions')" target="_blank" class="text-decoration-none">
|
|
{{ $t("Terms & Conditions") }}</nuxt-link>
|
|
{{ $t("and") }}
|
|
<nuxt-link :to="localePath('/privacypolicy')" target="_blank" class="text-decoration-none">
|
|
{{ $t("Privacy Policy") }}</nuxt-link>
|
|
</p>
|
|
<p align="center" class="neutrals--text text--darken-5 text-size-14">
|
|
{{ $t("Already have an account?") }}
|
|
<nuxt-link :to="localePath('/user')" class="primary--text text-decoration-none">{{ $t("Login") }}</nuxt-link>
|
|
</p>
|
|
</v-spacer>
|
|
<loading :isLoading="isPageLoading"></loading>
|
|
<VerifyCode @user-verifyCode="userVerifyCode" @resend-mail="resendVerifyEmail" :error="error" :account="user.Account"></VerifyCode>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import loading from "@/components/newComponent/loading/loading.vue";
|
|
import VerifyCode from "@/components/newcomponent/modal/VerifyCodeModal.vue";
|
|
export default {
|
|
name: "SignUp",
|
|
layout: "login",
|
|
auth: false,
|
|
components: {
|
|
loading,
|
|
VerifyCode
|
|
},
|
|
data() {
|
|
return {
|
|
valid: false,
|
|
showPass: false,
|
|
showConfirmPass: false,
|
|
emailSignUp: true,
|
|
Subscribe: true,
|
|
dialog: false,
|
|
errorDialog: false,
|
|
btnText: "Sign up",
|
|
confirmPasswordText: "",
|
|
countdown: 60,
|
|
isPageLoading: false,
|
|
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"
|
|
),
|
|
checkConfirmPassword: (v) =>
|
|
this.confirmPasswordText === this.user.Password ||
|
|
this.$t("Your password and confirmation password do not match"),
|
|
},
|
|
user: {
|
|
FirstName: "",
|
|
LastName: "",
|
|
Account: "",
|
|
Password: "",
|
|
Email: "",
|
|
Subscribe: true,
|
|
},
|
|
signUp: false,
|
|
userInfo: {},
|
|
error: false,
|
|
userData: {
|
|
Account: '',
|
|
Password: '',
|
|
},
|
|
};
|
|
},
|
|
watch: {
|
|
signUp: {
|
|
handler: function () {
|
|
if (this.signUp == true) {
|
|
this.$auth.$storage.removeUniversal("userPassword");
|
|
this.$auth.$storage.removeUniversal("userAccount");
|
|
}
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
//會員註冊
|
|
userRegister() {
|
|
const postUserData = { ...this.user };
|
|
this.isPageLoading = true;
|
|
this.$axios
|
|
.post(
|
|
`/trending/api/Signup/SignupWithEmail`, postUserData
|
|
)
|
|
.then((response) => {
|
|
//console.log(JSON.stringify(response));
|
|
if(response.data.STATUSCODE == "400"){
|
|
this.errorDialog = true;
|
|
this.isPageLoading = false;
|
|
}
|
|
if(response && response.data && response.data.DATA && response.data.DATA.rel){
|
|
let data = response.data.DATA.rel
|
|
if(data){
|
|
this.userInfo = data;
|
|
this.$modal.show('VerifyCode');
|
|
this.signUp = true;
|
|
this.isPageLoading = false;
|
|
//this.dialog = !this.dialog; //原先的認證流程Modal
|
|
}
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
//重新寄出認證碼
|
|
resendVerifyEmail() {
|
|
this.countdown = 60;
|
|
this.$axios
|
|
.post(
|
|
`/trending/api/Signup/ReSendVerifyMail?Email=${this.user.Email}`
|
|
)
|
|
.then((res) => {
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
//認證會員
|
|
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.Login();
|
|
}
|
|
else{
|
|
this.error = true;
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
//登入
|
|
async Login(){
|
|
this.userData.Account = this.userInfo.Account;
|
|
this.userData.Password = this.user.Password;
|
|
const response = await this.$auth.loginWith('local', { data: this.userData });
|
|
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});
|
|
}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
validFormat() {
|
|
if (this.valid && this.user.Password === this.confirmPasswordText) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
},
|
|
beforeUnmount() {
|
|
clearInterval(this.timer);
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<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;
|
|
}
|
|
|
|
:deep(.v-text-field.v-text-field--enclosed .v-text-field__details) {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
:deep(.v-messages__message) {
|
|
font-size: 14px;
|
|
}
|
|
|
|
$border-style: 1px solid #e5e5e5;
|
|
|
|
.title {
|
|
font-weight: 700;
|
|
font-size: 26px;
|
|
line-height: 34px;
|
|
letter-spacing: 0.02em;
|
|
color: #232323;
|
|
}
|
|
|
|
:deep(.v-text-field.v-text-field--enclosed .v-text-field__details) {
|
|
margin-bottom: 0;
|
|
padding: 0;
|
|
|
|
.v-messages {
|
|
color: #9c9c9c;
|
|
display: none;
|
|
}
|
|
|
|
.v-messages.error--text {
|
|
display: block;
|
|
margin-top: 4px;
|
|
margin-bottom: 16px;
|
|
}
|
|
}
|
|
|
|
|
|
.btn-border {
|
|
border: $border-style;
|
|
}
|
|
</style>
|