Merge pull request #18999 from owncloud/ext-config-listadmin

Improvements to external storages list rendering

9 files changed, 377 insertions, 220 deletions

diff --git a/apps/files_external/appinfo/routes.php b/apps/files_external/appinfo/routes.php
index 39ded1dc2ec..e66c010a8cf 100644
--- a/apps/files_external/appinfo/routes.php
+++ b/apps/files_external/appinfo/routes.php
@@ -36,6 +36,7 @@ namespace OCA\Files_External\AppInfo;
 		'resources' => array(
 			'global_storages' => array('url' => '/globalstorages'),
 			'user_storages' => array('url' => '/userstorages'),
+			'user_global_storages' => array('url' => '/userglobalstorages'),
 		),
 		'routes' => array(
 			array(
diff --git a/apps/files_external/controller/storagescontroller.php b/apps/files_external/controller/storagescontroller.php
index 048f3588ed7..c66bd902d8d 100644
--- a/apps/files_external/controller/storagescontroller.php
+++ b/apps/files_external/controller/storagescontroller.php
@@ -256,6 +256,20 @@ abstract class StoragesController extends Controller {
 	}
 
 	/**
+	 * Get all storage entries
+	 *
+	 * @return DataResponse
+	 */
+	public function index() {
+		$storages = $this->service->getAllStorages();
+
+		return new DataResponse(
+			$storages,
+			Http::STATUS_OK
+		);
+	}
+
+	/**
 	 * Get an external storage entry.
 	 *
 	 * @param int $id storage id
diff --git a/apps/files_external/controller/userglobalstoragescontroller.php b/apps/files_external/controller/userglobalstoragescontroller.php
new file mode 100644
index 00000000000..c6f777763e8
--- /dev/null
+++ b/apps/files_external/controller/userglobalstoragescontroller.php
@@ -0,0 +1,121 @@
+<?php
+/**
+ * @author Robin McCorkell <rmccorkell@owncloud.com>
+ *
+ * @copyright Copyright (c) 2015, ownCloud, Inc.
+ * @license AGPL-3.0
+ *
+ * This code is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License, version 3,
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>
+ *
+ */
+
+namespace OCA\Files_External\Controller;
+
+use \OCP\IRequest;
+use \OCP\IL10N;
+use \OCP\AppFramework\Http\DataResponse;
+use \OCP\AppFramework\Controller;
+use \OCP\AppFramework\Http;
+use \OCA\Files_external\Service\UserGlobalStoragesService;
+use \OCA\Files_external\NotFoundException;
+use \OCA\Files_external\Lib\StorageConfig;
+use \OCA\Files_External\Lib\Backend\Backend;
+
+/**
+ * User global storages controller
+ */
+class UserGlobalStoragesController extends StoragesController {
+	/**
+	 * Creates a new user global storages controller.
+	 *
+	 * @param string $AppName application name
+	 * @param IRequest $request request object
+	 * @param IL10N $l10n l10n service
+	 * @param UserGlobalStoragesService $userGlobalStoragesService storage service
+	 */
+	public function __construct(
+		$AppName,
+		IRequest $request,
+		IL10N $l10n,
+		UserGlobalStoragesService $userGlobalStoragesService
+	) {
+		parent::__construct(
+			$AppName,
+			$request,
+			$l10n,
+			$userGlobalStoragesService
+		);
+	}
+
+	/**
+	 * Get all storage entries
+	 *
+	 * @return DataResponse
+	 *
+	 * @NoAdminRequired
+	 */
+	public function index() {
+		$storages = $this->service->getUniqueStorages();
+
+		// remove configuration data, this must be kept private
+		foreach ($storages as $storage) {
+			$this->sanitizeStorage($storage);
+		}
+
+		return new DataResponse(
+			$storages,
+			Http::STATUS_OK
+		);
+	}
+
+	/**
+	 * Get an external storage entry.
+	 *
+	 * @param int $id storage id
+	 * @return DataResponse
+	 *
+	 * @NoAdminRequired
+	 */
+	public function show($id) {
+		try {
+			$storage = $this->service->getStorage($id);
+
+			$this->updateStorageStatus($storage);
+		} catch (NotFoundException $e) {
+			return new DataResponse(
+				[
+					'message' => (string)$this->l10n->t('Storage with id "%i" not found', array($id))
+				],
+				Http::STATUS_NOT_FOUND
+			);
+		}
+
+		$this->sanitizeStorage($storage);
+
+		return new DataResponse(
+			$storage,
+			Http::STATUS_OK
+		);
+	}
+
+	/**
+	 * Remove sensitive data from a StorageConfig before returning it to the user
+	 *
+	 * @param StorageConfig $storage
+	 */
+	protected function sanitizeStorage(StorageConfig $storage) {
+		$storage->setBackendOptions([]);
+		$storage->setMountOptions([]);
+	}
+
+}
diff --git a/apps/files_external/js/public_key.js b/apps/files_external/js/public_key.js
index a8546067452..5f9658381f0 100644
--- a/apps/files_external/js/public_key.js
+++ b/apps/files_external/js/public_key.js
@@ -1,10 +1,16 @@
 $(document).ready(function() {
 
-	OCA.External.Settings.mountConfig.whenSelectAuthMechanism(function($tr, authMechanism, scheme) {
+	OCA.External.Settings.mountConfig.whenSelectAuthMechanism(function($tr, authMechanism, scheme, onCompletion) {
 		if (scheme === 'publickey') {
 			var config = $tr.find('.configuration');
 			if ($(config).find('[name="public_key_generate"]').length === 0) {
 				setupTableRow($tr, config);
+				onCompletion.then(function() {
+					// If there's no private key, build one
+					if (0 === $(config).find('[data-parameter="private_key"]').val().length) {
+						generateKeys($tr);
+					}
+				});
 			}
 		}
 	});
@@ -22,10 +28,6 @@ $(document).ready(function() {
 			.attr('value', t('files_external', 'Generate keys'))
 			.attr('name', 'public_key_generate')
 		);
-		// If there's no private key, build one
-		if (0 === $(config).find('[data-parameter="private_key"]').val().length) {
-			generateKeys(tr);
-		}
 	}
 
 	function generateKeys(tr) {
@@ -33,7 +35,7 @@ $(document).ready(function() {
 
 		$.post(OC.filePath('files_external', 'ajax', 'public_key.php'), {}, function(result) {
 			if (result && result.status === 'success') {
-				$(config).find('[data-parameter="public_key"]').val(result.data.public_key);
+				$(config).find('[data-parameter="public_key"]').val(result.data.public_key).keyup();
 				$(config).find('[data-parameter="private_key"]').val(result.data.private_key);
 				OCA.External.Settings.mountConfig.saveStorageConfig(tr, function() {
 					// Nothing to do
diff --git a/apps/files_external/js/settings.js b/apps/files_external/js/settings.js
index a839f396b9b..f712ecf4328 100644
--- a/apps/files_external/js/settings.js
+++ b/apps/files_external/js/settings.js
@@ -623,36 +623,7 @@ MountConfigListView.prototype = _.extend({
 		this._allBackends = this.$el.find('.selectBackend').data('configurations');
 		this._allAuthMechanisms = this.$el.find('#addMountPoint .authentication').data('mechanisms');
 
-		//initialize hidden input field with list of users and groups
-		this.$el.find('tr:not(#addMountPoint)').each(function(i,tr) {
-			var $tr = $(tr);
-			var $applicable = $tr.find('.applicable');
-			if ($applicable.length > 0) {
-				var groups = $applicable.data('applicable-groups');
-				var groupsId = [];
-				$.each(groups, function () {
-					groupsId.push(this + '(group)');
-				});
-				var users = $applicable.data('applicable-users');
-				if (users.indexOf('all') > -1 || users === '') {
-					$tr.find('.applicableUsers').val('');
-				} else {
-					$tr.find('.applicableUsers').val(groupsId.concat(users).join(','));
-				}
-			}
-		});
-
-		addSelect2(this.$el.find('tr:not(#addMountPoint) .applicableUsers'), this._userListLimit);
-		this.$el.tooltip({
-			selector: '.status span',
-			container: 'body'
-		});
-
 		this._initEvents();
-
-		this.$el.find('tbody tr:not(#addMountPoint)').each(function(i, tr) {
-			self.recheckStorageConfig($(tr));
-		});
 	},
 
 	/**
@@ -661,7 +632,7 @@ MountConfigListView.prototype = _.extend({
 	 */
 	whenSelectBackend: function(callback) {
 		this.$el.find('tbody tr:not(#addMountPoint)').each(function(i, tr) {
-			var backend = $(tr).find('.backend').data('class');
+			var backend = $(tr).find('.backend').data('identifier');
 			callback($(tr), backend);
 		});
 		this.on('selectBackend', callback);
@@ -725,65 +696,41 @@ MountConfigListView.prototype = _.extend({
 
 	_onSelectBackend: function(event) {
 		var $target = $(event.target);
-		var $el = this.$el;
 		var $tr = $target.closest('tr');
-		$el.find('tbody').append($tr.clone());
-		$el.find('tbody tr').last().find('.mountPoint input').val('');
-		$tr.data('constructing', true);
-		var selected = $target.find('option:selected').text();
-		var backend = $target.val();
-		$tr.find('.backend').text(selected);
-		if ($tr.find('.mountPoint input').val() === '') {
-			$tr.find('.mountPoint input').val(this._suggestMountPoint(selected));
-		}
-		$tr.addClass(backend);
-		$tr.find('.backend').data('class', backend);
-		var backendConfiguration = this._allBackends[backend];
 
-		var selectAuthMechanism = $('<select class="selectAuthMechanism"></select>');
-		$.each(this._allAuthMechanisms, function(authClass, authMechanism) {
-			if (backendConfiguration['authSchemes'][authMechanism['scheme']]) {
-				selectAuthMechanism.append(
-					$('<option value="'+authClass+'" data-scheme="'+authMechanism['scheme']+'">'+authMechanism['name']+'</option>')
-				);
-			}
-		});
-		$tr.find('td.authentication').append(selectAuthMechanism);
+		var storageConfig = new this._storageConfigClass();
+		storageConfig.mountPoint = $tr.find('.mountPoint input').val();
+		storageConfig.backend = $target.val();
+		$tr.find('.mountPoint input').val('');
 
-		var $td = $tr.find('td.configuration');
-		$.each(backendConfiguration['configuration'], _.partial(this.writeParameterInput, $td));
+		var onCompletion = jQuery.Deferred();
+		$tr = this.newStorage(storageConfig, onCompletion);
+		onCompletion.resolve();
 
-		this.trigger('selectBackend', $tr, backend);
-
-		selectAuthMechanism.trigger('change'); // generate configuration parameters for auth mechanism
-
-		var priorityEl = $('<input type="hidden" class="priority" value="' + backendConfiguration['priority'] + '" />');
-		$tr.append(priorityEl);
-		$td.children().not('[type=hidden]').first().focus();
-
-		// FIXME default backend mount options
-		$tr.find('input.mountOptions').val(JSON.stringify({
-			'encrypt': true,
-			'previews': true,
-			'filesystem_check_changes': 1
-		}));
-
-		$tr.find('td').last().attr('class', 'remove');
-		$tr.find('td.mountOptionsToggle').removeClass('hidden');
-		$tr.find('td').last().removeAttr('style');
-		$tr.removeAttr('id');
-		$target.remove();
-		addSelect2($tr.find('.applicableUsers'), this._userListLimit);
-
-		$tr.removeData('constructing');
+		$tr.find('td.configuration').children().not('[type=hidden]').first().focus();
 		this.saveStorageConfig($tr);
 	},
 
 	_onSelectAuthMechanism: function(event) {
 		var $target = $(event.target);
 		var $tr = $target.closest('tr');
-
 		var authMechanism = $target.val();
+
+		var onCompletion = jQuery.Deferred();
+		this.configureAuthMechanism($tr, authMechanism, onCompletion);
+		onCompletion.resolve();
+
+		this.saveStorageConfig($tr);
+	},
+
+	/**
+	 * Configure the storage config with a new authentication mechanism
+	 *
+	 * @param {jQuery} $tr config row
+	 * @param {string} authMechanism
+	 * @param {jQuery.Deferred} onCompletion
+	 */
+	configureAuthMechanism: function($tr, authMechanism, onCompletion) {
 		var authMechanismConfiguration = this._allAuthMechanisms[authMechanism];
 		var $td = $tr.find('td.configuration');
 		$td.find('.auth-param').remove();
@@ -793,15 +740,172 @@ MountConfigListView.prototype = _.extend({
 		));
 
 		this.trigger('selectAuthMechanism',
-			$tr, authMechanism, authMechanismConfiguration['scheme']
+			$tr, authMechanism, authMechanismConfiguration['scheme'], onCompletion
 		);
+	},
+
+	/**
+	 * Create a config row for a new storage
+	 *
+	 * @param {StorageConfig} storageConfig storage config to pull values from
+	 * @param {jQuery.Deferred} onCompletion
+	 * @return {jQuery} created row
+	 */
+	newStorage: function(storageConfig, onCompletion) {
+		var mountPoint = storageConfig.mountPoint;
+		var backend = this._allBackends[storageConfig.backend];
+
+		// FIXME: Replace with a proper Handlebar template
+		var $tr = this.$el.find('tr#addMountPoint');
+		this.$el.find('tbody').append($tr.clone());
+
+		$tr.find('td').last().attr('class', 'remove');
+		$tr.find('td.mountOptionsToggle').removeClass('hidden');
+		$tr.find('td').last().removeAttr('style');
+		$tr.removeAttr('id');
+		$tr.find('select#selectBackend');
+		addSelect2($tr.find('.applicableUsers'), this._userListLimit);
+
+		if (storageConfig.id) {
+			$tr.data('id', storageConfig.id);
+		}
+
+		$tr.find('.backend').text(backend.name);
+		if (mountPoint === '') {
+			mountPoint = this._suggestMountPoint(backend.name);
+		}
+		$tr.find('.mountPoint input').val(mountPoint);
+		$tr.addClass(backend.identifier);
+		$tr.find('.backend').data('identifier', backend.identifier);
+
+		var selectAuthMechanism = $('<select class="selectAuthMechanism"></select>');
+		$.each(this._allAuthMechanisms, function(authIdentifier, authMechanism) {
+			if (backend.authSchemes[authMechanism.scheme]) {
+				selectAuthMechanism.append(
+					$('<option value="'+authMechanism.identifier+'" data-scheme="'+authMechanism.scheme+'">'+authMechanism.name+'</option>')
+				);
+			}
+		});
+		if (storageConfig.authMechanism) {
+			selectAuthMechanism.val(storageConfig.authMechanism);
+		} else {
+			storageConfig.authMechanism = selectAuthMechanism.val();
+		}
+		$tr.find('td.authentication').append(selectAuthMechanism);
 
-		if ($tr.data('constructing') !== true) {
-			// row is ready, trigger recheck
-			this.saveStorageConfig($tr);
+		var $td = $tr.find('td.configuration');
+		$.each(backend.configuration, _.partial(this.writeParameterInput, $td));
+
+		this.trigger('selectBackend', $tr, backend.identifier, onCompletion);
+		this.configureAuthMechanism($tr, storageConfig.authMechanism, onCompletion);
+
+		if (storageConfig.backendOptions) {
+			$td.children().each(function() {
+				var input = $(this);
+				var val = storageConfig.backendOptions[input.data('parameter')];
+				if (val !== undefined) {
+					input.val(storageConfig.backendOptions[input.data('parameter')]);
+					highlightInput(input);
+				}
+			});
+		}
+
+		var applicable = [];
+		if (storageConfig.applicableUsers) {
+			applicable = applicable.concat(storageConfig.applicableUsers);
+		}
+		if (storageConfig.applicableGroups) {
+			applicable = applicable.concat(
+				_.map(storageConfig.applicableGroups, function(group) {
+					return group+'(group)';
+				})
+			);
 		}
+		$tr.find('.applicableUsers').val(applicable).trigger('change');
+
+		var priorityEl = $('<input type="hidden" class="priority" value="' + backend.priority + '" />');
+		$tr.append(priorityEl);
+
+		if (storageConfig.mountOptions) {
+			$tr.find('input.mountOptions').val(JSON.stringify(storageConfig.mountOptions));
+		} else {
+			// FIXME default backend mount options
+			$tr.find('input.mountOptions').val(JSON.stringify({
+				'encrypt': true,
+				'previews': true,
+				'filesystem_check_changes': 1
+			}));
+		}
+
+		return $tr;
 	},
 
+	/**
+	 * Load storages into config rows
+	 */
+	loadStorages: function() {
+		var self = this;
+
+		if (this._isPersonal) {
+			// load userglobal storages
+			$.ajax({
+				type: 'GET',
+				url: OC.generateUrl('apps/files_external/userglobalstorages'),
+				contentType: 'application/json',
+				success: function(result) {
+					var onCompletion = jQuery.Deferred();
+					$.each(result, function(i, storageParams) {
+						storageParams.mountPoint = storageParams.mountPoint.substr(1); // trim leading slash
+						var storageConfig = new self._storageConfigClass();
+						_.extend(storageConfig, storageParams);
+						var $tr = self.newStorage(storageConfig, onCompletion);
+
+						// userglobal storages must be at the top of the list
+						$tr.detach();
+						self.$el.prepend($tr);
+
+						var $authentication = $tr.find('.authentication');
+						$authentication.text($authentication.find('select option:selected').text());
+
+						// userglobal storages do not expose configuration data
+						$tr.find('.configuration').text(t('files_external', 'Admin defined'));
+
+						// disable any other inputs
+						$tr.find('.mountOptionsToggle, .remove').empty();
+						$tr.find('input, select, button').attr('disabled', 'disabled');
+					});
+					onCompletion.resolve();
+				}
+			});
+		}
+
+		var url = this._storageConfigClass.prototype._url;
+
+		$.ajax({
+			type: 'GET',
+			url: OC.generateUrl(url),
+			contentType: 'application/json',
+			success: function(result) {
+				var onCompletion = jQuery.Deferred();
+				$.each(result, function(i, storageParams) {
+					storageParams.mountPoint = storageParams.mountPoint.substr(1); // trim leading slash
+					var storageConfig = new self._storageConfigClass();
+					_.extend(storageConfig, storageParams);
+					var $tr = self.newStorage(storageConfig, onCompletion);
+					self.recheckStorageConfig($tr);
+				});
+				onCompletion.resolve();
+			}
+		});
+	},
+
+	/**
+	 * @param {jQuery} $td
+	 * @param {string} parameter
+	 * @param {string} placeholder
+	 * @param {Array} classes
+	 * @return {jQuery} newly created input
+	 */
 	writeParameterInput: function($td, parameter, placeholder, classes) {
 		classes = $.isArray(classes) ? classes : [];
 		classes.push('added');
@@ -822,6 +926,7 @@ MountConfigListView.prototype = _.extend({
 		}
 		highlightInput(newElement);
 		$td.append(newElement);
+		return newElement;
 	},
 
 	/**
@@ -831,14 +936,14 @@ MountConfigListView.prototype = _.extend({
 	 * @return {OCA.External.StorageConfig} storage model instance
 	 */
 	getStorageConfig: function($tr) {
-		var storageId = parseInt($tr.attr('data-id'), 10);
+		var storageId = $tr.data('id');
 		if (!storageId) {
 			// new entry
 			storageId = null;
 		}
 		var storage = new this._storageConfigClass(storageId);
 		storage.mountPoint = $tr.find('.mountPoint input').val();
-		storage.backend = $tr.find('.backend').data('class');
+		storage.backend = $tr.find('.backend').data('identifier');
 		storage.authMechanism = $tr.find('.selectAuthMechanism').val();
 
 		var classOptions = {};
@@ -951,8 +1056,8 @@ MountConfigListView.prototype = _.extend({
 				if (concurrentTimer === undefined
 					|| $tr.data('save-timer') === concurrentTimer
 				) {
-					self.updateStatus($tr, result.status, result.statusMessage);
-					$tr.attr('data-id', result.id);
+					self.updateStatus($tr, result.status);
+					$tr.data('id', result.id);
 
 					if (_.isFunction(callback)) {
 						callback(storage);
@@ -1054,12 +1159,12 @@ MountConfigListView.prototype = _.extend({
 		}
 		return defaultMountPoint + append;
 	},
-	
+
 	/**
 	 * Toggles the mount options dropdown
 	 *
 	 * @param {Object} $tr configuration row
-	 */	
+	 */
 	_showMountOptionsDropdown: function($tr) {
 		if (this._preventNextDropdown) {
 			// prevented because the click was on the toggle
@@ -1106,6 +1211,7 @@ $(document).ready(function() {
 	var mountConfigListView = new MountConfigListView($('#externalStorage'), {
 		encryptionEnabled: encryptionEnabled
 	});
+	mountConfigListView.loadStorages();
 
 	$('#sslCertificate').on('click', 'td.remove>img', function() {
 		var $tr = $(this).closest('tr');
diff --git a/apps/files_external/personal.php b/apps/files_external/personal.php
index df15c3bd258..05196a58905 100644
--- a/apps/files_external/personal.php
+++ b/apps/files_external/personal.php
@@ -32,31 +32,11 @@ $appContainer = \OC_Mount_Config::$app->getContainer();
 $backendService = $appContainer->query('OCA\Files_External\Service\BackendService');
 $userStoragesService = $appContainer->query('OCA\Files_external\Service\UserStoragesService');
 
-OCP\Util::addScript('files_external', 'settings');
-OCP\Util::addStyle('files_external', 'settings');
-
-$backends = array_filter($backendService->getAvailableBackends(), function($backend) {
-	return $backend->isVisibleFor(BackendService::VISIBILITY_PERSONAL);
-});
-$authMechanisms = array_filter($backendService->getAuthMechanisms(), function($authMechanism) {
-	return $authMechanism->isVisibleFor(BackendService::VISIBILITY_PERSONAL);
-});
-foreach ($backends as $backend) {
-	if ($backend->getCustomJs()) {
-		\OCP\Util::addScript('files_external', $backend->getCustomJs());
-	}
-}
-foreach ($authMechanisms as $authMechanism) {
-	if ($authMechanism->getCustomJs()) {
-		\OCP\Util::addScript('files_external', $authMechanism->getCustomJs());
-	}
-}
-
 $tmpl = new OCP\Template('files_external', 'settings');
 $tmpl->assign('encryptionEnabled', \OC::$server->getEncryptionManager()->isEnabled());
-$tmpl->assign('isAdminPage', false);
+$tmpl->assign('visibilityType', BackendService::VISIBILITY_PERSONAL);
 $tmpl->assign('storages', $userStoragesService->getStorages());
 $tmpl->assign('dependencies', OC_Mount_Config::dependencyMessage($backendService->getBackends()));
-$tmpl->assign('backends', $backends);
-$tmpl->assign('authMechanisms', $authMechanisms);
+$tmpl->assign('backends', $backendService->getAvailableBackends());
+$tmpl->assign('authMechanisms', $backendService->getAuthMechanisms());
 return $tmpl->fetchPage();
diff --git a/apps/files_external/settings.php b/apps/files_external/settings.php
index 03ed363bdb2..50d47d667fd 100644
--- a/apps/files_external/settings.php
+++ b/apps/files_external/settings.php
@@ -35,40 +35,15 @@ $appContainer = \OC_Mount_Config::$app->getContainer();
 $backendService = $appContainer->query('OCA\Files_External\Service\BackendService');
 $globalStoragesService = $appContainer->query('OCA\Files_external\Service\GlobalStoragesService');
 
-OCP\Util::addScript('files_external', 'settings');
-OCP\Util::addStyle('files_external', 'settings');
-
 \OC_Util::addVendorScript('select2/select2');
 \OC_Util::addVendorStyle('select2/select2');
 
-$backends = array_filter($backendService->getAvailableBackends(), function($backend) {
-	return $backend->isVisibleFor(BackendService::VISIBILITY_ADMIN);
-});
-$authMechanisms = array_filter($backendService->getAuthMechanisms(), function($authMechanism) {
-	return $authMechanism->isVisibleFor(BackendService::VISIBILITY_ADMIN);
-});
-foreach ($backends as $backend) {
-	if ($backend->getCustomJs()) {
-		\OCP\Util::addScript('files_external', $backend->getCustomJs());
-	}
-}
-foreach ($authMechanisms as $authMechanism) {
-	if ($authMechanism->getCustomJs()) {
-		\OCP\Util::addScript('files_external', $authMechanism->getCustomJs());
-	}
-}
-
-$userBackends = array_filter($backendService->getAvailableBackends(), function($backend) {
-	return $backend->isAllowedVisibleFor(BackendService::VISIBILITY_PERSONAL);
-});
-
 $tmpl = new OCP\Template('files_external', 'settings');
 $tmpl->assign('encryptionEnabled', \OC::$server->getEncryptionManager()->isEnabled());
-$tmpl->assign('isAdminPage', true);
+$tmpl->assign('visibilityType', BackendService::VISIBILITY_ADMIN);
 $tmpl->assign('storages', $globalStoragesService->getStorages());
-$tmpl->assign('backends', $backends);
-$tmpl->assign('authMechanisms', $authMechanisms);
-$tmpl->assign('userBackends', $userBackends);
+$tmpl->assign('backends', $backendService->getAvailableBackends());
+$tmpl->assign('authMechanisms', $backendService->getAuthMechanisms());
 $tmpl->assign('dependencies', OC_Mount_Config::dependencyMessage($backendService->getBackends()));
 $tmpl->assign('allowUserMounting', $backendService->isUserMountingAllowed());
 return $tmpl->fetchPage();
diff --git a/apps/files_external/templates/settings.php b/apps/files_external/templates/settings.php
index cebf6cc4de0..f7caf3d2caa 100644
--- a/apps/files_external/templates/settings.php
+++ b/apps/files_external/templates/settings.php
@@ -3,6 +3,21 @@
 	use \OCA\Files_External\Lib\DefinitionParameter;
 	use \OCA\Files_External\Service\BackendService;
 
+	script('files_external', 'settings');
+	style('files_external', 'settings');
+
+	// load custom JS
+	foreach ($_['backends'] as $backend) {
+		if ($backend->getCustomJs()) {
+			script('files_external', $backend->getCustomJs());
+		}
+	}
+	foreach ($_['authMechanisms'] as $authMechanism) {
+		if ($authMechanism->getCustomJs()) {
+			script('files_external', $authMechanism->getCustomJs());
+		}
+	}
+
 	function writeParameterInput($parameter, $options, $classes = []) {
 		$value = '';
 		if (isset($options[$parameter->getName()])) {
@@ -56,7 +71,7 @@
 <form id="files_external" class="section" data-encryption-enabled="<?php echo $_['encryptionEnabled']?'true': 'false'; ?>">
 	<h2><?php p($l->t('External Storage')); ?></h2>
 	<?php if (isset($_['dependencies']) and ($_['dependencies']<>'')) print_unescaped(''.$_['dependencies'].''); ?>
-	<table id="externalStorage" class="grid" data-admin='<?php print_unescaped(json_encode($_['isAdminPage'])); ?>'>
+	<table id="externalStorage" class="grid" data-admin='<?php print_unescaped(json_encode($_['visibilityType'] === BackendService::VISIBILITY_ADMIN)); ?>'>
 		<thead>
 			<tr>
 				<th></th>
@@ -64,79 +79,12 @@
 				<th><?php p($l->t('External storage')); ?></th>
 				<th><?php p($l->t('Authentication')); ?></th>
 				<th><?php p($l->t('Configuration')); ?></th>
-				<?php if ($_['isAdminPage']) print_unescaped('<th>'.$l->t('Available for').'</th>'); ?>
+				<?php if ($_['visibilityType'] === BackendService::VISIBILITY_ADMIN) print_unescaped('<th>'.$l->t('Available for').'</th>'); ?>
 				<th>&nbsp;</th>
 				<th>&nbsp;</th>
 			</tr>
 		</thead>
 		<tbody>
-		<?php foreach ($_['storages'] as $storage): ?>
-			<tr class="<?php p($storage->getBackend()->getIdentifier()); ?>" data-id="<?php p($storage->getId()); ?>">
-				<td class="status">
-					<span></span>
-				</td>
-				<td class="mountPoint"><input type="text" name="mountPoint"
-											  value="<?php p(ltrim($storage->getMountPoint(), '/')); ?>"
-											  data-mountpoint="<?php p(ltrim($storage->getMountPoint(), '/')); ?>"
-											  placeholder="<?php p($l->t('Folder name')); ?>" />
-				</td>
-				<td class="backend" data-class="<?php p($storage->getBackend()->getIdentifier()); ?>"><?php p($storage->getBackend()->getText()); ?>
-				</td>
-				<td class="authentication">
-					<select class="selectAuthMechanism">
-						<?php
-							$authSchemes = $storage->getBackend()->getAuthSchemes();
-							$authMechanisms = array_filter($_['authMechanisms'], function($mech) use ($authSchemes) {
-								return isset($authSchemes[$mech->getScheme()]);
-							});
-						?>
-						<?php foreach ($authMechanisms as $mech): ?>
-							<option value="<?php p($mech->getIdentifier()); ?>" data-scheme="<?php p($mech->getScheme());?>"
-								<?php if ($mech->getIdentifier() === $storage->getAuthMechanism()->getIdentifier()): ?>selected<?php endif; ?>
-							><?php p($mech->getText()); ?></option>
-						<?php endforeach; ?>
-					</select>
-				</td>
-				<td class="configuration">
-					<?php
-						$options = $storage->getBackendOptions();
-						foreach ($storage->getBackend()->getParameters() as $parameter) {
-							writeParameterInput($parameter, $options);
-						}
-						foreach ($storage->getAuthMechanism()->getParameters() as $parameter) {
-							writeParameterInput($parameter, $options, ['auth-param']);
-						}
-					?>
-				</td>
-				<?php if ($_['isAdminPage']): ?>
-					<td class="applicable"
-						align="right"
-						data-applicable-groups='<?php print_unescaped(json_encode($storage->getApplicableGroups())); ?>'
-						data-applicable-users='<?php print_unescaped(json_encode($storage->getApplicableUsers())); ?>'>
-						<input type="hidden" class="applicableUsers" style="width:20em;" value=""/>
-					</td>
-				<?php endif; ?>
-				<td class="mountOptionsToggle">
-					<img
-						class="svg action"
-						title="<?php p($l->t('Advanced settings')); ?>"
-						alt="<?php p($l->t('Advanced settings')); ?>"
-						src="<?php print_unescaped(image_path('core', 'actions/settings.svg')); ?>"
-					/>
-					<input type="hidden" class="mountOptions" value="<?php p(json_encode($storage->getMountOptions())); ?>" />
-					<?php if ($_['isAdminPage']): ?>
-						<input type="hidden" class="priority" value="<?php p($storage->getPriority()); ?>" />
-					<?php endif; ?>
-				</td>
-				<td class="remove">
-					<img alt="<?php p($l->t('Delete')); ?>"
-						title="<?php p($l->t('Delete')); ?>"
-						class="svg action"
-						src="<?php print_unescaped(image_path('core', 'actions/delete.svg')); ?>"
-					/>
-				</td>
-			</tr>
-		<?php endforeach; ?>
 			<tr id="addMountPoint">
 				<td class="status">
 					<span></span>
@@ -151,7 +99,9 @@
 							<?php p($l->t('Add storage')); ?>
 						</option>
 						<?php
-							$sortedBackends = $_['backends'];
+							$sortedBackends = array_filter($_['backends'], function($backend) use ($_) {
+								return $backend->isVisibleFor($_['visibilityType']);
+							});
 							uasort($sortedBackends, function($a, $b) {
 								return strcasecmp($a->getText(), $b->getText());
 							});
@@ -164,7 +114,7 @@
 				</td>
 				<td class="authentication" data-mechanisms='<?php p(json_encode($_['authMechanisms'])); ?>'></td>
 				<td class="configuration"></td>
-				<?php if ($_['isAdminPage']): ?>
+				<?php if ($_['visibilityType'] === BackendService::VISIBILITY_ADMIN): ?>
 					<td class="applicable" align="right">
 						<input type="hidden" class="applicableUsers" style="width:20em;" value="" />
 					</td>
@@ -189,7 +139,7 @@
 	</table>
 	<br />
 
-	<?php if ($_['isAdminPage']): ?>
+	<?php if ($_['visibilityType'] === BackendService::VISIBILITY_ADMIN): ?>
 		<br />
 		<input type="checkbox" name="allowUserMounting" id="allowUserMounting" class="checkbox"
 			value="1" <?php if ($_['allowUserMounting'] == 'yes') print_unescaped(' checked="checked"'); ?> />
@@ -197,7 +147,12 @@
 
 		<p id="userMountingBackends"<?php if ($_['allowUserMounting'] != 'yes'): ?> class="hidden"<?php endif; ?>>
 			<?php p($l->t('Allow users to mount the following external storage')); ?><br />
-			<?php $i = 0; foreach ($_['userBackends'] as $backend): ?>
+			<?php
+				$userBackends = array_filter($_['backends'], function($backend) {
+					return $backend->isAllowedVisibleFor(BackendService::VISIBILITY_PERSONAL);
+				});
+			?>
+			<?php $i = 0; foreach ($userBackends as $backend): ?>
 				<?php if ($deprecateTo = $backend->getDeprecateTo()): ?>
 					<input type="hidden" id="allowUserMountingBackends<?php p($i); ?>" name="allowUserMountingBackends[]" value="<?php p($backend->getIdentifier()); ?>" data-deprecate-to="<?php p($deprecateTo->getIdentifier()); ?>" />
 				<?php else: ?>
diff --git a/apps/files_external/tests/js/settingsSpec.js b/apps/files_external/tests/js/settingsSpec.js
index 67a81277124..3d0168898ca 100644
--- a/apps/files_external/tests/js/settingsSpec.js
+++ b/apps/files_external/tests/js/settingsSpec.js
@@ -54,7 +54,8 @@ describe('OCA.External.Settings tests', function() {
 		// within the DOM by the server template
 		$('#externalStorage .selectBackend:first').data('configurations', {
 				'\\OC\\TestBackend': {
-					'backend': 'Test Backend Name',
+					'identifier': '\\OC\\TestBackend',
+					'name': 'Test Backend',
 					'configuration': {
 						'field1': 'Display Name 1',
 						'field2': '&Display Name 2'
@@ -65,7 +66,8 @@ describe('OCA.External.Settings tests', function() {
 					'priority': 11
 				},
 				'\\OC\\AnotherTestBackend': {
-					'backend': 'Another Test Backend Name',
+					'identifier': '\\OC\\AnotherTestBackend',
+					'name': 'Another Test Backend',
 					'configuration': {
 						'field1': 'Display Name 1',
 						'field2': '&Display Name 2'
@@ -80,6 +82,7 @@ describe('OCA.External.Settings tests', function() {
 
 		$('#externalStorage #addMountPoint .authentication:first').data('mechanisms', {
 			'mechanism1': {
+				'identifier': 'mechanism1',
 				'name': 'Mechanism 1',
 				'configuration': {
 				},