From edf30229114e263f6da283cad98cc7d7e0c2785a Mon Sep 17 00:00:00 2001
From: Janie <109517022+Janie06@users.noreply.github.com>
Date: Wed, 22 Mar 2023 15:50:43 +0800
Subject: [PATCH] =?UTF-8?q?fix=20=E6=9C=83=E5=93=A1=E8=AA=8D=E8=AD=89?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 登入時會員未認證
2. 忘記密碼時會員未認證
3. 認證會員Modal內容調整、取消按鈕
---
 .../newComponent/modal/VerifyCodeModal.vue    |  23 ++-
 FrontEnd/pages/user/forgot.vue                | 141 +++++++++++++-----
 FrontEnd/pages/user/index.vue                 |  66 +++++---
 FrontEnd/pages/user/signUp.vue                |  28 +---
 4 files changed, 168 insertions(+), 90 deletions(-)

diff --git a/FrontEnd/components/newComponent/modal/VerifyCodeModal.vue b/FrontEnd/components/newComponent/modal/VerifyCodeModal.vue
index 07947f9..6a867ab 100644
--- a/FrontEnd/components/newComponent/modal/VerifyCodeModal.vue
+++ b/FrontEnd/components/newComponent/modal/VerifyCodeModal.vue
@@ -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;
     }
   }
 };
diff --git a/FrontEnd/pages/user/forgot.vue b/FrontEnd/pages/user/forgot.vue
index 641cff7..9c26fc3 100644
--- a/FrontEnd/pages/user/forgot.vue
+++ b/FrontEnd/pages/user/forgot.vue
@@ -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);
diff --git a/FrontEnd/pages/user/index.vue b/FrontEnd/pages/user/index.vue
index 87c704b..3fbe15a 100644
--- a/FrontEnd/pages/user/index.vue
+++ b/FrontEnd/pages/user/index.vue
@@ -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(
diff --git a/FrontEnd/pages/user/signUp.vue b/FrontEnd/pages/user/signUp.vue
index 31b62d6..5af154e 100644
--- a/FrontEnd/pages/user/signUp.vue
+++ b/FrontEnd/pages/user/signUp.vue
@@ -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);
         });
     },