Auth Token as Cookie

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>