techies/authelia
1
0
Fork 0
mirror of https://github.com/0rangebananaspy/authelia.git synced 2024-09-14 22:47:21 +07:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
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

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

@ -139,17 +139,8 @@ 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 ? (
<Grid item xs={12} className={classnames(style.actionRow)}>
<FormControlLabel
control={
<Checkbox
@ -174,17 +165,6 @@ const FirstFactorForm = function (props: Props) {
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}
</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",
},
}));