Skip to content
This repository was archived by the owner on Oct 28, 2025. It is now read-only.

Commit a79c546

Browse files
lucas-luchacklucas-luchack
committed
✒️ Modify 2FA's page
1 parent 8713cd9 commit a79c546

1 file changed

Lines changed: 79 additions & 13 deletions

File tree

‎resources/views/auth/mfa.blade.php‎

Lines changed: 79 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
<?php $page_name = 'Authentification à plusieurs facteurs'; ?>
1+
@php
2+
$etabName = DB::table('settings')->where('NAME', 'schoolName')->value('VALUE');
3+
$etabType = DB::table('settings')->where('NAME', 'typeDim')->value('VALUE');
4+
$page_name = "Authentification à plusieurs facteurs";
5+
@endphp
26
<!DOCTYPE html>
37
<html :class="{ 'theme-dark': dark }" x-data="data()" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
48

@@ -21,8 +25,8 @@
2125
Vérification supplémentaire
2226
</h1>
2327

24-
<p class="mb-4 text-sm text-gray-600 dark:text-gray-500">
25-
<span class="font-bold">Bienvenue {{ Auth::user()->first_name . ' ' . Auth::user()->last_name }}</span>.<br/>
28+
<p class="mb-4 text-sm text-gray-500">
29+
<span class="font-bold text-gray-600 dark:text-gray-400">Bienvenue {{ Auth::user()->first_name . ' ' . Auth::user()->last_name }}</span>.<br/>
2630
Veuillez confirmer l'accès à votre compte en saisissant le code d'authentification fourni
2731
par votre application d'authentification.
2832
</p>
@@ -31,19 +35,23 @@
3135

3236
<x-auth-validation-errors :errors="$errors" />
3337

34-
<form method="POST" action="{{ route('login.2fa') }}">
38+
<form method="POST" action="{{ route('login.2fa') }}" id="otp_form">
3539
@csrf
36-
37-
<label class="block text-sm">
38-
<span class="text-gray-700 dark:text-gray-400">Entrez le code OTP</span>
39-
<input
40-
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"
41-
placeholder="012345" name="one_time_password" :value="old('one_time_password')"
42-
type="code" inputmode="numeric" autocomplete="one-time-code" required autofocus />
43-
</label>
40+
<div class="flex justify-center items-center flex-col">
41+
<div class="flex optfield">
42+
<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 />
43+
<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" />
44+
<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" />
45+
<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" />
46+
<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" />
47+
<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" />
48+
</div>
49+
<input name="one_time_password" :value="old('one_time_password')"
50+
type="hidden" inputmode="numeric" required autocomplete="off" id="otp_hidden" />
51+
</div>
4452

4553
<button
46-
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">
54+
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">
4755
Valider
4856
</button>
4957

@@ -71,6 +79,64 @@ class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium lea
7179
</div>
7280
</div>
7381

82+
<script>
83+
const inputs = document.querySelectorAll(".optfield input");
84+
85+
inputs.forEach((input, index) => {
86+
input.dataset.index = index;
87+
input.addEventListener("paste", handleOnPasteOtp);
88+
input.addEventListener("keyup", handleOtp);
89+
})
90+
91+
function handleOnPasteOtp(e) {
92+
const data = e.clipboardData.getData("text");
93+
const value = data.split("");
94+
if (value.length === inputs.length) {
95+
inputs.forEach((input, index) => (input.value = value[index]));
96+
submit();
97+
}
98+
}
99+
100+
function handleOtp(e) {
101+
const input = e.target;
102+
let value = input.value;
103+
input.value = "";
104+
input.value = value ? value[0] : "";
105+
106+
let fieldIndex = input.dataset.index;
107+
if (value.length > 0 && fieldIndex < inputs.length - 1) {
108+
input.nextElementSibling.focus();
109+
}
110+
111+
if (e.key === "Backspace" && fieldIndex > 0) {
112+
input.previousElementSibling.focus();
113+
}
114+
115+
if (fieldIndex == inputs.length - 1) {
116+
var completed = true;
117+
inputs.forEach((input) => {
118+
if(input.value == "") {
119+
completed = false;
120+
}
121+
})
122+
if (completed) {
123+
submit();
124+
}
125+
}
126+
}
127+
128+
function submit() {
129+
console.log("Submitting...");
130+
let otp = "";
131+
inputs.forEach((input) => {
132+
otp += input.value;
133+
input.disabled = true;
134+
input.classList.add("disabled");
135+
});
136+
document.getElementById('otp_hidden').value = otp;
137+
document.getElementById('otp_form').submit();
138+
}
139+
</script>
74140
@include('layouts.footer')
75141
</body>
76142

0 commit comments

Comments
 (0)