Auth Layouts
A set of layouts for authentication pages.
The auth templates are designed to be compatible with the Phoenix's
mix phx.gen.auth.
Modern sign in
Fullscreen
Copy
<div class="flex flex-1 flex-col items-center justify-center py-4 gap-y-6">
<div class="overflow-hidden relative w-full max-w-md border rounded-xl shadow-lg bg-white dark:bg-zinc-900 dark:border-white/10 p-10">
<div class="absolute -top-0 -translate-y-1/2 inset-x-0 h-[350px] pointer-events-none">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="grid-pattern" x="0" y="0" width="48" height="48" patternUnits="userSpaceOnUse">
<g fill="none" opacity="0.1">
<path d="M48 23.5L0 23.5" stroke="currentColor"></path>
<path d="M48 47.5001L0 47.5001" stroke="currentColor"></path>
<path d="M23.5 0V48" stroke="currentColor"></path>
<path d="M47.5 0V48" stroke="currentColor"></path>
</g>
<g opacity="0.035">
<rect width="24" height="24" fill="currentColor"></rect>
<rect x="24" y="24" width="24" height="24" fill="currentColor"></rect>
</g>
</pattern>
<radialGradient id="fade-gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="white" stop-opacity="1"></stop>
<stop offset="50%" stop-color="white" stop-opacity="0.7"></stop>
<stop offset="100%" stop-color="white" stop-opacity="0.2"></stop>
</radialGradient>
<mask id="fade-mask">
<rect width="100%" height="100%" fill="url(#fade-gradient)"></rect>
</mask>
</defs>
<rect width="100%" height="100%" fill="url(#grid-pattern)" mask="url(#fade-mask)"></rect>
</svg>
</div>
<div class="flex items-center justify-center mb-4">
<img src="https://fluxonui.com/images/logos/1.svg" alt="Company Logo" class="h-12" />
</div>
<h1 class="text-center text-2xl/10 font-bold text-zinc-800 dark:text-zinc-100">
Welcome back
</h1>
<p class="text-center text-sm text-zinc-500 dark:text-zinc-400">
Please enter your details to sign in.
</p>
<div class="flex gap-x-2 mt-6 *:flex-1">
<.button as="link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" fill="currentColor">
<path d="M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.65l-5.21-6.82-5.97 6.82H1.68l7.73-8.84L1.25 2.25h6.83l4.71 6.23zm-1.16 17.52h1.84L7.08 4.13H5.12z" />
</svg>
</.button>
<.button as="link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="-3 0 262 262" class="icon">
<path
fill="#4285F4"
d="M255.88 133.45c0-10.73-.87-18.57-2.76-26.69H130.55v48.45h71.95c-1.45 12.04-9.29 30.17-26.7 42.35l-.24 1.63 38.76 30.02 2.68.27c24.66-22.78 38.88-56.28 38.88-96.03"
/>
<path
fill="#34A853"
d="M130.55 261.1c35.25 0 64.84-11.6 86.45-31.62l-41.2-31.91c-11.02 7.68-25.81 13.05-45.25 13.05-34.52 0-63.82-22.77-74.27-54.25l-1.53.13-40.3 31.19-.52 1.46c21.46 42.65 65.56 71.95 116.62 71.95"
/>
<path
fill="#FBBC05"
d="M56.28 156.37a80.37 80.37 0 0 1-4.35-25.82c0-9 1.6-17.7 4.2-25.82l-.07-1.73-40.8-31.69-1.34.64C5.08 89.65 0 109.52 0 130.55s5.08 40.9 13.93 58.6l42.35-32.78"
/>
<path
fill="#EB4335"
d="M130.55 50.48c24.51 0 41.05 10.59 50.48 19.44l36.84-35.98C195.24 12.91 165.8 0 130.55 0 79.49 0 35.39 29.3 13.92 71.95l42.22 32.78c10.59-31.48 39.89-54.25 74.41-54.25"
/>
</svg>
</.button>
<.button as="link" href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
xml:space="preserve"
viewBox="0 0 1024 1024"
class="icon"
fill="currentColor"
>
<g fill-rule="evenodd" clip-rule="evenodd">
<path d="M901.28 348.14C743.55 447.42 758.48 674.19 929 751.8c-5.6 14.85-10.84 29.97-16.98 44.72-25.44 61.1-61.17 115.91-103.75 166.26-23.68 28-51.37 50.85-89.08 57.36-28.85 4.97-56.28-.62-83.22-11.28-22.03-8.72-44.07-18.46-67.04-23.54-39.51-8.75-78.3-2.99-116.1 12.02-23.74 9.42-48.05 18.04-72.83 24.05-30.15 7.3-58.87-1.16-82.04-20.55-22.47-18.8-43.76-39.82-62.1-62.64C162.62 847.16 117.9 743.11 101 627.56c-11.53-78.8-8.55-156.85 27.49-229.58 46.46-93.73 121.71-145.9 228.21-147.83 28.41-.51 54.99 9.28 81.27 19.13 18.66 7 37.24 14.2 56.05 20.74 16.44 5.71 33.15 5.73 49.64-.3 26.98-9.86 53.83-20.1 80.92-29.67 95.15-33.62 210.58-.68 269.54 77.98 2.47 3.29 4.76 6.72 7.15 10.1z" />
<path d="M511.4 237.3c-3.66-25.96-1.37-49.13 5.84-71.5 28.35-88.02 87.72-142.73 178-163.33 21.5-4.91 21.93-4.12 21.9 17.66-.1 97.15-72.17 191.02-163.46 212.07-13.54 3.12-27.73 3.42-42.28 5.1z" />
</g>
</svg>
</.button>
</div>
<.separator text="OR" class="my-6" />
<.form for={@form} id="login_form" action={~p"/users/log_in"} phx-update="ignore" class="flex flex-col gap-y-6">
<.input field={@form[:email]} type="email" label="Email" placeholder="Enter your email..." />
<.input field={@form[:password]} type="password" label="Password" placeholder="*********" />
<.label class="flex items-center justify-between">
<.switch field={@form[:remember_me]} label="Remember me" />
<.link
href={~p"/users/reset_password"}
class="text-sm text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
>
Forgot your password?
</.link>
</.label>
<.button type="submit" variant="solid" phx-disable-with="Signing in..." class="w-full" size="lg">
Sign in
</.button>
<p class="text-center text-sm text-zinc-500 dark:text-zinc-400">
Don't have an account?
<.link
navigate={~p"/users/register"}
class="font-medium text-zinc-700 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
>
Sign up
</.link>
</p>
</.form>
</div>
</div>
Grayscale sign in
Fullscreen
Copy
<div class="flex flex-1 flex-col items-center justify-center py-4 gap-y-6">
<div class="w-full max-w-sm border rounded-lg shadow-lg bg-zinc-100 dark:bg-zinc-800 dark:border-white/10">
<div class="bg-white dark:bg-zinc-900 p-10 rounded-lg border dark:border-white/10 -m-px">
<h1 class="text-center text-xl/10 font-bold text-zinc-800 dark:text-zinc-100">
Sign in to Acme Inc.
</h1>
<p class="text-center text-sm text-zinc-500 dark:text-zinc-400">
Welcome back! Please sign in to continue.
</p>
<div class="flex gap-x-2 mt-6 *:flex-1">
<.button as="link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" fill="currentColor">
<path d="M12.48 10.92v3.28h7.84a6.95 6.95 0 0 1-1.79 4.13 8.03 8.03 0 0 1-6.05 2.4c-4.83 0-8.6-3.89-8.6-8.72a8.6 8.6 0 0 1 14.5-6.37l2.31-2.3A11.33 11.33 0 0 0 12.48 0C5.87 0 .31 5.39.31 12s5.56 12 12.17 12c3.57 0 6.27-1.17 8.37-3.36 2.16-2.16 2.84-5.21 2.84-7.67 0-.76-.05-1.46-.17-2.05H12.48z" />
</svg>
Google
</.button>
<.button as="link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" fill="currentColor">
<path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.07 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3" />
</svg>
Github
</.button>
</div>
<.separator text="or" class="my-6" />
<.form for={@form} id="login_form" action={~p"/users/log_in"} phx-update="ignore" class="flex flex-col gap-y-6">
<.input field={@form[:email]} type="email" label="Email" />
<.input field={@form[:password]} type="password" label="Password" />
<.label class="flex items-center gap-3">
<.switch field={@form[:remember_me]} /> Keep me signed in
</.label>
<.button type="submit" variant="solid" phx-disable-with="Signing in..." class="w-full">
Sign in
</.button>
</.form>
</div>
<p class="text-center p-4 text-sm">
<.link
href={~p"/users/reset_password"}
class="font-medium text-zinc-600 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
>
Forgot your password?
</.link>
</p>
</div>
</div>
Grayscale forgot password
Fullscreen
Copy
<div class="flex flex-1 flex-col items-center justify-center py-10 gap-y-6">
<div class="w-full max-w-sm border rounded-lg shadow-lg bg-zinc-100">
<div class="bg-white p-10 rounded-lg border -m-px">
<h1 class="text-center text-xl/10 font-bold text-zinc-800">Forgot your password?</h1>
<p class="text-center text-sm text-zinc-500">
Enter your email address and we will send you instructions to reset your password.
</p>
<.form for={@form} id="reset_password_form" phx-submit="send_email" class="flex flex-col gap-y-3 mt-6">
<.input field={@form[:email]} type="email" placeholder="Email" label="Email" required />
<.button variant="solid" type="submit" phx-disable-with="Sending..." class="w-full">
Send reset instructions
</.button>
</.form>
</div>
<p class="text-center p-4 text-sm">
<.link href={~p"/users/log_in"} class="font-medium text-zinc-600 hover:text-zinc-800">
Sign in
</.link>
</p>
</div>
</div>
Clean grayscale sign up
Fullscreen
Copy
<div class="flex flex-1 flex-col items-center justify-center py-10 gap-y-6">
<img src={~p"/images/logo.svg"} alt="Fluxon" class="h-14" />
<div class="w-full max-w-sm">
<h1 class="text-center text-xl/10 font-bold text-zinc-800">Create an account</h1>
<p class="text-center text-sm text-zinc-500">Welcome! Please sign up to continue.</p>
<.form
for={@form}
id="registration_form"
phx-submit="save"
phx-change="validate"
phx-trigger-action={@trigger_submit}
action={~p"/users/log_in?_action=registered"}
method="post"
class="flex flex-col gap-y-6 mt-6"
>
<.alert :if={@check_errors} variant="error">
Oops, something went wrong! Please check the errors below.
</.alert>
<.input field={@form[:email]} type="email" label="Email" />
<.input field={@form[:password]} type="password" label="Password" />
<.button type="submit" variant="solid" phx-disable-with="Signing up..." class="w-full">
Sign up
</.button>
</.form>
<.separator class="my-6" text="or" />
<div class="flex flex-col gap-y-3">
<.button as="link" href="" type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">
<path d="M12.48 10.92v3.28h7.84a6.95 6.95 0 0 1-1.79 4.13 8.03 8.03 0 0 1-6.05 2.4c-4.83 0-8.6-3.89-8.6-8.72a8.6 8.6 0 0 1 14.5-6.37l2.31-2.3A11.33 11.33 0 0 0 12.48 0C5.87 0 .31 5.39.31 12s5.56 12 12.17 12c3.57 0 6.27-1.17 8.37-3.36 2.16-2.16 2.84-5.21 2.84-7.67 0-.76-.05-1.46-.17-2.05H12.48z" />
</svg>
Continue with Google
</.button>
<.button as="link" href="" type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon">
<path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.07 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3" />
</svg>
Continue with Github
</.button>
</div>
</div>
<p class="text-center text-sm text-zinc-600">
Already have an account?
<.link href={~p"/users/log_in"} class="font-medium text-zinc-600 hover:text-zinc-800">
Sign in
</.link>
</p>
</div>