@opengis/fastify-table
Version:
core-plugins
102 lines (86 loc) • 4.79 kB
HTML
<html lang="en" dir="" class="relative min-h-full">
<head>
<!-- scripts -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white dark:bg-neutral-900">
<main class="flex min-h-full">
<!-- Content -->
<div class="grow px-5">
<div class="h-full min-h-screen sm:w-[448px] flex flex-col justify-center mx-auto space-y-5">
{{#if codes}}
<div><h1 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-neutral-200">Your recovery codes:</h1></div>
{{/if}}
{{#if recovery}}
<div>
<a href="/2factor/recovery" class="py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600">
Send recovery code via E-mail
</a>
<h1 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-neutral-200">Reset 2factor settings via recovery code:</h1>
</div>
{{/if}}
<form action="/2factor/recovery" method="post">
<div class="space-y-5">
<div>
<label for="hs-pro-dale" class="block mb-2 text-sm font-medium text-gray-800 dark:text-white">
Code
</label>
{{#if query.recovery}}
<input type="text" name="code" id="hs-pro-dale" class="py-2.5 px-3 block w-full border-gray-200 rounded-lg text-sm placeholder:text-gray-400 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-neutral-700 dark:text-neutral-300 dark:placeholder:text-white/60 dark:focus:ring-neutral-600" placeholder="999999">
{{^}}
<input type="text" name="code" class="form-input hidden">
<div class="space-y-5">
<div class="my-3 flex gap-x-2" data-hs-pin-input>
<input id="input-1" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
<input id="input-2" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
<input id="input-3" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
<input id="input-4" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
<input id="input-5" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
<input id="input-6" type="text" class="input-code block w-[38px] h-[38px] text-center border rounded-md focus:outline-blue-600" >
</div>
</div>
{{/if}}
</div>
<button type="submit" class="py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600">
Reset 2factor settings
</button>
</div>
</form>
</div>
</div>
<!-- End Content -->
</main><script>
const inputs = document.querySelectorAll(".input-code");
const formInput = document.querySelector(".form-input");
const inputTextToInput = (event) => {
const input = event.target;
const value = input.value;
if (value.length > 1) {
input.value = value.slice(-1);
}
const currentIndex = Array.from(inputs).indexOf(input);
if (value && currentIndex < inputs.length - 1) {
inputs[currentIndex + 1].focus();
}
const combinedValue = Array.from(inputs)
.map((input) => input.value)
.join("");
formInput.value = combinedValue;
};
const handleBackspace = (event) => {
const input = event.target;
if (event.key === "Backspace" && input.value === "") {
const currentIndex = Array.from(inputs).indexOf(input);
if (currentIndex > 0) {
inputs[currentIndex - 1].focus();
}
}
};
inputs.forEach((input) => {
input.addEventListener("input", inputTextToInput);
input.addEventListener("keydown", handleBackspace);
});
</script>
</body>
</html>