imacat/lucia-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

my account cancel button added

Browse Source
This commit is contained in:
Cindy Chang
2024-08-29 16:04:07 +08:00
parent 3a44b74bbc
commit 9cf10f5108
2 changed files with 51 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/i18n/en.json
View File

@@ -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.",

75
src/views/AccountManagement/MyAccount.vue
View File

@@ -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="field-label text-sm flex items-center font-medium mr-4">
<span class="align-right-span flex w-[80px]">
<div class="row w-full flex py-2 h-[40px] mb-4 items-center text-[14px]">
<div class="field-label text-sm flex font-medium mr-4">
<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>
<button v-if='isNameEditable' class="flex save-btn rounded-full text-[#FFFFFF] h-[40px] w-[80px] items-center
bg-[#0099FF] justify-center cursor-pointer ml-20"
</div>
<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-[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
bg-[#FFFFFF] justify-center cursor-pointer ml-20 border border-[#666666]"
<button v-if='isNameEditable' class="flex cancel-btn rounded-full text-[#64748B] h-[32px] w-[80px] items-center
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">
<button v-if='isPwdEditable' class="flex save-btn rounded-full text-[#FFFFFF] h-[40px] w-[80px] items-center
bg-[#0099FF] justify-center cursor-pointer ml-20"
@click="onSavePwdClick">
{{ i18next.t("Global.Save") }}
</button>
<button v-else class="flex reset-btn rounded-full text-[#666666] h-[40px] w-[80px] items-center
bg-[#FFFFFF] justify-center cursor-pointer ml-20 border border-[#666666]"
@click="onResetPwdClick"
>
{{ i18next.t("Global.Reset") }}
</button>
<div class="button-and-dummy-column flex flex-col text-[14px]">
<div class="button-group flex">
<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-if='isPwdEditable' class="flex cancel-btn rounded-full text-[#64748B] h-[32px] w-[80px] items-center
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,
};
},