Add code registration page

src/lib/overlays/welcome.svelte

@@ -21,10 +21,10 @@
 
   const pageText: string[] = [
     '<h3>Resgistration Errors</h3>' +
-      "<p>There is an issue registering with GWR email addresses being caused by the phishing prevension system in use.</p>" +
+      '<p>There is an issue registering with GWR email addresses being caused by the phishing prevension system in use.</p>' +
       '<p>You will be able to use Headcode and PIS lookups without registering.</p>' +
       '<p>Staff departure boards will remain unavailable unless registered due to sensitive information which may be shown.</p>' +
-      '<p>Join the conversation on the <a href="https://www.facebook.com/owlboard.support">Facebook page</a> where updates will be given.</p>',
+      '<p>Join the conversation on the <a href="https://www.facebook.com/owlboard.support">Facebook page</a> where updates will be given.</p>'
   ];
 </script>
 

src/lib/scripts/upstream.ts

@@ -1,7 +1,7 @@
 import { dev } from '$app/environment';
 
-const testUrl: string = 'http://localhost:8460'
+const testUrl: string = 'http://localhost:8460';
-const prodUrl: string = 'https://owlboard.info'
+const prodUrl: string = 'https://owlboard.info';
 
 export function getApiUrl() {
   if (dev) {

src/lib/train/pis-handler.svelte

@@ -11,8 +11,10 @@
     <span class="pis">PIS: {pisObject.code}</span>
   {:else if pisObject['skipCount'] > 0}
     <span class="pis">PIS: {pisObject.code}</span>
-    <br>
+    <br />
-    <span class="pis-text">(skip {pisObject.skipType}{#if pisObject.skipCount > 1} {" " + pisObject.skipCount} stops{:else} stop{/if})</span>
+    <span class="pis-text"
+      >(skip {pisObject.skipType}{#if pisObject.skipCount > 1} {' ' + pisObject.skipCount} stops{:else} stop{/if})</span
+    >
   {/if}
 {/if}
 

src/lib/train/train-detail.svelte

@@ -46,8 +46,10 @@
         <LoadingText />
       {:then serviceDetail}
         {#if serviceDetail.stpIndicator === 'C'}
-          <p class="text-message">This has been removed from the timetable for today.<br /><br>
+          <p class="text-message">
-          The service will not run, another service may be running in its place.</p>
+            This has been removed from the timetable for today.<br /><br />
+            The service will not run, another service may be running in its place.
+          </p>
         {:else}
           {#if serviceDetail.vstp}
             <div class="vstp">VSTP</div>

src/routes/+layout.svelte

@@ -7,7 +7,6 @@
 </script>
 
 <svelte:head>
-
   <!--
   ___         _ ___                   _ 
  / _ \__ __ _| | _ ) ___  __ _ _ _ __| |

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

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import Header from '$lib/navigation/header.svelte';
+  import Nav from '$lib/navigation/nav.svelte';
+  import { getApiUrl } from '$lib/scripts/upstream';
+  import { uuid } from '$lib/stores/uuid';
+
+  const title = 'Submit Registration';
+  let state = false;
+  let status: string;
+
+  let inputs: { id: string; value: string }[] = [
+    { id: '1', value: '' },
+    { id: '2', value: '' },
+    { id: '3', value: '' },
+    { id: '4', value: '' },
+    { id: '5', value: '' },
+    { id: '6', value: '' }
+  ];
+
+
+  function handleInput(index: number, event: KeyboardEvent): void {
+    if (event.key === 'Backspace' && index > 0 && inputs[index].value === '') {
+      const prevInput = document.getElementById(`input-${index}`);
+      if (prevInput) {
+        prevInput.focus();
+      }
+    } else if (inputs[index].value.length === 1) {
+      const nextInput = document.getElementById(`input-${index + 2}`);
+      if (nextInput) {
+        nextInput.focus();
+      }
+    }
+  }
+
+  async function handleSubmit() {
+    let submitString: string = '';
+    for (const input of inputs) {
+        submitString += input.value.toUpperCase()
+    }
+    console.log(`Code: ${submitString}`)
+    const res = await submit(submitString)
+    if (res == 201) {
+        status = "okay"
+    } else if (res == 401) {
+        status = "fail"
+    } else {
+        console.error("Unable to register: ", status)
+    }
+  }
+
+  async function submit(id: string): Promise<number> {
+    const url = `${getApiUrl()}/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;
+  }
+
+</script>
+
+<Header {title} />
+
+{#if state}
+  {#if status = "okay"}
+    <p class="title-ish">You are now registered</p>
+  {:else if status = "fail"}
+    <p class="title-ish">Your code was not accepted</p>
+  {/if}
+{:else}
+  <p class="title-ish">Enter your registration code below</p>
+  <form on:submit={handleSubmit} id="codeInputForm">
+    {#each inputs as input, index}
+      <input class="code-in" bind:value={input.value} id={`input-${input.id}`} maxlength="1" autocomplete="off" on:keydown={(event) => handleInput(index, event)} />
+    {/each}
+    <br />
+    <button type="submit">Submit</button>
+  </form>
+{/if}
+
+<Nav />
+
+<style>
+  .title-ish {
+    font-size: 20px;
+  }
+  .code-in {
+    margin: 3px;
+    margin-bottom: 20px;
+    width: 29px;
+    height: 39px;
+    font-size: 30px;
+    text-align: center;
+    text-transform: uppercase;
+    border-radius: 10px;
+    border: none;
+  }
+  #submit {
+  }
+</style>