RLG-Web: add user registration

Update the server and client sides of RLG-Web to make use of the new
registration feature of sqlickrypt.

index-rlg.html

@@ -14,6 +14,7 @@
   <img src="/bell.png" alt="bell" id="bell">
 </div>
 <div id="termwrap">TERM</div>
+<div class="modal" id="keyboard">
 <div class="keyrow">
   <div class="key" onclick="vkey('`')">`</div>
   <div class="key" onclick="vkey('1')">1</div>
@@ -82,21 +83,46 @@
 <span onclick="textsize(false)">Smaller</span>
 <span onclick="textsize(true)">Larger</span>
 </div>
-<div>
+</div>
+<div class="modal" id="login">
 <form id="loginform" action="/login" method="post">
 <div>
 Name: <input type="text" name="name" id="input_name"> 
+</div>
+<div>
 Password: <input type="password" name="pw" id="input_pw">
+</div>
+<div>
 Choose game: <select name="game" id="input_game">
   <option label="Rogue V3" value="rogue3">Rogue V3</option>
   <option label="Rogue V4" value="rogue4">Rogue V4</option>
   <option label="Rogue V5" value="rogue5">Rogue V5</option>
   <option label="Super-Rogue" value="srogue">Super-Rogue</option>
 </select>
+</div>
+<div>
 <input type="submit" value="Play" onclick="formlogin(event)">
 </div>
 </form>
 </div>
+<div class="rbutton" onclick="setmode(&quot;register&quot;)">Register</div>
+<div class="modal" id="register">
+<form id="regform" action="/addacct" method="post">
+<div>
+Name: <input type="text" name="name" id="regin_name"> 
+</div>
+<div>
+Password: <input type="password" name="pw" id="regin_pw">
+</div>
+<div>
+E-mail (optional): <input type="text" name="email" id="regin_email">
+</div>
+<div>
+<input type="submit" value="Sign up" onclick="formreg(event)">
+<input type="reset" value="Cancel" onclick="setmode(&quot;login&quot, event)">
+</div>
+</form>
+</div>
 <div id="debug">
 <p>Debugging Output</p>
 </div>

rlgterm.js

@@ -320,6 +320,7 @@ function setup() {
   keyHexCodes.init();
   termemu.init("termwrap", 24, 80);
   setTitle("Not connected.");
+  setmode("login");
   return;
 }
 
@@ -364,7 +365,8 @@ function formlogin(ev) {
       termemu.resize(reply.h, reply.w);
       setTitle("Playing as " + loginmsg["name"]);
       debug(1, "Logged in with id " + termemu.sessid);
-      document.getElementById("loginform").style.display = "none";
+      //document.getElementById("loginform").style.display = "none";
+      setmode("play");
       getData();
     }
     else if (reply.t == 'E') {
@@ -378,6 +380,36 @@ function formlogin(ev) {
   return;
 }
 
+function formreg(ev) {
+  ev.preventDefault();
+  if (termemu.sessid != null)
+    return;
+  var regmsg = {};
+  regmsg["name"] = document.getElementById("regin_name").value;
+  regmsg["pw"] = document.getElementById("regin_pw").value;
+  regmsg["email"] = document.getElementById("regin_email").value;
+  var req = new XMLHttpRequest();
+  req.onreadystatechange = function () {
+    if (req.readyState != 4 || req.status != 200) 
+      return;
+    var reply = JSON.parse(req.responseText);
+    if (reply.t == 'r') {
+      /* Success */
+      debug(1, "Registered account: " + reply.d);
+      setmode("login");
+    }
+    else if (reply.t == 'E') {
+      debug(1, "Could not register: " + reply.s);
+      document.getElementById("regin_name").value = "";
+      document.getElementById("regin_pw").value = "";
+      document.getElementById("regin_email").value = "";
+    }
+  };
+  req.open('POST', '/addacct', true);
+  req.send(JSON.stringify(regmsg));
+  return;
+}
+
 function logout() {
   if (termemu.sessid == null)
     return;
@@ -386,7 +418,8 @@ function logout() {
   nsend = 0;
   nrecv = 0;
   msgQ = [];
-  document.getElementById("loginform").style.display = "block";
+  //document.getElementById("loginform").style.display = "block";
+  setform("login");
   return;
 }
 
@@ -403,6 +436,26 @@ function stop() {
   return;
 }
 
+function setmode(mode, ev) {
+  if (ev)
+    ev.preventDefault();
+  if (mode == "play") {
+    document.getElementById("keyboard").style.display = "block";
+    document.getElementById("login").style.display = "none";
+    document.getElementById("register").style.display = "none";
+  }
+  else if (mode == "login") {
+    document.getElementById("keyboard").style.display = "none";
+    document.getElementById("login").style.display = "block";
+    document.getElementById("register").style.display = "none";
+  }
+  else if (mode == "register") {
+    document.getElementById("keyboard").style.display = "none";
+    document.getElementById("login").style.display = "none";
+    document.getElementById("register").style.display = "block";
+  }
+}
+
 function debug(level, msg) {
   if (level < debugSuppress)
     return;

rlgwebd.js

@@ -321,12 +321,53 @@ function login(req, res, formdata) {
     });
   }
   /* Launch the sqlickrypt utility to check the password. */
-  var checker = require('child_process').spawn("/bin/sqlickrypt");
+  var checker = child_process.spawn("/bin/sqlickrypt", ["check"]);
   checker.on("exit", checkit);
   checker.stdin.end(username + '\n' + password + '\n', "utf8");
   return;
 }
 
+function register(req, res, formdata) {
+  var uname, passwd, email;
+  if (typeof (formdata.name) != "string" || formdata.name === "") {
+    sendError(res, 2, "No name given.");
+    return;
+  }
+  else
+    uname = formdata["name"];
+  if (typeof (formdata.pw) != "string" || formdata.pw === "") {
+    sendError(res, 2, "No password given.");
+    return;
+  }
+  else
+    passwd = formdata["pw"];
+  if (typeof (formdata.email) != "string" || formdata.email === "") {
+    /* E-mail is optional */
+    email = "nobody@nowhere.not";
+  }
+  else
+    email = formdata["email"];
+  function checkreg(code, signal) {
+    if (code == 4)
+      sendError(res, 2, "Invalid characters in name or email.");
+    else if (code == 1)
+      sendError(res, 2, "Username " + uname + " is already being used.");
+    else if (code != 0)
+      sendError(res, 0, null);
+    else {
+      res.writeHead(200, {'Content-Type': 'text/plain'});
+      var reply = {"t": "r", "d": uname};
+      res.write(JSON.stringify(reply));
+      res.end();
+      console.log("Added new user: " + uname);
+    }
+  }
+  var child_adder = child_process.spawn("/bin/sqlickrypt", ["register"]);
+  child_adder.on("exit", checkreg);
+  child_adder.stdin.end(uname + '\n' + passwd + '\n' + email + '\n', "utf8");
+  return;
+}
+
 function logout(term, res) {
   if (!term.alive) {
     sendError(res, 1, null);
@@ -482,6 +523,9 @@ function handler(req, res) {
       else if (target == "/login") {
         login(req, res, formdata);
       }
+      else if (target == "/addacct") {
+        register(req, res, formdata);
+      }
       else {
         res.writeHead(405, resheaders);
         res.end();

tty.css

@@ -7,6 +7,9 @@ img#bell {
 	visibility: hidden;
 	margin-left: 2em;
 }
+div.modal {
+	clear: both;
+}
 div.keyrow {
 	font-size: 1.2em;
 }