mirror of
https://codeberg.org/JasterV/spazio-solazzo.git
synced 2026-04-26 18:20:03 +00:00
68 lines
3 KiB
Text
68 lines
3 KiB
Text
<Layouts.app flash={@flash} current_user={@current_user}>
|
|
<div class="min-h-screen bg-gradient-to-br from-slate-50 via-sky-50 to-slate-100 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 flex items-center justify-center px-4 py-12">
|
|
<div class="w-full max-w-md">
|
|
<div class="text-center mb-8">
|
|
<h2 class="text-slate-600 dark:text-slate-400 text-2xl">
|
|
Sign in with your email
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-700 overflow-hidden">
|
|
<div class="p-8">
|
|
<form phx-submit="request_magic_link" class="space-y-5">
|
|
<div>
|
|
<label
|
|
for="email"
|
|
class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2"
|
|
>
|
|
Email Address
|
|
</label>
|
|
<div class="relative">
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
id="email"
|
|
value={@email}
|
|
required
|
|
class="w-full pl-11 pr-4 py-3 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:ring-2 focus:ring-sky-500 focus:border-transparent transition-shadow"
|
|
placeholder="you@example.com"
|
|
/>
|
|
<div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
|
|
<.icon name="hero-envelope" class="size-5 text-slate-400 dark:text-slate-500" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={@loading}
|
|
class="w-full px-6 py-3.5 bg-gradient-to-r from-sky-500 to-sky-600 hover:from-sky-600 hover:to-sky-700 disabled:from-slate-400 disabled:to-slate-500 text-white font-semibold rounded-xl transition-all shadow-lg shadow-sky-500/30 hover:shadow-xl hover:shadow-sky-500/40 hover:-translate-y-0.5 active:translate-y-0 disabled:cursor-not-allowed disabled:transform-none"
|
|
>
|
|
<%= if @loading do %>
|
|
Sending...
|
|
<% else %>
|
|
Request Magic Link
|
|
<% end %>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="px-8 py-4 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700">
|
|
<p class="text-xs text-center text-slate-500 dark:text-slate-400">
|
|
We'll send you a secure link to sign in without a password
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 text-center">
|
|
<.link
|
|
navigate="/"
|
|
class="inline-flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400 hover:text-sky-600 dark:hover:text-sky-400 transition-colors"
|
|
>
|
|
<.icon name="hero-arrow-left" class="size-4" />
|
|
<span>Back to home</span>
|
|
</.link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layouts.app>
|