From a79c54616e1450ff15512ca30d4cba49e94eadc6 Mon Sep 17 00:00:00 2001
From: Luc'HACK <espiet.l@valbion.com>
Date: Wed, 31 Aug 2022 17:38:13 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=92=EF=B8=8F=20Modify=202FA's=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/views/auth/mfa.blade.php | 92 +++++++++++++++++++++++++-----
 1 file changed, 79 insertions(+), 13 deletions(-)
diff --git a/resources/views/auth/mfa.blade.php b/resources/views/auth/mfa.blade.php
index 02bdbb5..37f467c 100644
--- a/resources/views/auth/mfa.blade.php
+++ b/resources/views/auth/mfa.blade.php
@@ -1,4 +1,8 @@
-<?php $page_name = 'Authentification à plusieurs facteurs'; ?>
+@php
+    $etabName = DB::table('settings')->where('NAME', 'schoolName')->value('VALUE');
+    $etabType = DB::table('settings')->where('NAME', 'typeDim')->value('VALUE');
+    $page_name = "Authentification à plusieurs facteurs";
+@endphp
 <!DOCTYPE html>
 <html :class="{ 'theme-dark': dark }" x-data="data()" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 
@@ -21,8 +25,8 @@
                             Vérification supplémentaire
                         </h1>
 
-                        <p class="mb-4 text-sm text-gray-600 dark:text-gray-500">
-                            <span class="font-bold">Bienvenue {{ Auth::user()->first_name . ' ' . Auth::user()->last_name }}</span>.<br/>
+                        <p class="mb-4 text-sm text-gray-500">
+                            <span class="font-bold text-gray-600 dark:text-gray-400">Bienvenue {{ Auth::user()->first_name . ' ' . Auth::user()->last_name }}</span>.<br/>
                             Veuillez confirmer l'accès à votre compte en saisissant le code d'authentification fourni
                             par votre application d'authentification.
                         </p>
@@ -31,19 +35,23 @@
 
                         <x-auth-validation-errors :errors="$errors" />
 
-                        <form method="POST" action="{{ route('login.2fa') }}">
+                        <form method="POST" action="{{ route('login.2fa') }}" id="otp_form">
                             @csrf
-
-                            <label class="block text-sm">
-                                <span class="text-gray-700 dark:text-gray-400">Entrez le code OTP</span>
-                                <input
-                                    class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
-                                    placeholder="012345" name="one_time_password" :value="old('one_time_password')"
-                                    type="code" inputmode="numeric" autocomplete="one-time-code" required autofocus />
-                            </label>
+                            <div class="flex justify-center items-center flex-col">
+                                <div class="flex optfield">
+                                    <input class="disabled:opacity-50 w-11 text-3xl p-[10px] text-center rounded m-[2px] border-2 border-solid dark:border-gray-600 dark:bg-gray-700 border-gray-300 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray font-bold outline-none transition-all" type="text" maxlength="1" inputmode="numeric" autocomplete="one-time-code" autofocus />
+                                    <input class="disabled:opacity-50 w-11 text-3xl p-[10px] text-center rounded m-[2px] border-2 border-solid dark:border-gray-600 dark:bg-gray-700 border-gray-300 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray font-bold outline-none transition-all" type="text" maxlength="1" inputmode="numeric" />
+                                    <input class="disabled:opacity-50 w-11 text-3xl p-[10px] text-center rounded m-[2px] border-2 border-solid dark:border-gray-600 dark:bg-gray-700 border-gray-300 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray font-bold outline-none transition-all mr-4" type="text" maxlength="1" inputmode="numeric" />
+                                    <input class="disabled:opacity-50 w-11 text-3xl p-[10px] text-center rounded m-[2px] border-2 border-solid dark:border-gray-600 dark:bg-gray-700 border-gray-300 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray font-bold outline-none transition-all" type="text" maxlength="1" inputmode="numeric" />
+                                    <input class="disabled:opacity-50 w-11 text-3xl p-[10px] text-center rounded m-[2px] border-2 border-solid dark:border-gray-600 dark:bg-gray-700 border-gray-300 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray font-bold outline-none transition-all" type="text" maxlength="1" inputmode="numeric" />
+                                    <input class="disabled:opacity-50 w-11 text-3xl p-[10px] text-center rounded m-[2px] border-2 border-solid dark:border-gray-600 dark:bg-gray-700 border-gray-300 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray font-bold outline-none transition-all" type="text" maxlength="1" inputmode="numeric" />
+                                </div>
+                                <input name="one_time_password" :value="old('one_time_password')"
+                                    type="hidden" inputmode="numeric" required autocomplete="off" id="otp_hidden" />
+                            </div>
 
                             <button
-                                class="block w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
+                                class="disabled:opacity-50 block w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
                                 Valider
                             </button>
 
@@ -71,6 +79,64 @@ class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium lea
         </div>
     </div>
 
+    <script>
+        const inputs = document.querySelectorAll(".optfield input");
+
+        inputs.forEach((input, index) => {
+            input.dataset.index = index;
+            input.addEventListener("paste", handleOnPasteOtp);
+            input.addEventListener("keyup", handleOtp);
+        })
+
+        function handleOnPasteOtp(e) {
+            const data = e.clipboardData.getData("text");
+            const value = data.split("");
+            if (value.length === inputs.length) {
+                inputs.forEach((input, index) => (input.value = value[index]));
+                submit();
+            }
+        }
+
+        function handleOtp(e) {
+            const input = e.target;
+            let value = input.value;
+            input.value = "";
+            input.value = value ? value[0] : "";
+
+            let fieldIndex = input.dataset.index;
+            if (value.length > 0 && fieldIndex < inputs.length - 1) {
+                input.nextElementSibling.focus();
+            }
+
+            if (e.key === "Backspace" && fieldIndex > 0) {
+                input.previousElementSibling.focus();
+            }
+
+            if (fieldIndex == inputs.length - 1) {
+                var completed = true;
+                inputs.forEach((input) => {
+                    if(input.value == "") {
+                        completed = false;
+                    }
+                })
+                if (completed) {
+                    submit();
+                }
+            }
+        }
+
+        function submit() {
+            console.log("Submitting...");
+            let otp = "";
+            inputs.forEach((input) => {
+                otp += input.value;
+                input.disabled = true;
+                input.classList.add("disabled");
+            });
+            document.getElementById('otp_hidden').value = otp;
+            document.getElementById('otp_form').submit();
+        }
+    </script>
     @include('layouts.footer')
 </body>
 
