Added a checkbox to prevent saving "All users" by mistake and giving access to everyone when not wanted. Signed-off-by: Vincent Petry <vincent@nextcloud.com>tags/v26.0.0beta1
@@ -1 +1 @@ | |||
#files_external{margin-bottom:0px}#externalStorage{margin:15px 0 20px 0}#externalStorage tr.externalStorageLoading>td{text-align:center}#externalStorage td>input,#externalStorage td>select{width:100%}#externalStorage .popovermenu li>.menuitem{width:fit-content !important}#externalStorage td.status{display:table-cell;vertical-align:middle}#externalStorage td.status>span{display:inline-block;height:28px;width:28px;vertical-align:text-bottom;border-radius:50%;cursor:pointer}#externalStorage td.mountPoint,#externalStorage td.backend,#externalStorage td.authentication,#externalStorage td.configuration{min-width:160px;width:15%}#externalStorage td>img{padding-top:7px;opacity:.5}#externalStorage td>img:hover{padding-top:7px;cursor:pointer;opacity:1}#addMountPoint>td{border:none}#addMountPoint>td.applicable{visibility:hidden}#addMountPoint>td.hidden{visibility:hidden}#externalStorage td{height:50px}#externalStorage td.mountOptionsToggle,#externalStorage td.remove,#externalStorage td.save{position:relative;padding:0 !important;width:44px}#externalStorage td.mountOptionsToggle [class^=icon-],#externalStorage td.mountOptionsToggle [class*=" icon-"],#externalStorage td.remove [class^=icon-],#externalStorage td.remove [class*=" icon-"],#externalStorage td.save [class^=icon-],#externalStorage td.save [class*=" icon-"]{width:44px;height:44px;margin:3px;opacity:.5;padding:14px;vertical-align:text-bottom;cursor:pointer}#externalStorage td.mountOptionsToggle [class^=icon-]:hover,#externalStorage td.mountOptionsToggle [class*=" icon-"]:hover,#externalStorage td.remove [class^=icon-]:hover,#externalStorage td.remove [class*=" icon-"]:hover,#externalStorage td.save [class^=icon-]:hover,#externalStorage td.save [class*=" icon-"]:hover{opacity:1}#selectBackend{margin-left:-10px;width:150px}#externalStorage td.configuration,#externalStorage td.backend{white-space:normal}#externalStorage td.configuration>*{white-space:nowrap}#externalStorage td.configuration input.added{margin-right:6px}#externalStorage label>input[type=checkbox]{margin-right:3px}#externalStorage td.configuration label{width:100%;display:inline-flex;align-items:center}#externalStorage td.configuration input.disabled-success{background-color:rgba(134,255,110,.9)}#externalStorage td.applicable div.chzn-container{position:relative;top:3px}#externalStorage .select2-container.applicableUsers{width:100% !important}#userMountingBackends{padding-left:25px}.files-external-select2 .select2-results .select2-result-label{height:32px;padding:3px}.files-external-select2 .select2-results .select2-result-label>span{display:block;position:relative}.files-external-select2 .select2-results .select2-result-label .avatardiv{display:inline-block}.files-external-select2 .select2-results .select2-result-label .avatardiv+span{position:absolute;top:5px;margin-left:10px}.files-external-select2 .select2-results .select2-result-label .avatardiv[data-type=group]+span{vertical-align:top;top:6px;position:absolute;max-width:80%;left:30px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#externalStorage .select2-container .select2-search-choice{display:flex}#externalStorage .select2-container .select2-search-choice .select2-search-choice-close{display:block;left:auto;position:relative;width:20px}#externalStorage .mountOptionsToggle .dropdown{width:auto}.nav-icon-external-storage{background-image:var(--icon-external-dark)}/*# sourceMappingURL=settings.css.map */ | |||
#files_external{margin-bottom:0px}#externalStorage{margin:15px 0 20px 0}#externalStorage tr.externalStorageLoading>td{text-align:center}#externalStorage td>input:not(.applicableToAllUsers),#externalStorage td>select{width:100%}#externalStorage .popovermenu li>.menuitem{width:fit-content !important}#externalStorage td.status{display:table-cell;vertical-align:middle}#externalStorage td.status>span{display:inline-block;height:28px;width:28px;vertical-align:text-bottom;border-radius:50%;cursor:pointer}#externalStorage td.mountPoint,#externalStorage td.backend,#externalStorage td.authentication,#externalStorage td.configuration{min-width:160px;width:15%}#externalStorage td>img{padding-top:7px;opacity:.5}#externalStorage td>img:hover{padding-top:7px;cursor:pointer;opacity:1}#addMountPoint>td{border:none}#addMountPoint>td.applicable{visibility:hidden}#addMountPoint>td.hidden{visibility:hidden}#externalStorage td{height:50px}#externalStorage td.mountOptionsToggle,#externalStorage td.remove,#externalStorage td.save{position:relative;padding:0 !important;width:44px}#externalStorage td.mountOptionsToggle [class^=icon-],#externalStorage td.mountOptionsToggle [class*=" icon-"],#externalStorage td.remove [class^=icon-],#externalStorage td.remove [class*=" icon-"],#externalStorage td.save [class^=icon-],#externalStorage td.save [class*=" icon-"]{width:44px;height:44px;margin:3px;opacity:.5;padding:14px;vertical-align:text-bottom;cursor:pointer}#externalStorage td.mountOptionsToggle [class^=icon-]:hover,#externalStorage td.mountOptionsToggle [class*=" icon-"]:hover,#externalStorage td.remove [class^=icon-]:hover,#externalStorage td.remove [class*=" icon-"]:hover,#externalStorage td.save [class^=icon-]:hover,#externalStorage td.save [class*=" icon-"]:hover{opacity:1}#selectBackend{margin-left:-10px;width:150px}#externalStorage td.configuration,#externalStorage td.backend{white-space:normal}#externalStorage td.configuration>*{white-space:nowrap}#externalStorage td.configuration input.added{margin-right:6px}#externalStorage label>input[type=checkbox]{margin-right:3px}#externalStorage td.configuration label{width:100%;display:inline-flex;align-items:center}#externalStorage td.configuration input.disabled-success{background-color:rgba(134,255,110,.9)}#externalStorage td.applicable label{display:inline-flex;align-items:center}#externalStorage td.applicable div.chzn-container{position:relative;top:3px}#externalStorage .select2-container.applicableUsers{width:100% !important}#userMountingBackends{padding-left:25px}.files-external-select2 .select2-results .select2-result-label{height:32px;padding:3px}.files-external-select2 .select2-results .select2-result-label>span{display:block;position:relative}.files-external-select2 .select2-results .select2-result-label .avatardiv{display:inline-block}.files-external-select2 .select2-results .select2-result-label .avatardiv+span{position:absolute;top:5px;margin-left:10px}.files-external-select2 .select2-results .select2-result-label .avatardiv[data-type=group]+span{vertical-align:top;top:6px;position:absolute;max-width:80%;left:30px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#externalStorage .select2-container .select2-search-choice{display:flex}#externalStorage .select2-container .select2-search-choice .select2-search-choice-close{display:block;left:auto;position:relative;width:20px}#externalStorage .mountOptionsToggle .dropdown{width:auto}.nav-icon-external-storage{background-image:var(--icon-external-dark)}/*# sourceMappingURL=settings.css.map */ |
@@ -1 +1 @@ | |||
{"version":3,"sourceRoot":"","sources":["settings.scss"],"names":[],"mappings":"AAAA,gBACC,kBAGD,iBACC,qBAEA,8CACC,kBAKD,qDACC,WAIF,2CACI,6BAGJ,2BAEC,mBACA,sBAGD,gCACC,qBACA,YACA,WACA,2BACA,kBACA,eAGA,gIACC,gBACA,UAGF,mDACA,uEACA,8BACA,+CACA,2CAEA,oBACC,YACA,2FAGC,kBACA,qBACA,WACA,yRAEC,WACA,YACA,WACA,WACA,aACA,2BACA,eACA,6TACC,UAMJ,eACC,kBACA,YAGD,8DAEC,mBAED,oCACC,mBAGD,8CACC,iBAGD,4CACC,iBAGD,wCACC,WACA,oBACA,mBAGD,yDACC,sCAID,kDACC,kBACA,QAGD,oDACC,sBAGD,sBACC,kBAGD,+DACC,YACA,YAED,oEACC,cACA,kBAED,0EACC,qBAED,+EACC,kBACA,QACA,iBAED,gGACC,mBACA,QACA,kBACA,cACA,UACA,uBACA,mBACA,gBAGD,2DACC,aACA,wFACC,cACA,UACA,kBACA,WAIF,+CACC,WAGD,2BACC","file":"settings.css"} | |||
{"version":3,"sourceRoot":"","sources":["settings.scss"],"names":[],"mappings":"AAAA,gBACC,kBAGD,iBACC,qBAEA,8CACC,kBAKD,gFACC,WAIF,2CACI,6BAGJ,2BAEC,mBACA,sBAGD,gCACC,qBACA,YACA,WACA,2BACA,kBACA,eAGA,gIACC,gBACA,UAGF,mDACA,uEACA,8BACA,+CACA,2CAEA,oBACC,YACA,2FAGC,kBACA,qBACA,WACA,yRAEC,WACA,YACA,WACA,WACA,aACA,2BACA,eACA,6TACC,UAMJ,eACC,kBACA,YAGD,8DAEC,mBAED,oCACC,mBAGD,8CACC,iBAGD,4CACC,iBAGD,wCACC,WACA,oBACA,mBAGD,yDACC,sCAGD,qCACC,oBACA,mBAGD,kDACC,kBACA,QAGD,oDACC,sBAGD,sBACC,kBAGD,+DACC,YACA,YAED,oEACC,cACA,kBAED,0EACC,qBAED,+EACC,kBACA,QACA,iBAED,gGACC,mBACA,QACA,kBACA,cACA,UACA,uBACA,mBACA,gBAGD,2DACC,aACA,wFACC,cACA,UACA,kBACA,WAIF,+CACC,WAGD,2BACC","file":"settings.css"} |
@@ -11,7 +11,7 @@ | |||
} | |||
#externalStorage td { | |||
& > input, & > select { | |||
& > input:not(.applicableToAllUsers), & > select { | |||
width: 100%; | |||
} | |||
} | |||
@@ -101,6 +101,10 @@ | |||
background-color: rgba(134, 255, 110, 0.9); | |||
} | |||
#externalStorage td.applicable label { | |||
display: inline-flex; | |||
align-items: center; | |||
} | |||
#externalStorage td.applicable div.chzn-container { | |||
position: relative; |
@@ -24,6 +24,28 @@ function getSelection($row) { | |||
return values; | |||
} | |||
function getSelectedApplicable($row) { | |||
var users = []; | |||
var groups = []; | |||
var multiselect = getSelection($row); | |||
$.each(multiselect, function(index, value) { | |||
// FIXME: don't rely on string parts to detect groups... | |||
var pos = (value.indexOf)?value.indexOf('(group)'): -1; | |||
if (pos !== -1) { | |||
groups.push(value.substr(0, pos)); | |||
} else { | |||
users.push(value); | |||
} | |||
}); | |||
// FIXME: this should be done in the multiselect change event instead | |||
$row.find('.applicable') | |||
.data('applicable-groups', groups) | |||
.data('applicable-users', users); | |||
return { users, groups }; | |||
} | |||
function highlightBorder($element, highlight) { | |||
$element.toggleClass('warning-input', highlight); | |||
return highlight; | |||
@@ -56,7 +78,7 @@ function highlightInput($input) { | |||
* @param {Array<Object>} array of jQuery elements | |||
* @param {number} userListLimit page size for result list | |||
*/ | |||
function addSelect2 ($elements, userListLimit) { | |||
function initApplicableUsersMultiselect($elements, userListLimit) { | |||
var escapeHTML = function (text) { | |||
return text.toString() | |||
.split('&').join('&') | |||
@@ -68,8 +90,8 @@ function addSelect2 ($elements, userListLimit) { | |||
if (!$elements.length) { | |||
return; | |||
} | |||
$elements.select2({ | |||
placeholder: t('files_external', 'All users. Type to select user or group.'), | |||
return $elements.select2({ | |||
placeholder: t('files_external', 'Type to select user or group.'), | |||
allowClear: true, | |||
multiple: true, | |||
toggleSelect: true, | |||
@@ -167,6 +189,8 @@ function addSelect2 ($elements, userListLimit) { | |||
$div.avatar($div.data('name'),32); | |||
} | |||
}); | |||
}).on('change', function(event) { | |||
highlightBorder($(event.target).closest('.applicableUsersContainer').find('.select2-choices'), !event.val.length); | |||
}); | |||
} | |||
@@ -721,6 +745,8 @@ MountConfigListView.prototype = _.extend({ | |||
this.$el.on('change', '.selectBackend', _.bind(this._onSelectBackend, this)); | |||
this.$el.on('change', '.selectAuthMechanism', _.bind(this._onSelectAuthMechanism, this)); | |||
this.$el.on('change', '.applicableToAllUsers', _.bind(this._onChangeApplicableToAllUsers, this)); | |||
}, | |||
_onChange: function(event) { | |||
@@ -746,6 +772,7 @@ MountConfigListView.prototype = _.extend({ | |||
var onCompletion = jQuery.Deferred(); | |||
$tr = this.newStorage(storageConfig, onCompletion); | |||
$tr.find('.applicableToAllUsers').prop('checked', false).trigger('change'); | |||
onCompletion.resolve(); | |||
$tr.find('td.configuration').children().not('[type=hidden]').first().focus(); | |||
@@ -764,6 +791,19 @@ MountConfigListView.prototype = _.extend({ | |||
this.saveStorageConfig($tr); | |||
}, | |||
_onChangeApplicableToAllUsers: function(event) { | |||
var $target = $(event.target); | |||
var $tr = $target.closest('tr'); | |||
var checked = $target.is(':checked'); | |||
$tr.find('.applicableUsersContainer').toggleClass('hidden', checked); | |||
if (!checked) { | |||
$tr.find('.applicableUsers').select2('val', '', true); | |||
} | |||
this.saveStorageConfig($tr); | |||
}, | |||
/** | |||
* Configure the storage config with a new authentication mechanism | |||
* | |||
@@ -818,7 +858,7 @@ MountConfigListView.prototype = _.extend({ | |||
$tr.removeAttr('id'); | |||
$tr.find('select#selectBackend'); | |||
if (!deferAppend) { | |||
addSelect2($tr.find('.applicableUsers'), this._userListLimit); | |||
initApplicableUsersMultiselect($tr.find('.applicableUsers'), this._userListLimit); | |||
} | |||
if (storageConfig.id) { | |||
@@ -890,7 +930,14 @@ MountConfigListView.prototype = _.extend({ | |||
}) | |||
); | |||
} | |||
$tr.find('.applicableUsers').val(applicable).trigger('change'); | |||
if (applicable.length) { | |||
$tr.find('.applicableUsers').val(applicable).trigger('change') | |||
$tr.find('.applicableUsersContainer').removeClass('hidden'); | |||
} else { | |||
// applicable to all | |||
$tr.find('.applicableUsersContainer').addClass('hidden'); | |||
} | |||
$tr.find('.applicableToAllUsers').prop('checked', !applicable.length); | |||
var priorityEl = $('<input type="hidden" class="priority" value="' + backend.priority + '" />'); | |||
$tr.append(priorityEl); | |||
@@ -967,7 +1014,7 @@ MountConfigListView.prototype = _.extend({ | |||
} | |||
$rows = $rows.add($tr); | |||
}); | |||
addSelect2(self.$el.find('.applicableUsers'), this._userListLimit); | |||
initApplicableUsersMultiselect(self.$el.find('.applicableUsers'), this._userListLimit); | |||
self.$el.find('tr#addMountPoint').before($rows); | |||
var mainForm = $('#files_external'); | |||
if (result.length === 0 && mainForm.attr('data-can-create') === 'false') { | |||
@@ -1007,7 +1054,7 @@ MountConfigListView.prototype = _.extend({ | |||
} | |||
$rows = $rows.add($tr); | |||
}); | |||
addSelect2($rows.find('.applicableUsers'), this._userListLimit); | |||
initApplicableUsersMultiselect($rows.find('.applicableUsers'), this._userListLimit); | |||
self.$el.find('tr#addMountPoint').before($rows); | |||
onCompletion.resolve(); | |||
onLoaded2.resolve(); | |||
@@ -1118,24 +1165,25 @@ MountConfigListView.prototype = _.extend({ | |||
// gather selected users and groups | |||
if (!this._isPersonal) { | |||
var groups = []; | |||
var users = []; | |||
var multiselect = getSelection($tr); | |||
$.each(multiselect, function(index, value) { | |||
var pos = (value.indexOf)?value.indexOf('(group)'): -1; | |||
if (pos !== -1) { | |||
groups.push(value.substr(0, pos)); | |||
} else { | |||
users.push(value); | |||
} | |||
}); | |||
// FIXME: this should be done in the multiselect change event instead | |||
$tr.find('.applicable') | |||
.data('applicable-groups', groups) | |||
.data('applicable-users', users); | |||
var multiselect = getSelectedApplicable($tr); | |||
var users = multiselect.users || []; | |||
var groups = multiselect.groups || []; | |||
var isApplicableToAllUsers = $tr.find('.applicableToAllUsers').is(':checked'); | |||
if (isApplicableToAllUsers) { | |||
storage.applicableUsers = []; | |||
storage.applicableGroups = []; | |||
} else { | |||
storage.applicableUsers = users; | |||
storage.applicableGroups = groups; | |||
storage.applicableUsers = users; | |||
storage.applicableGroups = groups; | |||
if (!storage.applicableUsers.length && !storage.applicableGroups.length) { | |||
if (!storage.errors) { | |||
storage.errors = {}; | |||
} | |||
storage.errors['requiredApplicable'] = true; | |||
} | |||
} | |||
storage.priority = parseInt($tr.find('input.priority').val() || '100', 10); | |||
} |
@@ -171,7 +171,10 @@ $canCreateMounts = $_['visibilityType'] === BackendService::VISIBILITY_ADMIN || | |||
<td class="configuration"></td> | |||
<?php if ($_['visibilityType'] === BackendService::VISIBILITY_ADMIN): ?> | |||
<td class="applicable" align="right"> | |||
<input type="hidden" class="applicableUsers" style="width:20em;" value="" /> | |||
<label><input type="checkbox" class="applicableToAllUsers" checked="" /><?php p($l->t('All users')); ?></label> | |||
<div class="applicableUsersContainer"> | |||
<input type="hidden" class="applicableUsers" style="width:20em;" value="" /> | |||
</div> | |||
</td> | |||
<?php endif; ?> | |||
<td class="mountOptionsToggle hidden"> |
@@ -35,12 +35,13 @@ describe('OCA.Files_External.Settings tests', function() { | |||
beforeEach(function() { | |||
clock = sinon.useFakeTimers(); | |||
select2ApplicableUsers = []; | |||
select2Stub = sinon.stub($.fn, 'select2').callsFake(function(args) { | |||
if (args === 'val') { | |||
return select2ApplicableUsers; | |||
} | |||
return { | |||
on: function() {} | |||
on: function() { return this; } | |||
}; | |||
}); | |||
@@ -63,6 +64,7 @@ describe('OCA.Files_External.Settings tests', function() { | |||
'<td class="authentication"></td>' + | |||
'<td class="configuration"></td>' + | |||
'<td class="applicable">' + | |||
'<input type="checkbox" class="applicableToAllUsers">' + | |||
'<input type="hidden" class="applicableUsers">' + | |||
'</td>' + | |||
'<td class="mountOptionsToggle">'+ | |||
@@ -172,6 +174,7 @@ describe('OCA.Files_External.Settings tests', function() { | |||
function selectBackend(backendName) { | |||
view.$el.find('.selectBackend:first').val(backendName).trigger('change'); | |||
view.$el.find('.applicableToAllUsers').prop('checked', true).trigger('change'); | |||
} | |||
beforeEach(function() { | |||
@@ -255,6 +258,59 @@ describe('OCA.Files_External.Settings tests', function() { | |||
// TODO: respond and check data-id | |||
}); | |||
it('saves storage with applicable users', function() { | |||
var $field1 = $tr.find('input[data-parameter=field1]'); | |||
expect($field1.length).toEqual(1); | |||
$field1.val('test'); | |||
$field1.trigger(new $.Event('keyup', {keyCode: 97})); | |||
$tr.find('.applicableToAllUsers').prop('checked', false).trigger('change'); | |||
select2ApplicableUsers = ['user1', 'user2', 'group1(group)', 'group2(group)']; | |||
var $saveButton = $tr.find('td.save .icon-checkmark'); | |||
$saveButton.click(); | |||
expect(fakeServer.requests.length).toEqual(1); | |||
var request = fakeServer.requests[0]; | |||
expect(request.url).toEqual(OC.getRootPath() + '/index.php/apps/files_external/globalstorages'); | |||
expect(JSON.parse(request.requestBody)).toEqual({ | |||
backend: '\\OC\\TestBackend', | |||
authMechanism: 'mechanism1', | |||
backendOptions: { | |||
'field1': 'test', | |||
'field2': '' | |||
}, | |||
mountPoint: 'TestBackend', | |||
priority: 11, | |||
applicableUsers: ['user1', 'user2'], | |||
applicableGroups: ['group1', 'group2'], | |||
mountOptions: { | |||
encrypt: true, | |||
previews: true, | |||
enable_sharing: false, | |||
filesystem_check_changes: 1, | |||
encoding_compatibility: false, | |||
readonly: false, | |||
}, | |||
testOnly: true | |||
}); | |||
// TODO: respond and check data-id | |||
}); | |||
it('does not saves storage without applicable users and unchecked all users checkbox', function() { | |||
var $field1 = $tr.find('input[data-parameter=field1]'); | |||
expect($field1.length).toEqual(1); | |||
$field1.val('test'); | |||
$field1.trigger(new $.Event('keyup', {keyCode: 97})); | |||
$tr.find('.applicableToAllUsers').prop('checked', false).trigger('change'); | |||
var $saveButton = $tr.find('td.save .icon-checkmark'); | |||
$saveButton.click(); | |||
expect(fakeServer.requests.length).toEqual(0); | |||
}); | |||
it('saves storage after closing mount options popovermenu', function() { | |||
$tr.find('.mountOptionsToggle .icon-more').click(); | |||
$tr.find('[name=previews]').trigger(new $.Event('keyup', {keyCode: 97})); | |||
@@ -279,6 +335,16 @@ describe('OCA.Files_External.Settings tests', function() { | |||
}); | |||
it('lists missing fields in storage errors', function() { | |||
$tr.find('.applicableToAllUsers').prop('checked', false).trigger('change'); | |||
var storage = view.getStorageConfig($tr); | |||
expect(storage.errors).toEqual({ | |||
backendOptions: ['field_text', 'field_password'], | |||
requiredApplicable: true, | |||
}); | |||
}); | |||
it('does not list applicable when all users checkbox is ticked', function() { | |||
var storage = view.getStorageConfig($tr); | |||
expect(storage.errors).toEqual({ | |||
@@ -399,9 +465,6 @@ describe('OCA.Files_External.Settings tests', function() { | |||
}); | |||
}); | |||
}); | |||
describe('applicable user list', function() { | |||
// TODO: test select2 retrieval logic | |||
}); | |||
describe('allow user mounts section', function() { | |||
// TODO: test allowUserMounting section | |||
}); |