From 20a3f86416b7eea5e6ea64e61ca24057934dc543 Mon Sep 17 00:00:00 2001
From: keqingmoe <me@keqing.moe>
Date: Thu, 26 Dec 2024 22:37:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=88=A0=E9=99=A4=E8=B4=A6?=
 =?UTF-8?q?=E5=8F=B7=E5=AF=B9=E8=AF=9D=E6=A1=86=E7=BB=84=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E5=8C=85=E5=90=AB=E7=A1=AE=E8=AE=A4=E5=88=A0=E9=99=A4=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=92=8C=E7=94=A8=E6=88=B7=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/DeleteAccountDialog.vue | 95 +++++++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 ui/src/components/DeleteAccountDialog.vue

diff --git a/ui/src/components/DeleteAccountDialog.vue b/ui/src/components/DeleteAccountDialog.vue
new file mode 100644
index 0000000..96a8ff8
--- /dev/null
+++ b/ui/src/components/DeleteAccountDialog.vue
@@ -0,0 +1,95 @@
+<template>
+  <v-dialog v-model="dialogDeleteAccountShow" max-width="600">
+    <v-card prepend-icon="mdi-account">
+      <template v-slot:title>
+        删除账号
+      </template>
+      <template v-slot:subtitle>
+        <span style="color: red;">警告！您正在进行很危险的事情！</span>
+      </template>
+      <v-card-text>
+        <v-row dense>
+          <v-card-text style="color: red;">
+            请在下方文本框中一字不差地输入引号内的内容：“{{ DialogDeleteAccountPromise }}”之后，您才能删除账号。
+          </v-card-text>
+          <v-col cols="12" sm="12">
+            <v-text-field v-model="dialogDeleteAccountPromise" :label="DialogDeleteAccountPromise"
+              prepend-inner-icon="mdi-delete" type="text"></v-text-field>
+          </v-col>
+        </v-row>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn text="取消" color="primary" variant="tonal" @click="dialogDeleteAccountShow = false"></v-btn>
+        <v-btn :readonly="dialogDeleteAccountPromise != DialogDeleteAccountPromise" color="red" variant="tonal"
+          @click="dialogDeleteAccountShow = false, deleteAccount()">
+          <span style="color: red;">确定</span>
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+  <v-dialog v-model="dialogShow" width="auto">
+    <v-card max-width="400" prepend-icon="mdi-update" :text="dialogText" :title="dialogTitle">
+      <template v-slot:actions>
+        <v-btn class="ms-auto" text="Ok" @click="dialogShow = false, dialogClose()"></v-btn>
+      </template>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useAuthStore } from '@/store/auth';
+import axios, { AxiosError } from 'axios';
+
+const dialogShow = ref(false);
+const dialogTitle = ref('');
+const dialogText = ref('');
+const dialogClose = ref(() => { });
+
+const dialog = (title: string, text: string) => {
+  dialogTitle.value = title;
+  dialogText.value = text;
+  dialogShow.value = true;
+  return new Promise(res => {
+    dialogClose.value = res as () => void;
+  });
+};
+
+const DialogDeleteAccountPromise = '我确定要删除我的账号。';
+const dialogDeleteAccountPromise = ref('');
+const dialogDeleteAccountShow = defineModel({ default: true });
+
+watch(dialogDeleteAccountShow, () => {
+  if (dialogDeleteAccountShow.value == true) {
+    dialogDeleteAccountPromise.value = '';
+  }
+});
+
+const authStore = useAuthStore();
+const token = ref(authStore.token);
+
+type DeleteAccountResponse = { success?: string, error?: string };
+
+const requestDeleteAccount = async () => {
+  try {
+    const formData = new FormData;
+    formData.append("token", token.value);
+    let res = await axios.post('/api/auth/delete', formData);
+    return res.data as DeleteAccountResponse;
+  } catch (e) {
+    let ex = e as AxiosError;
+    return ex.response?.data as DeleteAccountResponse;
+  }
+}
+
+const deleteAccount = async () => {
+  let res = await requestDeleteAccount();
+  if (res?.error) {
+    await dialog('错误', `删除账号失败：${res.error}`);
+  } else {
+    await dialog('信息', `删除账号成功。`);
+    authStore.clearToken();
+  }
+}
+
+</script>