密码重置功能完成

.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>

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>

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>
-  <div style="text-align: center">
+    <div style="margin: 30px 20px">
-    <div style="margin-top: 30px">
       <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>
+    <transition name="el-fade-in-linear" mode="out-in">
-      <div style="margin: 0 20px" v-if="active === 0">
+      <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 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">
+        </div>
-            <el-button style="width: 270px" type="default" @click="active++" plain>立即重置密码</el-button>
+        <div style="margin-top: 70px">
+          <el-button @click="doReset()" style="width: 270px;" type="danger" plain>立即重置密码</el-button>
         </div>
       </div>
-      </div>
+    </transition>
-
-    </div>
   </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>