From 93df543bb391ee238c55d867b219f045f938a3fd Mon Sep 17 00:00:00 2001
From: keqingmoe <me@keqing.moe>
Date: Fri, 27 Dec 2024 18:03:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=B3=A8=E5=86=8C=E5=92=8C?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E8=A1=A8=E5=8D=95=EF=BC=8C=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E8=B0=83=E8=AF=95=E6=97=A5=E5=BF=97=EF=BC=8C=E5=A2=9E=E5=BC=BA?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=EF=BC=9B=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E9=9D=A2=E6=9D=BF=E5=8A=9F=E8=83=BD=EF=BC=8C?=
 =?UTF-8?q?=E5=8C=85=E6=8B=AC=E4=BF=AE=E6=94=B9=E5=AF=86=E7=A0=81=E5=92=8C?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E8=B4=A6=E5=8F=B7=E5=AF=B9=E8=AF=9D=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/Auth.vue           |  30 +++----
 ui/src/components/LoginForm.vue      |  46 +++++------
 ui/src/components/RegisterForm.vue   |   8 +-
 ui/src/components/RepasswdDialog.vue | 112 +++++++++++++++++++++++++++
 ui/src/components/UserPanel.vue      |  53 ++++++++++++-
 5 files changed, 197 insertions(+), 52 deletions(-)
 create mode 100644 ui/src/components/RepasswdDialog.vue

diff --git a/ui/src/components/Auth.vue b/ui/src/components/Auth.vue
index 47ef7c2..003e4ca 100644
--- a/ui/src/components/Auth.vue
+++ b/ui/src/components/Auth.vue
@@ -1,16 +1,19 @@
 <template>
-  <v-carousel v-model="loginMode" v-if="!authStore.isAuthenticated" height="100%" hide-delimiters show-arrows>
-    <v-carousel-item>
-      <v-sheet class="v-center" height="100%">
-        <LoginForm id="aaaaa"></LoginForm>
-      </v-sheet>
-    </v-carousel-item>
-    <v-carousel-item>
-      <v-sheet class="v-center" height="100%">
-        <RegisterForm v-model="loginMode"></RegisterForm>
-      </v-sheet>
-    </v-carousel-item>
-  </v-carousel>
+  <v-sheet class="d-flex align-center justify-center flex-wrap text-center mx-auto px-4"
+    v-if="!authStore.isAuthenticated" width="640" height="670">
+    <v-carousel v-model="loginMode" height="100%" delimiter-icon="mdi-square" color="blue-darken-2"
+      hide-delimiter-background show-arrows>
+      <v-carousel-item>
+        <v-sheet class="v-center" height="100%">
+          <LoginForm></LoginForm>
+        </v-sheet>
+      </v-carousel-item>
+      <v-carousel-item>
+        <v-sheet class="v-center" height="100%">
+          <RegisterForm v-model="loginMode"></RegisterForm>
+        </v-sheet>
+      </v-carousel-item>
+    </v-carousel></v-sheet>
   <UserInfo v-else></UserInfo>
 </template>
 
@@ -18,14 +21,12 @@
 import { useAuthStore } from '@/store/auth';
 import LoginForm from './LoginForm.vue';
 import { ref } from 'vue';
-import { jwtDecode, type JwtPayload } from 'jwt-decode';
 import RegisterForm from './RegisterForm.vue';
 import UserInfo from './UserPanel.vue';
 
 const loginMode = ref(0);
 
 const authStore = useAuthStore();
-const token = ref(authStore.token);
 
 </script>
 
@@ -35,6 +36,5 @@ const token = ref(authStore.token);
   justify-content: center;
   align-items: center;
   height: 100vh;
-  /* 设置容器高度为视口高度 */
 }
 </style>
\ No newline at end of file
diff --git a/ui/src/components/LoginForm.vue b/ui/src/components/LoginForm.vue
index 88b3685..e2a5554 100644
--- a/ui/src/components/LoginForm.vue
+++ b/ui/src/components/LoginForm.vue
@@ -1,41 +1,32 @@
 <template>
-  <div>
+  <v-card class="mx-auto pa-12 pb-8" width="448" elevation="8" rounded="lg">
     <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-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"
-          label="账号"></v-text-field>
+      <v-text-field v-model="userId" prepend-inner-icon="mdi-account-circle" :rules="userIdRules"
+        label="账号"></v-text-field>
 
-        <v-divider :thickness="10" class="border-opacity-0"></v-divider>
+      <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'"
-          @click:append-inner="visible = !visible" prepend-inner-icon="mdi-lock-outline"></v-text-field>
+      <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'"
+        @click:append-inner="visible = !visible" prepend-inner-icon="mdi-lock-outline"></v-text-field>
 
-        <v-divider :thickness="10" class="border-opacity-0"></v-divider>
+      <v-divider :thickness="10" class="border-opacity-0"></v-divider>
 
-        <v-card class="mb-12" color="surface-variant" variant="tonal">
-          <v-card-text class="text-medium-emphasis text-caption">
-            警告：连续3次登录失败后，您的帐户将被暂时锁定三个小时。如果您必须立即登录，您还可以点击“忘记登录密码？”下面重置登录密码。
-            <br />
-            这只是个占位符文本，不知道为什么没有这段话整个布局就会乱成一坨，实际上我并没有做这个冻结功能。
-          </v-card-text>
-        </v-card>
+      <v-btn class="mb-8" color="blue" size="large" variant="tonal" type="submit" block>
+        登录
+      </v-btn>
 
-        <v-btn class="mb-8" color="blue" size="large" variant="tonal" type="submit" block>
-          登录
-        </v-btn>
-
-        <v-card-text class="text-center">
-          <a class="text-red text-decoration-none" @click="dialog('没做呢。', '没做呢。没做呢。没做呢。没做呢。没做呢。没做呢。没做呢。没做呢。没做呢。没做呢。没做呢。没做呢。没做呢。没做呢。没做呢。没做呢。没做呢。没做呢。没做呢。没做呢。没做呢。')">
-            忘记密码<v-icon icon="mdi-chevron-right"></v-icon>
-          </a>
-        </v-card-text>
-      </v-card>
+      <v-card-text class="text-center">
+        <a class="text-red text-decoration-none"
+          @click="dialog('忘记密码', '请联系老师重置密码。')">
+          忘记密码<v-icon icon="mdi-chevron-right"></v-icon>
+        </a>
+      </v-card-text>
     </v-form>
-  </div>
+  </v-card>
   <v-dialog v-model="dialogShow" width="auto">
     <v-card max-width="400" prepend-icon="mdi-update" :text="dialogText" :title="dialogTitle">
       <template v-slot:actions>
@@ -79,7 +70,6 @@ const dialog = (title: string, text: string) => {
 };
 
 const login = async (userId: string, password: string) => {
-  console.log('login', userId, password);
   try {
     const formData = new FormData;
     formData.append("user_id", userId);
diff --git a/ui/src/components/RegisterForm.vue b/ui/src/components/RegisterForm.vue
index 44234ab..4445746 100644
--- a/ui/src/components/RegisterForm.vue
+++ b/ui/src/components/RegisterForm.vue
@@ -76,13 +76,11 @@ const dialog = (title: string, text: string) => {
 };
 
 const register = async (userId: string, password: string) => {
-  console.log('login', userId, password);
   try {
     const formData = new FormData;
     formData.append("user_id", userId);
     formData.append("password", password);
     let res = await axios.post('/api/auth/register', formData);
-    console.log(res.data);
     return res.data as RegisterResponse;
   } catch (e) {
     let ex = e as AxiosError;
@@ -93,10 +91,9 @@ const register = async (userId: string, password: string) => {
 const submit = async (event: SubmitEvent) => {
   const results: any = await event;
   if (results.valid) {
-    loading.value = true
-    console.log('valid')
+    loading.value = true;
     let res = await register(userId.value, password.value);
-    loading.value = false
+    loading.value = false;
     if (res?.error) {
       dialog('错误', `注册失败：${res.error}`);
     } else {
@@ -104,7 +101,6 @@ const submit = async (event: SubmitEvent) => {
       model.value = 0;
     }
   }
-  console.log(2);
 };
 
 const userIdRules: any = [(value: string) => {
diff --git a/ui/src/components/RepasswdDialog.vue b/ui/src/components/RepasswdDialog.vue
new file mode 100644
index 0000000..63f0d01
--- /dev/null
+++ b/ui/src/components/RepasswdDialog.vue
@@ -0,0 +1,112 @@
+<template>
+  <v-dialog v-model="dialogRepasswdShow" max-width="448">
+    <v-card class="mx-auto pa-12 pb-8" elevation="8" width="100%" rounded="lg">
+      <v-form fast-fail @submit.prevent="submit">
+
+        <v-text-field v-model="passwords[0]" :rules="passwordRules" label="原密码"
+          :append-inner-icon="visible[0] ? 'mdi-eye' : 'mdi-eye-off'" :type="visible[0] ? 'text' : 'password'"
+          @click:append-inner="visible[0] = !visible[0]" prepend-inner-icon="mdi-lock-outline"></v-text-field>
+
+        <v-divider :thickness="10" class="border-opacity-0"></v-divider>
+
+        <v-text-field v-model="passwords[1]" :rules="passwordRules" label="新密码"
+          :append-inner-icon="visible[1] ? 'mdi-eye' : 'mdi-eye-off'" :type="visible[1] ? 'text' : 'password'"
+          @click:append-inner="visible[1] = !visible[1]" prepend-inner-icon="mdi-lock-outline"></v-text-field>
+
+        <v-divider :thickness="10" class="border-opacity-0"></v-divider>
+
+        <v-text-field :rules="passwordRules2" label="重复输入新密码"
+          :append-inner-icon="visible[2] ? 'mdi-eye-off' : 'mdi-eye'" :type="visible[2] ? 'text' : 'password'"
+          @click:append-inner="visible[2] = !visible[2]" prepend-inner-icon="mdi-lock-outline"></v-text-field>
+
+        <v-divider :thickness="10" class="border-opacity-0"></v-divider>
+
+        <v-btn :loading="loading" class="mb-8" color="blue" size="large" type="submit" variant="tonal" block>
+          修改密码
+        </v-btn>
+
+      </v-form>
+    </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 } 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 dialogRepasswdShow = defineModel({ default: true });
+
+const loading = ref(false);
+const passwords = ref(['', '']);
+const authStore = useAuthStore();
+const token = ref(authStore.token);
+const visible = ref([false, false, false]);
+
+type RepasswdResponse = { success?: string, error?: string };
+
+const requestRepasswd = async () => {
+  try {
+    const formData = new FormData;
+    formData.append("token", token.value);
+    formData.append("raw_passwd", passwords.value[0]);
+    formData.append("new_passwd", passwords.value[1]);
+    let res = await axios.post('/api/auth/repasswd', formData);
+    return res.data as RepasswdResponse;
+  } catch (e) {
+    let ex = e as AxiosError;
+    return ex.response?.data as RepasswdResponse;
+  }
+}
+
+const repasswd = async () => {
+  loading.value = true;
+  let res = await requestRepasswd();
+  loading.value = false;
+  if (res?.error) {
+    await dialog('错误', `修改密码失败：${res.error}`);
+  } else {
+    await dialog('信息', `修改密码成功，请重新登录。`);
+    authStore.clearToken();
+  }
+}
+
+const submit = async (event: SubmitEvent) => {
+  const results: any = await event;
+  if (results.valid) {
+    await repasswd();
+  }
+};
+
+const passwordRules: any = [(value: string) => {
+  if (value?.length > 0) return true;
+  return '密码不能为空';
+}];
+
+const passwordRules2: any = [(value: string) => {
+  if (value == passwords.value[1]) return true;
+  return '两次输入需保持一致';
+}];
+
+</script>
diff --git a/ui/src/components/UserPanel.vue b/ui/src/components/UserPanel.vue
index 2a9868d..404f1f0 100644
--- a/ui/src/components/UserPanel.vue
+++ b/ui/src/components/UserPanel.vue
@@ -4,9 +4,15 @@
       用户 ID: {{ userId }}
     </v-card-item>
     <v-card-item>
-      <v-chip @click="authStore.clearToken">
+      <v-chip class="chips" color="orange" @click="logout">
         退出登录
       </v-chip>
+      <v-chip class="chips" color="blue" @click="dialogRepasswdShow = true">
+        修改密码
+      </v-chip>
+      <v-chip class="chips" color="red" @click="dialogDeleteAccountShow = true">
+        删除账号
+      </v-chip>
     </v-card-item>
     <v-card-item>
       <v-expansion-panels>
@@ -18,6 +24,15 @@
       <Toy></Toy>
     </v-card-item>
   </v-card>
+  <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>
+  <RepasswdDialog v-model="dialogRepasswdShow"></RepasswdDialog>
+  <DeleteAccountDialog v-model="dialogDeleteAccountShow"></DeleteAccountDialog>
 </template>
 
 <script setup lang="ts">
@@ -25,6 +40,27 @@ import { ref, computed } from 'vue';
 import { useAuthStore } from '@/store/auth';
 import { jwtDecode, type JwtPayload } from 'jwt-decode';
 import Toy from './Toy.vue';
+import axios, { AxiosError } from 'axios';
+import DeleteAccountDialog from './DeleteAccountDialog.vue';
+import RepasswdDialog from './RepasswdDialog.vue';
+
+const dialogShow = ref(false);
+const dialogTitle = ref('');
+const dialogText = ref('');
+const dialogClose = ref(() => { });
+
+const dialogDeleteAccountShow = ref(false);
+
+const dialogRepasswdShow = ref(false);
+
+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 reveal = ref(false);
 
@@ -41,6 +77,17 @@ const userId = computed(() => {
     return data.user_id;
   }
   return '';
-})
+});
 
-</script>
\ No newline at end of file
+
+const logout = async () => {
+  authStore.clearToken();
+}
+
+</script>
+
+<style lang="scss" scoped>
+.chips {
+  margin: 5px;
+}
+</style>
\ No newline at end of file