From 74904ab519ae86b2008b9668c90a5524c7ced492 Mon Sep 17 00:00:00 2001
From: Vincent BRIDIER <vincent.bridier@ldc.fr>
Date: Fri, 14 Jan 2022 16:16:26 +0100
Subject: [PATCH] - Remove OTP VueJS component

---
 package.json                                  |  4 +-
 resources/js/app.js                           |  5 --
 resources/js/components/OTPFormComponent.vue  | 70 -------------------
 resources/views/auth/verify.blade.php         |  9 ++-
 resources/views/domain-names/delete.blade.php |  9 ++-
 resources/views/dpccs/delete.blade.php        |  9 ++-
 .../views/email-addresses/delete.blade.php    |  9 ++-
 resources/views/ldc-networks/delete.blade.php |  9 ++-
 resources/views/projects/delete.blade.php     |  9 ++-
 resources/views/servers/delete.blade.php      |  9 ++-
 10 files changed, 57 insertions(+), 85 deletions(-)
 delete mode 100644 resources/js/components/OTPFormComponent.vue

diff --git a/package.json b/package.json
index 1bb9f0c..225718d 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,5 @@
         "vue": "^2.5.17",
         "vue-template-compiler": "^2.6.10"
     },
-    "dependencies": {
-        "@bachdgvn/vue-otp-input": "^1.0.8"
-    }
+    "dependencies": {}
 }
diff --git a/resources/js/app.js b/resources/js/app.js
index 68b6c16..4c32be7 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -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);
 
diff --git a/resources/js/components/OTPFormComponent.vue b/resources/js/components/OTPFormComponent.vue
deleted file mode 100644
index 49ce10c..0000000
--- a/resources/js/components/OTPFormComponent.vue
+++ /dev/null
@@ -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>
diff --git a/resources/views/auth/verify.blade.php b/resources/views/auth/verify.blade.php
index 0afee62..1bce820 100644
--- a/resources/views/auth/verify.blade.php
+++ b/resources/views/auth/verify.blade.php
@@ -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>
diff --git a/resources/views/domain-names/delete.blade.php b/resources/views/domain-names/delete.blade.php
index efa6c6a..5612e8f 100644
--- a/resources/views/domain-names/delete.blade.php
+++ b/resources/views/domain-names/delete.blade.php
@@ -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>
diff --git a/resources/views/dpccs/delete.blade.php b/resources/views/dpccs/delete.blade.php
index d67efb2..7199eec 100644
--- a/resources/views/dpccs/delete.blade.php
+++ b/resources/views/dpccs/delete.blade.php
@@ -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>
diff --git a/resources/views/email-addresses/delete.blade.php b/resources/views/email-addresses/delete.blade.php
index 9b3e6c0..d2ec3be 100644
--- a/resources/views/email-addresses/delete.blade.php
+++ b/resources/views/email-addresses/delete.blade.php
@@ -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>
diff --git a/resources/views/ldc-networks/delete.blade.php b/resources/views/ldc-networks/delete.blade.php
index 9425871..b47759f 100644
--- a/resources/views/ldc-networks/delete.blade.php
+++ b/resources/views/ldc-networks/delete.blade.php
@@ -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>
diff --git a/resources/views/projects/delete.blade.php b/resources/views/projects/delete.blade.php
index b3f7ceb..a64cbd0 100644
--- a/resources/views/projects/delete.blade.php
+++ b/resources/views/projects/delete.blade.php
@@ -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>
diff --git a/resources/views/servers/delete.blade.php b/resources/views/servers/delete.blade.php
index 9d90a25..1424fd3 100644
--- a/resources/views/servers/delete.blade.php
+++ b/resources/views/servers/delete.blade.php
@@ -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>