@中文描述:修改密码弹窗样式修改 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述:修改密码弹窗样式修改 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent 0e98647 commit 6cc578fdf90d31c47fd488893524f51ca20b51bd 20278 authored on 11 Apr 2023

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 class="modifyPw" ref="form" :model="formData" :rules="rules"> <el-form-item :label="$t('hivuiMain_modifypw_oldpw')" :label-width="formLabelWidth" prop="oldPw"> <el-input ref="oldPw" type="password" v-model="formData.oldPw" autocomplete="off" :placeholder="$t('hivuiMain_modifypw_oldpw')" ></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_modifypw_newpw')" :label-width="formLabelWidth" prop="newPw"> <el-input ref="newPw" type="password" v-model="formData.newPw" autocomplete="off" @input="onChange" :placeholder="$t('hivuiMain_modifypw_newpw_ph')" ></el-input> </el-form-item> <el-progress :style="pwStrengthStyle()" :percentage="currPwStrength.num" :color="currPwStrength.color" :format="format"></el-progress> <el-form-item :label="$t('hivuiMain_modifypw_newpw2')" :label-width="formLabelWidth" prop="newPw2"> <el-input ref="newPw2" type="password" v-model="formData.newPw2" autocomplete="off" :placeholder="$t('hivuiMain_modifypw_newpw2_ph')" ></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="cancel" :loading="dialogLoading">{{$t('hivuiMain_dialog_cancel')}}</el-button> <el-button type="primary" @click="submit" :loading="dialogLoading">{{$t('hivuiMain_dialog_define')}}</el-button> </div> </el-dialog> </template> <script> import { modifyPassword } from '@main/api/user' import md5 from "js-md5"; export default { data(){ var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error(this.$t('hivuiMain_modifypw_valid_pw2_empty2'))); } else if (value !== this.formData.newPw) { callback(new Error(this.$t('hivuiMain_modifypw_valid_pw2_msg'))); } else { callback(); } }; return { modalTitle:this.$t('hivuiMain_modifypw_title'), formLabelWidth:"140px", formData:{ oldPw:'', newPw:'', newPw2:'', }, dialogLoading:false, rules: { oldPw: [{ required: true, message: this.$t('hivuiMain_modifypw_oldpw'), trigger: "blur" }], newPw: [ { required: true, message: this.$t('hivuiMain_modifypw_valid_pw_empty'), trigger: "blur" }, { min:4,max:25, message: this.$t('hivuiMain_modifypw_newpw_ph'), trigger: "blur" }, ], newPw2: [ { required: true, message: this.$t('hivuiMain_modifypw_valid_pw2_empty'), trigger: "blur" }, { validator:validatePass, trigger: "blur" }, ], }, currPwStrength:{}, pwStrength:[ { num:33, desc:this.$t('hivuiMain_modifypw_weak'), color:'#f56c6c', }, { num:66, desc:this.$t('hivuiMain_modifypw_middle'), color:'#e6a23c', }, { num:100, desc:this.$t('hivuiMain_modifypw_strong'), color:'#67c23a', }, ], }; }, computed:{ showDialog(){ return this.$store.getters.showPwDialog; }, }, mounted(){ }, methods:{ submit(){ let me=this; 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:me.$t('hivuiMain_modifypw_success') }); 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> <style lang="less" scoped> .modifyPw{ /deep/.el-dialog__body{ word-break: break-word; } } </style> <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="$t('hivuiMain_modifypw_oldpw')" :label-width="formLabelWidth" prop="oldPw"> <el-input ref="oldPw" type="password" v-model="formData.oldPw" autocomplete="off" :placeholder="$t('hivuiMain_modifypw_oldpw')" ></el-input> </el-form-item> <el-form-item :label="$t('hivuiMain_modifypw_newpw')" :label-width="formLabelWidth" prop="newPw"> <el-input ref="newPw" type="password" v-model="formData.newPw" autocomplete="off" @input="onChange" :placeholder="$t('hivuiMain_modifypw_newpw_ph')" ></el-input> </el-form-item> <el-progress :style="pwStrengthStyle()" :percentage="currPwStrength.num" :color="currPwStrength.color" :format="format"></el-progress> <el-form-item :label="$t('hivuiMain_modifypw_newpw2')" :label-width="formLabelWidth" prop="newPw2"> <el-input ref="newPw2" type="password" v-model="formData.newPw2" autocomplete="off" :placeholder="$t('hivuiMain_modifypw_newpw2_ph')" ></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="cancel" :loading="dialogLoading">{{$t('hivuiMain_dialog_cancel')}}</el-button> <el-button type="primary" @click="submit" :loading="dialogLoading">{{$t('hivuiMain_dialog_define')}}</el-button> </div> </el-dialog> </template> <script> import { modifyPassword } from '@main/api/user' import md5 from "js-md5"; export default { data(){ var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error(this.$t('hivuiMain_modifypw_valid_pw2_empty2'))); } else if (value !== this.formData.newPw) { callback(new Error(this.$t('hivuiMain_modifypw_valid_pw2_msg'))); } else { callback(); } }; return { modalTitle:this.$t('hivuiMain_modifypw_title'), formLabelWidth:"100px", formData:{ oldPw:'', newPw:'', newPw2:'', }, dialogLoading:false, rules: { oldPw: [{ required: true, message: this.$t('hivuiMain_modifypw_oldpw'), trigger: "blur" }], newPw: [ { required: true, message: this.$t('hivuiMain_modifypw_valid_pw_empty'), trigger: "blur" }, { min:4,max:25, message: this.$t('hivuiMain_modifypw_newpw_ph'), trigger: "blur" }, ], newPw2: [ { required: true, message: this.$t('hivuiMain_modifypw_valid_pw2_empty'), trigger: "blur" }, { validator:validatePass, trigger: "blur" }, ], }, currPwStrength:{}, pwStrength:[ { num:33, desc:this.$t('hivuiMain_modifypw_weak'), color:'#f56c6c', }, { num:66, desc:this.$t('hivuiMain_modifypw_middle'), color:'#e6a23c', }, { num:100, desc:this.$t('hivuiMain_modifypw_strong'), color:'#67c23a', }, ], }; }, computed:{ showDialog(){ return this.$store.getters.showPwDialog; }, }, mounted(){ }, methods:{ submit(){ let me=this; 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:me.$t('hivuiMain_modifypw_success') }); 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>

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 class="modifyPw" ref="form" :model="formData" :rules="rules">
            <el-form-item :label="$t('hivuiMain_modifypw_oldpw')" :label-width="formLabelWidth" prop="oldPw">
                <el-input
                    ref="oldPw"
                    type="password"
                    v-model="formData.oldPw"
                    autocomplete="off"
                    :placeholder="$t('hivuiMain_modifypw_oldpw')"
                ></el-input>
            </el-form-item>
            <el-form-item :label="$t('hivuiMain_modifypw_newpw')" :label-width="formLabelWidth" prop="newPw">
                <el-input
                    ref="newPw"
                    type="password"
                    v-model="formData.newPw"
                    autocomplete="off"
                    @input="onChange"
                    :placeholder="$t('hivuiMain_modifypw_newpw_ph')"
                ></el-input>
            </el-form-item>
            <el-progress :style="pwStrengthStyle()" :percentage="currPwStrength.num" :color="currPwStrength.color" :format="format"></el-progress>
            <el-form-item :label="$t('hivuiMain_modifypw_newpw2')" :label-width="formLabelWidth" prop="newPw2">
                <el-input
                    ref="newPw2"
                    type="password"
                    v-model="formData.newPw2"
                    autocomplete="off"
                    :placeholder="$t('hivuiMain_modifypw_newpw2_ph')"
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel" :loading="dialogLoading">{{$t('hivuiMain_dialog_cancel')}}</el-button>
            <el-button type="primary" @click="submit" :loading="dialogLoading">{{$t('hivuiMain_dialog_define')}}</el-button>
        </div>
    </el-dialog>
</template>
<script> 
import { modifyPassword } from '@main/api/user'
import md5 from "js-md5";
export default {
    data(){
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error(this.$t('hivuiMain_modifypw_valid_pw2_empty2')));
            } else if (value !== this.formData.newPw) {
                callback(new Error(this.$t('hivuiMain_modifypw_valid_pw2_msg')));
            } else {
                callback();
            }
        };
        return {
            modalTitle:this.$t('hivuiMain_modifypw_title'),
            formLabelWidth:"140px",
            formData:{
                oldPw:'',
                newPw:'',
                newPw2:'',
            },
            dialogLoading:false,
            rules: {
                oldPw: [{ required: true, message: this.$t('hivuiMain_modifypw_oldpw'), trigger: "blur" }],
                newPw: [
                    { required: true, message: this.$t('hivuiMain_modifypw_valid_pw_empty'), trigger: "blur" },
                    { min:4,max:25, message: this.$t('hivuiMain_modifypw_newpw_ph'), trigger: "blur" },
                ],
                newPw2: [
                    { required: true, message: this.$t('hivuiMain_modifypw_valid_pw2_empty'), trigger: "blur" },
                    { validator:validatePass, trigger: "blur" },
                ],
            },
            currPwStrength:{},
            pwStrength:[
                {
                    num:33,
                    desc:this.$t('hivuiMain_modifypw_weak'),
                    color:'#f56c6c',
                },
                {
                    num:66,
                    desc:this.$t('hivuiMain_modifypw_middle'),
                    color:'#e6a23c',
                },
                {
                    num:100,
                    desc:this.$t('hivuiMain_modifypw_strong'),
                    color:'#67c23a',
                },
            ],
        };
    },
    computed:{
        showDialog(){
            return this.$store.getters.showPwDialog;
        },
    },
    mounted(){
        
    },
    methods:{ 
        submit(){
            let me=this;
            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:me.$t('hivuiMain_modifypw_success')
                        });
                        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>
<style lang="less" scoped>
    .modifyPw{
        /deep/.el-dialog__body{
            word-break: break-word;
        }
    }
    
</style>

<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="$t('hivuiMain_modifypw_oldpw')" :label-width="formLabelWidth" prop="oldPw">
                <el-input
                    ref="oldPw"
                    type="password"
                    v-model="formData.oldPw"
                    autocomplete="off"
                    :placeholder="$t('hivuiMain_modifypw_oldpw')"
                ></el-input>
            </el-form-item>
            <el-form-item :label="$t('hivuiMain_modifypw_newpw')" :label-width="formLabelWidth" prop="newPw">
                <el-input
                    ref="newPw"
                    type="password"
                    v-model="formData.newPw"
                    autocomplete="off"
                    @input="onChange"
                    :placeholder="$t('hivuiMain_modifypw_newpw_ph')"
                ></el-input>
            </el-form-item>
            <el-progress :style="pwStrengthStyle()" :percentage="currPwStrength.num" :color="currPwStrength.color" :format="format"></el-progress>
            <el-form-item :label="$t('hivuiMain_modifypw_newpw2')" :label-width="formLabelWidth" prop="newPw2">
                <el-input
                    ref="newPw2"
                    type="password"
                    v-model="formData.newPw2"
                    autocomplete="off"
                    :placeholder="$t('hivuiMain_modifypw_newpw2_ph')"
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel" :loading="dialogLoading">{{$t('hivuiMain_dialog_cancel')}}</el-button>
            <el-button type="primary" @click="submit" :loading="dialogLoading">{{$t('hivuiMain_dialog_define')}}</el-button>
        </div>
    </el-dialog>
</template>
<script> 
import { modifyPassword } from '@main/api/user'
import md5 from "js-md5";
export default {
    data(){
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error(this.$t('hivuiMain_modifypw_valid_pw2_empty2')));
            } else if (value !== this.formData.newPw) {
                callback(new Error(this.$t('hivuiMain_modifypw_valid_pw2_msg')));
            } else {
                callback();
            }
        };
        return {
            modalTitle:this.$t('hivuiMain_modifypw_title'),
            formLabelWidth:"100px",
            formData:{
                oldPw:'',
                newPw:'',
                newPw2:'',
            },
            dialogLoading:false,
            rules: {
                oldPw: [{ required: true, message: this.$t('hivuiMain_modifypw_oldpw'), trigger: "blur" }],
                newPw: [
                    { required: true, message: this.$t('hivuiMain_modifypw_valid_pw_empty'), trigger: "blur" },
                    { min:4,max:25, message: this.$t('hivuiMain_modifypw_newpw_ph'), trigger: "blur" },
                ],
                newPw2: [
                    { required: true, message: this.$t('hivuiMain_modifypw_valid_pw2_empty'), trigger: "blur" },
                    { validator:validatePass, trigger: "blur" },
                ],
            },
            currPwStrength:{},
            pwStrength:[
                {
                    num:33,
                    desc:this.$t('hivuiMain_modifypw_weak'),
                    color:'#f56c6c',
                },
                {
                    num:66,
                    desc:this.$t('hivuiMain_modifypw_middle'),
                    color:'#e6a23c',
                },
                {
                    num:100,
                    desc:this.$t('hivuiMain_modifypw_strong'),
                    color:'#67c23a',
                },
            ],
        };
    },
    computed:{
        showDialog(){
            return this.$store.getters.showPwDialog;
        },
    },
    mounted(){
        
    },
    methods:{ 
        submit(){
            let me=this;
            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:me.$t('hivuiMain_modifypw_success')
                        });
                        setTimeout(()=>{
                            this.$store.dispatch("user/logout").then(()=>{
                                location=window.HIVUI_SETTING.loginUrl;
                            });
                        },1500);
                    });
                }else{

Show line notes below