preview/pages/2-step-verification-code.astro - dev - githubmirror/tabler

preview/pages/2-step-verification-code.astro
83 строки3 KB
Paweł Kuna
Improve accessibility across layouts, components, and forms (#2799)
06 авг 2026, 00:40
06 авг 2026, 00:401effe22
---
import FormFooter from '@ui/FormFooter.astro'
import SingleLayout from '@shared/layouts/SingleLayout.astro'
import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro'
import CaptureScript from '@shared/components/CaptureScript.astro'
---

<SingleLayout title="2-Step Verification">
  <form class="card card-md" action="./" method="get" novalidate>
    <div class="card-body">
      <h2 class="card-title card-title-lg text-center mb-4">Authenticate Your Account</h2>

      <p class="my-4 text-center">
        Please confirm your account by entering the authorization code sent to <strong>+1 856-672-8552</strong>.
      </p>

      <fieldset class="my-5 border-0 p-0 m-0">
        <legend class="visually-hidden">Verification code</legend>
        <div class="row g-4">
          {
            Array.from({ length: 2 }).map((_, group) => (
              <div class="col">
                <div class="row g-2">
                  {Array.from({ length: 3 }).map((_, i) => (
                    <div class="col">
                      <input type="text" class="form-control form-control-lg text-center px-3 py-3" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-code-input aria-label={`Digit ${group * 3 + i + 1}`} autocomplete={group === 0 && i === 0 ? 'one-time-code' : undefined} />
                    </div>
                  ))}
                </div>
              </div>
            ))
          }
        </div>
      </fieldset>

      <div class="my-4">
        <label class="form-check">
          <input type="checkbox" class="form-check-input" />
          Don't ask for codes again on this device
        </label>
      </div>

      <FormFooter>
        <ButtonList class="flex-nowrap">
          <Button text="Cancel" block href="2-step-verification.html" />
          <Button text="Verify" block color="primary" />
        </ButtonList>
      </FormFooter>
    </div>
  </form>

  <CaptureScript>
    <!-- BEGIN CODE INPUT SCRIPT -->
    <script is:inline>
      const inputs = document.querySelectorAll('[data-code-input]')

      // Attach an event listener to each input element
      inputs.forEach((input, i) => {
        input.addEventListener('input', (e) => {
          const target = e.target
          // If the input field has a character, and there is a next input field, focus it
          if (target.value.length === target.maxLength && i + 1 < inputs.length) {
            inputs[i + 1].focus()
          }
        })

        input.addEventListener('keydown', (e) => {
          const target = e.target
          // If the input field is empty and Backspace is pressed, and there is a previous input field, focus it
          if (target.value.length === 0 && e.key === 'Backspace' && i > 0) {
            inputs[i - 1].focus()
          }
        })
      })
    </script>
    <!-- END CODE INPUT SCRIPT -->
  </CaptureScript>

  <div class="text-center text-secondary mt-3">
    It may take a minute to receive your code. Haven't received it? <a href="./">Resend a new code.</a>
  </div>
</SingleLayout>