Get formik used on login form

resources/scripts/components/auth/LoginContainer.tsx

@@ -1,79 +1,54 @@
-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) => {
+interface Values {
-    const [ username, setUsername ] = useState('');
+    username: string;
-    const [ password, setPassword ] = useState('');
+    password: string;
-    const [ isLoading, setLoading ] = useState(false);
+}
 
-    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+type OwnProps = RouteComponentProps & {
+    clearFlashes: any;
+    addFlash: any;
+}
 
-    const submit = (e: React.FormEvent<HTMLFormElement>) => {
+const LoginContainer = ({ isSubmitting }: OwnProps & FormikProps<Values>) => (
-        e.preventDefault();
-
-        setLoading(true);
-        clearFlashes();
-
-        login(username!, password!)
-            .then(response => {
-                if (response.complete) {
-                    // @ts-ignore
-                    window.location = response.intended || '/';
-                    return;
-                }
-
-                history.replace('/auth/login/checkpoint', { token: response.confirmationToken });
-            })
-            .catch(error => {
-                console.error(error);
-
-                setLoading(false);
-                addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) });
-            });
-    };
-
-    const canSubmit = () => username && password && username.length > 0 && password.length > 0;
-
-    return (
     <React.Fragment>
         <h2 className={'text-center text-neutral-100 font-medium py-4'}>
             Login to Continue
         </h2>
-            <FlashMessageRender/>
+        <FlashMessageRender className={'mb-2'}/>
-            <LoginFormContainer onSubmit={submit}>
+        <LoginFormContainer>
             <label htmlFor={'username'}>Username or Email</label>
-                <input
+            <Field
+                type={'text'}
                 id={'username'}
-                    autoFocus={true}
+                name={'username'}
-                    required={true}
                 className={'input'}
-                    onChange={e => setUsername(e.target.value)}
-                    disabled={isLoading}
             />
             <div className={'mt-6'}>
                 <label htmlFor={'password'}>Password</label>
-                    <input
+                <Field
-                        id={'password'}
-                        required={true}
                     type={'password'}
+                    id={'password'}
+                    name={'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 ?
+                    {isSubmitting ?
                         <span className={'spinner white'}>&nbsp;</span>
                         :
                         'Login'
@@ -90,5 +65,50 @@ export default ({ history }: RouteComponentProps) => {
             </div>
         </LoginFormContainer>
     </React.Fragment>
+);
+
+const EnhancedForm = withFormik<OwnProps, Values>({
+    displayName: 'LoginContainerForm',
+
+    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
+                    window.location = response.intended || '/';
+                    return;
+                }
+
+                props.history.replace('/auth/login/checkpoint', { token: response.confirmationToken });
+            })
+            .catch(error => {
+                console.error(error);
+
+                setSubmitting(false);
+                props.addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) });
+            });
+    },
+})(LoginContainer);
+
+export default (props: RouteComponentProps) => {
+    const { clearFlashes, addFlash } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+
+    return (
+        <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 {
+interface OwnProps {
-    id?: string;
-    type: string;
     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}
+                        {...props}
-                        className={classNames('input-dark', {
+                        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>
                         :