Santhosh Janardhanan
f935754df4
- Delete old Vite+Svelte frontend - Initialize new SvelteKit project with TypeScript - Configure Tailwind CSS v4 + DaisyUI - Implement JWT authentication with auto-refresh - Create login page with form validation (Zod) - Add protected route guards - Update Docker configuration for single-stage build - Add E2E tests with Playwright (6/11 passing) - Fix Svelte 5 reactivity with $state() runes Known issues: - 5 E2E tests failing (timing/async issues) - Token refresh implementation needs debugging - Validation error display timing
49 lines
1.5 KiB
Svelte
49 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { user, logout } from '$lib/stores/auth';
|
|
import { goto } from '$app/navigation';
|
|
|
|
// Get user from store using $derived for reactivity
|
|
let currentUser = $derived($user);
|
|
|
|
async function handleLogout() {
|
|
await logout();
|
|
goto('/login');
|
|
}
|
|
</script>
|
|
|
|
<nav class="navbar bg-base-100 shadow-lg">
|
|
<div class="flex-1">
|
|
<a href="/" class="btn btn-ghost normal-case text-xl">Headroom</a>
|
|
</div>
|
|
|
|
<div class="flex-none gap-2">
|
|
{#if currentUser}
|
|
<div class="dropdown dropdown-end">
|
|
<label tabindex="0" class="btn btn-ghost btn-circle avatar">
|
|
<div class="w-10 rounded-full bg-primary">
|
|
<span class="text-xl">{currentUser.email?.charAt(0).toUpperCase()}</span>
|
|
</div>
|
|
</label>
|
|
<ul tabindex="0" class="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">
|
|
<li>
|
|
<a href="/dashboard" class="justify-between">
|
|
Dashboard
|
|
</a>
|
|
</li>
|
|
{#if currentUser.role === 'superuser' || currentUser.role === 'manager'}
|
|
<li><a href="/team-members">Team Members</a></li>
|
|
<li><a href="/projects">Projects</a></li>
|
|
{/if}
|
|
<li><a href="/reports">Reports</a></li>
|
|
<div class="divider"></div>
|
|
<li>
|
|
<button onclick={handleLogout} class="text-error">Logout</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
{:else}
|
|
<a href="/login" class="btn btn-primary btn-sm">Login</a>
|
|
{/if}
|
|
</div>
|
|
</nav>
|