changes

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>