Merge pull request #10428 from owncloud/files_external_better_config

Improve external storage configuration UI

4 files changed, 57 insertions, 28 deletions

diff --git a/apps/files_external/appinfo/app.php b/apps/files_external/appinfo/app.php
index 3b8793a075b..04c48187e37 100644
--- a/apps/files_external/appinfo/app.php
+++ b/apps/files_external/appinfo/app.php
@@ -62,9 +62,9 @@ OC_Mount_Config::registerBackend('\OC\Files\Storage\AmazonS3', array(
 		'key' => (string)$l->t('Access Key'),
 		'secret' => '*'.$l->t('Secret Key'),
 		'bucket' => (string)$l->t('Bucket'),
-		'hostname' => '&'.$l->t('Hostname (optional)'),
-		'port' => '&'.$l->t('Port (optional)'),
-		'region' => '&'.$l->t('Region (optional)'),
+		'hostname' => '&'.$l->t('Hostname'),
+		'port' => '&'.$l->t('Port'),
+		'region' => '&'.$l->t('Region'),
 		'use_ssl' => '!'.$l->t('Enable SSL'),
 		'use_path_style' => '!'.$l->t('Enable Path Style')),
 	'has_dependencies' => true));
@@ -108,15 +108,15 @@ OC_Mount_Config::registerBackend('\OC\Files\Storage\Swift', array(
 	'backend' => (string)$l->t('OpenStack Object Storage'),
 	'priority' => 100,
 	'configuration' => array(
-		'user' => (string)$l->t('Username (required)'),
-		'bucket' => (string)$l->t('Bucket (required)'),
+		'user' => (string)$l->t('Username'),
+		'bucket' => (string)$l->t('Bucket'),
 		'region' => '&'.$l->t('Region (optional for OpenStack Object Storage)'),
 		'key' => '*'.$l->t('API Key (required for Rackspace Cloud Files)'),
 		'tenant' => '&'.$l->t('Tenantname (required for OpenStack Object Storage)'),
 		'password' => '*'.$l->t('Password (required for OpenStack Object Storage)'),
 		'service_name' => '&'.$l->t('Service Name (required for OpenStack Object Storage)'),
 		'url' => '&'.$l->t('URL of identity endpoint (required for OpenStack Object Storage)'),
-		'timeout' => '&'.$l->t('Timeout of HTTP requests in seconds (optional)'),
+		'timeout' => '&'.$l->t('Timeout of HTTP requests in seconds'),
 	),
 	'has_dependencies' => true));
 
diff --git a/apps/files_external/css/settings.css b/apps/files_external/css/settings.css
index b78eec235d6..101c224c5f5 100644
--- a/apps/files_external/css/settings.css
+++ b/apps/files_external/css/settings.css
@@ -20,6 +20,9 @@ tr:hover>td.remove>img { visibility:visible; cursor:pointer; }
 #externalStorage td.backend {
 	white-space: normal;
 }
+#externalStorage td.configuration > * {
+	white-space: nowrap;
+}
 
 #externalStorage td.configuration input.added  {
 	margin-right: 6px;
diff --git a/apps/files_external/js/settings.js b/apps/files_external/js/settings.js
index 6c287d6a760..00d2a920cbf 100644
--- a/apps/files_external/js/settings.js
+++ b/apps/files_external/js/settings.js
@@ -2,7 +2,7 @@
 
 function updateStatus(statusEl, result){
 	statusEl.removeClass('success error loading-small');
-	if (result && result.status == 'success' && result.data.message) {
+	if (result && result.status === 'success' && result.data.message) {
 		statusEl.addClass('success');
 		return true;
 	} else {
@@ -19,11 +19,23 @@ function getSelection($row) {
 	return values;
 }
 
+function highlightBorder(element, highlight) {
+	$(element).toggleClass('warning-input', highlight);
+	return highlight;
+}
+
+function highlightInput(input) {
+	if ($(input).attr('type') === 'text' || $(input).attr('type') === 'password') {
+		return highlightBorder(input,
+			($(input).val() === '' && !$(input).hasClass('optional')));
+	}
+}
+
 OC.MountConfig={
 	saveStorage:function(tr, callback) {
 		var mountPoint = $(tr).find('.mountPoint input').val();
 		var oldMountPoint = $(tr).find('.mountPoint input').data('mountpoint');
-		if (mountPoint == '') {
+		if (mountPoint === '') {
 			return false;
 		}
 		var statusSpan = $(tr).closest('tr').find('.status span');
@@ -35,7 +47,7 @@ OC.MountConfig={
 		}
 		var classOptions = {};
 		$.each(configuration, function(index, input) {
-			if ($(input).val() == '' && !$(input).hasClass('optional')) {
+			if ($(input).val() === '' && !$(input).hasClass('optional')) {
 				addMountPoint = false;
 				return false;
 			}
@@ -295,13 +307,13 @@ $(document).ready(function() {
 	addSelect2($('tr:not(#addMountPoint) .applicableUsers'));
 	
 	$('#externalStorage').on('change', '#selectBackend', function() {
-		var tr = $(this).parent().parent();
+		var tr = $(this).closest("tr");
 		$('#externalStorage tbody').append($(tr).clone());
 		$('#externalStorage tbody tr').last().find('.mountPoint input').val('');
 		var selected = $(this).find('option:selected').text();
 		var backendClass = $(this).val();
-		$(this).parent().text(selected);
-		if ($(tr).find('.mountPoint input').val() == '') {
+		$(tr).find('.backend').text(selected);
+		if ($(tr).find('.mountPoint input').val() === '') {
 			$(tr).find('.mountPoint input').val(suggestMountPoint(selected));
 		}
 		$(tr).addClass(backendClass);
@@ -310,28 +322,32 @@ $(document).ready(function() {
 		var configurations = $(this).data('configurations');
 		var td = $(tr).find('td.configuration');
 		$.each(configurations, function(backend, parameters) {
-			if (backend == backendClass) {
+			if (backend === backendClass) {
 				$.each(parameters['configuration'], function(parameter, placeholder) {
 					var is_optional = false;
 					if (placeholder.indexOf('&') === 0) {
 						is_optional = true;
 						placeholder = placeholder.substring(1);
 					}
+					var newElement;
 					if (placeholder.indexOf('*') === 0) {
 						var class_string = is_optional ? ' optional' : '';
-						td.append('<input type="password" class="added' + class_string + '" data-parameter="'+parameter+'" placeholder="'+placeholder.substring(1)+'" />');
+						newElement = $('<input type="password" class="added' + class_string + '" data-parameter="'+parameter+'" placeholder="'+placeholder.substring(1)+'" />');
 					} else if (placeholder.indexOf('!') === 0) {
-						td.append('<label><input type="checkbox" class="added" data-parameter="'+parameter+'" />'+placeholder.substring(1)+'</label>');
+						newElement = $('<label><input type="checkbox" class="added" data-parameter="'+parameter+'" />'+placeholder.substring(1)+'</label>');
 					} else if (placeholder.indexOf('#') === 0) {
-						td.append('<input type="hidden" class="added" data-parameter="'+parameter+'" />');
+						newElement = $('<input type="hidden" class="added" data-parameter="'+parameter+'" />');
 					} else {
 						var class_string = is_optional ? ' optional' : '';
-						td.append('<input type="text" class="added' + class_string + '" data-parameter="'+parameter+'" placeholder="'+placeholder+'" />');
+						newElement = $('<input type="text" class="added' + class_string + '" data-parameter="'+parameter+'" placeholder="'+placeholder+'" />');
 					}
+					highlightInput(newElement);
+					td.append(newElement);
 				});
-				if (parameters['custom'] && $('#externalStorage tbody tr.'+backendClass.replace(/\\/g, '\\\\')).length == 1) {
+				if (parameters['custom'] && $('#externalStorage tbody tr.'+backendClass.replace(/\\/g, '\\\\')).length === 1) {
 					OC.addScript('files_external', parameters['custom']);
 				}
+				td.children().not('[type=hidden]').first().focus();
 				return false;
 			}
 		});
@@ -354,7 +370,7 @@ $(document).ready(function() {
 		while (match && i < 20) {
 			match = false;
 			$('#externalStorage tbody td.mountPoint input').each(function(index, mountPoint) {
-				if ($(mountPoint).val() == defaultMountPoint+append) {
+				if ($(mountPoint).val() === defaultMountPoint+append) {
 					match = true;
 					return false;
 				}
@@ -369,9 +385,11 @@ $(document).ready(function() {
 		return defaultMountPoint+append;
 	}
 
-	$('#externalStorage').on('paste', 'td', function() {
-		var tr = $(this).parent();
+	$('#externalStorage').on('paste', 'td input', function() {
+		var tr = $(this).closest("tr");
+		var me = this;
 		setTimeout(function() {
+			highlightInput($(me));
 			OC.MountConfig.saveStorage(tr);
 		}, 20);
 	});
@@ -380,7 +398,8 @@ $(document).ready(function() {
 
 	$('#externalStorage').on('keyup', 'td input', function() {
 		clearTimeout(timer);
-		var tr = $(this).parent().parent();
+		var tr = $(this).closest("tr");
+		highlightInput($(this));
 		if ($(this).val) {
 			timer = setTimeout(function() {
 				OC.MountConfig.saveStorage(tr);
@@ -389,23 +408,26 @@ $(document).ready(function() {
 	});
 
 	$('#externalStorage').on('change', 'td input:checkbox', function() {
-		OC.MountConfig.saveStorage($(this).parent().parent().parent());
+		OC.MountConfig.saveStorage($(this).closest("tr"));
 	});
 
 	$('#externalStorage').on('change', '.applicable', function() {
-		OC.MountConfig.saveStorage($(this).parent());
+		OC.MountConfig.saveStorage($(this).closest("tr"));
+	});
+
+	$('#externalStorage').on('click', '.status>span', function() {
+		OC.MountConfig.saveStorage($(this).closest("tr"));
 	});
 
 	$('#sslCertificate').on('click', 'td.remove>img', function() {
-		var $tr = $(this).parent().parent();
-		var row = this.parentNode.parentNode;
-		$.post(OC.filePath('files_external', 'ajax', 'removeRootCertificate.php'), {cert: row.id});
+		var $tr = $(this).closest("tr");
+		$.post(OC.filePath('files_external', 'ajax', 'removeRootCertificate.php'), {cert: $tr.attr('id')});
 		$tr.remove();
 		return true;
 	});
 
 	$('#externalStorage').on('click', 'td.remove>img', function() {
-		var tr = $(this).parent().parent();
+		var tr = $(this).closest('tr');
 		var mountPoint = $(tr).find('.mountPoint input').val();
 
 		if ($('#externalStorage').data('admin') === true) {
diff --git a/core/css/styles.css b/core/css/styles.css
index 08ffaa72e10..2f8f9612f78 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -620,6 +620,10 @@ label.infield {
 	color: black !important;
 }
 
+.warning-input {
+	border-color: #cc3333 !important;
+}
+
 /* Fixes for log in page, TODO should be removed some time */
 #body-login .update,
 #body-login .error {