Extend settings.html and .js to include registration

auth.html

@@ -30,12 +30,11 @@
       <source srcset="./images/logo/logo-full-250.png" type="image/png">
       <img class="titleimg" src="./images/logo/logo-full-250.png" alt="OwlBoard Logo">
     </picture>
-    <div>
-      <p id="cmd"></p>
+    <div id="cmd">
     </div>
     <!-- Footer -->
     <footer>
-      <p>Created by <a href="https://fredboniface.co.uk" target="_blank" rel="noreferrer noopener">Fred Boniface</a> - <span id="ver_str">1.2.4</span></p>
+      <p>Created by <a href="https://fredboniface.co.uk" target="_blank" rel="noreferrer noopener">Fred Boniface</a> - <span id="ver_str"></span></p>
     </footer>
   </body>
 </html>

index.html

@@ -66,7 +66,7 @@
       </div>
     <!-- Footer -->
     <footer>
-      <p>Created by <a href="https://fredboniface.co.uk" target="_blank" rel="noreferrer noopener">Fred Boniface</a> - <span id="ver_str">2.0.0-dev</span></p>
+      <p>Created by <a href="https://fredboniface.co.uk" target="_blank" rel="noreferrer noopener">Fred Boniface</a> - <span id="ver_str"></span></p>
     </footer>
   </body>
 </html>

js/lib.main.js

@@ -1,3 +1,7 @@
+/* All Page Init */
+const version = "2.0.0-dev";
+versionDisplay();
+
 /* Feature Detectors */
 
 /* Valid values for ${type}: localstorage, sessionstorage */
@@ -16,6 +20,12 @@ async function storageAvailable(type) {  // Currently not used
     }
 }
 
+async function versionDisplay() {
+    localStorage.setItem("version", version)
+    document.getElementById('ver_str').textContent = version
+    return;
+}
+
 /* Array Converter
    Converts a string to a single item array */
 async function makeArray(data) {

js/settings.js

@@ -3,6 +3,15 @@ const ql = ["ql0","ql1","ql2","ql3","ql4","ql5","ql6","ql7","ql8","ql9","ql10","
 storageAvailable("localStorage");
 getQl();
 hideLoading();
+ifAlreadyRegistered();
+
+async function ifAlreadyRegistered() {
+    if (! await isRegistered()) { return } else {
+        document.getElementsByName("eml")[0].placeholder = "Registered";
+        document.getElementById("reg_text").textContent = "You are already registered";
+        document.getElementById("reg_button").textContent = "Log Out";
+    }
+}
 
 async function getQl(){
     var qlOpt = await getQuickLinks()
@@ -48,6 +57,47 @@ async function clearQl(){
     hideDone();
 }
 
+async function isRegistered() {
+    if (localStorage.getItem("uuid")) {
+        return true
+        // Also need an API Call here to check if auth is working.
+    }
+    localStorage.removeItem("uuid");
+    return false
+}
+
+async function register() {
+    if (! await isRegistered()) {
+        showLoading()
+        let url = `${window.location.origin}/api/v1/auth/request`;
+        let email = document.getElementById("eml").textContent
+        let res = await fetch(url, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            redirect: "follow",
+            body: JSON.stringify({email: email})
+        })
+        if (res.status == 201) {
+            showDone();
+        }
+        // Need to send a post request to server with the email address
+        // the server responds with a 201 or a 401 response.
+        // Then the done popup can appear with a message asking the user
+        // to check their emails for the link.  The link takes then to the
+        // auth page which has login in auth.js
+    } else {
+        logout()
+    } 
+}
+
+async function logout() {
+    localStorage.removeItem("uuid");
+    location.reload();
+    return
+}
+
 async function showDone() {
     document.getElementById("done").style = "opacity: 1";
 }

settings.html

@@ -67,6 +67,14 @@
         <input type="text" maxlength="3" id="ql11" name="ql11" autocomplete="off" class="small-lookup-box"><br>
         <button onclick="setQl()" class="lookup-button">Apply</button>
         <button onclick="clearQl()" class="lookup-button">Defaults</button>
+        <br><br><br>
+      <label>Register for Rail Staff Version:</label><br>
+        <p id="reg_text">Enter your work email address:</p>
+        <input type="text" maxlength="128" id="eml" name="eml" autocomplete="email" class="lookup-box" placeholder="Not yet available"><br>
+        <p>Once you've registered you will receive an email with a link to create your access key.</p>
+        <p>Your email address is not stored by OwlBoard, accounts do not contain any identifying information and are automatically removed after six months of inactivity.</p>
+        <p>You can use the same email address again on another device to register.</p>
+        <button onclick="register()" class="lookup-button" id="reg_button">Register</button>
 
   </body>
 </html>