From 9cd48c068d8f9ab578588eade4474b0975ba2fbe Mon Sep 17 00:00:00 2001
From: Callan Bryant <callan.bryant@gmail.com>
Date: Thu, 19 Jul 2018 14:58:06 +0100
Subject: [PATCH 1/3] Make first factor login page UI indicate loading state

* Submit button changes to "Loading..."
* Form fades and disables
---
 client/src/css/01-main.css                | 2 +-
 client/src/lib/firstfactor/UISelectors.ts | 3 ++-
 client/src/lib/firstfactor/index.ts       | 9 ++++++++-
 server/src/views/firstfactor.pug          | 2 +-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/client/src/css/01-main.css b/client/src/css/01-main.css
index 0ed7ac73..e7db6aa1 100644
--- a/client/src/css/01-main.css
+++ b/client/src/css/01-main.css
@@ -63,4 +63,4 @@ body {
 }
 h1 {
   font-size: 25px;
-}
\ No newline at end of file
+}
diff --git a/client/src/lib/firstfactor/UISelectors.ts b/client/src/lib/firstfactor/UISelectors.ts
index 25dc81ff..07591b4d 100644
--- a/client/src/lib/firstfactor/UISelectors.ts
+++ b/client/src/lib/firstfactor/UISelectors.ts
@@ -1,3 +1,4 @@
 
 export const USERNAME_FIELD_ID = "#username";
-export const PASSWORD_FIELD_ID = "#password";
\ No newline at end of file
+export const PASSWORD_FIELD_ID = "#password";
+export const SIGN_IN_BUTTON_ID = "#signin";
diff --git a/client/src/lib/firstfactor/index.ts b/client/src/lib/firstfactor/index.ts
index 93fa2d76..4cc84584 100644
--- a/client/src/lib/firstfactor/index.ts
+++ b/client/src/lib/firstfactor/index.ts
@@ -15,7 +15,10 @@ export default function (window: Window, $: JQueryStatic,
   function onFormSubmitted() {
     const username: string = $(UISelectors.USERNAME_FIELD_ID).val() as string;
     const password: string = $(UISelectors.PASSWORD_FIELD_ID).val() as string;
-    $(UISelectors.PASSWORD_FIELD_ID).val("");
+
+    $("form").css("opacity", 0.5);
+    $("input,button").attr("disabled", "true");
+    $(UISelectors.SIGN_IN_BUTTON_ID).text("Please wait...");
 
     const redirectUrl = QueryParametersRetriever.get(Constants.REDIRECT_QUERY_PARAM);
     firstFactorValidator.validate(username, password, redirectUrl, $)
@@ -29,6 +32,10 @@ export default function (window: Window, $: JQueryStatic,
 
   function onFirstFactorFailure(err: Error) {
     notifier.error(UserMessages.AUTHENTICATION_FAILED);
+    $(UISelectors.PASSWORD_FIELD_ID).select();
+    $("form").css("opacity", 1);
+    $("input,button").removeAttr("disabled");
+    $(UISelectors.SIGN_IN_BUTTON_ID).text("Sign in");
   }
 
   $(window.document).ready(function () {
diff --git a/server/src/views/firstfactor.pug b/server/src/views/firstfactor.pug
index 373d2f45..caa52530 100644
--- a/server/src/views/firstfactor.pug
+++ b/server/src/views/firstfactor.pug
@@ -14,7 +14,7 @@ block content
     div(class="form-inputs")
       input(type="text" class="form-control" id="username" placeholder="Username" required autofocus)
       input(type="password" class="form-control" id="password" placeholder="Password" required)
-    button(class="btn btn-lg btn-primary btn-block" type="submit") Sign in
+    button(id="signin" class="btn btn-lg btn-primary btn-block" type="submit") Sign in
     div(class="bottom-right-links pull-right")
       a(href=reset_password_request_endpoint, class="link forgot-password") Forgot password?
     span(class="clearfix")

From a1233e5437a89c0d0954a60a68d6dee6822881ec Mon Sep 17 00:00:00 2001
From: Callan Bryant <callan.bryant@gmail.com>
Date: Mon, 23 Jul 2018 11:06:17 +0100
Subject: [PATCH 2/3] re-enable element before sending message

---
 client/src/lib/firstfactor/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/lib/firstfactor/index.ts b/client/src/lib/firstfactor/index.ts
index 4cc84584..0e07e7ed 100644
--- a/client/src/lib/firstfactor/index.ts
+++ b/client/src/lib/firstfactor/index.ts
@@ -31,10 +31,10 @@ export default function (window: Window, $: JQueryStatic,
   }
 
   function onFirstFactorFailure(err: Error) {
+    $("input,button").removeAttr("disabled");
+    $("form").css("opacity", 1);
     notifier.error(UserMessages.AUTHENTICATION_FAILED);
     $(UISelectors.PASSWORD_FIELD_ID).select();
-    $("form").css("opacity", 1);
-    $("input,button").removeAttr("disabled");
     $(UISelectors.SIGN_IN_BUTTON_ID).text("Sign in");
   }
 

From 68403fa6819bfac2b9c0af1ff64e5f356ca03860 Mon Sep 17 00:00:00 2001
From: Callan Bryant <callan.bryant@gmail.com>
Date: Thu, 26 Jul 2018 14:31:19 +0100
Subject: [PATCH 3/3] tests: ensure password field is cleared before typing
 password

---
 test/features/support/world.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/test/features/support/world.ts b/test/features/support/world.ts
index c1127dc7..b848f643 100644
--- a/test/features/support/world.ts
+++ b/test/features/support/world.ts
@@ -78,6 +78,10 @@ function CustomWorld() {
         return that.driver.findElement(seleniumWebdriver.By.id("username"))
           .sendKeys(username);
       })
+      .then(function () {
+        return that.driver.findElement(seleniumWebdriver.By.id("password"))
+          .clear();
+      })
       .then(function () {
         return that.driver.findElement(seleniumWebdriver.By.id("password"))
           .sendKeys(password);