rework email settings for true progressive enhancement
All checks were successful
deploy / deploy (push) Successful in 1m19s
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:
@@ -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 |
|
||||
|
||||
Reference in New Issue
Block a user