113 lines
3.8 KiB
Text
113 lines
3.8 KiB
Text
<Layouts.app flash={@flash} current_scope={@current_scope}>
|
|
<div class="mx-auto max-w-sm">
|
|
<div class="text-center">
|
|
<.header>
|
|
Log in
|
|
<:subtitle>
|
|
<%= if @current_scope do %>
|
|
You need to reauthenticate to perform sensitive actions on your account.
|
|
<% else %>
|
|
Don't have an account?
|
|
<.link
|
|
navigate={~p"/users/register"}
|
|
class="font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
|
>
|
|
Sign up
|
|
</.link>
|
|
for an account now.
|
|
<% end %>
|
|
</:subtitle>
|
|
</.header>
|
|
</div>
|
|
|
|
<div
|
|
:if={local_mail_adapter?()}
|
|
class="mt-6 rounded-lg bg-blue-50 p-4 dark:bg-blue-950"
|
|
>
|
|
<div class="flex">
|
|
<.icon
|
|
name="hero-information-circle"
|
|
class="h-6 w-6 flex-shrink-0 text-blue-600 dark:text-blue-400"
|
|
/>
|
|
<div class="ml-3">
|
|
<p class="text-sm text-blue-700 dark:text-blue-200">
|
|
You are running the local mail adapter.
|
|
</p>
|
|
<p class="mt-1 text-sm text-blue-700 dark:text-blue-200">
|
|
To see sent emails, visit <.link href="/dev/mailbox" class="font-medium underline">the mailbox page</.link>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 space-y-6">
|
|
<!-- Password Login (Default) -->
|
|
<.form :let={f} for={@form} as={:user} id="login_form_password" action={~p"/users/log-in"}>
|
|
<.input
|
|
readonly={!!@current_scope}
|
|
field={f[:email]}
|
|
type="email"
|
|
label="Email"
|
|
autocomplete="email"
|
|
required
|
|
phx-mounted={JS.focus()}
|
|
/>
|
|
<.input
|
|
field={f[:password]}
|
|
type="password"
|
|
label="Password"
|
|
autocomplete="current-password"
|
|
required
|
|
/>
|
|
<div class="space-y-3">
|
|
<.button class="w-full" variant="primary" name={@form[:remember_me].name} value="true">
|
|
Log in <span aria-hidden="true">→</span>
|
|
</.button>
|
|
</div>
|
|
</.form>
|
|
|
|
<div class="relative">
|
|
<div class="absolute inset-0 flex items-center">
|
|
<div class="w-full border-t border-gray-300 dark:border-white/10"></div>
|
|
</div>
|
|
<div class="relative flex justify-center text-sm">
|
|
<span class="bg-gray-50 px-2 text-gray-600 dark:bg-gray-950 dark:text-gray-400">
|
|
or
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alternative: Email Login Link -->
|
|
<.form :let={f} for={@form} as={:user} id="login_form_magic" action={~p"/users/log-in"}>
|
|
<.input
|
|
readonly={!!@current_scope}
|
|
field={f[:email]}
|
|
type="email"
|
|
label="Email"
|
|
autocomplete="email"
|
|
required
|
|
/>
|
|
<.button class="w-full">
|
|
Send me a login link instead
|
|
</.button>
|
|
</.form>
|
|
|
|
<!-- Passkey Login (Discoverable) -->
|
|
<div>
|
|
<div
|
|
id="passkey-discoverable-error"
|
|
class="hidden mb-3 rounded-lg bg-red-50 p-3 dark:bg-red-900/20"
|
|
>
|
|
<p class="text-sm text-red-800 dark:text-red-200"></p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
id="passkey-discoverable-btn"
|
|
class="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-gray-100 px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-white/10 dark:text-white dark:hover:bg-white/20"
|
|
>
|
|
<.icon name="hero-key" class="h-5 w-5" /> Log in with passkey
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layouts.app>
|