Add basic Formik setup and example for update password

resources/scripts/components/elements/ContentBox.tsx

@@ -8,8 +8,8 @@ type Props = Readonly<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElemen
 
 export default ({ title, borderColor, children, ...props }: Props) => (
     <div {...props}>
-        {title && <h2 className={'text-neutral-300 mb-2 px-4'}>{title}</h2>}
-        <div className={classNames('bg-neutral-700 p-4 rounded shadow-lg', borderColor, {
+        {title && <h2 className={'text-neutral-300 mb-4 px-4'}>{title}</h2>}
+        <div className={classNames('bg-neutral-700 p-4 rounded shadow-lg relative', borderColor, {
             'border-t-4': !!borderColor,
         })}>
             {children}

resources/scripts/components/elements/Field.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Field, FieldProps } from 'formik';
+import classNames from 'classnames';
+
+interface Props {
+    id?: string;
+    type: string;
+    name: string;
+    label?: string;
+    description?: string;
+    validate?: (value: any) => undefined | string | Promise<any>;
+}
+
+export default ({ id, type, name, label, description, validate }: Props) => (
+    <Field name={name} validate={validate}>
+        {
+            ({ field, form: { errors, touched } }: FieldProps) => (
+                <React.Fragment>
+                    {label &&
+                    <label htmlFor={id} className={'input-dark-label'}>{label}</label>
+                    }
+                    <input
+                        id={id}
+                        type={type}
+                        {...field}
+                        className={classNames('input-dark', {
+                            error: touched[field.name] && errors[field.name],
+                        })}
+                    />
+                    {touched[field.name] && errors[field.name] ?
+                        <p className={'input-help'}>
+                            {(errors[field.name] as string).charAt(0).toUpperCase() + (errors[field.name] as string).slice(1)}
+                        </p>
+                        :
+                        description ? <p className={'input-help'}>{description}</p> : null
+                    }
+                </React.Fragment>
+            )
+        }
+    </Field>
+);

resources/scripts/components/elements/SpinnerOverlay.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CSSTransition } from 'react-transition-group';
+
+export default ({ large, visible }: { visible: boolean; large?: boolean }) => (
+    <CSSTransition timeout={150} classNames={'fade'} in={visible} unmountOnExit={true}>
+        <div
+            className={classNames('absolute pin-t pin-l flex items-center justify-center w-full h-full rounded')}
+            style={{ background: 'rgba(0, 0, 0, 0.45)' }}
+        >
+            <div className={classNames('spinner-circle spinner-white', { 'spinner-lg': large })}></div>
+        </div>
+    </CSSTransition>
+);