added feature for OTP-SMS Koperasi
This commit is contained in:
Hafifie PKB
committed by
nurafrinaalimi16
nurafrinaalimi16
parent
1d892b064e
commit
c657eafc70
Vendored
+3
@@ -3,10 +3,13 @@ require('./bootstrap.js');
|
||||
//import VueRouter from 'vue-router';
|
||||
import Util from './util.js';
|
||||
import routes from './routesIndex.js';
|
||||
import OtpInput from "@bachdgvn/vue-otp-input";
|
||||
|
||||
Vue.component("v-otp-input", OtpInput);
|
||||
|
||||
Vue.use(VueRouter);
|
||||
Vue.mixin(Util);
|
||||
Vue.use(OtpInput);
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
|
||||
@@ -43,29 +43,19 @@ export default{
|
||||
},
|
||||
|
||||
methods: {
|
||||
login: function () {
|
||||
if (this.loading) return;
|
||||
|
||||
let vm = this;
|
||||
|
||||
this.startLoading();
|
||||
|
||||
login: function(){
|
||||
axios.post(config.API+'voter/login', $('#login_form').serialize())
|
||||
.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');
|
||||
})
|
||||
|
||||
.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} })
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
vm.stopLoading();
|
||||
this.util.showResult(error, 'error');
|
||||
})
|
||||
},
|
||||
|
||||
startLoading: function () {
|
||||
this.util.notify('Logging in', 'loading');
|
||||
this.loading = true;
|
||||
|
||||
@@ -0,0 +1,154 @@
|
||||
<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 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
|
||||
}
|
||||
},
|
||||
|
||||
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' : '970403035003'
|
||||
})
|
||||
.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>
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>Dapatkan Kod baru dalam masa : {{ minutes }}:{{ seconds }} saat</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minutes: 5,
|
||||
seconds: 0,
|
||||
timer: null // Initialize timer variable
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.startTimer(); // Start the timer when the component is created
|
||||
},
|
||||
methods: {
|
||||
startTimer() {
|
||||
// Clear existing timer if it exists
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
|
||||
// Start the timer
|
||||
this.timer = setInterval(this.countdown, 1000);
|
||||
},
|
||||
restarttimer() {
|
||||
this.startTimer();
|
||||
console.log('restarted');
|
||||
},
|
||||
countdown() {
|
||||
if (this.seconds > 0) {
|
||||
this.seconds--;
|
||||
} else if (this.minutes > 0) {
|
||||
this.minutes--;
|
||||
this.seconds = 59;
|
||||
} else {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer); // Clear the timer when the component is destroyed
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Vendored
+8
@@ -1,4 +1,6 @@
|
||||
import VoterLogin from './components/demo/voter/login.vue';
|
||||
import VoterVerification from './components/demo/voter/verification.vue';
|
||||
|
||||
import VoterHome from './components/demo/voter/index.vue';
|
||||
|
||||
import Home from './components/demo/voter/home/index.vue';
|
||||
@@ -91,6 +93,12 @@ export default [
|
||||
name: 'Voter Login'
|
||||
},
|
||||
|
||||
{
|
||||
path: '/verification',
|
||||
component: VoterVerification,
|
||||
name: 'Voter Verify'
|
||||
},
|
||||
|
||||
{
|
||||
path: '/admin/login',
|
||||
component: AdminLogin,
|
||||
|
||||
Reference in New Issue
Block a user