File size: 1,633 Bytes
88211d3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <.auth_container>
<.form
:let={f}
for={@conn.params}
action={Routes.auth_path(@conn, :verify_2fa_recovery_code)}
class="flex flex-col gap-y-6"
onsubmit="document.getElementById('use-code-button').disabled = true"
>
<div class="flex flex-col gap-y-2">
<.input
type="text"
field={f[:recovery_code]}
autocomplete="off"
autofocus="autofocus"
maxlength="10"
oninvalid="document.getElementById('use-code-button').disabled = false"
required="required"
placeholder="Recovery code"
mt?={false}
/>
<p :if={@error} class="text-xs text-red-500 text-center">
{@error}
</p>
</div>
<.button
id="use-code-button"
type="submit"
mt?={false}
class="w-full [&>span.label-enabled]:block [&>span.label-disabled]:hidden [&[disabled]>span.label-enabled]:hidden [&[disabled]>span.label-disabled]:block"
>
<span class="label-enabled pointer-events-none">
Verify
</span>
<span class="label-disabled">
<.spinner class="inline-block h-5 w-5 mr-2 text-white dark:text-gray-400" /> Verifying...
</span>
</.button>
</.form>
<div class="mt-6 flex flex-col gap-y-2 text-sm text-gray-500 dark:text-gray-400 text-center">
<p>
<.styled_link href={Routes.auth_path(@conn, :verify_2fa)}>
Use authenticator app instead
</.styled_link>
</p>
<p :if={ee?()}>
Lost your recovery codes?
<.styled_link href="https://plausible.io/contact">
Contact us
</.styled_link>
</p>
</div>
</.auth_container>
|