Make it so that the "Other server" input is only shown when Other is …

…selected
Cardshifter · Mar 18, 2018 · 9109cd0 · 9109cd0
1 parent 3fb64d3
commit 9109cd0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/www/global.js b/www/global.js
@@ -22,5 +22,5 @@ const GAME_SERVERS = {
     "localhost" : `ws://127.0.0.1:${WS_PORT}`,
     "dwarftowers.com" : `ws://dwarftowers.com:${WS_PORT}`,
     "zomis.net" : `ws://stats.zomis.net:${WS_PORT}`,
-    "Other" : null
+    "Other" : ""
 };
diff --git a/www/sections/login/login.html b/www/sections/login/login.html
@@ -4,15 +4,11 @@ <h4>Please log in to continue.</h4>
         <div class="form-group">
             <label for="login_server_list" aria-label="Server">Server:</label>
             <select name="login_server_list" id="login_server_list" class="form-control">
-<!--                <option value="ws://127.0.0.1:4243">Local host</option>
-                <option value="ws://dwarftowers.com:4243">dwarftowers.com</option>
-                <option value="ws://stats.zomis.net:4243">zomis.net</option>
-                <option value="other">Other...</option>-->
             </select>
             <label for="login_secure">Is secure server:</label>
             <input name="login_secure" id="login_secure" type="checkbox" value="secure" />
         </div>
-        <div class="form-group">
+        <div id="login_server_other_container" class="form-group" style="display : none">
             <div id="login_server_other">
                 <label for="login_server_other_input">Other Server:</label>
                 <input name="login_server_other_input" id="login_server_other_input" type="text" class="form-control" />

diff --git a/www/sections/login/login.js b/www/sections/login/login.js
@@ -10,4 +10,15 @@ const loginHandler = function() {
             selectLoginServerList.add(option);
         }
     }
-};
+    const serverSelector = document.getElementById("login_server_list");
+    const serverOtherInputContainer = document.getElementById("login_server_other_container");
+
+    serverSelector.addEventListener("change", function() {
+        if (!serverSelector.value) {
+            serverOtherInputContainer.style.display = "block";
+        }
+        else {
+            serverOtherInputContainer.style.display = "none";
+        }
+    });
+};