From afeb357d39e3ff64d3db27929a89df5ee2b77dea Mon Sep 17 00:00:00 2001
From: Amadeus <RealmeAmadeus@gmail.com>
Date: Sat, 25 May 2024 20:17:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AF=86=E7=A0=81=E9=87=8D=E7=BD=AE=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 my-project-frontend/src/router/index.js       |   5 +
 .../src/views/welcome/LoginPage.vue           |   2 +-
 .../src/views/welcome/ResetPage.vue           | 100 ++++++++++++++++++
 3 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 my-project-frontend/src/views/welcome/ResetPage.vue

diff --git a/my-project-frontend/src/router/index.js b/my-project-frontend/src/router/index.js
index 50d5ce1..f09caff 100644
--- a/my-project-frontend/src/router/index.js
+++ b/my-project-frontend/src/router/index.js
@@ -18,6 +18,11 @@ const  router  = createRouter( {
                     path: 'register',
                     name: 'welcome-register',
                     component: () => import('@/views/welcome/RegisterPage.vue')
+                },{
+                    path: 'reset',
+                    name: 'welcome-reset',
+                    component: () => import('@/views/welcome/ResetPage.vue')
+
                 }
                 ]
         }, {
diff --git a/my-project-frontend/src/views/welcome/LoginPage.vue b/my-project-frontend/src/views/welcome/LoginPage.vue
index c74e3df..18ba139 100644
--- a/my-project-frontend/src/views/welcome/LoginPage.vue
+++ b/my-project-frontend/src/views/welcome/LoginPage.vue
@@ -66,7 +66,7 @@ function userLogin(){
             </el-form-item>
           </el-col>
           <el-col :span="12" style="text-align: right">
-            <el-link>忘记密码?</el-link>
+            <el-link @click="router.push('/reset')" >忘记密码?</el-link>
           </el-col>
         </el-row>
       </el-form>
diff --git a/my-project-frontend/src/views/welcome/ResetPage.vue b/my-project-frontend/src/views/welcome/ResetPage.vue
new file mode 100644
index 0000000..0acb35b
--- /dev/null
+++ b/my-project-frontend/src/views/welcome/ResetPage.vue
@@ -0,0 +1,100 @@
+<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">
+      <el-steps :active="active" finish-status="success" align-center>
+        <el-step title="验证电子邮件"/>
+        <el-step title="重新设定密码"/>
+      </el-steps>
+    </div>
+    <div>
+      <div style="margin: 0 20px" 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>
+        <div style="margin-top: 50px">
+          <el-form :model="form">
+            <el-form-item prop="email">
+              <el-input v-model="form.email" type="email" placeholder="电子邮件地址">
+                <template #prefix>
+                  <el-icon><Message /></el-icon>
+                </template>
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="code">
+              <el-row :gutter="10" style="width: 100%">
+                <el-col :span="17">
+                  <el-input v-model="form.code" :maxlength="6" type="text" placeholder="请输入验证码">
+                    <template #prefix>
+                      <el-icon><EditPen /></el-icon>
+                    </template>
+                  </el-input>
+                </el-col>
+                <el-col :span="5">
+                  <el-button type="success" >
+                    获取验证码
+                  </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>
+      <div style="margin: 0 20px" 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>
+        <div style="margin-top: 50px">
+          <el-form  :model="form">
+            <el-form-item prop="password">
+              <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="重复密码">
+                <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>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file