Rework Header Component for Auth handling
This commit is contained in:
parent
c571f084d7
commit
a458f1d600
GPG key ID:
B6983AAA6B9A7A6C
3 changed files with 73 additions and 42 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
||||
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>
|
||||
<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>
|
||||
</div>
|
||||
</form>
|
||||
</Popover.Content>
|
||||
</Popover.Root>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Reference in a new issue