alexei.dolgolyov
0bd30c5e17
Add layout system (sidebar, header, main layout), dark/light/system theme with HSL customization, 3 ambient backgrounds (mesh gradient, particle field, aurora), Cmd/Ctrl+K search dialog, page transitions, card hover effects, status pulse animations, skeleton loaders, and responsive design. Polish all existing pages with consistent theming.
118 lines
4.1 KiB
Svelte
118 lines
4.1 KiB
Svelte
<script lang="ts">
|
|
import { superForm } from 'sveltekit-superforms';
|
|
import type { PageData } from './$types.js';
|
|
import AmbientBackground from '$lib/components/background/AmbientBackground.svelte';
|
|
|
|
let { data }: { data: PageData } = $props();
|
|
|
|
const { form, errors, enhance, submitting } = superForm(data.form);
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Register — Web App Launcher</title>
|
|
</svelte:head>
|
|
|
|
<AmbientBackground />
|
|
|
|
<main class="relative z-10 flex min-h-screen items-center justify-center bg-background/80 p-4 text-foreground">
|
|
<div class="w-full max-w-md rounded-xl border border-border bg-card/90 p-8 shadow-xl backdrop-blur-sm">
|
|
<div class="mb-8 text-center">
|
|
<div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
|
|
<svg
|
|
class="h-6 w-6 text-primary"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4-4v2" />
|
|
<circle cx="9" cy="7" r="4" />
|
|
<line x1="19" y1="8" x2="19" y2="14" />
|
|
<line x1="22" y1="11" x2="16" y2="11" />
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-card-foreground">Create Account</h1>
|
|
<p class="mt-1 text-sm text-muted-foreground">Get started with App Launcher</p>
|
|
</div>
|
|
|
|
<form method="POST" use:enhance class="space-y-4">
|
|
<div>
|
|
<label for="displayName" class="mb-1 block text-sm font-medium text-card-foreground">
|
|
Display Name
|
|
</label>
|
|
<input
|
|
id="displayName"
|
|
name="displayName"
|
|
type="text"
|
|
autocomplete="name"
|
|
bind:value={$form.displayName}
|
|
class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
|
|
placeholder="Your name"
|
|
/>
|
|
{#if $errors.displayName}
|
|
<p class="mt-1 text-sm text-destructive">{$errors.displayName[0]}</p>
|
|
{/if}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" class="mb-1 block text-sm font-medium text-card-foreground">
|
|
Email
|
|
</label>
|
|
<input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
autocomplete="email"
|
|
bind:value={$form.email}
|
|
class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
|
|
placeholder="you@example.com"
|
|
/>
|
|
{#if $errors.email}
|
|
<p class="mt-1 text-sm text-destructive">{$errors.email[0]}</p>
|
|
{/if}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="password" class="mb-1 block text-sm font-medium text-card-foreground">
|
|
Password
|
|
</label>
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
autocomplete="new-password"
|
|
bind:value={$form.password}
|
|
class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
|
|
placeholder="At least 6 characters"
|
|
/>
|
|
{#if $errors.password}
|
|
<p class="mt-1 text-sm text-destructive">{$errors.password[0]}</p>
|
|
{/if}
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={$submitting}
|
|
class="w-full rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
{#if $submitting}
|
|
<span class="flex items-center justify-center gap-2">
|
|
<span class="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"></span>
|
|
Creating account...
|
|
</span>
|
|
{:else}
|
|
Create Account
|
|
{/if}
|
|
</button>
|
|
</form>
|
|
|
|
<p class="mt-6 text-center text-sm text-muted-foreground">
|
|
Already have an account?
|
|
<a href="/login" class="font-medium text-primary hover:underline">Sign in</a>
|
|
</p>
|
|
</div>
|
|
</main>
|