70 lines
1.9 KiB
Vue
70 lines
1.9 KiB
Vue
<template>
|
|
<div style="display: flex; flex-direction: row; justify-content: center;align-items: center;">
|
|
<form ref="otp_form" class="d-inline" method="POST" :action="action">
|
|
<input type="hidden" name="_token" :value="csrf">
|
|
<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"
|
|
/>
|
|
<input type="hidden" name="otp" v-model.lazy="otpValue">
|
|
</form>
|
|
<button @click="handleClearInput()" class="btn btn-sn btn-primary">Reset</button>
|
|
<a href="/login/send-sms-otp" class="btn btn-link">SMS</a>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
mounted() {
|
|
console.log('Component mounted.')
|
|
},
|
|
props: [
|
|
'csrf',
|
|
'action'
|
|
],
|
|
data() {
|
|
return {
|
|
otpValue: ''
|
|
}
|
|
},
|
|
methods: {
|
|
handleOnComplete(value) {
|
|
setTimeout(() => { this.$refs.otp_form.submit(); }, 0.1);
|
|
},
|
|
handleOnChange(value) {
|
|
this.otpValue = value;
|
|
},
|
|
handleClearInput() {
|
|
this.otpValue = '';
|
|
this.$refs.otpInput.clearInput();
|
|
}
|
|
}
|
|
}
|
|
</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>
|