Initial implementation of a password prompt.

5 files changed, 151 insertions, 3 deletions

diff --git a/src/ws/handler.js b/src/ws/handler.js
index eff5a07..1a016b5 100644
--- a/src/ws/handler.js
+++ b/src/ws/handler.js
@@ -10,6 +10,8 @@ function connectEventHandler(e)
 
 	//login("foobar", "hundemad");
 	//subscribe(0);
+
+	loggedOut();
 }
 
 document.addEventListener("disconnectEvent", disconnectEventHandler, false);
@@ -17,6 +19,8 @@ function disconnectEventHandler(e)
 {
 	document.getElementById("wsnode_status").style.backgroundColor = "#ff4040";
 	document.getElementById("wsnode_status").textContent = "NodeProto websocket connection CLOSED ";
+
+	loggedOut();
 }
 
 document.addEventListener("removeEvent", removeEventHandler, false);
diff --git a/src/ws/munia.css b/src/ws/munia.css
index c9d670c..2cd6c55 100644
--- a/src/ws/munia.css
+++ b/src/ws/munia.css
@@ -197,3 +197,39 @@ body
 	border-radius: 3px;
 	overflow: auto;
 }
+
+/**
+ * Login prompt
+ */
+.login_overlay
+{
+	position: absolute;
+	left: 0px;
+	top: 0px;
+	width: 100%;
+	height: 100%;
+	background-color:rgba(0, 0, 0, 0.5);
+}
+
+.login_box
+{
+	display: box;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	border: solid green 10px;
+	background: white;
+	opacity: 1;
+	width: 300px;
+	height: 200px;
+	border-radius: 12px;
+	padding: 30px;
+	-ms-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+}
+
+.login_box input
+{
+	width: 200px;
+	margin: auto;
+}
diff --git a/src/ws/munia.html b/src/ws/munia.html
index 98ce8bd..7744430 100644
--- a/src/ws/munia.html
+++ b/src/ws/munia.html
@@ -18,7 +18,15 @@
 		    value=""/>
   <input type="button" value="submit" onclick="node_submit()"/><br/>
 </div>
-
+<div id="login_overlay" class="login_overlay">
+	<div class="login_box">
+		<input type="text" placeholder="Username" id="username"/>
+		<input type="password" placeholder="Password" id="password"/>
+		<input type="checkbox" id="remember"/>
+		<label for="remember">Remember me</label>
+		<input type="button" type="submit" value="Login" onclick="processLogin()"/>
+	</div>
+</div>
 <div id="boards" class="boards"></div>
 
 <pre class="log" id="log">Event information log
diff --git a/src/ws/proto.js b/src/ws/proto.js
index e4834b0..c94761e 100644
--- a/src/ws/proto.js
+++ b/src/ws/proto.js
@@ -107,6 +107,15 @@ try
 
 			if(msg[0] == "error")
 			{
+				if(msg[1] == "1" || // Bad username or password
+				   msg[1] == "2")   // Not authorized
+				{
+					// If there were a stored pw, it must be wrong, so reove the cookies
+					document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
+					document.cookie = "password=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
+
+					loggedOut();
+				}
 				alert("Error(#" + unescape(msg[1]) + "): " + unescape(msg[2]));
 				f++;
 				continue;
@@ -197,11 +206,27 @@ catch(exception)
 
 function transmit(msg)
 {
-	//LogEvent(msg);
+	var logmsg = msg;
+
+	if(msg.match(/^login/g) != null)
+	{
+		// Don't show username and password in the log
+		logmsg = "login *** ***";
+		loggedIn();
+	}
+
+	if(msg.match(/^logout/g) != null)
+	{
+		// If there were a stored pw, remove them to prevent auto-login
+		document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
+		document.cookie = "password=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
+		loggedOut();
+	}
+
 	var messageEvent = new CustomEvent("messageEvent",
 	                                   {
 		                                   detail: {
-			                                   message: "send [" + msg + "]",
+			                                   message: "send [" + logmsg + "]",
 			                                   time: new Date(),
 		                                   },
 		                                   bubbles: true,
@@ -212,6 +237,26 @@ function transmit(msg)
 	socket_node.send(msg);
 }
 
+function loggedIn()
+{
+	var loggedInEvent = new CustomEvent("loggedInEvent",
+	                                    {
+		                                    bubbles: true,
+		                                    cancelable: true
+	                                    });
+	document.dispatchEvent(loggedInEvent);
+}
+
+function loggedOut()
+{
+	var loggedOutEvent = new CustomEvent("loggedOutEvent",
+	                                     {
+		                                     bubbles: true,
+		                                     cancelable: true
+	                                     });
+	document.dispatchEvent(loggedOutEvent);
+}
+
 function login(user, password)
 {
 	transmit("login "+user+" "+password);
diff --git a/src/ws/view.js b/src/ws/view.js
index b8ef19a..bdc5149 100644
--- a/src/ws/view.js
+++ b/src/ws/view.js
@@ -436,3 +436,58 @@ function changeState(e)
 		break;
 	}
 }
+
+function getCookie(cname)
+{
+	var name = cname + "=";
+	var decodedCookie = decodeURIComponent(document.cookie);
+	var ca = decodedCookie.split(';');
+	for(var i = 0; i <ca.length; i++)
+	{
+		var c = ca[i];
+		while (c.charAt(0) == ' ')
+		{
+			c = c.substring(1);
+		}
+		if (c.indexOf(name) == 0)
+		{
+			return c.substring(name.length, c.length);
+		}
+	}
+	return null;
+}
+
+document.addEventListener("loggedInEvent", loggedInEventHandler, false);
+function loggedInEventHandler(e)
+{
+	var loginOverlay = document.getElementById("login_overlay");
+	loginOverlay.style.display = "none";
+}
+
+document.addEventListener("loggedOutEvent", loggedOutEventHandler, false);
+function loggedOutEventHandler(e)
+{
+	var username = getCookie("username");
+	var password = getCookie("password");
+	if(username != null && password != null)
+	{
+		login(username, password);
+		return;
+	}
+
+	var loginOverlay = document.getElementById("login_overlay");
+	loginOverlay.style.display = "inherit";
+}
+
+function processLogin()
+{
+	var username = document.getElementById("username");
+	var password = document.getElementById("password");
+	var remember = document.getElementById("remember");
+	if(remember.value == "on")
+	{
+		document.cookie = "username="+username.value+"; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+		document.cookie = "password="+password.value+"; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+	}
+	login(username.value, password.value);
+}