From d5134d681d8f3781ca0fc7574cf13af5832cf43a Mon Sep 17 00:00:00 2001
From: Francis Veilleux-Gaboury <Phrancis@users.noreply.github.com>
Date: Tue, 28 Jul 2015 11:30:06 -0400
Subject: [PATCH 1/2] Update login.html

Rudimentary connection to websocket.org to test the connection test
---
 login/login.html | 147 ++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 119 insertions(+), 28 deletions(-)
diff --git a/login/login.html b/login/login.html
index 94eedac..78ff015 100644
--- a/login/login.html
+++ b/login/login.html
@@ -1,32 +1,123 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Cardshifter -- Login</title>
-        <link rel = "stylesheet" type = "text/css" href = "login.css">
-    </head>
-    <body>
-        <noscript>To play CardShifter, please either enable JavaScript or use a JavaScript-enabled browser.</noscript>
-        <form name = "login_information">
-            Server:
-            <select name = "server">
-                <option value = "127.0.0.1">Local host</option>
-                <option value = "dwarftowers.com">dwarftowers.com</option>
-                <option value = "other">Other...</option>
-            </select>
+
+<head>
+    <title>Cardshifter -- Login</title>
+    <link rel="stylesheet" type="text/css" href="login.css">
+</head>
+
+<body>
+    <noscript>To play CardShifter, please either enable JavaScript or use a JavaScript-enabled browser.</noscript>
+    <h1>Cardshifter login</h1>
+    <form name="login_information">
+        Server:
+        <select name="server">
+            <option value="127.0.0.1">Local host</option>
+            <option value="dwarftowers.com">dwarftowers.com</option>
+            <option value = "ws://echo.websocket.org/">WebSocket.org echo test</option>
+            <option value="other">Other...</option>
+        </select>
+        <br/>
+        <div id="server_other">
+            Other Server:
+            <input name="server_other" type="text" />
             <br/>
-            <div id = "server_other">
-                Other Server:
-                <input name = "server_other" type = "text"/>
-                <br/>
-            </div>
-            Username:
-            <input name = "username" type = "text" placeholder = "John Smith" />
-            <br/>
-            Is secure server:
-            <input name = "secure" type = "checkbox"/>
-            <br/>
-            <input name = "submit" type = "button" value = "Log in" />
-        </form>
-        <script src = "login.js"></script>
-    </body>
+        </div>
+        Username:
+        <input name="username" type="text" placeholder="Enter name..." />
+        <br/> Is secure server:
+        <input name="secure" type="checkbox" />
+        <br/>
+        Test message to server (for testing only):
+        <input name = "testMessage" type = "test" placeholder = "Hello, World!" />
+        <br/>
+        <input name="submit" type="button" value="Log in" />
+        <input name ="test_websocket" type="button" value="Test WebSocket" />
+    </form>
+    <script src="login.js"></script>
+
+    <!-- Temporary WebSocket connection test prints result to document -->
+
+    <!-- EXTERNAL SCRIP DOESN'T WORK YET | 2015-07-28 @Phrancis
+    <script src="connection-test.js">
+    -->
+
+    <script "type="text/javascript">
+    // @TODO: Extract this functionality to external file.
+
+    loginForm = document.forms['login_information'];
+    
+    loginForm.elements['test_websocket'].addEventListener("click", init);
+    
+    var wsUri = "ws://echo.websocket.org/";
+    var output;
+    
+    function init() {
+      output = document.getElementById("output");
+      testWebSocket();
+    }
+    
+    function testWebSocket() {
+
+      // Message to append input values to document prior to printing test results
+      var wsInfo = document.createElement("h3");
+      wsInfo.innerHTML = "Testing WebSocket connection...";
+      output.appendChild(wsInfo);
+
+      // Begin WebSocket test
+
+      websocket = new WebSocket(wsUri);
+      websocket.onopen = function(evt) {
+        onOpen(evt)
+      };
+      websocket.onclose = function(evt) {
+        onClose(evt)
+      };
+      websocket.onmessage = function(evt) {
+        onMessage(evt)
+      };
+      websocket.onerror = function(evt) {
+        onError(evt)
+      };
+    }
+    
+    function onOpen(evt) {
+      writeToScreen("CONNECTED");
+      doSend("TEST");
+    }
+    
+    function onClose(evt) {
+      writeToScreen("DISCONNECTED");
+    }
+    
+    function onMessage(evt) {
+      writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data + '</span>');
+      websocket.close();
+    }
+    
+    function onError(evt) {
+      writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
+    }
+    
+    function doSend(message) {
+      writeToScreen("SENT: " + message);
+      websocket.send(message);
+    }
+    
+    function writeToScreen(message) {
+
+      var pre = document.createElement("p");
+      pre.style.wordWrap = "break-word";
+      pre.innerHTML = message;
+      output.appendChild(pre);
+    }
+
+    </script>
+    <!-- <h2>WebSocket Test</h2> -->
+    <div id="output"></div>
+
+    <!-- end temporary connection test -->
+
+</body>
+
 </html>

From 37099f12043f54c460ac6e1b34b3b44ea57e8473 Mon Sep 17 00:00:00 2001
From: Francis Veilleux-Gaboury <Phrancis@users.noreply.github.com>
Date: Tue, 28 Jul 2015 17:49:51 -0400
Subject: [PATCH 2/2] Issue #3 - Added a rudimentary websocket connection test

The connection test appears to be working correctly. I added a ping to websocket.org to test the test, and also tested against Cardshifter server running locally. Local connection raised `java.lang.ArrayIndexOutOfBoundsException` on server side, but maintained the connection until I shut down the server.
---
 login/login.html | 91 ++++++++++++++++++++++++++++++------------------
 1 file changed, 57 insertions(+), 34 deletions(-)

diff --git a/login/login.html b/login/login.html
index 78ff015..b4d73c9 100644
--- a/login/login.html
+++ b/login/login.html
@@ -9,64 +9,87 @@
 <body>
     <noscript>To play CardShifter, please either enable JavaScript or use a JavaScript-enabled browser.</noscript>
     <h1>Cardshifter login</h1>
-    <form name="login_information">
-        Server:
-        <select name="server">
-            <option value="127.0.0.1">Local host</option>
-            <option value="dwarftowers.com">dwarftowers.com</option>
-            <option value = "ws://echo.websocket.org/">WebSocket.org echo test</option>
+    <form name="login_information" id="login_information">
+        <label for="server">Server:</label>
+        <select name="server" id="server">
+            <option value="ws://127.0.0.1:4243">Local host</option>
+            <option value="ws://dwarftowers.com:4243">dwarftowers.com</option>
+            <option value="ws://echo.websocket.org/">WebSocket.org echo test</option>
             <option value="other">Other...</option>
         </select>
         <br/>
         <div id="server_other">
-            Other Server:
-            <input name="server_other" type="text" />
+            <label for="server_other">Other Server:</label>
+            <input name="server_other" id="server_other" type="text" />
             <br/>
         </div>
-        Username:
-        <input name="username" type="text" placeholder="Enter name..." />
-        <br/> Is secure server:
-        <input name="secure" type="checkbox" />
+        <label for="username">Username:</label>
+        <input name="username" id="username" type="text" placeholder="Enter name..." />
+        <br/> 
+        <label for="secure">Is secure server:</label>
+        <input name="secure" id="secure" type="checkbox" value="secure" />
         <br/>
-        Test message to server (for testing only):
-        <input name = "testMessage" type = "test" placeholder = "Hello, World!" />
+        <label for="test_message">Test message to server:</label>
         <br/>
-        <input name="submit" type="button" value="Log in" />
-        <input name ="test_websocket" type="button" value="Test WebSocket" />
+        <input name="test_message" id="test_message" type="text" size="100" placeholder="Optional... Leave blank unless using for testing." />
+        <br/>
+        <input name="submit" id=submit" type="button" value="Log in" />
+        <input name ="test_websocket" id="test_websocket "type="button" value="Test WebSocket" />
     </form>
     <script src="login.js"></script>
 
     <!-- Temporary WebSocket connection test prints result to document -->
 
-    <!-- EXTERNAL SCRIP DOESN'T WORK YET | 2015-07-28 @Phrancis
-    <script src="connection-test.js">
-    -->
-
-    <script "type="text/javascript">
+    <script type="text/javascript">
     // @TODO: Extract this functionality to external file.
 
-    loginForm = document.forms['login_information'];
+    login_information = document.login_information;
     
-    loginForm.elements['test_websocket'].addEventListener("click", init);
+    login_information.elements.test_websocket.addEventListener("click", init);
     
-    var wsUri = "ws://echo.websocket.org/";
-    var output;
+    //var server = "ws://echo.websocket.org/";
+    //var username = document.getElementsByName("username").value.toString();
+
+    var server
+      , username
+      , test_message
+      , websocket_output;
     
     function init() {
-      output = document.getElementById("output");
+
+      server = document.getElementById("server").value.toString();
+      if (server === "other") { 
+        server = document.getElementById("server_other").value.toString(); 
+      }
+      username = document.getElementById("username").value.toString();
+      test_message = document.getElementById("test_message").value.toString();
+      if (!test_message) {
+        test_message = '{ "command": "login", "username": "' + username + '" }';
+      }
+
+      websocket_output = document.getElementById("websocket_output");
+
       testWebSocket();
     }
     
     function testWebSocket() {
 
       // Message to append input values to document prior to printing test results
-      var wsInfo = document.createElement("h3");
-      wsInfo.innerHTML = "Testing WebSocket connection...";
-      output.appendChild(wsInfo);
+      var wsHeader = document.createElement("h3");
+      wsHeader.innerHTML = "Testing WebSocket connection...";
+      websocket_output.appendChild(wsHeader);
+
+      var wsInput = document.createElement("p");
+      wsInput.innerHTML = 
+        "Server: " + server + "<br/>" +
+        "Username: " + username +  "<br/>" +
+        "Message: " + test_message;
+
+      websocket_output.appendChild(wsInput);
 
       // Begin WebSocket test
 
-      websocket = new WebSocket(wsUri);
+      websocket = new WebSocket(server);
       websocket.onopen = function(evt) {
         onOpen(evt)
       };
@@ -83,7 +106,7 @@ <h1>Cardshifter login</h1>
     
     function onOpen(evt) {
       writeToScreen("CONNECTED");
-      doSend("TEST");
+      doSend(test_message);
     }
     
     function onClose(evt) {
@@ -109,12 +132,12 @@ <h1>Cardshifter login</h1>
       var pre = document.createElement("p");
       pre.style.wordWrap = "break-word";
       pre.innerHTML = message;
-      output.appendChild(pre);
+      websocket_output.appendChild(pre);
     }
 
     </script>
-    <!-- <h2>WebSocket Test</h2> -->
-    <div id="output"></div>
+
+    <div id="websocket_output"></div>
 
     <!-- end temporary connection test -->
 
