完成重置密码界面设计
This commit is contained in:
NagoColer
parent
c7b0288d5a
commit
ab91c7b5a6
@ -1,6 +1,5 @@
|
||||
package com.example.service;
|
||||
|
||||
import com.example.entity.Account;
|
||||
import org.springframework.security.core.userdetails.UserDetailsService;
|
||||
|
||||
public interface AuthorizeService extends UserDetailsService {
|
||||
|
||||
120
study-project-frontend/src/components/welcome/ForgetPage.vue
Normal file
120
study-project-frontend/src/components/welcome/ForgetPage.vue
Normal file
@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div style="margin: 30px 20px">
|
||||
<el-steps :active="active" finish-status="success" align-center>
|
||||
<el-step title="验证电子邮件" />
|
||||
<el-step title="重新设定密码" />
|
||||
</el-steps>
|
||||
</div>
|
||||
<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: 14px;color: grey">请输入需要重置密码的电子邮件地址</div>
|
||||
</div>
|
||||
<div style="margin-top: 50px">
|
||||
<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>
|
||||
<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" @click="validateEmail"
|
||||
:disabled="!isEmailValid || coldTime > 0">
|
||||
{{coldTime > 0 ? '请稍后 ' + coldTime + ' 秒' : '获取验证码'}}
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div style="margin-top: 70px">
|
||||
<el-button @click="active = 1" style="width: 270px;" type="danger" plain>开始重置密码</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</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: 14px;color: grey">请填写您的新密码，务必牢记，防止丢失</div>
|
||||
</div>
|
||||
<div style="margin-top: 50px">
|
||||
<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="密码">
|
||||
<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>
|
||||
<div style="margin-top: 70px">
|
||||
<el-button @click="active = 1" style="width: 270px;" type="danger" plain>立即重置密码</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<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: ''
|
||||
})
|
||||
|
||||
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', 'change'] }
|
||||
],
|
||||
password_repeat: [
|
||||
{ validator: validatePassword, trigger: ['blur', 'change'] },
|
||||
],
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -21,7 +21,7 @@
|
||||
<el-checkbox v-model="form.remember" label="记住我"/>
|
||||
</el-col>
|
||||
<el-col :span="12" style="text-align: right">
|
||||
<el-link>忘记密码？</el-link>
|
||||
<el-link @click="router.push('/forget')">忘记密码？</el-link>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="margin-top: 40px">
|
||||
|
||||
@ -16,6 +16,10 @@ const router = createRouter({
|
||||
path: 'register',
|
||||
name: 'welcome-register',
|
||||
component: () => import('@/components/welcome/RegisterPage.vue')
|
||||
}, {
|
||||
path: 'forget',
|
||||
name: 'welcome-forget',
|
||||
component: () => import('@/components/welcome/ForgetPage.vue')
|
||||
}
|
||||
]
|
||||
}, {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user