jketreno/ketr.photos
1
0
Fork 0
Code Issues 1 Activity

Center login on larger screens; spinner on login; fix enter to switch tab focus on paper-input on login

Browse Source 
Signed-off-by: James Ketrenos <james_git@ketrenos.com>
This commit is contained in:
James Ketr 2018-09-18 09:31:51 -07:00
parent a6ab1074dc
commit baf152d57c
1 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/ketr-photos/ketr-photos.html
View File

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