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

<script lang="ts">
	import { browser } from "$app/environment";
	import Button from "$lib/components/Button.svelte";
	import AuthTokenStore from "$lib/stores/AuthTokenStore";
	import { getModalStore } from "@skeletonlabs/skeleton";
	import { fade, slide } from "svelte/transition";

  const modalStore = getModalStore();

  let showAuthSaved = false;
  let showPlaceholder = true;

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

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

  const handleSubmit = () => {
    console.log("submitted ", gameGroupSettings);
    document.cookie = "authToken=" + authToken;
    modalStore.close();
  }

  let gameGroupSettings: [] = [];
  const formInput = "bg-surface-200-700-token focus:brightness-105 hover:brightness-105 border-token border-surface-400-500-token rounded-token px-3 w-[6rem]"
</script>

<div class="card p-4 w-modal-slim shadow-xl space-y-4 text-center rounded-xl">
  <h2>Settings</h2>
  <div class="p-4 space-y-4">
    <form on:submit|preventDefault={handleSubmit} class="modal-form">
      <label for="authTokenInput" class="label my-2 gap-1 grid grid-cols-[20%,30%,30%,10%,10%]">
        <span></span>
        <span>Auth Token:</span>
        <input class={formInput} id="authTokenInput" bind:value={authToken} on:input={saveAuth} type="text">
        {#if showAuthSaved}
          <span transition:fade={{duration: 200}}>Saved!</span>
        {/if}
    
      </label>


      <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> -->
      
      <Button text="Save"/>
    </form>
  </div>
</div>