From 0611b9d31fb75f3c660f57ef453605ad48bfd46d Mon Sep 17 00:00:00 2001
From: Amadeus <RealmeAmadeus@gmail.com>
Date: Sun, 26 May 2024 22:19:14 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=86=E7=A0=81=E9=87=8D=E7=BD=AE=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/jsLibraryMappings.xml                   |   6 +
 .../src/views/welcome/LoginPage.vue           |   2 +-
 .../src/views/welcome/ResetPage.vue           | 166 +++++++++++++-----
 3 files changed, 129 insertions(+), 45 deletions(-)
 create mode 100644 .idea/jsLibraryMappings.xml

diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
new file mode 100644
index 0000000..b903a6c
--- /dev/null
+++ b/.idea/jsLibraryMappings.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <file url="file://$PROJECT_DIR$/my-project-frontend" libraries="{index}" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/my-project-frontend/src/views/welcome/LoginPage.vue b/my-project-frontend/src/views/welcome/LoginPage.vue
index 18ba139..2585c7f 100644
--- a/my-project-frontend/src/views/welcome/LoginPage.vue
+++ b/my-project-frontend/src/views/welcome/LoginPage.vue
@@ -46,7 +46,7 @@ function userLogin(){
     <div style="margin-top: 50px">
       <el-form :model="form" :rules="rule" ref="formRef">
         <el-form-item prop="username">
-          <el-input v-model="form.username" maxlength="10" type="text" placeholder="用户名/邮箱">
+          <el-input v-model="form.username" maxlength="20" type="text" placeholder="用户名/邮箱">
             <template #prefix>
               <el-icon><User/></el-icon>
             </template>
diff --git a/my-project-frontend/src/views/welcome/ResetPage.vue b/my-project-frontend/src/views/welcome/ResetPage.vue
index 0acb35b..5d22088 100644
--- a/my-project-frontend/src/views/welcome/ResetPage.vue
+++ b/my-project-frontend/src/views/welcome/ResetPage.vue
@@ -1,36 +1,19 @@
-<script setup>
-
-import {reactive, ref} from "vue";
-import {EditPen, Lock, Message} from "@element-plus/icons-vue";
-
-const active = ref(0)
-
-const form = reactive({
-  email:'',
-  code:'',
-  password:'',
-  password_repeat:''
-
-})
-</script>
-
 <template>
-
-  <div style="text-align: center">
-    <div style="margin-top: 30px">
+  <div>
+    <div style="margin: 30px 20px">
       <el-steps :active="active" finish-status="success" align-center>
-        <el-step title="验证电子邮件"/>
-        <el-step title="重新设定密码"/>
+        <el-step title="验证电子邮件" />
+        <el-step title="重新设定密码" />
       </el-steps>
     </div>
-    <div>
-      <div style="margin: 0 20px" v-if="active === 0">
+    <transition name="el-fade-in-linear" mode="out-in">
+      <div style="text-align: center;margin: 0 20px;height: 100%" v-if="active === 0">
         <div style="margin-top: 80px">
           <div style="font-size: 25px;font-weight: bold">重置密码</div>
-          <div style="font-size: 15px;color: grey">请输入需要重置密码的电子邮件地址</div>
+          <div style="font-size: 14px;color: grey">请输入需要重置密码的电子邮件地址</div>
         </div>
         <div style="margin-top: 50px">
-          <el-form :model="form">
+          <el-form :model="form" :rules="rules" @validate="onValidate" ref="formRef">
             <el-form-item prop="email">
               <el-input v-model="form.email" type="email" placeholder="电子邮件地址">
                 <template #prefix>
@@ -48,53 +31,148 @@ const form = reactive({
                   </el-input>
                 </el-col>
                 <el-col :span="5">
-                  <el-button type="success" >
-                    获取验证码
+                  <el-button type="success" @click="validateEmail"
+                             :disabled="!isEmailValid || coldTime > 0">
+                    {{coldTime > 0 ? '请稍后 ' + coldTime + ' 秒' : '获取验证码'}}
                   </el-button>
                 </el-col>
               </el-row>
             </el-form-item>
-
           </el-form>
-          <div style="margin-top: 80px">
-            <el-button style="width: 270px" type="warning" @click="active++" plain>开始重置密码</el-button>
-          </div>
-
+        </div>
+        <div style="margin-top: 70px">
+          <el-button @click="confirmReset()" style="width: 270px;" type="danger" plain>开始重置密码</el-button>
         </div>
       </div>
-      <div style="margin: 0 20px" v-if="active ===1">
+    </transition>
+    <transition name="el-fade-in-linear" mode="out-in">
+      <div style="text-align: center;margin: 0 20px;height: 100%" v-if="active === 1">
         <div style="margin-top: 80px">
           <div style="font-size: 25px;font-weight: bold">重置密码</div>
-          <div style="font-size: 15px;color: grey">请填写你的新密码</div>
+          <div style="font-size: 14px;color: grey">请填写您的新密码，务必牢记，防止丢失</div>
         </div>
         <div style="margin-top: 50px">
-          <el-form  :model="form">
+          <el-form :model="form" :rules="rules" @validate="onValidate" ref="formRef">
             <el-form-item prop="password">
-              <el-input v-model="form.password" :maxlength="16" type="password" placeholder="密码">
+              <el-input v-model="form.password" :maxlength="16" type="password" placeholder="新密码">
                 <template #prefix>
                   <el-icon><Lock /></el-icon>
                 </template>
               </el-input>
             </el-form-item>
             <el-form-item prop="password_repeat">
-              <el-input v-model="form.password_repeat" :maxlength="16" type="password" placeholder="重复密码">
+              <el-input v-model="form.password_repeat" :maxlength="16" type="password" placeholder="重复新密码">
                 <template #prefix>
                   <el-icon><Lock /></el-icon>
                 </template>
               </el-input>
             </el-form-item>
-
           </el-form>
-          <div style="margin-top: 80px">
-            <el-button style="width: 270px" type="default" @click="active++" plain>立即重置密码</el-button>
-          </div>
+        </div>
+        <div style="margin-top: 70px">
+          <el-button @click="doReset()" style="width: 270px;" type="danger" plain>立即重置密码</el-button>
         </div>
       </div>
-
-    </div>
+    </transition>
   </div>
 </template>
 
+<script setup>
+import {reactive, ref} from "vue";
+import {EditPen, Lock, Message} from "@element-plus/icons-vue";
+import {get, post} from "@/net";
+import {ElMessage} from "element-plus";
+import router from "@/router";
+
+const active = ref(0)
+
+const form = reactive({
+  email: '',
+  code: '',
+  password: '',
+  password_repeat: '',
+})
+
+const validatePassword = (rule, value, callback) => {
+  if (value === '') {
+    callback(new Error('请再次输入密码'))
+  } else if (value !== form.password) {
+    callback(new Error("两次输入的密码不一致"))
+  } else {
+    callback()
+  }
+}
+
+const rules = {
+  email: [
+    { required: true, message: '请输入邮件地址', trigger: 'blur' },
+    {type: 'email', message: '请输入合法的电子邮件地址', trigger: ['blur', 'change']}
+  ],
+  code: [
+    { required: true, message: '请输入获取的验证码', trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' },
+    { min: 6, max: 16, message: '密码的长度必须在6-16个字符之间', trigger: ['blur'] }
+  ],
+  password_repeat: [
+    { validator: validatePassword, trigger: ['blur', 'change'] },
+  ],
+}
+
+const formRef = ref()
+const isEmailValid = ref(false)
+const coldTime = ref(0)
+
+const onValidate = (prop, isValid) => {
+  if(prop === 'email')
+    isEmailValid.value = isValid
+}
+
+const validateEmail = () => {
+  coldTime.value = 60
+  get(`/api/auth/ask-code?email=${form.email}&type=reset`, () => {
+    ElMessage.success(`验证码已发送到邮箱: ${form.email}，请注意查收`)
+    const handle = setInterval(() => {
+      coldTime.value--
+      if(coldTime.value === 0) {
+        clearInterval(handle)
+      }
+    }, 1000)
+  }, (message) => {
+    ElMessage.warning(message)
+    coldTime.value = 0
+  })
+}
+
+const confirmReset = () => {
+  formRef.value.validate((isValid) => {
+    if(isValid) {
+      post('/api/auth/reset-confirm', {
+        email: form.email,
+        code: form.code
+      }, () => active.value++)
+    }
+  })
+}
+
+const doReset = () => {
+  formRef.value.validate((isValid) => {
+    if(isValid) {
+      post('/api/auth/reset-password', {
+        email: form.email,
+        code: form.code,
+        password: form.password
+      }, () => {
+        ElMessage.success('密码重置成功，请重新登录')
+        router.push('/')
+      })
+    }
+  })
+}
+
+</script>
+
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>