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

82
client/html/user_tokens.tpl
View file

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

6
client/js/api.js
View file

@ -122,7 +122,7 @@ class Api extends events.EventTarget {
createToken(userName, options) {
let userTokenRequest = {
enabled: true,
note: 'Client Login Token'
note: 'Web Login Token'
};
if (typeof options.expires !== 'undefined') {
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) {
const fullUrl =
(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') {
userTokenPromise = UserToken.get(userName)
.then(userTokens => {
return userTokens;
return userTokens.map(token => {
token.isCurrentAuthToken = api.isCurrentAuthToken(token);
return token;
});
}, error => {
return [];
});
@ -216,7 +219,7 @@ class UserController {
_evtDeleteToken(e) {
this._view.clearMessages();
this._view.disableForm();
if (e.detail.userToken.token === api.token) {
if (api.isCurrentAuthToken(e.detail.userToken)) {
router.show(uri.formatClientLink('logout'));
} else {
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 views = require('../util/views.js');
const api = require('../api.js');
const template = views.getTemplate('user-tokens');