198 lines
6.6 KiB
Vue
198 lines
6.6 KiB
Vue
<template>
|
||
<div style="display: flex;justify-content: center">
|
||
<div style="width: 640px;text-align: center;border: 1px solid #e6e6e6;margin-top:40px;padding:10px;">
|
||
<div class="trial-myinfo-head" style="font-size: 30px;line-height: 120px;">
|
||
<!-- 首次登录修改密码 -->
|
||
{{ $t('recompose:title:init') }}
|
||
</div>
|
||
<el-form ref="passwordForm" v-loading="loading" label-position="right" :model="password" :rules="passwordFormRules" label-width="180px">
|
||
<!-- 邮箱 -->
|
||
<el-form-item :label="$t('recompose:form:email')" prop="Email">
|
||
<el-input v-model="password.Email" disabled />
|
||
</el-form-item>
|
||
<!-- 用户名 -->
|
||
<!-- <el-form-item :label="$t('recompose:form:role')" prop="UserType">
|
||
<el-input v-model="password.UserType" disabled />
|
||
</el-form-item> -->
|
||
<!-- 用户名 -->
|
||
<el-form-item :label="$t('recompose:form:userName')" prop="NewUserName">
|
||
<el-input v-model="password.NewUserName" />
|
||
</el-form-item>
|
||
<!-- 新密码 -->
|
||
<el-form-item class="my_new_pwd" :label="$t('recompose:form:newPassword')" prop="NewPassWord">
|
||
<el-input v-model="password.NewPassWord" type="password" show-password auto-complete="new-password" />
|
||
</el-form-item>
|
||
<!-- 确认密码 -->
|
||
<el-form-item :label="$t('recompose:form:confirmPassword')" prop="ConfirmPassWord">
|
||
<el-input v-model="password.ConfirmPassWord" type="password" show-password auto-complete="new-password" />
|
||
</el-form-item>
|
||
<el-form-item style="text-align:right">
|
||
<!-- 取消 -->
|
||
<el-button
|
||
size="small"
|
||
@click="cancel"
|
||
>
|
||
{{ $t('recompose:button:cancel') }}
|
||
</el-button>
|
||
<!-- 保存 -->
|
||
<el-button
|
||
type="primary"
|
||
size="small"
|
||
@click="save"
|
||
>
|
||
{{ $t('recompose:button:save') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { initSetUserNameAndPwd } from '@/api/admin.js'
|
||
import md5 from 'js-md5'
|
||
import {mapGetters, mapMutations} from "vuex";
|
||
export default {
|
||
data() {
|
||
var validatePassword = (rule, value, callback) => {
|
||
var lang = zzSessionStorage.getItem('lang')?zzSessionStorage.getItem('lang'):'zh'
|
||
/* eslint-disable */
|
||
var reg1 = /^[a-zA-Z0-9_]{4,16}$/; //密码必须是8位以上、必须含有字母、数字、特殊符号
|
||
console.log(!reg1.test(value))
|
||
if (!reg1.test(value)) {
|
||
callback(lang==='zh' ? new Error("字符长度最小为4个字符，最大为16个字符，只可使用字母、数字、下划线") : new Error('Passwords must have: 1) 8 - 32 characters; 2) At least 1 number; 3) At least 1 uppercase letter; 4) At least 1 lowercase letter; 5) At least 1 special character (~!-@#$%^&*_+?) '))
|
||
} else {
|
||
callback();
|
||
}
|
||
}
|
||
return {
|
||
password: {
|
||
NewUserName: null,
|
||
UserId: null
|
||
},
|
||
passwordFormRules: {
|
||
NewUserName: [{ required: true, validator: validatePassword, trigger: 'blur' }],
|
||
NewPassWord: [
|
||
{ required: true, validator: (rule, value, callback) => {!value ? callback(new Error(this.$t('trials:researchForm:formRule:specify'))) : callback()}, trigger: 'blur' },
|
||
{
|
||
required: true,
|
||
trigger: 'blur',
|
||
validator: this.$validatePassword
|
||
},
|
||
],
|
||
ConfirmPassWord: [
|
||
{ required: true, validator: (rule, value, callback) => {!value ? callback(new Error(this.$t('trials:researchForm:formRule:specify'))) : callback()}, trigger: 'blur' }
|
||
]
|
||
},
|
||
userId: null,
|
||
loading: false
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters([
|
||
'asyncRoutes',
|
||
'routes',
|
||
'language'
|
||
])
|
||
},
|
||
mounted() {
|
||
this.password.UserId = this.$route.query.UserId
|
||
this.password.NewUserName = this.$route.query.UserName
|
||
this.password.Email = this.$route.query.Email
|
||
// this.password.UserType = this.$route.query.UserType
|
||
this.password.access_token = this.$route.query.access_token
|
||
this.$i18n.locale = this.$route.query.lang
|
||
this.setLanguage(this.$route.query.lang)
|
||
this.$updateDictionary()
|
||
if (!this.password.NewUserName) {
|
||
this.$alert(this.$t('recompose:message:warning'))
|
||
}
|
||
},
|
||
methods: {
|
||
...mapMutations({ setLanguage: 'lang/setLanguage' }),
|
||
async logout() {
|
||
var loginType = zzSessionStorage.getItem('loginType')
|
||
await this.$store.dispatch('user/logout')
|
||
if (loginType) {
|
||
this.$router.push(`/login?loginType=${loginType}`)
|
||
} else {
|
||
this.$router.push(`/login`)
|
||
}
|
||
this.$i18n.locale = 'zh'
|
||
this.setLanguage('zh')
|
||
this.$updateDictionary()
|
||
},
|
||
save() {
|
||
this.$refs.passwordForm.validate(valid => {
|
||
if (valid) {
|
||
if (this.password.NewPassWord !== this.password.ConfirmPassWord) {
|
||
// 两次密码输入不一致
|
||
this.$alert(this.$t('recompose:message:passwordDiffer'))
|
||
return
|
||
}
|
||
const param = {
|
||
NewUserName: this.password.NewUserName,
|
||
UserId: this.password.UserId,
|
||
NewPwd: md5(this.password.NewPassWord),
|
||
access_token: this.password.access_token
|
||
}
|
||
this.loading = true
|
||
initSetUserNameAndPwd(param).then(res => {
|
||
this.loading = false
|
||
if (res.IsSuccess) {
|
||
// 修改成功,请重新登录账号
|
||
this.$message.success(this.$t('recompose:message:updatedSuccessfully'))
|
||
setTimeout(() => {
|
||
this.logout()
|
||
}, 500)
|
||
}
|
||
}).catch(() => { this.loading = false })
|
||
}
|
||
})
|
||
},
|
||
cancel() {
|
||
this.$refs['passwordForm'].resetFields()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
.reset-wrapper {
|
||
padding: 20px;
|
||
}
|
||
.reset-wrapper .el-page-header {
|
||
line-height: 50px;
|
||
border: 1px solid #ebeef5;
|
||
border-radius: 4px;
|
||
background-color: #fff;
|
||
}
|
||
.reset-wrapper .box-wrapper {
|
||
width: 60%;
|
||
margin: 20px auto;
|
||
padding: 10px;
|
||
color: #303133;
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
input:-webkit-autofill {
|
||
-webkit-text-fill-color: #ededed !important;
|
||
box-shadow: 0 0 0px 1000px transparent inset !important;
|
||
background-color:transparent;
|
||
background-image: none;
|
||
transition: background-color 50000s ease-in-out 0s;
|
||
}
|
||
input {
|
||
background-color:transparent;
|
||
caret-color: #fff;
|
||
}
|
||
::v-deep .is-error.my_new_pwd{
|
||
margin-bottom: 40px;
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
/*>>>.is-error{*/
|
||
/* margin-bottom: 40px;*/
|
||
/*}*/
|
||
|
||
</style>
|