Auth Token as Cookie

This commit is contained in:
Neshura 2023-08-28 07:28:20 +02:00
parent 05c3d3d6ec
commit d5229a2ab4
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
4 changed files with 116 additions and 2 deletions

4
src/authTokens.json Normal file
View file

@ -0,0 +1,4 @@
[
"1234",
"5678"
]

View file

@ -1,7 +1,15 @@
import { redirect } from "@sveltejs/kit"; import { redirect } from "@sveltejs/kit";
import validAuthTokens from './authTokens.json';
export async function handle({ event, resolve }) { export async function handle({ event, resolve }) {
event.locals.authenticated = true; const cookie = event.cookies.get('authToken');
if (typeof cookie !== 'undefined') {
event.locals.authenticated = validAuthTokens.includes(cookie);
}
else {
event.locals.authenticated = false;
}
if (event.url.pathname.startsWith('/admin')) { if (event.url.pathname.startsWith('/admin')) {
if (!event.locals.authenticated) { if (!event.locals.authenticated) {

View file

@ -1,8 +1,13 @@
<script> <script>
import { page } from '$app/stores'; import { page } from '$app/stores';
import discord from '$lib/images/discord.svg'; import discord from '$lib/images/discord.svg';
import Settings from './Settings.svelte';
let showSettings = false;
</script> </script>
<Settings bind:showSettings={showSettings}/>
<header> <header>
<div class="corner"> <div class="corner">
</div> </div>
@ -30,6 +35,9 @@
<li aria-current={$page.url.pathname.startsWith('/about') ? 'page' : undefined}> <li aria-current={$page.url.pathname.startsWith('/about') ? 'page' : undefined}>
<a href="/about">About</a> <a href="/about">About</a>
</li> </li>
<li>
<button on:click={() => showSettings = !showSettings}>Settings</button>
</li>
</ul> </ul>
<svg viewBox="0 0 2 3" aria-hidden="true"> <svg viewBox="0 0 2 3" aria-hidden="true">
<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" /> <path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
@ -128,7 +136,28 @@
transition: color 0.2s linear; transition: color 0.2s linear;
} }
a:hover { nav a:hover {
color: var(--color-active-1);
}
nav button {
display: flex;
height: 100%;
align-items: center;
padding: 0 0.5rem;
color: var(--color-text);
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
text-decoration: none;
transition: color 0.2s linear;
cursor: pointer;
background: var(--background);
border: 0;
}
nav button:hover {
color: var(--color-active-1); color: var(--color-active-1);
} }
</style> </style>

View file

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