chellaris-sign-up-site/src/routes/Settings.svelte

<script lang="ts">
	import { browser } from "$app/environment";
	import Modal from "$lib/components/Modal.svelte";
	import AuthTokenStore from "$lib/stores/AuthTokenStore";
	import { fade } from "svelte/transition";

  export let showSettings: boolean;

  let showAuthSaved = false;

  const saveAuth = () => {
    showAuthSaved = true;
    setTimeout(function() {
      showAuthSaved = false;
    }, 2000);
    document.cookie = "authToken=" + authToken;
    $AuthTokenStore = authToken;
  }

  let authToken: string;
  $: {
    if (browser) {
      authToken = document.cookie.split("=")[document.cookie.split("=").length - 1];
      $AuthTokenStore = authToken;
    }
  }

  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}
        <label for="authTokenInput" in:fade={{duration: 200}} out:fade={{duration: 200}}>Saved!</label>
      {/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>