fix(auth): disable continue button in registration form

jwplayer · Aug 4, 2021 · c8ccfc7 · c8ccfc7
1 parent ed31555
commit c8ccfc7
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 2 deletions.
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -33,7 +33,7 @@ const Checkbox: React.FC<Props> = ({ label, name, onChange, header, checked, val
       ) : null}
       <div className={styles.row}>
         <input name={name} type="checkbox" id={id} value={value} onChange={onChange} checked={checked} aria-required={required} disabled={disabled} />
-        <label htmlFor={id}>{label}</label>
+        <label htmlFor={id}>{required ? '* ' : ''}{label}</label>
       </div>
       {helperText ? <div className={styles.helperText}>{helperText}</div> : null}
     </div>

diff --git a/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`<Checkbox> renders and matches snapshot 1`] = `
       <label
         for="check-box_1235_name"
       >
+        
         label
       </label>
     </div>

diff --git a/src/components/RegistrationForm/RegistrationForm.test.tsx b/src/components/RegistrationForm/RegistrationForm.test.tsx
@@ -15,6 +15,7 @@ describe('<RegistrationForm>', () => {
         consentErrors={[]}
         consentValues={{}}
         loading={false}
+        canSubmit={true}
         onConsentChange={jest.fn()}
       />,
     );

diff --git a/src/components/RegistrationForm/RegistrationForm.tsx b/src/components/RegistrationForm/RegistrationForm.tsx
@@ -28,6 +28,7 @@ type Props = {
   consentValues: Record<string, boolean>;
   consentErrors: string[];
   submitting: boolean;
+  canSubmit: boolean;
   publisherConsents?: Consent[];
 };
 
@@ -38,6 +39,7 @@ const RegistrationForm: React.FC<Props> = ({
   errors,
   submitting,
   loading,
+  canSubmit,
   publisherConsents,
   consentValues,
   onConsentChange,
@@ -113,6 +115,7 @@ const RegistrationForm: React.FC<Props> = ({
           name={consent.name}
           value={consent.name}
           error={consentErrors?.includes(consent.name)}
+          required={consent.required}
           checked={consentValues[consent.name]}
           onChange={onConsentChange}
           label={formatConsentLabel(consent.label)}
@@ -125,7 +128,7 @@ const RegistrationForm: React.FC<Props> = ({
         variant="contained"
         color="primary"
         size="large"
-        disabled={submitting}
+        disabled={submitting || !canSubmit}
         fullWidth
       />
       <div className={styles.bottom}>

diff --git a/src/containers/AccountModal/forms/Registration.tsx b/src/containers/AccountModal/forms/Registration.tsx
@@ -91,6 +91,7 @@ const Registration = () => {
       publisherConsents={publisherConsents}
       loading={publisherConsentsLoading}
       onConsentChange={handleChangeConsent}
+      canSubmit={!!values.email && !!values.password}
     />
   );
 };