88 lines
2.8 KiB
Vue
88 lines
2.8 KiB
Vue
<template>
|
|
<div
|
|
id="modal_delete_acct_alert"
|
|
class="flex shadow-lg rounded-lg w-[564px] flex-col bg-[#ffffff]"
|
|
>
|
|
<div class="flex decoration-bar bg-[#FF3366] h-2 rounded-t"></div>
|
|
<main
|
|
id="delete_acct_modal_main"
|
|
class="flex flex-col items-center justify-center"
|
|
>
|
|
<img
|
|
src="@/assets/icon-large-exclamation.svg"
|
|
alt="!"
|
|
class="flex mt-[36px]"
|
|
/>
|
|
<h1 class="flex mt-4 text-xl font-medium">
|
|
{{ i18next.t("AcctMgmt.DelteQuestion").toUpperCase() }}
|
|
</h1>
|
|
<div class="clauses flex flex-col mt-4 mb-8 px-8">
|
|
<h2 class="flex leading-[21px]">
|
|
{{ i18next.t("The") }} <span class="text-[#FF3366]">
|
|
{{ i18next.t("AcctMgmt.DeleteFirstClause").toUpperCase() }}
|
|
</span>
|
|
</h2>
|
|
<h2 class="flex leading-[21px]">
|
|
{{ i18next.t("AcctMgmt.DeleteSecondClause") }}
|
|
</h2>
|
|
</div>
|
|
</main>
|
|
<footer class="flex justify-center py-3 border-t-2 border-t-gray-50 gap-4">
|
|
<button
|
|
id="calcel_delete_acct_btn"
|
|
class="flex justify-center items-center rounded-full cursor-pointer w-[100px] h-[40px] bg-[#FF3366] text-[#ffffff]"
|
|
@click="onNoBtnClick"
|
|
>
|
|
{{ i18next.t("No") }}
|
|
</button>
|
|
<button
|
|
id="sure_to_delete_acct_btn"
|
|
class="flex justify-center items-center rounded-full cursor-pointer w-[100px] h-[40px] border-2 border-[#FF3366] text-[#FF3366]"
|
|
@click="onDeleteConfirmBtnClick"
|
|
>
|
|
{{ i18next.t("Yes") }}
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// The Lucia project.
|
|
// Copyright 2024-2026 DSP, inc. All rights reserved.
|
|
// Authors:
|
|
// cindy.chang@dsp.im (Cindy Chang), 2024/5/30
|
|
// imacat.yang@dsp.im (imacat), 2023/9/23
|
|
/**
|
|
* @module views/AccountManagement/ModalDeleteAlert Confirmation
|
|
* modal for account deletion with yes/no buttons.
|
|
*/
|
|
|
|
import { useModalStore } from "@/stores/modal";
|
|
import { useRouter } from "vue-router";
|
|
import { useAcctMgmtStore } from "@/stores/acctMgmt";
|
|
import i18next from "@/i18n/i18n.js";
|
|
import { useToast } from "vue-toast-notification";
|
|
|
|
const acctMgmtStore = useAcctMgmtStore();
|
|
const modalStore = useModalStore();
|
|
const toast = useToast();
|
|
const router = useRouter();
|
|
|
|
/** Confirms account deletion, shows success toast, and navigates to account admin page. */
|
|
const onDeleteConfirmBtnClick = async () => {
|
|
if (
|
|
await acctMgmtStore.deleteAccount(acctMgmtStore.currentViewingUser.username)
|
|
) {
|
|
toast.success(i18next.t("AcctMgmt.MsgAccountDeleteSuccess"));
|
|
modalStore.closeModal();
|
|
acctMgmtStore.setShouldUpdateList(true);
|
|
await router.push("/account-admin");
|
|
}
|
|
};
|
|
|
|
/** Cancels deletion and closes the modal. */
|
|
const onNoBtnClick = () => {
|
|
modalStore.closeModal();
|
|
};
|
|
</script>
|