From baf152d57c103d66cf985eca1f50feedf18d84c4 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_git@ketrenos.com>
Date: Tue, 18 Sep 2018 09:31:51 -0700
Subject: [PATCH] Center login on larger screens; spinner on login; fix enter
 to switch tab focus on paper-input on login

Signed-off-by: James Ketrenos <james_git@ketrenos.com>
---
 frontend/src/ketr-photos/ketr-photos.html | 37 +++++++++++++++--------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/frontend/src/ketr-photos/ketr-photos.html b/frontend/src/ketr-photos/ketr-photos.html
index cb31859..783ec1c 100755
--- a/frontend/src/ketr-photos/ketr-photos.html
+++ b/frontend/src/ketr-photos/ketr-photos.html
@@ -54,7 +54,8 @@
       }
 
       #login {
-        margin: 1em;
+        max-width: 50ex;
+        margin: 1em auto;
         padding: 2em;
         border: 1px solid #444;
         box-sizing: border-box;
@@ -355,9 +356,9 @@
                   provide your email address, and tell me who in the extended Ketrenos
                   universe you know. If you're not a bot, I'll very likely give you access :)</p>
               </div>
-              <paper-input tabindex autofocus id="username" label="User ID" value="{{username}}" on-keypress="enterCheck"></paper-input>
-              <paper-input tabindex id="password" label="Password" type="password" value="{{password}}" on-keypress="enterCheck"></paper-input>
-              <paper-button tabindex disabled$="[[disableLogin(username,password)]]" on-tap="login">login</paper-button>
+              <paper-input tabindex=0 autofocus id="username" label="User ID" value="{{username}}" on-keypress="enterCheck"></paper-input>
+              <paper-input tabindex=0 id="password" label="Password" type="password" value="{{password}}" on-keypress="enterCheck"></paper-input>
+              <paper-button tabindex=0 id="loginButton" disabled$="[[disableLogin(username,password)]]" on-tap="login" raised><div hidden$="[[loggingIn]]">login</div><div hidden$="[[!loggingIn]]"><paper-spinner active$="[[loggingIn]]"></paper-spinner></div></paper-button>
             </div>
           </div>
         </div>
@@ -461,11 +462,11 @@
         },
 
         enterCheck: function(event) {
-          if (event.code == 'Enter') {
+          if (event.key == 'Enter') {
             if (event.currentTarget.id == "username") {
               event.preventDefault();
               this.async(function() {
-                this.$.password.focus();
+                this.$.password._focusableElement.focus();
               }, 100);
               return;
             }
@@ -507,8 +508,10 @@
             return;
           }
           this.loading = true;
+          this.loggingIn = true;
           this.user = null;
           window.fetch("api/v1/users/login", function(error, xhr) {
+            this.loggingIn = false;
             this.loading = false;
             this.password = "";
             var user;
@@ -574,11 +577,16 @@
         },
 
         modeChanged: function(mode) {
+          if (!mode) {
+            return;
+          }
           console.log("Mode changed to " + mode);
           this.path = "";
           this.resetPhotos();
-          this._loadAlbums();
-          this._loadPhotos();
+          if (mode != "login") {
+            this._loadAlbums();
+            this._loadPhotos();
+          }
         },
 
         breadcrumb: function(path) {
@@ -1008,7 +1016,7 @@
         },
 
         _loadPhotos: function(start, append, limit) {
-          if (this.loading == true) {
+          if (this.loading == true || this.mode == "login") {
             return;
           }
           this.loading = true;
@@ -1042,6 +1050,7 @@
               path = "/memories/" + (this.date || "");
             }
           }
+          var username = this.user ? this.user.username : "";
           console.log("Requesting " + this.limit + " photos.");
           window.fetch("api/v1/photos" + path + query, function(path, error, xhr) {
             this.loading = false;
@@ -1050,7 +1059,8 @@
               return;
             }
 
-            if ((mode != this.mode) || 
+            if ((username != (this.user ? this.user.username : "")) ||
+                (mode != this.mode) || 
                 ((mode == "albums") && (path != (this.path || ""))) ||
                 ((mode == "memories") && (path != ("/memories/" + (this.date || ""))))) {
               console.log("Skipping results for old query. Triggering re-fetch of photos for new path or mode.");
@@ -1095,7 +1105,7 @@
         },
 
         _loadAlbums: function() {
-          if (this.loadingAlbums == true) {
+          if (this.loadingAlbums == true || this.mode == "login") {
             return;
           }
           this.loadingAlbums = true;
@@ -1153,16 +1163,17 @@
         userChanged: function(user) {
           this.resetPhotos();
           this.path = "";
+          this.mode = "";
           if (user) {
             this.mode = "memories";
-            this._loadAlbums();
-            this._loadPhotos();
           } else {
             this.mode = "login";
           }
         },
 
         ready: function() {
+          this.resetPhotos();
+
           this.$.calendar.partsHidden = {
             "year": true
           };