96 lines
		
	
	
		
			2.6 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			96 lines
		
	
	
		
			2.6 KiB
		
	
	
	
		
			Plaintext
		
	
	
<template>
 | 
						|
  <div class="app-container">
 | 
						|
    <el-card class="Security" style="width:800px;">
 | 
						|
      <div slot="header" class="clearfix">
 | 
						|
        <span>Security</span>
 | 
						|
      </div>
 | 
						|
      <el-form
 | 
						|
        ref="userAccount"
 | 
						|
        :model="user"
 | 
						|
        :rules="userFormRules"
 | 
						|
        label-width="150px"
 | 
						|
        style="width:600px;"
 | 
						|
      >
 | 
						|
        <el-form-item label="Current Password" prop="OldPassWord">
 | 
						|
          <el-input v-model="user.OldPassWord" type="password" />
 | 
						|
        </el-form-item>
 | 
						|
        <el-form-item label="New Password" prop="NewPassWord">
 | 
						|
          <el-input v-model="user.NewPassWord" type="password" />
 | 
						|
        </el-form-item>
 | 
						|
        <el-form-item label="Confirm Password" prop="ConfirmPassWord">
 | 
						|
          <el-input v-model="user.ConfirmPassWord" type="password" />
 | 
						|
        </el-form-item>
 | 
						|
        <el-form-item>
 | 
						|
          <el-button type="primary" size="small" @click="save">save</el-button>
 | 
						|
        </el-form-item>
 | 
						|
      </el-form>
 | 
						|
    </el-card>
 | 
						|
  </div>
 | 
						|
</template>
 | 
						|
<script>
 | 
						|
import { modifyPassword } from '@/api/admin'
 | 
						|
import store from '@/store'
 | 
						|
import { mapGetters } from 'vuex'
 | 
						|
import md5 from 'js-md5'
 | 
						|
export default {
 | 
						|
  data() {
 | 
						|
    return {
 | 
						|
      user: {},
 | 
						|
      userFormRules: {
 | 
						|
        OldPassWord: [{ required: true, message: 'Please specify', trigger: 'blur' }],
 | 
						|
        NewPassWord: [
 | 
						|
          { required: true, message: 'Please specify', trigger: 'blur' },
 | 
						|
          {
 | 
						|
            min: 6,
 | 
						|
            max: 20,
 | 
						|
            message: 'Passwords consist of 6-20 characters',
 | 
						|
            trigger: 'blur'
 | 
						|
          }
 | 
						|
        ],
 | 
						|
        ConfirmPassWord: [
 | 
						|
          { required: true, message: 'Please specify', trigger: 'blur' },
 | 
						|
          {
 | 
						|
            min: 6,
 | 
						|
            max: 20,
 | 
						|
            message: 'Passwords consist of 6-20 characters',
 | 
						|
            trigger: 'blur'
 | 
						|
          }
 | 
						|
        ]
 | 
						|
      }
 | 
						|
    }
 | 
						|
  },
 | 
						|
  computed: {
 | 
						|
    ...mapGetters(['userId'])
 | 
						|
  },
 | 
						|
  created() {
 | 
						|
    this.userId === '' ? store.dispatch('user/getInfo') : ''
 | 
						|
  },
 | 
						|
  methods: {
 | 
						|
    save() {
 | 
						|
      this.$refs.userAccount.validate(valid => {
 | 
						|
        if (valid) {
 | 
						|
          if (this.user.NewPassWord !== this.user.ConfirmPassWord) {
 | 
						|
            this.$message.error('The two passwords differ')
 | 
						|
            return
 | 
						|
          }
 | 
						|
          const param = {
 | 
						|
            UserId: this.userId,
 | 
						|
            NewPassWord: md5(this.user.NewPassWord),
 | 
						|
            OldPassWord: md5(this.user.OldPassWord)
 | 
						|
          }
 | 
						|
          modifyPassword(param).then(res => {
 | 
						|
            if (res.IsSuccess) {
 | 
						|
              this.$message({
 | 
						|
                message: 'Updated successfully',
 | 
						|
                type: 'success'
 | 
						|
              })
 | 
						|
            }
 | 
						|
          })
 | 
						|
        }
 | 
						|
      })
 | 
						|
    }
 | 
						|
  }
 | 
						|
}
 | 
						|
 | 
						|
</script>
 |