Port login_live to Liliform

lib/freedive_web/components/layouts/app.html.heex

@@ -1,5 +1,4 @@
-<main class="px-4 py-20 sm:px-6 lg:px-8">
-  <div class="mx-auto max-w-2xl">
+<main class="container">
   <.flash_group flash={@flash} />
   <.navbar is-fixed-top>
     <.navbar_brand>
@@ -108,5 +107,4 @@
     </.navbar_menu>
   </.navbar>
   <%= @inner_content %>
-  </div>
 </main>

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>

lib/freedive_web/live/user_login_live.ex

@@ -3,18 +3,18 @@ defmodule FreediveWeb.UserLoginLive do
 
   def render(assigns) do
     ~H"""
-    <div class="mx-auto max-w-sm">
-      <.header class="text-center">
+    <.hero>
+      <.container>
+        <.block>
+          <.title is-4>
             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>
+          </.title>
+          <.subtitle is-6 has-text-grey>
+            freedive@hostname
+          </.subtitle>
+        </.block>
 
+        <.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 />
@@ -26,12 +26,23 @@ defmodule FreediveWeb.UserLoginLive do
               </.link>
             </: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>
               </.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>
-    </div>
+        </.column>
+      </.container>
+    </.hero>
     """
   end