system/components/user/ChangePass.vue

<template>
  <div>
    <Caption v-bind="{title: store.lang==='en'? 'Change password' : 'Đổi mật khẩu', type: 'has-text-warning'}"></Caption>
    <div class="field mt-5" style="width: 400px;">
      <label class="label">{{findLang('current-pass')}} <b class="has-text-danger">*</b></label>
  <div class="field-body">
    <div class="field has-addons">
      <p class="control is-expanded">
        <input class="input" :type="showpass? 'text' : 'password'" :placeholder="findLang('placeholder1')" v-model="currpass">
      </p>
        <div class="control">
    <a class="button" @click="showpass=!showpass">
      <SvgIcon v-bind="{name: showpass? 'eye-off.svg' : 'view.svg', type: 'gray', size: 24}"/>
    </a>
  </div>
    </div>
  </div>
   <p class="help is-danger" v-if="errors.find(v=>v.name==='currpass')">{{errors.find(v=>v.name==='currpass').text}}</p>
</div>
<div class="field mt-5" style="width: 400px;">
  <label class="label">{{findLang('new-pass')}} <b class="has-text-danger">*</b></label>
  <div class="field-body">
    <div class="field has-addons">
      <p class="control is-expanded">
        <input class="input" :type="showpass? 'text' : 'password'" :placeholder="findLang('placeholder1')" v-model="password">
      </p>
        <div class="control">
    <a class="button" @click="showpass=!showpass">
      <SvgIcon v-bind="{name: showpass? 'eye-off.svg' : 'view.svg', type: 'gray', size: 24}"/>
      </a>
  </div>
    </div>
  </div>
   <p class="help is-danger" v-if="errors.find(v=>v.name==='password')">{{errors.find(v=>v.name==='password').text}}</p>
</div>
<div class="field mt-5" style="width: 400px;">
  <label class="label">{{findLang('retype-pass')}} <b class="has-text-danger">*</b></label>
  <div class="field-body">
    <div class="field has-addons">
      <p class="control is-expanded">
        <input class="input" :type="showpass? 'text' : 'password'" :placeholder="findLang('placeholder2')" v-model="retypepass">
      </p>
        <div class="control">
    <a class="button" @click="showpass=!showpass">
      <SvgIcon v-bind="{name: showpass? 'eye-off.svg' : 'view.svg', type: 'gray', size: 24}"/>
      </a>
  </div>
    </div>
  </div>
   <p class="help is-danger" v-if="errors.find(v=>v.name==='retypepass')">{{errors.find(v=>v.name==='retypepass').text}}</p>
</div>
    <div class="mt-5 pt-2">
      <button class="button is-primary has-text-white" @click="changePassword()">{{ findLang('save') }}</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      errors: [],
      currpass: undefined,
      password: undefined,
      retypepass: undefined,
      showpass: true
    }
  },
  setup() {
    const store = useStore()
    return { store }
  },
  methods: {
    findLang(code) {
      let found = this.$find(this.store.common, {code: code})
      return found? found[this.store.lang] : null
    },
    async changePassword()  {
      if(!this.checkPassword()) return
      let conn = this.$findapi('login')
      conn.params.filter = {username: this.store.login.username, password: this.currpass}
      let result= await this.$getapi([conn])
      let user = result.find(v => v.name==="login").data.rows
      if(!user) return this.errors.push({ name: 'currpass', text: 'Incorrect password.' })
      let rs0 = await this.$insertapi('gethash', {text: this.password}, undefined, false)
      user.password = rs0.rows[0]
      let rs = await this.$updateapi('user', user, undefined, false)
      if(rs!=='error') {
        this.currpass = undefined
        this.password = undefined
        this.retypepass = undefined
        this.$snackbar( 'Mật khẩu đã được thay đổi thành công. Vui lòng đăng nhập lại.')
        setTimeout(()=> window.location.href = window.location.href = 'https://login.bigdatatech.vn/signin?link=' + window.location.origin, 3000)
      } else {
        this.$snackbar( 'Đã xảy ra lỗi. Vui lòng thử lại.')
      }
    },
    checkPassword() {
      this.errors = []
      if (this.$empty(this.currpass)) {
        this.errors.push({ name: 'currpass', text: 'Mật khẩu không được để trống.' })
      } else if (this.currpass.length < 6) {
        this.errors.push({ name: 'currpass', text: 'Mật khẩu phải có ít nhất 6 ký tự và bao gồm cả chữ và số.' })
      } else if (!(/\d/.test(this.currpass) && /[a-zA-Z]/.test(this.currpass))) {
        this.errors.push({ name: 'currpass', text: 'Mật khẩu phải có ít nhất 6 ký tự và bao gồm cả chữ và số.' })
      }
      if (this.$empty(this.password)) {
        this.errors.push({ name: 'password', text: 'Mật khẩu không được để trống.' })
      } else if (this.password.length < 6) {
        this.errors.push({ name: 'password', text: 'Mật khẩu phải có ít nhất 6 ký tự và bao gồm cả chữ và số.' })
      } else if (!(/\d/.test(this.password) && /[a-zA-Z]/.test(this.password))) {
        this.errors.push({ name: 'password', text: 'Mật khẩu phải có ít nhất 6 ký tự và bao gồm cả chữ và số.' })
      }
      if (this.$empty(this.retypepass)) {
        this.errors.push({ name: 'retypepass', text: 'Xác nhận mật khẩu không được để trống.' })
      } else if (this.password !== this.retypepass) {
        this.errors.push({ name: 'retypepass', text: 'Xác nhận mật khẩu phải trùng khớp với mật khẩu đã nhập.' })
      }
      return this.errors.length>0? false : true
    }
  }
}
</script>