Graham McIntire
5a7cdc7138
- Replace gray->cool-steel, blue/indigo->cerulean, red->sweet-salmon, yellow/amber->wheat - Dark sidebar: sidebar/footer use cool-steel-800 bg, text lightened for contrast - ~11,600 color replacements across ~99 files - Update tests for new color class names
48 lines
1.5 KiB
Text
48 lines
1.5 KiB
Text
<Layouts.app flash={@flash} current_scope={@current_scope}>
|
|
<div class="mx-auto max-w-sm">
|
|
<div class="text-center">
|
|
<.header>
|
|
{t_auth("Two-Factor Authentication")}
|
|
<:subtitle>
|
|
{t_auth("Enter the 6-digit code from your authenticator app")}
|
|
</:subtitle>
|
|
</.header>
|
|
</div>
|
|
|
|
<div class="mt-8">
|
|
<.form :let={f} for={@form} as={:user} id="totp_form" action={~p"/users/log-in/totp"}>
|
|
<.input
|
|
field={f[:totp_code]}
|
|
type="text"
|
|
label={t_auth("Authentication Code")}
|
|
placeholder="000000"
|
|
autocomplete="one-time-code"
|
|
inputmode="numeric"
|
|
required
|
|
phx-mounted={JS.focus()}
|
|
/>
|
|
<div class="mt-2">
|
|
<p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
|
|
{t_auth(
|
|
"Enter the 6-digit code from your authenticator app, or use a recovery code (XXXX-XXXX format)."
|
|
)}
|
|
</p>
|
|
</div>
|
|
<div class="mt-6">
|
|
<.button class="w-full" variant="primary">
|
|
{t_auth("Verify")} <span aria-hidden="true">→</span>
|
|
</.button>
|
|
</div>
|
|
</.form>
|
|
|
|
<div class="mt-6 text-center">
|
|
<.link
|
|
href={~p"/users/log-in"}
|
|
class="text-sm font-semibold text-cool-steel-600 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:text-cool-steel-300"
|
|
>
|
|
{t_auth("← Back to login")}
|
|
</.link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layouts.app>
|