Combine sessions and app passwords view into one single view

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
This commit is contained in:
Christoph Wurst 2017-05-30 09:54:10 +02:00 committed by Joas Schilling
parent 7ff205cf94
commit c3cd07ec15
No known key found for this signature in database
GPG Key ID: E166FD8976B3BAC8
4 changed files with 33 additions and 85 deletions

View File

@ -300,35 +300,29 @@ table.nostyle td {
padding: 0.2em 0; padding: 0.2em 0;
} }
#sessions table, #sessions table {
#apppasswords table {
width: 100%; width: 100%;
min-height: 50px; min-height: 50px;
padding-top: 5px; padding-top: 5px;
max-width: 580px; max-width: 580px;
} }
#sessions table th, #sessions table th{
#apppasswords table th {
opacity: .5; opacity: .5;
} }
#sessions table th, #sessions table th,
#sessions table td, #sessions table td {
#apppasswords table th,
#apppasswords table td {
padding: 10px 10px 10px 0; padding: 10px 10px 10px 0;
} }
#sessions .token-list td.more, #sessions .token-list td.more {
#apppasswords .token-list td.more {
overflow: visible; overflow: visible;
position: relative; position: relative;
width: 16px; width: 16px;
} }
#sessions .token-list td, #sessions .token-list td {
#apppasswords .token-list td {
border-top: 1px solid #DDD; border-top: 1px solid #DDD;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 200px; max-width: 200px;
@ -338,37 +332,30 @@ table.nostyle td {
position: relative; position: relative;
} }
#sessions tr > *:nth-child(2), #sessions tr > *:nth-child(2) {
#apppasswords tr > *:nth-child(2) {
text-align: right; text-align: right;
} }
#sessions .token-list td > a.icon, #sessions .token-list td > a.icon {
#apppasswords .token-list td > a.icon {
opacity: 0; opacity: 0;
transition: opacity 0.5s; transition: opacity 0.5s;
} }
#sessions .token-list a.icon, #sessions .token-list a.icon {
#apppasswords .token-list a.icon {
margin-top: 4px; margin-top: 4px;
display: block; display: block;
} }
#sessions .token-list tr:hover td > a.icon, #sessions .token-list tr:hover td > a.icon,
#apppasswords .token-list tr:hover td > a.icon, #sessions .token-list tr.active td > a.icon {
#sessions .token-list tr.active td > a.icon,
#apppasswords .token-list tr.active td > a.icon {
opacity: 0.6; opacity: 0.6;
} }
#sessions .token-list td div.configure, #sessions .token-list td div.configure {
#apppasswords .token-list td div.configure {
display: none; display: none;
} }
#sessions .token-list tr.active div.configure, #sessions .token-list tr.active div.configure {
#apppasswords .token-list tr.active div.configure {
display: block; display: block;
position: absolute; position: absolute;
top: 45px; top: 45px;
@ -376,20 +363,17 @@ table.nostyle td {
padding: 10px; padding: 10px;
} }
#sessions .token-list div.configure:after, #sessions .token-list div.configure:after {
#apppasswords .token-list div.configure:after {
right: 13px; right: 13px;
} }
#sessions .token-list tr.active div.configure > *, #sessions .token-list tr.active div.configure > * {
#apppasswords .token-list tr.active div.configure > * {
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
display: inline-block; display: inline-block;
} }
#sessions .token-list tr.active a.icon-delete, #sessions .token-list tr.active a.icon-delete {
#apppasswords .token-list tr.active a.icon-delete {
background-position: left; background-position: left;
padding-left: 20px; padding-left: 20px;
} }

View File

@ -48,15 +48,6 @@
var SubView = OC.Backbone.View.extend({ var SubView = OC.Backbone.View.extend({
collection: null, collection: null,
/**
* token type
* - 0: browser
* - 1: device
*
* @see OC\Authentication\Token\IToken
*/
type: 0,
_template: undefined, _template: undefined,
template: function (data) { template: function (data) {
@ -68,7 +59,6 @@
}, },
initialize: function (options) { initialize: function (options) {
this.type = options.type;
this.collection = options.collection; this.collection = options.collection;
this.on(this.collection, 'change', this.render); this.on(this.collection, 'change', this.render);
@ -79,7 +69,7 @@
var list = this.$('.token-list'); var list = this.$('.token-list');
var tokens = this.collection.filter(function (token) { var tokens = this.collection.filter(function (token) {
return token.get('type') === _this.type; return true;
}); });
list.html(''); list.html('');
@ -183,7 +173,7 @@
var AuthTokenView = OC.Backbone.View.extend({ var AuthTokenView = OC.Backbone.View.extend({
collection: null, collection: null,
_views: [], _view: [],
_form: undefined, _form: undefined,
@ -206,25 +196,20 @@
initialize: function (options) { initialize: function (options) {
this.collection = options.collection; this.collection = options.collection;
var tokenTypes = [0, 1]; var el = '#sessions';
var _this = this; this._view = new SubView({
_.each(tokenTypes, function (type) {
var el = type === 0 ? '#sessions' : '#apppasswords';
_this._views.push(new SubView({
el: el, el: el,
type: type, collection: this.collection
collection: _this.collection });
}));
var $el = $(el); var $el = $(el);
$('body').on('click', _.bind(_this._hideConfigureToken, _this)); $('body').on('click', _.bind(this._hideConfigureToken, this));
$el.on('click', '.popovermenu', function(event) { $el.on('click', '.popovermenu', function(event) {
event.stopPropagation(); event.stopPropagation();
}); });
$el.on('click', 'a.icon-delete', _.bind(_this._onDeleteToken, _this)); $el.on('click', 'a.icon-delete', _.bind(this._onDeleteToken, this));
$el.on('click', '.icon-more', _.bind(_this._onConfigureToken, _this)); $el.on('click', '.icon-more', _.bind(this._onConfigureToken, this));
$el.on('change', 'input.filesystem', _.bind(_this._onSetTokenScope, _this)); $el.on('change', 'input.filesystem', _.bind(this._onSetTokenScope, this));
});
this._form = $('#app-password-form'); this._form = $('#app-password-form');
this._tokenName = $('#app-password-name'); this._tokenName = $('#app-password-name');
@ -233,7 +218,7 @@
this._appPasswordName = $('#app-password-name'); this._appPasswordName = $('#app-password-name');
this._appPasswordName.on('keypress', function(event) { this._appPasswordName.on('keypress', function(event) {
if (event.which === 13) { if (event.which === 13) {
_this._addAppPassword(); this._addAppPassword();
} }
}); });
@ -287,18 +272,14 @@
}, },
render: function () { render: function () {
_.each(this._views, function (view) { this._view.render();
view.render(); this._view.toggleLoading(false);
view.toggleLoading(false);
});
}, },
reload: function () { reload: function () {
var _this = this; var _this = this;
_.each(this._views, function (view) { this._view.toggleLoading(true);
view.toggleLoading(true);
});
var loadingTokens = this.collection.fetch(); var loadingTokens = this.collection.fetch();

View File

@ -235,7 +235,6 @@ if (\OC::$server->getAppManager()->isEnabledForUser('firstrunwizard')) {
$formsAndMore[]= ['anchor' => 'clientsbox', 'section-name' => $l->t('Sync clients')]; $formsAndMore[]= ['anchor' => 'clientsbox', 'section-name' => $l->t('Sync clients')];
} }
$formsAndMore[]= ['anchor' => 'sessions', 'section-name' => $l->t('Sessions')]; $formsAndMore[]= ['anchor' => 'sessions', 'section-name' => $l->t('Sessions')];
$formsAndMore[]= ['anchor' => 'apppasswords', 'section-name' => $l->t('App passwords')];
$forms=OC_App::getForms('personal'); $forms=OC_App::getForms('personal');

View File

@ -348,22 +348,6 @@ if($_['passwordChangeSupported']) {
<tbody class="token-list"> <tbody class="token-list">
</tbody> </tbody>
</table> </table>
</div>
<div id="apppasswords" class="section">
<h2><?php p($l->t('App passwords'));?></h2>
<p class="settings-hint"><?php p($l->t('Here you can generate individual passwords for apps so you dont have to give out your password. You can revoke them individually too.'));?></p>
<table class="icon-loading">
<thead class="hidden-when-empty">
<tr>
<th><?php p($l->t('Name'));?></th>
<th><?php p($l->t('Last activity'));?></th>
<th></th>
</tr>
</thead>
<tbody class="token-list">
</tbody>
</table>
<div id="app-password-form"> <div id="app-password-form">
<input id="app-password-name" type="text" placeholder="<?php p($l->t('App name')); ?>"> <input id="app-password-name" type="text" placeholder="<?php p($l->t('App name')); ?>">
<button id="add-app-password" class="button"><?php p($l->t('Create new app password')); ?></button> <button id="add-app-password" class="button"><?php p($l->t('Create new app password')); ?></button>