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

fix(web): move reset password to after sign in (#2205) 

This is for a better user experience, specifically it makes it so when users tab through the elements in the login form they are selected in a logical order.

Fixes #2204
pull/2212/head^2
James Elliott 2021-07-30 09:29:57 +10:00 committed by GitHub
parent c98b2a7d59
commit e77f79853a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 37 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -139,52 +139,32 @@ const FirstFactorForm = function (props: Props) {
}}
/>
</Grid>
{props.rememberMe || props.resetPassword ? (
<Grid
item
xs={12}
className={
props.rememberMe
? classnames(style.leftAlign, style.actionRow)
: classnames(style.leftAlign, style.flexEnd, style.actionRow)
}
>
{props.rememberMe ? (
<FormControlLabel
control={
<Checkbox
id="remember-checkbox"
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();
{props.rememberMe ? (
<Grid item xs={12} className={classnames(style.actionRow)}>
<FormControlLabel
control={
<Checkbox
id="remember-checkbox"
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();
}
}}
value="rememberMe"
color="primary"
/>
}
className={style.rememberMe}
label="Remember me"
/>
) : null}
{props.resetPassword ? (
<Link
id="reset-password-button"
component="button"
onClick={handleResetPasswordClick}
className={style.resetLink}
>
Reset password?
</Link>
) : null}
handleSignIn();
}
}}
value="rememberMe"
color="primary"
/>
}
className={style.rememberMe}
label="Remember me"
/>
</Grid>
) : null}
<Grid item xs={12}>
@ -199,6 +179,18 @@ const FirstFactorForm = function (props: Props) {
Sign in
</Button>
</Grid>
{props.resetPassword ? (
<Grid item xs={12} className={classnames(style.actionRow, style.flexEnd)}>
<Link
id="reset-password-button"
component="button"
onClick={handleResetPasswordClick}
className={style.resetLink}
>
Reset password?
</Link>
</Grid>
) : null}
</Grid>
</LoginLayout>
);
@ -224,11 +216,4 @@ const useStyles = makeStyles((theme) => ({
flexEnd: {
justifyContent: "flex-end",
},
leftAlign: {
textAlign: "left",
},
rightAlign: {
textAlign: "right",
verticalAlign: "bottom",
},
}));