From e77f79853a20d219f0d760b38c33946a79d1f209 Mon Sep 17 00:00:00 2001
From: James Elliott <james-d-elliott@users.noreply.github.com>
Date: Fri, 30 Jul 2021 09:29:57 +1000
Subject: [PATCH] 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
---
 .../FirstFactor/FirstFactorForm.tsx           | 89 ++++++++-----------
 1 file changed, 37 insertions(+), 52 deletions(-)

diff --git a/web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx b/web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx
index 5d7443d4..f188605f 100644
--- a/web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx
+++ b/web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx
@@ -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",
-    },
 }));