修改密码

08335 / hivui-platform-template

hivui平台项目模板

Browse code 修改密码 master
1 parent a58d273 commit 7f3978d96aca6f0d0116d63a1cf30ddcc0b6d720 20278 authored on 7 Oct 2021

Showing 1 changed file

Ignore Space Show notes View project/hivuiMain/views/layout/components/modifyPw/index.vue
<template> <el-dialog :title="modalTitle" :visible.sync="showDialog" width="500px" :close-on-click-modal="false" :modal-append-to-body="false" :show-close="false" > <el-form ref="form" :model="formData" :rules="rules"> <el-form-item label="旧密码:" :label-width="formLabelWidth" prop="oldPw"> <el-input ref="oldPw" type="password" v-model="formData.oldPw" autocomplete="off" placeholder="请输入旧密码" ></el-input> </el-form-item> <el-form-item label="新密码:" :label-width="formLabelWidth" prop="newPw"> <el-input ref="newPw" type="password" v-model="formData.newPw" autocomplete="off" @input="onChange" placeholder="请输入4-25个数字、字母或符号组合" ></el-input> </el-form-item> <el-progress :style="pwStrengthStyle()" :percentage="currPwStrength.num" :color="currPwStrength.color" :format="format"></el-progress> <el-form-item label="确认新密码:" :label-width="formLabelWidth" prop="newPw2"> <el-input ref="newPw2" type="password" v-model="formData.newPw2" autocomplete="off" placeholder="再次确认新密码" ></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="cancel" :loading="dialogLoading">取消</el-button> <el-button type="primary" @click="submit" :loading="dialogLoading">确定</el-button> </div> </el-dialog> </template> <script> import { modifyPassword } from '@main/api/user' import md5 from "md5"; export default { data(){ var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.formData.newPw) { callback(new Error('两次输入密码不一致!')); } else { callback(); } }; return { modalTitle:"修改密码", formLabelWidth:"100px", formData:{ oldPw:'', newPw:'', newPw2:'', }, dialogLoading:false, rules: { oldPw: [{ required: true, message: "请输入旧密码", trigger: "blur" }], newPw: [ { required: true, message: "请输入新密码", trigger: "blur" }, { min:4,max:25, message: "请输入4-25个数字、字母或符号组合", trigger: "blur" }, ], newPw2: [ { required: true, message: "请再次输入新密码", trigger: "blur" }, { validator:validatePass, trigger: "blur" }, ], }, currPwStrength:{}, pwStrength:[ { num:33, desc:'弱', color:'#f56c6c', }, { num:66, desc:'中', color:'#e6a23c', }, { num:100, desc:'强', color:'#67c23a', }, ], }; }, computed:{ showDialog(){ return this.$store.getters.showPwDialog; }, }, mounted(){ }, methods:{ submit(){ this.$refs.form.validate((valid) => { if(valid){ modifyPassword({ oldPwd:md5(this.formData.oldPw), newPwd:md5(this.formData.newPw), }).then(res=>{ this.$store.dispatch("user/showPwDialog",false); this.dialogLoading=false; this.formData={ oldPw:'', newPw:'', newPw2:'', }; this.$message({ type:"success", message:"修改成功！请重新登录" }); setTimeout(()=>{ this.$store.dispatch("user/logout").then(()=>{ location=window.HIVUI_SETTING.loginUrl; }); },1500); }); }else{ } }); }, cancel(){ this.$store.dispatch("user/showPwDialog",false); this.dialogLoading=false; this.formData={ oldPw:'', newPw:'', newPw2:'', }; }, onChange(val){ var strongRegex = new RegExp("^(?=.{8,})(?=.[A-Z])(?=.[a-z])(?=.[0-9])(?=.\\W).$", "g"); var mediumRegex = new RegExp("^(?=.{7,})(((?=.[A-Z])(?=.[a-z]))\|((?=.[A-Z])(?=.[0-9]))\|((?=.[a-z])(?=.[0-9]))).$", "g"); var enoughRegex = new RegExp("(?=.{4,}).", "g"); if(strongRegex.test(val)){ this.currPwStrength=this.pwStrength[2]; }else if(mediumRegex.test(val)){ this.currPwStrength=this.pwStrength[1]; }else if(enoughRegex.test(val)){ this.currPwStrength=this.pwStrength[0]; }else{ this.currPwStrength={}; } }, format(){ return this.currPwStrength.desc; }, pwStrengthStyle(){ return `margin-left:calc(${this.formLabelWidth} + 15px);margin-bottom:10px;width:calc(100% - ${this.formLabelWidth})` }, } } </script> <template> <el-dialog :title="modalTitle" :visible.sync="showDialog" width="500px" :close-on-click-modal="false" :modal-append-to-body="false" :show-close="false" > <el-form ref="form" :model="formData" :rules="rules"> <el-form-item label="旧密码:" :label-width="formLabelWidth" prop="oldPw"> <el-input ref="oldPw" type="password" v-model="formData.oldPw" autocomplete="off" placeholder="请输入旧密码" ></el-input> </el-form-item> <el-form-item label="新密码:" :label-width="formLabelWidth" prop="newPw"> <el-input ref="newPw" type="password" v-model="formData.newPw" autocomplete="off" @input="onChange" placeholder="请输入4-25个数字、字母或符号组合" ></el-input> </el-form-item> <el-progress :style="pwStrengthStyle()" :percentage="currPwStrength.num" :color="currPwStrength.color" :format="format"></el-progress> <el-form-item label="确认新密码:" :label-width="formLabelWidth" prop="newPw2"> <el-input ref="newPw2" type="password" v-model="formData.newPw2" autocomplete="off" placeholder="再次确认新密码" ></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="cancel" :loading="dialogLoading">取消</el-button> <el-button type="primary" @click="submit" :loading="dialogLoading">确定</el-button> </div> </el-dialog> </template> <script> import { modifyPassword } from '@main/api/user' export default { data(){ var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.formData.newPw) { callback(new Error('两次输入密码不一致!')); } else { callback(); } }; return { modalTitle:"修改密码", formLabelWidth:"100px", formData:{ oldPw:'', newPw:'', newPw2:'', }, dialogLoading:false, rules: { oldPw: [{ required: true, message: "请输入旧密码", trigger: "blur" }], newPw: [ { required: true, message: "请输入新密码", trigger: "blur" }, { min:4,max:25, message: "请输入4-25个数字、字母或符号组合", trigger: "blur" }, ], newPw2: [ { required: true, message: "请再次输入新密码", trigger: "blur" }, { validator:validatePass, trigger: "blur" }, ], }, currPwStrength:{}, pwStrength:[ { num:33, desc:'弱', color:'#f56c6c', }, { num:66, desc:'中', color:'#e6a23c', }, { num:100, desc:'强', color:'#67c23a', }, ], }; }, computed:{ showDialog(){ return this.$store.getters.showPwDialog; }, }, mounted(){ }, methods:{ submit(){ this.$refs.form.validate((valid) => { if(valid){ modifyPassword({ oldPwd:this.formData.oldPw, newPwd:this.formData.newPw, }).then(res=>{ this.$store.dispatch("user/showPwDialog",false); this.dialogLoading=false; this.formData={ oldPw:'', newPw:'', newPw2:'', }; setTimeout(()=>{ this.$store.dispatch("user/logout").then(()=>{ location=window.HIVUI_SETTING.loginUrl; }); },2000); }); }else{ } }); }, cancel(){ this.$store.dispatch("user/showPwDialog",false); this.dialogLoading=false; this.formData={ oldPw:'', newPw:'', newPw2:'', }; }, onChange(val){ var strongRegex = new RegExp("^(?=.{8,})(?=.[A-Z])(?=.[a-z])(?=.[0-9])(?=.\\W).$", "g"); var mediumRegex = new RegExp("^(?=.{7,})(((?=.[A-Z])(?=.[a-z]))\|((?=.[A-Z])(?=.[0-9]))\|((?=.[a-z])(?=.[0-9]))).$", "g"); var enoughRegex = new RegExp("(?=.{4,}).", "g"); if(strongRegex.test(val)){ this.currPwStrength=this.pwStrength[2]; }else if(mediumRegex.test(val)){ this.currPwStrength=this.pwStrength[1]; }else if(enoughRegex.test(val)){ this.currPwStrength=this.pwStrength[0]; }else{ this.currPwStrength={}; } }, format(){ return this.currPwStrength.desc; }, pwStrengthStyle(){ return `margin-left:calc(${this.formLabelWidth} + 15px);margin-bottom:10px;width:calc(100% - ${this.formLabelWidth})` }, } } </script>

Ignore Space Show notes View

project/hivuiMain/views/layout/components/modifyPw/index.vue

<template>
    <el-dialog :title="modalTitle"
      :visible.sync="showDialog"
      width="500px"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :show-close="false"
    >
        <el-form ref="form" :model="formData" :rules="rules">
            <el-form-item label="旧密码:" :label-width="formLabelWidth" prop="oldPw">
                <el-input
                    ref="oldPw"
                    type="password"
                    v-model="formData.oldPw"
                    autocomplete="off"
                    placeholder="请输入旧密码"
                ></el-input>
            </el-form-item>
            <el-form-item label="新密码:" :label-width="formLabelWidth" prop="newPw">
                <el-input
                    ref="newPw"
                    type="password"
                    v-model="formData.newPw"
                    autocomplete="off"
                    @input="onChange"
                    placeholder="请输入4-25个数字、字母或符号组合"
                ></el-input>
            </el-form-item>
            <el-progress :style="pwStrengthStyle()" :percentage="currPwStrength.num" :color="currPwStrength.color" :format="format"></el-progress>
            <el-form-item label="确认新密码:" :label-width="formLabelWidth" prop="newPw2">
                <el-input
                    ref="newPw2"
                    type="password"
                    v-model="formData.newPw2"
                    autocomplete="off"
                    placeholder="再次确认新密码"
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel" :loading="dialogLoading">取 消</el-button>
            <el-button type="primary" @click="submit" :loading="dialogLoading">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script> 
import { modifyPassword } from '@main/api/user'
import md5 from "md5";
export default {
    data(){
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.formData.newPw) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            modalTitle:"修改密码",
            formLabelWidth:"100px",
            formData:{
                oldPw:'',
                newPw:'',
                newPw2:'',
            },
            dialogLoading:false,
            rules: {
                oldPw: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
                newPw: [
                    { required: true, message: "请输入新密码", trigger: "blur" },
                    { min:4,max:25, message: "请输入4-25个数字、字母或符号组合", trigger: "blur" },
                ],
                newPw2: [
                    { required: true, message: "请再次输入新密码", trigger: "blur" },
                    { validator:validatePass, trigger: "blur" },
                ],
            },
            currPwStrength:{},
            pwStrength:[
                {
                    num:33,
                    desc:'弱',
                    color:'#f56c6c',
                },
                {
                    num:66,
                    desc:'中',
                    color:'#e6a23c',
                },
                {
                    num:100,
                    desc:'强',
                    color:'#67c23a',
                },
            ],
        };
    },
    computed:{
        showDialog(){
            return this.$store.getters.showPwDialog;
        },
    },
    mounted(){
        
    },
    methods:{ 
        submit(){
            this.$refs.form.validate((valid) => {
                if(valid){
                    modifyPassword({
                        oldPwd:md5(this.formData.oldPw),
                        newPwd:md5(this.formData.newPw),
                    }).then(res=>{
                        this.$store.dispatch("user/showPwDialog",false);
                        this.dialogLoading=false;
                        this.formData={
                            oldPw:'',
                            newPw:'',
                            newPw2:'',
                        };
                        this.$message({
                            type:"success",
                            message:"修改成功！请重新登录"
                        });
                        setTimeout(()=>{
                            this.$store.dispatch("user/logout").then(()=>{
                                location=window.HIVUI_SETTING.loginUrl;
                            });
                        },1500);
                    });
                }else{

}
            });
        },
        cancel(){
            this.$store.dispatch("user/showPwDialog",false);
            this.dialogLoading=false;
            this.formData={
                oldPw:'',
                newPw:'',
                newPw2:'',
            };
        },
        onChange(val){
            var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); 
			var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); 
            var enoughRegex = new RegExp("(?=.{4,}).*", "g"); 
            if(strongRegex.test(val)){
                this.currPwStrength=this.pwStrength[2];
            }else if(mediumRegex.test(val)){
                this.currPwStrength=this.pwStrength[1];
            }else if(enoughRegex.test(val)){
                this.currPwStrength=this.pwStrength[0];
            }else{
                this.currPwStrength={};
            }
        },
        format(){
            return this.currPwStrength.desc;
        },
        pwStrengthStyle(){
            return `margin-left:calc(${this.formLabelWidth} + 15px);margin-bottom:10px;width:calc(100% - ${this.formLabelWidth})`
        },
    }
}
</script>

<template>
    <el-dialog :title="modalTitle"
      :visible.sync="showDialog"
      width="500px"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :show-close="false"
    >
        <el-form ref="form" :model="formData" :rules="rules">
            <el-form-item label="旧密码:" :label-width="formLabelWidth" prop="oldPw">
                <el-input
                    ref="oldPw"
                    type="password"
                    v-model="formData.oldPw"
                    autocomplete="off"
                    placeholder="请输入旧密码"
                ></el-input>
            </el-form-item>
            <el-form-item label="新密码:" :label-width="formLabelWidth" prop="newPw">
                <el-input
                    ref="newPw"
                    type="password"
                    v-model="formData.newPw"
                    autocomplete="off"
                    @input="onChange"
                    placeholder="请输入4-25个数字、字母或符号组合"
                ></el-input>
            </el-form-item>
            <el-progress :style="pwStrengthStyle()" :percentage="currPwStrength.num" :color="currPwStrength.color" :format="format"></el-progress>
            <el-form-item label="确认新密码:" :label-width="formLabelWidth" prop="newPw2">
                <el-input
                    ref="newPw2"
                    type="password"
                    v-model="formData.newPw2"
                    autocomplete="off"
                    placeholder="再次确认新密码"
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel" :loading="dialogLoading">取 消</el-button>
            <el-button type="primary" @click="submit" :loading="dialogLoading">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script> 
import { modifyPassword } from '@main/api/user'
export default {
    data(){
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.formData.newPw) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            modalTitle:"修改密码",
            formLabelWidth:"100px",
            formData:{
                oldPw:'',
                newPw:'',
                newPw2:'',
            },
            dialogLoading:false,
            rules: {
                oldPw: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
                newPw: [
                    { required: true, message: "请输入新密码", trigger: "blur" },
                    { min:4,max:25, message: "请输入4-25个数字、字母或符号组合", trigger: "blur" },
                ],
                newPw2: [
                    { required: true, message: "请再次输入新密码", trigger: "blur" },
                    { validator:validatePass, trigger: "blur" },
                ],
            },
            currPwStrength:{},
            pwStrength:[
                {
                    num:33,
                    desc:'弱',
                    color:'#f56c6c',
                },
                {
                    num:66,
                    desc:'中',
                    color:'#e6a23c',
                },
                {
                    num:100,
                    desc:'强',
                    color:'#67c23a',
                },
            ],
        };
    },
    computed:{
        showDialog(){
            return this.$store.getters.showPwDialog;
        },
    },
    mounted(){
        
    },
    methods:{ 
        submit(){
            this.$refs.form.validate((valid) => {
                if(valid){
                    modifyPassword({
                        oldPwd:this.formData.oldPw,
                        newPwd:this.formData.newPw,
                    }).then(res=>{
                        this.$store.dispatch("user/showPwDialog",false);
                        this.dialogLoading=false;
                        this.formData={
                            oldPw:'',
                            newPw:'',
                            newPw2:'',
                        };
                        setTimeout(()=>{
                            this.$store.dispatch("user/logout").then(()=>{
                                location=window.HIVUI_SETTING.loginUrl;
                            });
                        },2000);
                    });
                }else{

Show line notes below