ulysia/szurubooru
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

client/user: UI cleanup

Browse source
This commit is contained in:
ReAnzu 2018-03-10 16:07:48 -06:00
parent bc6d2dceb5
commit e0d1d9a12e
5 changed files with 64 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
client/css/user-view.styl
View file

@ -1,6 +1,6 @@
#user #user
width: 100% width: 100%
max-width: 45em max-width: 35em
nav.text-nav nav.text-nav
margin-bottom: 1.5em margin-bottom: 1.5em
@ -51,22 +51,19 @@
flex-direction column; flex-direction column;
padding-bottom: 0.5em; padding-bottom: 0.5em;
.floor .full-width
border-bottom: black solid 1px; width: 100%
.token-info
min-width: 75%;
.token-actions
max-width: 25%;
justify-content: end;
.token-flex-row .token-flex-row
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
padding-top: 0.25em; padding: 0.2em;
padding-bottom: 0.25em;
.token-input
min-height: 2em;
line-height: 2em;
text-align: center;
form form
width: auto; width: auto;
@ -75,6 +72,12 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.token-flex-labels
padding-right: 0.5em
hr
border-top: 1px #aaa solid;
#user-delete form #user-delete form
width: 100% width: 100%

82
client/html/user_tokens.tpl
View file

@ -3,63 +3,57 @@
<% if (ctx.tokens.length > 0) { %> <% if (ctx.tokens.length > 0) { %>
<div class="token-flex-container"> <div class="token-flex-container">
<% _.each(ctx.tokens, function(token, index) { %> <% _.each(ctx.tokens, function(token, index) { %>
<div class="token-flex-row floor"> <div class="token-flex-row">
<div class="token-flex-column token-info"> <div class="token-flex-column token-flex-labels">
<div class="token-flex-row"> <div class="token-flex-row">Token:</div>
<div>Token:</div> <div class="token-flex-row">Note:</div>
<div><%= token.token %></div> <div class="token-flex-row">Created:</div>
</div> <div class="token-flex-row">Expires:</div>
<div class="token-flex-row"> </div>
<div>Note:</div> <div class="token-flex-column full-width">
<div><%= token.note %></div> <div class="token-flex-row"><%= token.token %></div>
</div> <div class="token-flex-row"><%= token.note %></div>
<div class="token-flex-row"> <div class="token-flex-row"><%= ctx.makeRelativeTime(token.creationTime) %></div>
<div>Created:</div>
<div><%= new Date(token.creationTime).toLocaleDateString() %></div>
</div>
<% if (token.expirationTime) { %> <% if (token.expirationTime) { %>
<div class="token-flex-row"> <div class="token-flex-row"><%= ctx.makeRelativeTime(token.expirationTime) %></div>
<div>Expires:</div>
<div><%= new Date(token.expirationTime).toLocaleDateString() %></div>
</div>
<% } else { %> <% } else { %>
<div class="token-flex-row"> <div class="token-flex-row">No expiration</div>
<div>Expires:</div>
<div>No Expiration</div>
</div>
<% } %> <% } %>
</div> </div>
<div class="token-flex-column token-actions"> </div>
<div> <div class="token-flex-row">
<div class="token-flex-column full-width">
<div class="token-flex-row">
<form class='token' data-token-id='<%= index %>'> <form class='token' data-token-id='<%= index %>'>
<input type='hidden' name='token' value='<%= token.token %>'/> <input type='hidden' name='token' value='<%= token.token %>'/>
<input type='submit' value='Delete token'/> <% if (token.isCurrentAuthToken) { %>
<input type='submit' value='Delete and logout'/>
<% } else { %>
<input type='submit' value='Delete'/>
<% } %>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
<hr/>
<% }); %> <% }); %>
</div> </div>
<% } else { %> <% } else { %>
<h2>No Registered Tokens</h2> <h2>No Registered Tokens</h2>
<% } %> <% } %>
<div class='flex-centered'> <form id='create-token-form'>
<form id='create-token-form'> <ul class="input">
<div class="token-flex-container"> <li>
<div class="token-flex-row"> <label>Note</label>
<div>Note:</div> <input name='note', type='textbox'/>
<div><input name='note', type='textbox'/></div> </li>
</div> <li>
<div class="token-flex-row"> <label>Expires</label>
<div>Expiration:</div> <input name='expirationTime' type='date'/>
<div><input name='expirationTime' type='date'/></div> </li>
</div> </ul>
<div class="token-flex-row" style='justify-content: end;'> <div class='buttons'>
<div class='buttons'> <input type='submit' value='Create token'/>
<input type='submit' value='Create token'/> </div>
</div> </form>
</div>
</div>
</form>
</div>
</div> </div>

6
client/js/api.js
View file

@ -122,7 +122,7 @@ class Api extends events.EventTarget {
createToken(userName, options) { createToken(userName, options) {
let userTokenRequest = { let userTokenRequest = {
enabled: true, enabled: true,
note: 'Client Login Token' note: 'Web Login Token'
}; };
if (typeof options.expires !== 'undefined') { if (typeof options.expires !== 'undefined') {
userTokenRequest.expirationTime = new Date().addDays(options.expires).toISOString() userTokenRequest.expirationTime = new Date().addDays(options.expires).toISOString()
@ -212,6 +212,10 @@ class Api extends events.EventTarget {
} }
} }
isCurrentAuthToken(userToken) {
return userToken.token === this.token;
}
_getFullUrl(url) { _getFullUrl(url) {
const fullUrl = const fullUrl =
(config.apiUrl + '/' + url).replace(/([^:])\/+/g, '$1/'); (config.apiUrl + '/' + url).replace(/([^:])\/+/g, '$1/');

7
client/js/controllers/user_controller.js
View file

@ -29,7 +29,10 @@ class UserController {
if (section === 'list-tokens') { if (section === 'list-tokens') {
userTokenPromise = UserToken.get(userName) userTokenPromise = UserToken.get(userName)
.then(userTokens => { .then(userTokens => {
return userTokens; return userTokens.map(token => {
token.isCurrentAuthToken = api.isCurrentAuthToken(token);
return token;
});
}, error => { }, error => {
return []; return [];
}); });
@ -216,7 +219,7 @@ class UserController {
_evtDeleteToken(e) { _evtDeleteToken(e) {
this._view.clearMessages(); this._view.clearMessages();
this._view.disableForm(); this._view.disableForm();
if (e.detail.userToken.token === api.token) { if (api.isCurrentAuthToken(e.detail.userToken)) {
router.show(uri.formatClientLink('logout')); router.show(uri.formatClientLink('logout'));
} else { } else {
e.detail.userToken.delete(e.detail.user.name) e.detail.userToken.delete(e.detail.user.name)

1
client/js/views/user_tokens_view.js
View file

@ -2,6 +2,7 @@
const events = require('../events.js'); const events = require('../events.js');
const views = require('../util/views.js'); const views = require('../util/views.js');
const api = require('../api.js');
const template = views.getTemplate('user-tokens'); const template = views.getTemplate('user-tokens');