LoginForm

Logowanie e-mailem i hasłem z opcją zapamiętania, linkiem do resetu hasła i przyciskiem pokazującym hasło. Najpierw sprawdzenia działają w przeglądarce; serwer dodaje błędy pól i komunikat. Wpisz dowolne hasło, a potem „skribly”.

LoginForm

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: LoginForm

Noc, podgląd: LoginForm

Wysoki kontrast, podgląd: LoginForm

UżycieLink do sekcji Użycie

tsx

import { LoginForm } from '@skribly/ui/pages'

tsx

<LoginForm
  labels={labels}
  forgotHref="/forgot-password"
  onSubmit={async (values) => {
    const result = await signIn(values)
    if (!result.ok) setNotice({ tone: 'danger', title: 'Sign in failed', toneLabel: 'Error' })
  }}
  notice={notice}
/>

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Nieudane wysłanie ustawia fokus na podsumowaniu błędów, którego linki przenoszą fokus do każdego pola.
Każdy błąd pola jest powiązany z jego polem przez aria-describedby i aria-invalid i znika, gdy tylko pole zostanie poprawione.
Nieudane logowanie jest odczytywane od razu z regionu typu assertive; inne komunikaty czekają na swoją kolej.
Przycisk wysyłania zachowuje fokus w trakcie oczekiwania, a jego wskaźnik ładowania ma nazwę.
Caps Lock jest zgłaszany w trybie polite, a przycisk pokazujący hasło ma jedną nazwę i stan wciśnięcia.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.