improve email settings progressive enhancement and admin layout
Some checks failed
deploy / deploy (push) Has been cancelled

- semantic HTML: step numbers inside h2, strong provider names, details
  for adapter configs, strong error messages, fieldset drawer toggle hidden
- inline field errors via flash for no-JS controller fallback
- single form POST button for test email (works with and without JS)
- admin sidebar: remove brand/view-shop, move user email to footer nav
- replace inline style with .admin-setup-step-spaced class
- clean up unused CSS (.admin-brand, .admin-sidebar-header, etc.)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-03-05 15:29:05 +00:00
parent 5dee2ae0be
commit c6636cab65
8 changed files with 91 additions and 126 deletions

View File

@@ -11,7 +11,11 @@ defmodule BerrypodWeb.Admin.EmailSettings do
{current_adapter, _current_values} = Mailer.current_config()
saved_adapter = Settings.get_setting("email_adapter")
adapter_key = current_adapter || saved_adapter
# Controller fallback passes errors via flash after failed validation
flash_adapter = Phoenix.Flash.get(socket.assigns.flash, :error_adapter)
flash_errors = Phoenix.Flash.get(socket.assigns.flash, :field_errors) || %{}
adapter_key = flash_adapter || current_adapter || saved_adapter
grouped = Adapters.grouped()
all_adapters = Adapters.all()
all_values = load_all_adapter_values()
@@ -32,7 +36,7 @@ defmodule BerrypodWeb.Admin.EmailSettings do
|> assign(:test_error, nil)
|> assign(:test_retryable, false)
|> assign(:from_checklist, false)
|> assign(:field_errors, %{})
|> assign(:field_errors, flash_errors)
|> assign(:form, to_form(%{}, as: :email))}
end
@@ -188,10 +192,9 @@ defmodule BerrypodWeb.Admin.EmailSettings do
>
<%!-- Step 1: Choose a provider --%>
<div class="admin-setup-step">
<div class="admin-setup-step-header">
<span class="admin-setup-step-number">1</span>
<h2 class="admin-setup-step-title">Choose a provider</h2>
</div>
<h2 class="admin-setup-step-header">
<span class="admin-setup-step-number">1</span> Choose a provider
</h2>
<fieldset class="card-radio-fieldset" disabled={@env_locked}>
<legend class="sr-only">Email provider</legend>
@@ -205,7 +208,10 @@ defmodule BerrypodWeb.Admin.EmailSettings do
/>
</div>
<details class="admin-provider-other">
<details
class="admin-provider-other"
open={@adapter_key in Enum.map(@advanced_adapters, & &1.key)}
>
<summary class="admin-provider-other-toggle">
Already have your own email server?
</summary>
@@ -237,10 +243,9 @@ defmodule BerrypodWeb.Admin.EmailSettings do
<div
:if={@email_configured}
id="test-email-step"
class="admin-setup-step"
style="margin-top: 1.5rem;"
class="admin-setup-step admin-setup-step-spaced"
>
<div class="admin-setup-step-header">
<h2 class="admin-setup-step-header">
<span class={[
"admin-setup-step-number",
@test_result == :ok && "admin-setup-step-number-done",
@@ -255,17 +260,15 @@ defmodule BerrypodWeb.Admin.EmailSettings do
{if @selected_adapter && @selected_adapter.url, do: "4", else: "3"}
<% end %>
</span>
<h2 class="admin-setup-step-title">
<%= cond do %>
<% @test_result == :ok -> %>
Email is working
<% @test_result == :error -> %>
Test failed
<% true -> %>
Send a test email
<% end %>
</h2>
</div>
<%= cond do %>
<% @test_result == :ok -> %>
Email is working
<% @test_result == :error -> %>
Test failed
<% true -> %>
Send a test email
<% end %>
</h2>
<%= if @test_result == :ok do %>
<p class="admin-setup-step-desc">
@@ -308,35 +311,17 @@ defmodule BerrypodWeb.Admin.EmailSettings do
<p class="admin-setup-step-desc">
Send a test to <strong>{@current_scope.user.email}</strong> to check everything works.
</p>
<div class="admin-row admin-row-sm">
<%!-- JS: async send via LiveView --%>
<span id="test-email-js">
<.button
type="button"
phx-click="send_test"
disabled={@sending_test}
phx-disable-with="Sending..."
>
<.icon name="hero-paper-airplane" class="size-4" /> Send test email
</.button>
</span>
<%!-- No-JS: form POST fallback (hides the JS button above) --%>
<noscript>
<style>
#test-email-js { display: none; }
</style>
<.form
for={%{}}
action={~p"/admin/settings/email/test"}
method="post"
style="display:inline"
>
<.button>
<.icon name="hero-paper-airplane" class="size-4" /> Send test email
</.button>
</.form>
</noscript>
</div>
<.form
for={%{}}
action={~p"/admin/settings/email/test"}
phx-submit="send_test"
method="post"
class="admin-row admin-row-sm"
>
<.button disabled={@sending_test} phx-disable-with="Sending...">
<.icon name="hero-paper-airplane" class="size-4" /> Send test email
</.button>
</.form>
<% end %>
<% end %>
</div>
@@ -354,13 +339,13 @@ defmodule BerrypodWeb.Admin.EmailSettings do
defp adapter_config(assigns) do
~H"""
<div hidden={!@selected} class="admin-adapter-config" data-adapter={@adapter.key}>
<details open={@selected} class="admin-adapter-config" data-adapter={@adapter.key}>
<summary class="admin-adapter-config-summary">Configure {@adapter.name}</summary>
<%!-- Create an account (providers with sign-up URLs) --%>
<div :if={@adapter.url} class="admin-setup-step">
<div class="admin-setup-step-header">
<span class="admin-setup-step-number">2</span>
<h2 class="admin-setup-step-title">Create a free account</h2>
</div>
<h2 class="admin-setup-step-header">
<span class="admin-setup-step-number">2</span> Create a free account
</h2>
<p class="admin-setup-step-desc">
<.external_link href={@adapter.url} class="admin-link">
Sign up at {@adapter.name} &nearr;
@@ -371,12 +356,12 @@ defmodule BerrypodWeb.Admin.EmailSettings do
<%!-- Paste your key / server details --%>
<div class="admin-setup-step">
<div class="admin-setup-step-header">
<h2 class="admin-setup-step-header">
<span class="admin-setup-step-number">
{if @adapter.url, do: "3", else: "2"}
</span>
<h2 class="admin-setup-step-title">{adapter_fields_title(@adapter)}</h2>
</div>
{adapter_fields_title(@adapter)}
</h2>
<p class="admin-setup-step-desc">{adapter_fields_instruction(@adapter)}</p>
<%= for field <- @adapter.fields do %>
<.adapter_field_input
@@ -395,7 +380,7 @@ defmodule BerrypodWeb.Admin.EmailSettings do
</div>
<% end %>
</div>
</div>
</details>
"""
end
@@ -435,12 +420,12 @@ defmodule BerrypodWeb.Admin.EmailSettings do
disabled={@disabled}
class="card-radio-input"
/>
<div class="card-radio-name">
{@adapter.name}
<span class="card-radio-name">
<strong>{@adapter.name}</strong>
<span :if={@adapter.recommended} class="card-radio-badge card-radio-recommended">
Recommended
</span>
</div>
</span>
<div :if={@adapter.free_tier} class="card-radio-description">{@adapter.free_tier}</div>
<div :if={@adapter.setup_hint} class="card-radio-description">{@adapter.setup_hint}</div>
</label>