Port login_live to Liliform
This commit is contained in:
parent
6669187f25
commit
41887672ea
3 changed files with 161 additions and 130 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue