From c9e4f225cecbfb8e2963f32ec54636b60b25d9df Mon Sep 17 00:00:00 2001
From: Hidde de Vries <hidde@hiddedevries.nl>
Date: Fri, 23 Feb 2018 13:22:59 +0100
Subject: [PATCH 1/2] Add loading status, fix spinner, replace location

- This lets spinner stay in view while autologging in
- It adds text to show what we're autologging in with, and sends that as part of GA event
- It redirects with `window.location.replace` which does not leave an entry in the user's browser history, so no back button issue

Signed-off-by: Hidde de Vries <hidde@hiddedevries.nl>
---
 src/html/index.html                     |  1 +
 src/js/decorators/filter-connections.js | 44 ++++++++++++++++---------
 src/scss/components/_loading.scss       |  5 +++
 3 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/src/html/index.html b/src/html/index.html
index 43b290b4..cfe0c22d 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -19,6 +19,7 @@
           <div id="loading" class="loading" data-screen>
             <p class="visually-hidden ">Loading…</p>
             <img src="../images/loading.svg" class="loading__spinner" inline />
+            <p role="alert" id="loading__status"></p>
           </div>
           <div id="initial" data-screen data-hidden inert>
             <p>Log in with email or third-party</p>
diff --git a/src/js/decorators/filter-connections.js b/src/js/decorators/filter-connections.js
index 2cb0ee9e..70b9a682 100644
--- a/src/js/decorators/filter-connections.js
+++ b/src/js/decorators/filter-connections.js
@@ -4,7 +4,11 @@ var fireGAEvent = require( 'helpers/fireGAEvent' );
 
 module.exports = function( element ) {
   var form = element.form;
-  var url = 'https://auth-dev.mozilla.auth0.com/public/api/' + form.webAuthConfig.clientID + '/connections';
+  var url = '{{ auth0domain }}' + '/public/api/' + form.webAuthConfig.clientID + '/connections';
+  var visualStatusReport = document.getElementById( 'loading__status' );
+  var willRedirect = false;
+
+  ui.setLockState( element, 'loading' );
 
   fetch( url ).then( function( response ) {
     return response.json();
@@ -19,28 +23,36 @@ module.exports = function( element ) {
 
     RPfunctionalities.forEach( function( functionality ) {
       var functionalityName = functionality.getAttribute( 'data-optional-rp' );
+      var lastUsedConnection;
+      var locationString;
+      var silentAuthEnabled;
+      var newLocation;
 
       if ( allowedRPs.indexOf( functionalityName ) === -1 ) {
         ui.hide( functionality );
         fireGAEvent( 'Hiding', 'Hiding login method that isn\'t supported for this RP' );
       }
-    });
-
-    if ( window.location.hostname !== 'localhost' && window.localStorage ) {
-      var lastUsedConnection = window.localStorage.getItem( 'nlx-last-used-connection' );
-      var w = window.location.toString();
-      var silentAuthEnabled = w.indexOf('tried_silent_auth=true') === -1;
-
-      if ( silentAuthEnabled && lastUsedConnection && allowedRPs.indexOf( lastUsedConnection ) >= 0 ) {
-        window.location = w.replace('/login?', '/authorize?').replace('?client=', '?client_id=') + '&sso=true&connection=' + lastUsedConnection + '&tried_silent_auth=true'
-        fireGAEvent( 'Authorisation', 'Performing auto-login' );
 
-        return
+      if ( window.location.hostname !== 'localhost' && window.localStorage ) {
+        lastUsedConnection = window.localStorage.getItem( 'nlx-last-used-connection' );
+        locationString = window.location.toString();
+        silentAuthEnabled = locationString.indexOf('tried_silent_auth=true') === -1;
+
+        if ( silentAuthEnabled && lastUsedConnection && allowedRPs.indexOf( lastUsedConnection ) >= 0 ) {
+          willRedirect = true;
+          visualStatusReport.textContent = 'Autologging in with ' + lastUsedConnection;
+
+          var redirectTimeout = setTimeout(function() {
+            newLocation = locationString.replace('/login?', '/authorize?').replace('?client=', '?client_id=') + '&sso=true&connection=' + lastUsedConnection + '&tried_silent_auth=true';
+            window.location.replace( newLocation );
+            fireGAEvent( 'Authorisation', 'Performing auto-login with ' +lastUsedConnection );
+          }, 1000 );
+        }
       }
-    }
+    });
 
-    ui.setLockState( element, 'initial' );
-  }, function(){
-    ui.setLockState( element, 'initial' );
+    if ( !willRedirect ) {
+      ui.setLockState( element, 'initial' );
+    }
   });
 };
diff --git a/src/scss/components/_loading.scss b/src/scss/components/_loading.scss
index af0f884d..cb635b23 100644
--- a/src/scss/components/_loading.scss
+++ b/src/scss/components/_loading.scss
@@ -5,4 +5,9 @@
     margin: 3em auto;
     width: 2em;
   }
+
+  &__status {
+    text-indent: center;
+    margin: 1em 0;
+  }
 }

From 966321ebdecf3992d0cf022f6218129ecee7d5fd Mon Sep 17 00:00:00 2001
From: Hidde de Vries <hidde@hiddedevries.nl>
Date: Fri, 23 Feb 2018 13:27:45 +0100
Subject: [PATCH 2/2] Undo this as it is part of a different changeset

Signed-off-by: Hidde de Vries <hidde@hiddedevries.nl>
---
 src/js/decorators/filter-connections.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/decorators/filter-connections.js b/src/js/decorators/filter-connections.js
index 70b9a682..1ca558c6 100644
--- a/src/js/decorators/filter-connections.js
+++ b/src/js/decorators/filter-connections.js
@@ -4,7 +4,7 @@ var fireGAEvent = require( 'helpers/fireGAEvent' );
 
 module.exports = function( element ) {
   var form = element.form;
-  var url = '{{ auth0domain }}' + '/public/api/' + form.webAuthConfig.clientID + '/connections';
+  var url = 'https://auth-dev.mozilla.auth0.com/public/api/' + form.webAuthConfig.clientID + '/connections';
   var visualStatusReport = document.getElementById( 'loading__status' );
   var willRedirect = false;