78 lines
3.3 KiB
Vue
78 lines
3.3 KiB
Vue
<template>
|
|
<form ref="otp_form" class="d-inline" method="POST" :action="action">
|
|
<div v-show="showSubmitBtn" class="alert alert-danger" role="alert">
|
|
Vous devez remplir tous les champs, 1 caractère par case.
|
|
</div>
|
|
<input type="hidden" name="_token" :value="csrf">
|
|
<div class="otp_fields">
|
|
<input ref="otp1" v-model="otp1" :disabled="blockInputs" name="otp1" type="number" min="0" max="9" maxlength="1" minlength="1" @keypress="nextInput(2)" @click="otp1 = ''" autofocus required>
|
|
<input ref="otp2" v-model="otp2" :disabled="blockInputs" name="otp2" type="number" min="0" max="9" maxlength="1" minlength="1" @keypress="nextInput(3)" @click="otp2 = ''" required>
|
|
<input ref="otp3" v-model="otp3" :disabled="blockInputs" name="otp3" type="number" min="0" max="9" maxlength="1" minlength="1" @keypress="nextInput(4)" @click="otp3 = ''" required>
|
|
<input ref="otp4" v-model="otp4" :disabled="blockInputs" name="otp4" type="number" min="0" max="9" maxlength="1" minlength="1" @keypress="nextInput(5)" @click="otp4 = ''" required>
|
|
<input ref="otp5" v-model="otp5" :disabled="blockInputs" name="otp5" type="number" min="0" max="9" maxlength="1" minlength="1" @keypress="nextInput(6)" @click="otp5 = ''" required>
|
|
<input ref="otp6" v-model="otp6" :disabled="blockInputs" name="otp6" type="number" min="0" max="9" maxlength="1" minlength="1" @click="otp6 = ''">
|
|
</div>
|
|
<input v-show="showSubmitBtn" type="submit" value="Valider" class="btn btn-primary" style="display: block;margin: 10px auto 0;">
|
|
</form>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
mounted() {
|
|
console.log('Component mounted.')
|
|
},
|
|
props: [
|
|
'csrf',
|
|
'action'
|
|
],
|
|
data() {
|
|
return {
|
|
otp1: '',
|
|
otp2: '',
|
|
otp3: '',
|
|
otp4: '',
|
|
otp5: '',
|
|
otp6: '',
|
|
showSubmitBtn: false,
|
|
blockInputs: false
|
|
}
|
|
},
|
|
watch: {
|
|
otp6() {
|
|
if (this.otp6.length === 1) {
|
|
this.blockInputs = true;
|
|
this.submit();
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
nextInput(id) {
|
|
switch (id) {
|
|
case 2:
|
|
this.$refs.otp2.focus();
|
|
break;
|
|
case 3:
|
|
this.$refs.otp3.focus();
|
|
break;
|
|
case 4:
|
|
this.$refs.otp4.focus();
|
|
break;
|
|
case 5:
|
|
this.$refs.otp5.focus();
|
|
break;
|
|
case 6:
|
|
this.$refs.otp6.focus();
|
|
break;
|
|
}
|
|
},
|
|
submit() {
|
|
if (this.otp1.length === 1 && this.otp2.length === 1 && this.otp3.length === 1 && this.otp4.length === 1 && this.otp5.length === 1 && this.otp6.length === 1){
|
|
this.$refs.otp_form.submit();
|
|
}else{
|
|
this.showSubmitBtn = true;
|
|
this.blockInputs = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|