@opengis/fastify-table

<!DOCTYPE html> <html lang="en" dir="" class="relative min-h-full"> <head>  <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-white dark:bg-neutral-900"> <main class="flex min-h-full">  <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 enabled}} <a href="/2factor?recovery=1" class="py-2.5 px-3 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-50 dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"> <svg class="flex-shrink-0 size-4" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M27.2192 10.9088C27.0336 11.0528 23.7568 12.8992 23.7568 17.0048C23.7568 21.7536 27.9264 23.4336 28.0512 23.4752C28.032 23.5776 27.3888 25.776 25.8528 28.016C24.4832 29.9872 23.0528 31.9552 20.8768 31.9552C18.7008 31.9552 18.1408 30.6912 15.6288 30.6912C13.1808 30.6912 12.3104 31.9968 10.32 31.9968C8.3296 31.9968 6.9408 30.1728 5.344 27.9328C3.4944 25.3024 2 21.216 2 17.3376C2 11.1168 6.0448 7.8176 10.0256 7.8176C12.1408 7.8176 13.904 9.2064 15.232 9.2064C16.496 9.2064 18.4672 7.7344 20.8736 7.7344C21.7856 7.7344 25.0624 7.8176 27.2192 10.9088ZM19.7312 5.1008C20.7264 3.92 21.4304 2.2816 21.4304 0.6432C21.4304 0.416 21.4112 0.1856 21.3696 0C19.7504 0.0608 17.824 1.0784 16.6624 2.4256C15.7504 3.4624 14.8992 5.1008 14.8992 6.7616C14.8992 7.0112 14.9408 7.2608 14.96 7.3408C15.0624 7.36 15.2288 7.3824 15.3952 7.3824C16.848 7.3824 18.6752 6.4096 19.7312 5.1008Z" class="fill-black dark:fill-neutral-200" fill="currentColor"/> </svg> I lost access to my 2factor app </a> {{/if}} <ul>  <li class="relative ps-12 pb-10 last:pb-0 before:content-[counter(step)] before:absolute before:start-0 before:flex before:items-center before:justify-center before:size-7 before:text-xs before:font-semibold before:text-gray-800 before:rounded-full before:bg-gray-100 dark:before:bg-neutral-700 dark:before:text-neutral-200 last:after:hidden after:absolute after:top-9 after:bottom-2 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-neutral-700" style="counter-increment: step 1;"> <span class="block font-semibold text-sm text-gray-800 dark:text-neutral-200"> Download app </span> <a target="_blank" href="{{coalesce url 'https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&pcampaignid=web_share'}}" class="text-[13px] text-gray-500 dark:text-neutral-500"> Download a mobile authentication app. </a> </li>  {{#if qrCode}} {{#unless enabled}}  <li class="relative ps-12 pb-10 last:pb-0 before:content-[counter(step)] before:absolute before:start-0 before:flex before:items-center before:justify-center before:size-7 before:text-xs before:font-semibold before:text-gray-800 before:rounded-full before:bg-gray-100 dark:before:bg-neutral-700 dark:before:text-neutral-200 last:after:hidden after:absolute after:top-9 after:bottom-2 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-neutral-700" style="counter-increment: step 1;"> <span class="block font-semibold text-sm text-gray-800 dark:text-neutral-200"> Scan QR Code </span> <p class="text-[13px] text-gray-500 dark:text-neutral-500"> Scan this QR code using a mobile authentication app. This will generate a verification code. </p> <div class="mt-3"> <span class="p-1 inline-block border border-gray-300 rounded-lg dark:border-neutral-600"> {{{qrCode}}} </span> </div> <div class="mt-3"> <span class="p-1 inline-block border border-gray-300 rounded-lg dark:border-neutral-600"> {{secretKey}} </span> </div> </li> {{/unless}}  {{/if}}  <li class="relative ps-12 pb-10 last:pb-0 before:content-[counter(step)] before:absolute before:start-0 before:flex before:items-center before:justify-center before:size-7 before:text-xs before:font-semibold before:text-gray-800 before:rounded-full before:bg-gray-100 dark:before:bg-neutral-700 dark:before:text-neutral-200 last:after:hidden after:absolute after:top-9 after:bottom-2 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-neutral-700" style="counter-increment: step 1;"> <span class="block font-semibold text-sm text-gray-800 dark:text-neutral-200"> Enter Code </span> <p class="text-[13px] text-gray-500 dark:text-neutral-500"> Enter the 2-step verification code from your authenticator app. </p> <form action="/2factor/verify" method="post"> <div class="space-y-5"> <div> <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> <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"> Sign in </button> </div> </form> </li>  </ul> </div> </div>  </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>