RPJosh
/
authelia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[MISC] Tweak frontend portal behaviour on enter keypress (#874) 

Currently the first factor login page has somewhat inconsistent behaviour when pressing enter on a field.

The typical workflow will focus the next field from username -> password -> attempt login.
However if a user wants to tab down and hit spacebar to activate the remember me option, they cannot just hit enter and attempt a login.

This change will attempt a sign-in if the username and password fields both contain data and enter is pressed on either the username, password or remember me fields.
If the first condition is not met the the respective field(s) will error (turn red) and focus will be set to the in sequential order per the normal workflow.
pull/872/head^2
Amir Zarrinkafsh 2020-04-16 18:09:12 +10:00 committed by GitHub
parent 02c55580bc
commit 69c822a7ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx
View File

@ -96,8 +96,15 @@ export default function (props: Props) {
onFocus={() => setUsernameError(false)}
onKeyPress={(ev) => {
if (ev.key === 'Enter') {
if (!username.length) {
setUsernameError(true)
} else if (username.length && password.length) {
handleSignIn();
} else {
setUsernameError(false)
passwordRef.current.focus();
}
}
}} />
</Grid>
<Grid item xs={12}>
@ -117,6 +124,11 @@ export default function (props: Props) {
type="password"
onKeyPress={(ev) => {
if (ev.key === 'Enter') {
if (!username.length) {
usernameRef.current.focus();
} else if (!password.length) {
passwordRef.current.focus();
}
handleSignIn();
ev.preventDefault();
}
@ -134,6 +146,16 @@ export default function (props: Props) {
disabled={disabled}
checked={rememberMe}
onChange={handleRememberMeChange}
onKeyPress={(ev) => {
if (ev.key === 'Enter') {
if (!username.length) {
usernameRef.current.focus();
} else if (!password.length) {
passwordRef.current.focus();
}
handleSignIn();
}
}}
value="rememberMe"
color="primary"/>
}