Skip to content

Commit

Permalink
✒️ Modify 2FA's page
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucas-luchack
lucas-luchack committed Aug 31, 2022
1 parent 8713cd9 commit a79c546
Showing 1 changed file with 79 additions and 13 deletions.
92 changes: 79 additions & 13 deletions resources/views/auth/mfa.blade.php
View file
Original file line number Diff line number Diff line change
@@ -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()) }}">

Expand All @@ -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>
Expand All @@ -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>

Expand Down Expand Up @@ -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>

Expand Down

0 comments on commit a79c546

Please sign in to comment.