changes

components/user/ChangePass.vue

@@ -0,0 +1,122 @@
+<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>

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>

components/user/CreateUser.vue

@@ -0,0 +1,236 @@
+<template>
+ <div class="px-3">
+  <div class="field is-horizontal">
+    <div class="field-body">
+      <div class="field">
+  <label class="label">Username<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" v-if="!dealer">
+  <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">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">
+  <label class="label">Email<b class="ml-1 has-text-danger">*</b></label>
+  <div class="control">
+    <input class="input" type="text" placeholder="" v-model="email">
+  </div>
+  <p class="help is-danger" v-if="errors.find(v=>v.name==='email')">{{errors.find(v=>v.name==='email').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>
+</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">
+    <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 ${ loading? 'is-loading' : ''}`" @click="createAccount()" v-if="enable">Tạo tài khoản</button>
+</div>
+</div>
+</template>
+<script>
+import { useStore } from '~/stores/index'
+export default {
+  setup() {
+    const store = useStore()
+    return {store}
+  },
+  props: ['pagename', 'row', 'api', 'dealer'],
+  data () {
+    return {
+      fullname: undefined,
+      username: undefined,
+      email: 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,
+      loading: false
+    }
+  },
+  created() {
+    if(!this.row) return
+    this.fullname = this.row.fullname
+    this.email = this.row.email
+    if(this.row.code) this.username = this.row.code.toLocaleLowerCase()
+  },
+  mounted() {
+    let pass = this.$id().toLocaleLowerCase()
+    this.password = pass
+    this.retypePassword = pass
+    window.addEventListener("keyup", (ev) => ev.key==='Enter' && this.$route.name==='signup'? this.createAccount() : false)
+  },
+  computed: {
+    registermethod: {
+      get: function() {return this.store.registermethod},
+      set: function(val) {this.$store.commit("updateRegisterMethod", {registermethod: val})}
+    },
+    authmethod: {
+      get: function() {return this.store.authmethod},
+      set: function(val) {this.$store.commit("updateAuthMethod", {authmethod: val})}
+    },
+    authstatus: {
+      get: function() {return this.store.authstatus},
+      set: function(val) {this.$store.commit("updateAuthStatus", {authstatus: val})}
+    },
+    usertype: {
+      get: function() {return this.store.usertype},
+      set: function(val) {this.$store.commit("updateUserType", {usertype: val})}
+    },
+    dialog: {
+      get: function() {return this.store['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.email)) {
+        this.email = this.email.trim()
+        if(this.$errEmail(this.email)) this.errors.push({ name: 'email', text: 'Email không hợp lệ.' })
+      } else {
+        this.errors.push({ name: 'email', text: 'Email không được bỏ trống.' })
+      }
+      if(this.$empty(this.option)) {
+        if(this.dealer) {
+          this.option = {id: 3}
+        } else 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() {
+      this.loading = true
+      if(this.checkError()) return this.loading = false
+      const response = await fetch(`${this.$getpath()}password/${this.password}/`)
+      if(!response.ok) {
+        throw new Error(`Response status: ${response.status}`);
+      }
+      this.hash = await response.json();
+      let data = await this.$getdata('user', {username: this.username}, undefined, true)
+      if(data) {
+        this.loading = false
+        return this.errors.push({name: 'username', text: 'Tài khoản đã tồn tại trong hệ thống'})
+      }
+      let found = this.$findapi('user')
+      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, email: this.email}
+      this.user = await this.$insertrow('user', data, found.params.values, this.pagename)
+      if(this.user==='error') return this.loading = false
+      if(this.row) {
+        let copy = this.$copy(this.row)
+        copy.user = this.user.id
+        await this.$updaterow(this.api, copy, found.params.values, this.pagename)
+      } else {
+        //send email
+        if(this.email) {
+          let content = `<p>Xin chào ${this.fullname}, </p>`
+          content += '<p>Tài khoản đăng nhập của bạn đã được khởi tạo và sẵn sàng sử dụng:</p>'
+          content += `<p>Username: ${this.username}</p>`
+          content += `<p>Password: ${this.password}</p>`
+          content += `<p>Đội ngũ Utopia.</p>`
+          let info = {subject: 'Tài khoản đăng nhập Utopia', to: this.email, sender: 1, content: content}
+          let rs = await this.$insertapi('sendemail', info)
+        }
+      }
+      if(this.dealer) {
+        let copy = this.$copy(this.row)
+        copy.user = this.user.id
+        await this.$updaterow('dealer', copy, null, this.pagename)
+      }
+      this.loading = false
+      this.$dialog('Tạo tài khoản thành công.', 'Thành công', '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>

components/user/EditUser.vue

@@ -0,0 +1,111 @@
+<template>
+  <div v-if="record">
+    <div class="columns is-multiline mx-0">
+    <div class="column is-4">
+      <div class="field">
+  <label class="label">Username<b class="ml-1 has-text-danger">*</b></label>
+  <div class="control">
+    <input class="input" type="text" placeholder="" v-model="record.username" disabled>
+  </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">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, disabled: true}"
+    @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">
+          <span class="mr-4" v-for="(v,i) in option">
+            <a class="icon-text" @click="radioBlocked=v">
+              <SvgIcon v-bind="{name: `radio-${radioBlocked.code===v.code? '' : 'un'}checked.svg`, type: 'gray', size: 22}"></SvgIcon>
+              <span>{{ v.name }}</span>
+            </a>
+          </span>
+        </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,
+      branch: [],
+      check: {},
+      branchOpt: undefined,
+      option: [{code: 0, name: 'Active'}, {code: 1, name: 'Blocked'}]
+    }
+  },
+  async created() {
+    this.record = await this.$getdata('user', undefined, {filter: {id: this.row.id}}, true)
+    this.radioBlocked = this.record.blocked? this.option[1] : this.option[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.code
+      let rs = await this.$updaterow('user', this.record, undefined, this.pagename)
+      if(this.radioBlocked.code===1) 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>

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>

components/user/NewUser.vue

@@ -0,0 +1,211 @@
+<template>
+ <div class="px-3">
+  <div class="field is-horizontal">
+    <div class="field-body">
+      <div class="field">
+  <label class="label">Username<b class="ml-1 has-text-danger">*</b></label>
+  <div class="control">
+    <input class="input" type="text" placeholder="" v-model="username" disabled>
+  </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', optionid: type, disabled: type? true: false}" 
+    @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">Full name<b class="ml-1 has-text-danger">*</b></label>
+  <div class="control">
+    <input class="input" type="text" placeholder="" v-model="fullname" disabled>
+  </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">Mobile</label>
+  <div class="control">
+    <input class="input" type="text" placeholder="" v-model="phone" disabled>
+  </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">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>
+</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">
+    <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">Tạo tài khoản</button>
+</div>
+</div>
+</template>
+<script>
+import { useStore } from '~/stores/index'
+export default {
+  setup() {
+    const store = useStore()
+    return {store}
+  },
+  props: ['pagename', 'row', 'api', 'isadd', 'type'],
+  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
+    }
+  },
+  created() {
+    if(!this.row) return
+    this.fullname = this.row.fullname
+    this.phone = this.row.phone
+    this.username = this.row.code
+  },
+  mounted() {
+    let pass = this.$id().toLocaleLowerCase()
+    this.password = pass
+    this.retypePassword = pass
+    window.addEventListener("keyup", (ev) => ev.key==='Enter' && this.$route.name==='signup'? this.createAccount() : false)
+  },
+  computed: {
+    registermethod: {
+      get: function() {return this.store.registermethod},
+      set: function(val) {this.$store.commit("updateRegisterMethod", {registermethod: val})}
+    },
+    authmethod: {
+      get: function() {return this.store.authmethod},
+      set: function(val) {this.$store.commit("updateAuthMethod", {authmethod: val})}
+    },
+    authstatus: {
+      get: function() {return this.store.authstatus},
+      set: function(val) {this.$store.commit("updateAuthStatus", {authstatus: val})}
+    },
+    usertype: {
+      get: function() {return this.store.usertype},
+      set: function(val) {this.$store.commit("updateUserType", {usertype: val})}
+    },
+    dialog: {
+      get: function() {return this.store['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
+       const response = await fetch(`${this.$getpath()}password/${this.password}/`)
+      if(!response.ok) {
+        throw new Error(`Response status: ${response.status}`);
+      }
+      this.hash = await response.json();
+      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.isadd? null : this.pagename)
+      if(this.user==='error') return
+      let copy = this.$copy(this.row)
+      copy.user = this.user.id
+      await this.$updaterow(this.api, copy, undefined, this.pagename)
+      if(this.type===3) await this.$insertapi('userapps', {apps: 5, user: this.user.id})
+      this.$dialog('Tạo tài khoản thành công.', 'Thành công', '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>

components/user/Profile.vue

@@ -0,0 +1,50 @@
+<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><a :class="`${v.code===tab? 'has-background-primary has-text-white' : 'has-text-dark'} fsb-17 mt-4`" @click="changeTab(v)"
+            v-for="(v,i) in tabs" :key="i">
+            {{v.vi}}
+          </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()
+var login = store.login
+var tabs = [{code: 'info', vi: store.lang==='en'? 'Personal information' : 'Hồ sơ cá nhân'}, 
+{code: 'password', vi: store.lang==='en'? 'Change password' : 'Đổi mật khẩu'}, 
+{code: 'logout', vi: store.lang==='en'? 'Sign out' : 'Đăng xuất'}]
+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>

components/user/SetPassword.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+  <div>
+    <p>{{store.lang==='en'? 'Account' : 'Tài khoản'}}: <b>{{row.username}}</b></p>
+    <p class="mt-1">{{store.lang==='en'? 'Full name' : 'Họ tên'}}: <b>{{row.fullname}}</b></p>
+  </div>
+  <div class="field mt-5">
+        <label class="label">{{ store.lang==='en'? 'New password' : '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="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">{{ store.lang==='en'? 'Retype password' : 'Nhập 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="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 has-text-white" @click="changePassword()">{{ store.lang==='en'? 'Set password' : 'Đặt mật khẩu' }}</button>
+    </div>
+  </div>
+</template>
+<script>
+import { useStore } from '~/stores/index'
+export default {
+  setup() {
+    const store = useStore()
+    return { store }
+  },
+  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)
+      const response = await fetch(`https://api.y99.vn/password/${this.password}/`)
+      let hash = await response.json();
+      user.password = hash
+      let rs1 = await this.$updateapi('user', user)
+      if(rs1!=='error') this.$emit('close')
+      else {
+        this.$dialog('Có lỗi xảy ra. Hãy thử lại một lần nữa', 'Lỗi', 'Error')
+      }
+    },
+    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>

components/user/UserInfo.vue

@@ -0,0 +1,59 @@
+<template>
+  <div v-if="record">
+    <Caption v-bind="{title: 'User information', type: 'has-text-primary', size: 18}"></Caption>
+    <div class="columns is-multiline mx-0 mt-3">
+      <div class="column is-3">
+    <div class="field">
+  <label class="label">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">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">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">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 {
+  setup() {
+    const store = useStore()
+    return {store}
+  },
+  data() {
+    return {
+      errors: {},
+      record: undefined,
+    }
+  },
+  async created() {
+    if(!this.store.login) return
+    this.record = await this.$getdata('user', undefined, 
+    {filter: {id: this.store.login.id}, values: 'id,username,fullname,type,type__name,create_time'}, true)
+  }
+}
+</script>