Improve SSO Config validation (#1332)

* Break form controls up into reusable components

* Add proper form styling, validation, inline error messages, etc

* Move control options into class instead of template

* Add accessibility

src/app/oss.module.ts

@@ -61,12 +61,14 @@ import { CalloutComponent } from "jslib-angular/components/callout.component";
 import { ExportScopeCalloutComponent } from "jslib-angular/components/export-scope-callout.component";
 import { IconComponent } from "jslib-angular/components/icon.component";
 import { VerifyMasterPasswordComponent } from "jslib-angular/components/verify-master-password.component";
+import { A11yInvalidDirective } from "jslib-angular/directives/a11y-invalid.directive";
 import { A11yTitleDirective } from "jslib-angular/directives/a11y-title.directive";
 import { ApiActionDirective } from "jslib-angular/directives/api-action.directive";
 import { AutofocusDirective } from "jslib-angular/directives/autofocus.directive";
 import { BlurClickDirective } from "jslib-angular/directives/blur-click.directive";
 import { BoxRowDirective } from "jslib-angular/directives/box-row.directive";
 import { FallbackSrcDirective } from "jslib-angular/directives/fallback-src.directive";
+import { InputStripSpacesDirective } from "jslib-angular/directives/input-strip-spaces.directive";
 import { InputVerbatimDirective } from "jslib-angular/directives/input-verbatim.directive";
 import { SelectCopyDirective } from "jslib-angular/directives/select-copy.directive";
 import { StopClickDirective } from "jslib-angular/directives/stop-click.directive";
@@ -293,17 +295,18 @@ registerLocaleData(localeZhTw, "zh-TW");
   ],
   declarations: [
     A11yTitleDirective,
+    A11yInvalidDirective,
     AcceptEmergencyComponent,
-    AccessComponent,
     AcceptOrganizationComponent,
+    AccessComponent,
     AccountComponent,
-    SetPasswordComponent,
     AddCreditComponent,
     AddEditComponent,
     AddEditCustomFieldsComponent,
+    AddEditCustomFieldsComponent,
     AdjustPaymentComponent,
-    AdjustSubscription,
     AdjustStorageComponent,
+    AdjustSubscription,
     ApiActionDirective,
     ApiKeyComponent,
     AttachmentsComponent,
@@ -329,6 +332,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     DeauthorizeSessionsComponent,
     DeleteAccountComponent,
     DeleteOrganizationComponent,
+    DisableSendPolicyComponent,
     DomainRulesComponent,
     DownloadLicenseComponent,
     EmergencyAccessAddEditComponent,
@@ -352,22 +356,26 @@ registerLocaleData(localeZhTw, "zh-TW");
     IconComponent,
     ImportComponent,
     InactiveTwoFactorReportComponent,
+    InputStripSpacesDirective,
     InputVerbatimDirective,
     LinkSsoComponent,
     LockComponent,
     LoginComponent,
+    MasterPasswordPolicyComponent,
     NavbarComponent,
     NestedCheckboxComponent,
     OptionsComponent,
     OrgAccountComponent,
     OrgAddEditComponent,
     OrganizationBillingComponent,
+    OrganizationLayoutComponent,
     OrganizationPlansComponent,
+    OrganizationsComponent,
     OrganizationSubscriptionComponent,
     OrgAttachmentsComponent,
-    OrgBulkStatusComponent,
     OrgBulkConfirmComponent,
     OrgBulkRemoveComponent,
+    OrgBulkStatusComponent,
     OrgCiphersComponent,
     OrgCollectionAddEditComponent,
     OrgCollectionsComponent,
@@ -376,49 +384,56 @@ registerLocaleData(localeZhTw, "zh-TW");
     OrgEventsComponent,
     OrgExportComponent,
     OrgExposedPasswordsReportComponent,
-    OrgImportComponent,
-    OrgInactiveTwoFactorReportComponent,
     OrgGroupAddEditComponent,
     OrgGroupingsComponent,
     OrgGroupsComponent,
+    OrgImportComponent,
+    OrgInactiveTwoFactorReportComponent,
     OrgManageCollectionsComponent,
     OrgManageComponent,
     OrgPeopleComponent,
-    OrgPolicyEditComponent,
     OrgPoliciesComponent,
+    OrgPolicyEditComponent,
     OrgResetPasswordComponent,
     OrgReusedPasswordsReportComponent,
     OrgSettingComponent,
     OrgToolsComponent,
     OrgTwoFactorSetupComponent,
+    OrgUnsecuredWebsitesReportComponent,
     OrgUserAddEditComponent,
     OrgUserConfirmComponent,
     OrgUserGroupsComponent,
-    OrganizationsComponent,
-    OrganizationLayoutComponent,
-    OrgUnsecuredWebsitesReportComponent,
     OrgVaultComponent,
     OrgWeakPasswordsReportComponent,
     PasswordGeneratorComponent,
     PasswordGeneratorHistoryComponent,
-    PasswordStrengthComponent,
+    PasswordGeneratorPolicyComponent,
     PasswordRepromptComponent,
+    PasswordStrengthComponent,
     PaymentComponent,
+    PersonalOwnershipPolicyComponent,
     PremiumComponent,
     ProfileComponent,
+    ProvidersComponent,
     PurgeVaultComponent,
     RecoverDeleteComponent,
     RecoverTwoFactorComponent,
     RegisterComponent,
+    RemovePasswordComponent,
+    RequireSsoPolicyComponent,
+    ResetPasswordPolicyComponent,
     ReusedPasswordsReportComponent,
     SearchCiphersPipe,
     SearchPipe,
     SelectCopyDirective,
     SendAddEditComponent,
-    SendEffluxDatesComponent,
     SendComponent,
+    SendEffluxDatesComponent,
+    SendOptionsPolicyComponent,
+    SetPasswordComponent,
     SettingsComponent,
     ShareComponent,
+    SingleOrgPolicyComponent,
     SponsoredFamiliesComponent,
     SponsoringOrgRowComponent,
     SsoComponent,
@@ -427,6 +442,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     TaxInfoComponent,
     ToolsComponent,
     TrueFalseValueDirective,
+    TwoFactorAuthenticationPolicyComponent,
     TwoFactorAuthenticatorComponent,
     TwoFactorComponent,
     TwoFactorDuoComponent,
@@ -444,41 +460,31 @@ registerLocaleData(localeZhTw, "zh-TW");
     UpdatePasswordComponent,
     UserBillingComponent,
     UserLayoutComponent,
-    UserSubscriptionComponent,
     UserNamePipe,
+    UserSubscriptionComponent,
     VaultComponent,
+    VaultTimeoutInputComponent,
     VerifyEmailComponent,
     VerifyEmailTokenComponent,
+    VerifyMasterPasswordComponent,
     VerifyRecoverDeleteComponent,
     WeakPasswordsReportComponent,
-    ProvidersComponent,
-    TwoFactorAuthenticationPolicyComponent,
-    MasterPasswordPolicyComponent,
-    SingleOrgPolicyComponent,
-    PasswordGeneratorPolicyComponent,
-    RequireSsoPolicyComponent,
-    PersonalOwnershipPolicyComponent,
-    DisableSendPolicyComponent,
-    SendOptionsPolicyComponent,
-    ResetPasswordPolicyComponent,
-    VaultTimeoutInputComponent,
-    AddEditCustomFieldsComponent,
-    VerifyMasterPasswordComponent,
-    RemovePasswordComponent,
   ],
   exports: [
     A11yTitleDirective,
+    A11yInvalidDirective,
+    ApiActionDirective,
     AvatarComponent,
     CalloutComponent,
-    ApiActionDirective,
+    FooterComponent,
+    I18nPipe,
+    InputStripSpacesDirective,
+    NavbarComponent,
+    OrganizationPlansComponent,
+    SearchPipe,
     StopClickDirective,
     StopPropDirective,
-    I18nPipe,
-    SearchPipe,
     UserNamePipe,
-    NavbarComponent,
-    FooterComponent,
-    OrganizationPlansComponent,
   ],
   providers: [DatePipe, SearchPipe, UserNamePipe],
   bootstrap: [],

src/locales/en/messages.json

@@ -4414,25 +4414,25 @@
     "message": "OIDC Redirect Behavior"
   },
   "getClaimsFromUserInfoEndpoint": {
-    "message": "Get Claims From User Info Endpoint"
+    "message": "Get claims from user info endpoint"
   },
   "additionalScopes": {
-    "message": "Additional/Custom Scopes (comma delimited)"
+    "message": "Custom Scopes"
   },
   "additionalUserIdClaimTypes": {
-    "message": "Additional/Custom User ID Claim Types (comma delimited)"
+    "message": "Custom User ID Claim Types"
   },
   "additionalEmailClaimTypes": {
-    "message": "Additional/Custom Email Claim Types (comma delimited)"
+    "message": "Email Claim Types"
   },
   "additionalNameClaimTypes": {
-    "message": "Additional/Custom Name Claim Types (comma delimited)"
+    "message": "Custom Name Claim Types"
   },
   "acrValues": {
-    "message": "Requested Authentication Context Class Reference values (acr_values)"
+    "message": "Requested Authentication Context Class Reference values"
   },
   "expectedReturnAcrValue": {
-    "message": "Expected \"acr\" Claim Value In Response (acr validation)"
+    "message": "Expected \"acr\" Claim Value In Response"
   },
   "spEntityId": {
     "message": "SP Entity ID"
@@ -4456,10 +4456,10 @@
     "message": "Minimum Incoming Signing Algorithm"
   },
   "spWantAssertionsSigned": {
-    "message": "Want Assertions Signed"
+    "message": "Expect signed assertions"
   },
   "spValidateCertificates": {
-    "message": "Validate Certificates"
+    "message": "Validate certificates"
   },
   "idpEntityId": {
     "message": "Entity ID"
@@ -4473,9 +4473,6 @@
   "idpSingleLogoutServiceUrl": {
     "message": "Single Log Out Service URL"
   },
-  "idpArtifactResolutionServiceUrl": {
-    "message": "Artifact Resolution Service URL"
-  },
   "idpX509PublicCert": {
     "message": "X509 Public Certificate"
   },
@@ -4483,13 +4480,13 @@
     "message": "Outbound Signing Algorithm"
   },
   "idpAllowUnsolicitedAuthnResponse": {
-    "message": "Allow Unsolicited Authentication Response"
+    "message": "Allow unsolicited authentication response"
   },
-  "idpDisableOutboundLogoutRequests": {
-    "message": "Disable Outbound Logout Requests"
+  "idpAllowOutboundLogoutRequests": {
+    "message": "Allow outbound logout requests"
   },
-  "idpWantAuthnRequestsSigned": {
-    "message": "Want Authentication Requests Signed"
+  "idpSignAuthenticationRequests": {
+    "message": "Sign authentication requests"
   },
   "ssoSettingsSaved": {
     "message": "Single Sign-On configuration was saved."
@@ -4740,6 +4737,42 @@
   "freeWithSponsorship": {
     "message": "FREE with sponsorship"
   },
+  "formErrorSummaryPlural": {
+    "message": "$COUNT$ fields above need your attention.",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "5"
+      }
+    }
+  },
+  "formErrorSummarySingle": {
+    "message": "1 field above needs your attention."
+  },
+  "fieldRequiredError": {
+    "message": "$FIELDNAME$ is required.",
+    "placeholders": {
+      "fieldname": {
+        "content": "$1",
+        "example": "Full name"
+      }
+    }
+  },
+  "required": {
+    "message": "required"
+  },
+  "idpSingleSignOnServiceUrlRequired": {
+    "message": "Required if Entity ID is not a URL."
+  },
+  "openIdOptionalCustomizations": {
+    "message": "Optional Customizations"
+  },
+  "openIdAuthorityRequired": {
+    "message": "Required if Authority is not valid."
+  },
+  "separateMultipleWithComma": {
+    "message": "Separate multiple with a comma."
+  },
   "sessionTimeout": {
     "message": "Your session has timed out. Please go back and try logging in again."
   },

src/scss/forms.scss

@@ -210,6 +210,42 @@ input[type="checkbox"] {
   }
 }
 
+.section-header {
+  h3,
+  .btn.btn-link {
+    @include themify($themes) {
+      color: themed("headingColor");
+    }
+  }
+
+  h3 {
+    font-weight: normal;
+    text-transform: uppercase;
+  }
+}
+
+.error-summary {
+  margin-top: 1rem;
+}
+
+.error-inline {
+  @include themify($themes) {
+    color: themed("danger");
+  }
+}
+
+// Theming for invalid form elements in the SSO Config Form only
+// Will be deprecated by component-level styling in the Component Library
+app-org-manage-sso form {
+  .form-control.ng-invalid,
+  app-input-text.ng-invalid .form-control,
+  app-select.ng-invalid .form-control {
+    @include themify($themes) {
+      border-color: themed("danger");
+    }
+  }
+}
+
 // Browser specific icons overlayed on input fields. e.g. caps lock indicator on password field
 ::-webkit-calendar-picker-indicator,
 input::-webkit-caps-lock-indicator,