From fc7622d5f0374606746655faae5a8728c6a7dc9d Mon Sep 17 00:00:00 2001
From: peteruithoven <peter@peteruithoven.nl>
Date: Fri, 25 Apr 2014 18:38:41 +0200
Subject: [PATCH] Join secured network

---
 js/ConnectingToNetworkPage.js |  6 ++--
 js/JoinSecuredNetworkPage.js  | 54 +++++++++++++++++++++++++++++++++++
 www/index.html                |  6 ++--
 3 files changed, 60 insertions(+), 6 deletions(-)
 create mode 100644 js/JoinSecuredNetworkPage.js

diff --git a/js/ConnectingToNetworkPage.js b/js/ConnectingToNetworkPage.js
index 107bb9c..a243a03 100644
--- a/js/ConnectingToNetworkPage.js
+++ b/js/ConnectingToNetworkPage.js
@@ -28,7 +28,6 @@
 		console.log("Connecting to network page pagebeforeshow");
 		_pageData = d3d.util.getPageParams(PAGE_ID);
 		var boxURL = "http://"+_pageData.localip;
-		//console.log("  _boxData: ",_boxData);
 		
 		_networkAPI.init(boxURL);
 		_networkAPI.refreshing = onRefreshing;
@@ -71,7 +70,7 @@
 				break;
 			case NetworkAPI.STATUS.CONNECTED:
 				statusText = "Connected";
-				actionText = "The WiFi-Box is connected to <b>"+_pageData.ssid+"</b>";
+				actionText = "The WiFi-Box is connected to <b>"+_pageData.ssid+"</b>. <br/>Please reconnect to <b>"+_pageData.ssid+"</b>. Once you are connected return to this page.";
 				_actionField.attr("class","info");
 				break;
 			default:
@@ -89,5 +88,4 @@
 		// ToDo: attempt to auto redirect to connected WiFi-Box
 		// attempt to retrieve connectAPI list, if same wifiboxid available (only works for version 0.10.2+), redirect to box page
 	}
-})(window);
-//new JoinNetworkPage();
\ No newline at end of file
+})(window);
\ No newline at end of file
diff --git a/js/JoinSecuredNetworkPage.js b/js/JoinSecuredNetworkPage.js
new file mode 100644
index 0000000..a1f38b5
--- /dev/null
+++ b/js/JoinSecuredNetworkPage.js
@@ -0,0 +1,54 @@
+/*
+ * This file is part of the Doodle3D project (http://doodle3d.com).
+ *
+ * Copyright (c) 2013, Doodle3D
+ * This software is licensed under the terms of the GNU GPL v2 or later.
+ * See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
+ */
+
+(function JoinSecuredNetworkPage(w) {
+	
+	var _page;
+	var _title;
+	var _form;
+	var _passwordField;
+	var _submitButton;
+	var _pageData = {};
+	var PAGE_ID = "#join_secured_network";
+	
+	var _self = this;
+	
+	$.mobile.document.on( "pageinit", PAGE_ID, function( event, data ) {
+		console.log(PAGE_ID+" pageinit");
+		_page = $(this);
+		_title = _page.find("h3");
+		_form = _page.find("form");
+		_passwordField = _form.find("input[name=password]");
+		_submitButton = _form.find("input[type=submit]");
+		_form.submit(function(){
+			console.log("JoinSecuredNetworkPage:submit");
+			// ToDo: validation
+			// http://www.raymondcamden.com/index.cfm/2012/7/30/Example-of-form-validation-in-a-jQuery-Mobile-Application
+			
+			var linkParams = _pageData;
+			linkParams.password = _passwordField.val();
+			var submitLink = _form.data("target");
+			submitLink = d3d.util.replaceURLParameters(submitLink,_pageData);
+			$.mobile.changePage(submitLink);
+			return false;
+		});
+		// ToDo show password button?
+		// http://unwrongest.com/projects/show-password/ 
+		// http://trevordavis.net/blog/jquery-show-password-plugin
+  });
+	$.mobile.document.on( "pagebeforeshow", PAGE_ID, function( event, data ) {
+		console.log(PAGE_ID+" pagebeforeshow");
+		_pageData = d3d.util.getPageParams(PAGE_ID);
+		console.log("  _pageData: ",_pageData);
+		_title.text("Join "+_pageData.ssid);
+		
+  });
+	$.mobile.document.on( "pagehide", PAGE_ID, function( event, data ) {
+		console.log(PAGE_ID+" pagehide");
+  });
+})(window);
\ No newline at end of file
diff --git a/www/index.html b/www/index.html
index 0b8b430..385a105 100644
--- a/www/index.html
+++ b/www/index.html
@@ -299,8 +299,10 @@
 	</div><!-- /header -->
 	<div role="main" class="ui-content">
 		<h3>Join a secured network</h3>
-		<input type="password" name="textinput-s" id="textinput-s" placeholder="Password" value="" data-clear-btn="true">
-		<button class="ui-shadow ui-btn ui-corner-all">Connect</button>
+		<form data-ajax="false" data-target="#connecting_to_network">
+			<input type="password" name="password" placeholder="Password" data-clear-btn="true">
+			<input type=submit value="Connect">
+		</form>
 	</div><!-- /content -->
 </div><!-- /page -->