66 lines
2.1 KiB
Svelte
66 lines
2.1 KiB
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>
|