Wrap CheckBoxInput in InputWrapper to provide visual feedback (#2423)

### Changes

Wrap the `CheckBoxInput` in `InputWrapper` to allow for providing
feedback as to what is wrong when a user clicks submit without the
checkbox being selected. Below is an example of what this looks like,
rather than highlight using a border like other fields we change the
text to red.

**This image is outdated see below**
<img width="301" alt="Screenshot 2023-08-04 at 12 03 18"
src="https://github.com/auth0/lock/assets/8705251/cb346e0a-5d3e-4d24-87e8-b037b99dd34b">

I did also see what it looked like without the red text, which is a
little less obvious.

<img width="300" alt="Screenshot 2023-08-04 at 11 59 11"
src="https://github.com/auth0/lock/assets/8705251/688ee97f-cd17-4375-80bb-b00d252529cb">

This is if we add a border around the entire element like the other
components
![Screenshot 2023-08-04 at 11 05
07](https://github.com/auth0/lock/assets/8705251/a3eea2dc-c8ee-4e90-b5b9-f7fa68e3d143)

I did also try a border/outline around the checkbox element but it
looked bad due to inability to set the border radiu


Happy to change this up if there's a general preference that looks
better.


Current status:

Invalid hint text provided
![Invalid hint text is red and aligned with checkbox
text](https://github.com/auth0/lock/assets/8705251/9ec1f0d1-9d60-46fd-b38b-9165dbc9ae71)

No invalid hint text provided
![Checkbox text is
red](https://github.com/auth0/lock/assets/8705251/c9452810-11f3-43e3-85e6-bc4298f5d904)


### References

#2400

### Testing

<!--
Please describe how this can be tested by reviewers. Be specific about
anything not tested and reasons why. If this library has unit and/or
integration testing, tests should be added for new functionality and
existing tests should complete without errors.
-->

* [x] This change adds unit test coverage
* [ ] This change adds integration test coverage
* [ ] This change has been tested on the latest version of the
platform/language

### Checklist

* [x] I have read the [Auth0 general contribution
guidelines](https://github.com/auth0/open-source-template/blob/master/GENERAL-CONTRIBUTING.md)
* [x] I have read the [Auth0 Code of
Conduct](https://github.com/auth0/open-source-template/blob/master/CODE-OF-CONDUCT.md)
* [x] All code quality tools/guidelines have been run/followed
* [x] All relevant assets have been compiled

css/index.styl

@@ -491,6 +491,14 @@ loadingSize = 30px
     span
       display block
       margin-left 20px
+    .auth0-lock-input-wrap
+      background #ffffff
+      border 1px solid #ffffff
+  .auth0-lock-input-checkbox.auth0-lock-error
+    .auth0-lock-input-wrap span.no-hint
+        color red
+    .auth0-lock-error-invalid-hint
+      margin-left 20px
 
   // Social
 

src/__tests__/field/__snapshots__/custom_input.test.jsx.snap

@@ -2,45 +2,129 @@
 
 exports[`CustomInput when type == checkbox and when placeholderHTML is set renders correctly as a CheckBoxInput 1`] = `
 <div
-  className="auth0-lock-input-checkbox"
+  className="auth0-lock-input-block auth0-lock-input-custom_input auth0-lock-input-checkbox"
 >
-  <label>
-    <input
-      aria-label="Custom Input"
-      checked={false}
-      id="1-custom_input"
-      name="custom_input"
-      onChange={[Function]}
-      type="checkbox"
-    />
-    <span
-      dangerouslySetInnerHTML={
-        {
-          "__html": "<b>Placeholder</b>",
+  <div
+    className="auth0-lock-input-wrap"
+  >
+    <label>
+      <input
+        aria-invalid={false}
+        aria-label="Custom Input"
+        checked={false}
+        id="1-custom_input"
+        name="custom_input"
+        onChange={[Function]}
+        type="checkbox"
+      />
+      <span
+        className=""
+        dangerouslySetInnerHTML={
+          {
+            "__html": "<b>Placeholder</b>",
+          }
         }
-      }
-    />
-  </label>
+      />
+    </label>
+  </div>
+</div>
+`;
+
+exports[`CustomInput when type == checkbox highlights placeholder text when no invalid hint is provided 1`] = `
+<div
+  className="auth0-lock-input-block auth0-lock-input-custom_input auth0-lock-error auth0-lock-input-checkbox"
+>
+  <div
+    className="auth0-lock-input-wrap"
+  >
+    <label>
+      <input
+        aria-invalid={true}
+        aria-label="Custom Input"
+        checked={false}
+        id="1-custom_input"
+        name="custom_input"
+        onChange={[Function]}
+        type="checkbox"
+      />
+      <span
+        className="no-hint"
+        dangerouslySetInnerHTML={
+          {
+            "__html": "<b>Placeholder</b>",
+          }
+        }
+      />
+    </label>
+  </div>
 </div>
 `;
 
 exports[`CustomInput when type == checkbox renders correctly as a CheckBoxInput 1`] = `
 <div
-  className="auth0-lock-input-checkbox"
+  className="auth0-lock-input-block auth0-lock-input-custom_input auth0-lock-input-checkbox"
 >
-  <label>
-    <input
-      aria-label="Custom Input"
-      checked={false}
-      id="1-custom_input"
-      name="custom_input"
-      onChange={[Function]}
-      type="checkbox"
-    />
-    <span>
-      placeholder
-    </span>
-  </label>
+  <div
+    className="auth0-lock-input-wrap"
+  >
+    <label>
+      <input
+        aria-invalid={false}
+        aria-label="Custom Input"
+        checked={false}
+        id="1-custom_input"
+        name="custom_input"
+        onChange={[Function]}
+        type="checkbox"
+      />
+      <span
+        className=""
+      >
+        placeholder
+      </span>
+    </label>
+  </div>
+</div>
+`;
+
+exports[`CustomInput when type == checkbox shows an error when value is incorrect 1`] = `
+<div
+  className="auth0-lock-input-block auth0-lock-input-custom_input auth0-lock-error auth0-lock-input-checkbox"
+>
+  <div
+    className="auth0-lock-input-wrap"
+  >
+    <label>
+      <input
+        aria-invalid={true}
+        aria-label="Custom Input"
+        checked={false}
+        id="1-custom_input"
+        name="custom_input"
+        onChange={[Function]}
+        type="checkbox"
+      />
+      <span
+        className=""
+        dangerouslySetInnerHTML={
+          {
+            "__html": "<b>Placeholder</b>",
+          }
+        }
+      />
+    </label>
+  </div>
+  <div
+    className="auth0-lock-error-msg"
+    id="auth0-lock-error-msg-custom_input"
+    role="alert"
+  >
+    <div
+      className="auth0-lock-error-invalid-hint"
+    >
+      invalid-hint-custom_input
+    </div>
+  </div>
 </div>
 `;
 

src/__tests__/field/custom_input.test.jsx

@@ -97,20 +97,41 @@ describe('CustomInput', () => {
   describe('when type == checkbox', () => {
     beforeEach(() => (defaultProps.type = 'checkbox'));
     it('renders correctly as a CheckBoxInput', () => {
+      require('field/index').isFieldVisiblyInvalid = () => false;
       const CustomInput = getComponent();
 
       expectComponent(<CustomInput {...defaultProps} />).toMatchSnapshot();
     });
 
     describe('and when placeholderHTML is set', () => {
       it('renders correctly as a CheckBoxInput', () => {
+        require('field/index').isFieldVisiblyInvalid = () => false;
+
         const CustomInput = getComponent();
 
         expectComponent(
           <CustomInput {...defaultProps} placeholderHTML={'<b>Placeholder</b>'} />
         ).toMatchSnapshot();
       });
     });
+
+    it('shows an error when value is incorrect', () => {
+      const CustomInput = getComponent();
+
+      expectComponent(
+        <CustomInput {...defaultProps} placeholderHTML={'<b>Placeholder</b>'} />
+      ).toMatchSnapshot();
+    });
+
+    it('highlights placeholder text when no invalid hint is provided', () => {
+      require('field/index').getFieldInvalidHint = () => undefined;
+
+      const CustomInput = getComponent();
+
+      expectComponent(
+        <CustomInput {...defaultProps} placeholderHTML={'<b>Placeholder</b>'} />
+      ).toMatchSnapshot();
+    });
   });
   describe('when type == hidden', () => {
     beforeEach(() => {

src/field/custom_input.jsx

@@ -39,6 +39,7 @@ const CustomInput = ({
       return (
         <CheckboxInput
           lockId={l.id(model)}
+          invalidHint={getFieldInvalidHint(model, name)}
           onChange={e => changeField(l.id(model), name, `${e.target.checked}`, validator)}
           checked={getFieldValue(model, name)}
           placeholderHTML={placeholderHTML}

src/ui/input/checkbox_input.jsx

@@ -1,10 +1,28 @@
 import React from 'react';
+import InputWrap from './input_wrap';
 
 export default class CheckboxInput extends React.Component {
   render() {
-    const { lockId, name, ariaLabel, placeholder, checked, placeholderHTML } = this.props;
+    const {
+      lockId,
+      name,
+      ariaLabel,
+      placeholder,
+      checked,
+      placeholderHTML,
+      isValid,
+      invalidHint
+    } = this.props;
+
+    const spanClass = invalidHint ? '' : 'no-hint'
+
     return (
-      <div className="auth0-lock-input-checkbox">
+      <InputWrap
+        invalidHint={invalidHint}
+        isValid={isValid}
+        name={name}
+        className="auth0-lock-input-checkbox"
+      >
         <label>
           <input
             id={`${lockId}-${name}`}
@@ -13,16 +31,17 @@ export default class CheckboxInput extends React.Component {
             onChange={::this.handleOnChange}
             name={name}
             aria-label={ariaLabel || name}
+            aria-invalid={!isValid}
           />
           {placeholderHTML ? (
             // placeholderHTML allows raw HTML
             // eslint-disable-next-line react/no-danger
-            <span dangerouslySetInnerHTML={{ __html: placeholderHTML }} />
+            <span className={spanClass} dangerouslySetInnerHTML={{ __html: placeholderHTML }} />
           ) : (
-            <span>{placeholder}</span>
+            <span className={spanClass}>{placeholder}</span>
           )}
         </label>
-      </div>
+      </InputWrap>
     );
   }
 

src/ui/input/input_wrap.jsx

@@ -3,12 +3,16 @@ import React from 'react';
 
 export default class InputWrap extends React.Component {
   render() {
-    const { after, focused, invalidHint, isValid, name, icon } = this.props;
+    const { after, focused, invalidHint, isValid, name, icon, className } = this.props;
     let blockClassName = `auth0-lock-input-block auth0-lock-input-${name}`;
     if (!isValid) {
       blockClassName += ' auth0-lock-error';
     }
 
+    if (className) {
+      blockClassName += ` ${className}`;
+    }
+
     let wrapClassName = 'auth0-lock-input-wrap';
     if (focused && isValid) {
       wrapClassName += ' auth0-lock-focused';

support/index.html

@@ -155,7 +155,17 @@ <h1 class="navbar-brand">
             validator: function () {
               return true;
             }
-          }
+          },
+          {
+            type: 'checkbox',
+            name: 'newsletter',
+            prefill: 'false',
+            placeholder: 'I hereby agree that I want to receive marketing emails from your company',
+            validator: (value) => ({
+                valid: value === 'true',
+                hint: 'This is a mandatory field',
+            }),
+        },
         ],
         hooks: {
           loggingIn: function (context, done) {