From d5229a2ab408d8338fb2c47719f17382fac25884 Mon Sep 17 00:00:00 2001
From: Neshura <neshura@neshweb.net>
Date: Mon, 28 Aug 2023 07:28:20 +0200
Subject: [PATCH] Auth Token as Cookie

---
 src/authTokens.json        |  4 +++
 src/hooks.server.ts        | 10 +++++-
 src/routes/Header.svelte   | 31 +++++++++++++++-
 src/routes/Settings.svelte | 73 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 116 insertions(+), 2 deletions(-)
 create mode 100644 src/authTokens.json
 create mode 100644 src/routes/Settings.svelte

diff --git a/src/authTokens.json b/src/authTokens.json
new file mode 100644
index 0000000..60e857b
--- /dev/null
+++ b/src/authTokens.json
@@ -0,0 +1,4 @@
+[
+  "1234",
+  "5678"
+]
\ No newline at end of file
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
index 3d81f50..c18e2c2 100644
--- a/src/hooks.server.ts
+++ b/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) {
diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
index a7a9a36..2be1cc5 100644
--- a/src/routes/Header.svelte
+++ b/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>
diff --git a/src/routes/Settings.svelte b/src/routes/Settings.svelte
new file mode 100644
index 0000000..4429c87
--- /dev/null
+++ b/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>
\ No newline at end of file