Implement user request/registration

dockerfile

@@ -10,3 +10,4 @@ RUN npm run build
 
 FROM nginx:alpine-slim
 COPY --from=build /app/build /usr/share/nginx/html
+RUN chown -R nginx:nginx /usr/share/nginx/html

src/routes/more/+page.svelte

@@ -5,6 +5,7 @@
     
     const links = [
         {title: "Your Data", path: "/more/data"},
+        {title: "Registration", path: "/more/reg"},
         {title: "Location Reference Code Lookup", path: "/more/corpus"},
         {title: "Reason Code Lookup", path: "/more/reasons"},
         {title: "Privacy Policy", path: "/more/privacy"},

src/routes/more/reg/+page.svelte

@@ -0,0 +1,110 @@
+<script>
+    import Header from "$lib/navigation/header.svelte";
+    import Nav from "$lib/navigation/nav.svelte";
+    import Loading from "$lib/navigation/loading.svelte";
+    import { onMount } from "svelte";
+    import { uuid } from "$lib/stores/uuid.js";
+
+    const title = "Register";
+
+    let state = "unreg";
+    let isLoading = false;
+    let inputValue = "";
+
+    function handleInput(event) {
+      inputValue = event.target.value;
+    }
+
+    async function request() {
+        isLoading = true;
+        const url = 'https://owlboard.info/api/v2/user/request';
+        const request = {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                email: inputValue
+            })
+        }
+        const res = await fetch(url, request);
+        if (res.status == 400 || res.status == 403) {
+            state = "unauth";
+        } else if (res.status == 201) {
+            state = "sent";
+        } else {
+            state = "error";
+        }
+        isLoading = false;
+    }
+
+    onMount(async () => {
+        if (!uuid) {
+            state = "reg"
+        }
+    })
+
+</script>
+
+{#if isLoading}
+  <Loading />
+{/if}
+
+<Header {title} />
+{#if state == "unreg"}
+  <p>The staff version of OwlBoard offers several extra features:</p>
+  <ul>
+      <li>Access the Train Finder</li>
+      <li>Access the PIS Finder</li>
+      <li>More detailed departure boards:</li>
+      <ul>
+          <li>Non-Passenger movements</li>
+          <li>Hidden platform numbers</li>
+          <li>Display up to 40 services</li>
+      </ul>
+  </ul>
+  <p>To register, you will need to enter a work email address to receive a confirmation email</p>
+  <input type="text" autocomplete="email" placeholder="Enter work email" bind:value={inputValue} on:input={handleInput}><br>
+  <button type="submit" on:click={request}>Submit</button>
+{:else if state == "sent"}
+  <p>An email has been sent, click the link in the email to activate your profile.</p>
+  <p>When you click the link, your authorisation key will be automatically be stored in your browser.</p>
+  <p>If you use multiple browsers, you will only be logged in using the browser you open the link with.</p>
+  <p>You will be able to register again using the same email address</p>
+{:else if state == "unauth"}
+  <p>The email address you entered does not belong to an authorised business.</p>
+  <p>If you think this is an error, you can report an issue in the 'More' menu.</p>
+{:else if state == "error"}
+  <p>There was an error processing your request.</p>
+  <p>Check that the email you entered was correct or try again later.</p>
+{:else if state == "reg"}
+  <p>You are already registered for OwlBoard</p>
+{/if}
+  <Nav />
+
+<style>
+    ul {
+        text-align: left;
+        color: white;
+    }
+    input {
+        height: 40px;
+        width: 80%;
+        max-width: 375px;
+        font-family: urwgothic, 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+        text-align: center;
+        font-size: 20px;
+        border-radius: 50px;
+        border: none;
+        margin-bottom: 20px;
+    }
+    button {
+        border: none;
+        background-color: var(--overlay-color);
+        color: white;
+        width: 35%;
+        height: 30px;
+        border-radius: 50px;
+        font-size: 18px;
+    }
+</style>

src/routes/more/reg/submit/+page.svelte

@@ -0,0 +1,72 @@
+<script>
+    import Header from "$lib/navigation/header.svelte";
+    import Loading from "$lib/navigation/loading.svelte";
+    import Nav from "$lib/navigation/nav.svelte";
+    import { uuid } from "$lib/stores/uuid.js";
+    import { onMount } from "svelte";
+
+    const title = "Registration"
+    let state = "";
+    let isLoading = true
+
+    async function getUUID() {
+        return new URLSearchParams(window.location.search).get('key');
+    }
+
+    async function submit(id) {
+        const url = "https://owlboard.info/api/v2/user/register"
+        const request = {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                uuid: id
+            })
+        }
+        const res = await fetch(url, request);
+        const body = await res.json();
+        if (body.api_key) {
+            uuid.set(body.api_key);
+            return 201
+        }
+        return res.status;
+    }
+
+    onMount(async () => {
+        const id = await getUUID() || "";
+        if (id == "" || !id) {
+            state = "none"
+            isLoading = false
+            return
+        }
+        const status = await submit(id)
+        if (status == 201) {
+            console.log("Registered Successfully")
+            state = "done"
+        } else if (status == 401) {
+            console.log("Invalid Key")
+            state = "unauth"
+        } else {
+            console.log("Error")
+            state = "error"
+        }
+        isLoading = false
+    })
+</script>
+<Header {title} />
+{#if isLoading}
+  <Loading />
+{/if}
+{#if state == "none"}
+  <p>Unable to read your access key.</p>
+  <p>Please click the link in your email again.</p>
+{:else if state == "unauth"}
+  <p>Your link is not valid, links expire after 30 minutes.</p>
+  <p>You can try to register again.</p>
+{:else if state == "error"}
+  <p>There was an error on our end, please try again later</p>
+{:else if state == "done"}
+  <p>You are now logged in</p>
+{/if}
+<Nav />