nelson.kai
/
ShowEasyFrontEnd
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix 會員認證流程 

1. 登入時會員未認證
2. 忘記密碼時會員未認證
3. 認證會員Modal內容調整、取消按鈕
Dev
Janie 2 years ago
parent
718eaac038
commit
edf3022911
4 changed files with 168 additions and 90 deletions
Split View
  1. 23
      FrontEnd/components/newComponent/modal/VerifyCodeModal.vue
  2. 141
      FrontEnd/pages/user/forgot.vue
  3. 66
      FrontEnd/pages/user/index.vue
  4. 28
      FrontEnd/pages/user/signUp.vue

23
FrontEnd/components/newComponent/modal/VerifyCodeModal.vue
View File

@ -7,7 +7,7 @@
</div>
<div class="tw-mb-[30px]">
<div class="modal-content tw-text-[18px] tw-text-hint">
我們已寄送認證碼至您的電子信箱<span class="tw-text-primary-1 tw-text-[18px]">xxx@email.com</span>
我們已寄送認證碼至您的電子信箱<span class="tw-text-primary-1 tw-text-[18px]">{{ account }}</span>
</div>
<div>
請至電子信箱確認後，在下方輸入驗證碼來啟動您的帳戶。
@ -17,11 +17,11 @@
<div>
<input type="text" v-model="user_VerifyCode" placeholder="請輸入認證碼" :class="['tw-w-full tw-text-[18px] tw-p-[10px] tw-border tw-border-solid tw-mb-[10px] tw-rounded-[8px] md:tw-max-w-[360px]', validation ? 'tw-border-error-default' : 'tw-border-[ef5a5a]']" />
</div>
<div class="tw-flex tw-justify-between">
<div :class="['tw-text-[14px] tw-text-error-default', validation ? 'tw-block' : 'tw-hidden']">
<div :class="['md:tw-flex', validation ? 'md:tw-justify-between' : 'md:tw-justify-end']">
<div :class="['tw-text-[14px] tw-text-error-default', validation ? 'tw-block tw-mb-[10px]' : 'tw-hidden']">
認證碼錯誤
</div>
<button class="tw-grid tw-grid-cols-[18px_100px] tw-gap-[10px]">
<button @click="ResendMail" class="tw-grid tw-grid-cols-[18px_100px] tw-gap-[10px]">
<img src="~/assets/svg/Icon.svg"/>
<div class="tw-text-[14px] tw-text-complementary-1 tw-w-fit">
重新寄送認證碼
@ -30,7 +30,7 @@
</div>
</div>
<div class="tw-grid tw-grid-cols-2 tw-gap-[10px]">
<button @click="$modal.hide('VerifyCode')" class="tw-rounded-[8px] tw-text-primary-1 tw-text-[18px] tw-px-[12px] tw-py-[12px] md:tw-rounded-[16px]">
<button @click="cancel" class="tw-rounded-[8px] tw-text-primary-1 tw-text-[18px] tw-px-[12px] tw-py-[12px] md:tw-rounded-[16px]">
取消
</button>
<button @click="checkVerifyCode" :class="['tw-rounded-[8px] tw-text-[18px] tw-px-[12px] tw-py-[12px] md:tw-rounded-[16px]', validation ? 'tw-text-base-disable tw-bg-neutral-100 tw-border-neutral-100' : 'tw-text-white tw-bg-primary-default tw-border-primary-default']">
@ -54,6 +54,9 @@ export default {
props: {
error: {
type: Boolean,
},
account: {
type: String,
}
},
watch: {
@ -78,7 +81,15 @@ export default {
methods: {
checkVerifyCode(){
this.checkCode = true;
this.$emit('user-VerifyCode', this.user_VerifyCode);
this.$emit('user-verifyCode', this.user_VerifyCode);
},
ResendMail(){
this.$emit('resend-mail');
},
cancel() {
this.$modal.hide('VerifyCode');
this.user_VerifyCode = "";
this.validation = false;
}
}
};

141
FrontEnd/pages/user/forgot.vue
View File

@ -55,7 +55,8 @@
]"
>
{{ $t("Reset Password")
}}<span v-if="disableBtn">({{ this.countdown }})</span>
}}
<!-- <span v-if="disableBtn">({{ this.countdown }})</span> -->
</button>
</div>
</div>
@ -129,6 +130,7 @@
></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">
@ -156,6 +158,7 @@
</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">
@ -188,6 +191,7 @@
</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">
@ -221,7 +225,8 @@
</v-btn> -->
</v-card>
</v-dialog>
<!-- 認證碼Modal -->
<VerifyCode @user-verifyCode="userVerifyCode" @resend-mail="resendVerifyEmail" :error="error" :account="userData.Account"></VerifyCode>
</div>
</div>
</div>
@ -229,10 +234,14 @@
</template>
<script>
import VerifyCode from "@/components/newcomponent/modal/VerifyCodeModal.vue";
export default {
name: "Forgot",
layout: "login",
auth: false,
components: {
VerifyCode
},
data() {
return {
showPass: false,
@ -272,6 +281,12 @@ export default {
deleteDialog: false,
wrongMessageActive: false,
chackMailDialog: false,
error: false,
userInfo: {},
user: {
Account: '',
Password: '',
}
};
},
created(){
@ -303,17 +318,18 @@ export default {
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));
//console.log(response);
if(response.data.STATUSCODE == "404"){
this.resendValid = false;
if(response.data.MSG == "0"){
this.dialog = true;
//this.dialog = true; //原先的認證moadl
this.resendVerifyEmail();
this.$modal.show('VerifyCode');
}else if(response.data.MSG == "2"){
this.deleteDialog = true;
}else{
@ -321,29 +337,26 @@ export default {
}
}
if(response && response.data && response.data.DATA && response.data.DATA.rel){
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);
// 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);
// }
// }, 1000);
}
}
})
@ -351,6 +364,7 @@ export default {
console.log(error);
});
},
//重設密碼
resetUserPass() {
if (
this.userData.Password === this.userConfirmPass &&
@ -383,35 +397,66 @@ export default {
});
}
},
//重寄認證信
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);
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;
}
}, 1000);
}
})
})
.catch((error) => {
console.log(error);
});
},
//認證會員
userVerifyCode(value){
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(
@ -424,7 +469,6 @@ export default {
if(data){
this.deleteDialog = false;
window.location.href = '/';
}
}
})
@ -432,7 +476,24 @@ export default {
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);

66
FrontEnd/pages/user/index.vue
View File

@ -85,7 +85,8 @@
: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="dialog" :width="$vuetify.breakpoint.smAndUp ? 423 : 294"
<!-- 認證會員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]">
@ -104,15 +105,9 @@
<button @click="resendVerifyEmail()" :class="['tw-text-white tw-bg-primary-1 hover:tw-bg-primary-light tw-text-[18px] tw-rounded-[16px] tw-px-[77px] tw-py-[13px]']">
{{ $t("Resend verification email") }}
</button>
<!-- <v-btn @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]"
:disabled="countdown > 0">
{{ $t("Resend verification email") }}
<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">
@ -145,6 +140,7 @@
</v-btn> -->
</v-card>
</v-dialog>
<VerifyCode @user-verifyCode="userVerifyCode" @resend-mail="resendVerifyEmail" :error="error" :account="userData.Account"></VerifyCode>
</div>
</div>
</div>
@ -153,10 +149,14 @@
<script>
import { getFirstName } from "~/utils/common";
import VerifyCode from "@/components/newcomponent/modal/VerifyCodeModal.vue";
export default {
name: "login",
layout: "login",
auth: false,
components: {
VerifyCode
},
data() {
return {
timer: null,
@ -181,6 +181,8 @@
deleteDialog: false,
dialog: false,
expireTime: new Date(),
error: false,
userInfo: {},
}
},
watch: {
@ -199,16 +201,13 @@
created(){
if(this.$auth.$storage.getUniversal('userAccount') && this.$auth.$storage.getUniversal('userPassword')){
this.checkExpireTime();
}
},
mounted(){
if(this.$auth.$storage.getUniversal('userAccount') && this.$auth.$storage.getUniversal('userPassword')){
this.remember = true;
}else{
this.remember = false;
}
var userAccount = this.$auth.$storage.getUniversal('userAccount');
@ -230,6 +229,7 @@
this.deleteDialog = false;
},
//登入
async userLogin() {
let that = this;
if (!that.$refs.loginFormRef.validate()) return;
@ -252,7 +252,8 @@
that.$auth.redirect('login');
}else if(response.data.STATUSCODE==401){
if(response.data.MSG == "0"){
that.dialog = true;
this.resendVerifyEmail();
this.$modal.show('VerifyCode');
}else if(response.data.MSG == "2"){
that.deleteDialog = true;
}else if(response.data.MSG == "帳號或密碼不正確"){
@ -270,22 +271,47 @@
// }
}
},
//重新寄出認證信
resendVerifyEmail() {
this.$axios
.post(
`/trending/api/Signup/ReSendVerifyMail?Email=${this.userData.Account}`
)
.then((response) => {
//console.log(JSON.stringify(response))
if(response && response.data){
this.dialog = 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');
}
}
})
.catch((error) => {
console.log(error);
});
})
.catch((error) => {
console.log(error);
});
},
//認證會員
userVerifyCode(value){
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);
});
},
//重啟帳號
ReactivateAccount(){
this.$axios
.post(

28
FrontEnd/pages/user/signUp.vue
View File

@ -137,7 +137,7 @@
</p>
</v-spacer>
<loading :isLoading="isPageLoading"></loading>
<VerifyCode @user-VerifyCode="userVerifyCode" :error="error"></VerifyCode>
<VerifyCode @user-verifyCode="userVerifyCode" @resend-mail="resendVerifyEmail" :error="error" :account="user.Account"></VerifyCode>
</div>
</div>
</div>
@ -221,7 +221,7 @@ export default {
`/trending/api/Signup/SignupWithEmail`, postUserData
)
.then((response) => {
console.log(JSON.stringify(response));
//console.log(JSON.stringify(response));
if(response.data.STATUSCODE == "400"){
this.errorDialog = true;
this.isPageLoading = false;
@ -232,15 +232,6 @@ export default {
this.userInfo = data;
this.$modal.show('VerifyCode');
this.signUp = true;
// this.timer = setInterval(() => {
// if (this.countdown > 0) {
// this.countdown--;
// }
// if (this.countdown === 0) {
// clearInterval(this.timer);
// }
// }, 1000);
this.isPageLoading = false;
//this.dialog = !this.dialog; //原先的認證流程Modal
}
@ -258,16 +249,6 @@ export default {
`/trending/api/Signup/ReSendVerifyMail?Email=${this.user.Email}`
)
.then((res) => {
//console.log(JSON.stringify(res));
clearInterval(this.timer);
this.timer = setInterval(() => {
if (this.countdown > 0) {
this.countdown--;
}
if (this.countdown === 0) {
clearInterval(this.timer);
}
}, 1000);
})
.catch((err) => {
console.log(err);
@ -280,7 +261,7 @@ export default {
`/trending/api/Signup/VerifyAccount?OrgID=${this.userInfo.OrgID}&MemberID=${this.userInfo.MemberID}&Code=${value}`
)
.then((response) => {
console.log(response);
//console.log(response);
if(response.data.STATUSCODE == 200){
this.$modal.hide('VerifyCode');
this.Login();
@ -288,10 +269,9 @@ export default {
}
else{
this.error = true;
}
})
.catch((err) => {
.catch((err) => {
console.log(err);
});
},

Write Preview
|||||||
100:0
Loading…
Cancel
Save