提交 70e98509 authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw

fix: 公共链接分享密码页面增加表单验证

上级 3f94b2f7
......@@ -871,6 +871,13 @@ export default {
input_limit_2_25: '2-25 chars',
input_limit_0_50: '0-50 chars'
},
pblink: {
key_pwd: 'Please enter the password to open the link',
input_placeholder: 'Please enter the 4-digit password',
pwd_error: 'Wrong password',
pwd_format_error: 'Please enter the 4-digit password',
sure_bt: 'Confirm'
},
panel: {
no_auth_role: 'Unshared roles',
auth_role: 'Shared roles',
......
......@@ -871,6 +871,13 @@ export default {
input_limit_2_25: '2-25字符',
input_limit_0_50: '0-50字符'
},
pblink: {
key_pwd: '請輸入密碼打開鏈接',
input_placeholder: '請輸入4位數字密碼',
pwd_error: '密碼錯誤',
pwd_format_error: '請輸入4位數字密碼',
sure_bt: '確定'
},
panel: {
no_auth_role: '未分享角色',
auth_role: '已分享角色',
......
......@@ -871,6 +871,13 @@ export default {
input_limit_2_25: '2-25字符',
input_limit_0_50: '0-50字符'
},
pblink: {
key_pwd: '请输入密码打开链接',
input_placeholder: '请输入4位数字密码',
pwd_error: '密码错误',
pwd_format_error: '请输入4位数字密码',
sure_bt: '确定'
},
panel: {
no_auth_role: '未分享角色',
auth_role: '已分享角色',
......
......@@ -5,14 +5,18 @@
<div class="span-header">
<div class="bi-text">
请输入密码打开链接
{{ $t('pblink.key_pwd') }}
</div>
</div>
<div class="input-layout">
<div class="input-main">
<div class="div-input">
<el-input v-model="pwd" class="real-input" />
<el-form ref="pwdForm" :model="form" :rules="rule" size="small">
<el-form-item prop="password">
<el-input v-model="form.password" maxlength="4" show-password class="real-input" :placeholder="$t('pblink.input_placeholder')" />
</el-form-item>
</el-form>
</div>
</div>
<div class="abs-input">
......@@ -22,7 +26,7 @@
<div class="auth-root-class">
<span slot="footer">
<el-button size="mini" type="primary" @click="refresh">确定</el-button>
<el-button size="mini" type="primary" @click="refresh">{{ $t('pblink.sure_bt') }}</el-button>
</span>
</div>
</div>
......@@ -45,24 +49,38 @@ export default {
},
data() {
return {
pwd: null,
msg: null
msg: null,
form: { password: null },
rule: {
password: [
{ required: true, message: this.$t('pblink.key_pwd'), trigger: 'blur' },
{
required: true,
pattern: /^\d{4}$/,
message: this.$t('pblink.pwd_format_error'),
trigger: 'blur'
}
]
}
}
},
methods: {
// 验证密码是否正确 如果正确 设置请求头部带LINK-PWD-TOKEN=entrypt(pwd)再刷新页面
refresh() {
const param = {
password: encrypt(this.pwd),
resourceId: this.resourceId
}
validatePwd(param).then(res => {
if (!res.data) {
this.msg = '密码错误'
} else {
window.location.reload()
this.$refs.pwdForm.validate(valid => {
if (!valid) return false
const param = {
password: encrypt(this.form.password),
resourceId: this.resourceId
}
validatePwd(param).then(res => {
if (!res.data) {
this.msg = this.$t('pblink.pwd_error')
} else {
window.location.reload()
}
})
})
}
}
......@@ -145,25 +163,25 @@ export default {
display: block;
}
.input-layout{
width: 152px;
width: 200px;
position: relative;
margin: 0px auto;
padding: 0;
display: block;
}
.input-main {
width: 150px;
height: 30px;
width: 192px;
height: 35px;
position: relative;
margin-top: 30px;
border: 1px solid #e8eaed;
display: block;
}
.div-input {
inset: 2px 4px;
position: absolute;
display: block;
}
// .div-input {
// inset: 2px 4px;
// position: absolute;
// display: block;
// }
.abs-input {
height: 20px;
position: relative;
......@@ -183,18 +201,18 @@ export default {
color: #E65251;
box-sizing: border-box;
}
.real-input {
width: 100%;
height: 100%;
border: none;
outline: none;
padding: 0px;
margin: 0px;
inset: 0px;
position: absolute;
display: block;
// .real-input {
// width: 100%;
// height: 100%;
// border: none;
// outline: none;
// padding: 0px;
// margin: 0px;
// inset: 0px;
// position: absolute;
// display: block;
}
// }
.auth-root-class {
margin: 15px 0px 5px;
text-align: center;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论