Skip to content

Commit 7f3ab8a

Browse files
DaneEverittDaneEveritt
committed
Redesign the login form to not use the weird open fields
1 parent 5664025 commit 7f3ab8a

File tree

6 files changed

+43
-169
lines changed

6 files changed

+43
-169
lines changed

‎resources/assets/styles/components/forms.css‎

Lines changed: 5 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -12,43 +12,10 @@ input[type=number] {
1212
-moz-appearance: textfield !important;
1313
}
1414

15-
/**
16-
* Styles for the login form open input boxes. Label floats up above it when content
17-
* is input and then sinks back down into the field if left empty.
18-
*/
19-
.input-open {
20-
@apply .w-full .relative;
21-
}
22-
23-
.input-open > .input, .input-open > .input:disabled {
24-
@apply .appearance-none .block .w-full .text-neutral-800 .border-b-2 .border-neutral-200 .py-3 .px-2 .bg-white;
25-
26-
&:focus {
27-
@apply .border-primary-400;
28-
outline: 0;
29-
transition: border 500ms ease-out;
30-
}
31-
32-
&:focus + label, &:valid + label, &.has-content + label {
33-
@apply .text-neutral-800 .px-0 .cursor-pointer;
34-
transform:translateY(-26px)
35-
}
36-
37-
&:required {
38-
box-shadow: none;
39-
}
40-
}
41-
42-
.input-open > label {
43-
@apply .block .uppercase .tracking-wide .text-neutral-500 .text-xs .mb-2 .px-2 .absolute;
44-
top: 14px;
45-
transition: padding 200ms linear, transform 200ms ease-out;
46-
}
47-
4815
/**
4916
* Styling for other forms throughout the Panel.
5017
*/
51-
.input:not(.open-label) {
18+
.input {
5219
@apply .appearance-none .p-3 .rounded .border .border-neutral-200 .text-neutral-800 .w-full;
5320
min-width: 0;
5421
transition: border 150ms linear;
@@ -70,6 +37,10 @@ input[type=number] {
7037
@apply .bg-neutral-100 .border-neutral-200;
7138
}
7239

40+
label {
41+
@apply .block .text-xs .font-medium .uppercase .text-neutral-700 .mb-2;
42+
}
43+
7344
select:not(.appearance-none) {
7445
@apply .outline-none .appearance-none .block .bg-white .border .border-neutral-200 .text-neutral-400 .p-3 .pr-8 rounded;
7546
transition: border-color 150ms linear, color 150ms linear;

‎resources/scripts/components/auth/ForgotPasswordContainer.tsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -63,18 +63,19 @@ class ForgotPasswordContainer extends React.PureComponent<Props, State> {
6363
Request Password Reset
6464
</h2>
6565
<form className={'login-box'} onSubmit={this.handleSubmission}>
66-
<div className={'mt-3'}>
67-
<OpenInputField
68-
ref={this.emailField}
69-
id={'email'}
70-
type={'email'}
71-
label={'Email'}
72-
description={'Enter your account email address to receive instructions on resetting your password.'}
73-
autoFocus={true}
74-
required={true}
75-
onChange={this.handleFieldUpdate}
76-
/>
77-
</div>
66+
<label htmlFor={'email'}>Email</label>
67+
<input
68+
ref={this.emailField}
69+
id={'email'}
70+
type={'email'}
71+
required={true}
72+
className={'input'}
73+
onChange={this.handleFieldUpdate}
74+
autoFocus={true}
75+
/>
76+
<p className={'input-help'}>
77+
Enter your account email address to receive instructions on resetting your password.
78+
</p>
7879
<div className={'mt-6'}>
7980
<button
8081
className={'btn btn-primary btn-jumbo flex justify-center'}

‎resources/scripts/components/auth/LoginCheckpointContainer.tsx‎

Lines changed: 0 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -16,41 +16,6 @@ class LoginCheckpointContainer extends React.PureComponent<RouteComponentProps,
1616
isLoading: false,
1717
};
1818

19-
moveToNextInput (e: React.KeyboardEvent<HTMLInputElement>, isBackspace: boolean = false) {
20-
const form = e.currentTarget.form;
21-
22-
if (form) {
23-
const index = Array.prototype.indexOf.call(form, e.currentTarget);
24-
const element = form.elements[index + (isBackspace ? -1 : 1)];
25-
26-
// @ts-ignore
27-
element && element.focus();
28-
}
29-
}
30-
31-
handleNumberInput = (e: React.KeyboardEvent<HTMLInputElement>) => {
32-
const number = Number(e.key);
33-
if (isNaN(number)) {
34-
return;
35-
}
36-
37-
this.setState(s => ({ code: s.code + number.toString() }));
38-
this.moveToNextInput(e);
39-
};
40-
41-
handleBackspace = (e: React.KeyboardEvent<HTMLInputElement>) => {
42-
const isBackspace = e.key === 'Delete' || e.key === 'Backspace';
43-
44-
if (!isBackspace || e.currentTarget.value.length > 0) {
45-
e.currentTarget.value = '';
46-
return;
47-
}
48-
49-
this.setState(s => ({ code: s.code.substring(0, s.code.length - 2) }));
50-
e.currentTarget.value = '';
51-
this.moveToNextInput(e, true);
52-
};
53-
5419
render () {
5520
return (
5621
<React.Fragment>
@@ -64,19 +29,6 @@ class LoginCheckpointContainer extends React.PureComponent<RouteComponentProps,
6429
code from your device in order to continue.
6530
</p>
6631
<div className={'flex mt-6'}>
67-
{
68-
[1, 2, 3, 4, 5, 6].map((_, index) => (
69-
<input
70-
autoFocus={index === 0}
71-
key={`input_${index}`}
72-
type={'number'}
73-
onKeyPress={this.handleNumberInput}
74-
onKeyDown={this.handleBackspace}
75-
maxLength={1}
76-
className={`input block flex-1 text-center text-lg ${index === 5 ? undefined : 'mr-6'}`}
77-
/>
78-
))
79-
}
8032
</div>
8133
<div className={'mt-6'}>
8234
<button

‎resources/scripts/components/auth/LoginContainer.tsx‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import * as React from 'react';
2-
import OpenInputField from '@/components/forms/OpenInputField';
32
import { Link, RouteComponentProps } from 'react-router-dom';
43
import login from '@/api/auth/login';
54
import { httpErrorToHuman } from '@/api/http';
@@ -65,23 +64,22 @@ export default class LoginContainer extends React.PureComponent<RouteComponentPr
6564
</h2>
6665
<NetworkErrorMessage message={this.state.errorMessage}/>
6766
<form className={'login-box'} onSubmit={this.submit}>
68-
<div className={'mt-3'}>
69-
<OpenInputField
70-
autoFocus={true}
71-
label={'Username or Email'}
72-
type={'text'}
73-
required={true}
74-
id={'username'}
75-
onChange={this.handleFieldUpdate}
76-
disabled={this.state.isLoading}
77-
/>
78-
</div>
67+
<label htmlFor={'username'}>Username or Email</label>
68+
<input
69+
id={'username'}
70+
autoFocus={true}
71+
required={true}
72+
className={'input'}
73+
onChange={this.handleFieldUpdate}
74+
disabled={this.state.isLoading}
75+
/>
7976
<div className={'mt-6'}>
80-
<OpenInputField
81-
label={'Password'}
82-
type={'password'}
83-
required={true}
77+
<label htmlFor={'password'}>Password</label>
78+
<input
8479
id={'password'}
80+
required={true}
81+
type={'password'}
82+
className={'input'}
8583
onChange={this.handleFieldUpdate}
8684
disabled={this.state.isLoading}
8785
/>

‎resources/scripts/components/auth/ResetPasswordContainer.tsx‎

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import * as React from 'react';
2-
import OpenInputField from '@/components/forms/OpenInputField';
32
import { RouteComponentProps } from 'react-router';
43
import { parse } from 'query-string';
54
import { Link } from 'react-router-dom';
@@ -93,30 +92,26 @@ class ResetPasswordContainer extends React.PureComponent<Props, State> {
9392
</h2>
9493
<NetworkErrorMessage message={this.state.errorMessage}/>
9594
<form className={'login-box'} onSubmit={this.onSubmit}>
96-
<div className={'mt-3'}>
97-
<OpenInputField
98-
label={'Email'}
99-
value={this.state.email || ''}
100-
disabled
101-
/>
102-
</div>
95+
<label>Email</label>
96+
<input value={this.state.email || ''} disabled={true}/>
10397
<div className={'mt-6'}>
104-
<OpenInputField
105-
autoFocus={true}
106-
label={'New Password'}
107-
description={'Passwords must be at least 8 characters in length.'}
98+
<label htmlFor={'new-password'}>New Password</label>
99+
<input
100+
id={'new-password'}
108101
type={'password'}
109102
required={true}
110-
id={'password'}
111103
onChange={this.onPasswordChange}
112104
/>
105+
<p className={'input-help'}>
106+
Passwords must be at least 8 characters in length.
107+
</p>
113108
</div>
114109
<div className={'mt-6'}>
115-
<OpenInputField
116-
label={'Confirm New Password'}
110+
<label htmlFor={'new-password-confirm'}>Confirm New Password</label>
111+
<input
112+
id={'new-password-confirm'}
117113
type={'password'}
118114
required={true}
119-
id={'password-confirm'}
120115
onChange={this.onPasswordConfirmChange}
121116
/>
122117
</div>

‎resources/scripts/components/forms/OpenInputField.tsx‎

Lines changed: 0 additions & 43 deletions
This file was deleted.

0 commit comments

Comments
 (0)