login-v2/pages/account/recovery.vue

<template>
  <div class="columns is-centered mt-6 mx-0">
    <div class="column is-5">
      <div class="mb-5">
        <Logo></Logo>
      </div>
      <section class="hero">
        <div class="hero-body px-3 pt-3">
          <template v-if="!action">
            <article class="message is-primary">
              <div class="message-body has-background-white py-1">
                <strong> Để lấy lại mật khẩu </strong> vui lòng nhập email và mã kiểm tra. Nếu thông tin là hợp lệ chúng
                tôi sẽ gửi cho bạn một email chứa đường link để thay đổi mật khẩu.
              </div>
            </article>

            <div class="field is-horizontal mt-2">
              <div class="field-body">
                <div class="field">
                  <label class="label has-text-dark">Nhập email</label>
                  <div class="control">
                    <input
                      class="input is-primary"
                      type="text"
                      placeholder="Email đã dùng để mở tài khoản"
                      v-model="email"
                      ref="inputcode"
                      @change="checkInfo()"
                    />
                  </div>
                  <p class="help is-danger" v-if="errors.find((v) => v.name === 'email')">
                    {{ errors.find((v) => v.name === 'email').text }}
                  </p>
                </div>
                <div class="field is-narrow">
                  <label class="label has-text-dark"> Mã kiểm tra : {{ refcode }} </label>
                  <div class="control">
                    <input
                      class="input is-primary"
                      type="text"
                      :placeholder="'Nhập ' + refcode + ' vào đây'"
                      v-model="code"
                    />
                  </div>
                  <p class="help is-danger" v-if="errors.find((v) => v.name === 'code')">
                    {{ errors.find((v) => v.name === 'code').text }}
                  </p>
                </div>
              </div>
            </div>

            <div class="field mt-4" v-if="isPhone">
              <label class="label has-text-dark"> Vui lòng cung cấp email để nhận link </label>
              <div class="control">
                <input
                  class="input is-primary"
                  type="text"
                  placeholder="Nhập email"
                  v-model="email"
                  @change="checkEmail()"
                />
              </div>
              <p class="help is-danger mt5 fs13" v-if="errors.find((v) => v.name === 'email')">
                {{ errors.find((v) => v.name === 'email').text }}
              </p>
            </div>
            <div class="field mt-5">
              <p class="control">
                <a class="button is-primary" :class="loading ? 'is-loading' : ''" @click="getPassword()">
                  Lấy lại mật khẩu</a
                >
              </p>
            </div>
          </template>
          <template v-else>
            <article class="message" :class="success ? 'is-primary' : 'is-danger'" v-if="success !== undefined">
              <div class="message-body fs18 has-background-white py-2" v-html="message"></div>
            </article>
            <div class="field mt-5">
              <p class="control">
                <nuxt-link class="button is-primary" :to="action.to">
                  {{ action.text }}
                </nuxt-link>
              </p>
            </div>
          </template>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: undefined,
      errors: [],
      user: undefined,
      message: undefined,
      success: undefined,
      action: undefined,
      code: undefined,
      refcode: undefined,
      username: undefined,
      isPhone: false,
      email: undefined,
      authcode: undefined,
      loading: false,
    };
  },
  mounted() {
    this.refcode = this.$id().substring(0, 4);
    if (this.$refs.inputcode) this.$refs.inputcode.focus();
    window.addEventListener('keyup', (ev) => (ev.key === 'Enter' && !this.success ? this.getPassword() : false));
  },
  methods: {
    checkInfo() {
      this.errors = [];
      if (!this.$empty(this.username)) this.username = this.username.trim().toLowerCase();
      let result = this.$errEmail(this.username);
      if (result) this.errors.push({ name: 'username', text: 'Email không hợp lệ' });
      else this.isPhone = this.username.indexOf('@') >= 0 ? false : true;
    },
    checkEmail() {
      this.errors = [];
      let result = this.$errEmail(this.email);
      if (result) this.errors.push({ name: 'email', text: 'Email không hợp lệ' });
    },
    async getPassword() {
      this.success = undefined;
      this.message = undefined;
      this.action = undefined;
      this.errors = [];
      let result = this.$errEmail(this.username);
      if (result) this.errors.push({ name: 'username', text: 'Email không hợp lệ' });
      if (this.$empty(this.code)) this.errors.push({ name: 'code', text: 'Chưa nhập mã kiểm tra' });
      else if (this.refcode !== this.code) this.errors.push({ name: 'code', text: 'Mã kiểm tra không đúng' });
      if (this.errors.length > 0) return;
      let found = {
        name: 'user',
        url: 'data/User/',
        params: {
          filter: {
            email: this.username,
          },
        },
      };
      result = await this.$getapi([found]);
      console.log('===>', result);

      let data = result[0].data.rows;
      if (data.length > 0) {
        this.user = data[0];
        this.authcode = this.$id();
        let ele = { user: this.user.id, code: this.authcode };
        result = await this.$insertapi('accountrecovery', ele);

        console.log('=====>', result);

        this.sendEmail(result);
      } else {
        this.errors.push({ name: 'username', text: 'Tài khoản không tồn tại' });
      }
    },
    async sendEmail(data) {
      let query = { id: this.user.id, code: this.authcode };
      if (this.$store.state.link) query.link = this.$store.state.link;
      let routeData = this.$router.resolve({ path: '/get-password', query: query });
      let path = window.location.origin + routeData.href;
      let conn = this.$findapi('notiform');
      console.log('conn =====>', conn);

      conn.params.filter = { code: 'get-password' };
      let result = await this.$getapi([conn]);
      let msg = result[0].data.rows[0].detail;
      msg = msg.replace('[1]', this.user.fullname);
      msg = msg.replace('[3]', path);
      data = {
        subject: 'Phục hồi tài khoản BigDataTech.vn',
        content: msg,
        to: this.email ? this.email : this.username,
        sender: 2,
      };
      this.loading = true;
      result = await this.$insertapi('sendemailnow', data);
      this.message = `<b>Thành công</b>. Hãy mở email <b>${this.username}</b> để  lấy lại  mật khẩu.`;
      this.success = true;
      this.action = { name: 'signin', to: { path: '/signin' }, text: 'Đi tới trang đăng nhập' };
      this.loading = false;
    },
  },
};
</script>