Initial commit

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>