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">
            <span>sila masukkan kod pengesahan yang dihantar ke</span>
            <br>-<b>+6 {{ $route.params.notel }}</b>
          </div>

          <div v-if="showDebugOtp" class="alert alert-info" style="margin-bottom:20px;">
            OTP local development: <b>{{ $route.params.debug_otp }}</b>
          </div>

          <div 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 style="margin-bottom:20px;">
            <!-- <span>dapatkan Kod baru dalam masa : 01:23 saat</span> -->
            <!-- <Countdown ref="countdown"></Countdown> -->
            <a @click="resendVerify">Hantar Kembali OTP!</a>
          </div>

          <div 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
    }
  },
  computed: {
    showDebugOtp: function () {
      return process.env.NODE_ENV !== 'production' && !!this.$route.params.debug_otp;
    }
  },

  created: function () {
    console.log(this.$route.params.notel);
  },
  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();
    },
    resendVerify: function () {
      var vm = this;
      axios.post(config.API + 'voter/login', {
        no_kp: this.$route.params.nokp
      })
        .then(function (response) {
          if (vm.util.showResult(response, 'success')) {
            console.log('resend verify');
          }
        })
        .catch(function (error) {
          vm.util.showResult(error, 'error');
        });
    },
    startLoading: function () {
      this.util.notify('Logging in', 'loading');
      this.loading = true;
    },
    stopLoading: function () {
      $.notifyClose();
      this.loading = false;
    },
    login: function () {
      if (this.loading) 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>