feat: redesign auth UI with dark Frontman branding and client-side account settings (#357)

Author: itayadler

.changeset/redesign-auth-ui.md

@@ -0,0 +1,5 @@
+---
+"@frontman/client": patch
+---
+
+Redesign authentication UI with dark Frontman branding. The server-side login page now features a dark theme with the Frontman logo and GitHub/Google OAuth buttons only (no email/password forms). Registration routes redirect to login. The root URL redirects to the sign-in page in dev and to frontman.sh in production. The client-side settings modal General tab now shows the logged-in user's email, avatar, and a sign-out button. The sign-out flow preserves a `return_to` URL so users are redirected back to the client app after re-authenticating.

apps/frontman_server/assets/js/app.js

@@ -40,6 +40,11 @@ window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
 // connect if there are any LiveViews on the page
 liveSocket.connect()
 
+// Auto-submit forms marked with data-auto-submit (used by the logout interstitial)
+document.querySelectorAll("form[data-auto-submit]").forEach(form => {
+  form.requestSubmit()
+})
+
 // expose liveSocket on window for web console debug logs and latency simulation:
 // >> liveSocket.enableDebug()
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session

apps/frontman_server/lib/frontman_server_web/components/core_components.ex

@@ -41,13 +41,13 @@ defmodule FrontmanServerWeb.CoreComponents do
       <.flash kind={:info} flash={@flash} />
       <.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>
   """
-  attr :id, :string, doc: "the optional id of flash container"
-  attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
-  attr :title, :string, default: nil
-  attr :kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup"
-  attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"
+  attr(:id, :string, doc: "the optional id of flash container")
+  attr(:flash, :map, default: %{}, doc: "the map of flash messages to display")
+  attr(:title, :string, default: nil)
+  attr(:kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup")
+  attr(:rest, :global, doc: "the arbitrary HTML attributes to add to the flash container")
 
-  slot :inner_block, doc: "the optional inner block that renders the flash message"
+  slot(:inner_block, doc: "the optional inner block that renders the flash message")
 
   def flash(assigns) do
     assigns = assign_new(assigns, :id, fn -> "flash-#{assigns.kind}" end)
@@ -90,10 +90,10 @@ defmodule FrontmanServerWeb.CoreComponents do
       <.button phx-click="go" variant="primary">Send!</.button>
       <.button navigate={~p"/"}>Home</.button>
   """
-  attr :rest, :global, include: ~w(href navigate patch method download name value disabled)
-  attr :class, :string
-  attr :variant, :string, values: ~w(primary)
-  slot :inner_block, required: true
+  attr(:rest, :global, include: ~w(href navigate patch method download name value disabled))
+  attr(:class, :string)
+  attr(:variant, :string, values: ~w(primary))
+  slot(:inner_block, required: true)
 
   def button(%{rest: rest} = assigns) do
     variants = %{"primary" => "btn-primary", nil => "btn-primary btn-soft"}
@@ -144,30 +144,33 @@ defmodule FrontmanServerWeb.CoreComponents do
       <.input field={@form[:email]} type="email" />
       <.input name="my-input" errors={["oh no!"]} />
   """
-  attr :id, :any, default: nil
-  attr :name, :any
-  attr :label, :string, default: nil
-  attr :value, :any
+  attr(:id, :any, default: nil)
+  attr(:name, :any)
+  attr(:label, :string, default: nil)
+  attr(:value, :any)
 
-  attr :type, :string,
+  attr(:type, :string,
     default: "text",
     values: ~w(checkbox color date datetime-local email file month number password
                search select tel text textarea time url week)
+  )
 
-  attr :field, Phoenix.HTML.FormField,
+  attr(:field, Phoenix.HTML.FormField,
     doc: "a form field struct retrieved from the form, for example: @form[:email]"
+  )
 
-  attr :errors, :list, default: []
-  attr :checked, :boolean, doc: "the checked flag for checkbox inputs"
-  attr :prompt, :string, default: nil, doc: "the prompt for select inputs"
-  attr :options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2"
-  attr :multiple, :boolean, default: false, doc: "the multiple flag for select inputs"
-  attr :class, :string, default: nil, doc: "the input class to use over defaults"
-  attr :error_class, :string, default: nil, doc: "the input error class to use over defaults"
+  attr(:errors, :list, default: [])
+  attr(:checked, :boolean, doc: "the checked flag for checkbox inputs")
+  attr(:prompt, :string, default: nil, doc: "the prompt for select inputs")
+  attr(:options, :list, doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2")
+  attr(:multiple, :boolean, default: false, doc: "the multiple flag for select inputs")
+  attr(:class, :string, default: nil, doc: "the input class to use over defaults")
+  attr(:error_class, :string, default: nil, doc: "the input error class to use over defaults")
 
-  attr :rest, :global,
+  attr(:rest, :global,
     include: ~w(accept autocomplete capture cols disabled form list max maxlength min minlength
                 multiple pattern placeholder readonly required rows size step)
+  )
 
   def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
     errors = if Phoenix.Component.used_input?(field), do: field.errors, else: []
@@ -284,9 +287,9 @@ defmodule FrontmanServerWeb.CoreComponents do
   @doc """
   Renders a header with title.
   """
-  slot :inner_block, required: true
-  slot :subtitle
-  slot :actions
+  slot(:inner_block, required: true)
+  slot(:subtitle)
+  slot(:actions)
 
   def header(assigns) do
     ~H"""
@@ -314,20 +317,21 @@ defmodule FrontmanServerWeb.CoreComponents do
         <:col :let={user} label="username">{user.username}</:col>
       </.table>
   """
-  attr :id, :string, required: true
-  attr :rows, :list, required: true
-  attr :row_id, :any, default: nil, doc: "the function for generating the row id"
-  attr :row_click, :any, default: nil, doc: "the function for handling phx-click on each row"
+  attr(:id, :string, required: true)
+  attr(:rows, :list, required: true)
+  attr(:row_id, :any, default: nil, doc: "the function for generating the row id")
+  attr(:row_click, :any, default: nil, doc: "the function for handling phx-click on each row")
 
-  attr :row_item, :any,
+  attr(:row_item, :any,
     default: &Function.identity/1,
     doc: "the function for mapping each row before calling the :col and :action slots"
+  )
 
   slot :col, required: true do
-    attr :label, :string
+    attr(:label, :string)
   end
 
-  slot :action, doc: "the slot for showing user actions in the last table column"
+  slot(:action, doc: "the slot for showing user actions in the last table column")
 
   def table(assigns) do
     assigns =
@@ -378,7 +382,7 @@ defmodule FrontmanServerWeb.CoreComponents do
       </.list>
   """
   slot :item, required: true do
-    attr :title, :string, required: true
+    attr(:title, :string, required: true)
   end
 
   def list(assigns) do
@@ -412,8 +416,8 @@ defmodule FrontmanServerWeb.CoreComponents do
       <.icon name="hero-x-mark" />
       <.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />
   """
-  attr :name, :string, required: true
-  attr :class, :string, default: "size-4"
+  attr(:name, :string, required: true)
+  attr(:class, :string, default: "size-4")
 
   def icon(%{name: "hero-" <> _} = assigns) do
     ~H"""
@@ -475,35 +479,49 @@ defmodule FrontmanServerWeb.CoreComponents do
   @doc """
   Renders a connected account row with connect/disconnect actions.
   """
-  attr :provider, :string, required: true
-  attr :label, :string, required: true
-  attr :identities, :list, required: true
+  attr(:provider, :string, required: true)
+  attr(:label, :string, required: true)
+  attr(:identities, :list, required: true)
 
-  slot :inner_block, required: true, doc: "the icon slot"
+  slot(:inner_block, required: true, doc: "the icon slot")
 
   def connected_account(assigns) do
     identity = Enum.find(assigns.identities, &(&1.provider == assigns.provider))
     assigns = assign(assigns, :identity, identity)
 
     ~H"""
-    <div class="flex items-center justify-between p-4 border border-base-300 rounded-lg">
+    <div class="flex items-center justify-between px-5 py-4 border border-white/[0.08] bg-white/[0.02] rounded-lg">
       <div class="flex items-center gap-3">
-        {render_slot(@inner_block)}
+        <span class="text-white/70">{render_slot(@inner_block)}</span>
         <div>
-          <p class="font-medium">{@label}</p>
-          <p :if={@identity} class="text-sm text-base-content/70">{@identity.provider_email}</p>
-          <p :if={!@identity} class="text-sm text-base-content/70">Not connected</p>
+          <p class="text-sm font-medium text-white/90">{@label}</p>
+          <p :if={@identity} class="text-xs text-white/50">{@identity.provider_email}</p>
+          <p :if={!@identity} class="text-xs text-white/40">Not connected</p>
         </div>
       </div>
       <.link
         :if={@identity}
         href={~p"/auth/#{@provider}/unlink"}
         method="delete"
-        class="btn btn-outline btn-sm"
+        class={[
+          "rounded-lg border border-white/[0.12] bg-white/[0.04]",
+          "px-3 py-1.5 text-xs font-medium text-white/70",
+          "transition-all duration-150",
+          "hover:bg-red-500/10 hover:border-red-500/30 hover:text-red-400"
+        ]}
       >
         Disconnect
       </.link>
-      <.link :if={!@identity} href={~p"/auth/#{@provider}/link"} class="btn btn-outline btn-sm">
+      <.link
+        :if={!@identity}
+        href={~p"/auth/#{@provider}/link"}
+        class={[
+          "rounded-lg border border-white/[0.12] bg-white/[0.04]",
+          "px-3 py-1.5 text-xs font-medium text-white/70",
+          "transition-all duration-150",
+          "hover:bg-white/[0.08] hover:border-white/[0.18] hover:text-white"
+        ]}
+      >
         Connect
       </.link>
     </div>

apps/frontman_server/lib/frontman_server_web/components/layouts.ex

@@ -9,7 +9,7 @@ defmodule FrontmanServerWeb.Layouts do
   # The default root.html.heex file contains the HTML
   # skeleton of your application, namely HTML headers
   # and other static content.
-  embed_templates "layouts/*"
+  embed_templates("layouts/*")
 
   @doc """
   Renders your app layout.
@@ -25,48 +25,39 @@ defmodule FrontmanServerWeb.Layouts do
       </Layouts.app>
 
   """
-  attr :flash, :map, required: true, doc: "the map of flash messages"
+  attr(:flash, :map, required: true, doc: "the map of flash messages")
 
-  attr :current_scope, :map,
+  attr(:current_scope, :map,
     default: nil,
     doc: "the current [scope](https://hexdocs.pm/phoenix/scopes.html)"
+  )
 
-  slot :inner_block, required: true
+  slot(:inner_block, required: true)
 
   def app(assigns) do
     ~H"""
-    <header class="navbar px-4 sm:px-6 lg:px-8">
-      <div class="flex-1">
-        <a href="/" class="flex-1 flex w-fit items-center gap-2">
-          <img src={~p"/images/logo.svg"} width="36" />
-          <span class="text-sm font-semibold">v{Application.spec(:phoenix, :vsn)}</span>
+    <div class="min-h-screen flex flex-col bg-[#0a0a0a]">
+      <header class="flex items-center justify-between px-6 py-4 border-b border-white/[0.08]">
+        <a href="/" class="flex items-center gap-2.5 group">
+          <img src={~p"/images/frontman-logo.svg"} width="28" height="28" alt="Frontman" />
+          <span class="text-[15px] font-semibold text-white/90 tracking-tight group-hover:text-white transition-colors">
+            Frontman
+          </span>
         </a>
-      </div>
-      <div class="flex-none">
-        <ul class="flex flex-column px-1 space-x-4 items-center">
-          <li>
-            <a href="https://phoenixframework.org/" class="btn btn-ghost">Website</a>
-          </li>
-          <li>
-            <a href="https://github.com/phoenixframework/phoenix" class="btn btn-ghost">GitHub</a>
-          </li>
-          <li>
-            <.theme_toggle />
-          </li>
-          <li>
-            <a href="https://hexdocs.pm/phoenix/overview.html" class="btn btn-primary">
-              Get Started <span aria-hidden="true">&rarr;</span>
-            </a>
-          </li>
-        </ul>
-      </div>
-    </header>
-
-    <main class="px-4 py-20 sm:px-6 lg:px-8">
-      <div class="mx-auto max-w-2xl space-y-4">
-        {render_slot(@inner_block)}
-      </div>
-    </main>
+      </header>
+
+      <main class="flex-1 flex items-center justify-center px-4 py-12">
+        <div class="w-full max-w-sm space-y-6">
+          {render_slot(@inner_block)}
+        </div>
+      </main>
+
+      <footer class="py-6 text-center">
+        <p class="text-xs text-white/30">
+          &copy; {DateTime.utc_now().year} Frontman. All rights reserved.
+        </p>
+      </footer>
+    </div>
 
     <.flash_group flash={@flash} />
     """
@@ -79,8 +70,8 @@ defmodule FrontmanServerWeb.Layouts do
 
       <.flash_group flash={@flash} />
   """
-  attr :flash, :map, required: true, doc: "the map of flash messages"
-  attr :id, :string, default: "flash-group", doc: "the optional id of flash container"
+  attr(:flash, :map, required: true, doc: "the map of flash messages")
+  attr(:id, :string, default: "flash-group", doc: "the optional id of flash container")
 
   def flash_group(assigns) do
     ~H"""
@@ -114,41 +105,4 @@ defmodule FrontmanServerWeb.Layouts do
     </div>
     """
   end
-
-  @doc """
-  Provides dark vs light theme toggle based on themes defined in app.css.
-
-  See <head> in root.html.heex which applies the theme before page load.
-  """
-  def theme_toggle(assigns) do
-    ~H"""
-    <div class="card relative flex flex-row items-center border-2 border-base-300 bg-base-300 rounded-full">
-      <div class="absolute w-1/3 h-full rounded-full border-1 border-base-200 bg-base-100 brightness-200 left-0 [[data-theme=light]_&]:left-1/3 [[data-theme=dark]_&]:left-2/3 transition-[left]" />
-
-      <button
-        class="flex p-2 cursor-pointer w-1/3"
-        phx-click={JS.dispatch("phx:set-theme")}
-        data-phx-theme="system"
-      >
-        <.icon name="hero-computer-desktop-micro" class="size-4 opacity-75 hover:opacity-100" />
-      </button>
-
-      <button
-        class="flex p-2 cursor-pointer w-1/3"
-        phx-click={JS.dispatch("phx:set-theme")}
-        data-phx-theme="light"
-      >
-        <.icon name="hero-sun-micro" class="size-4 opacity-75 hover:opacity-100" />
-      </button>
-
-      <button
-        class="flex p-2 cursor-pointer w-1/3"
-        phx-click={JS.dispatch("phx:set-theme")}
-        data-phx-theme="dark"
-      >
-        <.icon name="hero-moon-micro" class="size-4 opacity-75 hover:opacity-100" />
-      </button>
-    </div>
-    """
-  end
 end