Commit dcd9aa2d authored by 刘帅's avatar 刘帅

1.修改密码优化,增加弱密码校验

2.登录页增加扫码下载APP二维码
parent 8e1c21c1
......@@ -54,9 +54,21 @@
</div>
</el-form-item>
</el-form>
<!-- 右下角二维码展示框 -->
<div class="qr-code-container">
<div class="qr-code-box">
<div class="qr-code-title">扫码下载APP</div>
<div class="qr-code-image">
<!-- 这里可以替换为实际的二维码图片 -->
<img src="../assets/qr/qr.png" alt="APP下载二维码">
</div>
</div>
</div>
<!-- 底部 -->
<div class="el-login-footer">
<!-- <span>Copyright © 2018-2023 All Rights Reserved.</span>-->
<!-- <span>Copyright © 2018-2023 All Rights Reserved.</span>-->
</div>
</div>
</template>
......@@ -163,6 +175,7 @@ export default {
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-size: cover;
position: relative;
}
.title {
margin: 0px auto 30px auto;
......@@ -216,4 +229,50 @@ export default {
.login-code-img {
height: 38px;
}
/* 右下角二维码样式 */
.qr-code-container {
position: fixed;
right: 20px;
bottom: 60px;
z-index: 100;
}
.qr-code-box {
width: 140px;
padding: 12px;
background: rgba(255, 255, 255, 0.9);
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
text-align: center;
}
.qr-code-title {
font-size: 14px;
font-weight: bold;
margin-bottom: 8px;
color: #333;
}
.qr-code-image {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #eaeaea;
img {
max-width: 100%;
max-height: 100%;
}
}
.qr-code-text {
font-size: 12px;
color: #666;
margin-top: 8px;
}
</style>
......@@ -4,7 +4,16 @@
<el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password/>
<el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password @input="checkPasswordStrength"/>
<div v-if="user.newPassword" class="password-strength">
<div :class="['strength-bar', strengthClass]"></div>
</div>
<div v-if="user.newPassword" class="password-tips">
密码强度: {{ strengthText }}
<div v-if="user.newPassword && !isPasswordStrong" class="weak-password-tips">
密码必须包含大写字母、小写字母、数字和特殊字符
</div>
</div>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
......@@ -21,6 +30,27 @@ import { updateUserPwd } from "@/api/system/user";
export default {
data() {
// 验证密码复杂度
const validatePasswordComplexity = (rule, value, callback) => {
if (!value) {
callback(new Error("新密码不能为空"));
return;
}
// 检查密码复杂度
const hasLowerCase = /[a-z]/.test(value);
const hasUpperCase = /[A-Z]/.test(value);
const hasNumber = /[0-9]/.test(value);
const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(value);
if (!hasLowerCase || !hasUpperCase || !hasNumber || !hasSpecialChar) {
callback(new Error("密码必须包含大小写字母、数字和特殊字符"));
return;
}
callback();
};
const equalToPassword = (rule, value, callback) => {
if (this.user.newPassword !== value) {
callback(new Error("两次输入的密码不一致"));
......@@ -28,12 +58,16 @@ export default {
callback();
}
};
return {
user: {
oldPassword: undefined,
newPassword: undefined,
confirmPassword: undefined
},
strengthClass: 'weak',
strengthText: '',
isPasswordStrong: false,
// 表单校验
rules: {
oldPassword: [
......@@ -41,7 +75,8 @@ export default {
],
newPassword: [
{ required: true, message: "新密码不能为空", trigger: "blur" },
{ min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
{ min: 8, message: "密码长度至少为8个字符", trigger: "blur" },
{ validator: validatePasswordComplexity, trigger: "blur" }
],
confirmPassword: [
{ required: true, message: "确认密码不能为空", trigger: "blur" },
......@@ -51,9 +86,56 @@ export default {
};
},
methods: {
// 检查密码强度
checkPasswordStrength() {
if (!this.user.newPassword) {
this.strengthClass = 'weak';
this.strengthText = '';
this.isPasswordStrong = false;
return;
}
let strength = 0;
// 长度检查
if (this.user.newPassword.length >= 8) strength++;
// 包含小写字母
if (/[a-z]/.test(this.user.newPassword)) strength++;
// 包含大写字母
if (/[A-Z]/.test(this.user.newPassword)) strength++;
// 包含数字
if (/[0-9]/.test(this.user.newPassword)) strength++;
// 包含特殊字符
if (/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(this.user.newPassword)) strength++;
// 设置强度等级
if (strength <= 2) {
this.strengthClass = 'weak';
this.strengthText = '';
this.isPasswordStrong = false;
} else if (strength <= 4) {
this.strengthClass = 'medium';
this.strengthText = '';
this.isPasswordStrong = false;
} else {
this.strengthClass = 'strong';
this.strengthText = '';
this.isPasswordStrong = true;
}
},
submit() {
this.$refs["form"].validate(valid => {
if (valid) {
// 再次确认密码强度
if (!this.isPasswordStrong) {
this.$message.error("密码强度不足,请确保包含大小写字母、数字和特殊字符");
return;
}
updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
this.$modal.msgSuccess("修改成功");
});
......@@ -66,3 +148,44 @@ export default {
}
};
</script>
<style scoped>
.password-strength {
height: 6px;
margin-top: 8px;
background: #eee;
border-radius: 3px;
overflow: hidden;
}
.strength-bar {
height: 100%;
transition: all 0.3s ease;
}
.strength-bar.weak {
width: 33%;
background: #f56c6c;
}
.strength-bar.medium {
width: 66%;
background: #e6a23c;
}
.strength-bar.strong {
width: 100%;
background: #67c23a;
}
.password-tips {
font-size: 12px;
color: #909399;
margin-top: 6px;
}
.weak-password-tips {
color: #f56c6c;
margin-top: 4px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment