login-v2/pages/account/auth.vue

<template>
  <div class="columns is-centered mt-6 mx-3">
    <div class="column is-5 mx-0">
      <Logo class="mb-5"></Logo>
      <template v-if="!userAuth">
        <article class="message is-primary">
          <div class="message-body has-background-white py-3">
            <strong> Mã xác thực tài khoản </strong> là chuỗi gồm <strong> 9 kí tự, </strong> chúng tôi đã gửi cho bạn
            qua email <b>{{ $route.query.email ? ' ' + $route.query.email : '' }}</b
            >. Hãy nhập dãy số đó vào ô dưới đây. Hoặc click vào đường link có trong email.
          </div>
        </article>
        <div class="field mt-4">
          <div class="control">
            <input class="input is-primary" type="text" placeholder="Nhập mã xác thực" v-model="code" id="inputcode" />
          </div>
          <p class="help is-danger mt5 fs13" v-if="errors.find((v) => v.name === 'code')">
            {{ errors.find((v) => v.name === 'code').text }}
          </p>
        </div>
        <div class="field mt-5">
          <p class="control">
            <a class="button is-primary" @click="checkCode()">Xác thực tài khoản</a>
          </p>
        </div>
        <p class="mt-5 pt-4 has-text-danger" v-if="$route.query.id">
          <span>Không nhận được mã xác thực?</span>
          <button :class="`button is-dark is-light ${loading ? 'is-loading' : ''} ml-4`" @click="sendCode()">
            Gửi lại mã
          </button>
        </p>
      </template>
      <template v-else-if="userAuth">
        <article class="message" :class="success ? 'is-primary' : 'is-danger'" v-if="success !== undefined">
          <div class="message-body has-background-white py-3">
            {{ message }}
          </div>
        </article>
        <div class="field mt-5" v-if="action">
          <p class="control">
            <nuxt-link class="button is-primary" :to="action.to">
              {{ action.text }}
            </nuxt-link>
          </p>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      code: undefined,
      errors: [],
      userAuth: undefined,
      message: undefined,
      success: undefined,
      action: undefined,
      code: undefined,
      loading: false,
    };
  },
  created() {
    if (this.$route.query.code) {
      this.code = this.$route.query.code;
      this.checkCode();
    } else if (this.$route.query.action === 'sendcode') this.sendCode();
  },
  mounted() {
    let doc = document.getElementById('inputcode');
    if (doc) doc.focus();
    window.addEventListener('keyup', (ev) => (ev.key === 'Enter' && !this.success ? this.checkCode() : false));
  },
  computed: {
    login: {
      get: function () {
        return this.$store.state.login;
      },
      set: function (val) {
        this.$store.commit('updateLogin', { login: val });
      },
    },
  },
  methods: {
    async checkCode() {
      this.success = undefined;
      this.message = undefined;
      this.action = undefined;
      this.errors = [];
      if (this.$empty(this.code)) this.errors.push({ name: 'code', text: 'Mã xác thực không được bỏ trống' });
      else if (this.code.length !== 9) this.errors.push({ name: 'code', text: 'Mã xác thực phải là 9 kí tự' });
      if (this.errors.length > 0) return;
      let found = { name: 'userauth', url: 'data/User_Auth', params: { filter: { code: this.code } } };
      let result = await this.$getapi([found]);
      let data = result[0].data.rows;
      if (data.length > 0) {
        this.userAuth = data[0];
        if (this.userAuth.expiry) {
          this.message = 'Bạn đã xác thực tài khoản thành công.';
          this.success = true;
          this.action = { name: 'signin', to: { path: '/signin' }, text: 'Đi tới trang đăng nhập' };
        } else {
          let found = { name: 'user', url: 'data/User', params: { filter: { id: this.userAuth.user } } };
          result = await this.$getapi([found]);
          let user = result[0].data.rows[0];
          user.auth_status = 2;
          user.update_time = new Date();
          result = await this.$updateapi('user', user);
          this.processAuth(result);
        }
      } else this.errors.push({ name: 'code', text: 'mã xác thực không hợp lệ' });
    },
    async processAuth(newVal) {
      if (newVal !== 'error') {
        this.message = 'Xác thực tài khoản thành công.';
        this.success = true;
        this.action = { name: 'signin', to: { path: '/signin' }, text: 'Đi tới trang đăng nhập' };
        this.userAuth.expiry = true;
        this.userAuth.update_time = new Date();
        let result = await this.$updateapi('userauth', this.userAuth);
      } else if (newVal === false) {
        this.message = 'Có lỗi xẩy ra. Xác thực tài khoản thành công.';
        this.success = false;
      }
    },
    async sendCode() {
      let code = this.$id();
      let data = { user: this.$route.query.id, code: code };
      let result = await this.$insertapi('userauth', data);
      let query = this.$store.state.link ? { code: code, link: this.$store.state.link } : { code: code };
      let routeData = this.$router.resolve({ path: '/account/auth', query: query });
      let path = window.location.origin + routeData.href;
      let conn = this.$findapi('notiform');
      conn.params.filter = { code: 'account-auth' };
      result = await this.$getapi([conn]);
      let msg = result[0].data.rows[0].detail;
      msg = msg.replace(' [1]', '');
      msg = msg.replace('[2]', code);
      msg = msg.replace('[3]', path);
      data = { subject: 'Xác thực tài khoản BigDataTechCloud', content: msg, to: this.$route.query.email, sender: 2 };
      this.loading = true;
      result = await this.$insertapi('sendemailnow', data);
      let text = `Hãy mở email <b>${this.$route.query.email}</b> để nhận mã xác thực`;
      this.$dialog(text, 'Mã xác thực', undefined, 10);
      this.loading = false;
    },
  },
};
</script>