Combine sessions and app passwords view into one single view
Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
This commit is contained in:
parent
7ff205cf94
commit
c3cd07ec15
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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();
|
||||||
|
|
||||||
|
|
|
@ -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');
|
||||||
|
|
||||||
|
|
|
@ -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 don’t 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>
|
||||||
|
|
Loading…
Reference in New Issue