E-Vote/resources/assets/js/components/demo/voter/verification.vue

<template>
  <div class="col-md-5 col-md-offset-3">
    <div class="panel panel-default">
      <div class="panel-heading">
        <a @click="$router.go(-1)">Kembali</a>
        <h4 class="text-center">Kod Verifikasi!</h4>
      </div>

      <div class="panel-body">
        <form @submit.prevent="login" id="login_form">
          <div class="m-4">
            <template v-if="!otpSent">
              <span>Sila sahkan nombor telefon anda. Kod akan dihantar ke nombor berakhir:</span>
              <br><b>+6 •••• •••• {{ phoneLastFour }}</b>
            </template>
            <template v-else>
              <span>Sila masukkan kod pengesahan yang dihantar ke nombor berakhir:</span>
              <br><b>+6 •••• •••• {{ phoneLastFour }}</b>
            </template>
            <p class="text-muted small" style="margin-top:12px;margin-bottom:0;">
              Jika nombor ini tidak betul atau anda tidak menerima OTP, sila pergi ke kaunter IT.
            </p>
          </div>

          <div v-if="otpSent && showDebugOtp" class="alert alert-info" style="margin-bottom:20px;">
            OTP local development: <b>{{ debugOtp }}</b>
          </div>

          <div v-if="!otpSent" class="form-group" style="margin-top: 20px;">
            <button type="button" class="btn btn-primary form-control" :disabled="otpSending" @click="requestOtp">
              <span v-if="otpSending" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
              Hantar OTP ke nombor ini
            </button>
          </div>

          <div v-show="otpSent" class="justify-content-center d-flex"
            style="margin-top:20px;margin-bottom:20px;display: flex;flex-direction: row;justify-content: center;align-items: center;">
            <v-otp-input ref="otpInput" input-classes="otp-input" separator="-" :num-inputs="6"
              :should-auto-focus="true" :is-input-num="true" @on-change="handleOnChange"
              @on-complete="handleOnComplete" />
          </div>

          <div v-if="otpSent" style="margin-bottom:20px;">
            <a @click="resendVerify">Hantar Kembali OTP!</a>
          </div>

          <div v-if="otpSent" class="form-group">
            <input ref="submitbtn" type="submit" class="btn btn-primary form-control" value="Sahkan & Teruskan"
              disabled />
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      loading: false,
      otpSent: false,
      otpSending: false,
      debugOtp: null
    }
  },
  computed: {
    showDebugOtp: function () {
      return process.env.NODE_ENV !== 'production' && !!this.debugOtp;
    },
    phoneLastFour: function () {
      var digits = String(this.$route.params.notel || '').replace(/\D/g, '');
      if (digits.length >= 4) {
        return digits.slice(-4);
      }
      return digits.length ? digits : '----';
    }
  },
  methods: {
    handleOnComplete(value) {
      console.log("OTP completed: ", value);
      this.$refs.submitbtn.disabled = false;
    },
    handleOnChange(value) {
      console.log("OTP changed: ", value);
      this.$refs.submitbtn.disabled = true;
    },
    handleClearInput() {
      this.$refs.otpInput.clearInput();
    },
    requestOtp: function () {
      this.sendOtp({ isResend: false });
    },
    resendVerify: function () {
      this.sendOtp({ isResend: true });
    },
    sendOtp: function (opts) {
      var vm = this;
      var isResend = opts && opts.isResend;
      this.otpSending = true;
      axios.post(config.API + 'voter/login', {
        no_kp: this.$route.params.nokp,
        send_otp: true
      })
        .then(function (response) {
          if (vm.util.showResult(response, 'success')) {
            vm.otpSent = true;
            if (response.data.debug_otp) {
              vm.debugOtp = response.data.debug_otp;
            }
            if (isResend && vm.$refs.otpInput) {
              vm.$refs.otpInput.clearInput();
            }
            vm.$nextTick(function () {
              if (vm.$refs.submitbtn) {
                vm.$refs.submitbtn.disabled = true;
              }
            });
          }
        })
        .catch(function (error) {
          vm.util.showResult(error, 'error');
        })
        .then(function () {
          vm.otpSending = false;
        });
    },
    startLoading: function () {
      this.util.notify('Logging in', 'loading');
      this.loading = true;
    },
    stopLoading: function () {
      $.notifyClose();
      this.loading = false;
    },
    login: function () {
      if (this.loading || !this.otpSent) return;

      let vm = this;

      this.startLoading();
      console.log('OTP INPUT : ');
      let otp = this.mergeOTP(this.$refs.otpInput.otp);
      console.log(otp);
      axios.post(config.API + 'voter/verify', {
        'no_kp': this.$route.params.nokp,
        'token': otp
      })
        .then(response => {
          vm.stopLoading();
          if (this.util.showResult(response, 'success')) {
            localStorage['Access Token'] = `Bearer ${response.data.token}`;
            this.util.setAuthorization();
            vm.$router.push({ name: 'Voter Home' });
          }
        })
        .catch(error => {
          vm.stopLoading();
          this.util.showResult(error, 'error');
        })

    },
    mergeOTP: function (OTP) {
      return OTP.join('');
    },
  },
};
</script>
<style>
.otp-input {
  width: 40px;
  height: 40px;
  padding: 5px;
  margin: 0 10px;
  font-size: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  text-align: center;
}

.otp-input.error {
  border: 1px solid red !important;
}

.otp-input::-webkit-inner-spin-button,
.otp-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>