Show green save mark

Signed-off-by: Joas Schilling <coding@schilljs.com>

css/settings-admin.scss

@@ -4,11 +4,16 @@
 	}
 
 	.icon-delete,
+	.icon-checkmark-color,
 	div.stun-server:last-child .icon-add,
 	div.turn-server:last-child .icon-add {
 		display: inline-block;
 	}
 
+	.icon-checkmark-color.hidden {
+		display: none;
+	}
+
 	.error {
 		border-color: $color-error;
 	}

js/admin/stun-server.js

@@ -11,6 +11,7 @@
 		'	<input type="text" name="stun_server" placeholder="stunserver:port" value="{{server}}" />' +
 		'	<a class="icon icon-delete" title="' + t('spreed', 'Delete server') + '"></a>' +
 		'	<a class="icon icon-add" title="' + t('spreed', 'Add new server') + '"></a>' +
+		'	<span class="icon icon-checkmark-color hidden" title="' + t('spreed', 'Saved') + '"></span>' +
 		'</div>',
 		$list: undefined,
 		template: undefined,
@@ -36,10 +37,10 @@
 		},
 
 		addNewTemplate: function(server) {
-			server = server || '';
-			this.$list.append(
-				this.renderServer(server)
-			);
+			server = _.isString(server) ? server : '';
+			var $server = this.renderServer(server);
+			this.$list.append($server);
+			return $server;
 		},
 
 		deleteServer: function(e) {
@@ -51,13 +52,20 @@
 			this.saveServers();
 
 			if (this.$list.find('div.stun-server').length === 0) {
-				this.addNewTemplate('stun.nextcloud.com:443');
+				var $newServer = this.addNewTemplate('stun.nextcloud.com:443');
+				this.temporaryShowSuccess($newServer);
 			}
 
 		},
 
 		saveServers: function() {
-			var servers = [];
+			var servers = [],
+				$error = [],
+				$success = [],
+				self = this;
+
+			this.$list.find('input').removeClass('error');
+			this.$list.find('.icon-checkmark-color').addClass('hidden');
 
 			this.$list.find('input').each(function() {
 				var server = this.value,
@@ -67,15 +75,32 @@
 				} else {
 					if (parts[1].match(/^([1-9]\d{0,4})$/) === null ||
 						parseInt(parts[1]) > Math.pow(2, 16)) { //65536
-						$(this).addClass('error');
+						$error.push($(this));
 					} else {
 						servers.push(this.value);
-						$(this).removeClass('error');
+						$success.push($(this).parent('div.stun-server'));
 					}
 				}
 			});
 
-			OCP.AppConfig.setValue('spreed', 'stun_server', JSON.stringify(servers));
+			OCP.AppConfig.setValue('spreed', 'stun_servers', JSON.stringify(servers), {
+				success: function() {
+					_.each($error, function($server) {
+						$server.addClass('error');
+					});
+					_.each($success, function($server) {
+						self.temporaryShowSuccess($server);
+					});
+				}
+			});
+		},
+
+		temporaryShowSuccess: function($server) {
+			var $icon = $server.find('.icon-checkmark-color');
+			$icon.removeClass('hidden');
+			setTimeout(function() {
+				$icon.addClass('hidden');
+			}, 2000);
 		},
 
 		renderServer: function(server) {

js/admin/turn-server.js

@@ -19,6 +19,7 @@
 		'	</select>' +
 		'	<a class="icon icon-delete" title="' + t('spreed', 'Delete server') + '"></a>' +
 		'	<a class="icon icon-add" title="' + t('spreed', 'Add new server') + '"></a>' +
+		'	<span class="icon icon-checkmark-color hidden" title="' + t('spreed', 'Saved') + '"></span>' +
 		'</div>',
 		$list: undefined,
 		template: undefined,
@@ -52,9 +53,9 @@
 		},
 
 		addNewTemplate: function() {
-			this.$list.append(
-				this.renderServer({})
-			);
+			var $server = this.renderServer({});
+			this.$list.append($server);
+			return $server;
 		},
 
 		deleteServer: function(e) {
@@ -66,14 +67,20 @@
 			this.saveServers();
 
 			if (this.$list.find('div.turn-server').length === 0) {
-				this.addNewTemplate();
+				var $newServer = this.addNewTemplate();
+				this.temporaryShowSuccess($newServer);
 			}
 		},
 
 		saveServers: function() {
-			var servers = [];
+			var servers = [],
+				$error = [],
+				$success = [],
+				self = this;
 
 			this.$list.find('input').removeClass('error');
+			this.$list.find('.icon-checkmark-color').addClass('hidden');
+
 			this.$list.find('div.turn-server').each(function() {
 				var $row = $(this),
 					$server = $row.find('input.server'),
@@ -85,15 +92,39 @@
 						protocols: $protocols.val()
 					};
 				if (data.server === '') {
-					$server.addClass('error');
+					$error.push($server);
+					if (data.secret === '') {
+						$error.push($secret);
+					}
+					return;
 				}
 				if (data.secret === '') {
-					$secret.addClass('error');
+					$error.push($secret);
+					return;
 				}
+
+				$success.push($(this));
 				servers.push(data);
 			});
 
-			OCP.AppConfig.setValue('spreed', 'turn_server', JSON.stringify(servers));
+			OCP.AppConfig.setValue('spreed', 'turn_servers', JSON.stringify(servers), {
+				success: function() {
+					_.each($error, function($input) {
+						$input.addClass('error');
+					});
+					_.each($success, function($server) {
+						self.temporaryShowSuccess($server);
+					});
+				}
+			});
+		},
+
+		temporaryShowSuccess: function($server) {
+			var $icon = $server.find('.icon-checkmark-color');
+			$icon.removeClass('hidden');
+			setTimeout(function() {
+				$icon.addClass('hidden');
+			}, 2000);
 		},
 
 		renderServer: function(server) {