3 changed files with 44 additions and 105 deletions
--- a/ui/src/components/DeleteAccountDialog.vue
+++ b/ui/src/components/DeleteAccountDialog.vue
@ -1,95 +0,0 @@
-<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>
--- a/ui/src/components/LoginForm.vue
+++ b/ui/src/components/LoginForm.vue
@ -1,8 +1,39 @@
+<!-- <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"
-        src="https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-text-light.svg"></v-img> -->
+      <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>

      <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 +42,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' : 'mdi-eye-off'" :type="visible ? 'text' : 'password'"
+          :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'" :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>
@ -51,7 +82,7 @@ import axios, { AxiosError } from 'axios';
 import { jwtDecode } from 'jwt-decode';
 import { ref } from 'vue';

-const visible = ref(false);
+const visible = ref(true);

 const authStore = useAuthStore();
 const storedToken = ref(authStore.token);
@ -85,6 +116,7 @@ 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;
@ -96,8 +128,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}`);
@ -105,7 +137,9 @@ 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) => {
--- a/ui/src/components/RegisterForm.vue
+++ b/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"
-        src="https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-text-light.svg"></v-img> -->
+      <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>

      <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' : 'mdi-eye-off'" :type="visible ? 'text' : 'password'"
+          :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'" :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(false);
+const visible = ref(true);
 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);
 };