fix email settings: hidden attr for no-CSS, block-level card labels
All checks were successful
deploy / deploy (push) Successful in 1m29s

Non-selected adapter configs now get HTML hidden attribute so only the
active config shows without CSS. Provider card labels use div instead
of span for natural block stacking in text-only rendering.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey 2026-03-05 09:40:35 +00:00
parent e24f9aa4f3
commit 5dee2ae0be
2 changed files with 24 additions and 6 deletions

View File

@ -221,10 +221,11 @@ defmodule BerrypodWeb.Admin.EmailSettings do
</fieldset> </fieldset>
</div> </div>
<%!-- Steps 2 & 3 for each adapter (CSS :has(:checked) shows the active one) --%> <%!-- Steps 2 & 3: config for each adapter (hidden keeps HTML correct without CSS) --%>
<.adapter_config <.adapter_config
:for={adapter <- @all_adapters} :for={adapter <- @all_adapters}
adapter={adapter} adapter={adapter}
selected={@adapter_key == adapter.key}
values={@all_values[adapter.key] || %{}} values={@all_values[adapter.key] || %{}}
field_errors={if(@adapter_key == adapter.key, do: @field_errors, else: %{})} field_errors={if(@adapter_key == adapter.key, do: @field_errors, else: %{})}
env_locked={@env_locked} env_locked={@env_locked}
@ -346,13 +347,14 @@ defmodule BerrypodWeb.Admin.EmailSettings do
# ── Local components ── # ── Local components ──
attr :adapter, :map, required: true attr :adapter, :map, required: true
attr :selected, :boolean, default: false
attr :values, :map, required: true attr :values, :map, required: true
attr :field_errors, :map, required: true attr :field_errors, :map, required: true
attr :env_locked, :boolean, required: true attr :env_locked, :boolean, required: true
defp adapter_config(assigns) do defp adapter_config(assigns) do
~H""" ~H"""
<div class="admin-adapter-config" data-adapter={@adapter.key}> <div hidden={!@selected} class="admin-adapter-config" data-adapter={@adapter.key}>
<%!-- Create an account (providers with sign-up URLs) --%> <%!-- Create an account (providers with sign-up URLs) --%>
<div :if={@adapter.url} class="admin-setup-step"> <div :if={@adapter.url} class="admin-setup-step">
<div class="admin-setup-step-header"> <div class="admin-setup-step-header">
@ -433,14 +435,14 @@ defmodule BerrypodWeb.Admin.EmailSettings do
disabled={@disabled} disabled={@disabled}
class="card-radio-input" class="card-radio-input"
/> />
<span class="card-radio-name"> <div class="card-radio-name">
{@adapter.name} {@adapter.name}
<span :if={@adapter.recommended} class="card-radio-badge card-radio-recommended"> <span :if={@adapter.recommended} class="card-radio-badge card-radio-recommended">
Recommended Recommended
</span> </span>
</span> </div>
<span :if={@adapter.free_tier} class="card-radio-description">{@adapter.free_tier}</span> <div :if={@adapter.free_tier} class="card-radio-description">{@adapter.free_tier}</div>
<span :if={@adapter.setup_hint} class="card-radio-description">{@adapter.setup_hint}</span> <div :if={@adapter.setup_hint} class="card-radio-description">{@adapter.setup_hint}</div>
</label> </label>
""" """
end end

View File

@ -251,6 +251,22 @@ defmodule BerrypodWeb.Admin.EmailSettingsTest do
assert html =~ "Email provider" assert html =~ "Email provider"
assert html =~ "sr-only" assert html =~ "sr-only"
end end
test "only selected adapter config is visible (hidden attribute)", %{conn: conn} do
{:ok, view, _html} = live(conn, ~p"/admin/settings/email")
# Select SMTP
view
|> form("form[phx-change=\"form_change\"]", %{email: %{adapter: "smtp"}})
|> render_change()
# SMTP should not be hidden
refute has_element?(view, ~s([data-adapter="smtp"][hidden]))
# Others should be hidden
assert has_element?(view, ~s([data-adapter="brevo"][hidden]))
assert has_element?(view, ~s([data-adapter="sendgrid"][hidden]))
assert has_element?(view, ~s([data-adapter="postal"][hidden]))
end
end end
describe "unauthenticated" do describe "unauthenticated" do