From 74e563da7fa6886449fd2be5933e2d4ca5c85f48 Mon Sep 17 00:00:00 2001
From: jack <jack.su@pollex.com.tw>
Date: 星期二, 12 九月 2023 11:25:52 +0800
Subject: [PATCH] [UPDATE] 解決弱點Se: Incorrect definition of Serializable class [UPDATE] 解決弱點Information exposure to log file [UPDATE] 解決弱點Use of hard-coded password

---
 PAMapp/pages/login/index.vue |  230 +++++++++++++++++++++++++++++++++++++++++++--------------
 1 files changed, 172 insertions(+), 58 deletions(-)

diff --git a/PAMapp/pages/login/index.vue b/PAMapp/pages/login/index.vue
index 2aacaec..f25eae7 100644
--- a/PAMapp/pages/login/index.vue
+++ b/PAMapp/pages/login/index.vue
@@ -9,10 +9,10 @@
             <el-row type="flex" class="pt-30">
               <el-button
                 :class="{ 'active': connectDevice === 'MOBILE'}"
-                @click="connectDevice = 'MOBILE'">����Ⅳ</el-button>
+                @click="connectDevice = 'MOBILE'; regenerateImgOfVerification()">����Ⅳ</el-button>
               <el-button
                 :class="{ 'active': connectDevice === 'EMAIL'}"
-                @click="connectDevice = 'EMAIL'">Email</el-button>
+                @click="connectDevice = 'EMAIL'; regenerateImgOfVerification()">Email</el-button>
             </el-row>
           </div>
 
@@ -58,11 +58,31 @@
             </div>
           </div>
 
+          <div class="pam-paragraph" v-if="(!showPhoneOtpCodeField && !showEmailVerifyField)">
+            <div class="pam-consultant-login__title">
+              <div>�����Ⅳ <span class="text--dark-blue fs-16">(����之撠神)</span></div>
+              <div class="text--primary fs-16 cursor--pointer fix-chrome-click--issue"
+                style="margin-left: 16px"
+                @click="regenerateImgOfVerification">������</div>
+            </div>
+            <div class="pam-consultant-login__verifyBlock mt-10">
+              <div class="w-55">
+                <input type="text"
+                  v-model="verificationCode"
+                  maxlength="4"
+                  class="pam-consultant-login__input">
+              </div>
+              <div class="pam-consultant-login__verifyImg">
+                <img :src="imgSrc" alt="撽�Ⅳ">
+              </div>
+            </div>
+          </div>
+
           <!-- mobile 撽�Ⅳ -->
           <template v-if="connectDevice === 'MOBILE'">
             <div v-show="showPhoneOtpCodeField">
               <el-row type="flex" justify="space-between">
-                  <div class="mdTxt">頛詨撽�Ⅳ</div>
+                  <div class="mdTxt">頛詨 OTP 撽�Ⅳ</div>
                   <div class="otp-count-timer">
                     {{counterTime(otpCounterSec)}}
                   </div>
@@ -75,11 +95,11 @@
                     'is-invalid': !otpCode
                   }"
                   v-model="otpCode"
-                  placeholder="隢撓�撽�Ⅳ"
+                  placeholder="隢撓� OTP 撽�Ⅳ"
                   >
               </el-row>
               <div class="error mt-5 mb-10">
-                  <span v-show="otpCounterSec === 0">撽�Ⅳ撌脤�����撽�Ⅳ</span>
+                  <span v-show="otpCounterSec === 0">OTP 撽�Ⅳ撌脤����� OTP 撽�Ⅳ</span>
               </div>
 
               <el-row>
@@ -88,22 +108,23 @@
                   @click="resentOtp('MOBILE')"
                   icon="icon-arrow"
                 >
-                  ��撽�Ⅳ<span
+                  �� OTP 撽�Ⅳ<span
                     class="pam-field-title__hint pl-5"
                     v-if="otpResendCounter !== 0"
                   >({{ otpResendCounter }})</span>
                 </el-button>
+
               </el-row>
             </div>
 
             <el-row>
               <el-button
                   v-if="onPhoneVerifyStep === 'APPLY_OTP'"
-                  :disabled="!phoneNumber || !phoneValid"
+                  :disabled="!phoneNumber || !phoneValid || verificationCode.length !== 4"
                   @click="applyOtpVerification('MOBILE')"
                   icon="icon-arrow"
                 >
-                  ����Ⅳ
+                  ��� OTP 撽�Ⅳ
                 </el-button>
             </el-row>
 
@@ -113,7 +134,7 @@
           <template v-if="connectDevice === 'EMAIL'">
             <el-row v-show="showEmailVerifyField">
               <el-row type="flex" justify="space-between">
-                  <div class="mdTxt">頛詨撽�Ⅳ</div>
+                  <div class="mdTxt">頛詨 OTP 撽�Ⅳ</div>
                   <div class="otp-count-timer">
                     {{counterTime(emailCounterSec)}}
                   </div>
@@ -126,11 +147,11 @@
                     'is-invalid': !emailOtpCode
                   }"
                   v-model="emailOtpCode"
-                  placeholder="隢撓�撽�Ⅳ"
+                  placeholder="隢撓� OTP 撽�Ⅳ"
                   >
               </el-row>
               <div class="error mt-5 mb-10">
-                  <span v-show="emailCounterSec === 0">撽�Ⅳ撌脤�����撽�Ⅳ</span>
+                  <span v-show="emailCounterSec === 0">OTP 撽�Ⅳ撌脤����� OTP 撽�Ⅳ</span>
               </div>
 
               <el-button
@@ -138,20 +159,21 @@
                 icon="icon-arrow"
                 @click="resentOtp('EMAIL')"
               >
-                ��撽�Ⅳ<span
+                �� OTP 撽�Ⅳ<span
                     v-if="emailResendCounter !== 0"
-                    class="pam-field-title__hint pl-5"
+                    class="pam-嚚�field-title__hint pl-5"
                   >({{ emailResendCounter }})</span>
               </el-button>
             </el-row>
 
-            <el-row v-show="!showEmailVerifyField">
+            <el-row>
               <el-button
-                  :disabled="!email || !emailValid"
+                  v-if="onEmailVerifyResendStatus === 'APPLY_OTP'"
+                  :disabled="!email || !emailValid || verificationCode.length !== 4"
                   @click="applyOtpVerification('EMAIL')"
                   icon="icon-arrow"
                 >
-                  ����Ⅳ
+                  ��� OTP 撽�Ⅳ
                 </el-button>
             </el-row>
           </template>
@@ -195,61 +217,41 @@
               class="mdTxt pam-register-dialog__contract"
               ref="contract"
               @scroll="detectContractReadStatus">
-              <h3>����犖鞈��鈭��</h3>
+              <h3>靽�犖憯賭��隞賣�������犖鞈��鈭��</h3>
               <p class="mt-10">
-              �摰�犖鞈��風瘜��������犖鞈���������銝�����
+              靽�犖憯賭��隞賣���嚗�迂��������犖鞈��風瘜�誑銝迂����洵�璇洵鈭��洵�璇洵銝�������蝡臬�銝�����蝡航底�嚗�
               <p>
 
               <p class="mt-10">
-              銝����銝��犖鞈��嚗�����僑�����澈���絞銝�蝺刻���批�璆准����
-              ��蝯⊥撘�(��雿���閰梯�Ⅳ�-MAIL����極雿��)蝑��隞�誑��
-              ���霅��犖銋����
+              銝���犖鞈�������市�瘜����������摰����犖鞈汙銋����澈��Ⅱ隤�
+              鈭箄澈靽 (001)��(040)�����平靘�成閬����鴽日�閬���銋���坐���(059)�����撮鴾��隞�������(069)��祥��恥�蝞∴坐�����(090)�雯鴾瑁頃���隞摮�����(148)�矽��絞閮��弦����(157)�隞�����平�閮��������摰�平���(181)��
               <p>
 
               <p class="mt-10">
-              鈭������犖鞈��風瘜����誘銋�������蝘��風�蝑�����
-              ���������犖鞈���
+              鈭�����犖鞈汙嚗�祕憪�����Ⅳ�摮隞嗡縑蝞勗�隞��撟喳慦�“�����垣閰X����閬������犖鞈���
               <p>
 
               <p class="mt-10">
-              銝���������������������犖鞈���
+              銝��犖鞈汙鴽銋�������情�撘��
+              (銝�)������膩����翵平���敹����成閬��靽������
+              (鈭�)���嚗�犖鞈��撠情���銋����
+              (銝�)撠情嚗������矽�甈����������撟喳�����誨��嚗������蝡舫���“����撅砌��嚗��
+              (���)�撘��瘜成閬����撘��
               </p>
 
               <p class="mt-10">
-              �������������平���暑�������銝剛瘞���������犖鞈���
+              ��������洵銝�������蝡臬停���靽����蝡臭��犖鞈汙敺�蝙銋���撘��
+              (銝�)敺���翵蝙銋����
+              �����閰U���閬賣���ˊ蝯西�ˊ���
+              ����隢�����迤��
+              ����隢��迫�����坐����������
+              (鈭�)翵蝙甈��撘����蝡臬�������祥摰X������� 0809-0809-68 銵蝙銝膩甈��(撠������ : �曹� ~ �曹�� 08:00-20:00 ���勗����� 09:00-17:30嚗������曹�-�望24撠��)��
               </p>
 
               <p class="mt-10">
-              鈭���������摰���甈∩誑憭�璆凋�撱��恐撠����誑��隞���������銋����嚗�������犖鞈���
+              鈭�蝡臬�銵捱摰�����犖鞈����嚗���蝡舀������蒂��撟喳����犖鞈����撌脣���膩鈭������蝡臭���������迤蝣箔�������瘜�蝙��撟喳�脰�“�������垣閰Y�����
               </p>
 
-              <p class="mt-10">
-              ���靘�犖鞈��風瘜洵 3 璇���停����犖鞈�����蝙銋���嚗�
-              (銝�) �閰X���閬賬��
-              (鈭�) 隢�ˊ蝯西�ˊ���
-              (銝�) 隢����甇���
-              (���) 隢��迫����������
-              (鈭�) 隢����
-              ����蝙銝膩甈��撠������������������痊隞颯�靘�
-              �犖鞈��風瘜洵 14 璇�������銵雿平鞎餌��
-              </p>
-
-              <p class="mt-10">
-              銝������迤蝣箔��犖鞈�����瘜����摰�����平����
-              </p>
-
-              <p class="mt-10">
-              �����平���閬���隞�������犖鞈����������銋痊��
-              </p>
-
-              <p class="mt-10">
-              銋��閫�甇支����蝚血��犖鞈��風瘜����������������迨���
-              ��嚗�敺��撽��
-              �犖鞈�������
-              銝��鈭箏歇�����眼���膩��鈭���
-              鈭�鈭箏��眼����������鈭箔��犖鞈��誑��隞����������
-              ���������
-              </p>
             </div>
           </el-row>
           <el-row class="pt-30">
@@ -334,7 +336,7 @@
 
 <script lang="ts">
 import { namespace } from 'nuxt-property-decorator';
-import { Vue, Component, Ref } from 'vue-property-decorator';
+import { Vue, Component, Ref, Watch } from 'vue-property-decorator';
 import { OtpErrorCode } from '~/shared/models/enum/otpErrorCode';
 import { Role } from '~/shared/models/enum/Role';
 import { LoginRequest } from '~/shared/models/loginRequest.model';
@@ -378,6 +380,9 @@
   emailResendInterval: any;
   emailOtpIndexKey!: string;
 
+  verificationCode = '';
+  imgSrc = '';
+
   autoRedirectCounter = 3;
   autoRedirectInterval: any;
 
@@ -395,6 +400,20 @@
 
   previousPath = '';
 
+  @Watch('onEmailVerifyResendStatus')
+  onEmailVerifyResendStatusChange() {
+    if (this.onEmailVerifyResendStatus === 'APPLY_OTP') {
+      this.regenerateImgOfVerification();
+    }
+  }
+
+  @Watch('onPhoneVerifyStep')
+  onPhoneVerifyStepChange() {
+    if (this.onPhoneVerifyStep === 'APPLY_OTP') {
+        this.regenerateImgOfVerification();
+    }
+  }
+
   /////////////////////////////////////////////////////
 
   beforeRouteEnter (to, from, next) {
@@ -406,6 +425,7 @@
   mounted() {
     this.parsePhoneOtpTimeFromStorage();
     this.parseEmailOtpTimeFromStorage();
+    this.regenerateImgOfVerification();
   }
 
   private parsePhoneOtpTimeFromStorage() {
@@ -444,6 +464,14 @@
   }
 
   //////////////////////////////////////////////////////////
+
+  regenerateImgOfVerification(): void {
+    loginService.getImgOfVerification().then( imgOfBase64 => {
+        this.imgSrc = imgOfBase64;
+        this.verificationCode = '';
+      }
+    );
+  };
 
   //////////////////// ��
   login() {
@@ -519,7 +547,7 @@
       loginType: isMobile ? 'SMS' : 'EMAIL',
       account: isMobile ? this.phoneNumber : this.email,
     }
-    loginService.sendOtp(loginInfo).then(otpInfo => {
+    loginService.sendOtp(loginInfo, this.verificationCode).then(otpInfo => {
       if (otpInfo.success) {
         this.storageOtpTime(type, otpInfo);
         this.startOtpSetting(type);
@@ -556,6 +584,9 @@
       this.emailCounterSec -= 1;
       if (this.emailResendCounter !== 0) {
         this.emailResendCounter -= 1;
+        if (this.emailResendCounter === 0) {
+          // this.regenerateImgOfVerification();
+        }
       }
       if (this.emailCounterSec === 0) {
         clearInterval(this.emailResendInterval);
@@ -568,16 +599,18 @@
       this.otpCounterSec -= 1;
       if (this.otpResendCounter !== 0) {
         this.otpResendCounter -= 1;
+        if (this.otpResendCounter === 0) {
+          // this.regenerateImgOfVerification();
+        }
       }
       if (this.otpCounterSec === 0) {
-        clearInterval(this.otpInterval)
+        clearInterval(this.otpInterval);
       }
     }, 1000)
   }
 
   resentOtp(type: string) {
     this.resetOtpSetting(type);
-    this.applyOtpVerification(type);
   }
 
   deleteOtpInfo(type: string) {
@@ -599,10 +632,12 @@
       clearInterval(this.otpInterval);
       this.otpResendCounter = 30;
       this.otpCounterSec = 300;
+      this.onPhoneVerifyStep = 'APPLY_OTP';
     } else {
       clearInterval(this.emailResendInterval);
       this.emailResendCounter = 30;
       this.emailCounterSec = 300;
+      this.onEmailVerifyResendStatus = 'APPLY_OTP';
     }
   }
 
@@ -630,7 +665,8 @@
           }, 1000);
           break;
         default:
-          messageBoxService.showErrorMessage('',error);
+          const defaultErrorMsg = OtpErrorCode[error.response?.data?.title]
+          messageBoxService.showErrorMessage('',defaultErrorMsg);
           break;
       }
   }
@@ -799,4 +835,82 @@
       font-size: 16px;
     }
   }
+    .pam-consultant-login {
+    margin: auto;
+    width: 336px;
+    font-size: 20px;
+    color: $PRIMARY_BLACK;
+
+    &__header {
+      text-align: center;
+      font-size: 24px;
+      font-weight: bold;
+      letter-spacing: 1.2;
+      color: $PRIMARY_BLACK;
+    }
+
+    &__title {
+      display: flex;
+      // justify-content: space-between;
+      align-items: center;
+    }
+
+    &__input {
+      width: 100%;
+      outline: 0;
+      border: 1px solid #CCCCCC;
+      border-radius: 10px;
+      font-size: 20px;
+      height: 50px;
+      padding: 10px 90px 10px 15px;
+      overflow: auto;
+      box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+
+      &Icon {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        top: 15px;
+        right: 15px;
+      }
+    }
+
+    &__forgot-password {
+      color: $PRIMARY_RED;
+      text-decoration: none;
+      font-size: 16px;
+    }
+
+    &__verifyBlock {
+      display: flex;
+      // justify-content: space-between;
+    }
+
+    &__verifyImg {
+      margin-left: 8px;
+      width: 126px;
+      height: 50px;
+      border:1px #cccccc solid;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &__confirmBlock {
+      display: flex;
+      justify-content: center;
+    }
+
+    &__confirm {
+      color: $PRIMARY_WHITE;
+      width: 80px;
+      height: 50px;
+      border-radius: 30px;
+      border: 1px solid $LIGHT_GREY;
+      background-color: $PRIMARY_RED;
+    }
+  }
 </style>

--
Gitblit v1.8.0