vault/ui/docs/forms.md

# Forms

- [Guidelines](#guidelines)

## Guidelines

- Render `FlashMessage` on success
- Handling errors/validation messages:
  - Render API errors using a `<MessageError>` or `Hds::Alert` at the top of forms
  - Display validation error messages `onsubmit` (not `onchange` for inputs)
  - Render an `<AlertInline>` [beside](../lib/pki/addon/components/pki-role-generate.hbs) form buttons, especially if the error banner is hidden from view (long forms). Message options:
    - The `invalidFormMessage` from a model's `validate()` method that includes an error count
    - Generic message for API errors or forms without model validations: 'There was an error submitting this form.'
  - Add `has-error-border` class to invalid inputs
Ui: Add contributing pattern doc (#19897) * format readme to prepare for pattern info * small text changes * add markdown files for each section * readme updates * routing md draft * add table of contents * add oidc pr sample * update routing * add decorator section * serializer docs * add table of contents * update readme * add title * add decorator section * models readme * update comments * modify examples * add bullets and more comments * what the heck fix bullet * model docs * form docs * routing doc * serializer/adapter * adds docs for model-validations decorator (#20596) * UI Docs: Components (#20602) * Add CSS best practices (#20370) * wip--saving work * wip * friday morning.... * update * fix exists to exist * one more change * UI docs: Add ember engine creation documentation (#20789) --------- Co-authored-by: Jordan Reimer <zofskeez@gmail.com> Co-authored-by: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com> Co-authored-by: Angel Garbarino <Monkeychip@users.noreply.github.com> Co-authored-by: Kianna <30884335+kiannaquach@users.noreply.github.com> 2023-05-30 13:24:35 -04:00			`# Forms`

			`- [Guidelines](#guidelines)`

			`## Guidelines`

			- Render `FlashMessage` on success
			`- Handling errors/validation messages:`
ui: HDS adoption replace <AlertBanner> component (#21375) * UI: HDS adoption replace AlertBanner part 1 (#21163) * rename test selector * replace db banner * add class * replace db role edit * db creds * generate creds * simpler class * license banner component * oidc callback plash * raft * aws * secret create or update * change to compact alert for form field * change back to inline * combine alert banners * wrap in conditional * remove references to message class * UI: HDS adoption replace AlertBanner part 2 (#21243) * token expire warning * delete css * edit form * item details distribute mfa step 2 transit verify * back to secondary * distribute * oidc lease error * sign * kv obj and repl dash * more repl * update test selector * show, creds * shamir * pki csr * pki banners * add hds library to ember engines * woops comma * fix k8 test * update message error component for last! * hold off MessageError changes until next pr * revert test selectors * update pki tests * UI: part 3 remove alert banner (#21334) * final component swap * and actual final of MessageError * update MessageError selectors * delete alert-banner and remove references * update next step alerts to highlight color * finishing touches, auth form test and client dashboard inline link * fix more selectors * fix shamir flow test * ui: part 4 final cleanup (#21365) * replace AlertPopup * add test tag * move tag * one more message error tag * delete alert popup * final css cleanup * move preformatted flash into <p> tag * ui: address comments for sidebranch (#21388) * add periods, move link to trailing * more periods and typo fix 2023-06-21 14:37:11 -04:00			- Render API errors using a `<MessageError>` or `Hds::Alert` at the top of forms
Ui: Add contributing pattern doc (#19897) * format readme to prepare for pattern info * small text changes * add markdown files for each section * readme updates * routing md draft * add table of contents * add oidc pr sample * update routing * add decorator section * serializer docs * add table of contents * update readme * add title * add decorator section * models readme * update comments * modify examples * add bullets and more comments * what the heck fix bullet * model docs * form docs * routing doc * serializer/adapter * adds docs for model-validations decorator (#20596) * UI Docs: Components (#20602) * Add CSS best practices (#20370) * wip--saving work * wip * friday morning.... * update * fix exists to exist * one more change * UI docs: Add ember engine creation documentation (#20789) --------- Co-authored-by: Jordan Reimer <zofskeez@gmail.com> Co-authored-by: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com> Co-authored-by: Angel Garbarino <Monkeychip@users.noreply.github.com> Co-authored-by: Kianna <30884335+kiannaquach@users.noreply.github.com> 2023-05-30 13:24:35 -04:00			- Display validation error messages `onsubmit` (not `onchange` for inputs)
			- Render an `<AlertInline>` [beside](../lib/pki/addon/components/pki-role-generate.hbs) form buttons, especially if the error banner is hidden from view (long forms). Message options:
			- The `invalidFormMessage` from a model's `validate()` method that includes an error count
			`- Generic message for API errors or forms without model validations: 'There was an error submitting this form.'`
			- Add `has-error-border` class to invalid inputs