Redesign the login form to not use the weird open fields

resources/scripts/components/auth/ForgotPasswordContainer.tsx

@@ -63,18 +63,19 @@ class ForgotPasswordContainer extends React.PureComponent<Props, State> {
                     Request Password Reset
                 </h2>
                 <form className={'login-box'} onSubmit={this.handleSubmission}>
-                    <div className={'mt-3'}>
-                        <OpenInputField
-                            ref={this.emailField}
-                            id={'email'}
-                            type={'email'}
-                            label={'Email'}
-                            description={'Enter your account email address to receive instructions on resetting your password.'}
-                            autoFocus={true}
-                            required={true}
-                            onChange={this.handleFieldUpdate}
-                        />
-                    </div>
+                    <label htmlFor={'email'}>Email</label>
+                    <input
+                        ref={this.emailField}
+                        id={'email'}
+                        type={'email'}
+                        required={true}
+                        className={'input'}
+                        onChange={this.handleFieldUpdate}
+                        autoFocus={true}
+                    />
+                    <p className={'input-help'}>
+                        Enter your account email address to receive instructions on resetting your password.
+                    </p>
                     <div className={'mt-6'}>
                         <button
                             className={'btn btn-primary btn-jumbo flex justify-center'}

resources/scripts/components/auth/LoginCheckpointContainer.tsx

@@ -16,41 +16,6 @@ class LoginCheckpointContainer extends React.PureComponent<RouteComponentProps,
         isLoading: false,
     };
 
-    moveToNextInput (e: React.KeyboardEvent<HTMLInputElement>, isBackspace: boolean = false) {
-        const form = e.currentTarget.form;
-
-        if (form) {
-            const index = Array.prototype.indexOf.call(form, e.currentTarget);
-            const element = form.elements[index + (isBackspace ? -1 : 1)];
-
-            // @ts-ignore
-            element && element.focus();
-        }
-    }
-
-    handleNumberInput = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        const number = Number(e.key);
-        if (isNaN(number)) {
-            return;
-        }
-
-        this.setState(s => ({ code: s.code + number.toString() }));
-        this.moveToNextInput(e);
-    };
-
-    handleBackspace = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        const isBackspace = e.key === 'Delete' || e.key === 'Backspace';
-
-        if (!isBackspace || e.currentTarget.value.length > 0) {
-            e.currentTarget.value = '';
-            return;
-        }
-
-        this.setState(s => ({ code: s.code.substring(0, s.code.length - 2) }));
-        e.currentTarget.value = '';
-        this.moveToNextInput(e, true);
-    };
-
     render () {
         return (
             <React.Fragment>
@@ -64,19 +29,6 @@ class LoginCheckpointContainer extends React.PureComponent<RouteComponentProps,
                         code from your device in order to continue.
                     </p>
                     <div className={'flex mt-6'}>
-                        {
-                            [1, 2, 3, 4, 5, 6].map((_, index) => (
-                                <input
-                                    autoFocus={index === 0}
-                                    key={`input_${index}`}
-                                    type={'number'}
-                                    onKeyPress={this.handleNumberInput}
-                                    onKeyDown={this.handleBackspace}
-                                    maxLength={1}
-                                    className={`input block flex-1 text-center text-lg ${index === 5 ? undefined : 'mr-6'}`}
-                                />
-                            ))
-                        }
                     </div>
                     <div className={'mt-6'}>
                         <button

resources/scripts/components/auth/LoginContainer.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import OpenInputField from '@/components/forms/OpenInputField';
 import { Link, RouteComponentProps } from 'react-router-dom';
 import login from '@/api/auth/login';
 import { httpErrorToHuman } from '@/api/http';
@@ -65,23 +64,22 @@ export default class LoginContainer extends React.PureComponent<RouteComponentPr
                 </h2>
                 <NetworkErrorMessage message={this.state.errorMessage}/>
                 <form className={'login-box'} onSubmit={this.submit}>
-                    <div className={'mt-3'}>
-                        <OpenInputField
-                            autoFocus={true}
-                            label={'Username or Email'}
-                            type={'text'}
-                            required={true}
-                            id={'username'}
-                            onChange={this.handleFieldUpdate}
-                            disabled={this.state.isLoading}
-                        />
-                    </div>
+                    <label htmlFor={'username'}>Username or Email</label>
+                    <input
+                        id={'username'}
+                        autoFocus={true}
+                        required={true}
+                        className={'input'}
+                        onChange={this.handleFieldUpdate}
+                        disabled={this.state.isLoading}
+                    />
                     <div className={'mt-6'}>
-                        <OpenInputField
-                            label={'Password'}
-                            type={'password'}
-                            required={true}
+                        <label htmlFor={'password'}>Password</label>
+                        <input
                             id={'password'}
+                            required={true}
+                            type={'password'}
+                            className={'input'}
                             onChange={this.handleFieldUpdate}
                             disabled={this.state.isLoading}
                         />

resources/scripts/components/auth/ResetPasswordContainer.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import OpenInputField from '@/components/forms/OpenInputField';
 import { RouteComponentProps } from 'react-router';
 import { parse } from 'query-string';
 import { Link } from 'react-router-dom';
@@ -93,30 +92,26 @@ class ResetPasswordContainer extends React.PureComponent<Props, State> {
                 </h2>
                 <NetworkErrorMessage message={this.state.errorMessage}/>
                 <form className={'login-box'} onSubmit={this.onSubmit}>
-                    <div className={'mt-3'}>
-                        <OpenInputField
-                            label={'Email'}
-                            value={this.state.email || ''}
-                            disabled
-                        />
-                    </div>
+                    <label>Email</label>
+                    <input value={this.state.email || ''} disabled={true}/>
                     <div className={'mt-6'}>
-                        <OpenInputField
-                            autoFocus={true}
-                            label={'New Password'}
-                            description={'Passwords must be at least 8 characters in length.'}
+                        <label htmlFor={'new-password'}>New Password</label>
+                        <input
+                            id={'new-password'}
                             type={'password'}
                             required={true}
-                            id={'password'}
                             onChange={this.onPasswordChange}
                         />
+                        <p className={'input-help'}>
+                            Passwords must be at least 8 characters in length.
+                        </p>
                     </div>
                     <div className={'mt-6'}>
-                        <OpenInputField
-                            label={'Confirm New Password'}
+                        <label htmlFor={'new-password-confirm'}>Confirm New Password</label>
+                        <input
+                            id={'new-password-confirm'}
                             type={'password'}
                             required={true}
-                            id={'password-confirm'}
                             onChange={this.onPasswordConfirmChange}
                         />
                     </div>