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>
import Countdown from '../../mycomponents/countdown.vue'

export default {
  components:{
    Countdown
  },
  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(){
			axios.post(config.API+'voter/login', {
        'no_kp' : this.user.no_kp
      })
			.then(response => {
				this.stopLoading();
				if (this.util.showResult(response, 'success')) {
						// this.$router.push({ name: 'Voter Verify',params: {'nokp' : response.data.nokp,'notel' : response.data.notel} })
          this.$refs.countdown.restarttimer();
          console.log('resend verify');
				}
			})
			.catch(error => {
				vm.stopLoading();
				this.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;
  &.error {
    border: 1px solid red !important;
  }
}
.otp-input::-webkit-inner-spin-button,
.otp-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>