From 7f3ab8aadfad1de9f52452e8173cfa34d2836ba5 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 22 Jun 2019 13:11:27 -0700
Subject: [PATCH] Redesign the login form to not use the weird open fields

---
 resources/assets/styles/components/forms.css  | 39 ++-------------
 .../auth/ForgotPasswordContainer.tsx          | 25 +++++-----
 .../auth/LoginCheckpointContainer.tsx         | 48 -------------------
 .../components/auth/LoginContainer.tsx        | 30 ++++++------
 .../auth/ResetPasswordContainer.tsx           | 27 +++++------
 .../components/forms/OpenInputField.tsx       | 43 -----------------
 6 files changed, 43 insertions(+), 169 deletions(-)
 delete mode 100644 resources/scripts/components/forms/OpenInputField.tsx

diff --git a/resources/assets/styles/components/forms.css b/resources/assets/styles/components/forms.css
index b083a8f7..93fca8d3 100644
--- a/resources/assets/styles/components/forms.css
+++ b/resources/assets/styles/components/forms.css
@@ -12,43 +12,10 @@ input[type=number] {
     -moz-appearance: textfield !important;
 }
 
-/**
- * Styles for the login form open input boxes. Label floats up above it when content
- * is input and then sinks back down into the field if left empty.
- */
-.input-open {
-    @apply .w-full .relative;
-}
-
-.input-open > .input, .input-open > .input:disabled {
-    @apply .appearance-none .block .w-full .text-neutral-800 .border-b-2 .border-neutral-200 .py-3 .px-2 .bg-white;
-
-    &:focus {
-        @apply .border-primary-400;
-        outline: 0;
-        transition: border 500ms ease-out;
-    }
-
-    &:focus + label, &:valid + label, &.has-content + label {
-        @apply .text-neutral-800 .px-0 .cursor-pointer;
-        transform:translateY(-26px)
-    }
-
-    &:required {
-        box-shadow: none;
-    }
-}
-
-.input-open > label {
-    @apply .block .uppercase .tracking-wide .text-neutral-500 .text-xs .mb-2 .px-2 .absolute;
-    top: 14px;
-    transition: padding 200ms linear, transform 200ms ease-out;
-}
-
 /**
  * Styling for other forms throughout the Panel.
  */
-.input:not(.open-label) {
+.input {
     @apply .appearance-none .p-3 .rounded .border .border-neutral-200 .text-neutral-800 .w-full;
     min-width: 0;
     transition: border 150ms linear;
@@ -70,6 +37,10 @@ input[type=number] {
     @apply .bg-neutral-100 .border-neutral-200;
 }
 
+label {
+    @apply .block .text-xs .font-medium .uppercase .text-neutral-700 .mb-2;
+}
+
 select:not(.appearance-none) {
     @apply .outline-none .appearance-none .block .bg-white .border .border-neutral-200 .text-neutral-400 .p-3 .pr-8 rounded;
     transition: border-color 150ms linear, color 150ms linear;
diff --git a/resources/scripts/components/auth/ForgotPasswordContainer.tsx b/resources/scripts/components/auth/ForgotPasswordContainer.tsx
index 9005c04b..cbc4dfcf 100644
--- a/resources/scripts/components/auth/ForgotPasswordContainer.tsx
+++ b/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'}
diff --git a/resources/scripts/components/auth/LoginCheckpointContainer.tsx b/resources/scripts/components/auth/LoginCheckpointContainer.tsx
index b2fe6ad5..a59d097d 100644
--- a/resources/scripts/components/auth/LoginCheckpointContainer.tsx
+++ b/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
diff --git a/resources/scripts/components/auth/LoginContainer.tsx b/resources/scripts/components/auth/LoginContainer.tsx
index 6a388a45..2b0385e2 100644
--- a/resources/scripts/components/auth/LoginContainer.tsx
+++ b/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}
                         />
diff --git a/resources/scripts/components/auth/ResetPasswordContainer.tsx b/resources/scripts/components/auth/ResetPasswordContainer.tsx
index f49aa3a2..3483207e 100644
--- a/resources/scripts/components/auth/ResetPasswordContainer.tsx
+++ b/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>
diff --git a/resources/scripts/components/forms/OpenInputField.tsx b/resources/scripts/components/forms/OpenInputField.tsx
deleted file mode 100644
index ab0fa048..00000000
--- a/resources/scripts/components/forms/OpenInputField.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-
-type Props = React.InputHTMLAttributes<HTMLInputElement> & {
-    label: string;
-    description?: string;
-    value?: string;
-};
-
-export default React.forwardRef<HTMLInputElement, Props>(({ className, description, onChange, label, value, ...props }, ref) => {
-    const [ stateValue, setStateValue ] = React.useState(value);
-
-    if (value !== stateValue) {
-        setStateValue(value);
-    }
-
-    const classes = classNames('input open-label', {
-        'has-content': stateValue && stateValue.length > 0,
-    });
-
-    return (
-        <div className={'input-open'}>
-            <input
-                ref={ref}
-                className={classes}
-                onChange={e => {
-                    setStateValue(e.target.value);
-                    if (onChange) {
-                        onChange(e);
-                    }
-                }}
-                value={typeof value !== 'undefined' ? (stateValue || '') : undefined}
-                {...props}
-            />
-            <label htmlFor={props.id}>{label}</label>
-            {description &&
-            <p className={'mt-2 text-xs text-neutral-500'}>
-                {description}
-            </p>
-            }
-        </div>
-    );
-});