DONE: disable auto trigger tac

resources/assets/js/components/demo/voter/login.vue

@@ -44,8 +44,12 @@
 	methods: {
 	  login() {
 		this.startLoading();
+		const noKp = document.getElementById('no_kp').value.trim();
 		axios
-		  .post(config.API + 'voter/login', $('#login_form').serialize())
+		  .post(config.API + 'voter/login', {
+			no_kp: noKp,
+			send_otp: false
+		  })
 		  .then(response => {
 			this.stopLoading();
 			if (this.util.showResult(response, 'success')) {

resources/assets/js/components/demo/voter/verification.vue

@@ -9,28 +9,42 @@
       <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>
+            <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="showDebugOtp" class="alert alert-info" style="margin-bottom:20px;">
-            OTP local development: <b>{{ $route.params.debug_otp }}</b>
+          <div v-if="otpSent && showDebugOtp" class="alert alert-info" style="margin-bottom:20px;">
+            OTP local development: <b>{{ debugOtp }}</b>
           </div>
 
-          <div class="justify-content-center d-flex"
+          <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 style="margin-bottom:20px;">
-            <!-- <span>dapatkan Kod baru dalam masa : 01:23 saat</span> -->
-            <!-- <Countdown ref="countdown"></Countdown> -->
+          <div v-if="otpSent" style="margin-bottom:20px;">
             <a @click="resendVerify">Hantar Kembali OTP!</a>
           </div>
 
-          <div class="form-group">
+          <div v-if="otpSent" class="form-group">
             <input ref="submitbtn" type="submit" class="btn btn-primary form-control" value="Sahkan & Teruskan"
               disabled />
           </div>
@@ -43,18 +57,24 @@
 export default {
   data: function () {
     return {
-      loading: false
+      loading: false,
+      otpSent: false,
+      otpSending: false,
+      debugOtp: null
     }
   },
   computed: {
     showDebugOtp: function () {
-      return process.env.NODE_ENV !== 'production' && !!this.$route.params.debug_otp;
+      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 : '----';
     }
   },
-
-  created: function () {
-    console.log(this.$route.params.notel);
-  },
   methods: {
     handleOnComplete(value) {
       console.log("OTP completed: ", value);
@@ -67,18 +87,41 @@ export default {
     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
+        no_kp: this.$route.params.nokp,
+        send_otp: true
       })
         .then(function (response) {
           if (vm.util.showResult(response, 'success')) {
-            console.log('resend verify');
+            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 () {
@@ -90,7 +133,7 @@ export default {
       this.loading = false;
     },
     login: function () {
-      if (this.loading) return;
+      if (this.loading || !this.otpSent) return;
 
       let vm = this;