Get formik used on login form

resources/scripts/components/auth/LoginContainer.tsx

@@ -1,26 +1,88 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Link, RouteComponentProps } from 'react-router-dom';
 import login from '@/api/auth/login';
-import { httpErrorToHuman } from '@/api/http';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
+import { FormikProps, withFormik } from 'formik';
+import { object, string } from 'yup';
+import Field from '@/components/elements/Field';
+import { httpErrorToHuman } from '@/api/http';
 
-export default ({ history }: RouteComponentProps) => {
-    const [ username, setUsername ] = useState('');
-    const [ password, setPassword ] = useState('');
-    const [ isLoading, setLoading ] = useState(false);
+interface Values {
+    username: string;
+    password: string;
+}
 
-    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+type OwnProps = RouteComponentProps & {
+    clearFlashes: any;
+    addFlash: any;
+}
 
-    const submit = (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
+const LoginContainer = ({ isSubmitting }: OwnProps & FormikProps<Values>) => (
+    <React.Fragment>
+        <h2 className={'text-center text-neutral-100 font-medium py-4'}>
+            Login to Continue
+        </h2>
+        <FlashMessageRender className={'mb-2'}/>
+        <LoginFormContainer>
+            <label htmlFor={'username'}>Username or Email</label>
+            <Field
+                type={'text'}
+                id={'username'}
+                name={'username'}
+                className={'input'}
+            />
+            <div className={'mt-6'}>
+                <label htmlFor={'password'}>Password</label>
+                <Field
+                    type={'password'}
+                    id={'password'}
+                    name={'password'}
+                    className={'input'}
+                />
+            </div>
+            <div className={'mt-6'}>
+                <button
+                    type={'submit'}
+                    className={'btn btn-primary btn-jumbo'}
+                >
+                    {isSubmitting ?
+                        <span className={'spinner white'}>&nbsp;</span>
+                        :
+                        'Login'
+                    }
+                </button>
+            </div>
+            <div className={'mt-6 text-center'}>
+                <Link
+                    to={'/auth/password'}
+                    className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
+                >
+                    Forgot password?
+                </Link>
+            </div>
+        </LoginFormContainer>
+    </React.Fragment>
+);
 
-        setLoading(true);
-        clearFlashes();
+const EnhancedForm = withFormik<OwnProps, Values>({
+    displayName: 'LoginContainerForm',
 
-        login(username!, password!)
+    mapPropsToValues: (props) => ({
+        username: '',
+        password: '',
+    }),
+
+    validationSchema: () => object().shape({
+        username: string().required('A username or email must be provided.'),
+        password: string().required('Please enter your account password.'),
+    }),
+
+    handleSubmit: ({ username, password }, { props, setSubmitting }) => {
+        props.clearFlashes();
+        login(username, password)
             .then(response => {
                 if (response.complete) {
                     // @ts-ignore
@@ -28,67 +90,25 @@ export default ({ history }: RouteComponentProps) => {
                     return;
                 }
 
-                history.replace('/auth/login/checkpoint', { token: response.confirmationToken });
+                props.history.replace('/auth/login/checkpoint', { token: response.confirmationToken });
             })
             .catch(error => {
                 console.error(error);
 
-                setLoading(false);
-                addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) });
+                setSubmitting(false);
+                props.addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) });
             });
-    };
+    },
+})(LoginContainer);
 
-    const canSubmit = () => username && password && username.length > 0 && password.length > 0;
+export default (props: RouteComponentProps) => {
+    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
     return (
-        <React.Fragment>
-            <h2 className={'text-center text-neutral-100 font-medium py-4'}>
-                Login to Continue
-            </h2>
-            <FlashMessageRender/>
-            <LoginFormContainer onSubmit={submit}>
-                <label htmlFor={'username'}>Username or Email</label>
-                <input
-                    id={'username'}
-                    autoFocus={true}
-                    required={true}
-                    className={'input'}
-                    onChange={e => setUsername(e.target.value)}
-                    disabled={isLoading}
-                />
-                <div className={'mt-6'}>
-                    <label htmlFor={'password'}>Password</label>
-                    <input
-                        id={'password'}
-                        required={true}
-                        type={'password'}
-                        className={'input'}
-                        onChange={e => setPassword(e.target.value)}
-                        disabled={isLoading}
-                    />
-                </div>
-                <div className={'mt-6'}>
-                    <button
-                        type={'submit'}
-                        className={'btn btn-primary btn-jumbo'}
-                        disabled={isLoading || !canSubmit()}
-                    >
-                        {isLoading ?
-                            <span className={'spinner white'}>&nbsp;</span>
-                            :
-                            'Login'
-                        }
-                    </button>
-                </div>
-                <div className={'mt-6 text-center'}>
-                    <Link
-                        to={'/auth/password'}
-                        className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
-                    >
-                        Forgot password?
-                    </Link>
-                </div>
-            </LoginFormContainer>
-        </React.Fragment>
+        <EnhancedForm
+            {...props}
+            addFlash={addFlash}
+            clearFlashes={clearFlashes}
+        />
     );
 };

resources/scripts/components/auth/LoginFormContainer.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { Form } from 'formik';
 
 export default ({ className, ...props }: React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>) => (
-    <form
+    <Form
         className={'flex items-center justify-center login-box'}
         {...props}
         style={{
@@ -14,5 +15,5 @@ export default ({ className, ...props }: React.DetailedHTMLProps<React.FormHTMLA
         <div className={'flex-1'}>
             {props.children}
         </div>
-    </form>
+    </Form>
 );

resources/scripts/components/elements/Field.tsx

@@ -2,17 +2,16 @@ import React from 'react';
 import { Field, FieldProps } from 'formik';
 import classNames from 'classnames';
 
-interface Props {
-    id?: string;
-    type: string;
+interface OwnProps {
     name: string;
     label?: string;
     description?: string;
-    autoFocus?: boolean;
     validate?: (value: any) => undefined | string | Promise<any>;
 }
 
-export default ({ id, type, name, label, description, autoFocus, validate }: Props) => (
+type Props = OwnProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name'>;
+
+export default ({ id, name, label, description, validate, className, ...props }: Props) => (
     <Field name={name} validate={validate}>
         {
             ({ field, form: { errors, touched } }: FieldProps) => (
@@ -22,15 +21,14 @@ export default ({ id, type, name, label, description, autoFocus, validate }: Pro
                     }
                     <input
                         id={id}
-                        type={type}
                         {...field}
-                        autoFocus={autoFocus}
-                        className={classNames('input-dark', {
+                        {...props}
+                        className={classNames((className || 'input-dark'), {
                             error: touched[field.name] && errors[field.name],
                         })}
                     />
                     {touched[field.name] && errors[field.name] ?
-                        <p className={'input-help'}>
+                        <p className={'input-help error'}>
                             {(errors[field.name] as string).charAt(0).toUpperCase() + (errors[field.name] as string).slice(1)}
                         </p>
                         :