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