john-okeefe
ea70d85f9d
- Updated COMPLETE_DOCUMENTATION.md feature descriptions - Updated user journey reference from 'ebook library' to 'ebook collection' - Updated all frontend page titles and headers - Updated Bruno API collection and workspace names - All references now consistently use 'Bookmann' as the application name
124 lines
4.3 KiB
Svelte
124 lines
4.3 KiB
Svelte
<script lang="ts">
|
|
import { superForm } from 'sveltekit-superforms';
|
|
import { page } from '$app/stores';
|
|
|
|
let { form, errors, enhance, submitting } = superForm($page.data.form);
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Register - Bookmann</title>
|
|
</svelte:head>
|
|
|
|
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-tokyo-bg to-tokyo-bg-dark py-12 px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-md w-full animate-slide-in">
|
|
<div class="card">
|
|
<div class="card-header text-center">
|
|
<div class="text-4xl mb-4">✨</div>
|
|
<h2 class="text-2xl font-bold text-tokyo-fg">
|
|
Join Our Library
|
|
</h2>
|
|
<p class="text-tokyo-fg-dark mt-2">Create your account to start reading</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<form class="space-y-6" method="POST" use:enhance>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-tokyo-fg mb-2">
|
|
Email Address
|
|
</label>
|
|
<input
|
|
id="email"
|
|
name="email"
|
|
type="email"
|
|
required
|
|
class="input-field w-full"
|
|
placeholder="Enter your email"
|
|
bind:value={$form.email}
|
|
/>
|
|
{#if $errors.email}
|
|
<p class="text-tokyo-red text-sm mt-1">{$errors.email}</p>
|
|
{/if}
|
|
</div>
|
|
<div>
|
|
<label for="username" class="block text-sm font-medium text-tokyo-fg mb-2">
|
|
Username
|
|
</label>
|
|
<input
|
|
id="username"
|
|
name="username"
|
|
type="text"
|
|
required
|
|
class="input-field w-full"
|
|
placeholder="Choose a username"
|
|
bind:value={$form.username}
|
|
/>
|
|
{#if $errors.username}
|
|
<p class="text-tokyo-red text-sm mt-1">{$errors.username}</p>
|
|
{/if}
|
|
</div>
|
|
<div>
|
|
<label for="password" class="block text-sm font-medium text-tokyo-fg mb-2">
|
|
Password
|
|
</label>
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
required
|
|
class="input-field w-full"
|
|
placeholder="Create a password"
|
|
bind:value={$form.password}
|
|
/>
|
|
{#if $errors.password}
|
|
<p class="text-tokyo-red text-sm mt-1">{$errors.password}</p>
|
|
{/if}
|
|
</div>
|
|
<div>
|
|
<label for="confirmPassword" class="block text-sm font-medium text-tokyo-fg mb-2">
|
|
Confirm Password
|
|
</label>
|
|
<input
|
|
id="confirmPassword"
|
|
name="confirmPassword"
|
|
type="password"
|
|
required
|
|
class="input-field w-full"
|
|
placeholder="Confirm your password"
|
|
bind:value={$form.confirmPassword}
|
|
/>
|
|
{#if $errors.confirmPassword}
|
|
<p class="text-tokyo-red text-sm mt-1">{$errors.confirmPassword}</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
{#if $page.data.error}
|
|
<div class="bg-tokyo-red/10 border border-tokyo-red/20 rounded-lg p-4">
|
|
<div class="flex items-center">
|
|
<div class="text-tokyo-red mr-2">⚠️</div>
|
|
<div class="text-sm text-tokyo-red">{$page.data.error}</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={$submitting}
|
|
class="btn-primary w-full flex justify-center items-center disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{#if $submitting}
|
|
<div class="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent mr-2"></div>
|
|
{/if}
|
|
{$submitting ? 'Creating account...' : 'Create Account'}
|
|
</button>
|
|
|
|
<div class="text-center">
|
|
<a href="/login" class="text-tokyo-blue hover:text-tokyo-cyan transition-colors duration-200 text-sm">
|
|
Already have an account? Sign in here
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |