Michael Mainguy
eccf101b73
All checks were successful
Build / build (push) Successful in 1m20s
Major refactoring of the UI layer to use Svelte components: - Replace inline HTML with modular Svelte components - Add authentication system with UserProfile component - Implement navigation store for view management - Create comprehensive settings and controls screens - Add level editor with JSON validation - Implement progression tracking system - Update level configurations and base station model 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
50 lines
1.1 KiB
Svelte
50 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import { authStore } from '../../stores/auth';
|
|
import Button from '../shared/Button.svelte';
|
|
|
|
async function handleLogin() {
|
|
await authStore.login();
|
|
}
|
|
|
|
async function handleLogout() {
|
|
await authStore.logout();
|
|
}
|
|
</script>
|
|
|
|
<div id="userProfile">
|
|
{#if $authStore.isLoading}
|
|
<span class="loading">Loading...</span>
|
|
{:else if $authStore.isAuthenticated && $authStore.user}
|
|
<div class="user-info">
|
|
<span class="user-name">{$authStore.user.name || $authStore.user.email}</span>
|
|
<Button variant="secondary" on:click={handleLogout}>Logout</Button>
|
|
</div>
|
|
{:else}
|
|
<Button variant="primary" on:click={handleLogin}>Sign In</Button>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
#userProfile {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm, 0.5rem);
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm, 0.5rem);
|
|
}
|
|
|
|
.user-name {
|
|
color: var(--color-text, #fff);
|
|
font-size: var(--font-size-sm, 0.875rem);
|
|
}
|
|
|
|
.loading {
|
|
color: var(--color-text-secondary, #ccc);
|
|
font-size: var(--font-size-sm, 0.875rem);
|
|
}
|
|
</style>
|