调整登录和注册表单，修改密码可见性逻辑，移除不必要的日志输出

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>

ui/src/components/LoginForm.vue

@@ -1,39 +1,8 @@
-<!-- <template>
-  <v-sheet class="mx-auto text-center" min-width="50%">
-    <v-form fast-fail @submit.prevent="submit">
-      <v-container>
-        <v-row>
-          <v-col>
-            <h1 class="text-h2 font-weight-bold">登录</h1>
-          </v-col>
-        </v-row>
-        <v-spacer></v-spacer>
-        <v-row>
-          <v-col>
-            <v-text-field v-model="userId" :rules="userIdRules" label="账号"></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field v-model="password" :rules="passwordRules" :error-messages="passwordValidate"
-              label="密码"></v-text-field>
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-col>
-            <v-btn :loading="loading" width="50%" text="注册" type="submit"></v-btn>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-form>
-  </v-sheet>
-</template> -->
 <template>
   <div>
     <v-form fast-fail @submit.prevent="submit">
-      <v-img class="mx-auto my-6" max-width="228"
+      <!-- <v-img class="mx-auto my-6" max-width="228"
-        src="https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-text-light.svg"></v-img>
+        src="https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-text-light.svg"></v-img> -->
 
       <v-card class="mx-auto pa-12 pb-8" elevation="8" max-width="448" rounded="lg">
         <v-text-field v-model="userId" prepend-inner-icon="mdi-account-circle" :rules="userIdRules"
@@ -42,7 +11,7 @@
         <v-divider :thickness="10" class="border-opacity-0"></v-divider>
 
         <v-text-field v-model="password" :rules="passwordRules" :error-messages="passwordValidate" label="密码"
-          :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'" :type="visible ? 'text' : 'password'"
+          :append-inner-icon="visible ? 'mdi-eye' : 'mdi-eye-off'" :type="visible ? 'text' : 'password'"
           @click:append-inner="visible = !visible" prepend-inner-icon="mdi-lock-outline"></v-text-field>
 
         <v-divider :thickness="10" class="border-opacity-0"></v-divider>
@@ -82,7 +51,7 @@ import axios, { AxiosError } from 'axios';
 import { jwtDecode } from 'jwt-decode';
 import { ref } from 'vue';
 
-const visible = ref(true);
+const visible = ref(false);
 
 const authStore = useAuthStore();
 const storedToken = ref(authStore.token);
@@ -116,7 +85,6 @@ const login = async (userId: string, password: string) => {
     formData.append("user_id", userId);
     formData.append("password", password);
     let res = await axios.post('/api/auth/login', formData);
-    console.log(res.data);
     return res.data as LoginResponse;
   } catch (e) {
     let ex = e as AxiosError;
@@ -128,8 +96,8 @@ const submit = async (event: SubmitEvent) => {
   const results: any = await event;
   if (results.valid) {
     loading.value = true
-    console.log('valid')
     let res = await login(userId.value, password.value);
+    loading.value = false
     if (res?.error) {
       passwordValidate.value = res.error;
       await dialog('错误', `登录失败：${res.error}`);
@@ -137,9 +105,7 @@ const submit = async (event: SubmitEvent) => {
       await dialog('信息', `登录成功，你好 ${(jwtDecode(res.token as string) as any).user_id}。`);
       authStore.setToken(res.token as string);
     }
-    loading.value = false
   }
-  console.log(2);
 };
 
 const userIdRules: any = [(value: string) => {

ui/src/components/RegisterForm.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <v-form fast-fail @submit.prevent="submit">
-      <v-img class="mx-auto my-6" max-width="228"
+      <!-- <v-img class="mx-auto my-6" max-width="228"
-        src="https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-text-light.svg"></v-img>
+        src="https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-text-light.svg"></v-img> -->
 
       <v-card class="mx-auto pa-12 pb-8" elevation="8" max-width="448" rounded="lg">
         <v-text-field v-model="userId" prepend-inner-icon="mdi-account-circle" :rules="userIdRules"
@@ -11,7 +11,7 @@
         <v-divider :thickness="10" class="border-opacity-0"></v-divider>
 
         <v-text-field v-model="password" :rules="passwordRules" label="密码"
-          :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'" :type="visible ? 'text' : 'password'"
+          :append-inner-icon="visible ? 'mdi-eye' : 'mdi-eye-off'" :type="visible ? 'text' : 'password'"
           @click:append-inner="visible = !visible" prepend-inner-icon="mdi-lock-outline"></v-text-field>
 
         <v-divider :thickness="10" class="border-opacity-0"></v-divider>
@@ -49,7 +49,7 @@ import { useAuthStore } from '@/store/auth';
 import axios, { AxiosError } from 'axios';
 import { inject, ref } from 'vue';
 
-const visible = ref(true);
+const visible = ref(false);
 const model = defineModel();
 
 const authStore = useAuthStore();
@@ -96,13 +96,13 @@ const submit = async (event: SubmitEvent) => {
     loading.value = true
     console.log('valid')
     let res = await register(userId.value, password.value);
+    loading.value = false
     if (res?.error) {
       dialog('错误', `注册失败：${res.error}`);
     } else {
       await dialog('提示', '注册成功，请前往登录。');
       model.value = 0;
     }
-    loading.value = false
   }
   console.log(2);
 };