Type of change

• Bug fix
• New feature development
• Tech debt (refactoring, code cleanup, dependency upgrades, etc)
• Build/deploy pipeline (DevOps)
• Other

Objective

• Add front-end validation to the SSO configuration form to minimise manual intervention by Customer Success
• Automatically strip spaces from URLs to avoid typos when copying/pasting from the IdP
• Make the form accessible
• Meta-objective: establish some front-end form design best practices for our applications, using reactive forms, in-line validation, and accessible patterns.

Code changes

Form components:

• src/app/components/forms/base-cva.component.ts - an abstract class with a basic ControlValueAccessor (CVA) implementation, common Inputs and helper methods. Used by the custom controls below.
• src/app/components/forms/input-text.component.html - input type="text" control with label, inline error messages and helper text
• src/app/components/forms/input-checkbox.component - checkbox control with label and helper text
• src/app/components/forms/select.component.html - dropdown with label
• src/app/components/forms/input-text-readonly.component - component for readonly input fields used to display data, e.g. the ACS URL, and optional copy and launch buttons. Doesn't use the CVA because it's fairly static.
• src/app/oss.module.ts - add the above components and export them for use in the bitwarden_license project

These components use aria labels etc. to increase accessibility.

SSO configuration page (sso.component)
Class:

• add validators and defaults to the FormControls
• disable the sub-form that has not been selected by the user. For example, if configuring SAML, disable the OpenId FormGroup. This prevents validators from running.
• move the code in the postData method back into submit. The postData method was only to hook into the appApiAction directive to show an error toast if the Key Connector URL was invalid. We now use an inline error messages for all this, so it's not required.
• add new methods:
  • getErrorCount - a live display of the error count to the user. Note that errors on a FormGroup only show FormGroup level errors, it does not show the errors of the child controls. So we have to get this count ourselves.
  • validateForm - manually triggers validation for all fields even if they haven't been blurred by the user. This is required on submit in case the user has not interacted with a field that requires validation.
  • readOutErrors - because the error count may already be present when the user clicks submit, a screenreader user will not receive a readout. There does not appear to be any way to programatically trigger a readout, other than appending an sr-only div with the contents. Not great, but not sure how else to achieve this.

Template:

• template: use the above components where possible. I haven't moved controls into components if they're only used once (e.g. the textarea used for the X509 cert)

• move dropdown options out of the templates and into the component classes. Use enums properly instead of hard-coding their literal values into the template.

• move the OpenId Optional Customizations into its own collapsible section. Use aria-expanded to indicate its state

• messages.json

  • update existing strings per design requirements
  • add new strings as required

Depends on:

• jslib: Improve SSO Config validation jslib#572
• server:
  • Make optional ssoConfig fields nullable server#1752
  • Improve SSO Config validation server#1879

Screenshots

Testing requirements

• full regression test of SSO configuration form, including loading existing data, saving data, and making sure the actual SSO itself works
• testing inline error messages and general front-end validation behaviour
• important: ensuring that existing configurations migrate okay and are not broken between versions

Before you submit

• I have checked for linting errors (npm run lint) (required)
• This change requires a documentation update (notify the documentation team)
• This change has particular deployment requirements (notify the DevOps team)