Closes issue: OwlBoard/backend#39

Still awaiting the check auth endpoint, the code only acts on a 401 response.  That means that it currently will not detect if an account is expired.

.eslintrc.cjs

@@ -1,11 +1,6 @@
 module.exports = {
   root: true,
-	extends: [
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:svelte/recommended', 'prettier'],
-		'eslint:recommended',
-		'plugin:@typescript-eslint/recommended',
-		'plugin:svelte/recommended',
-		'prettier'
-	],
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],
   parserOptions: {
@@ -28,4 +23,3 @@ module.exports = {
     }
   ]
 };
-

src/lib/islands/result-island.svelte

@@ -2,9 +2,9 @@
   import Island from '$lib/islands/island.svelte';
 
   interface resultObj {
-    results: boolean,
+    results: boolean;
-    title: string,
+    title: string;
-    resultLines: string[]
+    resultLines: string[];
   }
 
   export let resultObject: resultObj = {

src/lib/ldb/staff/staff-ldb-dev.svelte

@@ -9,7 +9,7 @@
   import Island from '$lib/islands/island.svelte';
   import TableGeneratorDev from './table/table-generator_dev.svelte';
 
-  const TableGenerator = TableGeneratorDev
+  const TableGenerator = TableGeneratorDev;
 
   import type { StaffLdb, NrccMessage, TrainServices, ApiResponse } from '@owlboard/ts-types';
 
@@ -22,9 +22,9 @@
 
   $: {
     if (isLoading) {
-      title = "Loading..."
+      title = 'Loading...';
     } else {
-      title = station
+      title = station;
     }
   }
 

src/lib/ldb/staff/table/table-generator_dev.svelte

@@ -13,55 +13,77 @@
   }
 
   async function formatLocations(locations: ServiceLocation[]): Promise<string> {
-    let tiplocs: string[] = []
+    let tiplocs: string[] = [];
     for (const location of locations) {
-      tiplocs.push(location.tiploc)
+      tiplocs.push(location.tiploc);
     }
-    return tiplocs.join(' & ')
+    return tiplocs.join(' & ');
   }
 
   async function classGenerator(service: TrainServices) {
-    let otherArr: string[] = []
+    let otherArr: string[] = [];
-    let arrArr: string[] = []
+    let arrArr: string[] = [];
-    let depArr: string[] = []
+    let depArr: string[] = [];
-    let platArr: string[] = []
+    let platArr: string[] = [];
 
-    if (service.isCancelled) {otherArr.push("canc")}
+    if (service.isCancelled) {
-    if (service.serviceIsSupressed) {otherArr.push("nonPass")}
+      otherArr.push('canc');
-    if (service.platformIsHidden) {platArr.push("nonPass")}
+    }
+    if (service.serviceIsSupressed) {
+      otherArr.push('nonPass');
+    }
+    if (service.platformIsHidden) {
+      platArr.push('nonPass');
+    }
 
     if (service.sta !== undefined) {
       if (service.eta !== undefined) {
-      if (service.sta < service.eta) { arrArr.push("late"); }
+        if (service.sta < service.eta) {
+          arrArr.push('late');
+        }
       } else if (service.ata !== undefined) {
-      if (service.sta < service.ata) { arrArr.push("late"); }
+        if (service.sta < service.ata) {
+          arrArr.push('late');
+        }
       }
       if (service.eta !== undefined) {
-      if (service.sta > service.eta) { arrArr.push("early"); }
+        if (service.sta > service.eta) {
+          arrArr.push('early');
+        }
       } else if (service.ata !== undefined) {
-      if (service.sta > service.ata) { arrArr.push("early"); }
+        if (service.sta > service.ata) {
+          arrArr.push('early');
+        }
       }
     }
 
     if (service.std !== undefined) {
       if (service.etd !== undefined) {
-      if (service.std < service.etd) { depArr.push("late"); }
+        if (service.std < service.etd) {
+          depArr.push('late');
+        }
       } else if (service.atd !== undefined) {
-      if (service.std < service.atd) { depArr.push("late"); }
+        if (service.std < service.atd) {
+          depArr.push('late');
+        }
       }
       if (service.etd !== undefined) {
-      if (service.std > service.etd) { depArr.push("early"); }
+        if (service.std > service.etd) {
+          depArr.push('early');
+        }
       } else if (service.atd !== undefined) {
-      if (service.std > service.atd) { depArr.push("early"); }
+        if (service.std > service.atd) {
+          depArr.push('early');
+        }
       }
     }
 
     return {
-      other: otherArr.join(" "),
+      other: otherArr.join(' '),
-      arr: arrArr.join(" "),
+      arr: arrArr.join(' '),
-      dep: depArr.join(" "),
+      dep: depArr.join(' '),
-      plat: platArr.join(" "),
+      plat: platArr.join(' ')
-    }
+    };
   }
 </script>
 
@@ -93,10 +115,14 @@
         <td class="from {classes.other}">{#await formatLocations(service.origin) then txt}{txt}{/await}</td>
         <td class="to {classes.other}">{#await formatLocations(service.destination) then txt}{txt}{/await}</td>
         <td class="plat">{service.platform || '-'}</td>
-        <td class="time schTime {classes.other}">{service.sta || '-'}</td>                      <!-- All time need to be displayed appropriately -->
+        <td class="time schTime {classes.other}">{service.sta || '-'}</td>
-        <td class="time {classes.other} {classes.arr}">{service.eta || service.ata || '-'}</td> <!-- All time need to be displayed appropriately -->
+        <!-- All time need to be displayed appropriately -->
-        <td class="time schTime {classes.other}">{service.std || '-'}</td>                      <!-- All time need to be displayed appropriately -->
+        <td class="time {classes.other} {classes.arr}">{service.eta || service.ata || '-'}</td>
-        <td class="time {classes.other} {classes.dep}">{service.etd || service.atd || '-'}</td> <!-- All time need to be displayed appropriately -->
+        <!-- All time need to be displayed appropriately -->
+        <td class="time schTime {classes.other}">{service.std || '-'}</td>
+        <!-- All time need to be displayed appropriately -->
+        <td class="time {classes.other} {classes.dep}">{service.etd || service.atd || '-'}</td>
+        <!-- All time need to be displayed appropriately -->
       {/await}
     </tr>
     <tr>

src/lib/libauth.ts

@@ -1,4 +1,4 @@
-import { uuid } from "./stores/uuid"
+import { uuid } from './stores/uuid';
 
 export interface libauthResponse {
   uuidPresent?: boolean;
@@ -18,47 +18,46 @@ export async function checkAuth(): Promise<libauthResponse> {
   result.uuidPresent = uuidCheck?.uuidPresent;
   result.uuidValue = uuidCheck?.uuidValue;
 
-    const serverCheck = await checkServerAuth();
+  const serverCheck = await checkServerAuth(result.uuidValue || '');
   result.serverAuthCheck = serverCheck.authOk;
   result.serverAuthCheckResponseCode = serverCheck.status;
 
-    return result
+  return result;
 }
 
-export async function checkUuid(): Promise<uuidCheckRes> {
+async function checkUuid(): Promise<uuidCheckRes> {
   let uuid_value: string = '';
-    const unsubscribe = uuid.subscribe(value => {
+  const unsubscribe = uuid.subscribe((value) => {
     uuid_value = value;
   });
   let res: uuidCheckRes = {
     uuidValue: uuid_value
-    }
+  };
-    console.log("uuid-value is: ", uuid_value)
+  console.log('uuid-value is: ', uuid_value);
   if (uuid_value && uuid_value != 'null') {
     res = {
       uuidPresent: true,
-            uuidValue: uuid_value,
+      uuidValue: uuid_value
-        }
+    };
   } else {
     res = {
       uuidPresent: false,
-        uuidValue: uuid_value,
+      uuidValue: uuid_value
+    };
+  }
+  unsubscribe();
+  return res;
 }
 
-}unsubscribe()
+async function checkServerAuth(uuidString: string) {
-return res;}
+  const url = 'https://owlboard.info/api/v2/user/checkAuth';
-
-export async function checkServerAuth() {
-    let uuid_value: string = '';
-    uuid.subscribe((value => uuid_value = value))
-    const url = "https://owlboard.info/api/v2/user/checkAuth"
   const options = {
     method: 'GET',
     headers: {
-          uuid: uuid_value,
+      uuid: uuidString
     }
   };
-    const res = await fetch(url, options)
+  const res = await fetch(url, options);
   let ok: boolean;
   if (res.status !== 401) {
     ok = true;
@@ -67,6 +66,11 @@ export async function checkServerAuth() {
   }
   return {
     authOk: ok,
-        status: res.status,
+    status: res.status
+  };
 }
+
+export async function logout(): Promise<boolean> {
+  uuid.set(null);
+  return true;
 }

src/lib/navigation/LogoutButton.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { logout } from '$lib/libauth';
+
+  async function logoutAction() {
+    await logout();
+    location.reload();
+  }
+</script>
+
+<button class="logout" type="button" on:click={logoutAction}>Logout</button>
+
+<style>
+  .logout {
+    border: none;
+    background-color: var(--overlay-color);
+    color: white;
+    width: 35%;
+    border-radius: 50px;
+    font-size: 20px;
+    min-width: 90px;
+    margin: 30px;
+    height: 48px;
+  }
+</style>

src/lib/navigation/loading-text.svelte

@@ -1,4 +1,5 @@
 <p id="load">Loading...</p>
+
 <style>
   #load {
     margin-top: 5px;

src/lib/overlays/welcome.svelte

@@ -21,7 +21,7 @@
 
   const pageText: string[] = [
     '<h3>Sign-up Fixed</h3>' +
-      "<p>An issue present since 28/07/2023 has meant that new users or users with expired logins are unable to register.</p>" +
+      '<p>An issue present since 28/07/2023 has meant that new users or users with expired logins are unable to register.</p>' +
       '<p>This issue has now been fixed and new users will be able to register for Rail Staff Access</p>',
     '<h3>Always Improving</h3>' +
       '<p>OwlBoard is always improving, the current focus is to improve performance when you have low mobile signal by reducing the amount of data being sent.</p>'

src/lib/stores/tocMap.ts

@@ -40,5 +40,4 @@ export const tocs = new Map<string, string>([
   ['zz', 'Freight/Charter Company'],
   ['wm', 'West Midlands Railway (WMT)'],
   ['uk', 'Unknown Operator']
-]
+]);
-)

src/lib/train/styles-toc.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    export let toc: string
+  export let toc: string;
   export let full: boolean = false;
 
-    import { tocs as map } from "$lib/stores/tocMap";
+  import { tocs as map } from '$lib/stores/tocMap';
 
-    let text: string
+  let text: string;
 
   $: {
     if (full) {
@@ -13,10 +13,9 @@
       text = toc;
     }
   }
-
 </script>
 
-<span class="{toc.toLocaleLowerCase()}">{text}</span>
+<span class={toc.toLocaleLowerCase()}>{text}</span>
 
 <style>
   span {
@@ -27,154 +26,193 @@
     background-color: white;
     color: black;
   }
-    .gw { /* GWR */
+  .gw {
+    /* GWR */
     background-color: #07352d;
     color: white;
     border-color: #041d18;
   }
-    .sw, .il { /* SWR & Island Line */
+  .sw,
+  .il {
+    /* SWR & Island Line */
     background-color: rgb(17, 23, 23);
     color: white;
   }
-    .nt { /* Northern */
+  .nt {
+    /* Northern */
     background-color: rgb(38, 34, 98);
     color: white;
   }
-    .aw { /* TfW */
+  .aw {
+    /* TfW */
     background-color: red;
     color: white;
   }
-    .cc { /* c2c */
+  .cc {
+    /* c2c */
     background-color: rgb(168, 25, 127);
     color: white;
   }
-    .cs { /* Caledonian Sleeper */
+  .cs {
+    /* Caledonian Sleeper */
     background-color: #033c3c;
     color: white;
   }
-    .ch { /* Chiltern Railways */
+  .ch {
+    /* Chiltern Railways */
     background-color: white;
     color: blue;
   }
-    .xc { /* CrossCountry */
+  .xc {
+    /* CrossCountry */
     background-color: rgb(76, 18, 58);
     color: white;
   }
-    .em { /* EMR */
+  .em {
+    /* EMR */
     background-color: rgb(69, 29, 69);
     color: white;
   }
-    .es { /* Eurostar */
+  .es {
+    /* Eurostar */
     background-color: rgb(13, 13, 98);
     color: yellow;
   }
-    .zz { /* Freight, Charters, etc */
+  .zz {
+    /* Freight, Charters, etc */
     background-color: rgba(255, 255, 255, 0);
     color: white;
   }
-    .ht { /* Hull Trains */
+  .ht {
+    /* Hull Trains */
     background-color: rgb(160, 0, 136);
     color: rgb(19, 19, 173);
   }
-    .gn { /* GTR Great Northern */
+  .gn {
+    /* GTR Great Northern */
     background-color: rgb(79, 0, 128);
     color: white;
   }
-    .tl { /* GTR Thameslink */
+  .tl {
+    /* GTR Thameslink */
     background-color: rgb(191, 25, 183);
     color: white;
   }
-    .gc { /* Grand Central */
+  .gc {
+    /* Grand Central */
     background-color: rgb(40, 40, 40);
     color: rgb(219, 123, 5);
   }
-    .le, .ga { /*Greater Anglia */
+  .le,
+  .ga {
+    /*Greater Anglia */
     background-color: rgb(122, 124, 154);
     color: rgb(151, 0, 0);
     border-color: red;
   }
-    .hx { /* Heathrow Express */
+  .hx {
+    /* Heathrow Express */
     background-color: rgb(181, 142, 211);
     color: black;
   }
-    .ls { /* Locomotive Services Limited */
+  .ls {
+    /* Locomotive Services Limited */
     background-color: white;
     color: black;
   }
-    .lm { /* West Midlands Railway */
+  .lm {
+    /* West Midlands Railway */
     background-color: rgb(120, 120, 120);
     border-color: rgb(230, 150, 0);
     color: white;
   }
-    .lo { /*London Overground */
+  .lo {
+    /*London Overground */
     background-color: rgb(231, 150, 0);
-        color: rgb(0, 0, 210)
+    color: rgb(0, 0, 210);
   }
-    .lt { /* London Underground (when on Network Rail Metals) */
+  .lt {
+    /* London Underground (when on Network Rail Metals) */
     background-color: rgb(203, 17, 17);
     color: rgb(0, 0, 210);
   }
-    .me { /* Merseyrail */ 
+  .me {
+    /* Merseyrail */
     background-color: rgb(229, 229, 16);
     color: rgb(96, 96, 96);
   }
-    .lr { /* NR On-Track Machines */
+  .lr {
+    /* NR On-Track Machines */
     background-color: yellow;
     color: black;
   }
-    .tw { /* Tyne & Wear Metro (when on Network Rail Metals) */
+  .tw {
+    /* Tyne & Wear Metro (when on Network Rail Metals) */
     background-color: rgb(212, 169, 0);
     color: black;
   }
-    .sr { /* ScotRail */
+  .sr {
+    /* ScotRail */
     background-color: rgb(16, 16, 200);
     color: white;
   }
-    .sj { /* South Yorkshire (Sheffield) SuperTram (When on network rail metals) */
+  .sj {
+    /* South Yorkshire (Sheffield) SuperTram (When on network rail metals) */
     background-color: rgb(255, 185, 56);
     color: rgb(58, 58, 255);
   }
-    .se { /* Southeastern */
+  .se {
+    /* Southeastern */
     background-color: darkblue;
     color: rgb(107, 152, 207);
   }
-    .sn { /* GTR (Southern) */
+  .sn {
+    /* GTR (Southern) */
     background-color: rgb(11, 74, 11);
     color: rgb(231, 231, 188);
   }
-    .xr { /* Elizabeth Line (EastWest CrossRail) */
+  .xr {
+    /* Elizabeth Line (EastWest CrossRail) */
     background-color: rgb(91, 0, 171);
     color: rgb(207, 207, 255);
   }
-    .tp { /* TransPennine Express */
+  .tp {
+    /* TransPennine Express */
     background-color: rgb(197, 130, 238);
-        color: rgb(0, 98, 226)
+    color: rgb(0, 98, 226);
   }
-    .vt { /* Avanti West Coast */
+  .vt {
+    /* Avanti West Coast */
     background-color: rgb(37, 37, 86);
     color: rgb(230, 96, 0);
   }
-    .gr { /* LNER */
+  .gr {
+    /* LNER */
     background-color: rgb(202, 0, 0);
     color: white;
   }
-    .wc { /* West Coast Railway (Spot Hire/Charter) */
+  .wc {
+    /* West Coast Railway (Spot Hire/Charter) */
     background-color: maroon;
     color: rgb(225, 190, 92);
   }
-    .ty { /* Vintage Trains (Tour Operator) */
+  .ty {
+    /* Vintage Trains (Tour Operator) */
     background-color: green;
     color: white;
   }
-    .ld { /* Lumo */
+  .ld {
+    /* Lumo */
     background-color: whitesmoke;
     color: blue;
   }
-    .so { /* Rail Adventure */
+  .so {
+    /* Rail Adventure */
     background-color: rgb(93, 93, 93);
-        color: rgb(93, 195, 93)
+    color: rgb(93, 195, 93);
   }
-    .ln { /* Grand Union Trains */ 
+  .ln {
+    /* Grand Union Trains */
     background-color: rgb(89, 89, 89);
     color: white;
   }

src/lib/train/train-detail.svelte

@@ -34,7 +34,8 @@
 <div class="container">
   <div class="container-header" on:click={expand} on:keypress={expand}>
     <span class="header"
-      ><StylesToc toc={service?.operator || ''} /> {service?.stops[0]['publicDeparture'] || service?.stops[0]['wttDeparture']}
+      ><StylesToc toc={service?.operator || ''} />
+      {service?.stops[0]['publicDeparture'] || service?.stops[0]['wttDeparture']}
       {service?.stops[0]['tiploc']} to {service?.stops[service['stops'].length - 1]['tiploc']}</span
     >
     <span id="container-arrow" class:isExpanded>V</span>

src/routes/+layout.svelte

@@ -7,7 +7,10 @@
 <svelte:head>
   <meta name="application-name" content="OwlBoard" />
   <meta name="author" content="Frederick Boniface" />
-  <meta name="description" content="Get instant access to live train data, PIS codes, and location reference codes. Built by railway staff, for railway staff – your fastest route to accurate information." />
+  <meta
+    name="description"
+    content="Get instant access to live train data, PIS codes, and location reference codes. Built by railway staff, for railway staff – your fastest route to accurate information."
+  />
   <meta name="viewport" content="width=device-width" />
   <meta name="theme-color" content="#00b7b7" />
   <link rel="icon" href="/images/icon.svg" type="image/svg+xml" />

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

@@ -1,4 +1,5 @@
 <script>
+  import LogoutButton from '$lib/navigation/LogoutButton.svelte';
 import Header from '$lib/navigation/header.svelte';
   import Loading from '$lib/navigation/loading.svelte';
   import Nav from '$lib/navigation/nav.svelte';
@@ -45,6 +46,8 @@
 {:else if data[0].domain != 'User not Found'}
   <p class="api_response">Registration Domain: {data[0]['domain']}</p>
   <p class="api_response">Access Time: {data[0]['atime']}</p>
+  <LogoutButton />
+  <p>Clicking the logout button will delete your data from your browser.  You will then be able to make a new account, your old account will remain inactive and be deleted after 90 days.</p>
 {:else}
   <p class="api_response">You are not registered, we don't have any data stored.</p>
 {/if}

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

@@ -3,8 +3,8 @@
   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';
+  import { checkAuth, logout } from '$lib/libauth';
-  import { checkAuth } from '$lib/libauth';
+  import LogoutButton from '$lib/navigation/LogoutButton.svelte';
 
   const title = 'Register';
 
@@ -50,13 +50,12 @@
   });
 </script>
 
-
-
 <Header {title} />
+
+<section class="content">
   {#if isLoading}
     <Loading />
-{:else}
+  {:else if state == 'unreg'}
-{#if state == 'unreg'}
     <p>The staff version of OwlBoard offers several extra features:</p>
     <ul>
       <li>Access the Train Finder</li>
@@ -84,7 +83,7 @@
     <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>
+    <p>If you think this is an error, you can report an issue by <a href="/more/report">reporting an issue</a>.</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>
@@ -93,11 +92,15 @@
       You are already registered for OwlBoard. If you've recently logged out or updated, you may need to refresh this page to register as old data could still be stored in your
       browser.
     </p>
+    <LogoutButton />
   {/if}
-{/if}
+</section>
 <Nav />
 
 <style>
+  .content {
+    margin-top: 30px;
+  }
   p {
     margin: 10px;
   }

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

@@ -26,13 +26,13 @@
       <a class="data" href="https://git.fjla.uk/owlboard/owlboard-svelte" target="_blank">Web-app version<br /><span class="data">{version}-{versionTag}</span></a>
     </p>
     <p>
-      <a class="data" href="https://git.fjla.uk/owlboard/backend" target="_blank">API Server version<br /><span class="data">{data?.backend || "Unknown"}</span></a>
+      <a class="data" href="https://git.fjla.uk/owlboard/backend" target="_blank">API Server version<br /><span class="data">{data?.backend || 'Unknown'}</span></a>
     </p>
     <p>
       <a class="data" href="https://git.fjla.uk/owlboard/db-manager" target="_blank">DB Manager version<br /><span class="data">{data?.['db-manager'] || 'Unknown'}</span></a>
     </p>
     <p>
-      <a class="data" href="https://git.fjla.uk/owlboard/mq-client" target="_blank">MQ Client version<br><span class="data">{data?.['mq-client'] || 'Not installed'}</span></a>
+      <a class="data" href="https://git.fjla.uk/owlboard/mq-client" target="_blank">MQ Client version<br /><span class="data">{data?.['mq-client'] || 'Not installed'}</span></a>
     </p>
   </Island>
 {:catch}