3 files changed, 42 insertions, 1 deletions
diff --git a/static/index.css b/static/index.css
index 1d1c542..4f4981e 100644
--- a/static/index.css
+++ b/static/index.css
@@ -6,6 +6,14 @@ body {
   font-size: 30px;
 }
 
+body.unauth #list {
+  display: none;
+}
+
+body.okauth #login {
+  display: none;
+}
+
 .item {
   margin-bottom: 4px;
 }
diff --git a/static/index.html b/static/index.html
index 67ba2f8..6b7b06c 100644
--- a/static/index.html
+++ b/static/index.html
@@ -7,7 +7,13 @@
 <script src="/index.js"></script>
 <link rel="stylesheet" href="/index.css">
 </head>
-<body>
+<body class="unauth">
+  <div id="login">
+    <input type="password" id="password" placeholder="cheese" onkeypress="doPasswordKeypress(event)">
+    <input type="button" id="loginbtn" onclick="doLogin()" value="Login" disabled="">
+    <br>
+    <div id="unauthlog"></div>
+  </div>
   <div id="list"></div>
 </body>
 </html>
diff --git a/static/index.js b/static/index.js
index 23d53ea..31099d6 100644
--- a/static/index.js
+++ b/static/index.js
@@ -6,11 +6,26 @@ var el_list = null;
 function setupSocket() {
   socket = io();
 
+  document.getElementById("loginbtn").removeAttribute("disabled");
+
+  socket.on("unauth", function() {
+    document.body.classList.remove("okauth");
+    document.body.classList.add("unauth");
+    var span = document.createElement("span");
+    var unauthlog = document.getElementById("unauthlog");
+    span.appendChild(document.createTextNode("unauth received"));
+    unauthlog.appendChild(span);
+    setTimeout(function() { unauthlog.removeChild(span); }, 1500);
+  });
+
   socket.on("init", function(list) {
     // Reload if server restarted
     if (!is_initialised) is_initialised = true;
     else { location.reload(); return; }
 
+    document.body.classList.remove("unauth");
+    document.body.classList.add("okauth");
+
     glist = list;
     for (var i = 0; i < glist.length; i++) glist[i].push(null);
     initialiseList();
@@ -190,7 +205,19 @@ function reinsertItem(index) {
   insertItem(votes, string);
 }
 
+function doLogin() {
+  const password = document.getElementById("password").value;
+  socket.emit("login", password);
+}
+
+function doPasswordKeypress(ev) {
+  if (ev.key == "Enter" || ev.keyCode == 10 || ev.keyCode == 13) {
+    doLogin();
+  }
+}
+
 window.addEventListener("load", function() {
   el_list = document.getElementById("list");
   setupSocket();
+  document.getElementById("password").focus();
 });