feat: Add comprehensive backend validation, toast notifications, and Tokyo Night theme
- Backend: Add server-side validation with go-playground/validator/v10 - Frontend: Add toast notifications for API errors with @zerodevx/svelte-toast - UI: Complete Tokyo Night theme redesign with modern animations - Docs: Update COMPLETE_DOCUMENTATION.md and README.md with all enhancements - Validation: Email format, password strength, and input sanitization - UX: Real-time error feedback, loading states, and responsive design
This commit is contained in:
@@ -0,0 +1,135 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
background-color: #1a1b26;
|
||||
color: #a9b1d6;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #1a1b26;
|
||||
color: #a9b1d6;
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #16161e;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #292e42;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #565f89;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Custom button styles */
|
||||
.btn-primary {
|
||||
background-color: #7aa2f7;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #3b82f6;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #292e42;
|
||||
color: #a9b1d6;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #364a82;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #f7768e;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background-color: #dc2626;
|
||||
}
|
||||
|
||||
/* Card styles */
|
||||
.card {
|
||||
background-color: #16161e;
|
||||
border: 1px solid #292e42;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-bottom: 1px solid #292e42;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* Input styles */
|
||||
.input-field {
|
||||
background-color: #1a1b26;
|
||||
border: 1px solid #292e42;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
color: #a9b1d6;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.input-field:focus {
|
||||
outline: none;
|
||||
ring: 2px;
|
||||
ring-color: #7aa2f7;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.input-field::placeholder {
|
||||
color: #565f89;
|
||||
}
|
||||
|
||||
/* Navigation styles */
|
||||
.nav-link {
|
||||
color: #a9b1d6;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #7aa2f7;
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: #7aa2f7;
|
||||
}
|
||||
}
|
||||
Vendored
+13
@@ -0,0 +1,13 @@
|
||||
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,170 @@
|
||||
import { showError } from './toast';
|
||||
|
||||
const API_BASE = import.meta.env.DEV ? 'http://localhost:8080/api' : '/api';
|
||||
|
||||
// Helper function to handle API responses and show error toasts
|
||||
async function handleResponse<T>(response: Response, errorMessage: string): Promise<T> {
|
||||
if (!response.ok) {
|
||||
let message = errorMessage;
|
||||
try {
|
||||
const errorData = await response.json();
|
||||
if (errorData.error) {
|
||||
message = errorData.error;
|
||||
}
|
||||
} catch (e) {
|
||||
// If we can't parse JSON, use the default message
|
||||
}
|
||||
showError(message);
|
||||
throw new Error(message);
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
username: string;
|
||||
}
|
||||
|
||||
export interface AuthResponse {
|
||||
token: string;
|
||||
user: User;
|
||||
}
|
||||
|
||||
export interface Ebook {
|
||||
id: string;
|
||||
title: string;
|
||||
author: string | null;
|
||||
isbn: string | null;
|
||||
description: string | null;
|
||||
file_path: string;
|
||||
file_size: number | null;
|
||||
mime_type: string | null;
|
||||
cover_image_path: string | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface ReadingProgress {
|
||||
ebook_id: string;
|
||||
user_id: string;
|
||||
current_page: number;
|
||||
total_pages: number | null;
|
||||
last_read_at: string;
|
||||
}
|
||||
|
||||
// Get stored token
|
||||
function getToken(): string | null {
|
||||
if (typeof window !== 'undefined') {
|
||||
return localStorage.getItem('auth_token');
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// Create headers with auth
|
||||
function createHeaders(): Record<string, string> {
|
||||
const headers: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
};
|
||||
|
||||
const token = getToken();
|
||||
if (token) {
|
||||
headers['Authorization'] = `Bearer ${token}`;
|
||||
}
|
||||
|
||||
return headers;
|
||||
}
|
||||
|
||||
// Auth functions
|
||||
export async function registerUser(email: string, username: string, password: string): Promise<AuthResponse> {
|
||||
const response = await fetch(`${API_BASE}/auth/register`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, username, password }),
|
||||
});
|
||||
return handleResponse<AuthResponse>(response, 'Registration failed');
|
||||
}
|
||||
|
||||
export async function loginUser(login: string, password: string): Promise<AuthResponse> {
|
||||
const response = await fetch(`${API_BASE}/auth/login`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ login, password }),
|
||||
});
|
||||
return handleResponse<AuthResponse>(response, 'Login failed');
|
||||
}
|
||||
|
||||
export async function getUserProfile(): Promise<User> {
|
||||
const response = await fetch(`${API_BASE}/auth/profile`, {
|
||||
headers: createHeaders(),
|
||||
});
|
||||
return handleResponse<User>(response, 'Failed to get profile');
|
||||
}
|
||||
|
||||
export async function fetchEbooks(limit: number = 20, offset: number = 0): Promise<Ebook[]> {
|
||||
const response = await fetch(`${API_BASE}/ebooks?limit=${limit}&offset=${offset}`, {
|
||||
headers: createHeaders(),
|
||||
});
|
||||
return handleResponse<Ebook[]>(response, 'Failed to fetch ebooks');
|
||||
}
|
||||
|
||||
export async function fetchEbook(id: string): Promise<Ebook> {
|
||||
const response = await fetch(`${API_BASE}/ebooks/${id}`, {
|
||||
headers: createHeaders(),
|
||||
});
|
||||
return handleResponse<Ebook>(response, 'Failed to fetch ebook');
|
||||
}
|
||||
|
||||
export async function createEbook(data: Partial<Ebook>): Promise<Ebook> {
|
||||
const response = await fetch(`${API_BASE}/ebooks`, {
|
||||
method: 'POST',
|
||||
headers: createHeaders(),
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
return handleResponse<Ebook>(response, 'Failed to create ebook');
|
||||
}
|
||||
|
||||
export async function updateEbook(id: string, data: Partial<Ebook>): Promise<Ebook> {
|
||||
const response = await fetch(`${API_BASE}/ebooks/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: createHeaders(),
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
return handleResponse<Ebook>(response, 'Failed to update ebook');
|
||||
}
|
||||
|
||||
export async function deleteEbook(id: string): Promise<void> {
|
||||
const response = await fetch(`${API_BASE}/ebooks/${id}`, {
|
||||
method: 'DELETE',
|
||||
headers: createHeaders(),
|
||||
});
|
||||
if (!response.ok) {
|
||||
let message = 'Failed to delete ebook';
|
||||
try {
|
||||
const errorData = await response.json();
|
||||
if (errorData.error) {
|
||||
message = errorData.error;
|
||||
}
|
||||
} catch (e) {
|
||||
// If we can't parse JSON, use the default message
|
||||
}
|
||||
showError(message);
|
||||
throw new Error(message);
|
||||
}
|
||||
}
|
||||
|
||||
export async function fetchReadingProgress(ebookId: string): Promise<ReadingProgress> {
|
||||
const response = await fetch(`${API_BASE}/ebooks/${ebookId}/progress`, {
|
||||
headers: createHeaders(),
|
||||
});
|
||||
return handleResponse<ReadingProgress>(response, 'Failed to fetch reading progress');
|
||||
}
|
||||
|
||||
export async function updateReadingProgress(ebookId: string, currentPage: number, totalPages?: number): Promise<ReadingProgress> {
|
||||
const response = await fetch(`${API_BASE}/ebooks/${ebookId}/progress`, {
|
||||
method: 'PUT',
|
||||
headers: createHeaders(),
|
||||
body: JSON.stringify({ current_page: currentPage, total_pages: totalPages }),
|
||||
});
|
||||
return handleResponse<ReadingProgress>(response, 'Failed to update reading progress');
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,53 @@
|
||||
import { writable } from 'svelte/store';
|
||||
import type { User } from './api';
|
||||
|
||||
export interface AuthState {
|
||||
user: User | null;
|
||||
token: string | null;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
function createAuthStore() {
|
||||
const initialState: AuthState = {
|
||||
user: null,
|
||||
token: null,
|
||||
loading: true,
|
||||
};
|
||||
|
||||
const { subscribe, set, update } = writable<AuthState>(initialState);
|
||||
|
||||
return {
|
||||
subscribe,
|
||||
login: (token: string, user: User) => {
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem('auth_token', token);
|
||||
}
|
||||
set({ user, token, loading: false });
|
||||
},
|
||||
logout: () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.removeItem('auth_token');
|
||||
}
|
||||
set({ user: null, token: null, loading: false });
|
||||
},
|
||||
setLoading: (loading: boolean) => {
|
||||
update(state => ({ ...state, loading }));
|
||||
},
|
||||
initialize: () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const token = localStorage.getItem('auth_token');
|
||||
if (token) {
|
||||
// Token exists, but we need to validate it by fetching profile
|
||||
// For now, just set loading to false and let components handle
|
||||
set({ user: null, token, loading: false });
|
||||
} else {
|
||||
set({ user: null, token: null, loading: false });
|
||||
}
|
||||
} else {
|
||||
set({ user: null, token: null, loading: false });
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export const authStore = createAuthStore();
|
||||
@@ -0,0 +1 @@
|
||||
// place files you want to import through the `$lib` alias in this folder.
|
||||
@@ -0,0 +1,21 @@
|
||||
import { toast } from '@zerodevx/svelte-toast';
|
||||
|
||||
export function showError(message: string) {
|
||||
toast.push(message, {
|
||||
theme: {
|
||||
'--toastBackground': '#f7768e',
|
||||
'--toastBarBackground': '#f7768e',
|
||||
'--toastColor': '#1a1b26',
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function showSuccess(message: string) {
|
||||
toast.push(message, {
|
||||
theme: {
|
||||
'--toastBackground': '#9ece6a',
|
||||
'--toastBarBackground': '#9ece6a',
|
||||
'--toastColor': '#1a1b26',
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
<script lang="ts">
|
||||
import favicon from '$lib/assets/favicon.svg';
|
||||
import { authStore } from '$lib/auth';
|
||||
import { onMount } from 'svelte';
|
||||
import { SvelteToast } from '@zerodevx/svelte-toast';
|
||||
import '../app.css';
|
||||
|
||||
let { children } = $props();
|
||||
|
||||
// Initialize auth state on mount
|
||||
onMount(() => {
|
||||
authStore.initialize();
|
||||
});
|
||||
|
||||
// Subscribe to auth state
|
||||
let auth = $state({ user: null as any, token: null as string | null, loading: true });
|
||||
authStore.subscribe((state) => {
|
||||
auth = state;
|
||||
});
|
||||
|
||||
function logout() {
|
||||
authStore.logout();
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link rel="icon" href={favicon} />
|
||||
</svelte:head>
|
||||
|
||||
{#if auth.loading}
|
||||
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-tokyo-bg to-tokyo-bg-dark">
|
||||
<div class="text-center">
|
||||
<div class="animate-spin rounded-full h-16 w-16 border-4 border-tokyo-bg-highlight border-t-tokyo-blue mx-auto mb-4"></div>
|
||||
<p class="text-tokyo-fg-dark animate-pulse">Loading your library...</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else if !auth.token}
|
||||
<!-- Auth required -->
|
||||
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-tokyo-bg to-tokyo-bg-dark">
|
||||
<div class="text-center animate-slide-in">
|
||||
<div class="mb-8">
|
||||
<h1 class="text-4xl font-bold text-tokyo-fg mb-2">📚 Ebook Reader</h1>
|
||||
<p class="text-tokyo-fg-dark text-lg">Your personal digital library</p>
|
||||
</div>
|
||||
<div class="space-x-6">
|
||||
<a
|
||||
href="/login"
|
||||
class="btn-primary inline-flex items-center text-sm font-medium shadow-lg hover:shadow-tokyo-purple/25"
|
||||
>
|
||||
Sign In
|
||||
</a>
|
||||
<a
|
||||
href="/register"
|
||||
class="btn-secondary inline-flex items-center text-sm font-medium"
|
||||
>
|
||||
Create Account
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-12 text-tokyo-fg-dark text-sm">
|
||||
<p>Organize • Read • Enjoy</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Authenticated user -->
|
||||
<header class="bg-tokyo-bg-dark border-b border-tokyo-bg-highlight shadow-lg">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between items-center py-4">
|
||||
<div class="flex items-center space-x-4">
|
||||
<h1 class="text-2xl font-bold text-tokyo-fg">📚 Ebook Reader</h1>
|
||||
<span class="hidden sm:inline text-sm text-tokyo-fg-dark">•</span>
|
||||
<span class="hidden sm:inline text-sm text-tokyo-fg-dark">Welcome back, {auth.user?.username}</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<span class="text-sm text-tokyo-fg">Hello, <span class="text-tokyo-cyan font-medium">{auth.user?.username}</span></span>
|
||||
<button
|
||||
onclick={logout}
|
||||
class="btn-danger inline-flex items-center text-sm font-medium shadow-lg hover:shadow-tokyo-red/25 transition-all duration-200"
|
||||
>
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="max-w-7xl mx-auto py-8 sm:px-6 lg:px-8 min-h-[calc(100vh-80px)]">
|
||||
{@render children()}
|
||||
</main>
|
||||
{/if}
|
||||
|
||||
<!-- Toast notifications -->
|
||||
<SvelteToast />
|
||||
@@ -0,0 +1,105 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { fetchEbooks, type Ebook } from '$lib/api';
|
||||
|
||||
let ebooks: Ebook[] = [];
|
||||
let loading = true;
|
||||
let error: string | null = null;
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
ebooks = await fetchEbooks();
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'Failed to load ebooks';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<main class="container mx-auto px-4 py-8">
|
||||
<div class="mb-12 text-center">
|
||||
<h1 class="text-4xl font-bold text-tokyo-fg mb-2 animate-fade-in">📚 Your Ebook Library</h1>
|
||||
<p class="text-tokyo-fg-dark text-lg">Discover and organize your digital reading collection</p>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="flex flex-col items-center justify-center py-16">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-4 border-tokyo-bg-highlight border-t-tokyo-cyan mb-4"></div>
|
||||
<p class="text-tokyo-fg-dark animate-pulse">Loading your ebooks...</p>
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="card max-w-md mx-auto text-center">
|
||||
<div class="card-body">
|
||||
<div class="text-4xl mb-4">⚠️</div>
|
||||
<h3 class="text-xl font-semibold text-tokyo-red mb-2">Oops! Something went wrong</h3>
|
||||
<p class="text-tokyo-fg-dark">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else if ebooks.length === 0}
|
||||
<div class="card max-w-lg mx-auto text-center">
|
||||
<div class="card-body">
|
||||
<div class="text-6xl mb-4">📖</div>
|
||||
<h3 class="text-2xl font-semibold text-tokyo-fg mb-2">Welcome to your library!</h3>
|
||||
<p class="text-tokyo-fg-dark mb-6">You haven't added any ebooks yet. Start building your collection by uploading your favorite books.</p>
|
||||
<button class="btn-primary">Add Your First Ebook</button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
|
||||
{#each ebooks as ebook (ebook.id)}
|
||||
<div class="card group hover:scale-105 transition-all duration-300 animate-slide-in">
|
||||
<div class="aspect-[3/4] bg-gradient-to-br from-tokyo-bg-highlight to-tokyo-bg-selection flex items-center justify-center relative overflow-hidden">
|
||||
{#if ebook.cover_image_path}
|
||||
<img
|
||||
src={ebook.cover_image_path}
|
||||
alt="{ebook.title} cover"
|
||||
class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-tokyo-bg-dark/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
{:else}
|
||||
<div class="text-tokyo-fg-dark text-center p-6">
|
||||
<div class="text-4xl mb-3">📚</div>
|
||||
<div class="text-tokyo-fg text-sm font-medium">No Cover</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="font-bold text-lg text-tokyo-fg mb-2 line-clamp-2 group-hover:text-tokyo-cyan transition-colors duration-200">
|
||||
{ebook.title}
|
||||
</h3>
|
||||
{#if ebook.author}
|
||||
<p class="text-tokyo-cyan text-sm mb-3 font-medium">by {ebook.author}</p>
|
||||
{/if}
|
||||
{#if ebook.description}
|
||||
<p class="text-tokyo-fg-dark text-sm line-clamp-3 leading-relaxed">{ebook.description}</p>
|
||||
{/if}
|
||||
<div class="mt-4 pt-3 border-t border-tokyo-bg-highlight">
|
||||
<div class="flex justify-between items-center text-xs text-tokyo-fg-dark">
|
||||
<span>{new Date(ebook.created_at).toLocaleDateString()}</span>
|
||||
{#if ebook.file_size}
|
||||
<span>{Math.round(ebook.file_size / 1024 / 1024)}MB</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,105 @@
|
||||
<script lang="ts">
|
||||
import { authStore } from '$lib/auth';
|
||||
import { loginUser } from '$lib/api';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let username = '';
|
||||
let password = '';
|
||||
let loading = false;
|
||||
let error = '';
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!username || !password) return;
|
||||
|
||||
loading = true;
|
||||
error = '';
|
||||
|
||||
try {
|
||||
const response = await loginUser(username, password);
|
||||
authStore.login(response.token, response.user);
|
||||
goto('/');
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'Login failed';
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Login - Ebook Reader</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">
|
||||
Welcome Back
|
||||
</h2>
|
||||
<p class="text-tokyo-fg-dark mt-2">Sign in to access your library</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form class="space-y-6" on:submit|preventDefault={handleSubmit}>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label for="username" class="block text-sm font-medium text-tokyo-fg mb-2">
|
||||
Username or Email
|
||||
</label>
|
||||
<input
|
||||
id="username"
|
||||
name="username"
|
||||
type="text"
|
||||
required
|
||||
class="input-field w-full"
|
||||
placeholder="Enter your username or email"
|
||||
bind:value={username}
|
||||
/>
|
||||
</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="Enter your password"
|
||||
bind:value={password}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if 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">{error}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
class="btn-primary w-full flex justify-center items-center disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{#if loading}
|
||||
<div class="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent mr-2"></div>
|
||||
{/if}
|
||||
{loading ? 'Signing in...' : 'Sign In'}
|
||||
</button>
|
||||
|
||||
<div class="text-center">
|
||||
<a href="/register" class="text-tokyo-blue hover:text-tokyo-cyan transition-colors duration-200 text-sm">
|
||||
Don't have an account? Create one here
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,38 @@
|
||||
import { superValidate } from 'sveltekit-superforms/server';
|
||||
import { z } from 'zod';
|
||||
import { registerUser } from '$lib/api';
|
||||
import { redirect, fail } from '@sveltejs/kit';
|
||||
|
||||
const schema = z.object({
|
||||
email: z.string().email('Invalid email address'),
|
||||
username: z.string().min(3, 'Username must be at least 3 characters'),
|
||||
password: z.string().min(8, 'Password must be at least 8 characters').regex(/^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/, 'Password must include at least one uppercase letter, one number, and one symbol'),
|
||||
confirmPassword: z.string(),
|
||||
}).refine(data => data.password === data.confirmPassword, {
|
||||
message: "Passwords do not match",
|
||||
path: ["confirmPassword"],
|
||||
});
|
||||
|
||||
type FormData = z.infer<typeof schema>;
|
||||
|
||||
export const load = async () => {
|
||||
const form = await superValidate(schema);
|
||||
return { form };
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
default: async ({ request }) => {
|
||||
const form = await superValidate(request, schema);
|
||||
if (!form.valid) {
|
||||
return fail(400, { form });
|
||||
}
|
||||
const data = form.data as FormData;
|
||||
try {
|
||||
await registerUser(data.email, data.username, data.password);
|
||||
throw redirect(302, '/login');
|
||||
} catch (err) {
|
||||
if (err instanceof Response) throw err;
|
||||
return fail(500, { form, error: err instanceof Error ? err.message : 'Registration failed' });
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,124 @@
|
||||
<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 - Ebook Reader</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>
|
||||
Reference in New Issue
Block a user