feat: add user account activation page and update sidebar navigation for torrents

web/src/hooks.server.ts

@@ -1,6 +1,7 @@
 import {createImageOptimizer} from 'sveltekit-image-optimize';
 import type {Handle} from '@sveltejs/kit';
 import {createFileSystemCache} from 'sveltekit-image-optimize/cache-adapters';
+import type {HandleServerError} from '@sveltejs/kit';
 
 const cache = createFileSystemCache('./cache');
 const imageHandler = createImageOptimizer({

web/src/lib/components/app-sidebar.svelte

@@ -22,23 +22,16 @@
 						url: '/dashboard/tv/add-show'
 					},
 					{
+                        title: 'Torrents',
+                        url: '/dashboard/tv/torrents'
+                    },
+                    {
 						title: 'Settings',
 						url: '#'
 					}
-				]
+
+                ]
 			},
-			{
-				title: 'Torrents',
-				url: '#',
-				icon: DownloadIcon,
-				isActive: true,
-				items: [
-					{
-						title: 'Show Torrents',
-						url: '/dashboard/torrents'
-					}
-				]
-			}
 		],
 		navSecondary: [
 			{

web/src/lib/components/login-form.svelte

@@ -1,99 +1,199 @@
 <script lang="ts">
-	import {Button} from '$lib/components/ui/button/index.js';
-	import * as Card from '$lib/components/ui/card/index.js';
-	import {Input} from '$lib/components/ui/input/index.js';
-	import {Label} from '$lib/components/ui/label/index.js';
-	import {goto} from '$app/navigation';
-	import {env} from '$env/dynamic/public';
+    import {Button} from '$lib/components/ui/button/index.js';
+    import * as Card from '$lib/components/ui/card/index.js';
+    import {Input} from '$lib/components/ui/input/index.js';
+    import {Label} from '$lib/components/ui/label/index.js';
+    import {goto} from '$app/navigation';
+    import {env} from '$env/dynamic/public';
+    import * as Tabs from "$lib/components/ui/tabs/index.js";
 
-	let apiUrl = env.PUBLIC_API_URL;
+    let apiUrl = env.PUBLIC_API_URL;
 
-	let email = '';
-	let password = '';
-	let errorMessage = '';
-	let isLoading = false;
+    let email = '';
+    let password = '';
+    let errorMessage = '';
+    let isLoading = false;
+    let tabValue = "login";
 
-	async function handleLogin(event: Event) {
-		event.preventDefault();
+    async function handleLogin(event: Event) {
+        event.preventDefault();
 
-		isLoading = true;
-		errorMessage = '';
+        isLoading = true;
+        errorMessage = '';
 
-		const formData = new URLSearchParams();
-		formData.append('username', email);
-		formData.append('password', password);
-		console.log(apiUrl + '/auth/cookie/login');
-		try {
-			const response = await fetch(apiUrl + '/auth/cookie/login', {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/x-www-form-urlencoded'
-				},
-				body: formData.toString(),
-				credentials: 'include'
-			});
+        const formData = new URLSearchParams();
+        formData.append('username', email);
+        formData.append('password', password);
+        try {
+            const response = await fetch(apiUrl + '/auth/cookie/login', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded'
+                },
+                body: formData.toString(),
+                credentials: 'include'
+            });
 
-			if (response.ok) {
-				console.log('Login successful!');
-				console.log('Received User Data: ', response);
-				await goto('/dashboard');
-				errorMessage = 'Login successful! Redirecting...';
-			} else {
-				let errorText = await response.text();
-				try {
-					const errorData = JSON.parse(errorText);
-					errorMessage = errorData.message || 'Login failed. Please check your credentials.';
-				} catch {
-					errorMessage = errorText || 'Login failed. Please check your credentials.';
-				}
-				console.error('Login failed:', response.status, errorText);
-			}
-		} catch (error) {
-			console.error('Login request failed:', error);
-			errorMessage = 'An error occurred during the login request.';
-		} finally {
-			isLoading = false;
-		}
-	}
+            if (response.ok) {
+                console.log('Login successful!');
+                console.log('Received User Data: ', response);
+                goto('/dashboard');
+                errorMessage = 'Login successful! Redirecting...';
+            } else {
+                let errorText = await response.text();
+                try {
+                    const errorData = JSON.parse(errorText);
+                    errorMessage = errorData.message || 'Login failed. Please check your credentials.';
+                } catch {
+                    errorMessage = errorText || 'Login failed. Please check your credentials.';
+                }
+                console.error('Login failed:', response.status, errorText);
+            }
+        } catch (error) {
+            console.error('Login request failed:', error);
+            errorMessage = 'An error occurred during the login request.';
+        } finally {
+            isLoading = false;
+        }
+    }
+
+    async function handleSignup(event: Event) {
+        event.preventDefault();
+
+        isLoading = true;
+        errorMessage = '';
+
+        try {
+            const response = await fetch(apiUrl + '/auth/register', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    email: email,
+                    password: password
+
+                }),
+                credentials: 'include'
+            });
+
+            if (response.ok) {
+                console.log('Registration successful!');
+                console.log('Received User Data: ', response);
+                goto('/dashboard');
+                errorMessage = 'Registration successful! Redirecting...';
+            } else {
+                let errorText = await response.text();
+                try {
+                    const errorData = JSON.parse(errorText);
+                    errorMessage = errorData.message || 'Registration failed. Please check your credentials.';
+                } catch {
+                    errorMessage = errorText || 'Registration failed. Please check your credentials.';
+                }
+                console.error('Registration failed:', response.status, errorText);
+            }
+        } catch (error) {
+            console.error('Registration request failed:', error);
+            errorMessage = 'An error occurred during the Registration request.';
+        } finally {
+            isLoading = false;
+        }
+    }
 </script>
+{#snippet tabSwitcher()}
+    <!--    <Tabs.List>-->
+    <!--        <Tabs.Trigger value="login">Login</Tabs.Trigger>-->
+    <!--        <Tabs.Trigger value="register">Sign up</Tabs.Trigger>-->
+    <!--    </Tabs.List>-->
+{/snippet}
+<Tabs.Root class="w-[400px]" value={tabValue}>
+    <Tabs.Content value="login">
+        <Card.Root class="mx-auto max-w-sm">
+            <Card.Header>
+                {@render tabSwitcher()}
 
-<Card.Root class="mx-auto max-w-sm">
-	<Card.Header>
-		<Card.Title class="text-2xl">Login</Card.Title>
-		<Card.Description>Enter your email below to login to your account</Card.Description>
-	</Card.Header>
-	<Card.Content>
-		<form class="grid gap-4" on:submit={handleLogin}>
-			<div class="grid gap-2">
-				<Label for="email">Email</Label>
-				<Input bind:value={email} id="email" placeholder="m@example.com" required type="email"/>
-			</div>
-			<div class="grid gap-2">
-				<div class="flex items-center">
-					<Label for="password">Password</Label>
-					<a class="ml-auto inline-block text-sm underline" href="##"> Forgot your password? </a>
-				</div>
-				<Input bind:value={password} id="password" required type="password"/>
-			</div>
+                <Card.Title class="text-2xl">Login</Card.Title>
+                <Card.Description>Enter your email below to login to your account</Card.Description>
+            </Card.Header>
+            <Card.Content>
+                <form class="grid gap-4" onsubmit={handleLogin}>
+                    <div class="grid gap-2">
+                        <Label for="email">Email</Label>
+                        <Input bind:value={email} id="email" placeholder="m@example.com" required type="email"/>
+                    </div>
+                    <div class="grid gap-2">
+                        <div class="flex items-center">
+                            <Label for="password">Password</Label>
+                            <!-- TODO: add link to relevant documentation -->
+                            <a class="ml-auto inline-block text-sm underline" href="##"> Forgot your password? </a>
+                        </div>
+                        <Input bind:value={password} id="password" required type="password"/>
+                    </div>
 
-			{#if errorMessage}
-				<p class="text-sm text-red-500">{errorMessage}</p>
-			{/if}
+                    {#if errorMessage}
+                        <p class="text-sm text-red-500">{errorMessage}</p>
+                    {/if}
 
-			<Button class="w-full" disabled={isLoading} type="submit">
-				{#if isLoading}
-					Logging in...
-				{:else}
-					Login
-				{/if}
-			</Button>
-		</form>
+                    <Button class="w-full" disabled={isLoading} type="submit">
+                        {#if isLoading}
+                            Logging in...
+                        {:else}
+                            Login
+                        {/if}
+                    </Button>
+                </form>
 
-		<Button class="mt-2 w-full" variant="outline">Login with Google</Button>
+                <Button class="mt-2 w-full" variant="outline">Login with Google</Button>
 
-		<div class="mt-4 text-center text-sm">
-			Don't have an account?
-			<a class="underline" href="##"> Sign up </a>
-		</div>
-	</Card.Content>
-</Card.Root>
+                <div class="mt-4 text-center text-sm">
+                    Don't have an account?
+                    <span class="underline" onclick={tabValue="register"}> Sign up </span>
+                </div>
+            </Card.Content>
+        </Card.Root>
+    </Tabs.Content>
+    <Tabs.Content value="register">
+        <Card.Root class="mx-auto max-w-sm">
+
+            <Card.Header>
+                {@render tabSwitcher()}
+                <Card.Title class="text-2xl">Sign up</Card.Title>
+                <Card.Description>Enter your email and password below to sign up.</Card.Description>
+            </Card.Header>
+            <Card.Content>
+
+                <form class="grid gap-4" onsubmit={handleSignup}>
+                    <div class="grid gap-2">
+                        <Label for="email">Email</Label>
+                        <Input bind:value={email} id="email" placeholder="m@example.com" required type="email"/>
+                    </div>
+                    <div class="grid gap-2">
+                        <div class="flex items-center">
+                            <Label for="password">Password</Label>
+                        </div>
+                        <Input bind:value={password} id="password" required type="password"/>
+                    </div>
+
+                    {#if errorMessage}
+                        <p class="text-sm text-red-500">{errorMessage}</p>
+                    {/if}
+
+                    <Button class="w-full" disabled={isLoading} type="submit">
+                        {#if isLoading}
+                            Signing up...
+                        {:else}
+                            Sign up
+                        {/if}
+                    </Button>
+                </form>
+
+                <Button class="mt-2 w-full" variant="outline">Login with Google</Button>
+
+                <div class="mt-4 text-center text-sm">
+                    Already have an account?
+                    <span class="underline" onclick={tabValue="login"}>Login </span>
+                </div>
+            </Card.Content>
+        </Card.Root>
+    </Tabs.Content>
+</Tabs.Root>

web/src/routes/dashboard/+layout.svelte

@@ -3,9 +3,13 @@
 	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
 	import type {LayoutProps} from './$types';
 	import {setContext} from 'svelte';
+	import {goto} from '$app/navigation';
 
 	let {data, children}: LayoutProps = $props();
 	console.log('Received User Data: ', data.user);
+	if (!data.user.is_verified) {
+		goto('/login/verify')
+	}
 	setContext('user', () => data.user);
 </script>
 

web/src/routes/dashboard/tv/+page.svelte

@@ -37,11 +37,9 @@
 </header>
 
 <div class="flex w-full flex-1 flex-col gap-4 p-4 pt-0">
-
-    <Button class="w-full max-w-[200px]" onclick={()=>{goto("/dashboard/tv/add-show")}} variant="outline">
-        Add a Show
-    </Button>
-
+    <h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
+        TV Shows
+    </h1>
     <div
             class="grid w-full auto-rows-min gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
     >
@@ -53,10 +51,10 @@
             {:then tvShows}
                 {#each tvShows as show}
                     <a href={'/dashboard/tv/' + show.id}>
-                        <Card.Root class="h-full">
+                        <Card.Root class="h-full ">
                             <Card.Header>
-                                <Card.Title>{getFullyQualifiedShowName(show)}</Card.Title>
-                                <Card.Description class="truncate">{show.overview}</Card.Description>
+                                <Card.Title class="line-clamp-1">{getFullyQualifiedShowName(show)}</Card.Title>
+                                <Card.Description class="line-clamp-1">{show.overview}</Card.Description>
                             </Card.Header>
                             <Card.Content>
                                 <img

web/src/routes/dashboard/tv/[showId=uuid]/[SeasonNumber=integer]/+page.svelte

@@ -8,7 +8,7 @@
 	import {getContext} from 'svelte';
 	import type {PublicSeasonFile, RichShowTorrent, Season, Show} from '$lib/types';
 	import CheckmarkX from '$lib/components/checkmark-x.svelte';
-	import {getTorrentQualityString} from "$lib/utils";
+    import {getTorrentQualityString, getFullyQualifiedShowName} from "$lib/utils";
 
 	const SeasonNumber = page.params.SeasonNumber;
 	let seasonFiles: PublicSeasonFile[] = $state(page.data.files);
@@ -18,7 +18,7 @@
 		if (item.number === parseInt(SeasonNumber)) season = item;
 	});
 
-	console.log('loaded ', show);
+    console.log('loaded files', seasonFiles);
 </script>
 
 <header class="flex h-16 shrink-0 items-center gap-2">
@@ -54,8 +54,7 @@
 	</div>
 </header>
 <h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
-	{show.name}
-	{show.year == null ? '' : '(' + show.year + ')'} Season {SeasonNumber}
+    {getFullyQualifiedShowName(show)} Season {SeasonNumber}
 </h1>
 <div class="flex flex-1 flex-col gap-4 p-4">
 	<div class="flex items-center gap-2">
@@ -91,7 +90,7 @@
 								{file.file_path_suffix}
 							</Table.Cell>
 							<Table.Cell class="w-[10px] font-medium">
-								<CheckmarkX state={file.imported}/>
+                                <CheckmarkX state={file.downloaded}/>
 							</Table.Cell>
 						</Table.Row>
 					{:else }

web/src/routes/dashboard/tv/add-show/+page.svelte

@@ -88,7 +88,6 @@
 <div class="flex w-full flex-1 flex-col items-center  gap-4 p-4 pt-0">
 	<div class="grid w-full max-w-sm items-center gap-12">
 		<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
-
 			Add a show
 		</h1>
 		<section>

web/src/routes/dashboard/tv/torrents/+page.svelte

@@ -28,7 +28,11 @@
 				</Breadcrumb.Item>
 				<Breadcrumb.Separator class="hidden md:block"/>
 				<Breadcrumb.Item>
-					<Breadcrumb.Page>Torrents</Breadcrumb.Page>
+					<Breadcrumb.Link href="/dashboard/tv">Shows</Breadcrumb.Link>
+				</Breadcrumb.Item>
+				<Breadcrumb.Separator class="hidden md:block"/>
+				<Breadcrumb.Item>
+					<Breadcrumb.Page>TV Torrents</Breadcrumb.Page>
 				</Breadcrumb.Item>
 			</Breadcrumb.List>
 		</Breadcrumb.Root>
@@ -36,6 +40,9 @@
 </header>
 
 <div class="flex w-full flex-1 flex-col items-center gap-4 p-4 pt-0">
+	<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
+		TV Torrents
+	</h1>
 	{#await showsPromise}
 		Loading...
 	{:then shows}

web/src/routes/login/verify/+page.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+    import {UserCheck} from 'lucide-svelte';
+    import {Button} from '$lib/components/ui/button/index.js';
+</script>
+
+<div class="flex min-h-screen flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8">
+    <div class="mx-auto w-full max-w-md text-center">
+        <div class="mb-6">
+            <UserCheck class="mx-auto h-16 w-16 text-primary"/>
+        </div>
+        <h1 class="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+            Account Pending Activation
+        </h1>
+        <p class="mt-4 text-lg text-muted-foreground">
+            Your account has been successfully created, but activation by an
+            administrator is required.
+        </p>
+        <div class="mt-8">
+            <Button href="/dashboard">Go to Dashboard</Button>
+        </div>
+        <p class="mt-10 text-sm text-muted-foreground">
+            The above button will only work once your account is verified.
+        </p>
+        <p class="mt-10 text-sm text-muted-foreground end">
+            If you have any questions, please contact an administrator.</p>
+    </div>
+</div>
+
+
+<style>
+    /* Assuming you have Tailwind CSS with Shadcn Svelte theme variables configured */
+    /* Otherwise, you might need to define these colors or use your own classes */
+    .bg-background {
+        background-color: hsl(var(--background));
+    }
+
+    .text-primary {
+        color: hsl(var(--primary));
+    }
+
+    .text-foreground {
+        color: hsl(var(--foreground));
+    }
+
+    .text-muted-foreground {
+        color: hsl(var(--muted-foreground));
+    }
+
+    .bg-primary {
+        background-color: hsl(var(--primary));
+    }
+
+    .text-primary-foreground {
+        color: hsl(var(--primary-foreground));
+    }
+
+    .ring-ring {
+        --tw-ring-color: hsl(var(--ring));
+    }
+
+    .ring-offset-background {
+        --tw-ring-offset-color: hsl(var(--background));
+    }
+
+    .hover\:bg-primary\/90:hover {
+        background-color: hsl(var(--primary) / 0.9);
+    }
+</style>