[WHAT] User Profile Setting [WHY] 開發 ShowEasy 前台

1. 修改密碼欄位判斷

FrontEnd/pages/user/editPersonalInfo.vue

@@ -453,6 +453,7 @@ export default {
             `/trending/api/Members/UploadAvatar`, this.payload
           )
           .then((response) => {
+            //console.log(JSON.stringify(response))
             if(response && response.data){
 
               this.isCropImageDialogActive = !this.isCropImageDialogActive;

FrontEnd/pages/user/setting.vue

@@ -59,12 +59,30 @@
               {{$t('userProfile.resetPassword')}}
             </div>
             <div class="tw-mb-[20px] md:tw-max-w-[392px] md:tw-mb-[15px]">
+              <div class="tw-mb-[20px] md:tw-max-w-[392px] md:tw-mb-0">
               <div class="tw-text-[16px] tw-text-base-primary tw-mb-[6px] md:tw-text-[14px]">
                 {{$t('userProfile.oldPassword')}}
               </div>
-              <input v-model="userPass.user_old_pass" type="password"
-                class="tw-h-[40px] tw-w-full tw-border tw-border-neutral-200 tw-border-solid tw-px-[20px] tw-py-[10px] tw-rounded-[5px]" />
+              <v-text-field type="password" v-model="userPass.user_old_pass" @blur="checkOldPassword($event)" :rules="[rules.checkPassword, rules.require]"
+                hide-details dense outlined validate-on-blur></v-text-field>
+
+
+              <!-- <input v-model="userPass.user_old_pass" type="password"
+                class="tw-h-[40px] tw-w-full tw-border tw-border-neutral-200 tw-border-solid tw-px-[20px] tw-py-[10px] tw-rounded-[5px]" /> -->
+            </div>
+
+              <div v-show="!isOldPassValid" class="tw-footer-body tw-w-full tw-leading-none tw-pt-1" :class="
+                isOldPassValid
+                  ? 'tw-text-neutrals-400'
+                  : 'tw-text-error-default'
+              ">
+                {{ $t('userProfile.passwordsHint') }}
+              </div>
             </div>
+            
+
+
+            
             <div class="tw-mb-[20px] md:tw-max-w-[392px] md:tw-mb-[15px]">
               <!-- <div
               class="tw-text-[16px] tw-text-base-primary tw-mb-[6px] md:tw-text-[14px]"
@@ -195,6 +213,7 @@ export default {
         user_new_pass: "",
       },
       isNewPassValid: true,
+      isOldPassValid: true,
       firstName: "",
       lastName: "",
       userData: {},
@@ -322,8 +341,9 @@ export default {
     },
     resetPassword() {
       if (
-        this.isNewPassValid &&
-        this.userPass.user_old_pass !== this.userPass.user_new_pass
+        this.isNewPassValid && this.isOldPassValid &&
+        this.userPass.user_new_pass !== this.userPass.user_old_pass &&
+        this.userPass.user_new_pass == this.confirmPass
       ) {
         this.$axios
       .post(
@@ -335,7 +355,9 @@ export default {
             let data = response.data.DATA.rel
             if(data){
               this.$auth.$storage.removeUniversal("userPicture");
-            this.$auth.$storage.removeUniversal("userLastName");
+              this.$auth.$storage.removeUniversal("userLastName");
+              this.$auth.$storage.removeUniversal("userAccount");
+              this.$auth.$storage.removeUniversal("userPassword");
             this.$notify({
               type: "success",
               title: "Awesome!",
@@ -358,6 +380,13 @@ export default {
       this.userPass.user_new_pass = "",
       this.confirmPass = ""
     },
+    checkOldPassword(v) {
+      const pass = v.target.value;
+      this.isOldPassValid =
+        /(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])/.test(pass) &&
+        pass.length >= 8 &&
+        pass.length <= 20;
+    },
     checkPassword(v) {
       const pass = v.target.value;
       this.isNewPassValid =