Auth Token as Cookie

src/authTokens.json

@@ -0,0 +1,4 @@
+[
+  "1234",
+  "5678"
+]

src/hooks.server.ts

@@ -1,7 +1,15 @@
 import { redirect } from "@sveltejs/kit";
+import validAuthTokens from './authTokens.json';
 
 export async function handle({ event, resolve }) {
-  event.locals.authenticated = true;
+  const cookie = event.cookies.get('authToken');
+  if (typeof cookie !== 'undefined') {
+    event.locals.authenticated = validAuthTokens.includes(cookie);
+  }
+  else {
+    event.locals.authenticated = false;
+  }
+  
 
   if (event.url.pathname.startsWith('/admin')) {
     if (!event.locals.authenticated) {

src/routes/Header.svelte

@@ -1,8 +1,13 @@
 <script>
 	import { page } from '$app/stores';
 	import discord from '$lib/images/discord.svg';
+	import Settings from './Settings.svelte';
+
+	let showSettings = false;
 </script>
 
+<Settings bind:showSettings={showSettings}/>
+
 <header>
 	<div class="corner">
 	</div>
@@ -30,6 +35,9 @@
 			<li aria-current={$page.url.pathname.startsWith('/about') ? 'page' : undefined}>
 				<a href="/about">About</a>
 			</li>
+			<li>
+				<button on:click={() => showSettings = !showSettings}>Settings</button>
+			</li>
 		</ul>
 		<svg viewBox="0 0 2 3" aria-hidden="true">
 			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
@@ -128,7 +136,28 @@
 		transition: color 0.2s linear;
 	}
 
-	a:hover {
+	nav a:hover {
+		color: var(--color-active-1);
+	}
+
+	nav button {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		padding: 0 0.5rem;
+		color: var(--color-text);
+		font-weight: 700;
+		font-size: 0.8rem;
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		text-decoration: none;
+		transition: color 0.2s linear;
+		cursor: pointer;
+		background: var(--background);
+		border: 0;
+	}
+
+	nav button:hover {
 		color: var(--color-active-1);
 	}
 </style>

src/routes/Settings.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { browser } from "$app/environment";
+	import Modal from "$lib/components/Modal.svelte";
+
+  export let showSettings: boolean;
+
+  let showAuthSaved = false;
+
+  const saveAuth = () => {
+    showAuthSaved = true;
+    document.cookie = "authToken=" + authToken;
+  }
+
+  let authToken: string;
+  $: console.log(authToken);
+  $: {
+    if (browser) {
+      authToken = document.cookie.split("=")[document.cookie.split("=").length - 1];
+    }
+  }
+
+  const toggleSettings = () => {
+    showSettings = !showSettings;
+  }
+
+  const handleSubmit = () => {
+    console.log("submitted ", gameGroupSettings);
+    showSettings = false;
+  }
+
+  let gameGroupSettings: [] = [];
+
+</script>
+
+<Modal showModal={showSettings} on:click={toggleSettings}>
+  <h3>Settings</h3>
+  <div class="settings-modal">
+    
+    <form on:submit|preventDefault={handleSubmit}>
+      
+      <label for="authTokenInput">Auth Token:</label>
+      <input id="authTokenInput" bind:value={authToken} on:input={saveAuth} type="text">
+      {#if showAuthSaved}
+        <p>Saved!</p>
+      {/if}
+      <br>
+      <br>
+      <b>Show Game Groups:</b><br>
+      <input type="checkbox" bind:group={gameGroupSettings} value="b">Group B<br>
+      <input type="checkbox" bind:group={gameGroupSettings} value="-">Ungrouped<br>
+      
+      <div class="settings-modal-save">
+        <button>Save</button>
+      </div>
+    </form>
+  </div>
+
+  
+</Modal>
+
+<style>
+  .settings-modal {
+    text-align: left;
+  }
+
+  .settings-modal input {
+    margin-left: 1rem;
+  }
+
+  .settings-modal-save {
+    text-align: center;
+  }
+</style>