From 41887672eac5428ad73b9cca63a222363de9a622 Mon Sep 17 00:00:00 2001
From: Harshad Sharma <harshad@sharma.io>
Date: Mon, 13 May 2024 15:55:37 +0530
Subject: [PATCH] Port login_live to Liliform

---
 .../components/layouts/app.html.heex          | 202 +++++++++---------
 lib/freedive_web/components/liliform.ex       |  24 ++-
 lib/freedive_web/live/user_login_live.ex      |  65 +++---
 3 files changed, 161 insertions(+), 130 deletions(-)

diff --git a/lib/freedive_web/components/layouts/app.html.heex b/lib/freedive_web/components/layouts/app.html.heex
index 9f460af..420dc72 100644
--- a/lib/freedive_web/components/layouts/app.html.heex
+++ b/lib/freedive_web/components/layouts/app.html.heex
@@ -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>
diff --git a/lib/freedive_web/components/liliform.ex b/lib/freedive_web/components/liliform.ex
index 52f369d..78d3840 100644
--- a/lib/freedive_web/components/liliform.ex
+++ b/lib/freedive_web/components/liliform.ex
@@ -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>
diff --git a/lib/freedive_web/live/user_login_live.ex b/lib/freedive_web/live/user_login_live.ex
index 6d6d00f..705b667 100644
--- a/lib/freedive_web/live/user_login_live.ex
+++ b/lib/freedive_web/live/user_login_live.ex
@@ -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