Catherine Renelle
1419300baa
- /account page: edit name/email, change password, view/revoke sessions - PATCH /api/account: update profile or change password (verifies current) - DELETE /api/account: revoke all other sessions - Password change auto-revokes other sessions for security - Username in nav now links to /account (desktop + mobile) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
199 lines
7.5 KiB
Svelte
199 lines
7.5 KiB
Svelte
<script lang="ts">
|
|
import '../app.css';
|
|
import type { Snippet } from 'svelte';
|
|
import { onMount } from 'svelte';
|
|
import { connectSocket, disconnectSocket } from '$lib/stores/socket.js';
|
|
import { initTheme, toggleTheme, getTheme } from '$lib/stores/theme.svelte.js';
|
|
import NotificationBell from '$lib/components/NotificationBell.svelte';
|
|
import SearchBar from '$lib/components/SearchBar.svelte';
|
|
import Toast from '$lib/components/Toast.svelte';
|
|
import KeyboardShortcuts from '$lib/components/KeyboardShortcuts.svelte';
|
|
|
|
let { children, data }: { children: Snippet; data: { user: any; tenant: any; theme?: string } } = $props();
|
|
|
|
let mobileMenuOpen = $state(false);
|
|
const theme = $derived(getTheme());
|
|
|
|
onMount(() => {
|
|
initTheme(data.theme);
|
|
if (data.user) {
|
|
connectSocket();
|
|
return () => disconnectSocket();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="min-h-screen bg-gray-50 dark:bg-gray-950">
|
|
<nav class="bg-[var(--color-primary)] shadow-sm">
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div class="flex h-14 items-center justify-between">
|
|
<a href="/" class="flex items-center gap-2 text-white font-bold text-lg">
|
|
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
|
|
<circle cx="7" cy="5" r="2.2" />
|
|
<circle cx="12" cy="3.5" r="2.2" />
|
|
<circle cx="17" cy="5" r="2.2" />
|
|
<ellipse cx="12" cy="14" rx="6" ry="7" />
|
|
</svg>
|
|
{data.tenant?.name ?? 'Pounce'}
|
|
</a>
|
|
|
|
{#if data.user}
|
|
<div class="hidden sm:block">
|
|
<SearchBar />
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Desktop nav -->
|
|
<div class="hidden sm:flex items-center gap-3">
|
|
<button
|
|
onclick={toggleTheme}
|
|
class="rounded p-1.5 text-white/80 hover:text-white hover:bg-white/20 transition"
|
|
aria-label="Toggle dark mode"
|
|
title="Toggle dark mode"
|
|
>
|
|
{#if theme === 'dark'}
|
|
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
|
|
</svg>
|
|
{:else}
|
|
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
|
|
</svg>
|
|
{/if}
|
|
</button>
|
|
{#if data.user}
|
|
{#if data.user.tenantRole === 'ADMIN' || data.user.globalRole === 'SITE_ADMIN'}
|
|
<a
|
|
href="/admin"
|
|
class="rounded bg-white/20 px-3 py-1.5 text-sm text-white hover:bg-white/30 transition"
|
|
>
|
|
Admin
|
|
</a>
|
|
{/if}
|
|
<a href="/account" class="text-white/80 text-sm hover:text-white transition">{data.user.name}</a>
|
|
<NotificationBell />
|
|
<button
|
|
onclick={async () => {
|
|
await fetch('/api/auth/logout', { method: 'POST' });
|
|
window.location.href = '/';
|
|
}}
|
|
class="rounded bg-white/20 px-3 py-1.5 text-sm text-white hover:bg-white/30 transition"
|
|
>
|
|
Logout
|
|
</button>
|
|
{:else}
|
|
<a
|
|
href="/auth/login"
|
|
class="rounded bg-white/20 px-3 py-1.5 text-sm text-white hover:bg-white/30 transition"
|
|
>
|
|
Login
|
|
</a>
|
|
<a
|
|
href="/auth/register"
|
|
class="rounded bg-white px-3 py-1.5 text-sm text-[var(--color-primary)] font-medium hover:bg-white/90 transition"
|
|
>
|
|
Register
|
|
</a>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Mobile hamburger -->
|
|
<div class="flex items-center gap-2 sm:hidden">
|
|
<button
|
|
onclick={toggleTheme}
|
|
class="rounded p-1.5 text-white/80 hover:text-white hover:bg-white/20 transition"
|
|
aria-label="Toggle dark mode"
|
|
>
|
|
{#if theme === 'dark'}
|
|
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
|
|
</svg>
|
|
{:else}
|
|
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
|
|
</svg>
|
|
{/if}
|
|
</button>
|
|
{#if data.user}
|
|
<NotificationBell />
|
|
{/if}
|
|
<button
|
|
onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
|
|
class="rounded p-1.5 text-white/80 hover:text-white hover:bg-white/20 transition"
|
|
aria-label="Open menu"
|
|
>
|
|
<svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
|
|
{#if mobileMenuOpen}
|
|
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
|
|
{:else}
|
|
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
|
|
{/if}
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile dropdown -->
|
|
{#if mobileMenuOpen}
|
|
<div class="sm:hidden border-t border-white/20 px-4 py-3 space-y-2">
|
|
{#if data.user}
|
|
<div class="w-full">
|
|
<SearchBar />
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<a href="/account" class="text-white/80 text-sm py-1 hover:text-white transition" onclick={() => (mobileMenuOpen = false)}>{data.user.name}</a>
|
|
{#if data.user.tenantRole === 'ADMIN' || data.user.globalRole === 'SITE_ADMIN'}
|
|
<a
|
|
href="/admin"
|
|
class="rounded bg-white/20 px-3 py-1.5 text-sm text-white hover:bg-white/30 transition text-center"
|
|
onclick={() => (mobileMenuOpen = false)}
|
|
>
|
|
Admin
|
|
</a>
|
|
{/if}
|
|
<a
|
|
href="/boards"
|
|
class="rounded bg-white/20 px-3 py-1.5 text-sm text-white hover:bg-white/30 transition text-center"
|
|
onclick={() => (mobileMenuOpen = false)}
|
|
>
|
|
Boards
|
|
</a>
|
|
<button
|
|
onclick={async () => {
|
|
await fetch('/api/auth/logout', { method: 'POST' });
|
|
window.location.href = '/';
|
|
}}
|
|
class="rounded bg-white/20 px-3 py-1.5 text-sm text-white hover:bg-white/30 transition"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
{:else}
|
|
<div class="flex flex-col gap-1">
|
|
<a
|
|
href="/auth/login"
|
|
class="rounded bg-white/20 px-3 py-1.5 text-sm text-white hover:bg-white/30 transition text-center"
|
|
onclick={() => (mobileMenuOpen = false)}
|
|
>
|
|
Login
|
|
</a>
|
|
<a
|
|
href="/auth/register"
|
|
class="rounded bg-white px-3 py-1.5 text-sm text-[var(--color-primary)] font-medium hover:bg-white/90 transition text-center"
|
|
onclick={() => (mobileMenuOpen = false)}
|
|
>
|
|
Register
|
|
</a>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
</nav>
|
|
|
|
{@render children()}
|
|
</div>
|
|
|
|
<Toast />
|
|
<KeyboardShortcuts />
|