my account cancel button added

src/i18n/en.json

@@ -37,6 +37,7 @@
         "Password": "Password",
         "ConfirmPassword": "Confirm Password",
         "UserInfo": "User Information",
+        "Session": "Session",
         "PwdNotMatch": "Confirm Password does not match.",
         "SetAsAdmin": "Set as admin.",
         "ActivateNow": "Activate now.",

src/views/AccountManagement/MyAccount.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="general my-account flex flex-col items-center w-full h-full p-8">
-        <main class="flex main-part flex-col px-6 mt-6 w-[600px]">
+        <main class="flex main-part flex-col px-6 mt-6 w-[720px]">
             <h1 id="general_acct_info_user_name" class="text-[32px] leading-[64px] font-medium mb-2">
                 {{ name }}
             </h1>
@@ -15,7 +15,7 @@
                 </span> times.
             </div>
         </main>
-        <main class="flex flex-col pt-6 px-6 w-[600px]">
+        <main class="flex flex-col pt-6 px-6 w-[720px]">
             <h1 class="text-[20px] font-medium mb-4">
                 {{ i18next.t("AcctMgmt.UserInfo") }}
             </h1>
@@ -37,9 +37,9 @@
                     </div>
                 </div>
             </div>
-            <div class="row w-full flex py-2 h-[40px] mb-4 items-center">
+            <div class="row w-full flex py-2 h-[40px] mb-4 items-center text-[14px]">
-                <div class="field-label text-sm flex items-center font-medium mr-4">
+                <div class="field-label text-sm flex font-medium mr-4">
-                    <span class="align-right-span flex w-[80px]">
+                    <span class="flex w-[80px]">
                         {{ i18next.t("AcctMgmt.FullName") }}
                     </span>
                 </div>
@@ -48,16 +48,22 @@
                     v-model="inputName"
                     autocomplete="off"
                 />
-                <span v-else class="not-editable displayable name w-[280px]">
+                <div v-else class="not-editable displayable name flex w-[280px]">
                     {{ name }}
-                </span>
+                </div>
-                <button v-if='isNameEditable' class="flex save-btn rounded-full text-[#FFFFFF] h-[40px] w-[80px] items-center
+                <button v-if='isNameEditable' class="flex save-btn rounded-full text-[#FFFFFF] h-[32px] w-[80px] items-center
-                    bg-[#0099FF] justify-center cursor-pointer ml-20"
+                    bg-[#0099FF] justify-center cursor-pointer ml-[112px]"
                     @click="onSaveNameClick">
                     {{ i18next.t("Global.Save") }}
                 </button>
-                <button v-else class="flex save-btn rounded-full text-[#666666] h-[40px] w-[80px] items-center
+                <button v-if='isNameEditable' class="flex cancel-btn rounded-full text-[#64748B] h-[32px] w-[80px] items-center
-                    bg-[#FFFFFF] justify-center cursor-pointer ml-20 border border-[#666666]"
+                    border-[#64748B] border-[1px] justify-center cursor-pointer ml-[8px]"
+                    @click="onCancelNameClick">
+                        {{ i18next.t("Global.Cancel") }}
+                </button>
+                <!-- margin-left 是目測找出來的數字 -->
+                <button v-else class="flex save-btn rounded-full text-[#666666] h-[32px] w-[80px] items-center
+                    bg-[#FFFFFF] justify-center cursor-pointer ml-[214px] border border-[#666666]"
                     @click="onEditNameClick"    
                 >
                     {{ i18next.t("Global.Edit") }}
@@ -85,23 +91,30 @@
                     </div>
                     <div class="error-msg-section flex justify-start mt-4">
                         <img v-show="!isPwdLengthValid" src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
-                        <span class="error-msg-text flex text-[#FF3366] h-[24px]">
+                        <span class="error-msg-text flex text-[#FF3366] h-[24px] text-[14px]">
                             {{ isPwdLengthValid ? "" : i18next.t("AcctMgmt.PwdLengthNotEnough") }}
                         </span>
                     </div>                    
                 </div>
-                <div class="button-column flex flex-col">
+                <div class="button-and-dummy-column flex flex-col text-[14px]">
-                    <button v-if='isPwdEditable' class="flex save-btn rounded-full text-[#FFFFFF] h-[40px] w-[80px] items-center
+                    <div class="button-group flex">
-                        bg-[#0099FF] justify-center cursor-pointer ml-20"
+                       <button v-if='isPwdEditable' class="flex save-btn rounded-full text-[#FFFFFF] h-[32px] w-[80px] items-center
+                            bg-[#0099FF] justify-center cursor-pointer ml-[112px]"
                             @click="onSavePwdClick">
                                 {{ i18next.t("Global.Save") }}
                         </button>
-                    <button v-else class="flex reset-btn rounded-full text-[#666666] h-[40px] w-[80px] items-center
+                        <button v-if='isPwdEditable' class="flex cancel-btn rounded-full text-[#64748B] h-[32px] w-[80px] items-center
-                        bg-[#FFFFFF] justify-center cursor-pointer ml-20 border border-[#666666]"
+                            border-[#64748B] border-[1px] justify-center cursor-pointer ml-[8px]"
+                            @click="onCancelPwdClick">
+                                {{ i18next.t("Global.Cancel") }}
+                        </button>
+                        <button v-else class="flex reset-btn rounded-full text-[#666666] h-[32px] w-[80px] items-center
+                            bg-[#FFFFFF] justify-center cursor-pointer ml-[460px] border border-[#666666]"
                             @click="onResetPwdClick"    
                         >
                             {{ i18next.t("Global.Reset") }}
                         </button> 
+                    </div>                    
                     <div class="flex dummy-cell h-[40px]"></div>
                 </div>                
             </div>
@@ -110,7 +123,7 @@
 </template>
 
 <script>
-import { onMounted, computed, ref, onBeforeMount, watch, } from 'vue';
+import { onMounted, computed, ref, } from 'vue';
 import i18next from '@/i18n/i18n.js';
 import LoginStore from '@/stores/login';
 import useAcctMgmtStore from '@/stores/acctMgmt.ts';
@@ -172,6 +185,16 @@ export default {
             }            
         }
 
+        const onCancelNameClick = () => {
+            isNameEditable.value = false;
+            inputName.value = name.value;
+        };
+        
+        const onCancelPwdClick = () => {
+            isPwdEditable.value = false;
+            inputPwd.value = false;
+        };
+
         const togglePwdEyeBtn = (toBeOpen) => {
             isPwdEyeOn.value = toBeOpen;
         };
@@ -202,6 +225,8 @@ export default {
             onResetPwdClick,
             onSavePwdClick,
             onSaveNameClick,
+            onCancelPwdClick,
+            onCancelNameClick,
             togglePwdEyeBtn,
         };
   },