Add basic Formik setup and example for update password

resources/scripts/components/account/forms/UpdatePasswordForm.tsx

@@ -1,47 +1,81 @@
 import React, { useState } from 'react';
 import { State, useStoreState } from 'easy-peasy';
 import { ApplicationState } from '@/state/types';
+import { Form, Formik, FormikActions } from 'formik';
+import Field from '@/components/elements/Field';
+import * as Yup from 'yup';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+
+interface Values {
+    current: string;
+    password: string;
+    confirmPassword: string;
+}
+
+const schema = Yup.object().shape({
+    current: Yup.string().min(1).required('You must provide your current password.'),
+    password: Yup.string().min(8).required(),
+    confirmPassword: Yup.string().test('password', 'Password confirmation does not match the password you entered.', function (value) {
+        return value === this.parent.password;
+    }),
+});
 
 export default () => {
-    const [ isLoading, setIsLoading ] = useState(false);
     const user = useStoreState((state: State<ApplicationState>) => state.user.data);
 
     if (!user) {
         return null;
     }
 
+    const submit = (values: Values, { setSubmitting }: FormikActions<Values>) => {
+        setTimeout(() => setSubmitting(false), 1500);
+    };
+
     return (
-        <form className={'m-0'}>
-            <label htmlFor={'current_password'} className={'input-dark-label'}>Current Password</label>
-            <input
-                id={'current_password'}
-                type={'password'}
-                className={'input-dark'}
-            />
-            <div className={'mt-6'}>
-                <label htmlFor={'new_password'} className={'input-dark-label'}>New Password</label>
-                <input
-                    id={'new_password'}
-                    type={'password'}
-                    className={'input-dark'}
-                />
-                <p className={'input-help'}>
-                    Your new password must be at least 8 characters in length.
-                </p>
-            </div>
-            <div className={'mt-6'}>
-                <label htmlFor={'new_password_confirm'} className={'input-dark-label'}>Confirm New Password</label>
-                <input
-                    id={'new_password_confirm'}
-                    type={'password'}
-                    className={'input-dark'}
-                />
-            </div>
-            <div className={'mt-6'}>
-                <button className={'btn btn-primary btn-sm'} disabled={true}>
-                    Update Password
-                </button>
-            </div>
-        </form>
+        <React.Fragment>
+            <Formik
+                onSubmit={submit}
+                validationSchema={schema}
+                initialValues={{ current: '', password: '', confirmPassword: '' }}
+            >
+                {
+                    ({ isSubmitting, isValid }) => (
+                        <React.Fragment>
+                            <SpinnerOverlay large={true} visible={isSubmitting}/>
+                            <Form className={'m-0'}>
+                                <Field
+                                    id={'current_password'}
+                                    type={'password'}
+                                    name={'current'}
+                                    label={'Current Password'}
+                                />
+                                <div className={'mt-6'}>
+                                    <Field
+                                        id={'new_password'}
+                                        type={'password'}
+                                        name={'password'}
+                                        label={'New Password'}
+                                        description={'Your new password should be at least 8 characters in length and unique to this website.'}
+                                    />
+                                </div>
+                                <div className={'mt-6'}>
+                                    <Field
+                                        id={'confirm_password'}
+                                        type={'password'}
+                                        name={'confirmPassword'}
+                                        label={'Confirm New Password'}
+                                    />
+                                </div>
+                                <div className={'mt-6'}>
+                                    <button className={'btn btn-primary btn-sm'} disabled={isSubmitting || !isValid}>
+                                        Update Password
+                                    </button>
+                                </div>
+                            </Form>
+                        </React.Fragment>
+                    )
+                }
+            </Formik>
+        </React.Fragment>
     );
 };