From 69c822a7edb8efb1a6e68d62d0d428be8e561479 Mon Sep 17 00:00:00 2001
From: Amir Zarrinkafsh <nightah@me.com>
Date: Thu, 16 Apr 2020 18:09:12 +1000
Subject: [PATCH] [MISC] Tweak frontend portal behaviour on enter keypress
 (#874)

Currently the first factor login page has somewhat inconsistent behaviour when pressing enter on a field.

The typical workflow will focus the next field from username -> password -> attempt login.
However if a user wants to tab down and hit spacebar to activate the remember me option, they cannot just hit enter and attempt a login.

This change will attempt a sign-in if the username and password fields both contain data and enter is pressed on either the username, password or remember me fields.
If the first condition is not met the the respective field(s) will error (turn red) and focus will be set to the in sequential order per the normal workflow.
---
 .../FirstFactor/FirstFactorForm.tsx           | 24 ++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx b/web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx
index 12d95c2e..515a1041 100644
--- a/web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx
+++ b/web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx
@@ -96,7 +96,14 @@ export default function (props: Props) {
                         onFocus={() => setUsernameError(false)}
                         onKeyPress={(ev) => {
                             if (ev.key === 'Enter') {
-                                passwordRef.current.focus();
+                                if (!username.length) {
+                                    setUsernameError(true)
+                                } else if (username.length && password.length) {
+                                    handleSignIn();
+                                } else {
+                                    setUsernameError(false)
+                                    passwordRef.current.focus();
+                                }
                             }
                         }} />
                 </Grid>
@@ -117,6 +124,11 @@ export default function (props: Props) {
                         type="password"
                         onKeyPress={(ev) => {
                             if (ev.key === 'Enter') {
+                                if (!username.length) {
+                                    usernameRef.current.focus();
+                                } else if (!password.length) {
+                                    passwordRef.current.focus();
+                                }
                                 handleSignIn();
                                 ev.preventDefault();
                             }
@@ -134,6 +146,16 @@ export default function (props: Props) {
                                         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();
+                                            }
+                                        }}
                                         value="rememberMe"
                                         color="primary"/>
                                 }