Port login_live to Liliform

This commit is contained in:
Harshad Sharma 2024-05-13 15:55:37 +05:30
parent 6669187f25
commit 41887672ea
3 changed files with 161 additions and 130 deletions

View file

@ -1,112 +1,110 @@
<main class="px-4 py-20 sm:px-6 lg:px-8">
<div class="mx-auto max-w-2xl">
<.flash_group flash={@flash} />
<.navbar is-fixed-top>
<.navbar_brand>
<.navbar_item>
<.title is-4>
Freedive
</.title>
</.navbar_item>
<main class="container">
<.flash_group flash={@flash} />
<.navbar is-fixed-top>
<.navbar_brand>
<.navbar_item>
<.title is-4>
Freedive
</.title>
</.navbar_item>
<.navbar_burger target="navbar_top" />
</.navbar_brand>
<.navbar_burger target="navbar_top" />
</.navbar_brand>
<.navbar_menu id="navbar_top">
<%= if @current_user do %>
<.navbar_start>
<.navbar_item has-dropdown is-hoverable>
<.navbar_link>
Compute
</.navbar_link>
<.navbar_dropdown>
<.navbar_item>
<.link>Bastille Jails</.link>
</.navbar_item>
</.navbar_dropdown>
</.navbar_item>
<.navbar_item has-dropdown is-hoverable>
<.navbar_link>
Storage
</.navbar_link>
<.navbar_dropdown>
<.navbar_item>
<.link>Shared Folders</.link>
</.navbar_item>
</.navbar_dropdown>
</.navbar_item>
<.navbar_item has-dropdown is-hoverable>
<.navbar_link>
Network
</.navbar_link>
<.navbar_dropdown>
<.navbar_item>
<.link>Private Network</.link>
</.navbar_item>
</.navbar_dropdown>
</.navbar_item>
</.navbar_start>
<% end %>
<.navbar_end>
<%= if @current_user do %>
<.navbar_item>
<%= @current_user.email %>
</.navbar_item>
<.navbar_item has-dropdown is-hoverable>
<.navbar_link>
System
</.navbar_link>
<.navbar_dropdown>
<.navbar_item>
<.link>Software Updates</.link>
</.navbar_item>
<.navbar_divider />
<.navbar_item>
<.link>Packages</.link>
</.navbar_item>
<.navbar_item>
<.link>Services</.link>
</.navbar_item>
</.navbar_dropdown>
</.navbar_item>
<% end %>
<.navbar_menu id="navbar_top">
<%= if @current_user do %>
<.navbar_start>
<.navbar_item has-dropdown is-hoverable>
<.navbar_link>
Account
Compute
</.navbar_link>
<.navbar_dropdown>
<%= if @current_user do %>
<.navbar_item>
<.link href={~p"/users/settings"}>
Settings
</.link>
</.navbar_item>
<.navbar_item>
<.link href={~p"/users/log_out"} method="delete">
Log out
</.link>
</.navbar_item>
<% else %>
<.navbar_item>
<.link href={~p"/users/log_in"}>
Log in
</.link>
</.navbar_item>
<% end %>
<.navbar_item>
<.link>Bastille Jails</.link>
</.navbar_item>
</.navbar_dropdown>
</.navbar_item>
</.navbar_end>
</.navbar_menu>
</.navbar>
<%= @inner_content %>
</div>
<.navbar_item has-dropdown is-hoverable>
<.navbar_link>
Storage
</.navbar_link>
<.navbar_dropdown>
<.navbar_item>
<.link>Shared Folders</.link>
</.navbar_item>
</.navbar_dropdown>
</.navbar_item>
<.navbar_item has-dropdown is-hoverable>
<.navbar_link>
Network
</.navbar_link>
<.navbar_dropdown>
<.navbar_item>
<.link>Private Network</.link>
</.navbar_item>
</.navbar_dropdown>
</.navbar_item>
</.navbar_start>
<% end %>
<.navbar_end>
<%= if @current_user do %>
<.navbar_item>
<%= @current_user.email %>
</.navbar_item>
<.navbar_item has-dropdown is-hoverable>
<.navbar_link>
System
</.navbar_link>
<.navbar_dropdown>
<.navbar_item>
<.link>Software Updates</.link>
</.navbar_item>
<.navbar_divider />
<.navbar_item>
<.link>Packages</.link>
</.navbar_item>
<.navbar_item>
<.link>Services</.link>
</.navbar_item>
</.navbar_dropdown>
</.navbar_item>
<% end %>
<.navbar_item has-dropdown is-hoverable>
<.navbar_link>
Account
</.navbar_link>
<.navbar_dropdown>
<%= if @current_user do %>
<.navbar_item>
<.link href={~p"/users/settings"}>
Settings
</.link>
</.navbar_item>
<.navbar_item>
<.link href={~p"/users/log_out"} method="delete">
Log out
</.link>
</.navbar_item>
<% else %>
<.navbar_item>
<.link href={~p"/users/log_in"}>
Log in
</.link>
</.navbar_item>
<% end %>
</.navbar_dropdown>
</.navbar_item>
</.navbar_end>
</.navbar_menu>
</.navbar>
<%= @inner_content %>
</main>

View file

@ -248,6 +248,28 @@ defmodule Liliform.Components do
"""
end
@doc """
Renders block.
"""
attr :class, :string, default: nil, doc: "the optional class of the block"
attr :rest, :global, doc: "the arbitrary HTML attributes to add to the block"
slot :inner_block, required: true, doc: "the inner block that renders the block content"
def block(assigns) do
assigns =
assigns
|> extend_class("block")
|> set_phx_attributes()
|> set_bulma_classes()
~H"""
<div {@heex_class} {@heex_phx_attributes} {@rest}>
<%= render_slot(@inner_block) %>
</div>
"""
end
@doc """
Renders container.
"""
@ -956,7 +978,7 @@ defmodule Liliform.Components do
<.form :let={f} for={@for} as={@as} {@rest}>
<div class="box">
<%= render_slot(@inner_block, f) %>
<div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
<div :for={action <- @actions} class="mt-4">
<%= render_slot(action, f) %>
</div>
</div>

View file

@ -3,35 +3,46 @@ defmodule FreediveWeb.UserLoginLive do
def render(assigns) do
~H"""
<div class="mx-auto max-w-sm">
<.header class="text-center">
Log in to account
<:subtitle>
Don't have an account?
<.link navigate={~p"/users/register"} class="font-semibold text-brand hover:underline">
Sign up
</.link>
for an account now.
</:subtitle>
</.header>
<.hero>
<.container>
<.block>
<.title is-4>
Log in to account
</.title>
<.subtitle is-6 has-text-grey>
freedive@hostname
</.subtitle>
</.block>
<.simple_form for={@form} id="login_form" action={~p"/users/log_in"} phx-update="ignore">
<.input field={@form[:email]} type="email" label="Email" required />
<.input field={@form[:password]} type="password" label="Password" required />
<.column is-6-desktop>
<.simple_form for={@form} id="login_form" action={~p"/users/log_in"} phx-update="ignore">
<.input field={@form[:email]} type="email" label="Email" required />
<.input field={@form[:password]} type="password" label="Password" required />
<:actions>
<.input field={@form[:remember_me]} type="checkbox" label="Keep me logged in" />
<.link href={~p"/users/reset_password"} class="text-sm font-semibold">
Forgot your password?
</.link>
</:actions>
<:actions>
<.button phx-disable-with="Logging in..." class="w-full" type="submit">
Log in <span aria-hidden="true"></span>
</.button>
</:actions>
</.simple_form>
</div>
<:actions>
<.input field={@form[:remember_me]} type="checkbox" label="Keep me logged in" />
<.link href={~p"/users/reset_password"} class="text-sm font-semibold">
Forgot your password?
</.link>
</:actions>
<:actions>
<.button type="submit" phx-disable-with="Logging in..." is-info>
Log in <span aria-hidden="true"></span>
</.button>
</:actions>
<:actions>
<.block>
Don't have an account?
<.link navigate={~p"/users/register"} class="font-semibold text-brand hover:underline">
Sign up
</.link>
for an account now.
</.block>
</:actions>
</.simple_form>
</.column>
</.container>
</.hero>
"""
end