Rework Header Component for Auth handling

This commit is contained in:
Neshura 2023-12-11 20:16:20 +01:00
parent c571f084d7
commit a458f1d600
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
3 changed files with 73 additions and 42 deletions

View file

@ -2,7 +2,6 @@
<script lang="ts">
import '../app.postcss';
import { page } from '$app/stores';
import { browser } from '$app/environment';
import { writable } from 'svelte/store';
import { themes } from '$lib/types/themes'
@ -13,6 +12,11 @@
import AdminSelectedGameStore from '$lib/stores/admin-page/GameStore';
import type { ChellarisGameInfo } from '$lib/types/chellaris';
import UserSettingsStore from '$lib/stores/UserSettingsStore';
import AuthTokenStore from '$lib/stores/AuthTokenStore';
if (browser) {
$AuthTokenStore = document.cookie.split("=")[document.cookie.split("=").length - 1];
}
/* $: {
fetch(apiBaseUrl + '/v3/ethics').then((res) => {
@ -39,7 +43,7 @@
</script>
<Header {page}/>
<Header />
<div class="m-4 border-2 border-accent rounded-lg h-[calc(100%-5.75rem-1px)]">
<slot />
</div>

View file

@ -1,16 +1,15 @@
<svelte:options runes={true} />
<script lang="ts">
import { page } from '$app/stores';
import discord from '$lib/images/discord.svg';
import AuthTokenStore from '$lib/stores/AuthTokenStore';
import { Exit, EyeClosed, EyeOpen } from 'radix-icons-svelte';
import { Button } from '$lib/components/ui/button';
import { themes } from '$lib/types/themes';
import UserSettingsStore from '$lib/stores/UserSettingsStore';
import * as Avatar from '$lib/components/ui/avatar';
import { CaretDown, CaretRight, Exit, EyeClosed, EyeOpen } from 'radix-icons-svelte';
import { Separator } from '$lib/components/ui/separator';
import { Input } from '$lib/components/ui/input';
import * as Popover from '$lib/components/ui/popover';
let { page } = $props()
import * as Avatar from '$lib/components/ui/avatar';
type User = {
token: string,
@ -20,29 +19,46 @@
admin: boolean
}
/*let user: User | undefined = $state({
user.loggedIn = true;
tokenVisible: false,
discord: "neshura",
picture: "/avatar.png",
admin: true, // DEBUG
})*/
let user: User | undefined = $state(undefined);
function logout() {
function handleLogout() {
$AuthTokenStore = ""
document.cookie = "authToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/"
user = undefined
}
function nextTheme() {
if ($UserSettingsStore.themeId + 1 < themes.length) {
$UserSettingsStore.themeId += 1
async function handleLogin() {
// pretend we are handling the login via a fetch
await new Promise((resolve) => setTimeout(resolve, 200));
let ret = {
token: $AuthTokenStore,
discord: "neshura",
picture: "/avatar.png",
admin: true
}
if (true) {
const d = new Date();
let authExpiryDays = 14
d.setTime(d.getTime() + (authExpiryDays*24*60*60*1000));
document.cookie = "authToken=" + ret.token + "; expires=" + d.toUTCString() + "; path=/";
user = {
token: ret.token,
tokenVisible: false,
discord: ret.discord ?? undefined,
picture: ret.picture ?? undefined,
admin: ret.admin
}
}
else {
$UserSettingsStore.themeId = 0
// handle login failure
}
}
if ($AuthTokenStore != "") {
handleLogin()
}
</script>
<div class="flex gap-2 items-center justify-center py-3 bg-primary-foreground">
@ -62,14 +78,14 @@
<Button
variant="ghost"
href="/"
class="{$page.url.pathname == '/' ? 'text-accent-foreground bg-accent' : ''}"
class="{$page.url.pathname === '/' ? 'text-accent-foreground bg-accent' : ''}"
>
Home
</Button>
<Button
variant="ghost"
href="/current"
class="{$page.url.pathname == '/current' ? 'text-accent-foreground bg-accent' : ''}"
class="{$page.url.pathname === '/current' ? 'text-accent-foreground bg-accent' : ''}"
>
Game [Current Game]
</Button>
@ -80,23 +96,23 @@
>
Archives
</Button>
{#if user != undefined && user.admin}
{#if user !== undefined && user.admin}
<Button
variant="ghost"
href="/admin"
class="{$page.url.pathname == '/admin' ? 'text-accent-foreground bg-accent' : ''}"
class="{$page.url.pathname === '/admin' ? 'text-accent-foreground bg-accent' : ''}"
>
Admin
</Button>
<Button
variant="ghost"
href="/admin/new"
class="{$page.url.pathname == '/admin/new' ? 'text-accent-foreground bg-accent' : ''}"
class="{$page.url.pathname === '/admin/new' ? 'text-accent-foreground bg-accent' : ''}"
>
Admin (New)
</Button>
{/if}
{#if user != undefined}
{#if user !== undefined}
<Popover.Root>
<Popover.Trigger>
<Button
@ -118,7 +134,7 @@
{:else}
<p class="text-sm font-medium leading-none w-12">******</p>
{/if}
<Button variant="ghost" size="sm" class="p-0 h-2 justify-start" on:click={() => {user.tokenVisible = !user.tokenVisible}}>
<Button variant="ghost" size="sm" class="p-0 h-2 justify-start" on:click={() => {if (user !== undefined) user.tokenVisible = !user.tokenVisible}}>
{#if user.tokenVisible}
<EyeOpen />
{:else}
@ -142,7 +158,7 @@
</div>
<Separator orientation="horizontal" />
<div class="w-full p-1">
<Button variant="ghost" class="flex flex-row items-center justify-start h-8 space-x-1 px-2 py-1.5 text-sm w-full" on:click={logout}>
<Button variant="ghost" class="flex flex-row items-center justify-start h-8 space-x-1 px-2 py-1.5 text-sm w-full" on:click={handleLogout}>
<p>Log out </p>
<Exit />
</Button>
@ -159,16 +175,18 @@
Log In
</Button>
</Popover.Trigger>
<Popover.Content class="w-56 p-1">
<Button variant="ghost" class="justify-start h-8 px-2 py-1.5 text-sm w-full" href="/profile">
Token:
<Popover.Content class="w-40 p-1 ">
<form class="flex flex-col items-center gap-1" on:submit={handleLogin}>
<Input type="text" placeholder="User Token" bind:value={$AuthTokenStore} />
<div class="flex flex-row">
<Button variant="link" class="flex flex-row items-center h-8 space-x-1 px-2 py-1.5 text-sm w-full text-muted-foreground" href="/sign-up" >
Sign Up
</Button>
<Button variant="secondary" class="justify-start h-8 px-2 py-1.5 text-sm w-full" type="submit">
Log In
</Button>
<Button variant="ghost" class="flex flex-row items-center justify-start h-8 space-x-1 px-2 py-1.5 text-sm w-full" on:click={logout}>
<p>Sign Up </p>
<Exit />
</Button>
</div>
</form>
</Popover.Content>
</Popover.Root>
{/if}

View file

@ -1,3 +1,12 @@
<div>
LOGIN PAGE
<script lang="ts">
</script>
<div class="flex flex-col items-center justify-center h-full">
<p>
Get an Account!
</p>
<p>
WIP
</p>
</div>