Improve usability for configuring Dropbox and Google Drive external storage

2 files changed, 84 insertions, 38 deletions

diff --git a/apps/files_external/js/dropbox.js b/apps/files_external/js/dropbox.js
index 08ce88b1026..92194792f42 100644
--- a/apps/files_external/js/dropbox.js
+++ b/apps/files_external/js/dropbox.js
@@ -1,15 +1,17 @@
 $(document).ready(function() {
 
-	$('#externalStorage tbody tr').each(function() {
-		if ($(this).find('.backend').data('class') == 'OC_Filestorage_Dropbox') {
+	$('#externalStorage tbody tr.OC_Filestorage_Dropbox').each(function() {
+		var configured = $(this).find('[data-parameter="configured"]');
+		if ($(configured).val() == 'true') {
+			$(this).find('.configuration input').attr('disabled', 'disabled');
+			$(this).find('.configuration').append('<span id="access" style="padding-left:0.5em;">Access granted</span>');
+		} else {
 			var app_key = $(this).find('.configuration [data-parameter="app_key"]').val();
 			var app_secret = $(this).find('.configuration [data-parameter="app_secret"]').val();
-			if (app_key == '' && app_secret == '') {
-				$(this).find('.configuration').append('<a class="button dropbox">Grant access</a>');
-			} else  {
+			var config = $(this).find('.configuration');
+			if (app_key != '' && app_secret != '') {
 				var pos = window.location.search.indexOf('oauth_token') + 12
 				var token = $(this).find('.configuration [data-parameter="token"]');
-				var access = true;
 				if (pos != -1 && window.location.search.substr(pos, $(token).val().length) == $(token).val()) {
 					var token_secret = $(this).find('.configuration [data-parameter="token_secret"]');
 					var tr = $(this);
@@ -18,16 +20,31 @@ $(document).ready(function() {
 							$(token).val(result.access_token);
 							$(token_secret).val(result.access_token_secret);
 							OC.MountConfig.saveStorage(tr);
+							$(tr).find('.configuration input').attr('disabled', 'disabled');
+							$(tr).find('.configuration').append('<span id="access" style="padding-left:0.5em;">Access granted</span>');
 						} else {
-							access = false;
 							OC.dialogs.alert(result.data.message, 'Error configuring Dropbox storage');
 						}
 					});
 				}
-				if (access && $(this).find('.configuration #granted').length == 0) {
-					$(this).find('.configuration input').attr('disabled', 'disabled');
-					$(this).find('.configuration').append('<span id="granted">Access granted</span>');
+			} else if ($(this).find('.mountPoint input').val() != '' && $(config).find('[data-parameter="app_key"]').val() != '' && $(config).find('[data-parameter="app_secret"]').val() != '' && $(this).find('.dropbox').length == 0) {
+				$(this).find('.configuration').append('<a class="button dropbox">Grant access</a>');
+			}
+		}
+	});
+
+	$('#externalStorage tbody tr input').live('keyup', function() {
+		var tr = $(this).parent().parent();
+		if ($(tr).hasClass('OC_Filestorage_Dropbox') && $(tr).find('[data-parameter="configured"]').val() != 'true') {
+			var config = $(tr).find('.configuration');
+			if ($(tr).find('.mountPoint input').val() != '' && $(config).find('[data-parameter="app_key"]').val() != '' && $(config).find('[data-parameter="app_secret"]').val() != '') {
+				if ($(tr).find('.dropbox').length == 0) {
+					$(config).append('<a class="button dropbox">Grant access</a>');
+				} else {
+					$(tr).find('.dropbox').show();
 				}
+			} else if ($(tr).find('.dropbox').length > 0) {
+				$(tr).find('.dropbox').hide();
 			}
 		}
 	});
@@ -38,14 +55,19 @@ $(document).ready(function() {
 		var app_secret = $(this).parent().find('[data-parameter="app_secret"]').val();
 		if (app_key != '' && app_secret != '') {
 			var tr = $(this).parent().parent();
+			var configured = $(this).parent().find('[data-parameter="configured"]');
 			var token = $(this).parent().find('[data-parameter="token"]');
 			var token_secret = $(this).parent().find('[data-parameter="token_secret"]');
 			$.post(OC.filePath('files_external', 'ajax', 'dropbox.php'), { step: 1, app_key: app_key, app_secret: app_secret, callback: window.location.href }, function(result) {
 				if (result && result.status == 'success') {
+					$(configured).val('false');
 					$(token).val(result.data.request_token);
 					$(token_secret).val(result.data.request_token_secret);
-					OC.MountConfig.saveStorage(tr);
-					window.location = result.data.url;
+					if (OC.MountConfig.saveStorage(tr)) {
+						window.location = result.data.url;
+					} else {
+						OC.dialogs.alert('Fill out all required fields', 'Error configuring Dropbox storage');
+					}
 				} else {
 					OC.dialogs.alert(result.data.message, 'Error configuring Dropbox storage');
 				}
diff --git a/apps/files_external/js/google.js b/apps/files_external/js/google.js
index ede5fb2e775..7c62297df4d 100644
--- a/apps/files_external/js/google.js
+++ b/apps/files_external/js/google.js
@@ -1,48 +1,72 @@
 $(document).ready(function() {
 
-	$('#externalStorage tbody tr').each(function() {
-		if ($(this).find('.backend').data('class') == 'OC_Filestorage_Google') {
+	$('#externalStorage tbody tr.OC_Filestorage_Google').each(function() {
+		var configured = $(this).find('[data-parameter="configured"]');
+		if ($(configured).val() == 'true') {
+			$(this).find('.configuration').append('<span id="access" style="padding-left:0.5em;">Access granted</span>');
+		} else {
 			var token = $(this).find('[data-parameter="token"]');
 			var token_secret = $(this).find('[data-parameter="token_secret"]');
-			if ($(token).val() == '' && $(token).val() == '') {
-				$(this).find('.configuration').append('<a class="button google">Grant access</a>');
-			} else  {
-				var params = {};
-				window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
-					params[key] = value;
+			var params = {};
+			window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
+				params[key] = value;
+			});
+			if (params['oauth_token'] !== undefined && params['oauth_verifier'] !== undefined && decodeURIComponent(params['oauth_token']) == $(token).val()) {
+				var tr = $(this);
+				$.post(OC.filePath('files_external', 'ajax', 'google.php'), { step: 2, oauth_verifier: params['oauth_verifier'], request_token: $(token).val(), request_token_secret: $(token_secret).val() }, function(result) {
+					if (result && result.status == 'success') {
+						$(token).val(result.access_token);
+						$(token_secret).val(result.access_token_secret);
+						$(configured).val('true');
+						OC.MountConfig.saveStorage(tr);
+						$(tr).find('.configuration').append('<span id="access" style="padding-left:0.5em;">Access granted</span>');
+					} else {
+						OC.dialogs.alert(result.data.message, 'Error configuring Google Drive storage');
+					}
 				});
-				var access = true;
-				if (params['oauth_token'] !== undefined && params['oauth_verifier'] !== undefined && decodeURIComponent(params['oauth_token']) == $(token).val()) {
-					var tr = $(this);
-					$.post(OC.filePath('files_external', 'ajax', 'google.php'), { step: 2, oauth_verifier: params['oauth_verifier'], request_token: $(token).val(), request_token_secret: $(token_secret).val() }, function(result) {
-						if (result && result.status == 'success') {
-							$(token).val(result.access_token);
-							$(token_secret).val(result.access_token_secret);
-							OC.MountConfig.saveStorage(tr);
-						} else {
-							access = false;
-							OC.dialogs.alert(result.data.message, 'Error configuring Google Drive storage');
-						}
-					});
-				}
-				if (access && $(this).find('.configuration #granted').length == 0) {
-					$(this).find('.configuration').append('<span id="granted" style="padding-left:0.5em;">Access granted</span>');
+			} else if ($(this).find('.google').length == 0) {
+				$(this).find('.configuration').append('<a class="button google">Grant access</a>');
+			}
+		}
+	});
+
+	$('#externalStorage tbody tr').live('change', function() {
+		if ($(this).hasClass('OC_Filestorage_Google') && $(this).find('[data-parameter="configured"]').val() != 'true') {
+			if ($(this).find('.mountPoint input').val() != '') {
+				if ($(this).find('.google').length == 0) {
+					$(this).find('.configuration').append('<a class="button google">Grant access</a>');
 				}
 			}
 		}
 	});
 
+	$('#externalStorage tbody tr .mountPoint input').live('keyup', function() {
+		var tr = $(this).parent().parent();
+		if ($(tr).hasClass('OC_Filestorage_Google') && $(tr).find('[data-parameter="configured"]').val() != 'true' && $(tr).find('.google').length > 0) {
+			if ($(this).val() != '') {
+				$(tr).find('.google').show();
+			} else {
+				$(tr).find('.google').hide();
+			}
+		}
+	});
+
 	$('.google').live('click', function(event) {
 		event.preventDefault();
 		var tr = $(this).parent().parent();
+		var configured = $(this).parent().find('[data-parameter="configured"]');
 		var token = $(this).parent().find('[data-parameter="token"]');
 		var token_secret = $(this).parent().find('[data-parameter="token_secret"]');
 		$.post(OC.filePath('files_external', 'ajax', 'google.php'), { step: 1, callback: window.location.href }, function(result) {
 			if (result && result.status == 'success') {
+				$(configured).val('false');
 				$(token).val(result.data.request_token);
 				$(token_secret).val(result.data.request_token_secret);
-				OC.MountConfig.saveStorage(tr);
-				window.location = result.data.url;
+				if (OC.MountConfig.saveStorage(tr)) {
+					window.location = result.data.url;
+				} else {
+					OC.dialogs.alert('Fill out all required fields', 'Error configuring Google Drive storage');
+				}
 			} else {
 				OC.dialogs.alert(result.data.message, 'Error configuring Google Drive storage');
 			}