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}
+        />
     );
 };