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

Migrate all Vue components from Options API to <script setup>

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
依瑪貓
2026-03-06 17:10:06 +08:00
parent a619be7881
commit 3b7b6ae859
61 changed files with 10835 additions and 11750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,13 +27,13 @@
</div>
<div class="account flex flex-col">
<span class="flex text-[#0F172A] text-[16px]">{{ username }}</span>
<div v-show="false" class="error-wrapper my-2">
<div v-show="false" class="error-wrapper my-2">
<div class="error-msg-section flex justify-start">
<img src="@/assets/icon-alert.svg" alt="!" class="exclamation-img flex mr-2">
<span class="error-msg-text flex text-[#FF3366] h-[24px]">
{{ i18next.t("AcctMgmt.AccountNotUnique") }}
</span>
</div>
</div>
</div>
</div>
</div>
@@ -87,23 +87,23 @@
<span class="error-msg-text flex text-[#FF3366] h-[24px] text-[14px]">
{{ isPwdLengthValid ? "" : i18next.t("AcctMgmt.PwdLengthNotEnough") }}
</span>
</div>
</div>
</div>
<div class="button-and-dummy-column flex flex-col text-[14px]">
<div class="button-group flex w-min-[80px] h-[40px]">
<div v-if='isPwdEditable' class="save-btn-container flex ml-[112px]"
@click="onSavePwdClick">
<ButtonFilled :buttonText='i18next.t("Global.Save")' />
</div>
</div>
<div v-if='isPwdEditable' class="cancel-btn btn-container flex ml-[8px]" @click="onCancelPwdClick" >
<Button :buttonText='i18next.t("Global.Cancel")'/>
</div>
<div v-else class="reset-btn btn-container flex ml-[460px]" @click="onResetPwdClick" >
<Button :buttonText='i18next.t("Global.Reset")'/>
</div>
</div>
</div>
<div class="flex dummy-cell h-[40px]"></div>
</div>
</div>
</div>
</main>
<main class="session flex flex-col pt-6 px-8 w-[720px]">
@@ -114,8 +114,8 @@
</div>
</template>
<script>
import { onMounted, computed, ref, } from 'vue';
<script setup>
import { onMounted, computed, ref } from 'vue';
import i18next from '@/i18n/i18n.js';
import { useLoginStore } from '@/stores/login';
import { useAcctMgmtStore } from '@/stores/acctMgmt';
@@ -126,109 +126,77 @@ import ButtonFilled from '@/components/ButtonFilled.vue';
import { useToast } from 'vue-toast-notification';
import { PWD_VALID_LENGTH } from '@/constants/constants.js';
export default {
setup() {
const loadingStore = useLoadingStore();
const loginStore = useLoginStore();
const acctMgmtStore = useAcctMgmtStore();
const toast = useToast();
const loadingStore = useLoadingStore();
const loginStore = useLoginStore();
const acctMgmtStore = useAcctMgmtStore();
const toast = useToast();
const visitTime = ref(0);
const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
const name = computed(() => currentViewingUser.value.name);
const {
username,
is_admin,
is_active,
} = currentViewingUser.value;
const visitTime = ref(0);
const currentViewingUser = computed(() => acctMgmtStore.currentViewingUser);
const name = computed(() => currentViewingUser.value.name);
const {
username,
is_admin,
is_active,
} = currentViewingUser.value;
const inputName = ref(name.value); // remember to add .value postfix
const inputPwd = ref('');
const isNameEditable = ref(false);
const isPwdEditable = ref(false);
const isPwdEyeOn = ref(false);
const isPwdLengthValid = ref(true);
const inputName = ref(name.value);
const inputPwd = ref('');
const isNameEditable = ref(false);
const isPwdEditable = ref(false);
const isPwdEyeOn = ref(false);
const isPwdLengthValid = ref(true);
const onEditNameClick = () => {
isNameEditable.value = true;
}
const onEditNameClick = () => {
isNameEditable.value = true;
};
const onResetPwdClick = () => {
isPwdEditable.value = true;
}
const onResetPwdClick = () => {
isPwdEditable.value = true;
};
const onSaveNameClick = async() => {
if(inputName.value.length > 0) {
await acctMgmtStore.editAccountName(username, inputName.value);
await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
await acctMgmtStore.getUserDetail(username);
isNameEditable.value = false;
inputName.value = name.value; // updated value
}
};
const validatePwdLength = () => {
isPwdLengthValid.value = inputPwd.value.length >= PWD_VALID_LENGTH;
};
const onSavePwdClick = async() => {
validatePwdLength();
if (isPwdLengthValid.value) {
isPwdEditable.value = false;
await acctMgmtStore.editAccountPwd(username, inputPwd.value);
await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
inputPwd.value = '';
// remember to force update
await acctMgmtStore.getUserDetail(loginStore.userData.username);
}
}
const onCancelNameClick = () => {
isNameEditable.value = false;
inputName.value = name.value;
};
const onCancelPwdClick = () => {
isPwdEditable.value = false;
inputPwd.value = '';
isPwdLengthValid.value = true;
};
const togglePwdEyeBtn = (toBeOpen) => {
isPwdEyeOn.value = toBeOpen;
};
const validatePwdLength = () => {
isPwdLengthValid.value = inputPwd.value.length >= PWD_VALID_LENGTH;
}
onMounted(async() => {
loadingStore.setIsLoading(false);
await acctMgmtStore.getUserDetail(loginStore.userData.username);
});
return {
i18next,
username,
name,
is_admin,
is_active,
visitTime,
inputName,
inputPwd,
isNameEditable,
isPwdEditable,
isPwdEyeOn,
isPwdLengthValid,
onEditNameClick,
onResetPwdClick,
onSavePwdClick,
onSaveNameClick,
onCancelPwdClick,
onCancelNameClick,
togglePwdEyeBtn,
};
},
components: {
Badge,
Button,
ButtonFilled,
const onSaveNameClick = async() => {
if(inputName.value.length > 0) {
await acctMgmtStore.editAccountName(username, inputName.value);
await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
await acctMgmtStore.getUserDetail(username);
isNameEditable.value = false;
inputName.value = name.value;
}
}
</script>
};
const onSavePwdClick = async() => {
validatePwdLength();
if (isPwdLengthValid.value) {
isPwdEditable.value = false;
await acctMgmtStore.editAccountPwd(username, inputPwd.value);
await toast.success(i18next.t("AcctMgmt.MsgAccountEdited"));
inputPwd.value = '';
await acctMgmtStore.getUserDetail(loginStore.userData.username);
}
};
const onCancelNameClick = () => {
isNameEditable.value = false;
inputName.value = name.value;
};
const onCancelPwdClick = () => {
isPwdEditable.value = false;
inputPwd.value = '';
isPwdLengthValid.value = true;
};
const togglePwdEyeBtn = (toBeOpen) => {
isPwdEyeOn.value = toBeOpen;
};
onMounted(async() => {
loadingStore.setIsLoading(false);
await acctMgmtStore.getUserDetail(loginStore.userData.username);
});
</script>