rework email settings for true progressive enhancement
All checks were successful
deploy / deploy (push) Successful in 1m19s

Render all adapter field sections in the form with CSS :has(:checked)
controlling visibility. Selecting a provider instantly shows its config
fields — no JS, no page reload, no server round-trip needed.

- Render all 6 adapter configs with data-adapter attribute
- CSS :has(:checked) show/hide rules per adapter in admin stylesheet
- Namespace field names per adapter (email[brevo][api_key] etc)
- Drop 4 transactional-only providers (Resend, Postmark, Mailgun, MailPace)
- Remove noscript "Switch provider" button and controller redirect workaround
- Remove configured_adapter hidden input tracking
- Hide JS-only test email button for no-JS users via noscript style
- LiveView progressively enhances with async save and test email

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
2026-03-04 23:10:37 +00:00
parent dd20ea824f
commit db130a7155
12 changed files with 213 additions and 456 deletions

View File

@@ -1,6 +1,6 @@
# Onboarding UX v2
Status: Planned
Status: In progress
Supersedes the original onboarding-ux plan. Based on usability testing session (March 2026) covering the setup wizard, launch checklist, email provider setup, and general onboarding flow.
@@ -77,20 +77,31 @@ API key entry should be as forgiving as possible:
**Files:** `lib/berrypod_web/live/setup/onboarding.ex`, `lib/berrypod_web/live/admin/providers.ex`, validation logic in contexts
### D. Email provider setup UX
### D. Email provider setup UX — done
Rework the email provider selection and configuration:
Reworked the email provider selection and configuration. Changes across two sessions:
- **Recommended pick** highlighted at top — whichever has the best free tier, easiest setup, and supports newsletters. One clear "if you're not sure, pick this" option.
- **Two groups:** "Also sends newsletters" vs "Transactional only" with one-line explanation of the difference
- **One-liner per provider:** free tier info, setup difficulty ("paste one API key" vs "requires domain verification")
- **Self-hosted/SMTP** in a collapsible "Advanced" section at bottom
- **Guided flow after selection:** link to create account (new tab), then "Now enter these settings:" with config fields
- **Send test email** button after configuration
- **Remove** the masked key display ("Current: 84159e26•••4f3")
- **Default from address** to the admin email automatically — don't surface during setup, it's a general settings thing for later
**Session 1 (commit dd659e4):**
- Recommended pick (Brevo) highlighted with badge
- Two groups: "Also sends newsletters" vs "Transactional only"
- One-liner per provider with free tier info
- Self-hosted/SMTP in collapsible "Advanced" section
- Guided flow after selection with config fields
- Send test email button with async delivery
- Removed masked key display
- Default from address auto-set from admin email
- No-JS support via controller POST fallback
- 17 audit fixes (a11y, error handling, UX)
**Files:** `lib/berrypod_web/live/admin/email_settings.ex`, shared components for guided flow
**Session 2 (uncommitted):**
- Dropped 4 transactional-only providers (Resend, Postmark, Mailgun, MailPace) — all are transactional-only and not useful for a shop that needs newsletters. 6 adapters remain: Brevo, SendGrid, Mailjet, MailerSend + SMTP, Postal
- Removed "Popular providers" heading and description (unnecessary with fewer providers)
- Fixed no-JS provider switching: noscript submit button always visible with dynamic text
- Fixed no-JS radio highlight: replaced server-applied `card-radio-card-selected` class with pure CSS `:has(:checked)` selector
- Cleaned up key validation (removed 4 provider clauses, removed 2 known prefixes)
- Updated all related tests (adapters, key validation, email settings LiveView, controller, mailer)
**Files:** `lib/berrypod_web/live/admin/email_settings.ex`, `lib/berrypod/mailer/adapters.ex`, `lib/berrypod/key_validation.ex`, `assets/css/admin/components.css`, `lib/berrypod_web/controllers/email_settings_controller.ex`
### E. Contextual prompts for skipped steps
@@ -148,7 +159,7 @@ Increase input field border contrast to meet WCAG AA (3:1 minimum for UI compone
| A | Simplify initial setup to account creation only | 1.5h | planned |
| B | Guided setup flow with progress bar | 4h | planned |
| C | Forgiving API key validation | 1.5h | planned |
| D | Email provider setup UX rework | 2h | planned |
| D | Email provider setup UX rework | 2h | done |
| E | Contextual prompts for skipped steps | 2h | done |
| F | Dashboard checklist and messaging rework | 2h | planned |
| G | Coming soon page fixes (logo + admin link) | 30m | planned |