refactor(app): Add validation to network auth forms (#2559)

closes #2416
Opentrons · Oct 26, 2018 · 0dc0490 · 0dc0490
1 parent c5a2434
commit 0dc0490
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 11 deletions.
diff --git a/app/src/components/RobotSettings/SelectNetwork/ConnectForm.js b/app/src/components/RobotSettings/SelectNetwork/ConnectForm.js
@@ -4,6 +4,7 @@ import {Formik} from 'formik'
 import get from 'lodash/get'
 import find from 'lodash/find'
 import set from 'lodash/set'
+import isEmpty from 'lodash/isEmpty'
 
 import {WPA_PSK_SECURITY, WPA_EAP_SECURITY} from '../../../http-api-client'
 
@@ -62,6 +63,34 @@ export default class ConnectForm extends React.Component<Props, State> {
     })
   }
 
+  getEapFields = (eapMethod: ?WifiEapOption): Array<WifiAuthField> => {
+    return get(eapMethod, 'options', []).map(field => ({
+      ...field,
+      name: `eapConfig.${field.name}`,
+    }))
+  }
+
+  getValidationSchema = (values: any) => {
+    let fields = []
+    const errors = {}
+    if (this.props.securityType === WPA_PSK_SECURITY) {
+      fields = WIFI_PSK_FIELDS
+    } else {
+      const selectedEapMethod = find(this.props.eapOptions, {
+        name: values.eapConfig.eapType,
+      })
+      fields = this.getEapFields(selectedEapMethod)
+    }
+    fields.forEach(f => {
+      if (f.required && !get(values, f.name)) {
+        set(errors, f.name, `${f.displayName} is required`)
+      } else if (f.name === 'psk' && get(values, f.name).length < 8) {
+        set(errors, f.name, 'Password must be at least 8 characters')
+      }
+    })
+    return errors
+  }
+
   render () {
     const {showPassword} = this.state
     const {securityType, eapOptions, close} = this.props
@@ -70,25 +99,33 @@ export default class ConnectForm extends React.Component<Props, State> {
       ? `${CONNECT_FIELD_ID_PREFIX}${eapMethodField}`
       : ''
 
-    // TODO(mc, 2018-10-18): form validation
     return (
       <Formik
         onSubmit={this.onSubmit}
+        validate={this.getValidationSchema}
         render={formProps => {
-          const {handleChange, handleSubmit, values, setValues} = formProps
+          const {
+            handleChange,
+            handleSubmit,
+            values,
+            setValues,
+            handleBlur,
+            errors,
+            touched,
+          } = formProps
+
+          // disable submit if form is pristine or errors present
+          const disabled = isEmpty(touched) || !isEmpty(errors)
+
           const eapMethod = get(values, eapMethodField)
           let fields: Array<WifiAuthField> = []
 
           if (securityType === WPA_PSK_SECURITY) {
             fields = WIFI_PSK_FIELDS
           } else if (securityType === WPA_EAP_SECURITY) {
             const selectedEapMethod = find(eapOptions, {name: eapMethod})
-            fields = get(selectedEapMethod, 'options', []).map(field => ({
-              ...field,
-              name: `eapConfig.${field.name}`,
-            }))
+            fields = this.getEapFields(selectedEapMethod)
           }
-
           return (
             <form onSubmit={handleSubmit}>
               <FormTable>
@@ -121,13 +158,16 @@ export default class ConnectForm extends React.Component<Props, State> {
                     showPassword={!!showPassword[field.name]}
                     onChange={handleChange}
                     toggleShowPassword={this.toggleShowPassword}
+                    onBlur={handleBlur}
+                    errors={errors}
+                    touched={touched}
                   />
                 ))}
               </FormTable>
               <BottomButtonBar
                 buttons={[
                   {children: 'Cancel', onClick: close},
-                  {children: 'Join', type: 'submit'},
+                  {children: 'Join', type: 'submit', disabled},
                 ]}
               />
             </form>

diff --git a/app/src/components/RobotSettings/SelectNetwork/ConnectFormField.js b/app/src/components/RobotSettings/SelectNetwork/ConnectFormField.js
@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react'
-
+import get from 'lodash/get'
 import {InputField, CheckboxField, DropdownField} from '@opentrons/components'
 import {FormTableRow} from './FormTable'
 
@@ -12,27 +12,43 @@ type Props = {
   showPassword: boolean,
   onChange: (*) => mixed,
   toggleShowPassword: (name: string) => mixed,
+  errors: {
+    [string]: string,
+  },
+  touched: {
+    [string]: boolean,
+  },
+  onBlur: (SyntheticFocusEvent<*>) => mixed,
 }
 
 export const CONNECT_FIELD_ID_PREFIX = '__ConnectForm__'
 
 export default function ConnectFormField (props: Props) {
-  const {value, showPassword, onChange, toggleShowPassword} = props
+  const {
+    value,
+    showPassword,
+    onChange,
+    toggleShowPassword,
+    onBlur,
+    touched,
+    errors,
+  } = props
   const {name, displayName, type, required} = props.field
   const id = `${CONNECT_FIELD_ID_PREFIX}${name}`
   const label = required ? `* ${displayName}:` : `${displayName}:`
   let input = null
 
   if (type === 'string' || type === 'password') {
     const inputType = type === 'string' || showPassword ? 'text' : 'password'
-
     input = (
       <InputField
         id={id}
         name={name}
         type={inputType}
         value={value}
         onChange={onChange}
+        error={get(touched, name) && get(errors, name)}
+        onBlur={onBlur}
       />
     )
   } else if (type === 'file') {