Save settings before connect to network / create access point and display validation errors and only close settings when settings are saved

css/settings.css

@@ -94,3 +94,11 @@ form .button {
 form #passwordLabel, form #password {
 	display: none;
 }
+
+form input.error, form textarea.error, form select.error {
+	border: #f00 solid 2px;
+}
+form .errorMsg {
+	color: #f00;
+	margin: 0 0 0 1em;
+}

js/SettingsWindow.js

@@ -113,8 +113,9 @@ function SettingsWindow() {
 	this.submitwindow = function(e) {
 		e.preventDefault();
 	  e.stopPropagation();
-	  self.saveSettings();
+	  self.saveSettings(self.readForm(),function(){
 	  	self.hideSettings();
+	  });
 	  
 	  clearTimeout(self.retryRetrieveNetworkStatusDelay);
 	}
@@ -162,45 +163,6 @@ function SettingsWindow() {
     this.refreshNetworks();
     this.retrieveNetworkStatus(false);
 	}
-
-	this.saveSettings = function(callback) {
-	  console.log("Settings:saveSettings");
-
-	  this.readForm();
-
-	  if (communicateWithWifibox) {
-		  $.ajax({
-			  url: this.wifiboxURL + "/config",
-			  type: "POST",
-			  data: settings,
-			  dataType: 'json',
-			  timeout: this.timeoutTime,
-			  success: function(data){
-			  	console.log("Settings:saveSettings response: ",data);
-			  	if(data.status == "error") {
-			  		clearTimeout(self.retrySaveSettingsDelay);
-						self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay
-			  	} else {
-			  		var savedSettings = data.data;
-				  	$.each(savedSettings, function(index, val) {
-			        if (val != "ok") {
-			          console.log("ERROR: value '" + index + "' not successfully set. Message: " + val);
-			        }
-			      });
-			      // TODO something like a callback or feedback that saving went well / or failed
-			      if (callback != undefined) {
-			        callback();
-			      }
-			  	}
-				}
-			}).fail(function() {
-				console.log("Settings:saveSettings: failed");
-				clearTimeout(self.retrySaveSettingsDelay);
-				self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay
-			});
-	  }
-	}
-
 	this.fillForm = function() {
 		console.log("SettingsWindow:fillForm");
 
@@ -232,15 +194,72 @@ function SettingsWindow() {
 		});
 	}
 
+	this.saveSettings = function(newSettings,complete) {
+	 if (communicateWithWifibox) {
+		  $.ajax({
+			  url: this.wifiboxURL + "/config",
+			  type: "POST",
+			  data: newSettings,
+			  dataType: 'json',
+			  timeout: this.timeoutTime,
+			  success: function(data){
+			  	console.log("Settings:saveSettings response: ",data);
+			  	if(data.status == "error") {
+			  		clearTimeout(self.retrySaveSettingsDelay);
+						self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings(settings) },self.retryDelay); // retry after delay
+			  	} else {
+			  		var savedSettings = data.data;
+			  		self.clearValidationErrors();
+			  		var validated = true;
+				  	$.each(savedSettings, function(key, val) {
+			        if (val != "ok") {
+			          console.log("ERROR: setting '" + key + "' not successfully set. Message: " + val);
+			          self.displayValidationError(key,val);
+			          validated = false;
+			        }
+			      });
+				  	if(complete && validated) complete();
+			  	}
+				}
+			}).fail(function() {
+				console.log("Settings:saveSettings: failed");
+				clearTimeout(self.retrySaveSettingsDelay);
+				self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings(settings) },self.retryDelay); // retry after delay
+			});
+	  }
+	}
+	this.displayValidationError = function(key,msg) {
+		var formElement = self.form.find("[name|='"+key+"']");
+		console.log("formElement: ",formElement);
+		formElement.addClass("error");
+		var errorMsg = "<p class='errorMsg'>"+msg+"</p>"
+		formElement.after(errorMsg);
+	}
+	this.clearValidationErrors = function() {
+		console.log("clearValidationErrors");
+		console.log("  remove: ",self.form.find(".errorMsg").remove());
+		var formElements = self.form.find(".error");
+		console.log("  formElements: ",formElements);
+		formElements.each( function(index,element) {
+			
+			var element = $(element);
+			console.log("    element: ",element);
+			element.removeClass("error");
+		});
+	}
+	
 	this.readForm = function() {
-		console.log("SettingsWindow:readForm");
+		//console.log("SettingsWindow:readForm");
-		var selects = this.form.find("select");
+		var settings = {};
+		var selects = self.form.find("select");
 		selects.each( function(index,element) {
 			var element = $(element);
+			if(element.attr('name') != "network.client.network") {
 				settings[element.attr('name')] = element.val();
+			}
 		});
 
-		var inputs = this.form.find("input");
+		var inputs = self.form.find("input");
 		inputs.each( function(index,element) {
 			var element = $(element);
 			switch(element.attr("type")) {
@@ -254,15 +273,15 @@ function SettingsWindow() {
 			}
 		});
 
-		var textareas = this.form.find("textarea");
+		var textareas = self.form.find("textarea");
 		textareas.each( function(index,element) {
 			var element = $(element);
 			settings[element.attr('name')] = element.val();
 		});
-		console.log(settings);
+		//console.log(settings);
+		return settings;
 	}
 
-
 	/*
 	 * Networks ui
 	 */
@@ -514,13 +533,17 @@ function SettingsWindow() {
 	this.connectToNetwork = function() {
 		console.log("connectToNetwork");
 		if(self.selectedNetwork == undefined) return;
-		postData = {
+		var postData = {
 			ssid:self.selectedNetwork,
 			phrase:self.form.find("#password").val(),
       recreate:true
 		}
 		console.log("  postData: ",postData);
 		if (communicateWithWifibox) {
+			
+			// save network related settings and on complete, connect to network
+			self.saveSettings(self.readForm(),function() {
+				
 				$.ajax({
 					url: self.wifiboxCGIBinURL + "/network/associate",
 					type: "POST",
@@ -535,6 +558,7 @@ function SettingsWindow() {
 					//clearTimeout(self.retrySaveSettingsDelay);
 					//self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay
 				});
+			});
 	  }
     self.setClientModeState(SettingsWindow.CONNECTING,"");
     
@@ -545,7 +569,11 @@ function SettingsWindow() {
 	}
 
   this.createAP = function() {
+  	console.log("createAP");
 		if (communicateWithWifibox) {
+			
+			// save network related settings and on complete, create access point
+			self.saveSettings(self.readForm(),function() {
 				$.ajax({
 					url: self.wifiboxCGIBinURL + "/network/openap",
 					type: "POST",
@@ -553,20 +581,21 @@ function SettingsWindow() {
 					timeout: self.timeoutTime,
 					success: function(response){
 						console.log("Settings:createAP response: ",response);
-
 					}
 				}).fail(function() {
 					console.log("Settings:createAP: timeout (normal behavior)");
 					//clearTimeout(self.retrySaveSettingsDelay);
 					//self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay
 				});
-	  }
+				
 				self.setAPModeState(SettingsWindow.CREATING_AP,"");
 
 				// after switching wifi network or creating a access point we delay the status retrieval
 				// because the webserver needs time to switch
 				clearTimeout(self.retrieveNetworkStatusDelay);
 				self.retrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus(true) },self.retrieveNetworkStatusDelayTime);
+			});
+	  }
   }
 }