<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>