show single error on validation; remove expiration from email page

Author: Soxasora

components/form.js

@@ -486,7 +486,7 @@ function FormGroup ({ className, label, children }) {
 
 function InputInner ({
   prepend, append, hint, warn, showValid, onChange, onBlur, overrideValue, appendValue,
-  innerRef, noForm, clear, onKeyDown, inputGroupClassName, debounce: debounceTime, maxLength,
+  innerRef, noForm, clear, onKeyDown, inputGroupClassName, debounce: debounceTime, maxLength, hideError,
   ...props
 }) {
   const [field, meta, helpers] = noForm ? [{}, {}, {}] : useField(props)
@@ -574,7 +574,7 @@ function InputInner ({
           onKeyDown={onKeyDownInner}
           onChange={onChangeInner}
           onBlur={onBlurInner}
-          isInvalid={invalid}
+          isInvalid={!hideError && invalid}
           isValid={showValid && meta.initialValue !== meta.value && meta.touched && !meta.error}
         />
         {(isClient && clear && field.value && !props.readOnly) &&
@@ -1248,7 +1248,7 @@ export function MultiInput ({
 }) {
   const [inputs, setInputs] = useState(new Array(length).fill(''))
   const inputRefs = useRef(new Array(length).fill(null))
-  const [, , helpers] = useField({ name })
+  const [, meta, helpers] = useField({ name })
 
   useEffect(() => {
     autoFocus && inputRefs.current[0].focus()
@@ -1307,21 +1307,29 @@ export function MultiInput ({
   }, [inputs, length, updateInputs])
 
   return (
-    <FormGroup label={label} className={groupClassName}>
-      {inputs.map((value, index) => (
-        <InputInner
-          name={name} // todo: use this for single input validation
-          key={index}
-          type={inputType}
-          value={value}
-          innerRef={(el) => { inputRefs.current[index] = el }}
-          onChange={(formik, e) => handleChange(formik, e, index)}
-          onKeyDown={e => handleKeyDown(e, index)}
-          style={{ textAlign: 'center' }}
-          prepend={showSequence && <InputGroup.Text>{index}</InputGroup.Text>}
-          {...props}
-        />
-      ))}
+    <FormGroup label={label}>
+      <div className={groupClassName}>
+        {inputs.map((value, index) => (
+          <InputInner
+            name={name}
+            key={index}
+            type={inputType}
+            value={value}
+            innerRef={(el) => { inputRefs.current[index] = el }}
+            onChange={(formik, e) => handleChange(formik, e, index)}
+            onKeyDown={e => handleKeyDown(e, index)}
+            style={{ textAlign: 'center' }}
+            prepend={showSequence && <InputGroup.Text>{index}</InputGroup.Text>}
+            hideError
+            {...props}
+          />
+        ))}
+      </div>
+      {meta.touched && meta.error && (
+        <BootstrapForm.Control.Feedback type='invalid' className='d-block'>
+          {meta.error}
+        </BootstrapForm.Control.Feedback>
+      )}
     </FormGroup>
   )
 }

pages/email.js

@@ -31,7 +31,7 @@ export default function Email () {
           <Image className='rounded-1 shadow-sm' width='640' height='302' src={`${process.env.NEXT_PUBLIC_ASSET_PREFIX}/cowboy-saloon.gif`} fluid />
         </video>
         <h2 className='pt-4'>Check your email</h2>
-        <h4 className='text-muted pt-2 pb-4'>a 5-minutes magic code has been sent to {callback ? callback.email : 'your email address'}</h4>
+        <h4 className='text-muted pt-2 pb-4'>a magic code has been sent to {callback ? callback.email : 'your email address'}</h4>
         <MagicCodeForm onSubmit={(token) => pushCallback(token)} />
       </div>
     </StaticLayout>