Initial commit

app/components/user/ChangePass.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <Caption v-bind="{title: 'Đổi mật khẩu', type: 'has-text-warning'}"></Caption>
+    <div class="field mt-5" style="width: 400px;">
+      <label class="label">Mật khẩu hiện tại <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="Ít nhất 6 ký tự, bao gồm cả chữ và số." 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">Mật khẩu mới <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="Ít nhất 6 ký tự, bao gồm cả chữ và số." 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">Nhắc lại mật khẩu <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="Phải trùng khớp với mật khẩu mới." 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 ${loading? 'is-loading' : ''}`" @click="changePassword()">Cập nhật</button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      errors: [],
+      currpass: undefined,
+      password: undefined,
+      retypepass: undefined,
+      showpass: true,
+      loading: false
+    }
+  },
+  setup() {
+    const store = useStore()
+    return { store }
+  },
+  methods: {
+    async changePassword()  {
+      if(!this.checkPassword()) return
+      this.loading = true
+      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.')
+        this.store.commit('login', undefined)
+        $fetch(`${this.$getpath()}set-token-expiry/?username=${rs.username}`)
+        setTimeout(()=> this.$requestLogin(), 3000)
+      } else {
+        this.$snackbar( 'Đã xảy ra lỗi. Vui lòng thử lại.')
+      }
+      this.loading = false
+    },
+    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>

app/components/user/ConfirmCode.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <Caption v-bind="{title: 'Tạo mã duyệt'}"></Caption>
+    <article class="message is-dark">
+  <div class="message-body py-2 mt-5 has-text-dark">
+    Khi thực hiện các tác vụ quan trọng như giải ngân, hạch toán...hệ thống sẽ yêu cầu nhập mã đuyệt. Mã duyệt là một chuỗi gồm 4 chữ số, hãy ghi nhớ mã này
+  </div>
+</article>
+
+    <div class="field is-grouped mt-5">
+      <div class="control mr-5" v-for="v in [1,2,3,4]">
+        <input class="input is-dark" style="font-size: 18px; max-width: 40px; font-weight:bold; text-align: center;" type="password" 
+        maxlength="1" :id="`input${v}`" v-model="data[v]" @keyup="changeNext(v)" />
+      </div>
+    </div>
+    <div class="mt-2">
+      <a @click="reset()">Nhập lại</a>
+    </div>
+    <div class="mt-5 pt-3">
+    <button class="button is-primary" @click="confirm()">Xác nhận</button>
+  </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      data: {},
+      code: undefined
+    }
+  },
+  mounted() {
+    this.reset()
+  },
+  methods: {
+    async confirm() {
+      if(this.checkError()) return this.$snackbar('Mã phê duyệt gồm 4 số từ 0-9')
+      let user = await this.$getdata('user', undefined, {filter: {id: this.$store.state.login.id}}, true)
+      user.approval_code = this.code
+      await this.$updateapi('user', user)
+    },
+    checkError() {
+      if(Object.keys(this.data).length<4) return true
+      let code = ''
+      for (let val in this.data) {
+        if(!this.$empty(val)) code += val.toString() 
+      }
+      if(this.$empty(code) || !this.$isNumber(code)) return true
+      this.code = code
+      return false
+    },
+    changeNext(v) {
+      if(this.$empty(this.data[v])) return
+      else if(v===4) return this.checkError()
+      let doc = document.getElementById(`input${v+1}`)
+      if(doc) doc.focus()
+    },
+    reset() {
+      this.data = {}
+      let doc = document.getElementById(`input1`)
+      if(doc) doc.focus()
+    }
+  }
+}
+</script>

app/components/user/EditUser.vue

@@ -0,0 +1,121 @@
+<template>
+  <div v-if="record">
+    <div class="columns is-multiline mx-0">
+    <div class="column is-4">
+      <div class="field">
+  <label class="label">User name<b class="ml-1 has-text-danger">*</b></label>
+  <div class="control">
+    <input class="input" type="text" placeholder="" v-model="record.username">
+  </div>
+</div>
+    </div>
+    <div class="column is-4">
+      <div class="field">
+  <label class="label">Full name<b class="ml-1 has-text-danger">*</b></label>
+  <div class="control">
+    <input class="input" type="text" placeholder="" v-model="record.fullname">
+  </div>
+  <p class="help is-danger" v-if="errors.fullname">{{errors.fullname}}</p>
+</div>
+    </div>
+    <div class="column is-4">
+      <div class="field">
+  <label class="label">Phone<b class="ml-1 has-text-danger">*</b></label>
+  <div class="control">
+    <input class="input" type="text" placeholder="" v-model="record.phone">
+  </div>
+</div>
+    </div>
+    <div class="column is-4">
+      <div class="field">
+  <label class="label">Account type<b class="ml-1 has-text-danger">*</b></label>
+  <div class="control">
+    <SearchBox v-bind="{api:'usertype', field:'name', column:['name'], first:true, optionid:record.type}"
+    @option="selected('_type', $event)"></SearchBox>
+  </div>
+  <p class="help is-danger" v-if="errors.type">{{errors.type}}</p>
+</div>
+    </div>
+    <div class="column is-4">
+      <div class="field">
+  <label class="label">Status<b class="ml-1 has-text-danger">*</b></label>
+  <div class="control">
+    <p class="mt-4">
+    <b-radio v-model="radioBlocked"
+                native-value="0">
+                Active
+            </b-radio>
+            <b-radio v-model="radioBlocked" class="ml-3"
+                native-value="1">
+                Locked
+            </b-radio>
+          </p>
+  </div>
+</div>
+    </div>
+    </div>
+    <div class="mt-5">
+    <button class="button is-primary has-text-white" @click="update()">Update</button>
+  </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['pagename', 'row'],
+  data() {
+    return {
+      errors: {},
+      record: this.row? this.$copy(this.row) : undefined,
+      radioBlocked: undefined,
+      radio: undefined,
+      branch: [],
+      check: {},
+      branchOpt: undefined
+    }
+  },
+  async created() {
+    this.record = await this.$getdata('user', undefined, {filter: {id: this.row.id}}, true)
+    this.radioBlocked = this.record.blocked? 1 : 0
+  },
+  methods: {
+    selected(attr, obj) {
+      this.record[attr] = obj
+    },
+    checkError () {
+      this.errors = []
+      if (!this.$empty(this.record.fullname)) { this.record.fullname = this.record.fullname.trim() }
+      if (!this.$empty(this.record.username)) { this.record.username = this.record.username.trim().toLowerCase() }
+      if (this.$empty(this.record.fullname)) {
+        this.errors.fullname = 'Họ và tên không được bỏ trống'
+      } else if (this.record.fullname.length < 5) {
+        this.errors.fullname = 'Họ và tên quá ngắn. Yêu cầu từ 5 kí tự trở nên'
+      }
+      if (this.$empty(this.record.username)) {
+        this.errors.username = 'Tài khoản không được bỏ trống'
+      } else if (this.record.username!==this.record.username.replace(' ', '')) {
+        this.errors.username = 'Tài khoản không được chứa khoảng trắng'
+      } else if(this.record.username.length<5) {
+        this.errors.fullname = 'Tài khoản quá ngắn. Yêu cầu từ 5 kí tự trở nên'
+      }
+      if(!(this.record._type || this.record.type)) this.errors.type = 'Chưa chọn loại tài khoản'
+      return this.errors.length>0? true : false
+    },
+    async update() {
+      if(this.checkError()) return
+      if(this.record._type) this.record.type = this.record._type.id
+      this.record.blocked = this.radioBlocked
+      let rs = await this.$updaterow('user', this.record, undefined, this.pagename)
+      if(this.radioBlocked) this.setTokenExpiry()
+    },
+    doCheck(v) {
+      this.$set(this.check, v.code, this.check[v.code]? false : true)
+    },
+    async setTokenExpiry() {
+      let rows = await this.$getdata('token', {user: this.record.id, expiry: 0})
+      if(rows.length===0) return
+      rows.map(v=>v.expiry = 1)
+      this.$insertapi('token', rows, undefined, true)
+    }
+  }
+}
+</script>

app/components/user/Logout.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+  <article class="message is-dark">
+    <div class="message-body py-2 mt-5 has-text-dark fs-16">
+      {{$store.lang==='en'? 'Click the button below to log out of the system.' : 'Nhấn vào nút bên dưới để thoát khỏi hệ thống.'}}
+    </div>
+  </article>
+  <div class="mt-5 pt-3">
+    <button class="button is-primary has-text-white" @click="$requestLogin()">{{$store.lang==='en'? 'Sign out' : 'Đăng xuất'}}</button>
+  </div>
+  </div>
+</template>
+<script setup>
+const { $store, $requestLogin } = useNuxtApp()
+</script>

app/components/user/NewUser.vue

@@ -0,0 +1,199 @@
+<template>
+ <div>
+  <div class="field is-horizontal">
+    <div class="field-body">
+<div class="field">
+  <label class="label">Full name<b class="ml-1 has-text-danger">*</b></label>
+  <div class="control">
+    <input class="input" type="text" placeholder="" v-model="fullname">
+  </div>
+  <p class="help is-danger" v-if="errors.find(v=>v.name==='fullname')">{{errors.find(v=>v.name==='fullname').text}}</p>
+</div>
+<div class="field is-narrow">
+  <label class="label">Phone</label>
+  <div class="control">
+    <input class="input" type="text" placeholder="" v-model="phone">
+  </div>
+  <p class="help is-danger" v-if="errors.find(v=>v.name==='phone')">{{errors.find(v=>v.name==='phone').text}}</p>
+</div>
+</div>
+</div>
+<div class="field is-horizontal mt-4">
+    <div class="field-body">
+      <div class="field">
+  <label class="label">User name<b class="ml-1 has-text-danger">*</b></label>
+  <div class="control">
+    <input class="input" type="text" placeholder="" v-model="username">
+  </div>
+ <p class="help is-danger" v-if="errors.find(v=>v.name==='username')">{{errors.find(v=>v.name==='username').text}}</p>
+ <p class="help is-primary" v-else-if="info">{{info}}</p>
+</div>
+<div class="field is-narrow">
+  <label class="label">Account type<b class="ml-1 has-text-danger">*</b></label>
+  <div class="control">
+    <SearchBox v-bind="{api:'usertype', field:'name', column:['name'], first:true, position: 'top'}" 
+    @option="selected('_type', $event)"></SearchBox>
+  </div>
+  <p class="help is-danger" v-if="errors.find(v=>v.name==='type')">{{errors.find(v=>v.name==='type').text}}</p>
+</div>
+</div>
+</div>
+<div class="field is-horizontal mt-4">
+    <div class="field-body">
+    <div class="field">
+      <label class="label">Password<b class="ml-1 has-text-danger">*</b></label>
+<div class="field has-addons">
+      <p class="control is-expanded">
+        <input class="input" :type="showpass? 'text' : 'password'" placeholder="At least 6 characters including letters and numbers." v-model="password">
+      </p>
+        <div class="control">
+      <a class="button" @click="showpass=!showpass">
+        <SvgIcon v-bind="{name: 'eye-off.svg', type: 'dark', size: 22}" v-if="showpass"></SvgIcon>
+        <SvgIcon v-bind="{name: 'view.svg', type: 'dark', size: 22}" v-else></SvgIcon>
+      </a>
+  </div>
+   <p class="help is-danger" v-if="errors.find(v=>v.name==='password')">{{errors.find(v=>v.name==='password').text}}</p>
+</div>
+</div>
+<div class="field">
+    <label class="label">Retype password<b class="ml-1 has-text-danger">*</b></label>
+      <p class="control is-expanded">
+        <input class="input" :type="showpass? 'text' : 'password'" placeholder="" v-model="retypePassword">
+      </p>
+    </div>
+   <p class="help is-danger" v-if="errors.find(v=>v.name==='retypePassword')">{{errors.find(v=>v.name==='retypePassword').text}}</p>
+</div>
+</div>
+  <div class="mt-5 pt-2">
+  <button class="button is-primary has-text-white" @click="createAccount()" v-if="enable">Create user</button>
+</div>
+</div>
+</template>
+<script>
+export default {
+  props: ['pagename'],
+  data () {
+    return {
+      fullname: undefined,
+      username: undefined,
+      phone: undefined,
+      password: undefined,
+      retypePassword: undefined,
+      errors: [],
+      info: 'User name must not contain any spaces.',
+      showpass: true,
+      hash: undefined,
+      status: undefined,
+      user: undefined,
+      code: undefined,
+      option: undefined,
+      branch: [],
+      radio: undefined,
+      check: {},
+      branchOpt: undefined,
+      enable: true
+    }
+  },
+  mounted() {
+    let pass = this.$id()
+    this.password = pass
+    this.retypePassword = pass
+    window.addEventListener("keyup", (ev) => ev.key==='Enter' && this.$route.name==='signup'? this.createAccount() : false)
+  },
+  computed: {
+    common: {
+      get: function() {return this.$store.state.common},
+      set: function(val) {this.$store.commit("updateCommon", {common: val})}
+    },
+    registermethod: {
+      get: function() {return this.$store.state.registermethod},
+      set: function(val) {this.$store.commit("updateRegisterMethod", {registermethod: val})}
+    },
+    authmethod: {
+      get: function() {return this.$store.state.authmethod},
+      set: function(val) {this.$store.commit("updateAuthMethod", {authmethod: val})}
+    },
+    authstatus: {
+      get: function() {return this.$store.state.authstatus},
+      set: function(val) {this.$store.commit("updateAuthStatus", {authstatus: val})}
+    },
+    usertype: {
+      get: function() {return this.$store.state.usertype},
+      set: function(val) {this.$store.commit("updateUserType", {usertype: val})}
+    },
+    dialog: {
+      get: function() {return this.$store.state['dialog']},
+      set: function(val) {this.$store.commit('updateStore', {name: 'dialog', data: val})}
+    }
+  },
+  methods: {
+    checkError () {
+      this.errors = []
+      if (!this.$empty(this.fullname)) { this.fullname = this.fullname.trim() }
+      if (!this.$empty(this.username)) { this.username = this.username.trim().toLowerCase() }
+      if (this.$empty(this.fullname)) {
+        this.errors.push({ name: 'fullname', text: 'Họ và tên không được bỏ trống' })
+      } else if (this.fullname.length < 5) {
+        this.errors.push({ name: 'fullname', text: 'Họ và tên quá ngắn. Yêu cầu từ 5 kí tự trở nên' })
+      }
+      if (this.$empty(this.username)) {
+        this.errors.push({ name: 'username', text: 'Tài khoản không được bỏ trống' })
+      } else if (this.username!==this.username.replace(' ', '')) {
+        this.errors.push({ name: 'username', text: 'Tài khoản không được chứa khoảng trắng' })
+      } else if(this.username.length<5) {
+        this.errors.push({ name: 'fullname', text: 'Tài khoản quá ngắn. Yêu cầu từ 5 kí tự trở nên' })
+      }
+      if (this.$empty(this.password)) {
+        this.errors.push({ name: 'password', text: 'Mật khẩu không được bỏ trống' })
+      } else if (this.password.length < 6) {
+        this.errors.push({ name: 'password', text: 'Mật khẩu gồm 6 kí tự trở nên bao gồm 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 gồm 6 kí tự trở nên bao gồm chữ và số ' })
+      }
+      if (this.$empty(this.retypePassword)) {
+        this.errors.push({ name: 'retypePassword', text: 'Nhắc lại mật khẩu không được bỏ trống' })
+      } else if (this.password !== this.retypePassword) {
+        this.errors.push({ name: 'retypePassword', text: 'Nhắc lại mật khẩu phải giống với mật khẩu đã nhập' })
+      }
+      if(!this.$empty(this.phone)) {
+        this.phone = this.phone.trim()
+        if(this.$errPhone(this.phone)) this.errors.push({ name: 'phone', text: 'Số điện thoại không hợp lệ.' })
+      }
+      if(this.$empty(this.option)) {
+        this.errors.push({ name: 'type', text: 'Chưa chọn loại tài khoản.' })
+      }
+      let opts = this.radio==='all'? 'all' : []
+      if(opts.length===0) {
+        for (const [key, value] of Object.entries(this.check)) {
+          if(value) opts.push(key)
+        }
+      }
+      return this.errors.length>0? true : false
+    },
+    async createAccount() {
+      if(this.checkError()) return
+      let rs = await this.$insertapi('gethash', {text: this.password})
+      this.hash = rs.rows[0]
+      let data = await this.$getdata('user', {username: this.username}, undefined, true)
+      if(data) {
+        return this.errors.push({name: 'username', text: 'Tài khoản đã tồn tại trong hệ thống'})
+      }
+      data = { fullname: this.fullname, username: this.username, phone: this.$empty(this.phone)? undefined : this.phone, password: this.hash, type: this.option.id,
+      register_method: 1, auth_status: 2, auth_method: 1}
+      this.user = await this.$insertrow('user', data, undefined, this.pagename)
+      if(this.user==='error') return
+      // add rights
+      //let arr = this.$filter(this.common, {category: 'topmenu'}).map(v=>{return {user: this.user.id, function: v.id}})
+      //let result = await this.$insertapi('userrights', arr)
+      //this.$dialog('Account created successfully.', 'Success', 'Success', 10)
+      this.$emit('close')
+    },
+    selected(attr, obj) {
+      this.option = obj
+    },
+    doCheck(v) {
+      this.$set(this.check, v.code, this.check[v.code]? false : true)
+    }
+  }
+}
+</script>

app/components/user/Profile.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="columns mx-0" v-if="login">
+    <div class="column is-3">
+      <div class="leftbox">
+        <Avatarbox
+          class="ml-4"
+          v-bind="{
+            image: undefined,
+            text: login.fullname.substring(0, 1).toUpperCase(),
+            type: 'primary',
+            size: 'three',
+          }"
+        />
+        <div>
+          <p class="ml-4 mt-3 fsb-16">
+            <span>{{ login.fullname }}</span>
+          </p>
+          <p class="ml-4 mt-1 fs-14 has-text-grey">
+            <span>{{ login.username }}</span>
+          </p>
+          <p class="border-bottom mt-2"></p>
+          <aside class="menu" style="padding-top: 22px">
+            <ul class="menu-list">
+              <li v-for="(v, i) in tabs" style="list-style: none;">
+                <a
+                  :class="`${v.code === tab ? 'has-background-primary has-text-white' : 'has-text-dark'} fsb-17 mt-4`"
+                  @click="changeTab(v)"
+                  :key="i"
+                >
+                  {{ isVietnamese ? v.vi : v.en }}
+                </a>
+              </li>
+            </ul>
+          </aside>
+        </div>
+      </div>
+    </div>
+    <div class="column">
+      <UserInfo v-if="tab === 'info'"></UserInfo>
+      <ChangePass v-else-if="tab === 'password'"></ChangePass>
+      <Logout v-else-if="tab === 'logout'"></Logout>
+    </div>
+  </div>
+</template>
+<script setup>
+import Logout from "@/components/user/Logout";
+import UserInfo from "@/components/user/UserInfo";
+import ChangePass from "@/components/user/ChangePass";
+import { useStore } from "@/stores/index";
+const store = useStore();
+const lang = computed(() => store.lang);
+const isVietnamese = computed(() => lang.value === "vi");
+var login = store.login;
+var tabs = [
+  { code: "info", vi: "Hồ sơ cá nhân", en: "Personal Information" },
+  { code: "password", vi: "Đổi mật khẩu", en: "Change Password" },
+  { code: "logout", vi: "Đăng xuất", en: "Logout" },
+];
+var tab = ref("info");
+function changeTab(v) {
+  tab.value = v.code;
+}
+</script>
+<style>
+.leftbox {
+  border-radius: 15px;
+  background: rgb(245, 245, 246);
+  padding: 20px;
+}
+</style>

app/components/user/SetPassword.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+  <div>
+    <p>User name: <b>{{row.username}}</b></p>
+    <p class="mt-1">Full name: <b>{{row.fullname}}</b></p>
+  </div>
+  <div class="field mt-5">
+        <label class="label">New password <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="At least 6 characters, letters and numbers." v-model="password">
+        </p>
+          <div class="control">
+      <a class="button" @click="showpass=!showpass">
+        <SvgIcon v-bind="{name: 'eye-off.svg', type: 'dark', size: 22}" v-if="showpass"></SvgIcon>
+        <SvgIcon v-bind="{name: 'view.svg', type: 'dark', size: 22}" v-else></SvgIcon>
+        </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">
+  <label class="label">Retype password <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="Must match the new password." v-model="retypepass">
+      </p>
+        <div class="control">
+    <a class="button" @click="showpass=!showpass">
+      <SvgIcon v-bind="{name: 'eye-off.svg', type: 'dark', size: 22}" v-if="showpass"></SvgIcon>
+      <SvgIcon v-bind="{name: 'view.svg', type: 'dark', size: 22}" v-else></SvgIcon>
+      </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" @click="changePassword()">Set password</button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['row'],
+  data() {
+    return {
+      errors: [],
+      password: undefined,
+      retypepass: undefined,
+      showpass: false
+    }
+  },
+  methods: {
+    async changePassword()  {
+      if(!this.checkPassword()) return
+      let user = await this.$getdata('user', undefined, {filter: {id: this.row.id}}, true)
+      let rs = await this.$insertapi('gethash', {text: this.password})
+      user.password = rs.rows[0]
+      let rs1 = await this.$updateapi('user', user)
+      if(rs1!=='error') this.$emit('close')
+      else {
+        this.$buefy.toast.open({message: 'Có lỗi xảy ra. Hãy thử lại một lần nữa', type: 'is-danger'})
+      }
+    },
+    checkPassword() {
+      this.errors = []
+      if (this.$empty(this.password)) {
+        this.errors.push({ name: 'password', text: 'Mật khẩu không được bỏ trống' })
+      } else if (this.password.length < 6) {
+        this.errors.push({ name: 'password', text: 'Mật khẩu từ 6 kí tự bao gồm 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 từ 6 kí tự bao gồm chữ và số ' })
+      }
+      if (this.$empty(this.retypepass)) {
+        this.errors.push({ name: 'retypepass', text: 'Nhắc lại mật khẩu không được bỏ trống' })
+      } else if (this.password !== this.retypepass) {
+        this.errors.push({ name: 'retypepass', text: 'Nhắc lại phải giống với mật khẩu đã nhập' })
+      }
+      return this.errors.length>0? false : true
+    }
+  }
+}
+</script>

app/components/user/UserInfo.vue

@@ -0,0 +1,72 @@
+<template>
+  <div v-if="record">
+    <Caption v-bind="{ title: isVietnamese ? 'Thông tin tài khoản' : 'User information', type: 'has-text-warning', size: 18 }"></Caption>
+    <div class="columns is-multiline mx-0 mt-2">
+      <div class="column is-3">
+        <div class="field">
+          <label class="label"
+            >{{ isVietnamese ? "Tên người dùng" : "User name" }}<b class="ml-1 has-text-danger">*</b></label
+          >
+          <div class="control">
+            {{ record.username }}
+          </div>
+        </div>
+      </div>
+      <div class="column is-3">
+        <div class="field">
+          <label class="label">{{ isVietnamese ? "Họ tên" : "Full name" }}<b class="ml-1 has-text-danger">*</b></label>
+          <div class="control">
+            {{ record.fullname }}
+          </div>
+        </div>
+      </div>
+      <!-- <div class="column is-3">
+        <div class="field">
+          <label class="label">{{ isVietnamese ? "Điện thoại" : "Phone" }}<b class="ml-1 has-text-danger">*</b></label>
+          <div class="control">
+            {{ record.phone }}
+          </div>
+        </div>
+      </div> -->
+      <div class="column is-3">
+        <div class="field">
+          <label class="label"
+            >{{ isVietnamese ? "Thời gian tạo" : "Create time" }}<b class="ml-1 has-text-danger">*</b></label
+          >
+          <div class="control">
+            {{ $dayjs(record.create_time).format("DD/MM/YYYY") }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { useStore } from "@/stores/index";
+export default {
+  props: ["userId"],
+  setup() {
+    const store = useStore();
+    return { store };
+  },
+  data() {
+    return {
+      errors: {},
+      record: undefined,
+      reginfo: undefined,
+      isVietnamese: this.store.lang === "vi",
+    };
+  },
+  async created() {
+    this.record = await this.$getdata(
+      "user",
+      undefined,
+      {
+        filter: { id: this.userId || this.store.login.id },
+        values: "id,username,fullname,type,type__name,create_time",
+      },
+      true
+    );
+  },
+};
+</script>