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 {
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();
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
};