Migrate the existing login form to use React

resources/scripts/components/App.tsx

@@ -1,10 +1,17 @@
 import * as React from 'react';
 import { hot } from 'react-hot-loader/root';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
+import AuthenticationRouter from '@/routers/AuthenticationRouter';
 
 class App extends React.PureComponent {
     render () {
         return (
-            <h1>Hello</h1>
+            <Router>
+                <div>
+                    <Route exact path="/"/>
+                    <Route path="/auth" component={AuthenticationRouter}/>
+                </div>
+            </Router>
         );
     }
 }

resources/scripts/components/MessageBox.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface Props {
+    title?: string;
+    message: string;
+    type?: 'success' | 'info' | 'warning' | 'error';
+}
+
+export default ({ title, message, type }: Props) => (
+    <div className={`lg:inline-flex alert ${type}`} role={'alert'}>
+        {title && <span className={'title'}>{title}</span>}
+        <span className={'message'}>{message}</span>
+    </div>
+);

resources/scripts/components/auth/LoginContainer.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import OpenInputField from '@/components/forms/OpenInputField';
+import { Link } from 'react-router-dom';
+import login from '@/api/auth/login';
+import { httpErrorToHuman } from '@/api/http';
+import MessageBox from '@/components/MessageBox';
+
+type State = Readonly<{
+    errorMessage?: string;
+    isLoading: boolean;
+    username?: string;
+    password?: string;
+}>;
+
+export default class LoginContainer extends React.PureComponent<{}, State> {
+    username = React.createRef<HTMLInputElement>();
+
+    state: State = {
+        isLoading: false,
+    };
+
+    submit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+
+        const { username, password } = this.state;
+
+        this.setState({ isLoading: true }, () => {
+            login(username!, password!)
+                .then(response => {
+
+                })
+                .catch(error => this.setState({
+                    isLoading: false,
+                    errorMessage: httpErrorToHuman(error),
+                }, () => console.error(error)));
+        });
+    };
+
+    canSubmit () {
+        if (!this.state.username || !this.state.password) {
+            return false;
+        }
+
+        return this.state.username.length > 0 && this.state.password.length > 0;
+    }
+
+    // @ts-ignore
+    handleFieldUpdate = (e: React.ChangeEvent<HTMLInputElement>) => this.setState({
+        [e.target.id]: e.target.value,
+    });
+
+    render () {
+        return (
+            <React.Fragment>
+                {this.state.errorMessage &&
+                <div className={'mb-4'}>
+                    <MessageBox
+                        type={'error'}
+                        title={'Error'}
+                        message={this.state.errorMessage}
+                    />
+                </div>
+                }
+                <form className={'login-box'} onSubmit={this.submit}>
+                    <div className={'-mx-3'}>
+                        <OpenInputField
+                            autoFocus={true}
+                            label={'Username or Email'}
+                            type={'text'}
+                            required={true}
+                            id={'username'}
+                            onChange={this.handleFieldUpdate}
+                            disabled={this.state.isLoading}
+                        />
+                    </div>
+                    <div className={'-mx-3 mt-6'}>
+                        <OpenInputField
+                            label={'Password'}
+                            type={'password'}
+                            required={true}
+                            id={'password'}
+                            onChange={this.handleFieldUpdate}
+                            disabled={this.state.isLoading}
+                        />
+                    </div>
+                    <div className={'mt-6'}>
+                        <button
+                            type={'submit'}
+                            className={'btn btn-primary btn-jumbo'}
+                            disabled={this.state.isLoading || !this.canSubmit()}
+                        >
+                            {this.state.isLoading ?
+                                <span className={'spinner white'}>&nbsp;</span>
+                                :
+                                'Login'
+                            }
+                        </button>
+                    </div>
+                    <div className={'mt-6 text-center'}>
+                        <Link
+                            to={'/auth/forgot-password'}
+                            className={'text-xs text-neutral-500 tracking-wide no-underline uppercase hover:text-neutral-600'}
+                        >
+                            Forgot password?
+                        </Link>
+                    </div>
+                </form>
+            </React.Fragment>
+        );
+    }
+}

resources/scripts/components/forms/OpenInputField.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+type Props = React.InputHTMLAttributes<HTMLInputElement> & {
+    label: string;
+};
+
+export default ({ className, onChange, label, ...props }: Props) => {
+    const [ value, setValue ] = React.useState('');
+
+    const classes = classNames('input open-label', {
+        'has-content': value && value.length > 0,
+    });
+
+    return (
+        <div className={'input-open'}>
+            <input
+                className={classes}
+                onChange={e => {
+                    setValue(e.target.value);
+                    if (onChange) {
+                        onChange(e);
+                    }
+                }}
+                {...props}
+            />
+            <label htmlFor={props.id}>{label}</label>
+        </div>
+    );
+};