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

web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx

@@ -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",
-    },
 }));