chore: form standardization (#2425)

src/core/client/account/routes/password/Reset/ResetPasswordForm.tsx

@@ -4,6 +4,7 @@ import React, { useCallback } from "react";
 import { Field, Form } from "react-final-form";
 
 import { InvalidRequestError } from "coral-framework/lib/errors";
+import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
 import { useMutation } from "coral-framework/lib/relay";
 import {
   composeValidators,
@@ -19,7 +20,6 @@ import {
   InputLabel,
   PasswordField,
   Typography,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import ResetPasswordMutation from "./ResetPasswordMutation";
@@ -99,32 +99,23 @@ const ResetPasswordForm: React.FunctionComponent<Props> = ({
                       >
                         <PasswordField
                           id={input.name}
-                          name={input.name}
-                          onChange={input.onChange}
-                          value={input.value}
                           placeholder="Password"
-                          color={
-                            meta.touched && (meta.error || meta.submitError)
-                              ? "error"
-                              : "regular"
-                          }
-                          disabled={disabled}
+                          color={colorFromMeta(meta)}
+                          autoComplete="new-password"
+                          disabled={disabled || meta.submitting}
                           fullWidth
+                          {...input}
                         />
                       </Localized>
-                      {submitError && (
-                        <CallOut color="error" fullWidth>
-                          {submitError}
-                        </CallOut>
-                      )}
-                      {meta.touched && (meta.error || meta.submitError) && (
-                        <ValidationMessage fullWidth>
-                          {meta.error || meta.submitError}
-                        </ValidationMessage>
-                      )}
+                      <ValidationMessage meta={meta} fullWidth />
                     </FormField>
                   )}
                 </Field>
+                {submitError && (
+                  <CallOut color="error" fullWidth>
+                    {submitError}
+                  </CallOut>
+                )}
                 <Localized id="resetPassword-resetPassword">
                   <Button
                     type="submit"

src/core/client/account/test/__snapshots__/resetPassword.spec.tsx.snap

@@ -58,12 +58,15 @@ Make sure it is unique and be sure to keep it secure.
                 >
                   <input
                     autoCapitalize="off"
-                    autoComplete="off"
+                    autoComplete="new-password"
                     autoCorrect="off"
                     className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
+                    disabled={false}
                     id="password"
                     name="password"
+                    onBlur={[Function]}
                     onChange={[Function]}
+                    onFocus={[Function]}
                     placeholder="Password"
                     spellCheck={false}
                     type="password"

src/core/client/admin/routes/Community/InviteUsers/EmailField.tsx

@@ -2,13 +2,13 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
+import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
 import { validateEmail } from "coral-framework/lib/validation";
 import {
   FieldSet,
   FormField,
   InputLabel,
   TextField,
-  ValidationMessage,
 } from "coral-ui/components";
 
 interface Props {
@@ -32,22 +32,12 @@ const EmailField: FunctionComponent<Props> = ({ index, disabled }) => (
           </Localized>
           <TextField
             data-testid={`invite-users-email.${index}`}
-            name={input.name}
-            onChange={input.onChange}
-            value={input.value}
-            color={
-              meta.touched && (meta.error || meta.submitError)
-                ? "error"
-                : "regular"
-            }
+            color={colorFromMeta(meta)}
             disabled={disabled}
             fullWidth
+            {...input}
           />
-          {meta.touched && (meta.error || meta.submitError) && (
-            <ValidationMessage fullWidth>
-              {meta.error || meta.submitError}
-            </ValidationMessage>
-          )}
+          <ValidationMessage meta={meta} fullWidth />
         </FormField>
       )}
     </Field>

src/core/client/admin/routes/Community/InviteUsers/RoleField.tsx

@@ -22,13 +22,8 @@ const RoleField: FunctionComponent<Props> = ({ disabled }) => (
           <Localized id="role-staff">
             <RadioButton
               id={`${input.name}-staff`}
-              name={input.name}
-              onChange={input.onChange}
-              onFocus={input.onFocus}
-              onBlur={input.onBlur}
-              checked={input.checked}
-              value={input.value}
               disabled={disabled}
+              {...input}
             >
               Staff
             </RadioButton>
@@ -40,13 +35,8 @@ const RoleField: FunctionComponent<Props> = ({ disabled }) => (
           <Localized id="role-moderator">
             <RadioButton
               id={`${input.name}-moderator`}
-              name={input.name}
-              onChange={input.onChange}
-              onFocus={input.onFocus}
-              onBlur={input.onBlur}
-              checked={input.checked}
-              value={input.value}
               disabled={disabled}
+              {...input}
             >
               Moderator
             </RadioButton>
@@ -58,13 +48,8 @@ const RoleField: FunctionComponent<Props> = ({ disabled }) => (
           <Localized id="role-admin">
             <RadioButton
               id={`${input.name}-admin`}
-              name={input.name}
-              onChange={input.onChange}
-              onFocus={input.onFocus}
-              onBlur={input.onBlur}
-              checked={input.checked}
-              value={input.value}
               disabled={disabled}
+              {...input}
             >
               Admin
             </RadioButton>

src/core/client/admin/routes/Community/UserTableFilter.tsx

@@ -74,10 +74,8 @@ const UserTableFilter: FunctionComponent<Props> = props => (
                       className={styles.textField}
                       placeholder="Search by username or email address..."
                       aria-label="Search by username or email address"
-                      name={input.name}
-                      onChange={input.onChange}
-                      value={input.value}
                       variant="seamlessAdornment"
+                      {...input}
                       adornment={
                         <Localized
                           id="community-filter-searchButton"

src/core/client/admin/routes/Configure/OnOffField.tsx

@@ -35,16 +35,7 @@ const OnOffField: FunctionComponent<Props> = ({
       format={format}
     >
       {({ input }) => (
-        <RadioButton
-          id={`${input.name}-true`}
-          name={input.name}
-          onChange={input.onChange}
-          onFocus={input.onFocus}
-          onBlur={input.onBlur}
-          checked={input.checked}
-          disabled={disabled}
-          value={input.value}
-        >
+        <RadioButton id={`${input.name}-true`} disabled={disabled} {...input}>
           {onLabel || (
             <Localized id="configure-onOffField-on">
               <span>On</span>
@@ -61,16 +52,7 @@ const OnOffField: FunctionComponent<Props> = ({
       value={invert}
     >
       {({ input }) => (
-        <RadioButton
-          id={`${input.name}-false`}
-          name={input.name}
-          onChange={input.onChange}
-          onFocus={input.onFocus}
-          onBlur={input.onBlur}
-          checked={input.checked}
-          disabled={disabled}
-          value={input.value}
-        >
+        <RadioButton id={`${input.name}-false`} disabled={disabled} {...input}>
           {offLabel || (
             <Localized id="configure-onOffField-off">
               <span>Off</span>

src/core/client/admin/routes/Configure/PermissionField.tsx

@@ -24,13 +24,8 @@ const PermissionField: FunctionComponent<Props> = ({
         <Localized id="configure-permissionField-allow">
           <RadioButton
             id={`${input.name}-allow`}
-            name={input.name}
-            onChange={input.onChange}
-            onFocus={input.onFocus}
-            onBlur={input.onBlur}
-            checked={input.checked}
             disabled={disabled}
-            value={input.value}
+            {...input}
           >
             Allow
           </RadioButton>
@@ -42,13 +37,8 @@ const PermissionField: FunctionComponent<Props> = ({
         <Localized id="configure-permissionField-dontAllow">
           <RadioButton
             id={`${input.name}-dontAllow`}
-            name={input.name}
-            onChange={input.onChange}
-            onFocus={input.onFocus}
-            onBlur={input.onBlur}
-            checked={input.checked}
             disabled={disabled}
-            value={input.value}
+            {...input}
           >
             Don't allow
           </RadioButton>

src/core/client/admin/routes/Configure/ValidationMessage.tsx

@@ -1,18 +1,14 @@
 import React, { FunctionComponent } from "react";
 
-import { ValidationMessage as UIValidationMessage } from "coral-ui/components";
+import { ValidationMessage as FrameworkValidationMessage } from "coral-framework/lib/form";
 import { PropTypesOf } from "coral-ui/types";
 
 import styles from "./ValidationMessage.css";
 
-interface Props extends PropTypesOf<typeof UIValidationMessage> {
-  children: React.ReactNode;
-}
+type Props = PropTypesOf<typeof FrameworkValidationMessage>;
 
-const ValidationMessage: FunctionComponent<Props> = ({ children, ...rest }) => (
-  <UIValidationMessage {...rest} className={styles.root}>
-    {children}
-  </UIValidationMessage>
+const ValidationMessage: FunctionComponent<Props> = props => (
+  <FrameworkValidationMessage className={styles.root} {...props} />
 );
 
 export default ValidationMessage;

src/core/client/admin/routes/Configure/sections/Advanced/CustomCSSConfig.tsx

@@ -2,13 +2,16 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import { formatEmpty, parseEmptyAsNull } from "coral-framework/lib/form";
+import {
+  formatEmpty,
+  parseEmptyAsNull,
+  ValidationMessage,
+} from "coral-framework/lib/form";
 import {
   FormField,
   HorizontalGutter,
   TextField,
   Typography,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import Header from "../../Header";
@@ -39,21 +42,15 @@ const CustomCSSConfig: FunctionComponent<Props> = ({ disabled }) => (
           <>
             <TextField
               id={`configure-advanced-${input.name}`}
-              name={input.name}
-              onChange={input.onChange}
-              value={input.value}
               disabled={disabled}
               autoComplete="off"
               autoCorrect="off"
               autoCapitalize="off"
               spellCheck={false}
               fullWidth
+              {...input}
             />
-            {meta.touched && (meta.error || meta.submitError) && (
-              <ValidationMessage fullWidth>
-                {meta.error || meta.submitError}
-              </ValidationMessage>
-            )}
+            <ValidationMessage meta={meta} fullWidth />
           </>
         )}
       </Field>

src/core/client/admin/routes/Configure/sections/Advanced/PermittedDomainsConfig.tsx

@@ -2,13 +2,17 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import { formatStringList, parseStringList } from "coral-framework/lib/form";
+import {
+  colorFromMeta,
+  formatStringList,
+  parseStringList,
+  ValidationMessage,
+} from "coral-framework/lib/form";
 import {
   FormField,
   HorizontalGutter,
   TextField,
   Typography,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import Header from "../../Header";
@@ -45,21 +49,16 @@ const PermittedDomainsConfig: FunctionComponent<Props> = ({ disabled }) => (
           <>
             <TextField
               id={`configure-advanced-${input.name}`}
-              name={input.name}
-              onChange={input.onChange}
-              value={input.value}
               disabled={disabled}
+              color={colorFromMeta(meta)}
               autoComplete="off"
               autoCorrect="off"
               autoCapitalize="off"
               spellCheck={false}
+              {...input}
               fullWidth
             />
-            {meta.touched && (meta.error || meta.submitError) && (
-              <ValidationMessage fullWidth>
-                {meta.error || meta.submitError}
-              </ValidationMessage>
-            )}
+            <ValidationMessage meta={meta} fullWidth />
           </>
         )}
       </Field>

src/core/client/admin/routes/Configure/sections/Auth/AuthConfig.tsx

@@ -3,12 +3,13 @@ import React, { FunctionComponent } from "react";
 import { PropTypesOf } from "coral-framework/types";
 import { HorizontalGutter } from "coral-ui/components";
 
+import { OnInitValuesFct } from "./AuthConfigContainer";
 import AuthIntegrationsConfig from "./AuthIntegrationsConfig";
 
 interface Props {
   disabled?: boolean;
   auth: PropTypesOf<typeof AuthIntegrationsConfig>["auth"];
-  onInitValues: (values: any) => void;
+  onInitValues: OnInitValuesFct;
 }
 
 const AuthConfig: FunctionComponent<Props> = ({

src/core/client/admin/routes/Configure/sections/Auth/AuthConfigContainer.tsx

@@ -1,11 +1,11 @@
 import { FORM_ERROR, FormApi } from "final-form";
 import { Localized } from "fluent-react/compat";
 import { RouteProps } from "found";
-import { get } from "lodash";
 import React from "react";
 import { graphql } from "react-relay";
 
 import { AuthConfigContainer_auth as AuthData } from "coral-admin/__generated__/AuthConfigContainer_auth.graphql";
+import { DeepNullable, DeepPartial } from "coral-common/types";
 import { pureMerge } from "coral-common/utils";
 import { CoralContext, withContext } from "coral-framework/lib/bootstrap";
 import {
@@ -16,20 +16,24 @@ import {
 } from "coral-framework/lib/form";
 import { getMessage } from "coral-framework/lib/i18n";
 import { withFragmentContainer } from "coral-framework/lib/relay";
+import { GQLSettings } from "coral-framework/schema";
 
 import AuthConfig from "./AuthConfig";
 
+export type FormProps = DeepNullable<Pick<GQLSettings, "auth">>;
+export type OnInitValuesFct = (values: DeepPartial<FormProps>) => void;
+
 interface Props {
   localeBundles: CoralContext["localeBundles"];
   form: FormApi;
   submitting?: boolean;
-  addSubmitHook: AddSubmitHook;
+  addSubmitHook: AddSubmitHook<FormProps>;
   auth: AuthData;
 }
 
 class AuthConfigContainer extends React.Component<Props> {
   public static routeConfig: RouteProps;
-  private initialValues = {};
+  private initialValues: DeepPartial<FormProps> = {};
   private removeSubmitHook: RemoveSubmitHook;
 
   constructor(props: Props) {
@@ -38,22 +42,26 @@ class AuthConfigContainer extends React.Component<Props> {
   }
 
   public componentDidMount() {
-    this.props.form.initialize({ auth: this.initialValues });
+    this.props.form.initialize(this.initialValues);
   }
 
   public componentWillUnmount() {
     this.removeSubmitHook();
   }
 
-  private submitHook: SubmitHook = async (data, { cancel }) => {
+  private submitHook: SubmitHook<FormProps> = async (data, { cancel }) => {
     const integrations = [
-      get(data, "auth.integrations.google"),
-      get(data, "auth.integrations.facebook"),
-      get(data, "auth.integrations.sso"),
-      get(data, "auth.integrations.local"),
-      get(data, "auth.integrations.oidc"),
+      data.auth.integrations.google,
+      data.auth.integrations.facebook,
+      data.auth.integrations.sso,
+      data.auth.integrations.local,
+      data.auth.integrations.oidc,
     ];
-    if (!integrations.some((i: any) => i.enabled && i.targetFilter.admin)) {
+    if (
+      !integrations.some(integration =>
+        Boolean(integration.enabled && integration.targetFilter.admin)
+      )
+    ) {
       cancel({
         [FORM_ERROR]: (
           <Localized id="configure-auth-pleaseEnableAuthForAdmin">
@@ -65,7 +73,9 @@ class AuthConfigContainer extends React.Component<Props> {
         ),
       });
     } else if (
-      !integrations.some((i: any) => i.enabled && i.targetFilter.stream)
+      !integrations.some(integration =>
+        Boolean(integration.enabled && integration.targetFilter.stream)
+      )
     ) {
       const confirmMessage = getMessage(
         this.props.localeBundles,
@@ -80,7 +90,7 @@ class AuthConfigContainer extends React.Component<Props> {
     return;
   };
 
-  private handleOnInitValues = (values: any) => {
+  private handleOnInitValues: OnInitValuesFct = values => {
     this.initialValues = pureMerge(this.initialValues, values);
   };
 

src/core/client/admin/routes/Configure/sections/Auth/AuthIntegrationsConfig.tsx

@@ -5,6 +5,7 @@ import { PropTypesOf } from "coral-framework/types";
 import { HorizontalGutter } from "coral-ui/components";
 
 import Header from "../../Header";
+import { OnInitValuesFct } from "./AuthConfigContainer";
 import FacebookConfigContainer from "./FacebookConfigContainer";
 import GoogleConfigContainer from "./GoogleConfigContainer";
 import LocalAuthConfigContainer from "./LocalAuthConfigContainer";
@@ -22,7 +23,7 @@ interface Props {
     PropTypesOf<typeof LocalAuthConfigContainer>["auth"] &
     PropTypesOf<typeof OIDCConfigContainer>["auth"] &
     PropTypesOf<typeof OIDCConfigContainer>["authReadOnly"];
-  onInitValues: (values: any) => void;
+  onInitValues: OnInitValuesFct;
 }
 
 const AuthIntegrationsConfig: FunctionComponent<Props> = ({

src/core/client/admin/routes/Configure/sections/Auth/ClientIDField.tsx

@@ -3,6 +3,7 @@ import { identity } from "lodash";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
+import { colorFromMeta } from "coral-framework/lib/form";
 import { Validator } from "coral-framework/lib/validation";
 import { FormField, InputLabel, TextField } from "coral-ui/components";
 
@@ -27,20 +28,15 @@ const ClientSecretField: FunctionComponent<Props> = ({
       {({ input, meta }) => (
         <>
           <TextField
-            name={input.name}
-            onChange={input.onChange}
-            value={input.value}
             disabled={disabled}
             autoComplete="off"
             autoCorrect="off"
             autoCapitalize="off"
+            color={colorFromMeta(meta)}
+            {...input}
             spellCheck={false}
           />
-          {meta.touched && (meta.error || meta.submitError) && (
-            <ValidationMessage>
-              {meta.error || meta.submitError}
-            </ValidationMessage>
-          )}
+          <ValidationMessage meta={meta} />
         </>
       )}
     </Field>

src/core/client/admin/routes/Configure/sections/Auth/ClientSecretField.tsx

@@ -3,11 +3,10 @@ import { identity } from "lodash";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
+import { ValidationMessage } from "coral-framework/lib/form";
 import { Validator } from "coral-framework/lib/validation";
 import { FormField, InputLabel, PasswordField } from "coral-ui/components";
 
-import ValidationMessage from "../../ValidationMessage";
-
 interface Props {
   validate?: Validator;
   name: string;
@@ -32,19 +31,14 @@ const ClientSecretField: FunctionComponent<Props> = ({
       {({ input, meta }) => (
         <>
           <PasswordField
-            name={input.name}
-            onChange={input.onChange}
-            value={input.value}
-            disabled={disabled}
+            disabled={disabled || meta.submitting}
+            autoComplete="new-password"
             // TODO: (wyattjoh) figure out how to add translations to these props
             hidePasswordTitle="Show Client Secret"
             showPasswordTitle="Hide Client Secret"
+            {...input}
           />
-          {meta.touched && (meta.error || meta.submitError) && (
-            <ValidationMessage>
-              {meta.error || meta.submitError}
-            </ValidationMessage>
-          )}
+          <ValidationMessage meta={meta} />
         </>
       )}
     </Field>

src/core/client/admin/routes/Configure/sections/Auth/ConfigBoxWithToggleField.tsx

@@ -32,14 +32,7 @@ const ConfigBoxWithToggleField: FunctionComponent<Props> = ({
         topRight={
           <FormField>
             <Localized id="configure-auth-configBoxEnabled">
-              <CheckBox
-                id={input.name}
-                name={input.name}
-                onChange={input.onChange}
-                checked={input.value}
-                disabled={disabled}
-                light
-              >
+              <CheckBox id={input.name} disabled={disabled} light {...input}>
                 Enabled
               </CheckBox>
             </Localized>

src/core/client/admin/routes/Configure/sections/Auth/FacebookConfig.tsx

@@ -1,7 +1,11 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { required, Validator } from "coral-framework/lib/validation";
+import {
+  Condition,
+  required,
+  validateWhen,
+} from "coral-framework/lib/validation";
 import { HorizontalGutter, TextLink, Typography } from "coral-ui/components";
 
 import HorizontalRule from "../../HorizontalRule";
@@ -23,15 +27,8 @@ const FacebookLink = () => (
   </TextLink>
 );
 
-const validateWhenEnabled = (validator: Validator): Validator => (
-  v,
-  values
-) => {
-  if (values.auth.integrations.facebook.enabled) {
-    return validator(v, values);
-  }
-  return "";
-};
+const isEnabled: Condition = (value, values) =>
+  Boolean(values.auth.integrations.facebook.enabled);
 
 const FacebookConfig: FunctionComponent<Props> = ({
   disabled,
@@ -65,12 +62,12 @@ const FacebookConfig: FunctionComponent<Props> = ({
         <HorizontalRule />
         <ClientIDField
           name="auth.integrations.facebook.clientID"
-          validate={validateWhenEnabled(required)}
+          validate={validateWhen(isEnabled, required)}
           disabled={disabledInside}
         />
         <ClientSecretField
           name="auth.integrations.facebook.clientSecret"
-          validate={validateWhenEnabled(required)}
+          validate={validateWhen(isEnabled, required)}
           disabled={disabledInside}
         />
         <TargetFilterField

src/core/client/admin/routes/Configure/sections/Auth/FacebookConfigContainer.tsx

@@ -5,19 +5,20 @@ import { FacebookConfigContainer_auth as AuthData } from "coral-admin/__generate
 import { FacebookConfigContainer_authReadOnly as AuthReadOnlyData } from "coral-admin/__generated__/FacebookConfigContainer_authReadOnly.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 
+import { OnInitValuesFct } from "./AuthConfigContainer";
 import FacebookConfig from "./FacebookConfig";
 
 interface Props {
   auth: AuthData;
   authReadOnly: AuthReadOnlyData;
-  onInitValues: (values: AuthData) => void;
+  onInitValues: OnInitValuesFct;
   disabled?: boolean;
 }
 
 class FacebookConfigContainer extends React.Component<Props> {
   constructor(props: Props) {
     super(props);
-    props.onInitValues(props.auth);
+    props.onInitValues({ auth: props.auth });
   }
 
   public render() {

src/core/client/admin/routes/Configure/sections/Auth/GoogleConfig.tsx

@@ -1,7 +1,11 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 
-import { required, Validator } from "coral-framework/lib/validation";
+import {
+  Condition,
+  required,
+  validateWhen,
+} from "coral-framework/lib/validation";
 import { HorizontalGutter, TextLink, Typography } from "coral-ui/components";
 
 import HorizontalRule from "../../HorizontalRule";
@@ -25,15 +29,8 @@ const GoogleLink = () => (
   </TextLink>
 );
 
-const validateWhenEnabled = (validator: Validator): Validator => (
-  v,
-  values
-) => {
-  if (values.auth.integrations.google.enabled) {
-    return validator(v, values);
-  }
-  return "";
-};
+const isEnabled: Condition = (value, values) =>
+  Boolean(values.auth.integrations.google.enabled);
 
 const GoogleConfig: FunctionComponent<Props> = ({ disabled, callbackURL }) => (
   <ConfigBoxWithToggleField
@@ -65,12 +62,12 @@ const GoogleConfig: FunctionComponent<Props> = ({ disabled, callbackURL }) => (
         <HorizontalRule />
         <ClientIDField
           name="auth.integrations.google.clientID"
-          validate={validateWhenEnabled(required)}
+          validate={validateWhen(isEnabled, required)}
           disabled={disabledInside}
         />
         <ClientSecretField
           name="auth.integrations.google.clientSecret"
-          validate={validateWhenEnabled(required)}
+          validate={validateWhen(isEnabled, required)}
           disabled={disabledInside}
         />
         <TargetFilterField

src/core/client/admin/routes/Configure/sections/Auth/GoogleConfigContainer.tsx

@@ -5,19 +5,20 @@ import { GoogleConfigContainer_auth as AuthData } from "coral-admin/__generated_
 import { GoogleConfigContainer_authReadOnly as AuthReadOnlyData } from "coral-admin/__generated__/GoogleConfigContainer_authReadOnly.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 
+import { OnInitValuesFct } from "./AuthConfigContainer";
 import GoogleConfig from "./GoogleConfig";
 
 interface Props {
   auth: AuthData;
   authReadOnly: AuthReadOnlyData;
-  onInitValues: (values: AuthData) => void;
+  onInitValues: OnInitValuesFct;
   disabled?: boolean;
 }
 
 class GoogleConfigContainer extends React.Component<Props> {
   constructor(props: Props) {
     super(props);
-    props.onInitValues(props.auth);
+    props.onInitValues({ auth: props.auth });
   }
 
   public render() {

src/core/client/admin/routes/Configure/sections/Auth/LocalAuthConfigContainer.tsx

@@ -4,18 +4,19 @@ import { graphql } from "react-relay";
 import { LocalAuthConfigContainer_auth as AuthData } from "coral-admin/__generated__/LocalAuthConfigContainer_auth.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 
+import { OnInitValuesFct } from "./AuthConfigContainer";
 import LocalAuthConfig from "./LocalAuthConfig";
 
 interface Props {
   auth: AuthData;
-  onInitValues: (values: AuthData) => void;
+  onInitValues: OnInitValuesFct;
   disabled?: boolean;
 }
 
 class LocalAuthConfigContainer extends React.Component<Props> {
   constructor(props: Props) {
     super(props);
-    props.onInitValues(props.auth);
+    props.onInitValues({ auth: props.auth });
   }
 
   public render() {

src/core/client/admin/routes/Configure/sections/Auth/OIDCConfig.tsx

@@ -3,11 +3,12 @@ import { identity } from "lodash";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
+import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
 import {
-  composeValidators,
+  composeValidatorsWhen,
+  Condition,
   required,
   validateURL,
-  Validator,
 } from "coral-framework/lib/validation";
 import {
   Button,
@@ -21,7 +22,7 @@ import {
 } from "coral-ui/components";
 
 import HorizontalRule from "../../HorizontalRule";
-import ValidationMessage from "../../ValidationMessage";
+import { FormProps } from "./AuthConfigContainer";
 import ClientIDField from "./ClientIDField";
 import ClientSecretField from "./ClientSecretField";
 import ConfigBoxWithToggleField from "./ConfigBoxWithToggleField";
@@ -41,21 +42,15 @@ const OIDCLink = () => (
   <TextLink target="_blank">{"https://openid.net/connect/"}</TextLink>
 );
 
+const isEnabled: Condition<any, FormProps> = (value, values) =>
+  Boolean(values.auth.integrations.oidc.enabled);
+
 const OIDCConfig: FunctionComponent<Props> = ({
   disabled,
   callbackURL,
   onDiscover,
   disableForDiscover,
 }) => {
-  const validateWhenEnabled = (validator: Validator): Validator => (
-    v,
-    values
-  ) => {
-    if (values.auth.integrations.oidc.enabled) {
-      return validator(v, values);
-    }
-    return "";
-  };
   return (
     <ConfigBoxWithToggleField
       data-testid={`configure-auth-oidc-container`}
@@ -90,37 +85,32 @@ const OIDCConfig: FunctionComponent<Props> = ({
             </Localized>
             <Field
               name={`auth.integrations.oidc.name`}
-              validate={validateWhenEnabled(required)}
+              validate={composeValidatorsWhen(isEnabled, required)}
               parse={identity}
             >
               {({ input, meta }) => (
                 <>
                   <TextField
-                    name={input.name}
-                    onChange={input.onChange}
-                    value={input.value}
                     disabled={disabledInside}
                     autoComplete="off"
                     autoCorrect="off"
                     autoCapitalize="off"
                     spellCheck={false}
+                    color={colorFromMeta(meta)}
+                    {...input}
                   />
-                  {meta.touched && (meta.error || meta.submitError) && (
-                    <ValidationMessage>
-                      {meta.error || meta.submitError}
-                    </ValidationMessage>
-                  )}
+                  <ValidationMessage meta={meta} />
                 </>
               )}
             </Field>
           </FormField>
           <ClientIDField
-            validate={validateWhenEnabled(required)}
+            validate={composeValidatorsWhen(isEnabled, required)}
             name={`auth.integrations.oidc.clientID`}
             disabled={disabledInside}
           />
           <ClientSecretField
-            validate={validateWhenEnabled(required)}
+            validate={composeValidatorsWhen(isEnabled, required)}
             name={`auth.integrations.oidc.clientSecret`}
             disabled={disabledInside}
           />
@@ -137,23 +127,20 @@ const OIDCConfig: FunctionComponent<Props> = ({
             </Localized>
             <Field
               name={`auth.integrations.oidc.issuer`}
-              validate={validateWhenEnabled(
-                composeValidators(required, validateURL)
-              )}
+              validate={composeValidatorsWhen(isEnabled, required, validateURL)}
               parse={identity}
             >
               {({ input, meta }) => (
                 <>
                   <Flex direction="row" itemGutter="half" alignItems="center">
                     <TextField
-                      name={input.name}
-                      onChange={input.onChange}
-                      value={input.value}
                       disabled={disabledInside || disableForDiscover}
                       autoComplete="off"
                       autoCorrect="off"
                       autoCapitalize="off"
                       spellCheck={false}
+                      color={colorFromMeta(meta)}
+                      {...input}
                     />
                     <Button
                       id="configure-auth-oidc-discover"
@@ -166,11 +153,7 @@ const OIDCConfig: FunctionComponent<Props> = ({
                       Discover
                     </Button>
                   </Flex>
-                  {meta.touched && (meta.error || meta.submitError) && (
-                    <ValidationMessage>
-                      {meta.error || meta.submitError}
-                    </ValidationMessage>
-                  )}
+                  <ValidationMessage meta={meta} />
                 </>
               )}
             </Field>
@@ -181,28 +164,21 @@ const OIDCConfig: FunctionComponent<Props> = ({
             </Localized>
             <Field
               name={`auth.integrations.oidc.authorizationURL`}
-              validate={validateWhenEnabled(
-                composeValidators(required, validateURL)
-              )}
+              validate={composeValidatorsWhen(isEnabled, required, validateURL)}
               parse={identity}
             >
               {({ input, meta }) => (
                 <>
                   <TextField
-                    name={input.name}
-                    onChange={input.onChange}
-                    value={input.value}
                     disabled={disabledInside || disableForDiscover}
                     autoComplete="off"
                     autoCorrect="off"
                     autoCapitalize="off"
                     spellCheck={false}
+                    color={colorFromMeta(meta)}
+                    {...input}
                   />
-                  {meta.touched && (meta.error || meta.submitError) && (
-                    <ValidationMessage>
-                      {meta.error || meta.submitError}
-                    </ValidationMessage>
-                  )}
+                  <ValidationMessage meta={meta} />
                 </>
               )}
             </Field>
@@ -213,28 +189,21 @@ const OIDCConfig: FunctionComponent<Props> = ({
             </Localized>
             <Field
               name={`auth.integrations.oidc.tokenURL`}
-              validate={validateWhenEnabled(
-                composeValidators(required, validateURL)
-              )}
+              validate={composeValidatorsWhen(isEnabled, required, validateURL)}
               parse={identity}
             >
               {({ input, meta }) => (
                 <>
                   <TextField
-                    name={input.name}
-                    onChange={input.onChange}
-                    value={input.value}
                     disabled={disabledInside || disableForDiscover}
                     autoComplete="off"
                     autoCorrect="off"
                     autoCapitalize="off"
                     spellCheck={false}
+                    color={colorFromMeta(meta)}
+                    {...input}
                   />
-                  {meta.touched && (meta.error || meta.submitError) && (
-                    <ValidationMessage>
-                      {meta.error || meta.submitError}
-                    </ValidationMessage>
-                  )}
+                  <ValidationMessage meta={meta} />
                 </>
               )}
             </Field>
@@ -245,28 +214,21 @@ const OIDCConfig: FunctionComponent<Props> = ({
             </Localized>
             <Field
               name={`auth.integrations.oidc.jwksURI`}
-              validate={validateWhenEnabled(
-                composeValidators(required, validateURL)
-              )}
+              validate={composeValidatorsWhen(isEnabled, required, validateURL)}
               parse={identity}
             >
               {({ input, meta }) => (
                 <>
                   <TextField
-                    name={input.name}
-                    onChange={input.onChange}
-                    value={input.value}
                     disabled={disabledInside || disableForDiscover}
                     autoComplete="off"
                     autoCorrect="off"
                     autoCapitalize="off"
                     spellCheck={false}
+                    color={colorFromMeta(meta)}
+                    {...input}
                   />
-                  {meta.touched && (meta.error || meta.submitError) && (
-                    <ValidationMessage>
-                      {meta.error || meta.submitError}
-                    </ValidationMessage>
-                  )}
+                  <ValidationMessage meta={meta} />
                 </>
               )}
             </Field>

src/core/client/admin/routes/Configure/sections/Auth/OIDCConfigContainer.tsx

@@ -12,13 +12,14 @@ import {
   withFragmentContainer,
 } from "coral-framework/lib/relay";
 
+import { OnInitValuesFct } from "./AuthConfigContainer";
 import DiscoverOIDCConfigurationFetch from "./DiscoverOIDCConfigurationFetch";
 import OIDCConfig from "./OIDCConfig";
 
 interface Props {
   auth: AuthData;
   authReadOnly: AuthReadOnlyData;
-  onInitValues: (values: AuthData) => void;
+  onInitValues: OnInitValuesFct;
   disabled?: boolean;
   discoverOIDCConfiguration: FetchProp<typeof DiscoverOIDCConfigurationFetch>;
   reactFinalForm: FormApi;
@@ -49,6 +50,7 @@ class OIDCConfigContainer extends React.Component<Props, State> {
         form.change("auth.integrations.oidc.tokenURL", config.tokenURL);
       }
     } catch (error) {
+      // FIXME: (wyattjoh) handle error
       // tslint:disable-next-line:no-console
       console.warn(error);
     }
@@ -57,7 +59,7 @@ class OIDCConfigContainer extends React.Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    props.onInitValues(props.auth);
+    props.onInitValues({ auth: props.auth });
   }
 
   public render() {

src/core/client/admin/routes/Configure/sections/Auth/RegistrationField.tsx

@@ -25,13 +25,7 @@ const RegistrationField: FunctionComponent<Props> = ({ name, disabled }) => (
       <Field name={name} type="checkbox">
         {({ input }) => (
           <Localized id="configure-auth-registrationCheckBox">
-            <CheckBox
-              id={input.name}
-              name={input.name}
-              onChange={input.onChange}
-              checked={input.value}
-              disabled={disabled}
-            >
+            <CheckBox id={input.name} disabled={disabled} {...input}>
               Allow Registration
             </CheckBox>
           </Localized>

src/core/client/admin/routes/Configure/sections/Auth/SSOConfigContainer.tsx

@@ -5,19 +5,20 @@ import { SSOConfigContainer_auth as AuthData } from "coral-admin/__generated__/S
 import { SSOConfigContainer_authReadOnly as AuthReadOnlyData } from "coral-admin/__generated__/SSOConfigContainer_authReadOnly.graphql";
 import { withFragmentContainer } from "coral-framework/lib/relay";
 
+import { OnInitValuesFct } from "./AuthConfigContainer";
 import SSOConfig from "./SSOConfig";
 
 interface Props {
   auth: AuthData;
   authReadOnly: AuthReadOnlyData;
-  onInitValues: (values: AuthData) => void;
+  onInitValues: OnInitValuesFct;
   disabled?: boolean;
 }
 
 class SSOConfigContainer extends React.Component<Props> {
   constructor(props: Props) {
     super(props);
-    props.onInitValues(props.auth);
+    props.onInitValues({ auth: props.auth });
   }
 
   public render() {

src/core/client/admin/routes/Configure/sections/Auth/TargetFilterField.tsx

@@ -20,15 +20,9 @@ const TargetFilterField: FunctionComponent<Props> = ({
     <InputLabel>{label}</InputLabel>
     <Flex direction="row" itemGutter="double">
       <Field name={`${name}.admin`} type="checkbox" parse={parseBool}>
-        {({ input, meta }) => (
+        {({ input }) => (
           <Localized id="configure-auth-targetFilterCoralAdmin">
-            <CheckBox
-              id={input.name}
-              name={input.name}
-              onChange={input.onChange}
-              checked={!!input.value}
-              disabled={disabled}
-            >
+            <CheckBox id={input.name} disabled={disabled} {...input}>
               Coral Admin
             </CheckBox>
           </Localized>
@@ -37,13 +31,7 @@ const TargetFilterField: FunctionComponent<Props> = ({
       <Field name={`${name}.stream`} type="checkbox" parse={parseBool}>
         {({ input }) => (
           <Localized id="configure-auth-targetFilterCommentStream">
-            <CheckBox
-              id={input.name}
-              name={input.name}
-              onChange={input.onChange}
-              checked={!!input.value}
-              disabled={disabled}
-            >
+            <CheckBox id={input.name} disabled={disabled} {...input}>
               Comment Stream
             </CheckBox>
           </Localized>

src/core/client/admin/routes/Configure/sections/Email/EmailConfigContainer.tsx

@@ -10,7 +10,7 @@ import { DeepNullable, DeepPartial } from "coral-common/types";
 import { pureMerge } from "coral-common/utils";
 import { parseBool } from "coral-framework/lib/form";
 import { withFragmentContainer } from "coral-framework/lib/relay";
-import { GQLEmailConfiguration } from "coral-framework/schema";
+import { GQLSettings } from "coral-framework/schema";
 import {
   CheckBox,
   Flex,
@@ -30,7 +30,7 @@ interface Props {
   email: EmailConfigContainer_email;
 }
 
-export type FormProps = DeepNullable<GQLEmailConfiguration>;
+export type FormProps = DeepNullable<Pick<GQLSettings, "email">>;
 export type OnInitValuesFct = (values: DeepPartial<FormProps>) => void;
 
 class EmailConfigContainer extends React.Component<Props> {
@@ -38,15 +38,33 @@ class EmailConfigContainer extends React.Component<Props> {
   private initialValues: DeepPartial<FormProps> = {};
 
   public componentDidMount() {
-    this.props.form.initialize({ email: this.initialValues });
+    this.props.form.initialize(this.initialValues);
   }
 
   private handleOnInitValues: OnInitValuesFct = values => {
-    if (values.smtp && values.smtp.authentication === null) {
-      values = { ...values, smtp: { ...values.smtp, authentication: true } };
+    if (
+      values.email &&
+      values.email.smtp &&
+      values.email.smtp.authentication === null
+    ) {
+      values = {
+        email: {
+          ...values.email,
+          smtp: { ...values.email.smtp, authentication: true },
+        },
+      };
     }
-    if (values.smtp && values.smtp.secure === null) {
-      values = { ...values, smtp: { ...values.smtp, secure: true } };
+    if (
+      values.email &&
+      values.email.smtp &&
+      values.email.smtp.secure === null
+    ) {
+      values = {
+        email: {
+          ...values.email,
+          smtp: { ...values.email.smtp, secure: true },
+        },
+      };
     }
 
     this.initialValues = pureMerge<DeepPartial<FormProps>>(
@@ -74,13 +92,7 @@ class EmailConfigContainer extends React.Component<Props> {
               <div>
                 <FormField>
                   <Localized id="configure-email-configBoxEnabled">
-                    <CheckBox
-                      id={input.name}
-                      name={input.name}
-                      onChange={input.onChange}
-                      checked={input.value}
-                      disabled={submitting}
-                    >
+                    <CheckBox id={input.name} {...input} disabled={submitting}>
                       Enabled
                     </CheckBox>
                   </Localized>

src/core/client/admin/routes/Configure/sections/Email/From.tsx

@@ -2,6 +2,7 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
+import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
 import { validateEmail } from "coral-framework/lib/validation";
 import {
   FieldSet,
@@ -10,7 +11,6 @@ import {
   InputDescription,
   InputLabel,
   TextField,
-  ValidationMessage,
 } from "coral-ui/components";
 
 interface Props {
@@ -31,12 +31,13 @@ const From: FunctionComponent<Props> = ({ disabled }) => (
       <Field name="email.fromName">
         {({ input, meta }) => (
           <>
-            <TextField fullWidth disabled={disabled} {...input} />
-            {meta.touched && (meta.error || meta.submitError) && (
-              <ValidationMessage fullWidth>
-                {meta.error || meta.submitError}
-              </ValidationMessage>
-            )}
+            <TextField
+              fullWidth
+              disabled={disabled}
+              color={colorFromMeta(meta)}
+              {...input}
+            />
+            <ValidationMessage fullWidth meta={meta} />
           </>
         )}
       </Field>
@@ -56,19 +57,11 @@ const From: FunctionComponent<Props> = ({ disabled }) => (
             <TextField
               type="email"
               fullWidth
-              color={
-                meta.touched && (meta.error || meta.submitError)
-                  ? "error"
-                  : "regular"
-              }
+              color={colorFromMeta(meta)}
               disabled={disabled}
               {...input}
             />
-            {meta.touched && (meta.error || meta.submitError) && (
-              <ValidationMessage fullWidth>
-                {meta.error || meta.submitError}
-              </ValidationMessage>
-            )}
+            <ValidationMessage fullWidth meta={meta} />
           </>
         )}
       </Field>

src/core/client/admin/routes/Configure/sections/Email/FromContainer.tsx

@@ -16,7 +16,7 @@ interface Props {
 class FromContainer extends React.Component<Props> {
   constructor(props: Props) {
     super(props);
-    props.onInitValues(props.email);
+    props.onInitValues({ email: props.email });
   }
 
   public render() {

src/core/client/admin/routes/Configure/sections/Email/SMTP.tsx

@@ -2,6 +2,12 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
+import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
+import {
+  composeValidatorsWhen,
+  Condition,
+  required,
+} from "coral-framework/lib/validation";
 import {
   FieldSet,
   FormField,
@@ -10,16 +16,22 @@ import {
   InputLabel,
   PasswordField,
   TextField,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import OnOffField from "../../OnOffField";
 import Subheader from "../../Subheader";
+import { FormProps } from "./EmailConfigContainer";
 
 interface Props {
   disabled: boolean;
 }
 
+const isEnabled: Condition<any, FormProps> = (value, values) =>
+  Boolean(values.email.enabled);
+
+const isAuthenticating: Condition<any, FormProps> = (value, values) =>
+  Boolean(values.email.enabled && values.email.smtp.authentication);
+
 const SMTP: FunctionComponent<Props> = ({ disabled }) => (
   <HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
     <FormField>
@@ -29,20 +41,20 @@ const SMTP: FunctionComponent<Props> = ({ disabled }) => (
       <Localized id="configure-email-smtpHostDescription">
         <InputDescription>(ex. smtp.sendgrid.com)</InputDescription>
       </Localized>
-      <Field name="email.smtp.host">
+      <Field
+        name="email.smtp.host"
+        validate={composeValidatorsWhen(isEnabled, required)}
+      >
         {({ input, meta }) => (
           <>
             <TextField
               id={input.name}
               fullWidth
               disabled={disabled}
+              color={colorFromMeta(meta)}
               {...input}
             />
-            {meta.touched && (meta.error || meta.submitError) && (
-              <ValidationMessage fullWidth>
-                {meta.error || meta.submitError}
-              </ValidationMessage>
-            )}
+            <ValidationMessage fullWidth meta={meta} />
           </>
         )}
       </Field>
@@ -54,7 +66,10 @@ const SMTP: FunctionComponent<Props> = ({ disabled }) => (
       <Localized id="configure-email-smtpPortDescription">
         <InputDescription>(ex. 25)</InputDescription>
       </Localized>
-      <Field name="email.smtp.port">
+      <Field
+        name="email.smtp.port"
+        validate={composeValidatorsWhen(isEnabled, required)}
+      >
         {({ input, meta }) => (
           <>
             <TextField
@@ -62,13 +77,10 @@ const SMTP: FunctionComponent<Props> = ({ disabled }) => (
               type="number"
               fullWidth
               disabled={disabled}
+              color={colorFromMeta(meta)}
               {...input}
             />
-            {meta.touched && (meta.error || meta.submitError) && (
-              <ValidationMessage fullWidth>
-                {meta.error || meta.submitError}
-              </ValidationMessage>
-            )}
+            <ValidationMessage fullWidth meta={meta} />
           </>
         )}
       </Field>
@@ -77,13 +89,21 @@ const SMTP: FunctionComponent<Props> = ({ disabled }) => (
       <Localized id="configure-email-smtpTLSLabel">
         <InputLabel>TLS</InputLabel>
       </Localized>
-      <OnOffField name="email.smtp.secure" disabled={disabled} />
+      <OnOffField
+        name="email.smtp.secure"
+        disabled={disabled}
+        validate={composeValidatorsWhen(isEnabled, required)}
+      />
     </FormField>
     <FormField>
       <Localized id="configure-email-smtpAuthenticationLabel">
         <InputLabel>SMTP Authentication</InputLabel>
       </Localized>
-      <OnOffField name="email.smtp.authentication" disabled={disabled} />
+      <OnOffField
+        name="email.smtp.authentication"
+        disabled={disabled}
+        validate={composeValidatorsWhen(isEnabled, required)}
+      />
     </FormField>
     <Field name="email.smtp.authentication" subscription={{ value: true }}>
       {({ input: { value: enabled } }) => (
@@ -95,20 +115,20 @@ const SMTP: FunctionComponent<Props> = ({ disabled }) => (
             <Localized id="configure-email-smtpUsernameLabel">
               <InputLabel>Username</InputLabel>
             </Localized>
-            <Field name="email.smtp.username">
+            <Field
+              name="email.smtp.username"
+              validate={composeValidatorsWhen(isAuthenticating, required)}
+            >
               {({ input, meta }) => (
                 <>
                   <TextField
                     id={input.name}
-                    fullWidth
                     disabled={disabled || !enabled}
+                    fullWidth
+                    color={colorFromMeta(meta)}
                     {...input}
                   />
-                  {meta.touched && (meta.error || meta.submitError) && (
-                    <ValidationMessage fullWidth>
-                      {meta.error || meta.submitError}
-                    </ValidationMessage>
-                  )}
+                  <ValidationMessage fullWidth meta={meta} />
                 </>
               )}
             </Field>
@@ -117,25 +137,21 @@ const SMTP: FunctionComponent<Props> = ({ disabled }) => (
             <Localized id="configure-email-smtpPasswordLabel">
               <InputLabel>Password</InputLabel>
             </Localized>
-            <Field name="email.smtp.password">
+            <Field
+              name="email.smtp.password"
+              validate={composeValidatorsWhen(isAuthenticating, required)}
+            >
               {({ input, meta }) => (
                 <>
                   <PasswordField
                     id={input.name}
-                    color={
-                      meta.touched && (meta.error || meta.submitError)
-                        ? "error"
-                        : "regular"
-                    }
-                    {...input}
+                    autoComplete="new-password"
                     disabled={disabled || !enabled}
                     fullWidth
+                    color={colorFromMeta(meta)}
+                    {...input}
                   />
-                  {meta.touched && (meta.error || meta.submitError) && (
-                    <ValidationMessage fullWidth>
-                      {meta.error || meta.submitError}
-                    </ValidationMessage>
-                  )}
+                  <ValidationMessage fullWidth meta={meta} />
                 </>
               )}
             </Field>

src/core/client/admin/routes/Configure/sections/Email/SMTPContainer.tsx

@@ -16,7 +16,7 @@ interface Props {
 class SMTPContainer extends React.Component<Props> {
   constructor(props: Props) {
     super(props);
-    props.onInitValues(props.email);
+    props.onInitValues({ email: props.email });
   }
 
   public render() {

src/core/client/admin/routes/Configure/sections/General/ClosedStreamMessageConfig.tsx

@@ -3,14 +3,10 @@ import React, { FunctionComponent, Suspense } from "react";
 import { Field } from "react-final-form";
 
 import { MarkdownEditor } from "coral-framework/components/loadables";
-import {
-  HorizontalGutter,
-  Spinner,
-  Typography,
-  ValidationMessage,
-} from "coral-ui/components";
+import { HorizontalGutter, Spinner, Typography } from "coral-ui/components";
 
 import Header from "../../Header";
+import ValidationMessage from "../../ValidationMessage";
 
 interface Props {
   disabled: boolean;
@@ -41,16 +37,10 @@ const ClosedStreamMessageConfig: FunctionComponent<Props> = ({ disabled }) => (
           <Suspense fallback={<Spinner />}>
             <MarkdownEditor
               id="configure-general-closedStreamMessage-content"
-              name={input.name}
-              onChange={input.onChange}
-              value={input.value}
+              {...input}
             />
           </Suspense>
-          {meta.touched && (meta.error || meta.submitError) && (
-            <ValidationMessage>
-              {meta.error || meta.submitError}
-            </ValidationMessage>
-          )}
+          <ValidationMessage meta={meta} fullWidth />
         </>
       )}
     </Field>

src/core/client/admin/routes/Configure/sections/General/ClosingCommentStreamsConfig.tsx

@@ -14,11 +14,11 @@ import {
   HorizontalGutter,
   InputLabel,
   Typography,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import Header from "../../Header";
 import OnOffField from "../../OnOffField";
+import ValidationMessage from "../../ValidationMessage";
 
 interface Props {
   disabled: boolean;
@@ -66,16 +66,10 @@ const ClosingCommentStreamsConfig: FunctionComponent<Props> = ({
                 DURATION_UNIT.DAYS,
                 DURATION_UNIT.WEEKS,
               ]}
-              name={input.name}
-              onChange={input.onChange}
-              value={input.value}
               disabled={disabled}
+              {...input}
             />
-            {meta.touched && (meta.error || meta.submitError) && (
-              <ValidationMessage>
-                {meta.error || meta.submitError}
-              </ValidationMessage>
-            )}
+            <ValidationMessage meta={meta} />
           </>
         )}
       </Field>

src/core/client/admin/routes/Configure/sections/General/CommentEditingConfig.tsx

@@ -14,10 +14,10 @@ import {
   HorizontalGutter,
   InputLabel,
   Typography,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import Header from "../../Header";
+import ValidationMessage from "../../ValidationMessage";
 
 interface Props {
   disabled: boolean;
@@ -58,16 +58,10 @@ const CommentEditingConfig: FunctionComponent<Props> = ({ disabled }) => (
                 DURATION_UNIT.MINUTES,
                 DURATION_UNIT.HOURS,
               ]}
-              name={input.name}
-              onChange={input.onChange}
-              value={input.value}
               disabled={disabled}
+              {...input}
             />
-            {meta.touched && (meta.error || meta.submitError) && (
-              <ValidationMessage>
-                {meta.error || meta.submitError}
-              </ValidationMessage>
-            )}
+            <ValidationMessage meta={meta} />
           </>
         )}
       </Field>

src/core/client/admin/routes/Configure/sections/General/CommentLengthConfig.tsx

@@ -14,13 +14,13 @@ import {
   InputLabel,
   TextField,
   Typography,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import Header from "../../Header";
 import OnOffField from "../../OnOffField";
 
 import { formatEmpty, parseEmptyAsNull } from "coral-framework/lib/form";
+import ValidationMessage from "../../ValidationMessage";
 import styles from "./CommentLengthConfig.css";
 
 const validateMaxLongerThanMin = createValidator(
@@ -80,9 +80,7 @@ const CommentLengthConfig: FunctionComponent<Props> = ({ disabled }) => (
               <TextField
                 id="configure-general-commentLength-min"
                 className={styles.commentLengthTextInput}
-                name={input.name}
-                onChange={input.onChange}
-                value={input.value}
+                {...input}
                 disabled={disabled}
                 autoComplete="off"
                 autoCorrect="off"
@@ -97,11 +95,7 @@ const CommentLengthConfig: FunctionComponent<Props> = ({ disabled }) => (
                 textAlignCenter
               />
             </Localized>
-            {meta.touched && (meta.error || meta.submitError) && (
-              <ValidationMessage>
-                {meta.error || meta.submitError}
-              </ValidationMessage>
-            )}
+            <ValidationMessage meta={meta} />
           </>
         )}
       </Field>
@@ -130,9 +124,6 @@ const CommentLengthConfig: FunctionComponent<Props> = ({ disabled }) => (
               <TextField
                 id="configure-general-commentLength-max"
                 className={styles.commentLengthTextInput}
-                name={input.name}
-                onChange={input.onChange}
-                value={input.value}
                 disabled={disabled}
                 autoComplete="off"
                 autoCorrect="off"
@@ -145,13 +136,10 @@ const CommentLengthConfig: FunctionComponent<Props> = ({ disabled }) => (
                 }
                 placeholder={"No limit"}
                 textAlignCenter
+                {...input}
               />
             </Localized>
-            {meta.touched && (meta.error || meta.submitError) && (
-              <ValidationMessage>
-                {meta.error || meta.submitError}
-              </ValidationMessage>
-            )}
+            <ValidationMessage meta={meta} />
           </>
         )}
       </Field>

src/core/client/admin/routes/Configure/sections/General/GuidelinesConfig.tsx

@@ -11,11 +11,11 @@ import {
   InputLabel,
   Spinner,
   Typography,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import Header from "../../Header";
 import OnOffField from "../../OnOffField";
+import ValidationMessage from "../../ValidationMessage";
 
 interface Props {
   disabled: boolean;
@@ -62,16 +62,10 @@ const GuidelinesConfig: FunctionComponent<Props> = ({ disabled }) => (
           <Suspense fallback={<Spinner />}>
             <MarkdownEditor
               id="configure-general-guidelines-content"
-              name={input.name}
-              onChange={input.onChange}
-              value={input.value}
+              {...input}
             />
           </Suspense>
-          {meta.touched && (meta.error || meta.submitError) && (
-            <ValidationMessage>
-              {meta.error || meta.submitError}
-            </ValidationMessage>
-          )}
+          <ValidationMessage meta={meta} />
         </>
       )}
     </Field>

src/core/client/admin/routes/Configure/sections/General/SitewideCommentingConfig.tsx

@@ -10,11 +10,11 @@ import {
   InputLabel,
   Spinner,
   Typography,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import Header from "../../Header";
 import OnOffField from "../../OnOffField";
+import ValidationMessage from "../../ValidationMessage";
 
 interface Props {
   disabled: boolean;
@@ -75,16 +75,10 @@ const SitewideCommentingConfig: FunctionComponent<Props> = ({ disabled }) => (
           <Suspense fallback={<Spinner />}>
             <MarkdownEditor
               id="configure-general-sitewideCommenting-message"
-              name={input.name}
-              onChange={input.onChange}
-              value={input.value}
+              {...input}
             />
           </Suspense>
-          {meta.touched && (meta.error || meta.submitError) && (
-            <ValidationMessage>
-              {meta.error || meta.submitError}
-            </ValidationMessage>
-          )}
+          <ValidationMessage meta={meta} fullWidth />
         </>
       )}
     </Field>

src/core/client/admin/routes/Configure/sections/Moderation/APIKeyField.tsx

@@ -3,6 +3,7 @@ import { identity } from "lodash";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
+import { colorFromMeta } from "coral-framework/lib/form";
 import { Validator } from "coral-framework/lib/validation";
 import { FormField, InputLabel, PasswordField } from "coral-ui/components";
 
@@ -30,19 +31,15 @@ const APIKeyField: FunctionComponent<Props> = ({
           </Localized>
           <PasswordField
             id={`configure-moderation-${input.name}`}
-            name={input.name}
-            onChange={input.onChange}
-            value={input.value}
             disabled={disabled}
+            autoComplete="new-password"
             // TODO: (wyattjoh) figure out how to add translations to these props
             hidePasswordTitle="Show API Key"
             showPasswordTitle="Hide API Key"
+            color={colorFromMeta(meta)}
+            {...input}
           />
-          {meta.touched && (meta.error || meta.submitError) && (
-            <ValidationMessage>
-              {meta.error || meta.submitError}
-            </ValidationMessage>
-          )}
+          <ValidationMessage meta={meta} />
         </>
       )}
     </Field>

src/core/client/admin/routes/Configure/sections/Moderation/AkismetConfig.tsx

@@ -2,12 +2,12 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
+import { colorFromMeta } from "coral-framework/lib/form";
 import { ExternalLink } from "coral-framework/lib/i18n/components";
 import {
-  composeValidators,
+  Condition,
   required,
-  validateURL,
-  Validator,
+  validateWhen,
 } from "coral-framework/lib/validation";
 import {
   FieldSet,
@@ -28,16 +28,10 @@ interface Props {
   disabled: boolean;
 }
 
+const isEnabled: Condition = (value, values) =>
+  Boolean(values.integrations.akismet.enabled);
+
 const AkismetConfig: FunctionComponent<Props> = ({ disabled }) => {
-  const validateWhenEnabled = (validator: Validator): Validator => (
-    v,
-    values
-  ) => {
-    if (values.integrations.akismet.enabled) {
-      return validator(v, values);
-    }
-    return "";
-  };
   return (
     <HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
       <Localized id="configure-moderation-akismet-title">
@@ -79,7 +73,7 @@ const AkismetConfig: FunctionComponent<Props> = ({ disabled }) => {
       <APIKeyField
         name="integrations.akismet.key"
         disabled={disabled}
-        validate={validateWhenEnabled(required)}
+        validate={validateWhen(isEnabled, required)}
       />
 
       <FormField>
@@ -89,29 +83,22 @@ const AkismetConfig: FunctionComponent<Props> = ({ disabled }) => {
           </InputLabel>
         </Localized>
         <Field
-          name={"integrations.akismet.site"}
-          validate={validateWhenEnabled(
-            composeValidators(required, validateURL)
-          )}
+          name="integrations.akismet.site"
+          validate={validateWhen(isEnabled, required)}
         >
           {({ input, meta }) => (
             <>
               <TextField
                 id="configure-moderation-akismet-site"
-                name={input.name}
-                onChange={input.onChange}
-                value={input.value}
                 disabled={disabled}
                 autoComplete="off"
                 autoCorrect="off"
                 autoCapitalize="off"
                 spellCheck={false}
+                color={colorFromMeta(meta)}
+                {...input}
               />
-              {meta.touched && (meta.error || meta.submitError) && (
-                <ValidationMessage>
-                  {meta.error || meta.submitError}
-                </ValidationMessage>
-              )}
+              <ValidationMessage meta={meta} />
             </>
           )}
         </Field>

src/core/client/admin/routes/Configure/sections/Moderation/PerspectiveConfig.tsx

@@ -1,22 +1,20 @@
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
-
 import { Field } from "react-final-form";
 
-import { formatPercentage, parsePercentage } from "coral-framework/lib/form";
-
 import {
   TOXICITY_ENDPOINT_DEFAULT,
   TOXICITY_MODEL_DEFAULT,
   TOXICITY_THRESHOLD_DEFAULT,
 } from "coral-common/constants";
+import { formatPercentage, parsePercentage } from "coral-framework/lib/form";
 import { ExternalLink } from "coral-framework/lib/i18n/components";
 import {
-  composeValidators,
+  Condition,
   required,
   validatePercentage,
   validateURL,
-  Validator,
+  validateWhen,
 } from "coral-framework/lib/validation";
 import {
   FieldSet,
@@ -41,16 +39,10 @@ interface Props {
   disabled: boolean;
 }
 
+const isEnabled: Condition = (value, values) =>
+  Boolean(values.integrations.perspective.enabled);
+
 const PerspectiveConfig: FunctionComponent<Props> = ({ disabled }) => {
-  const validateWhenEnabled = (validator: Validator): Validator => (
-    v,
-    values
-  ) => {
-    if (values.integrations.perspective.enabled) {
-      return validator(v, values);
-    }
-    return "";
-  };
   return (
     <HorizontalGutter size="oneAndAHalf" container={<FieldSet />}>
       <Localized id="configure-moderation-perspective-title">
@@ -106,9 +98,6 @@ const PerspectiveConfig: FunctionComponent<Props> = ({ disabled }) => {
               <TextField
                 id="configure-moderation-perspective-threshold"
                 className={styles.thresholdTextField}
-                name={input.name}
-                onChange={input.onChange}
-                value={input.value}
                 disabled={disabled}
                 autoComplete="off"
                 autoCorrect="off"
@@ -117,12 +106,9 @@ const PerspectiveConfig: FunctionComponent<Props> = ({ disabled }) => {
                 adornment={<Typography variant="bodyCopy">%</Typography>}
                 placeholder={TOXICITY_THRESHOLD_DEFAULT.toString()}
                 textAlignCenter
+                {...input}
               />
-              {meta.touched && (meta.error || meta.submitError) && (
-                <ValidationMessage>
-                  {meta.error || meta.submitError}
-                </ValidationMessage>
-              )}
+              <ValidationMessage meta={meta} />
             </>
           )}
         </Field>
@@ -155,21 +141,15 @@ const PerspectiveConfig: FunctionComponent<Props> = ({ disabled }) => {
             <>
               <TextField
                 id="configure-moderation-perspective-model"
-                name={input.name}
-                onChange={input.onChange}
-                value={input.value}
                 disabled={disabled}
                 autoComplete="off"
                 autoCorrect="off"
                 autoCapitalize="off"
                 placeholder={TOXICITY_MODEL_DEFAULT}
                 spellCheck={false}
+                {...input}
               />
-              {meta.touched && (meta.error || meta.submitError) && (
-                <ValidationMessage>
-                  {meta.error || meta.submitError}
-                </ValidationMessage>
-              )}
+              <ValidationMessage meta={meta} />
             </>
           )}
         </Field>
@@ -211,7 +191,7 @@ const PerspectiveConfig: FunctionComponent<Props> = ({ disabled }) => {
       <APIKeyField
         name="integrations.perspective.key"
         disabled={disabled}
-        validate={validateWhenEnabled(required)}
+        validate={validateWhen(isEnabled, required)}
       />
       <FormField>
         <Localized id="configure-moderation-perspective-customEndpoint">
@@ -228,29 +208,20 @@ const PerspectiveConfig: FunctionComponent<Props> = ({ disabled }) => {
             here
           </InputDescription>
         </Localized>
-        <Field
-          name="integrations.perspective.endpoint"
-          validate={composeValidators(validateURL)}
-        >
+        <Field name="integrations.perspective.endpoint" validate={validateURL}>
           {({ input, meta }) => (
             <>
               <TextField
                 id="configure-moderation-perspective-customEndpoint"
-                name={input.name}
-                onChange={input.onChange}
-                value={input.value}
                 disabled={disabled}
                 autoComplete="off"
                 autoCorrect="off"
                 autoCapitalize="off"
                 placeholder={TOXICITY_ENDPOINT_DEFAULT}
                 spellCheck={false}
+                {...input}
               />
-              {meta.touched && (meta.error || meta.submitError) && (
-                <ValidationMessage>
-                  {meta.error || meta.submitError}
-                </ValidationMessage>
-              )}
+              <ValidationMessage meta={meta} />
             </>
           )}
         </Field>

src/core/client/admin/routes/Configure/sections/Organization/OrganizationContactEmailConfig.tsx

@@ -2,16 +2,20 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
-import { required } from "coral-framework/lib/validation";
+import {
+  composeValidators,
+  required,
+  validateEmail,
+} from "coral-framework/lib/validation";
 import {
   FormField,
   HorizontalGutter,
   TextField,
   Typography,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import Header from "../../Header";
+import ValidationMessage from "../../ValidationMessage";
 
 interface Props {
   disabled: boolean;
@@ -35,26 +39,23 @@ const OrganizationNameConfig: FunctionComponent<Props> = ({ disabled }) => (
       >
         <Typography variant="detail">This E-Mail will be used</Typography>
       </Localized>
-      <Field name="organization.contactEmail" validate={required}>
+      <Field
+        name="organization.contactEmail"
+        validate={composeValidators(required, validateEmail)}
+      >
         {({ input, meta }) => (
           <>
             <TextField
               id={`configure-organization-${input.name}`}
-              name={input.name}
-              onChange={input.onChange}
-              value={input.value}
               disabled={disabled}
               autoComplete="off"
               autoCorrect="off"
               autoCapitalize="off"
               spellCheck={false}
               fullWidth
+              {...input}
             />
-            {meta.touched && (meta.error || meta.submitError) && (
-              <ValidationMessage fullWidth>
-                {meta.error || meta.submitError}
-              </ValidationMessage>
-            )}
+            <ValidationMessage fullWidth meta={meta} />
           </>
         )}
       </Field>

src/core/client/admin/routes/Configure/sections/Organization/OrganizationNameConfig.tsx

@@ -8,10 +8,10 @@ import {
   HorizontalGutter,
   TextField,
   Typography,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import Header from "../../Header";
+import ValidationMessage from "../../ValidationMessage";
 
 interface Props {
   disabled: boolean;
@@ -43,21 +43,15 @@ const OrganizationNameConfig: FunctionComponent<Props> = ({ disabled }) => (
           <>
             <TextField
               id={`configure-organization-${input.name}`}
-              name={input.name}
-              onChange={input.onChange}
-              value={input.value}
               disabled={disabled}
               autoComplete="off"
               autoCorrect="off"
               autoCapitalize="off"
               spellCheck={false}
               fullWidth
+              {...input}
             />
-            {meta.touched && (meta.error || meta.submitError) && (
-              <ValidationMessage fullWidth>
-                {meta.error || meta.submitError}
-              </ValidationMessage>
-            )}
+            <ValidationMessage meta={meta} fullWidth />
           </>
         )}
       </Field>

src/core/client/admin/routes/Configure/sections/WordList/WordListTextArea.tsx

@@ -38,20 +38,14 @@ const WordListTextArea: FunctionComponent<Props> = ({
         <textarea
           id={id}
           className={cn(className, styles.textArea)}
-          name={input.name}
-          onChange={input.onChange}
-          value={input.value}
           disabled={disabled}
           autoComplete="off"
           autoCorrect="off"
           autoCapitalize="off"
           spellCheck={false}
+          {...input}
         />
-        {meta.touched && (meta.error || meta.submitError) && (
-          <ValidationMessage>
-            {meta.error || meta.submitError}
-          </ValidationMessage>
-        )}
+        <ValidationMessage meta={meta} />
       </>
     )}
   </Field>

src/core/client/admin/routes/Invite/SetPasswordField.tsx

@@ -2,6 +2,7 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
+import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
 import {
   composeValidators,
   required,
@@ -12,7 +13,6 @@ import {
   InputDescription,
   InputLabel,
   PasswordField,
-  ValidationMessage,
 } from "coral-ui/components";
 
 interface Props {
@@ -37,24 +37,15 @@ const SetPasswordField: FunctionComponent<Props> = props => (
         <Localized id="invite-passwordTextField" attrs={{ placeholder: true }}>
           <PasswordField
             id={input.name}
-            name={input.name}
-            onChange={input.onChange}
-            value={input.value}
             placeholder="Password"
-            color={
-              meta.touched && (meta.error || meta.submitError)
-                ? "error"
-                : "regular"
-            }
+            autoComplete="new-password"
+            color={colorFromMeta(meta)}
             disabled={props.disabled}
             fullWidth
+            {...input}
           />
         </Localized>
-        {meta.touched && (meta.error || meta.submitError) && (
-          <ValidationMessage fullWidth>
-            {meta.error || meta.submitError}
-          </ValidationMessage>
-        )}
+        <ValidationMessage meta={meta} fullWidth />
       </FormField>
     )}
   </Field>

src/core/client/admin/routes/Invite/SetUsernameField.tsx

@@ -1,3 +1,8 @@
+import { Localized } from "fluent-react/compat";
+import React, { FunctionComponent } from "react";
+import { Field } from "react-final-form";
+
+import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
 import {
   composeValidators,
   required,
@@ -8,11 +13,7 @@ import {
   InputDescription,
   InputLabel,
   TextField,
-  ValidationMessage,
 } from "coral-ui/components";
-import { Localized } from "fluent-react/compat";
-import React, { FunctionComponent } from "react";
-import { Field } from "react-final-form";
 
 interface Props {
   disabled: boolean;
@@ -34,24 +35,14 @@ const SetUsernameField: FunctionComponent<Props> = props => (
         <Localized id="invite-usernameTextField" attrs={{ placeholder: true }}>
           <TextField
             id={input.name}
-            name={input.name}
-            onChange={input.onChange}
-            value={input.value}
             placeholder="Username"
-            color={
-              meta.touched && (meta.error || meta.submitError)
-                ? "error"
-                : "regular"
-            }
+            color={colorFromMeta(meta)}
             disabled={props.disabled}
             fullWidth
+            {...input}
           />
         </Localized>
-        {meta.touched && (meta.error || meta.submitError) && (
-          <ValidationMessage fullWidth>
-            {meta.error || meta.submitError}
-          </ValidationMessage>
-        )}
+        <ValidationMessage meta={meta} fullWidth />
       </FormField>
     )}
   </Field>

src/core/client/admin/routes/Login/EmailField.tsx

@@ -2,17 +2,13 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
+import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
 import {
   composeValidators,
   required,
   validateEmail,
 } from "coral-framework/lib/validation";
-import {
-  FormField,
-  InputLabel,
-  TextField,
-  ValidationMessage,
-} from "coral-ui/components";
+import { FormField, InputLabel, TextField } from "coral-ui/components";
 
 interface Props {
   disabled: boolean;
@@ -31,24 +27,14 @@ const EmailField: FunctionComponent<Props> = props => (
         >
           <TextField
             id={input.name}
-            name={input.name}
-            onChange={input.onChange}
-            value={input.value}
             placeholder="Email Address"
-            color={
-              meta.touched && (meta.error || meta.submitError)
-                ? "error"
-                : "regular"
-            }
+            color={colorFromMeta(meta)}
             disabled={props.disabled}
             fullWidth
+            {...input}
           />
         </Localized>
-        {meta.touched && (meta.error || meta.submitError) && (
-          <ValidationMessage fullWidth>
-            {meta.error || meta.submitError}
-          </ValidationMessage>
-        )}
+        <ValidationMessage meta={meta} fullWidth />
       </FormField>
     )}
   </Field>

src/core/client/admin/routes/Login/views/AddEmailAddress/ConfirmEmailField.tsx

@@ -2,17 +2,13 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
+import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
 import {
   composeValidators,
   required,
   validateEqualEmails,
 } from "coral-framework/lib/validation";
-import {
-  FormField,
-  InputLabel,
-  TextField,
-  ValidationMessage,
-} from "coral-ui/components";
+import { FormField, InputLabel, TextField } from "coral-ui/components";
 
 interface Props {
   disabled: boolean;
@@ -34,24 +30,14 @@ const ConfirmEmailField: FunctionComponent<Props> = props => (
         >
           <TextField
             id={input.name}
-            name={input.name}
-            onChange={input.onChange}
-            value={input.value}
             placeholder="Confirm Email Address"
-            color={
-              meta.touched && (meta.error || meta.submitError)
-                ? "error"
-                : "regular"
-            }
+            color={colorFromMeta(meta)}
             disabled={props.disabled}
             fullWidth
+            {...input}
           />
         </Localized>
-        {meta.touched && (meta.error || meta.submitError) && (
-          <ValidationMessage fullWidth>
-            {meta.error || meta.submitError}
-          </ValidationMessage>
-        )}
+        <ValidationMessage meta={meta} fullWidth />
       </FormField>
     )}
   </Field>

src/core/client/admin/routes/Login/views/AddEmailAddress/EmailField.tsx

@@ -2,17 +2,13 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
+import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
 import {
   composeValidators,
   required,
   validateEmail,
 } from "coral-framework/lib/validation";
-import {
-  FormField,
-  InputLabel,
-  TextField,
-  ValidationMessage,
-} from "coral-ui/components";
+import { FormField, InputLabel, TextField } from "coral-ui/components";
 
 interface Props {
   disabled: boolean;
@@ -31,24 +27,14 @@ const EmailField: FunctionComponent<Props> = props => (
         >
           <TextField
             id={input.name}
-            name={input.name}
-            onChange={input.onChange}
-            value={input.value}
             placeholder="Email Address"
-            color={
-              meta.touched && (meta.error || meta.submitError)
-                ? "error"
-                : "regular"
-            }
+            color={colorFromMeta(meta)}
             disabled={props.disabled}
             fullWidth
+            {...input}
           />
         </Localized>
-        {meta.touched && (meta.error || meta.submitError) && (
-          <ValidationMessage fullWidth>
-            {meta.error || meta.submitError}
-          </ValidationMessage>
-        )}
+        <ValidationMessage meta={meta} fullWidth />
       </FormField>
     )}
   </Field>

src/core/client/admin/routes/Login/views/CreatePassword/SetPasswordField.tsx

@@ -3,17 +3,13 @@ import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { PasswordField } from "coral-framework/components";
+import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
 import {
   composeValidators,
   required,
   validatePassword,
 } from "coral-framework/lib/validation";
-import {
-  FormField,
-  InputDescription,
-  InputLabel,
-  ValidationMessage,
-} from "coral-ui/components";
+import { FormField, InputDescription, InputLabel } from "coral-ui/components";
 
 interface Props {
   disabled: boolean;
@@ -40,24 +36,14 @@ const SetPasswordField: FunctionComponent<Props> = props => (
         >
           <PasswordField
             id={input.name}
-            name={input.name}
-            onChange={input.onChange}
-            value={input.value}
             placeholder="Password"
-            color={
-              meta.touched && (meta.error || meta.submitError)
-                ? "error"
-                : "regular"
-            }
+            color={colorFromMeta(meta)}
             disabled={props.disabled}
             fullWidth
+            {...input}
           />
         </Localized>
-        {meta.touched && (meta.error || meta.submitError) && (
-          <ValidationMessage fullWidth>
-            {meta.error || meta.submitError}
-          </ValidationMessage>
-        )}
+        <ValidationMessage meta={meta} fullWidth />
       </FormField>
     )}
   </Field>

src/core/client/admin/routes/Login/views/CreateUsername/UsernameField.tsx

@@ -2,6 +2,7 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
+import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
 import {
   composeValidators,
   required,
@@ -12,7 +13,6 @@ import {
   InputDescription,
   InputLabel,
   TextField,
-  ValidationMessage,
 } from "coral-ui/components";
 
 interface Props {
@@ -38,24 +38,14 @@ const CreateUsernameField: FunctionComponent<Props> = props => (
         >
           <TextField
             id={input.name}
-            name={input.name}
-            onChange={input.onChange}
-            value={input.value}
             placeholder="Username"
-            color={
-              meta.touched && (meta.error || meta.submitError)
-                ? "error"
-                : "regular"
-            }
+            color={colorFromMeta(meta)}
             disabled={props.disabled}
             fullWidth
+            {...input}
           />
         </Localized>
-        {meta.touched && (meta.error || meta.submitError) && (
-          <ValidationMessage fullWidth>
-            {meta.error || meta.submitError}
-          </ValidationMessage>
-        )}
+        <ValidationMessage meta={meta} fullWidth />
       </FormField>
     )}
   </Field>

src/core/client/admin/routes/Login/views/SignIn/SignInWithEmail.tsx

@@ -1,9 +1,13 @@
-import { OnSubmit } from "coral-framework/lib/form";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field, Form } from "react-final-form";
 
 import { PasswordField } from "coral-framework/components";
+import {
+  colorFromMeta,
+  OnSubmit,
+  ValidationMessage,
+} from "coral-framework/lib/form";
 import { composeValidators, required } from "coral-framework/lib/validation";
 import {
   Button,
@@ -12,7 +16,6 @@ import {
   FormField,
   HorizontalGutter,
   InputLabel,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import EmailField from "../../EmailField";
@@ -51,24 +54,14 @@ const SignInWithEmail: FunctionComponent<SignInWithEmailForm> = props => {
                   >
                     <PasswordField
                       id={input.name}
-                      name={input.name}
-                      onChange={input.onChange}
-                      value={input.value}
                       placeholder="Password"
-                      color={
-                        meta.touched && (meta.error || meta.submitError)
-                          ? "error"
-                          : "regular"
-                      }
+                      color={colorFromMeta(meta)}
                       disabled={submitting}
                       fullWidth
+                      {...input}
                     />
                   </Localized>
-                  {meta.touched && (meta.error || meta.submitError) && (
-                    <ValidationMessage fullWidth>
-                      {meta.error || meta.submitError}
-                    </ValidationMessage>
-                  )}
+                  <ValidationMessage meta={meta} fullWidth />
                 </FormField>
               )}
             </Field>

src/core/client/admin/routes/Stories/StoryTableFilter.tsx

@@ -53,10 +53,8 @@ const StoryTableFilter: FunctionComponent<Props> = props => (
                     className={styles.textField}
                     placeholder="Search by story title or author..."
                     aria-label="Search by story title or author"
-                    name={input.name}
-                    onChange={input.onChange}
-                    value={input.value}
                     variant="seamlessAdornment"
+                    {...input}
                     adornment={
                       <Localized
                         id="stories-filter-searchButton"

src/core/client/admin/test/auth/__snapshots__/addEmailAddress.spec.tsx.snap

@@ -30,7 +30,9 @@ exports[`accepts valid email 1`] = `
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="text"
           value="hans@test.com"
@@ -54,7 +56,9 @@ exports[`accepts valid email 1`] = `
           disabled={false}
           id="confirmEmail"
           name="confirmEmail"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Confirm Email Address"
           type="text"
           value=""
@@ -120,7 +124,9 @@ exports[`checks for invalid email 1`] = `
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="text"
           value="invalid-email"
@@ -157,7 +163,9 @@ exports[`checks for invalid email 1`] = `
           disabled={false}
           id="confirmEmail"
           name="confirmEmail"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Confirm Email Address"
           type="text"
           value="invalid-confirmation-email"
@@ -252,7 +260,9 @@ exports[`renders addEmailAddress view 1`] = `
                     disabled={false}
                     id="email"
                     name="email"
+                    onBlur={[Function]}
                     onChange={[Function]}
+                    onFocus={[Function]}
                     placeholder="Email Address"
                     type="text"
                     value=""
@@ -276,7 +286,9 @@ exports[`renders addEmailAddress view 1`] = `
                     disabled={false}
                     id="confirmEmail"
                     name="confirmEmail"
+                    onBlur={[Function]}
                     onChange={[Function]}
+                    onFocus={[Function]}
                     placeholder="Confirm Email Address"
                     type="text"
                     value=""
@@ -334,7 +346,9 @@ exports[`shows error when submitting empty form 1`] = `
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="text"
           value=""
@@ -371,7 +385,9 @@ exports[`shows error when submitting empty form 1`] = `
           disabled={false}
           id="confirmEmail"
           name="confirmEmail"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Confirm Email Address"
           type="text"
           value=""
@@ -451,7 +467,9 @@ GraphQL request (4:3)
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="text"
           value="hans@test.com"
@@ -475,7 +493,9 @@ GraphQL request (4:3)
           disabled={false}
           id="confirmEmail"
           name="confirmEmail"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Confirm Email Address"
           type="text"
           value="hans@test.com"
@@ -528,7 +548,9 @@ exports[`successfully sets email 1`] = `
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="text"
           value=""
@@ -552,7 +574,9 @@ exports[`successfully sets email 1`] = `
           disabled={false}
           id="confirmEmail"
           name="confirmEmail"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Confirm Email Address"
           type="text"
           value=""

src/core/client/admin/test/auth/__snapshots__/createPassword.spec.tsx.snap

@@ -42,7 +42,9 @@ we require users to create a password.
             disabled={false}
             id="password"
             name="password"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder="Password"
             spellCheck={false}
             type="password"
@@ -165,7 +167,9 @@ we require users to create a password.
                       disabled={false}
                       id="password"
                       name="password"
+                      onBlur={[Function]}
                       onChange={[Function]}
+                      onFocus={[Function]}
                       placeholder="Password"
                       spellCheck={false}
                       type="password"
@@ -251,7 +255,9 @@ we require users to create a password.
             disabled={false}
             id="password"
             name="password"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder="Password"
             spellCheck={false}
             type="password"
@@ -359,7 +365,9 @@ GraphQL request (4:3)
             disabled={false}
             id="password"
             name="password"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder="Password"
             spellCheck={false}
             type="password"
@@ -440,7 +448,9 @@ we require users to create a password.
             disabled={false}
             id="password"
             name="password"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder="Password"
             spellCheck={false}
             type="password"

src/core/client/admin/test/auth/__snapshots__/createUsername.spec.tsx.snap

@@ -35,7 +35,9 @@ exports[`checks for invalid username 1`] = `
           disabled={false}
           id="username"
           name="username"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Username"
           type="text"
           value="x"
@@ -135,7 +137,9 @@ exports[`renders createUsername view 1`] = `
                     disabled={false}
                     id="username"
                     name="username"
+                    onBlur={[Function]}
                     onChange={[Function]}
+                    onFocus={[Function]}
                     placeholder="Username"
                     type="text"
                     value=""
@@ -198,7 +202,9 @@ exports[`shows error when submitting empty form 1`] = `
           disabled={false}
           id="username"
           name="username"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Username"
           type="text"
           value=""
@@ -283,7 +289,9 @@ GraphQL request (4:3)
           disabled={false}
           id="username"
           name="username"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Username"
           type="text"
           value="hans"
@@ -341,7 +349,9 @@ exports[`successfully sets username 1`] = `
           disabled={false}
           id="username"
           name="username"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Username"
           type="text"
           value=""

src/core/client/admin/test/auth/__snapshots__/signInWithEmail.spec.tsx.snap

@@ -25,7 +25,9 @@ exports[`accepts correct password 1`] = `
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="text"
           value=""
@@ -68,7 +70,9 @@ exports[`accepts correct password 1`] = `
             disabled={false}
             id="password"
             name="password"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder="Password"
             spellCheck={false}
             type="password"
@@ -140,7 +144,9 @@ exports[`accepts valid email 1`] = `
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="text"
           value="hans@test.com"
@@ -170,7 +176,9 @@ exports[`accepts valid email 1`] = `
             disabled={false}
             id="password"
             name="password"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder="Password"
             spellCheck={false}
             type="password"
@@ -255,7 +263,9 @@ exports[`checks for invalid email 1`] = `
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="text"
           value="invalid-email"
@@ -298,7 +308,9 @@ exports[`checks for invalid email 1`] = `
             disabled={false}
             id="password"
             name="password"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder="Password"
             spellCheck={false}
             type="password"
@@ -460,7 +472,9 @@ exports[`renders sign in form 1`] = `
                     disabled={false}
                     id="email"
                     name="email"
+                    onBlur={[Function]}
                     onChange={[Function]}
+                    onFocus={[Function]}
                     placeholder="Email Address"
                     type="text"
                     value=""
@@ -490,7 +504,9 @@ exports[`renders sign in form 1`] = `
                       disabled={false}
                       id="password"
                       name="password"
+                      onBlur={[Function]}
                       onChange={[Function]}
+                      onFocus={[Function]}
                       placeholder="Password"
                       spellCheck={false}
                       type="password"
@@ -576,7 +592,9 @@ exports[`shows error when submitting empty form 1`] = `
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="text"
           value=""
@@ -619,7 +637,9 @@ exports[`shows error when submitting empty form 1`] = `
             disabled={false}
             id="password"
             name="password"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder="Password"
             spellCheck={false}
             type="password"
@@ -711,7 +731,9 @@ exports[`shows server error 1`] = `
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="text"
           value="hans@test.com"
@@ -741,7 +763,9 @@ exports[`shows server error 1`] = `
             disabled={false}
             id="password"
             name="password"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder="Password"
             spellCheck={false}
             type="password"

src/core/client/admin/test/community/__snapshots__/community.spec.tsx.snap

@@ -149,7 +149,9 @@ exports[`renders community 1`] = `
                 aria-label="Search by username or email address"
                 className="TextField-input TextField-colorRegular TextField-seamlessAdornment"
                 name="search"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Search by username or email address..."
                 type="text"
                 value=""
@@ -786,7 +788,9 @@ exports[`renders empty community 1`] = `
                 aria-label="Search by username or email address"
                 className="TextField-input TextField-colorRegular TextField-seamlessAdornment"
                 name="search"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Search by username or email address..."
                 type="text"
                 value=""

src/core/client/admin/test/configure/__snapshots__/advanced.spec.tsx.snap

@@ -204,7 +204,9 @@ each of your site’s stories.
                   disabled={false}
                   id="configure-advanced-customCSSURL"
                   name="customCSSURL"
+                  onBlur={[Function]}
                   onChange={[Function]}
+                  onFocus={[Function]}
                   placeholder=""
                   spellCheck={false}
                   type="text"
@@ -312,7 +314,9 @@ yourdomain.com, etc.
                   disabled={false}
                   id="configure-advanced-allowedDomains"
                   name="allowedDomains"
+                  onBlur={[Function]}
                   onChange={[Function]}
+                  onFocus={[Function]}
                   placeholder=""
                   spellCheck={false}
                   type="text"

src/core/client/admin/test/configure/__snapshots__/auth.spec.tsx.snap

@@ -30,6 +30,7 @@ exports[`change settings: during submit: oidc without errors 1`] = `
             onChange={[Function]}
             onFocus={[Function]}
             type="checkbox"
+            value={true}
           />
           <label
             className="CheckBox-label CheckBox-labelLight"
@@ -138,7 +139,9 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
             className="TextField-input TextField-colorRegular"
             disabled={true}
             name="auth.integrations.oidc.name"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             spellCheck={false}
             type="text"
@@ -164,7 +167,9 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
             className="TextField-input TextField-colorRegular"
             disabled={true}
             name="auth.integrations.oidc.clientID"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             spellCheck={false}
             type="text"
@@ -188,12 +193,14 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
           >
             <input
               autoCapitalize="off"
-              autoComplete="off"
+              autoComplete="new-password"
               autoCorrect="off"
               className="PasswordField-colorRegular PasswordField-input"
               disabled={true}
               name="auth.integrations.oidc.clientSecret"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder=""
               spellCheck={false}
               type="password"
@@ -243,7 +250,9 @@ the remaining fields. You may also enter the information manually.
               className="TextField-input TextField-colorRegular"
               disabled={true}
               name="auth.integrations.oidc.issuer"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder=""
               spellCheck={false}
               type="text"
@@ -284,7 +293,9 @@ the remaining fields. You may also enter the information manually.
             className="TextField-input TextField-colorRegular"
             disabled={true}
             name="auth.integrations.oidc.authorizationURL"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             spellCheck={false}
             type="text"
@@ -310,7 +321,9 @@ the remaining fields. You may also enter the information manually.
             className="TextField-input TextField-colorRegular"
             disabled={true}
             name="auth.integrations.oidc.tokenURL"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             spellCheck={false}
             type="text"
@@ -336,7 +349,9 @@ the remaining fields. You may also enter the information manually.
             className="TextField-input TextField-colorRegular"
             disabled={true}
             name="auth.integrations.oidc.jwksURI"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             spellCheck={false}
             type="text"
@@ -370,6 +385,7 @@ the remaining fields. You may also enter the information manually.
               onChange={[Function]}
               onFocus={[Function]}
               type="checkbox"
+              value={true}
             />
             <label
               className="CheckBox-label"
@@ -395,6 +411,7 @@ the remaining fields. You may also enter the information manually.
               onChange={[Function]}
               onFocus={[Function]}
               type="checkbox"
+              value={true}
             />
             <label
               className="CheckBox-label"
@@ -439,6 +456,7 @@ integration to register for a new account.
               onChange={[Function]}
               onFocus={[Function]}
               type="checkbox"
+              value={false}
             />
             <label
               className="CheckBox-label"
@@ -488,6 +506,7 @@ exports[`change settings: enable facebook configure box 1`] = `
             onChange={[Function]}
             onFocus={[Function]}
             type="checkbox"
+            value={true}
           />
           <label
             className="CheckBox-label CheckBox-labelLight"
@@ -593,7 +612,9 @@ For more information visit:
             className="TextField-input TextField-colorRegular"
             disabled={false}
             name="auth.integrations.facebook.clientID"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             spellCheck={false}
             type="text"
@@ -617,12 +638,14 @@ For more information visit:
           >
             <input
               autoCapitalize="off"
-              autoComplete="off"
+              autoComplete="new-password"
               autoCorrect="off"
               className="PasswordField-colorRegular PasswordField-input"
               disabled={false}
               name="auth.integrations.facebook.clientSecret"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder=""
               spellCheck={false}
               type="password"
@@ -671,6 +694,7 @@ For more information visit:
               onChange={[Function]}
               onFocus={[Function]}
               type="checkbox"
+              value={true}
             />
             <label
               className="CheckBox-label"
@@ -696,6 +720,7 @@ For more information visit:
               onChange={[Function]}
               onFocus={[Function]}
               type="checkbox"
+              value={true}
             />
             <label
               className="CheckBox-label"
@@ -740,6 +765,7 @@ integration to register for a new account.
               onChange={[Function]}
               onFocus={[Function]}
               type="checkbox"
+              value={true}
             />
             <label
               className="CheckBox-label"
@@ -789,6 +815,7 @@ exports[`change settings: enable oidc configure box 1`] = `
             onChange={[Function]}
             onFocus={[Function]}
             type="checkbox"
+            value={true}
           />
           <label
             className="CheckBox-label CheckBox-labelLight"
@@ -897,7 +924,9 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
             className="TextField-input TextField-colorRegular"
             disabled={false}
             name="auth.integrations.oidc.name"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             spellCheck={false}
             type="text"
@@ -923,7 +952,9 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
             className="TextField-input TextField-colorRegular"
             disabled={false}
             name="auth.integrations.oidc.clientID"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             spellCheck={false}
             type="text"
@@ -947,12 +978,14 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
           >
             <input
               autoCapitalize="off"
-              autoComplete="off"
+              autoComplete="new-password"
               autoCorrect="off"
               className="PasswordField-colorRegular PasswordField-input"
               disabled={false}
               name="auth.integrations.oidc.clientSecret"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder=""
               spellCheck={false}
               type="password"
@@ -1002,7 +1035,9 @@ the remaining fields. You may also enter the information manually.
               className="TextField-input TextField-colorRegular"
               disabled={false}
               name="auth.integrations.oidc.issuer"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder=""
               spellCheck={false}
               type="text"
@@ -1043,7 +1078,9 @@ the remaining fields. You may also enter the information manually.
             className="TextField-input TextField-colorRegular"
             disabled={false}
             name="auth.integrations.oidc.authorizationURL"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             spellCheck={false}
             type="text"
@@ -1069,7 +1106,9 @@ the remaining fields. You may also enter the information manually.
             className="TextField-input TextField-colorRegular"
             disabled={false}
             name="auth.integrations.oidc.tokenURL"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             spellCheck={false}
             type="text"
@@ -1095,7 +1134,9 @@ the remaining fields. You may also enter the information manually.
             className="TextField-input TextField-colorRegular"
             disabled={false}
             name="auth.integrations.oidc.jwksURI"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             spellCheck={false}
             type="text"
@@ -1129,6 +1170,7 @@ the remaining fields. You may also enter the information manually.
               onChange={[Function]}
               onFocus={[Function]}
               type="checkbox"
+              value={true}
             />
             <label
               className="CheckBox-label"
@@ -1154,6 +1196,7 @@ the remaining fields. You may also enter the information manually.
               onChange={[Function]}
               onFocus={[Function]}
               type="checkbox"
+              value={true}
             />
             <label
               className="CheckBox-label"
@@ -1198,6 +1241,7 @@ integration to register for a new account.
               onChange={[Function]}
               onFocus={[Function]}
               type="checkbox"
+              value={false}
             />
             <label
               className="CheckBox-label"
@@ -1247,6 +1291,7 @@ exports[`change settings: oidc validation errors 1`] = `
             onChange={[Function]}
             onFocus={[Function]}
             type="checkbox"
+            value={true}
           />
           <label
             className="CheckBox-label CheckBox-labelLight"
@@ -1352,10 +1397,12 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
             autoCapitalize="off"
             autoComplete="off"
             autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
+            className="TextField-input TextField-colorError"
             disabled={false}
             name="auth.integrations.oidc.name"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             spellCheck={false}
             type="text"
@@ -1363,7 +1410,7 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
           />
         </div>
         <div
-          className="Message-root Message-colorError ValidationMessage-root"
+          className="Message-root Message-colorError"
         >
           <span
             aria-hidden="true"
@@ -1391,10 +1438,12 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
             autoCapitalize="off"
             autoComplete="off"
             autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
+            className="TextField-input TextField-colorError"
             disabled={false}
             name="auth.integrations.oidc.clientID"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             spellCheck={false}
             type="text"
@@ -1431,12 +1480,14 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
           >
             <input
               autoCapitalize="off"
-              autoComplete="off"
+              autoComplete="new-password"
               autoCorrect="off"
               className="PasswordField-colorRegular PasswordField-input"
               disabled={false}
               name="auth.integrations.oidc.clientSecret"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder=""
               spellCheck={false}
               type="password"
@@ -1459,7 +1510,7 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
           </div>
         </div>
         <div
-          className="Message-root Message-colorError ValidationMessage-root"
+          className="Message-root Message-colorError"
         >
           <span
             aria-hidden="true"
@@ -1496,10 +1547,12 @@ the remaining fields. You may also enter the information manually.
               autoCapitalize="off"
               autoComplete="off"
               autoCorrect="off"
-              className="TextField-input TextField-colorRegular"
+              className="TextField-input TextField-colorError"
               disabled={false}
               name="auth.integrations.oidc.issuer"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder=""
               spellCheck={false}
               type="text"
@@ -1522,7 +1575,7 @@ the remaining fields. You may also enter the information manually.
           </button>
         </div>
         <div
-          className="Message-root Message-colorError ValidationMessage-root"
+          className="Message-root Message-colorError"
         >
           <span
             aria-hidden="true"
@@ -1550,10 +1603,12 @@ the remaining fields. You may also enter the information manually.
             autoCapitalize="off"
             autoComplete="off"
             autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
+            className="TextField-input TextField-colorError"
             disabled={false}
             name="auth.integrations.oidc.authorizationURL"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             spellCheck={false}
             type="text"
@@ -1561,7 +1616,7 @@ the remaining fields. You may also enter the information manually.
           />
         </div>
         <div
-          className="Message-root Message-colorError ValidationMessage-root"
+          className="Message-root Message-colorError"
         >
           <span
             aria-hidden="true"
@@ -1589,10 +1644,12 @@ the remaining fields. You may also enter the information manually.
             autoCapitalize="off"
             autoComplete="off"
             autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
+            className="TextField-input TextField-colorError"
             disabled={false}
             name="auth.integrations.oidc.tokenURL"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             spellCheck={false}
             type="text"
@@ -1600,7 +1657,7 @@ the remaining fields. You may also enter the information manually.
           />
         </div>
         <div
-          className="Message-root Message-colorError ValidationMessage-root"
+          className="Message-root Message-colorError"
         >
           <span
             aria-hidden="true"
@@ -1628,10 +1685,12 @@ the remaining fields. You may also enter the information manually.
             autoCapitalize="off"
             autoComplete="off"
             autoCorrect="off"
-            className="TextField-input TextField-colorRegular"
+            className="TextField-input TextField-colorError"
             disabled={false}
             name="auth.integrations.oidc.jwksURI"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder=""
             spellCheck={false}
             type="text"
@@ -1639,7 +1698,7 @@ the remaining fields. You may also enter the information manually.
           />
         </div>
         <div
-          className="Message-root Message-colorError ValidationMessage-root"
+          className="Message-root Message-colorError"
         >
           <span
             aria-hidden="true"
@@ -1678,6 +1737,7 @@ the remaining fields. You may also enter the information manually.
               onChange={[Function]}
               onFocus={[Function]}
               type="checkbox"
+              value={true}
             />
             <label
               className="CheckBox-label"
@@ -1703,6 +1763,7 @@ the remaining fields. You may also enter the information manually.
               onChange={[Function]}
               onFocus={[Function]}
               type="checkbox"
+              value={true}
             />
             <label
               className="CheckBox-label"
@@ -1747,6 +1808,7 @@ integration to register for a new account.
               onChange={[Function]}
               onFocus={[Function]}
               type="checkbox"
+              value={false}
             />
             <label
               className="CheckBox-label"
@@ -2018,6 +2080,7 @@ exports[`renders configure auth 1`] = `
                         onChange={[Function]}
                         onFocus={[Function]}
                         type="checkbox"
+                        value={true}
                       />
                       <label
                         className="CheckBox-label CheckBox-labelLight"
@@ -2065,6 +2128,7 @@ exports[`renders configure auth 1`] = `
                           onChange={[Function]}
                           onFocus={[Function]}
                           type="checkbox"
+                          value={true}
                         />
                         <label
                           className="CheckBox-label"
@@ -2090,6 +2154,7 @@ exports[`renders configure auth 1`] = `
                           onChange={[Function]}
                           onFocus={[Function]}
                           type="checkbox"
+                          value={true}
                         />
                         <label
                           className="CheckBox-label"
@@ -2134,6 +2199,7 @@ integration to register for a new account.
                           onChange={[Function]}
                           onFocus={[Function]}
                           type="checkbox"
+                          value={true}
                         />
                         <label
                           className="CheckBox-label"
@@ -2180,6 +2246,7 @@ integration to register for a new account.
                         onChange={[Function]}
                         onFocus={[Function]}
                         type="checkbox"
+                        value={false}
                       />
                       <label
                         className="CheckBox-label CheckBox-labelLight"
@@ -2288,7 +2355,9 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
                         className="TextField-input TextField-colorRegular"
                         disabled={true}
                         name="auth.integrations.oidc.name"
+                        onBlur={[Function]}
                         onChange={[Function]}
+                        onFocus={[Function]}
                         placeholder=""
                         spellCheck={false}
                         type="text"
@@ -2314,7 +2383,9 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
                         className="TextField-input TextField-colorRegular"
                         disabled={true}
                         name="auth.integrations.oidc.clientID"
+                        onBlur={[Function]}
                         onChange={[Function]}
+                        onFocus={[Function]}
                         placeholder=""
                         spellCheck={false}
                         type="text"
@@ -2338,12 +2409,14 @@ needs to be displayed, e.g. “Log in with &lt;Facebook&gt;”.
                       >
                         <input
                           autoCapitalize="off"
-                          autoComplete="off"
+                          autoComplete="new-password"
                           autoCorrect="off"
                           className="PasswordField-colorRegular PasswordField-input"
                           disabled={true}
                           name="auth.integrations.oidc.clientSecret"
+                          onBlur={[Function]}
                           onChange={[Function]}
+                          onFocus={[Function]}
                           placeholder=""
                           spellCheck={false}
                           type="password"
@@ -2393,7 +2466,9 @@ the remaining fields. You may also enter the information manually.
                           className="TextField-input TextField-colorRegular"
                           disabled={true}
                           name="auth.integrations.oidc.issuer"
+                          onBlur={[Function]}
                           onChange={[Function]}
+                          onFocus={[Function]}
                           placeholder=""
                           spellCheck={false}
                           type="text"
@@ -2434,7 +2509,9 @@ the remaining fields. You may also enter the information manually.
                         className="TextField-input TextField-colorRegular"
                         disabled={true}
                         name="auth.integrations.oidc.authorizationURL"
+                        onBlur={[Function]}
                         onChange={[Function]}
+                        onFocus={[Function]}
                         placeholder=""
                         spellCheck={false}
                         type="text"
@@ -2460,7 +2537,9 @@ the remaining fields. You may also enter the information manually.
                         className="TextField-input TextField-colorRegular"
                         disabled={true}
                         name="auth.integrations.oidc.tokenURL"
+                        onBlur={[Function]}
                         onChange={[Function]}
+                        onFocus={[Function]}
                         placeholder=""
                         spellCheck={false}
                         type="text"
@@ -2486,7 +2565,9 @@ the remaining fields. You may also enter the information manually.
                         className="TextField-input TextField-colorRegular"
                         disabled={true}
                         name="auth.integrations.oidc.jwksURI"
+                        onBlur={[Function]}
                         onChange={[Function]}
+                        onFocus={[Function]}
                         placeholder=""
                         spellCheck={false}
                         type="text"
@@ -2520,6 +2601,7 @@ the remaining fields. You may also enter the information manually.
                           onChange={[Function]}
                           onFocus={[Function]}
                           type="checkbox"
+                          value={true}
                         />
                         <label
                           className="CheckBox-label"
@@ -2545,6 +2627,7 @@ the remaining fields. You may also enter the information manually.
                           onChange={[Function]}
                           onFocus={[Function]}
                           type="checkbox"
+                          value={true}
                         />
                         <label
                           className="CheckBox-label"
@@ -2589,6 +2672,7 @@ integration to register for a new account.
                           onChange={[Function]}
                           onFocus={[Function]}
                           type="checkbox"
+                          value={false}
                         />
                         <label
                           className="CheckBox-label"
@@ -2634,6 +2718,7 @@ integration to register for a new account.
                         onChange={[Function]}
                         onFocus={[Function]}
                         type="checkbox"
+                        value={false}
                       />
                       <label
                         className="CheckBox-label CheckBox-labelLight"
@@ -2764,6 +2849,7 @@ and all signed-in users will be signed out.
                           onChange={[Function]}
                           onFocus={[Function]}
                           type="checkbox"
+                          value={true}
                         />
                         <label
                           className="CheckBox-label"
@@ -2789,6 +2875,7 @@ and all signed-in users will be signed out.
                           onChange={[Function]}
                           onFocus={[Function]}
                           type="checkbox"
+                          value={true}
                         />
                         <label
                           className="CheckBox-label"
@@ -2833,6 +2920,7 @@ integration to register for a new account.
                           onChange={[Function]}
                           onFocus={[Function]}
                           type="checkbox"
+                          value={true}
                         />
                         <label
                           className="CheckBox-label"
@@ -2878,6 +2966,7 @@ integration to register for a new account.
                         onChange={[Function]}
                         onFocus={[Function]}
                         type="checkbox"
+                        value={false}
                       />
                       <label
                         className="CheckBox-label CheckBox-labelLight"
@@ -2983,7 +3072,9 @@ to create and set up a web application. For more information visit:
                         className="TextField-input TextField-colorRegular"
                         disabled={true}
                         name="auth.integrations.google.clientID"
+                        onBlur={[Function]}
                         onChange={[Function]}
+                        onFocus={[Function]}
                         placeholder=""
                         spellCheck={false}
                         type="text"
@@ -3007,12 +3098,14 @@ to create and set up a web application. For more information visit:
                       >
                         <input
                           autoCapitalize="off"
-                          autoComplete="off"
+                          autoComplete="new-password"
                           autoCorrect="off"
                           className="PasswordField-colorRegular PasswordField-input"
                           disabled={true}
                           name="auth.integrations.google.clientSecret"
+                          onBlur={[Function]}
                           onChange={[Function]}
+                          onFocus={[Function]}
                           placeholder=""
                           spellCheck={false}
                           type="password"
@@ -3061,6 +3154,7 @@ to create and set up a web application. For more information visit:
                           onChange={[Function]}
                           onFocus={[Function]}
                           type="checkbox"
+                          value={true}
                         />
                         <label
                           className="CheckBox-label"
@@ -3086,6 +3180,7 @@ to create and set up a web application. For more information visit:
                           onChange={[Function]}
                           onFocus={[Function]}
                           type="checkbox"
+                          value={true}
                         />
                         <label
                           className="CheckBox-label"
@@ -3130,6 +3225,7 @@ integration to register for a new account.
                           onChange={[Function]}
                           onFocus={[Function]}
                           type="checkbox"
+                          value={true}
                         />
                         <label
                           className="CheckBox-label"
@@ -3176,6 +3272,7 @@ integration to register for a new account.
                         onChange={[Function]}
                         onFocus={[Function]}
                         type="checkbox"
+                        value={false}
                       />
                       <label
                         className="CheckBox-label CheckBox-labelLight"
@@ -3281,7 +3378,9 @@ For more information visit:
                         className="TextField-input TextField-colorRegular"
                         disabled={true}
                         name="auth.integrations.facebook.clientID"
+                        onBlur={[Function]}
                         onChange={[Function]}
+                        onFocus={[Function]}
                         placeholder=""
                         spellCheck={false}
                         type="text"
@@ -3305,12 +3404,14 @@ For more information visit:
                       >
                         <input
                           autoCapitalize="off"
-                          autoComplete="off"
+                          autoComplete="new-password"
                           autoCorrect="off"
                           className="PasswordField-colorRegular PasswordField-input"
                           disabled={true}
                           name="auth.integrations.facebook.clientSecret"
+                          onBlur={[Function]}
                           onChange={[Function]}
+                          onFocus={[Function]}
                           placeholder=""
                           spellCheck={false}
                           type="password"
@@ -3359,6 +3460,7 @@ For more information visit:
                           onChange={[Function]}
                           onFocus={[Function]}
                           type="checkbox"
+                          value={true}
                         />
                         <label
                           className="CheckBox-label"
@@ -3384,6 +3486,7 @@ For more information visit:
                           onChange={[Function]}
                           onFocus={[Function]}
                           type="checkbox"
+                          value={true}
                         />
                         <label
                           className="CheckBox-label"
@@ -3428,6 +3531,7 @@ integration to register for a new account.
                           onChange={[Function]}
                           onFocus={[Function]}
                           type="checkbox"
+                          value={true}
                         />
                         <label
                           className="CheckBox-label"

src/core/client/admin/test/configure/__snapshots__/general.spec.tsx.snap

@@ -212,7 +212,9 @@ shared.
               <textarea
                 id="configure-general-sitewideCommenting-message"
                 name="disableCommenting.message"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 value="Comments are closed on this story."
               />
             </div>
@@ -317,7 +319,9 @@ Markdown can be found
               <textarea
                 id="configure-general-guidelines-content"
                 name="communityGuidelines.content"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 value=""
               />
             </div>
@@ -414,7 +418,9 @@ Markdown can be found
                   disabled={false}
                   id="configure-general-commentLength-min"
                   name="charCount.min"
+                  onBlur={[Function]}
                   onChange={[Function]}
+                  onFocus={[Function]}
                   placeholder="No limit"
                   spellCheck={false}
                   type="text"
@@ -451,7 +457,9 @@ Markdown can be found
                   disabled={false}
                   id="configure-general-commentLength-max"
                   name="charCount.max"
+                  onBlur={[Function]}
                   onChange={[Function]}
+                  onFocus={[Function]}
                   placeholder="No limit"
                   spellCheck={false}
                   type="text"
@@ -722,7 +730,9 @@ moderation panel.
               <textarea
                 id="configure-general-closedStreamMessage-content"
                 name="closeCommenting.message"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 value="Comments are closed on this story."
               />
             </div>

src/core/client/admin/test/configure/__snapshots__/moderation.spec.tsx.snap

@@ -357,7 +357,9 @@ comment is toxic, according to Perspective API. By default the threshold is set
                   disabled={false}
                   id="configure-moderation-perspective-threshold"
                   name="integrations.perspective.threshold"
+                  onBlur={[Function]}
                   onChange={[Function]}
+                  onFocus={[Function]}
                   placeholder="80"
                   spellCheck={false}
                   type="text"
@@ -408,7 +410,9 @@ comment is toxic, according to Perspective API. By default the threshold is set
                   disabled={false}
                   id="configure-moderation-perspective-model"
                   name="integrations.perspective.model"
+                  onBlur={[Function]}
                   onChange={[Function]}
+                  onFocus={[Function]}
                   placeholder="TOXICITY"
                   spellCheck={false}
                   type="text"
@@ -517,13 +521,15 @@ improve the API over time.
                 >
                   <input
                     autoCapitalize="off"
-                    autoComplete="off"
+                    autoComplete="new-password"
                     autoCorrect="off"
                     className="PasswordField-colorRegular PasswordField-input"
                     disabled={false}
                     id="configure-moderation-integrations.perspective.key"
                     name="integrations.perspective.key"
+                    onBlur={[Function]}
                     onChange={[Function]}
+                    onFocus={[Function]}
                     placeholder=""
                     spellCheck={false}
                     type="password"
@@ -571,7 +577,9 @@ improve the API over time.
                   disabled={false}
                   id="configure-moderation-perspective-customEndpoint"
                   name="integrations.perspective.endpoint"
+                  onBlur={[Function]}
                   onChange={[Function]}
+                  onFocus={[Function]}
                   placeholder="https://commentanalyzer.googleapis.com/v1alpha1"
                   spellCheck={false}
                   type="text"
@@ -704,13 +712,15 @@ in your Akismet account:
                 >
                   <input
                     autoCapitalize="off"
-                    autoComplete="off"
+                    autoComplete="new-password"
                     autoCorrect="off"
                     className="PasswordField-colorRegular PasswordField-input"
                     disabled={false}
                     id="configure-moderation-integrations.akismet.key"
                     name="integrations.akismet.key"
+                    onBlur={[Function]}
                     onChange={[Function]}
+                    onFocus={[Function]}
                     placeholder=""
                     spellCheck={false}
                     type="password"
@@ -753,7 +763,9 @@ in your Akismet account:
                   disabled={false}
                   id="configure-moderation-akismet-site"
                   name="integrations.akismet.site"
+                  onBlur={[Function]}
                   onChange={[Function]}
+                  onFocus={[Function]}
                   placeholder=""
                   spellCheck={false}
                   type="text"

src/core/client/admin/test/configure/__snapshots__/organization.spec.tsx.snap

@@ -144,7 +144,9 @@ exports[`renders configure organization 1`] = `
                   disabled={false}
                   id="configure-organization-organization.name"
                   name="organization.name"
+                  onBlur={[Function]}
                   onChange={[Function]}
+                  onFocus={[Function]}
                   placeholder=""
                   spellCheck={false}
                   type="text"
@@ -184,7 +186,9 @@ status of their accounts or moderation questions.
                   disabled={false}
                   id="configure-organization-organization.contactEmail"
                   name="organization.contactEmail"
+                  onBlur={[Function]}
                   onChange={[Function]}
+                  onFocus={[Function]}
                   placeholder=""
                   spellCheck={false}
                   type="text"

src/core/client/admin/test/configure/__snapshots__/wordList.spec.tsx.snap

@@ -166,7 +166,9 @@ to a new line separated list.
                   disabled={false}
                   id="configure-wordlist-banned"
                   name="wordList.banned"
+                  onBlur={[Function]}
                   onChange={[Function]}
+                  onFocus={[Function]}
                   spellCheck={false}
                   value="fuck"
                 />
@@ -224,7 +226,9 @@ to a new line separated list.
                   disabled={false}
                   id="configure-wordlist-suspect"
                   name="wordList.suspect"
+                  onBlur={[Function]}
                   onChange={[Function]}
+                  onFocus={[Function]}
                   spellCheck={false}
                   value="idiot
 stupid"

src/core/client/admin/test/configure/moderation.spec.tsx

@@ -203,14 +203,6 @@ it("change akismet settings", async () => {
   // Input valid api key
   keyField.props.onChange("my api key");
 
-  // Input malformed site.
-  siteField.props.onChange("malformed url");
-
-  expect(
-    within(akismetContainer).queryAllByText("This field is required.").length
-  ).toBe(0);
-  expect(within(akismetContainer).queryAllByText("Invalid URL").length).toBe(1);
-
   // Input correct site.
   siteField.props.onChange("https://coralproject.net");
 

src/core/client/admin/test/invite/__snapshots__/invite.spec.tsx.snap

@@ -131,7 +131,9 @@ exports[`renders form 1`] = `
                 disabled={false}
                 id="username"
                 name="username"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Username"
                 type="text"
                 value=""
@@ -160,13 +162,15 @@ exports[`renders form 1`] = `
               >
                 <input
                   autoCapitalize="off"
-                  autoComplete="off"
+                  autoComplete="new-password"
                   autoCorrect="off"
                   className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input"
                   disabled={false}
                   id="password"
                   name="password"
+                  onBlur={[Function]}
                   onChange={[Function]}
+                  onFocus={[Function]}
                   placeholder="Password"
                   spellCheck={false}
                   type="password"

src/core/client/admin/test/stories/__snapshots__/stories.spec.tsx.snap

@@ -31,7 +31,9 @@ exports[`renders empty stories 1`] = `
               aria-label="Search by story title or author"
               className="TextField-input TextField-colorRegular TextField-seamlessAdornment"
               name="search"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Search by story title or author..."
               type="text"
               value=""
@@ -334,7 +336,9 @@ exports[`renders stories 1`] = `
               aria-label="Search by story title or author"
               className="TextField-input TextField-colorRegular TextField-seamlessAdornment"
               name="search"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Search by story title or author..."
               type="text"
               value=""

src/core/client/auth/components/ConfirmEmailField.tsx

@@ -2,17 +2,13 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
+import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
 import {
   composeValidators,
   required,
   validateEqualEmails,
 } from "coral-framework/lib/validation";
-import {
-  FormField,
-  InputLabel,
-  TextField,
-  ValidationMessage,
-} from "coral-ui/components";
+import { FormField, InputLabel, TextField } from "coral-ui/components";
 
 interface Props {
   disabled: boolean;
@@ -34,24 +30,14 @@ const ConfirmEmailField: FunctionComponent<Props> = props => (
         >
           <TextField
             id={input.name}
-            name={input.name}
-            onChange={input.onChange}
-            value={input.value}
             placeholder="Confirm Email Address"
-            color={
-              meta.touched && (meta.error || meta.submitError)
-                ? "error"
-                : "regular"
-            }
+            color={colorFromMeta(meta)}
             disabled={props.disabled}
             fullWidth
+            {...input}
           />
         </Localized>
-        {meta.touched && (meta.error || meta.submitError) && (
-          <ValidationMessage fullWidth>
-            {meta.error || meta.submitError}
-          </ValidationMessage>
-        )}
+        <ValidationMessage meta={meta} fullWidth />
       </FormField>
     )}
   </Field>

src/core/client/auth/components/ConfirmPasswordField.tsx

@@ -1,61 +0,0 @@
-import { Localized } from "fluent-react/compat";
-import React, { FunctionComponent } from "react";
-import { Field } from "react-final-form";
-
-import {
-  composeValidators,
-  required,
-  validateEqualPasswords,
-} from "coral-framework/lib/validation";
-import {
-  FormField,
-  InputLabel,
-  TextField,
-  ValidationMessage,
-} from "coral-ui/components";
-
-interface Props {
-  disabled: boolean;
-}
-
-const SetPasswordField: FunctionComponent<Props> = props => (
-  <Field
-    name="confirmPassword"
-    validate={composeValidators(required, validateEqualPasswords)}
-  >
-    {({ input, meta }) => (
-      <FormField>
-        <Localized id="general-confirmPasswordLabel">
-          <InputLabel htmlFor={input.name}>Confirm Password</InputLabel>
-        </Localized>
-        <Localized
-          id="general-confirmPasswordTextField"
-          attrs={{ placeholder: true }}
-        >
-          <TextField
-            id={input.name}
-            name={input.name}
-            onChange={input.onChange}
-            value={input.value}
-            placeholder="Confirm Password"
-            type="password"
-            color={
-              meta.touched && (meta.error || meta.submitError)
-                ? "error"
-                : "regular"
-            }
-            disabled={props.disabled}
-            fullWidth
-          />
-        </Localized>
-        {meta.touched && (meta.error || meta.submitError) && (
-          <ValidationMessage>
-            {meta.error || meta.submitError}
-          </ValidationMessage>
-        )}
-      </FormField>
-    )}
-  </Field>
-);
-
-export default SetPasswordField;

src/core/client/auth/components/EmailField.tsx

@@ -2,17 +2,13 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
+import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
 import {
   composeValidators,
   required,
   validateEmail,
 } from "coral-framework/lib/validation";
-import {
-  FormField,
-  InputLabel,
-  TextField,
-  ValidationMessage,
-} from "coral-ui/components";
+import { FormField, InputLabel, TextField } from "coral-ui/components";
 
 interface Props {
   disabled: boolean;
@@ -31,25 +27,15 @@ const EmailField: FunctionComponent<Props> = props => (
         >
           <TextField
             id={input.name}
-            name={input.name}
-            onChange={input.onChange}
-            value={input.value}
             placeholder="Email Address"
             type="email"
-            color={
-              meta.touched && (meta.error || meta.submitError)
-                ? "error"
-                : "regular"
-            }
+            color={colorFromMeta(meta)}
             disabled={props.disabled}
             fullWidth
+            {...input}
           />
         </Localized>
-        {meta.touched && (meta.error || meta.submitError) && (
-          <ValidationMessage fullWidth>
-            {meta.error || meta.submitError}
-          </ValidationMessage>
-        )}
+        <ValidationMessage meta={meta} fullWidth />
       </FormField>
     )}
   </Field>

src/core/client/auth/components/SetPasswordField.tsx

@@ -3,17 +3,13 @@ import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
 import { PasswordField } from "coral-framework/components";
+import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
 import {
   composeValidators,
   required,
   validatePassword,
 } from "coral-framework/lib/validation";
-import {
-  FormField,
-  InputDescription,
-  InputLabel,
-  ValidationMessage,
-} from "coral-ui/components";
+import { FormField, InputDescription, InputLabel } from "coral-ui/components";
 
 interface Props {
   disabled: boolean;
@@ -37,24 +33,14 @@ const SetPasswordField: FunctionComponent<Props> = props => (
         <Localized id="general-passwordTextField" attrs={{ placeholder: true }}>
           <PasswordField
             id={input.name}
-            name={input.name}
-            onChange={input.onChange}
-            value={input.value}
             placeholder="Password"
-            color={
-              meta.touched && (meta.error || meta.submitError)
-                ? "error"
-                : "regular"
-            }
+            color={colorFromMeta(meta)}
             disabled={props.disabled}
             fullWidth
+            {...input}
           />
         </Localized>
-        {meta.touched && (meta.error || meta.submitError) && (
-          <ValidationMessage fullWidth>
-            {meta.error || meta.submitError}
-          </ValidationMessage>
-        )}
+        <ValidationMessage meta={meta} fullWidth />
       </FormField>
     )}
   </Field>

src/core/client/auth/components/UsernameField.tsx

@@ -2,6 +2,7 @@ import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field } from "react-final-form";
 
+import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
 import {
   composeValidators,
   required,
@@ -12,7 +13,6 @@ import {
   InputDescription,
   InputLabel,
   TextField,
-  ValidationMessage,
 } from "coral-ui/components";
 
 interface Props {
@@ -35,24 +35,14 @@ const CreateUsernameField: FunctionComponent<Props> = props => (
         <Localized id="general-usernameTextField" attrs={{ placeholder: true }}>
           <TextField
             id={input.name}
-            name={input.name}
-            onChange={input.onChange}
-            value={input.value}
             placeholder="Username"
-            color={
-              meta.touched && (meta.error || meta.submitError)
-                ? "error"
-                : "regular"
-            }
+            color={colorFromMeta(meta)}
             disabled={props.disabled}
             fullWidth
+            {...input}
           />
         </Localized>
-        {meta.touched && (meta.error || meta.submitError) && (
-          <ValidationMessage fullWidth>
-            {meta.error || meta.submitError}
-          </ValidationMessage>
-        )}
+        <ValidationMessage meta={meta} fullWidth />
       </FormField>
     )}
   </Field>

src/core/client/auth/test/__snapshots__/addEmailAddress.spec.tsx.snap

@@ -99,7 +99,9 @@ Your email address will be used to:
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="email"
           value="hans@test.com"
@@ -123,7 +125,9 @@ Your email address will be used to:
           disabled={false}
           id="confirmEmail"
           name="confirmEmail"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Confirm Email Address"
           type="text"
           value=""
@@ -258,7 +262,9 @@ Your email address will be used to:
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="email"
           value="invalid-email"
@@ -295,7 +301,9 @@ Your email address will be used to:
           disabled={false}
           id="confirmEmail"
           name="confirmEmail"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Confirm Email Address"
           type="text"
           value="invalid-confirmation-email"
@@ -449,7 +457,9 @@ Your email address will be used to:
                 disabled={false}
                 id="email"
                 name="email"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Email Address"
                 type="email"
                 value=""
@@ -473,7 +483,9 @@ Your email address will be used to:
                 disabled={false}
                 id="confirmEmail"
                 name="confirmEmail"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Confirm Email Address"
                 type="text"
                 value=""
@@ -598,7 +610,9 @@ Your email address will be used to:
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="email"
           value=""
@@ -635,7 +649,9 @@ Your email address will be used to:
           disabled={false}
           id="confirmEmail"
           name="confirmEmail"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Confirm Email Address"
           type="text"
           value=""
@@ -784,7 +800,9 @@ GraphQL request (4:3)
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="email"
           value="hans@test.com"
@@ -808,7 +826,9 @@ GraphQL request (4:3)
           disabled={false}
           id="confirmEmail"
           name="confirmEmail"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Confirm Email Address"
           type="text"
           value="hans@test.com"
@@ -930,7 +950,9 @@ Your email address will be used to:
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="email"
           value=""
@@ -954,7 +976,9 @@ Your email address will be used to:
           disabled={false}
           id="confirmEmail"
           name="confirmEmail"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Confirm Email Address"
           type="text"
           value=""

src/core/client/auth/test/__snapshots__/createPassword.spec.tsx.snap

@@ -42,7 +42,9 @@ we require users to create a password.
             disabled={false}
             id="password"
             name="password"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder="Password"
             spellCheck={false}
             type="password"
@@ -155,7 +157,9 @@ we require users to create a password.
                   disabled={false}
                   id="password"
                   name="password"
+                  onBlur={[Function]}
                   onChange={[Function]}
+                  onFocus={[Function]}
                   placeholder="Password"
                   spellCheck={false}
                   type="password"
@@ -239,7 +243,9 @@ we require users to create a password.
             disabled={false}
             id="password"
             name="password"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder="Password"
             spellCheck={false}
             type="password"
@@ -347,7 +353,9 @@ GraphQL request (4:3)
             disabled={false}
             id="password"
             name="password"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder="Password"
             spellCheck={false}
             type="password"
@@ -428,7 +436,9 @@ we require users to create a password.
             disabled={false}
             id="password"
             name="password"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder="Password"
             spellCheck={false}
             type="password"

src/core/client/auth/test/__snapshots__/createUsername.spec.tsx.snap

@@ -35,7 +35,9 @@ exports[`checks for invalid username 1`] = `
           disabled={false}
           id="username"
           name="username"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Username"
           type="text"
           value="x"
@@ -125,7 +127,9 @@ exports[`renders createUsername view 1`] = `
                 disabled={false}
                 id="username"
                 name="username"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Username"
                 type="text"
                 value=""
@@ -186,7 +190,9 @@ exports[`shows error when submitting empty form 1`] = `
           disabled={false}
           id="username"
           name="username"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Username"
           type="text"
           value=""
@@ -271,7 +277,9 @@ GraphQL request (4:3)
           disabled={false}
           id="username"
           name="username"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Username"
           type="text"
           value="hans"
@@ -329,7 +337,9 @@ exports[`successfully sets username 1`] = `
           disabled={false}
           id="username"
           name="username"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Username"
           type="text"
           value=""

src/core/client/auth/test/__snapshots__/forgotPassword.spec.tsx.snap

@@ -67,7 +67,9 @@ reset your password.
                 disabled={false}
                 id="email"
                 name="email"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Email Address"
                 type="text"
                 value=""

src/core/client/auth/test/__snapshots__/signIn.spec.tsx.snap

@@ -25,7 +25,9 @@ exports[`accepts correct password 1`] = `
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="email"
           value=""
@@ -68,7 +70,9 @@ exports[`accepts correct password 1`] = `
             disabled={false}
             id="password"
             name="password"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder="Password"
             spellCheck={false}
             type="password"
@@ -155,7 +159,9 @@ exports[`accepts valid email 1`] = `
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="email"
           value="hans@test.com"
@@ -185,7 +191,9 @@ exports[`accepts valid email 1`] = `
             disabled={false}
             id="password"
             name="password"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder="Password"
             spellCheck={false}
             type="password"
@@ -292,7 +300,9 @@ exports[`auth configuration renders all auth enabled 1`] = `
               disabled={false}
               id="email"
               name="email"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Email Address"
               type="email"
               value=""
@@ -322,7 +332,9 @@ exports[`auth configuration renders all auth enabled 1`] = `
                 disabled={false}
                 id="password"
                 name="password"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Password"
                 spellCheck={false}
                 type="password"
@@ -561,7 +573,9 @@ exports[`checks for invalid email 1`] = `
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="email"
           value="invalid-email"
@@ -604,7 +618,9 @@ exports[`checks for invalid email 1`] = `
             disabled={false}
             id="password"
             name="password"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder="Password"
             spellCheck={false}
             type="password"
@@ -751,7 +767,9 @@ exports[`renders sign in view 1`] = `
                   disabled={false}
                   id="email"
                   name="email"
+                  onBlur={[Function]}
                   onChange={[Function]}
+                  onFocus={[Function]}
                   placeholder="Email Address"
                   type="email"
                   value=""
@@ -781,7 +799,9 @@ exports[`renders sign in view 1`] = `
                     disabled={false}
                     id="password"
                     name="password"
+                    onBlur={[Function]}
                     onChange={[Function]}
+                    onFocus={[Function]}
                     placeholder="Password"
                     spellCheck={false}
                     type="password"
@@ -928,7 +948,9 @@ exports[`renders sign in view with error 1`] = `
                 disabled={false}
                 id="email"
                 name="email"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Email Address"
                 type="email"
                 value=""
@@ -958,7 +980,9 @@ exports[`renders sign in view with error 1`] = `
                   disabled={false}
                   id="password"
                   name="password"
+                  onBlur={[Function]}
                   onChange={[Function]}
+                  onFocus={[Function]}
                   placeholder="Password"
                   spellCheck={false}
                   type="password"
@@ -1051,7 +1075,9 @@ exports[`shows error when submitting empty form 1`] = `
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="email"
           value=""
@@ -1094,7 +1120,9 @@ exports[`shows error when submitting empty form 1`] = `
             disabled={false}
             id="password"
             name="password"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder="Password"
             spellCheck={false}
             type="password"
@@ -1201,7 +1229,9 @@ exports[`shows server error 1`] = `
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="email"
           value="hans@test.com"
@@ -1231,7 +1261,9 @@ exports[`shows server error 1`] = `
             disabled={false}
             id="password"
             name="password"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder="Password"
             spellCheck={false}
             type="password"
@@ -1318,7 +1350,9 @@ exports[`submits form successfully 1`] = `
           disabled={false}
           id="email"
           name="email"
+          onBlur={[Function]}
           onChange={[Function]}
+          onFocus={[Function]}
           placeholder="Email Address"
           type="email"
           value=""
@@ -1348,7 +1382,9 @@ exports[`submits form successfully 1`] = `
             disabled={false}
             id="password"
             name="password"
+            onBlur={[Function]}
             onChange={[Function]}
+            onFocus={[Function]}
             placeholder="Password"
             spellCheck={false}
             type="password"

src/core/client/auth/test/__snapshots__/signUp.spec.tsx.snap

@@ -32,7 +32,9 @@ exports[`accepts correct password 1`] = `
               disabled={false}
               id="email"
               name="email"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Email Address"
               type="email"
               value=""
@@ -74,7 +76,9 @@ exports[`accepts correct password 1`] = `
               disabled={false}
               id="username"
               name="username"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Username"
               type="text"
               value=""
@@ -122,7 +126,9 @@ exports[`accepts correct password 1`] = `
                 disabled={false}
                 id="password"
                 name="password"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Password"
                 spellCheck={false}
                 type="password"
@@ -206,7 +212,9 @@ exports[`accepts valid email 1`] = `
               disabled={false}
               id="email"
               name="email"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Email Address"
               type="email"
               value="hans@test.com"
@@ -235,7 +243,9 @@ exports[`accepts valid email 1`] = `
               disabled={false}
               id="username"
               name="username"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Username"
               type="text"
               value=""
@@ -283,7 +293,9 @@ exports[`accepts valid email 1`] = `
                 disabled={false}
                 id="password"
                 name="password"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Password"
                 spellCheck={false}
                 type="password"
@@ -380,7 +392,9 @@ exports[`accepts valid username 1`] = `
               disabled={false}
               id="email"
               name="email"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Email Address"
               type="email"
               value=""
@@ -422,7 +436,9 @@ exports[`accepts valid username 1`] = `
               disabled={false}
               id="username"
               name="username"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Username"
               type="text"
               value="hans"
@@ -457,7 +473,9 @@ exports[`accepts valid username 1`] = `
                 disabled={false}
                 id="password"
                 name="password"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Password"
                 spellCheck={false}
                 type="password"
@@ -554,7 +572,9 @@ exports[`auth configuration renders all auth enabled 1`] = `
               disabled={false}
               id="email"
               name="email"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Email Address"
               type="email"
               value=""
@@ -583,7 +603,9 @@ exports[`auth configuration renders all auth enabled 1`] = `
               disabled={false}
               id="username"
               name="username"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Username"
               type="text"
               value=""
@@ -618,7 +640,9 @@ exports[`auth configuration renders all auth enabled 1`] = `
                 disabled={false}
                 id="password"
                 name="password"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Password"
                 spellCheck={false}
                 type="password"
@@ -849,7 +873,9 @@ exports[`checks for invalid characters in username 1`] = `
               disabled={false}
               id="email"
               name="email"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Email Address"
               type="email"
               value=""
@@ -891,7 +917,9 @@ exports[`checks for invalid characters in username 1`] = `
               disabled={false}
               id="username"
               name="username"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Username"
               type="text"
               value="$%$§$%$§%"
@@ -939,7 +967,9 @@ exports[`checks for invalid characters in username 1`] = `
                 disabled={false}
                 id="password"
                 name="password"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Password"
                 spellCheck={false}
                 type="password"
@@ -1036,7 +1066,9 @@ exports[`checks for invalid email 1`] = `
               disabled={false}
               id="email"
               name="email"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Email Address"
               type="email"
               value="invalid-email"
@@ -1078,7 +1110,9 @@ exports[`checks for invalid email 1`] = `
               disabled={false}
               id="username"
               name="username"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Username"
               type="text"
               value=""
@@ -1126,7 +1160,9 @@ exports[`checks for invalid email 1`] = `
                 disabled={false}
                 id="password"
                 name="password"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Password"
                 spellCheck={false}
                 type="password"
@@ -1223,7 +1259,9 @@ exports[`checks for too long username 1`] = `
               disabled={false}
               id="email"
               name="email"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Email Address"
               type="email"
               value=""
@@ -1265,7 +1303,9 @@ exports[`checks for too long username 1`] = `
               disabled={false}
               id="username"
               name="username"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Username"
               type="text"
               value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
@@ -1313,7 +1353,9 @@ exports[`checks for too long username 1`] = `
                 disabled={false}
                 id="password"
                 name="password"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Password"
                 spellCheck={false}
                 type="password"
@@ -1410,7 +1452,9 @@ exports[`checks for too short password 1`] = `
               disabled={false}
               id="email"
               name="email"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Email Address"
               type="email"
               value=""
@@ -1452,7 +1496,9 @@ exports[`checks for too short password 1`] = `
               disabled={false}
               id="username"
               name="username"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Username"
               type="text"
               value=""
@@ -1500,7 +1546,9 @@ exports[`checks for too short password 1`] = `
                 disabled={false}
                 id="password"
                 name="password"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Password"
                 spellCheck={false}
                 type="password"
@@ -1597,7 +1645,9 @@ exports[`checks for too short username 1`] = `
               disabled={false}
               id="email"
               name="email"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Email Address"
               type="email"
               value=""
@@ -1639,7 +1689,9 @@ exports[`checks for too short username 1`] = `
               disabled={false}
               id="username"
               name="username"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Username"
               type="text"
               value="u"
@@ -1687,7 +1739,9 @@ exports[`checks for too short username 1`] = `
                 disabled={false}
                 id="password"
                 name="password"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Password"
                 spellCheck={false}
                 type="password"
@@ -1824,7 +1878,9 @@ exports[`renders sign up form 1`] = `
                   disabled={false}
                   id="email"
                   name="email"
+                  onBlur={[Function]}
                   onChange={[Function]}
+                  onFocus={[Function]}
                   placeholder="Email Address"
                   type="email"
                   value=""
@@ -1853,7 +1909,9 @@ exports[`renders sign up form 1`] = `
                   disabled={false}
                   id="username"
                   name="username"
+                  onBlur={[Function]}
                   onChange={[Function]}
+                  onFocus={[Function]}
                   placeholder="Username"
                   type="text"
                   value=""
@@ -1888,7 +1946,9 @@ exports[`renders sign up form 1`] = `
                     disabled={false}
                     id="password"
                     name="password"
+                    onBlur={[Function]}
                     onChange={[Function]}
+                    onFocus={[Function]}
                     placeholder="Password"
                     spellCheck={false}
                     type="password"
@@ -1974,7 +2034,9 @@ exports[`shows error when submitting empty form 1`] = `
               disabled={false}
               id="email"
               name="email"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Email Address"
               type="email"
               value=""
@@ -2016,7 +2078,9 @@ exports[`shows error when submitting empty form 1`] = `
               disabled={false}
               id="username"
               name="username"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Username"
               type="text"
               value=""
@@ -2064,7 +2128,9 @@ exports[`shows error when submitting empty form 1`] = `
                 disabled={false}
                 id="password"
                 name="password"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Password"
                 spellCheck={false}
                 type="password"
@@ -2168,7 +2234,9 @@ exports[`shows server error 1`] = `
               disabled={false}
               id="email"
               name="email"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Email Address"
               type="email"
               value="hans@test.com"
@@ -2197,7 +2265,9 @@ exports[`shows server error 1`] = `
               disabled={false}
               id="username"
               name="username"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Username"
               type="text"
               value="hans"
@@ -2232,7 +2302,9 @@ exports[`shows server error 1`] = `
                 disabled={false}
                 id="password"
                 name="password"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Password"
                 spellCheck={false}
                 type="password"
@@ -2316,7 +2388,9 @@ exports[`submits form successfully 1`] = `
               disabled={false}
               id="email"
               name="email"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Email Address"
               type="email"
               value=""
@@ -2345,7 +2419,9 @@ exports[`submits form successfully 1`] = `
               disabled={false}
               id="username"
               name="username"
+              onBlur={[Function]}
               onChange={[Function]}
+              onFocus={[Function]}
               placeholder="Username"
               type="text"
               value=""
@@ -2380,7 +2456,9 @@ exports[`submits form successfully 1`] = `
                 disabled={false}
                 id="password"
                 name="password"
+                onBlur={[Function]}
                 onChange={[Function]}
+                onFocus={[Function]}
                 placeholder="Password"
                 spellCheck={false}
                 type="password"

src/core/client/auth/views/ForgotPassword/ForgotPasswordForm.tsx

@@ -9,6 +9,7 @@ import Main from "coral-auth/components/Main";
 import { getViewURL } from "coral-auth/helpers";
 import { SetViewMutation } from "coral-auth/mutations";
 import { InvalidRequestError } from "coral-framework/lib/errors";
+import { colorFromMeta, ValidationMessage } from "coral-framework/lib/form";
 import { useMutation } from "coral-framework/lib/relay";
 import {
   composeValidators,
@@ -25,7 +26,6 @@ import {
   TextField,
   TextLink,
   Typography,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import ForgotPasswordMutation from "./ForgotPasswordMutation";
@@ -119,24 +119,14 @@ const ForgotPasswordForm: FunctionComponent<Props> = ({ onCheckEmail }) => {
                       >
                         <TextField
                           id={input.name}
-                          name={input.name}
-                          onChange={input.onChange}
-                          value={input.value}
                           placeholder="Email Address"
-                          color={
-                            meta.touched && (meta.error || meta.submitError)
-                              ? "error"
-                              : "regular"
-                          }
-                          fullWidth
+                          color={colorFromMeta(meta)}
                           disabled={submitting}
+                          fullWidth
+                          {...input}
                         />
                       </Localized>
-                      {meta.touched && (meta.error || meta.submitError) && (
-                        <ValidationMessage fullWidth>
-                          {meta.error || meta.submitError}
-                        </ValidationMessage>
-                      )}
+                      <ValidationMessage meta={meta} fullWidth />
                     </FormField>
                   )}
                 </Field>

src/core/client/auth/views/SignIn/SignInWithEmail.tsx

@@ -1,4 +1,3 @@
-import { OnSubmit } from "coral-framework/lib/form";
 import { Localized } from "fluent-react/compat";
 import React, { FunctionComponent } from "react";
 import { Field, Form } from "react-final-form";
@@ -6,6 +5,11 @@ import { Field, Form } from "react-final-form";
 import AutoHeight from "coral-auth/components/AutoHeight";
 import EmailField from "coral-auth/components/EmailField";
 import { PasswordField } from "coral-framework/components";
+import {
+  colorFromMeta,
+  OnSubmit,
+  ValidationMessage,
+} from "coral-framework/lib/form";
 import { composeValidators, required } from "coral-framework/lib/validation";
 import {
   Button,
@@ -17,7 +21,6 @@ import {
   InputLabel,
   TextLink,
   Typography,
-  ValidationMessage,
 } from "coral-ui/components";
 
 interface FormProps {
@@ -57,24 +60,14 @@ const SignInWithEmail: FunctionComponent<SignInWithEmailForm> = props => {
                   >
                     <PasswordField
                       id={input.name}
-                      name={input.name}
-                      onChange={input.onChange}
-                      value={input.value}
                       placeholder="Password"
-                      color={
-                        meta.touched && (meta.error || meta.submitError)
-                          ? "error"
-                          : "regular"
-                      }
+                      color={colorFromMeta(meta)}
                       disabled={submitting}
                       fullWidth
+                      {...input}
                     />
                   </Localized>
-                  {meta.touched && (meta.error || meta.submitError) && (
-                    <ValidationMessage fullWidth>
-                      {meta.error || meta.submitError}
-                    </ValidationMessage>
-                  )}
+                  <ValidationMessage meta={meta} fullWidth />
                   <Flex justifyContent="flex-end">
                     <Typography variant="bodyCopy">
                       <Localized id="signIn-forgotYourPassword">

src/core/client/framework/lib/form/SubmitHookContext.tsx

@@ -1,8 +1,8 @@
 import { noop } from "lodash";
 import React from "react";
 
-export type SubmitHook = (
-  data: any,
+export type SubmitHook<T = any> = (
+  data: T,
   actions: {
     // Callback will be called after all validations has passed and
     // the submit has not been cancelled.
@@ -11,8 +11,8 @@ export type SubmitHook = (
   }
 ) => Promise<any> | any;
 export type RemoveSubmitHook = () => void;
-export type AddSubmitHook = (hook: SubmitHook) => RemoveSubmitHook;
-export type SubmitHookContext = AddSubmitHook;
+export type AddSubmitHook<T = any> = (hook: SubmitHook<T>) => RemoveSubmitHook;
+export type SubmitHookContext<T = any> = AddSubmitHook<T>;
 
 const { Provider, Consumer } = React.createContext<SubmitHookContext>(
   () => noop

src/core/client/framework/lib/form/components/ValidationMessage.tsx

@@ -0,0 +1,19 @@
+import React, { FunctionComponent } from "react";
+
+import { FieldMeta, hasError } from "coral-framework/lib/form/helpers";
+import { Omit } from "coral-framework/types";
+import { ValidationMessage as UIValidationMessage } from "coral-ui/components";
+import { ValidationMessageProps } from "coral-ui/components/ValidationMessage";
+
+interface Props extends Omit<ValidationMessageProps, "children"> {
+  meta: FieldMeta;
+}
+
+const ValidationMessage: FunctionComponent<Props> = ({ meta, ...rest }) =>
+  hasError(meta) ? (
+    <UIValidationMessage {...rest}>
+      {meta.error || meta.submitError}
+    </UIValidationMessage>
+  ) : null;
+
+export default ValidationMessage;

src/core/client/framework/lib/form/components/index.ts

@@ -0,0 +1,2 @@
+export { default as FormInitializer } from "./FormInitializer";
+export { default as ValidationMessage } from "./ValidationMessage";

src/core/client/framework/lib/form/helpers.tsx

@@ -1,5 +1,6 @@
 import { FormApi } from "final-form";
 import { ReactNode } from "react";
+import { FieldRenderProps } from "react-final-form";
 
 type ErrorsObject<T> = { [K in keyof T]?: ReactNode };
 
@@ -65,3 +66,14 @@ export const formatStringList = (v: string[] | null) => {
   }
   return v.join(", ");
 };
+
+export type FieldMeta = Pick<
+  FieldRenderProps["meta"],
+  "touched" | "error" | "submitError"
+>;
+
+export const hasError = ({ touched, error, submitError }: FieldMeta) =>
+  touched && (error || submitError);
+
+export const colorFromMeta = (meta: FieldMeta) =>
+  hasError(meta) ? "error" : "regular";

src/core/client/framework/lib/form/index.tsx

@@ -1,5 +1,5 @@
+export * from "./components";
 export * from "./helpers";
 export * from "./SubmitHookContext";
 export { default as withSubmitHookContext } from "./withSubmitHookContext";
 export { default as SubmitHookHandler } from "./SubmitHookHandler";
-export { default as FormInitializer } from "./FormInitializer";

src/core/client/framework/lib/validation.tsx

@@ -201,6 +201,42 @@ export const validateWholeNumberBetween = (min: number, max: number) =>
  */
 export const validatePercentage = (min: number, max: number) =>
   createValidator(
-    v => v === null || (!Number.isNaN(v) && v >= min && v <= max),
+    v =>
+      v === null ||
+      (typeof v === "number" && !Number.isNaN(v) && v >= min && v <= max),
+
     NOT_A_WHOLE_NUMBER_BETWEEN(min * 100, max * 100)
   );
+
+/**
+ * Condition represents a given check that can be performed for the purpose of
+ * filtering a validation operation.
+ */
+export type Condition<T = any, V = any> = (value: T, values: V) => boolean;
+
+/**
+ * composeValidatorsWhen is the same as composeValidators except it will only
+ * apply the validators if the condition is true.
+ */
+export function composeValidatorsWhen<T = any, V = any>(
+  condition: Condition<T, V>,
+  ...validators: Array<Validator<T, V>>
+): Validator<T, V> {
+  return validateWhen(condition, composeValidators(...validators));
+}
+
+/**
+ * validate will simply wrap a single validator with a condition check first.
+ */
+export function validateWhen<T = any, V = any>(
+  condition: Condition<T, V>,
+  validator: Validator<T, V>
+): Validator<T, V> {
+  return (value, values) => {
+    if (condition(value, values)) {
+      return validator(value, values);
+    }
+
+    return null;
+  };
+}

src/core/client/install/App/steps/AddOrganizationStep.tsx

@@ -2,7 +2,11 @@ import { Localized } from "fluent-react/compat";
 import React from "react";
 import { Field, Form } from "react-final-form";
 
-import { OnSubmit } from "coral-framework/lib/form";
+import {
+  colorFromMeta,
+  OnSubmit,
+  ValidationMessage,
+} from "coral-framework/lib/form";
 import {
   composeValidators,
   required,
@@ -18,7 +22,6 @@ import {
   InputLabel,
   TextField,
   Typography,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import BackButton from "./BackButton";
@@ -87,24 +90,14 @@ class AddOrganizationStep extends React.Component<Props> {
                       attrs={{ placeholder: true }}
                     >
                       <TextField
-                        name={input.name}
-                        onChange={input.onChange}
-                        value={input.value}
                         placeholder="Organization Name"
-                        color={
-                          meta.touched && (meta.error || meta.submitError)
-                            ? "error"
-                            : "regular"
-                        }
+                        color={colorFromMeta(meta)}
                         disabled={submitting}
                         fullWidth
+                        {...input}
                       />
                     </Localized>
-                    {meta.touched && (meta.error || meta.submitError) && (
-                      <ValidationMessage fullWidth>
-                        {meta.error || meta.submitError}
-                      </ValidationMessage>
-                    )}
+                    <ValidationMessage meta={meta} fullWidth />
                   </FormField>
                 )}
               </Field>
@@ -123,24 +116,14 @@ class AddOrganizationStep extends React.Component<Props> {
                       attrs={{ placeholder: true }}
                     >
                       <TextField
-                        name={input.name}
-                        onChange={input.onChange}
-                        value={input.value}
                         placeholder="Organization Contact Email"
-                        color={
-                          meta.touched && (meta.error || meta.submitError)
-                            ? "error"
-                            : "regular"
-                        }
+                        color={colorFromMeta(meta)}
                         disabled={submitting}
                         fullWidth
+                        {...input}
                       />
                     </Localized>
-                    {meta.touched && (meta.error || meta.submitError) && (
-                      <ValidationMessage fullWidth>
-                        {meta.error || meta.submitError}
-                      </ValidationMessage>
-                    )}
+                    <ValidationMessage meta={meta} fullWidth />
                   </FormField>
                 )}
               </Field>
@@ -169,24 +152,14 @@ class AddOrganizationStep extends React.Component<Props> {
                       attrs={{ placeholder: true }}
                     >
                       <TextField
-                        name={input.name}
-                        onChange={input.onChange}
-                        value={input.value}
                         placeholder="Organization URL"
-                        color={
-                          meta.touched && (meta.error || meta.submitError)
-                            ? "error"
-                            : "regular"
-                        }
+                        color={colorFromMeta(meta)}
                         disabled={submitting}
                         fullWidth
+                        {...input}
                       />
                     </Localized>
-                    {meta.touched && (meta.error || meta.submitError) && (
-                      <ValidationMessage fullWidth>
-                        {meta.error || meta.submitError}
-                      </ValidationMessage>
-                    )}
+                    <ValidationMessage meta={meta} fullWidth />
                   </FormField>
                 )}
               </Field>

src/core/client/install/App/steps/CreateYourAccountStep.tsx

@@ -2,7 +2,11 @@ import { Localized } from "fluent-react/compat";
 import React, { Component } from "react";
 import { Field, Form } from "react-final-form";
 
-import { OnSubmit } from "coral-framework/lib/form";
+import {
+  colorFromMeta,
+  OnSubmit,
+  ValidationMessage,
+} from "coral-framework/lib/form";
 import {
   composeValidators,
   required,
@@ -20,7 +24,6 @@ import {
   InputLabel,
   TextField,
   Typography,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import NextButton from "./NextButton";
@@ -82,24 +85,14 @@ class CreateYourAccountStep extends Component<Props> {
                       attrs={{ placeholder: true }}
                     >
                       <TextField
-                        name={input.name}
-                        onChange={input.onChange}
-                        value={input.value}
                         placeholder="Email"
-                        color={
-                          meta.touched && (meta.error || meta.submitError)
-                            ? "error"
-                            : "regular"
-                        }
+                        color={colorFromMeta(meta)}
                         disabled={submitting}
                         fullWidth
+                        {...input}
                       />
                     </Localized>
-                    {meta.touched && (meta.error || meta.submitError) && (
-                      <ValidationMessage fullWidth>
-                        {meta.error || meta.submitError}
-                      </ValidationMessage>
-                    )}
+                    <ValidationMessage meta={meta} fullWidth />
                   </FormField>
                 )}
               </Field>
@@ -124,24 +117,14 @@ class CreateYourAccountStep extends Component<Props> {
                       attrs={{ placeholder: true }}
                     >
                       <TextField
-                        name={input.name}
-                        onChange={input.onChange}
-                        value={input.value}
                         placeholder="Username"
-                        color={
-                          meta.touched && (meta.error || meta.submitError)
-                            ? "error"
-                            : "regular"
-                        }
+                        color={colorFromMeta(meta)}
                         disabled={submitting}
                         fullWidth
+                        {...input}
                       />
                     </Localized>
-                    {meta.touched && (meta.error || meta.submitError) && (
-                      <ValidationMessage fullWidth>
-                        {meta.error || meta.submitError}
-                      </ValidationMessage>
-                    )}
+                    <ValidationMessage meta={meta} fullWidth />
                   </FormField>
                 )}
               </Field>
@@ -165,28 +148,19 @@ class CreateYourAccountStep extends Component<Props> {
                       attrs={{ placeholder: true }}
                     >
                       <TextField
-                        name={input.name}
-                        onChange={input.onChange}
-                        value={input.value}
                         placeholder="Password"
                         type="password"
-                        color={
-                          meta.touched && (meta.error || meta.submitError)
-                            ? "error"
-                            : "regular"
-                        }
+                        color={colorFromMeta(meta)}
                         disabled={submitting}
                         fullWidth
+                        {...input}
                       />
                     </Localized>
-                    {meta.touched && (meta.error || meta.submitError) && (
-                      <ValidationMessage fullWidth>
-                        {meta.error || meta.submitError}
-                      </ValidationMessage>
-                    )}
+                    <ValidationMessage meta={meta} fullWidth />
                   </FormField>
                 )}
               </Field>
+              {/* FIXME: (wyattjoh) evaluate removing this in favor of the reveal */}
               <Field
                 name="confirmPassword"
                 validate={composeValidators(required, validateEqualPasswords)}
@@ -201,25 +175,15 @@ class CreateYourAccountStep extends Component<Props> {
                       attrs={{ placeholder: true }}
                     >
                       <TextField
-                        name={input.name}
-                        onChange={input.onChange}
-                        value={input.value}
                         placeholder="Confirm Password"
                         type="password"
-                        color={
-                          meta.touched && (meta.error || meta.submitError)
-                            ? "error"
-                            : "regular"
-                        }
+                        color={colorFromMeta(meta)}
                         disabled={submitting}
                         fullWidth
+                        {...input}
                       />
                     </Localized>
-                    {meta.touched && (meta.error || meta.submitError) && (
-                      <ValidationMessage fullWidth>
-                        {meta.error || meta.submitError}
-                      </ValidationMessage>
-                    )}
+                    <ValidationMessage meta={meta} fullWidth />
                   </FormField>
                 )}
               </Field>

src/core/client/install/App/steps/PermittedDomainsStep.tsx

@@ -1,9 +1,13 @@
-import { OnSubmit } from "coral-framework/lib/form";
 import { FORM_ERROR } from "final-form";
 import { Localized } from "fluent-react/compat";
 import React, { Component } from "react";
 import { Field, Form } from "react-final-form";
 
+import {
+  colorFromMeta,
+  OnSubmit,
+  ValidationMessage,
+} from "coral-framework/lib/form";
 import {
   Button,
   CallOut,
@@ -14,7 +18,6 @@ import {
   InputLabel,
   TextField,
   Typography,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import BackButton from "./BackButton";
@@ -86,24 +89,14 @@ class PermittedDomainsStep extends Component<Props> {
                       attrs={{ placeholder: true }}
                     >
                       <TextField
-                        name={input.name}
-                        onChange={input.onChange}
-                        value={input.value}
                         placeholder="Domains"
-                        color={
-                          meta.touched && (meta.error || meta.submitError)
-                            ? "error"
-                            : "regular"
-                        }
+                        color={colorFromMeta(meta)}
                         disabled={submitting}
                         fullWidth
+                        {...input}
                       />
                     </Localized>
-                    {meta.touched && (meta.error || meta.submitError) && (
-                      <ValidationMessage fullWidth>
-                        {meta.error || meta.submitError}
-                      </ValidationMessage>
-                    )}
+                    <ValidationMessage meta={meta} fullWidth />
                   </FormField>
                 )}
               </Field>

src/core/client/stream/tabs/Comments/Comment/EditCommentForm/EditCommentForm.tsx

@@ -70,6 +70,7 @@ const EditCommentForm: FunctionComponent<EditCommentFormProps> = props => {
               name="body"
               validate={getCommentBodyValidators(props.min, props.max)}
             >
+              {/* FIXME: (wyattjoh) reorganize this */}
               {({ input, meta }) => (
                 <>
                   <HorizontalGutter size="half">

src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.tsx

@@ -59,6 +59,7 @@ const ReplyCommentForm: FunctionComponent<ReplyCommentFormProps> = props => {
               name="body"
               validate={getCommentBodyValidators(props.min, props.max)}
             >
+              {/* FIXME: (wyattjoh) reorganize this */}
               {({ input, meta }) => (
                 <>
                   <HorizontalGutter size="half">

src/core/client/stream/tabs/Comments/Comment/ReportPopover/ReportCommentForm.tsx

@@ -28,13 +28,8 @@ const RadioField: FunctionComponent<
     {({ input }) => (
       <RadioButton
         id={`reportComment-popover--${input.name}-${value}`}
-        name={input.name}
-        onChange={input.onChange}
-        onFocus={input.onFocus}
-        onBlur={input.onBlur}
-        checked={input.checked}
         disabled={disabled}
-        value={input.value}
+        {...input}
       >
         {children}
       </RadioButton>
@@ -161,12 +156,10 @@ class ReportCommentForm extends React.Component<Props> {
                             <textarea
                               id={`comments-reportCommentForm-aditionalDetails--${id}`}
                               className={styles.textarea}
-                              onChange={input.onChange}
-                              onFocus={input.onFocus}
-                              onBlur={input.onBlur}
                               disabled={submitting}
-                              value={input.value}
+                              {...input}
                             />
+                            {/* TODO: (wyattjoh) check to see if this should be replaced by the framework validation message */}
                             {(meta.error && (
                               <Typography
                                 variant="detail"

src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentForm.tsx

@@ -60,6 +60,7 @@ const PostCommentForm: FunctionComponent<Props> = props => (
               name="body"
               validate={getCommentBodyValidators(props.min, props.max)}
             >
+              {/* FIXME: (wyattjoh) reorganize this */}
               {({ input, meta }) => (
                 <>
                   <HorizontalGutter size="half">

src/core/client/stream/tabs/Configure/ConfigureStream/LiveUpdatesConfig/LiveUpdatesConfig.tsx

@@ -15,12 +15,8 @@ const LiveUpdatesConfig: FunctionComponent<Props> = ({ disabled }) => (
     {({ input }) => (
       <ToggleConfig
         id={input.name}
-        name={input.name}
-        onChange={input.onChange}
-        onFocus={input.onFocus}
-        onBlur={input.onBlur}
-        checked={input.checked}
         disabled={disabled}
+        {...input}
         title={
           <Localized id="configure-liveUpdates-title">
             <span>Enable Live Updates for this Story</span>

src/core/client/stream/tabs/Configure/ConfigureStream/MessageBoxConfig/MessageBoxConfig.tsx

@@ -7,6 +7,7 @@ import {
   formatEmpty,
   parseBool,
   parseEmptyAsNull,
+  ValidationMessage,
 } from "coral-framework/lib/form";
 import {
   MessageBox,
@@ -20,7 +21,6 @@ import {
   TileOption,
   TileSelector,
   Typography,
-  ValidationMessage,
 } from "coral-ui/components";
 
 import ToggleConfig from "../ToggleConfig";
@@ -37,12 +37,8 @@ const MessageBoxConfig: FunctionComponent<Props> = ({ disabled }) => (
     {({ input }) => (
       <ToggleConfig
         id={input.name}
-        name={input.name}
-        onChange={input.onChange}
-        onFocus={input.onFocus}
-        onBlur={input.onBlur}
-        checked={input.checked}
         disabled={disabled}
+        {...input}
         title={
           <Localized id="configure-messageBox-title">
             <span>Enable Message Box for this Stream</span>
@@ -138,11 +134,7 @@ const MessageBoxConfig: FunctionComponent<Props> = ({ disabled }) => (
                             value={contentInput.value}
                           />
                         </Suspense>
-                        {meta.touched && (meta.error || meta.submitError) && (
-                          <ValidationMessage>
-                            {meta.error || meta.submitError}
-                          </ValidationMessage>
-                        )}
+                        <ValidationMessage meta={meta} />
                       </HorizontalGutter>
                     </>
                   )}

src/core/client/stream/tabs/Configure/ConfigureStream/PremodConfig/PremodConfig.tsx

@@ -22,12 +22,8 @@ const PremodConfig: FunctionComponent<Props> = ({ disabled }) => (
     {({ input }) => (
       <ToggleConfig
         id={input.name}
-        name={input.name}
-        onChange={input.onChange}
-        onFocus={input.onFocus}
-        onBlur={input.onBlur}
-        checked={input.checked}
         disabled={disabled}
+        {...input}
         title={
           <Localized id="configure-premod-title">
             <span>Pre-Moderation</span>

src/core/client/stream/tabs/Configure/ConfigureStream/PremodLinksConfig/PremodLinksConfig.tsx

@@ -15,11 +15,7 @@ const PremodLinksConfig: FunctionComponent<Props> = ({ disabled }) => (
     {({ input }) => (
       <ToggleConfig
         id={input.name}
-        name={input.name}
-        onChange={input.onChange}
-        onFocus={input.onFocus}
-        onBlur={input.onBlur}
-        checked={input.checked}
+        {...input}
         disabled={disabled}
         title={
           <Localized id="configure-premodLink-title">

src/core/client/stream/test/comments/stream/__snapshots__/reportComment.spec.tsx.snap

@@ -380,6 +380,7 @@ exports[`render popup expanded 1`] = `
                   className="ReportCommentForm-textarea"
                   disabled={false}
                   id="comments-reportCommentForm-aditionalDetails--comment-0"
+                  name="additionalDetails"
                   onBlur={[Function]}
                   onChange={[Function]}
                   onFocus={[Function]}

src/core/client/stream/test/configure/__snapshots__/renderConfigure.spec.tsx.snap

@@ -93,6 +93,7 @@ exports[`renders configure 1`] = `
                 onChange={[Function]}
                 onFocus={[Function]}
                 type="checkbox"
+                value={true}
               />
               <label
                 className="CheckBox-label"
@@ -135,6 +136,7 @@ exports[`renders configure 1`] = `
                 onChange={[Function]}
                 onFocus={[Function]}
                 type="checkbox"
+                value={false}
               />
               <label
                 className="CheckBox-label"
@@ -177,6 +179,7 @@ exports[`renders configure 1`] = `
                 onChange={[Function]}
                 onFocus={[Function]}
                 type="checkbox"
+                value={false}
               />
               <label
                 className="CheckBox-label"
@@ -219,6 +222,7 @@ exports[`renders configure 1`] = `
                 onChange={[Function]}
                 onFocus={[Function]}
                 type="checkbox"
+                value={false}
               />
               <label
                 className="CheckBox-label"

src/locales/en-US/auth.ftl

@@ -14,7 +14,6 @@ general-passwordLabel = Password
 general-passwordDescription = Must be at least {$minLength} characters
 general-passwordTextField =
   .placeholder = Password
-general-confirmPasswordLabel = Confirm Password
 general-confirmPasswordTextField =
   .placeholder = Confirm Password
 general-confirmEmailAddressLabel = Confirm Email Address