feat: user form display modes (tabs/accordion/wizard) + consent-safe plugin-responsive registration #184

New Issue

Open

opened 2026-07-21 20:08:40 +00:00 by jmiller · 2 comments

jmiller commented

2026-07-21 20:08:40 +00:00

Owner

Summary

Generalize the shared layouts/mokoonyx/profile-tabset layout so the registration and profile edit forms can render their sections as Tabs, Accordion, or a step-by-step Wizard, selectable via template params. Registration defaults to the wizard (forces users through each section); profile edit defaults to tabs.

Motivation

User-plugin responsive: any fieldset a plugin contributes (MokoSuiteCRM / MokoSuiteCommunity) must auto-appear as its own section.
Consent safety: fields injected without a fieldset — the Privacy Consent plugin and Terms of Service — were being silently dropped by a fieldset-only renderer, which is a legal/functional break on registration.

Done (branch `feature/user-form-modes`, commit `6d38e6c`)

3 display modes in profile-tabset.php: tabs | accordion | wizard.
Orphan-field pass renders any field not in a rendered fieldset (privacy consent / ToS / plugin fields) in an "Additional" section.
Wizard driver media/js/user-form-wizard.js: Back/Next, per-step native validation before advancing, hides the caller's submit until the last step, progressive-enhancement (no-JS = all steps visible).
Template params user_registration_mode (default wizard) + user_profile_mode (default tabs).
Registration + profile-edit overrides pass the param-driven mode.
Wizard CSS (progress/steps/nav) + en-GB/en-US strings.

Depends on shipping the modified profile edit + registration overrides (already on main).
MokoSuiteCommunity user plugin, Privacy Consent, Terms of Service consent fields.

Testing plan in a comment below.

## Summary Generalize the shared `layouts/mokoonyx/profile-tabset` layout so the **registration** and **profile edit** forms can render their sections as **Tabs**, **Accordion**, or a step-by-step **Wizard**, selectable via template params. Registration defaults to the wizard (forces users through each section); profile edit defaults to tabs. ## Motivation - **User-plugin responsive:** any fieldset a plugin contributes (MokoSuiteCRM / MokoSuiteCommunity) must auto-appear as its own section. - **Consent safety:** fields injected *without* a fieldset — the **Privacy Consent** plugin and **Terms of Service** — were being silently dropped by a fieldset-only renderer, which is a legal/functional break on registration. ## Done (branch `feature/user-form-modes`, commit `6d38e6c`) - 3 display modes in `profile-tabset.php`: `tabs` | `accordion` | `wizard`. - **Orphan-field pass** renders any field not in a rendered fieldset (privacy consent / ToS / plugin fields) in an "Additional" section. - Wizard driver `media/js/user-form-wizard.js`: Back/Next, per-step native validation before advancing, hides the caller's submit until the last step, progressive-enhancement (no-JS = all steps visible). - Template params `user_registration_mode` (default `wizard`) + `user_profile_mode` (default `tabs`). - Registration + profile-edit overrides pass the param-driven mode. - Wizard CSS (progress/steps/nav) + en-GB/en-US strings. ## Related - Depends on shipping the modified profile edit + registration overrides (already on `main`). - MokoSuiteCommunity user plugin, Privacy Consent, Terms of Service consent fields. Testing plan in a comment below.

jmiller commented

2026-07-21 20:08:43 +00:00

Author

Owner

Branch created: feature/184-feat-user-form-display-modes-tabs-accord

git fetch origin
git checkout feature/184-feat-user-form-display-modes-tabs-accord

Branch created: [`feature/184-feat-user-form-display-modes-tabs-accord`](https://git.mokoconsulting.tech/MokoConsulting/MokoOnyx/src/branch/feature/184-feat-user-form-display-modes-tabs-accord) ```bash git fetch origin git checkout feature/184-feat-user-form-display-modes-tabs-accord ```

jmiller commented

2026-07-21 20:10:15 +00:00

Author

Owner

🧪 Testing plan — User form display modes + consent safety

Build: feature/user-form-modes (commit 6d38e6c). Test with template debug ON (unminified JS).

Registration — Wizard (default)

Open the registration form → renders as a wizard: progress indicator, one section visible, Next shown, Back hidden on step 1, and the Register button hidden until the last step.
Click Next with a required field empty → blocked; native validation message; stays on the step.
Fill required fields → Next advances; counter updates "Step X of N"; Back appears and returns to the prior step with values intact.
Last step: Next hidden, Register visible → submitting creates the account.
No-JS (disable JavaScript): all steps visible as one page and the form still submits (progressive enhancement).

Registration — consent safety (critical) ⚖️

Enable User – Privacy Consent plugin → the consent checkbox appears (in its section or the "Additional" section), is required, and Next/submit is blocked until checked.
With a Terms of Service field present → it renders and must be accepted; not dropped.
Enable MokoSuiteCommunity user plugin → its fieldset appears as its own step using its own label.

Mode switching (param-driven)

Template → User Forms → set Registration display = Tabs / Accordion → registration re-renders in that mode; all fields incl. consent still present.
Profile edit display default = Tabs: profile edit renders as tabs (MFA appears as an extra tab; all plugin fieldsets present). Switch to wizard/accordion → re-renders.

Regression

Registration captcha still renders outside the tabset, just before submit.
Profile edit Save/Cancel tasks work; hidden control fields present.
Orphan catch-all: a field with no fieldset shows in "Additional" in all three modes (not dropped).

Pass criteria

All three modes render every field (incl. plugin + consent); wizard forces sequential completion with per-step validation; consent is always present and required; no field is ever dropped.

## 🧪 Testing plan — User form display modes + consent safety **Build:** `feature/user-form-modes` (commit `6d38e6c`). Test with template debug ON (unminified JS). ### Registration — Wizard (default) - [ ] Open the registration form → renders as a **wizard**: progress indicator, one section visible, **Next** shown, **Back** hidden on step 1, and the **Register** button hidden until the last step. - [ ] Click **Next** with a required field empty → **blocked**; native validation message; stays on the step. - [ ] Fill required fields → **Next** advances; counter updates "Step X of N"; **Back** appears and returns to the prior step with values intact. - [ ] Last step: **Next** hidden, **Register** visible → submitting creates the account. - [ ] **No-JS** (disable JavaScript): all steps visible as one page and the form still submits (progressive enhancement). ### Registration — consent safety (critical) ⚖️ - [ ] Enable **User – Privacy Consent** plugin → the consent checkbox **appears** (in its section or the "Additional" section), is **required**, and Next/submit is **blocked** until checked. - [ ] With a **Terms of Service** field present → it renders and must be accepted; not dropped. - [ ] Enable **MokoSuiteCommunity** user plugin → its fieldset appears as its **own step** using its own label. ### Mode switching (param-driven) - [ ] Template → **User Forms** → set `Registration display` = **Tabs** / **Accordion** → registration re-renders in that mode; **all fields incl. consent still present**. - [ ] `Profile edit display` default = **Tabs**: profile edit renders as tabs (MFA appears as an extra tab; all plugin fieldsets present). Switch to wizard/accordion → re-renders. ### Regression - [ ] Registration **captcha** still renders outside the tabset, just before submit. - [ ] Profile edit **Save/Cancel** tasks work; hidden control fields present. - [ ] Orphan catch-all: a field with no fieldset shows in "Additional" in **all three modes** (not dropped). ### Pass criteria All three modes render every field (incl. plugin + consent); wizard forces sequential completion with per-step validation; consent is always present and required; no field is ever dropped.

jmiller referenced a pull request that will close this issue

2026-07-21 21:20:08 +00:00

feat(#184): user form modes (tabs/accordion/wizard) + consent-safe plugin-responsive registration #186

Priority Medium

Type Feature

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: MokoConsulting/MokoOnyx#184

feat: user form display modes (tabs/accordion/wizard) + consent-safe plugin-responsive registration #184

Summary

Motivation

Done (branch feature/user-form-modes, commit 6d38e6c)

Related

🧪 Testing plan — User form display modes + consent safety

Registration — Wizard (default)

Registration — consent safety (critical) ⚖️

Mode switching (param-driven)

Regression

Pass criteria

Done (branch `feature/user-form-modes`, commit `6d38e6c`)