- Remove OTP VueJS component

This commit is contained in:
Vincent BRIDIER 2022-01-14 16:16:26 +01:00
parent e4ffc0a0dc
commit 74904ab519
10 changed files with 57 additions and 85 deletions

View file

@ -23,7 +23,5 @@
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"@bachdgvn/vue-otp-input": "^1.0.8"
}
"dependencies": {}
}

5
resources/js/app.js vendored
View file

@ -8,9 +8,6 @@ require('./bootstrap');
window.Vue = require('vue');
import OtpInput from "@bachdgvn/vue-otp-input";
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
@ -22,8 +19,6 @@ import OtpInput from "@bachdgvn/vue-otp-input";
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.component("v-otp-input", OtpInput);
Vue.component('otp-form', require('./components/OTPFormComponent.vue').default);
Vue.component('login-id', require('./components/LoginIDComponent.vue').default);
Vue.component('wp-auto-login', require('./components/WPAutoLoginComponent.vue').default);

View file

@ -1,70 +0,0 @@
<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>

View file

@ -22,7 +22,14 @@
</ul>
</div>
@endif
<otp-form csrf='{{ csrf_token() }}' action="/login/checkOTP"></otp-form>
<div style="display: flex; flex-direction: row; justify-content: center;align-items: center;">
<form ref="otp_form" class="d-inline" method="POST" action="/login/checkOTP">
@csrf
{{ __('Code OTP') }} :
<input type="text" name="otp" maxlength="6" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" required>
</form>
<a href="/login/send-sms-otp" class="btn btn-link">SMS</a>
</div>
</div>
</div>
</div>

View file

@ -23,7 +23,14 @@
</ul>
</div>
@endif
<otp-form csrf='{{ csrf_token() }}' action="{{route('domain-names.force-delete', ['id' => $dm->id])}}"></otp-form>
<div style="display: flex; flex-direction: row; justify-content: center;align-items: center;">
<form ref="otp_form" class="d-inline" method="POST" action="{{route('domain-names.force-delete', ['id' => $dm->id])}}">
@csrf
{{ __('Code OTP') }} :
<input type="text" name="otp" maxlength="6" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" required>
</form>
<a href="/login/send-sms-otp" class="btn btn-link">SMS</a>
</div>
</div>
@else
<div class="card-header">Suppression du nom de domaine refusée <a href="{{route('domain-names.edit', ['id' => $dm->id])}}" class="btn btn-sm btn-primary float-right">Retour</a></div>

View file

@ -23,7 +23,14 @@
</ul>
</div>
@endif
<otp-form csrf='{{ csrf_token() }}' action="{{route('dpccs.force-delete', ['id' => $dpcc->id])}}"></otp-form>
<div style="display: flex; flex-direction: row; justify-content: center;align-items: center;">
<form ref="otp_form" class="d-inline" method="POST" action="{{route('dpccs.force-delete', ['id' => $dpcc->id])}}">
@csrf
{{ __('Code OTP') }} :
<input type="text" name="otp" maxlength="6" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" required>
</form>
<a href="/login/send-sms-otp" class="btn btn-link">SMS</a>
</div>
</div>
@else
<div class="card-header">Suppression du datastore pcc refusée <a href="{{route('dpccs.edit', ['id' => $dpcc->id])}}" class="btn btn-sm btn-primary float-right">Retour</a></div>

View file

@ -22,7 +22,14 @@
</ul>
</div>
@endif
<otp-form csrf='{{ csrf_token() }}' action="{{route('email-addresses.force-delete', ['id' => $email->id])}}"></otp-form>
<div style="display: flex; flex-direction: row; justify-content: center;align-items: center;">
<form ref="otp_form" class="d-inline" method="POST" action="{{route('email-addresses.force-delete', ['id' => $email->id])}}">
@csrf
{{ __('Code OTP') }} :
<input type="text" name="otp" maxlength="6" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" required>
</form>
<a href="/login/send-sms-otp" class="btn btn-link">SMS</a>
</div>
</div>
</div>
</div>

View file

@ -22,7 +22,14 @@
</ul>
</div>
@endif
<otp-form csrf='{{ csrf_token() }}' action="{{route('ldc-networks.force-delete', ['id' => $network->id])}}"></otp-form>
<div style="display: flex; flex-direction: row; justify-content: center;align-items: center;">
<form ref="otp_form" class="d-inline" method="POST" action="{{route('ldc-networks.force-delete', ['id' => $network->id])}}">
@csrf
{{ __('Code OTP') }} :
<input type="text" name="otp" maxlength="6" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" required>
</form>
<a href="/login/send-sms-otp" class="btn btn-link">SMS</a>
</div>
</div>
</div>
</div>

View file

@ -22,7 +22,14 @@
</ul>
</div>
@endif
<otp-form csrf='{{ csrf_token() }}' action="/projects/{{$project->uuid}}/force-delete"></otp-form>
<div style="display: flex; flex-direction: row; justify-content: center;align-items: center;">
<form ref="otp_form" class="d-inline" method="POST" action="/projects/{{$project->uuid}}/force-delete">
@csrf
{{ __('Code OTP') }} :
<input type="text" name="otp" maxlength="6" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" required>
</form>
<a href="/login/send-sms-otp" class="btn btn-link">SMS</a>
</div>
</div>
</div>
</div>

View file

@ -23,7 +23,14 @@
</ul>
</div>
@endif
<otp-form csrf='{{ csrf_token() }}' action="{{route('servers.force-delete', ['id' => $server->id])}}"></otp-form>
<div style="display: flex; flex-direction: row; justify-content: center;align-items: center;">
<form ref="otp_form" class="d-inline" method="POST" action="{{route('servers.force-delete', ['id' => $server->id])}}">
@csrf
{{ __('Code OTP') }} :
<input type="text" name="otp" maxlength="6" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" required>
</form>
<a href="/login/send-sms-otp" class="btn btn-link">SMS</a>
</div>
</div>
@else
<div class="card-header">Suppression du serveur refusée <a href="{{route('servers.edit', ['id' => $server->id])}}" class="btn btn-sm btn-primary float-right">Retour</a></div>