StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Redesign the login form to not use the weird open fields

Browse source
This commit is contained in:
Dane Everitt 2019-06-22 13:11:27 -07:00
parent 56640253b9
commit 7f3ab8aadf
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
6 changed files with 43 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

48
resources/scripts/components/auth/LoginCheckpointContainer.tsx
View file

@ -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