From 21e346b09b236c1645a4af2b045dd599b248b6f0 Mon Sep 17 00:00:00 2001
From: luohairen <3399054449@qq.com>
Date: 星期二, 29 十月 2024 17:07:06 +0800
Subject: [PATCH] 增加了重置密码的功能
---
src/views/login/index.vue | 123 +++++++++++++++++++++++++++++++----------
1 files changed, 93 insertions(+), 30 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 94056b4..46ce712 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,14 +1,15 @@
<template>
<div class="login-container">
- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
+ <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
+ label-position="left">
<div class="title-container">
- <h3 class="title">姹熻タ璇煶瑙嗛鍩硅绯荤粺</h3>
+ <h3 class="title">璇煶瑙嗛鍩硅绯荤粺</h3>
</div>
<el-form-item prop="userName">
<span class="svg-container">
- <svg-icon icon-class="user" />
+ <svg-icon icon-class="user"/>
</span>
<el-input
ref="userName"
@@ -24,7 +25,7 @@
<el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
<el-form-item prop="password">
<span class="svg-container">
- <svg-icon icon-class="password" />
+ <svg-icon icon-class="password"/>
</span>
<el-input
:key="passwordType"
@@ -40,17 +41,41 @@
@keyup.enter.native="handleLogin"
/>
<span class="show-pwd" @click="showPwd">
- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+ <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
</span>
</el-form-item>
</el-tooltip>
<el-checkbox v-model="loginForm.remember" style="margin-bottom: 20px;margin-left: 5px;">璁颁綇瀵嗙爜</el-checkbox>
- <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">鐧诲綍</el-button>
+ <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
+ @click.native.prevent="handleLogin">鐧诲綍
+ </el-button>
</el-form>
+ <el-dialog
+ title="淇敼瀵嗙爜"
+ :visible.sync="forceUpdateShow"
+ :close-on-click-modal="false"
+ :close-on-press-escape="false"
+ width="400px"
+ :show-close="false"
+ >
+ <div style="margin-bottom: 10px; color: #aa1111">鎮ㄧ殑瀵嗙爜宸茬粡杩囨湡锛岃閲嶆柊璁剧疆~</div>
+ <el-form ref="updatePasswordForm" :model="updatePasswordForm" :rules="updatePasswordRules">
+ <el-form-item label="鏂板瘑鐮�" prop="newPassword">
+ <el-input v-model="updatePasswordForm.newPassword" placeholder="搴斿寘鍚ぇ灏忓啓銆佹暟瀛�" show-password></el-input>
+ </el-form-item>
+ <el-form-item label="纭瀵嗙爜">
+ <el-input v-model="updatePasswordForm.confirmPassword" placeholder="纭瀵嗙爜" show-password></el-input>
+ </el-form-item>
+ </el-form>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click="forceUpdateShow = false">鍏� 闂�</el-button>
+ <el-button type="primary" @click="updatePassword">淇� 鏀�</el-button>
+ </span>
+ </el-dialog>
</div>
</template>
@@ -58,33 +83,44 @@
<script>
import { mapMutations } from 'vuex'
import loginApi from '@/api/login'
+import UserApi from '@/api/user'
export default {
name: 'Login',
data () {
- const validateUsername = (rule, value, callback) => {
- if (value.length < 5) {
- callback(new Error('鐢ㄦ埛鍚嶄笉鑳藉皯浜�5涓瓧绗�'))
- } else {
- callback()
- }
- }
const validatePassword = (rule, value, callback) => {
- if (value.length < 5) {
- callback(new Error('瀵嗙爜涓嶈兘灏戜簬5涓瓧绗�'))
+ if (value === '') {
+ callback(new Error('璇疯緭鍏ュ瘑鐮�'))
+ } else if (!/[A-Z]/.test(value)) {
+ callback(new Error('瀵嗙爜蹇呴』鍖呭惈鑷冲皯涓�涓ぇ鍐欏瓧姣�'))
+ } else if (!/[a-z]/.test(value)) {
+ callback(new Error('瀵嗙爜蹇呴』鍖呭惈鑷冲皯涓�涓皬鍐欏瓧姣�'))
+ } else if (!/[0-9]/.test(value)) {
+ callback(new Error('瀵嗙爜蹇呴』鍖呭惈鑷冲皯涓�涓暟瀛�'))
} else {
callback()
}
}
return {
+ forceUpdateShow: false,
+ updatePasswordForm: {
+ userId: null,
+ newPassword: '',
+ confirmPassword: ''
+ },
+ updatePasswordRules: {
+ newPassword: [
+ { validator: validatePassword, trigger: 'blur' }
+ ]
+ },
loginForm: {
userName: '',
password: '',
remember: false
},
loginRules: {
- userName: [{ required: true, trigger: 'blur', validator: validateUsername }],
- password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+ userName: [{ required: true, trigger: 'blur' }],
+ password: [{ required: true, trigger: 'blur' }]
},
passwordType: 'password',
capsTooltip: false,
@@ -106,6 +142,26 @@
// window.removeEventListener('storage', this.afterQRScan)
},
methods: {
+ updatePassword () {
+ let _this = this
+ _this.$refs.updatePasswordForm.validate(valid => {
+ if (valid) {
+ if (this.updatePasswordForm.newPassword !== this.updatePasswordForm.confirmPassword) {
+ _this.$message.error('涓ゆ杈撳叆鐨勫瘑鐮佷笉涓�鑷�')
+ return
+ }
+ UserApi.updatePassword(this.updatePasswordForm).then(res => {
+ if (res.code === 1) {
+ _this.$message.success('瀵嗙爜淇敼鎴愬姛銆傝閲嶆柊鐧诲綍')
+ _this.loginForm.password = ''
+ _this.forceUpdateShow = false
+ }
+ })
+ } else {
+ return false
+ }
+ })
+ },
checkCapslock ({ shiftKey, key } = {}) {
if (key && key.length === 1) {
// eslint-disable-next-line no-mixed-operators
@@ -134,9 +190,17 @@
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
- loginApi.login(this.loginForm).then(function (result) {
+ loginApi.login(this.loginForm).then(result => {
+ // 濡傛灉code涓�205锛屽垯寮哄埗淇敼瀵嗙爜
+ if (result && result.code === 205) {
+ this.updatePasswordForm.userId = result.data
+ this.forceUpdateShow = true
+ this.loading = false
+ return
+ }
if (result && result.code === 1) {
_this.setUserName(_this.loginForm.userName)
+ _this.setUserInfo(result.data)
_this.$router.push({ path: '/dashboard' })
} else {
_this.loading = false
@@ -153,7 +217,7 @@
}
})
},
- ...mapMutations('user', ['setUserName'])
+ ...mapMutations('user', ['setUserName', 'setUserInfo'])
}
}
</script>
@@ -162,8 +226,8 @@
/* 淇input 鑳屾櫙涓嶅崗璋� 鍜屽厜鏍囧彉鑹� */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
-$bg:#283443;
-$light_gray:#fff;
+$bg: #283443;
+$light_gray: #fff;
$cursor: #fff;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
@@ -189,8 +253,8 @@
caret-color: black;
&:-webkit-autofill {
- box-shadow: 0 0 0px 1000px $bg inset !important;
- -webkit-text-fill-color: $cursor !important;
+ box-shadow: 0 0 0px 1000px white inset !important;
+ -webkit-text-fill-color: black !important;
}
}
}
@@ -204,12 +268,12 @@
</style>
<style lang="scss" scoped>
-$bg:#2d3a4b;
-$dark_gray:#889aa4;
-$light_gray:#eee;
+$bg: #2d3a4b;
+$dark_gray: #889aa4;
+$light_gray: #eee;
.login-container {
- background-image:url('../../assets/loginBackground.png');
+ background-image: url('../../assets/loginBackground.png');
background-size: cover;
background-attachment: fixed;
min-height: 100%;
@@ -221,8 +285,8 @@
position: relative;
width: 520px;
max-width: 100%;
- padding:30px 50px 10px 50px;
- margin:200px auto auto auto;
+ padding: 30px 50px 10px 50px;
+ margin: 200px auto auto auto;
overflow: hidden;
background: white;
}
@@ -281,4 +345,3 @@
}
}
</style>
-
--
Gitblit v1.8.0