forked from hiway/freedive
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">
|
<main class="container">
|
||||||
<div class="mx-auto max-w-2xl">
|
<.flash_group flash={@flash} />
|
||||||
<.flash_group flash={@flash} />
|
<.navbar is-fixed-top>
|
||||||
<.navbar is-fixed-top>
|
<.navbar_brand>
|
||||||
<.navbar_brand>
|
<.navbar_item>
|
||||||
<.navbar_item>
|
<.title is-4>
|
||||||
<.title is-4>
|
Freedive
|
||||||
Freedive
|
</.title>
|
||||||
</.title>
|
</.navbar_item>
|
||||||
</.navbar_item>
|
|
||||||
|
|
||||||
<.navbar_burger target="navbar_top" />
|
<.navbar_burger target="navbar_top" />
|
||||||
</.navbar_brand>
|
</.navbar_brand>
|
||||||
|
|
||||||
<.navbar_menu id="navbar_top">
|
<.navbar_menu id="navbar_top">
|
||||||
<%= if @current_user do %>
|
<%= if @current_user do %>
|
||||||
<.navbar_start>
|
<.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_item has-dropdown is-hoverable>
|
<.navbar_item has-dropdown is-hoverable>
|
||||||
<.navbar_link>
|
<.navbar_link>
|
||||||
Account
|
Compute
|
||||||
</.navbar_link>
|
</.navbar_link>
|
||||||
|
|
||||||
<.navbar_dropdown>
|
<.navbar_dropdown>
|
||||||
<%= if @current_user do %>
|
<.navbar_item>
|
||||||
<.navbar_item>
|
<.link>Bastille Jails</.link>
|
||||||
<.link href={~p"/users/settings"}>
|
</.navbar_item>
|
||||||
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_dropdown>
|
||||||
</.navbar_item>
|
</.navbar_item>
|
||||||
</.navbar_end>
|
|
||||||
</.navbar_menu>
|
<.navbar_item has-dropdown is-hoverable>
|
||||||
</.navbar>
|
<.navbar_link>
|
||||||
<%= @inner_content %>
|
Storage
|
||||||
</div>
|
</.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>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -248,6 +248,28 @@ defmodule Liliform.Components do
|
||||||
"""
|
"""
|
||||||
end
|
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 """
|
@doc """
|
||||||
Renders container.
|
Renders container.
|
||||||
"""
|
"""
|
||||||
|
|
@ -956,7 +978,7 @@ defmodule Liliform.Components do
|
||||||
<.form :let={f} for={@for} as={@as} {@rest}>
|
<.form :let={f} for={@for} as={@as} {@rest}>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<%= render_slot(@inner_block, f) %>
|
<%= 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) %>
|
<%= render_slot(action, f) %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -3,35 +3,46 @@ defmodule FreediveWeb.UserLoginLive do
|
||||||
|
|
||||||
def render(assigns) do
|
def render(assigns) do
|
||||||
~H"""
|
~H"""
|
||||||
<div class="mx-auto max-w-sm">
|
<.hero>
|
||||||
<.header class="text-center">
|
<.container>
|
||||||
Log in to account
|
<.block>
|
||||||
<:subtitle>
|
<.title is-4>
|
||||||
Don't have an account?
|
Log in to account
|
||||||
<.link navigate={~p"/users/register"} class="font-semibold text-brand hover:underline">
|
</.title>
|
||||||
Sign up
|
<.subtitle is-6 has-text-grey>
|
||||||
</.link>
|
freedive@hostname
|
||||||
for an account now.
|
</.subtitle>
|
||||||
</:subtitle>
|
</.block>
|
||||||
</.header>
|
|
||||||
|
|
||||||
<.simple_form for={@form} id="login_form" action={~p"/users/log_in"} phx-update="ignore">
|
<.column is-6-desktop>
|
||||||
<.input field={@form[:email]} type="email" label="Email" required />
|
<.simple_form for={@form} id="login_form" action={~p"/users/log_in"} phx-update="ignore">
|
||||||
<.input field={@form[:password]} type="password" label="Password" required />
|
<.input field={@form[:email]} type="email" label="Email" required />
|
||||||
|
<.input field={@form[:password]} type="password" label="Password" required />
|
||||||
|
|
||||||
<:actions>
|
<:actions>
|
||||||
<.input field={@form[:remember_me]} type="checkbox" label="Keep me logged in" />
|
<.input field={@form[:remember_me]} type="checkbox" label="Keep me logged in" />
|
||||||
<.link href={~p"/users/reset_password"} class="text-sm font-semibold">
|
<.link href={~p"/users/reset_password"} class="text-sm font-semibold">
|
||||||
Forgot your password?
|
Forgot your password?
|
||||||
</.link>
|
</.link>
|
||||||
</:actions>
|
</:actions>
|
||||||
<:actions>
|
<:actions>
|
||||||
<.button phx-disable-with="Logging in..." class="w-full" type="submit">
|
<.button type="submit" phx-disable-with="Logging in..." is-info>
|
||||||
Log in <span aria-hidden="true">→</span>
|
Log in <span aria-hidden="true">→</span>
|
||||||
</.button>
|
</.button>
|
||||||
</:actions>
|
</:actions>
|
||||||
</.simple_form>
|
<:actions>
|
||||||
</div>
|
<.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
|
end
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue