Composant d’authentification à deux facteurs

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 font-serif">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700
              transform transition-all duration-300 hover:scale-102 hover:shadow-2xl relative
              before:content-[''] before:absolute before:inset-0 before:bg-[url('https://www.transparenttextures.com/patterns/clean-paper-light.png')] dark:before:bg-[url('https://www.transparenttextures.com/patterns/dark-fish-skin.png')] before:opacity-20 before:pointer-events-none">

    <!-- Page Curl / Fold Accent -->
    <div class="absolute top-0 right-0 w-0 h-0 border-l-[30px] border-b-[30px] border-solid border-white dark:border-gray-800 border-t-accent-500 border-r-accent-500 rounded-bl-lg dark:border-opacity-30" style="border-bottom-color: transparent; border-left-color: transparent;"></div>

    <div class="p-6 sm:p-8 relative z-10">
      <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-white leading-tight break-words">
        Two-Factor Authentication
      </h2>
      <p class="text-gray-600 dark:text-gray-300 mb-6 text-base sm:text-lg leading-relaxed break-words">
        Enter the 6-digit code from your authenticator app to complete your login.
      </p>

      <form>
        <div class="mb-6">
          <label for="auth_code" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2 invisible h-0 w-0 absolute">Verification Code</label>
          <div class="flex space-x-2 sm:space-x-4 justify-center">
            <input type="text" id="code_digit_1" name="code_digit_1" maxlength="1" inputmode="numeric" pattern="[0-9]" autofocus
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <input type="text" id="code_digit_2" name="code_digit_2" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <input type="text" id="code_digit_3" name="code_digit_3" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <span class="flex items-center text-gray-400 dark:text-gray-500 text-3xl font-semibold print:text-gray-700 rotate-180 print:rotate-0">-</span>
            <input type="text" id="code_digit_4" name="code_digit_4" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <input type="text" id="code_digit_5" name="code_digit_5" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
            <input type="text" id="code_digit_6" name="code_digit_6" maxlength="1" inputmode="numeric" pattern="[0-9]"
                   class="w-10 h-14 sm:w-12 sm:h-16 text-center text-2xl sm:text-3xl font-bold bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-gray-900 dark:text-white
                          focus:ring-accent-500 focus:border-accent-500 transition duration-150 ease-in-out print:border-gray-500 print:text-gray-900 placeholder-gray-400 dark:placeholder-gray-500 print:bg-white">
          </div>
        </div>

        <button type="submit"
                class="w-full py-3 px-4 rounded-lg bg-accent-500 text-white font-semibold text-lg
                       hover:bg-accent-600 focus:outline-none focus:ring-4 focus:ring-accent-300 focus:ring-opacity-75
                       transition duration-200 ease-in-out shadow-md dark:shadow-lg dark:hover:bg-accent-400
                       print:bg-gray-800 print:text-white print:hover:bg-gray-900 print:shadow-none">
          Verify Code
        </button>
      </form>

      <div class="mt-6 text-center text-sm sm:text-base">
        <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-accent-500 dark:hover:text-accent-400 transition duration-150 print:text-gray-800 print:underline print:hover:text-gray-900">
          Can't access your authenticator? 
          <span class="font-medium underline">Reset 2FA</span>
        </a>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is to define the accent color from the instructions */
  :root {
    --color-accent-500: #FF4500; /* Example: OrangeRed */
    --color-accent-600: #E03E00;
    --color-accent-300: #FF7B33;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-accent-400: #FF6600; /* Slightly lighter for better contrast in dark mode */
    }
  }

  .bg-accent-500 { background-color: var(--color-accent-500); }
  .hover\:bg-accent-600:hover { background-color: var(--color-accent-600); }
  .focus\:ring-accent-300:focus { --tw-ring-color: var(--color-accent-300); }
  .text-accent-500 { color: var(--color-accent-500); }
  .hover\:text-accent-500:hover { color: var(--color-accent-500); }
  .focus\:border-accent-500:focus { border-color: var(--color-accent-500); }
  .focus\:ring-accent-500:focus { --tw-ring-color: var(--color-accent-500); }

  .dark .hover\:bg-accent-400:hover { background-color: var(--color-accent-400); }
  .dark .hover\:text-accent-400:hover { color: var(--color-accent-400); }

  /* Custom styling for the top-right corner fold to use accent color */
  .border-t-accent-500 { border-top-color: var(--color-accent-500); }
  .border-r-accent-500 { border-right-color: var(--color-accent-500); }

  /* For digit inputs, ensure they stay centered and are easily tabbable */
  input[type="text"][maxlength="1"] {
    -moz-appearance: textfield;
    appearance: textfield;
  }
</style>

<!-- Script for auto-focusing and handling digit input -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const inputs = document.querySelectorAll('input[maxlength="1"][inputmode="numeric"]');
    inputs.forEach((input, index) => {
      input.addEventListener('input', (e) => {
        if (e.target.value.length === 1 && index < inputs.length - 1) {
          inputs[index + 1].focus();
        }
      });

      input.addEventListener('keydown', (e) => {
        if (e.key === 'Backspace' && e.target.value.length === 0 && index > 0) {
          inputs[index - 1].focus();
        }
      });

      // Simple number validation for non-numeric input
      input.addEventListener('beforeinput', (e) => {
        if (e.data && !/^[0-9]$/.test(e.data)) {
          e.preventDefault();
        }
      });
    });
  });
</script>