From 79ccfe701d41394afaef5661cf82c64af4f70a2e Mon Sep 17 00:00:00 2001
From: maxDorninger <97409287+maxDorninger@users.noreply.github.com>
Date: Sat, 2 Aug 2025 14:18:18 +0200
Subject: [PATCH] rework login page, deduplicate code by using layouts

---
 web/src/lib/components/login-form.svelte      | 482 +++++++++---------
 web/src/routes/login/+layout.svelte           |  60 +++
 web/src/routes/login/+layout.ts               |  16 +
 web/src/routes/login/+page.svelte             |  31 +-
 web/src/routes/login/+page.ts                 |  16 -
 .../routes/login/forgot-password/+page.svelte | 145 +++---
 .../routes/login/reset-password/+page.svelte  | 127 ++---
 web/src/routes/login/signup/+page.svelte      |  16 +
 web/src/routes/login/verify/+page.svelte      |  52 +-
 9 files changed, 476 insertions(+), 469 deletions(-)
 create mode 100644 web/src/routes/login/+layout.svelte
 create mode 100644 web/src/routes/login/+layout.ts
 delete mode 100644 web/src/routes/login/+page.ts
 create mode 100644 web/src/routes/login/signup/+page.svelte

diff --git a/web/src/lib/components/login-form.svelte b/web/src/lib/components/login-form.svelte
index bf2f5cf..22a6a4d 100644
--- a/web/src/lib/components/login-form.svelte
+++ b/web/src/lib/components/login-form.svelte
@@ -1,265 +1,271 @@
 <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 * as Tabs from '$lib/components/ui/tabs/index.js';
-	import { toast } from 'svelte-sonner';
-	import LoadingBar from '$lib/components/loading-bar.svelte';
-	import { base } from '$app/paths';
+    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';
+    import {toast} from 'svelte-sonner';
+    import LoadingBar from '$lib/components/loading-bar.svelte';
+    import {base} from '$app/paths';
+    import * as Alert from "$lib/components/ui/alert/index.js";
+    import CheckCircle2Icon from "@lucide/svelte/icons/check-circle-2";
+    import AlertCircleIcon from "@lucide/svelte/icons/alert-circle";
 
-	const apiUrl = env.PUBLIC_API_URL;
+    const apiUrl = env.PUBLIC_API_URL;
 
-	let { oauthProvider } = $props();
-	let oauthProviderName = $derived(oauthProvider.oauth_name);
+    let {oauthProvider, login}: { oauthProvider: { oauth_name: string }, login: boolean } = $props();
+    let oauthProviderName = $derived(oauthProvider.oauth_name);
 
-	let email = $state('');
-	let password = $state('');
-	let errorMessage = $state('');
-	let isLoading = $state(false);
-	let tabValue = $state('login');
+    let email = $state('');
+    let password = $state('');
+    let errorMessage = $state('');
+    let isLoading = $state(false);
+    let tabValue = $state('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);
-		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);
-				errorMessage = 'Login successful! Redirecting...';
-				toast.success(errorMessage);
-				goto(base + '/dashboard');
-			} 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.';
-				}
-				toast.error(errorMessage);
-				console.error('Login failed:', response.status, errorText);
-			}
-		} catch (error) {
-			console.error('Login request failed:', error);
-			errorMessage = 'An error occurred during the login request.';
-			toast.error(errorMessage);
-		} finally {
-			isLoading = false;
-		}
-	}
+            if (response.ok) {
+                console.log('Login successful!');
+                console.log('Received User Data: ', response);
+                errorMessage = 'Login successful! Redirecting...';
+                toast.success(errorMessage);
+                goto(base + '/dashboard');
+            } 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.';
+                }
+                toast.error(errorMessage);
+                console.error('Login failed:', response.status, errorText);
+            }
+        } catch (error) {
+            console.error('Login request failed:', error);
+            errorMessage = 'An error occurred during the login request.';
+            toast.error(errorMessage);
+        } finally {
+            isLoading = false;
+        }
+    }
 
-	async function handleSignup(event: Event) {
-		event.preventDefault();
+    async function handleSignup(event: Event) {
+        event.preventDefault();
 
-		isLoading = true;
-		errorMessage = '';
+        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'
-			});
+        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);
-				tabValue = 'login'; // Switch to login tab after successful registration
-				errorMessage = 'Registration successful! Please login.';
-				toast.success(errorMessage);
-			} 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.';
-				}
-				toast.error(errorMessage);
-				console.error('Registration failed:', response.status, errorText);
-			}
-		} catch (error) {
-			console.error('Registration request failed:', error);
-			errorMessage = 'An error occurred during the Registration request.';
-			toast.error(errorMessage);
-		} finally {
-			isLoading = false;
-		}
-	}
+            if (response.ok) {
+                console.log('Registration successful!');
+                console.log('Received User Data: ', response);
+                tabValue = 'login'; // Switch to login tab after successful registration
+                errorMessage = 'Registration successful! Please login.';
+                toast.success(errorMessage);
+            } 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.';
+                }
+                toast.error(errorMessage);
+                console.error('Registration failed:', response.status, errorText);
+            }
+        } catch (error) {
+            console.error('Registration request failed:', error);
+            errorMessage = 'An error occurred during the Registration request.';
+            toast.error(errorMessage);
+        } finally {
+            isLoading = false;
+        }
+    }
 
-	async function handleOauth() {
-		try {
-			const response = await fetch(
-				apiUrl + '/auth/cookie/' + oauthProviderName + '/authorize?scopes=email',
-				{
-					method: 'GET',
-					headers: {
-						'Content-Type': 'application/json'
-					}
-				}
-			);
-			if (response.ok) {
-				let result = await response.json();
-				console.log(
-					'Redirecting to OAuth provider:',
-					oauthProviderName,
-					'url: ',
-					result.authorization_url
-				);
-				toast.success('Redirecting to ' + oauthProviderName + ' for authentication...');
-				window.location = result.authorization_url;
-			} else {
-				let errorText = await response.text();
-				toast.error(errorMessage);
-				console.error('Login failed:', response.status, errorText);
-			}
-		} catch (error) {
-			console.error('Login request failed:', error);
-			errorMessage = 'An error occurred during the login request.';
-			toast.error(errorMessage);
-		}
-	}
+    async function handleOauth() {
+        try {
+            const response = await fetch(
+                apiUrl + '/auth/cookie/' + oauthProviderName + '/authorize?scopes=email',
+                {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                }
+            );
+            if (response.ok) {
+                let result = await response.json();
+                console.log(
+                    'Redirecting to OAuth provider:',
+                    oauthProviderName,
+                    'url: ',
+                    result.authorization_url
+                );
+                toast.success('Redirecting to ' + oauthProviderName + ' for authentication...');
+                window.location = result.authorization_url;
+            } else {
+                let errorText = await response.text();
+                toast.error(errorMessage);
+                console.error('Login failed:', response.status, errorText);
+            }
+        } catch (error) {
+            console.error('Login request failed:', error);
+            errorMessage = 'An error occurred during the login request.';
+            toast.error(errorMessage);
+        }
+    }
 </script>
 
 {#snippet oauthLogin()}
-	{#await oauthProvider}
-		<LoadingBar />
-	{:then result}
-		{#if result.oauth_name != null}
-			<div
-				class="relative mt-2 text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border"
-			>
+    {#await oauthProvider}
+        <LoadingBar/>
+    {:then result}
+        {#if result.oauth_name != null}
+            <div
+                    class="relative mt-2 text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border"
+            >
 				<span class="relative z-10 bg-background px-2 text-muted-foreground">
 					Or continue with
 				</span>
-			</div>
-			<Button class="mt-2 w-full" onclick={() => handleOauth()} variant="outline"
-				>Login with {result.oauth_name}</Button
-			>
-		{/if}
-	{/await}
+            </div>
+            <Button class="mt-2 w-full" onclick={() => handleOauth()} variant="outline"
+            >Login with {result.oauth_name}</Button
+            >
+        {/if}
+    {/await}
 {/snippet}
-<Tabs.Root value={tabValue}>
-	<Tabs.Content value="login">
-		<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 log in 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>
-							<a class="ml-auto inline-block text-sm underline" href="{base}/login/forgot-password">
-								Forgot your password?
-							</a>
-						</div>
-						<Input bind:value={password} id="password" required type="password" />
-					</div>
+{#if login}
+    <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 log in 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>
+                        <a class="ml-auto inline-block text-sm underline" href="{base}/login/forgot-password">
+                            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}
+                    <Alert.Root variant="destructive">
+                        <AlertCircleIcon class="size-4"/>
+                        <Alert.Title>Error</Alert.Title>
+                        <Alert.Description
+                        >{errorMessage}</Alert.Description
+                        >
+                    </Alert.Root>
+                {/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>
 
-				{@render oauthLogin()}
+            {@render oauthLogin()}
 
-				<div class="mt-4 text-center text-sm">
-					<Button onclick={() => (tabValue = 'register')} variant="link">
-						Don't have an account? Sign up
-					</Button>
-				</div>
-			</Card.Content>
-		</Card.Root>
-	</Tabs.Content>
-	<Tabs.Content value="register">
-		<Card.Root class="mx-auto max-w-sm">
-			<Card.Header>
-				<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="email2">Email</Label>
-						<Input
-							bind:value={email}
-							id="email2"
-							placeholder="m@example.com"
-							required
-							type="email"
-						/>
-					</div>
-					<div class="grid gap-2">
-						<div class="flex items-center">
-							<Label for="password2">Password</Label>
-						</div>
-						<Input bind:value={password} id="password2" required type="password" />
-					</div>
+            <div class="mt-4 text-center text-sm">
+                <Button href="{base}/login/signup/" variant="link">
+                    Don't have an account? Sign up
+                </Button>
+            </div>
+        </Card.Content>
+    </Card.Root>
+{:else}
+    <Card.Root class="mx-auto max-w-sm">
+        <Card.Header>
+            <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="email2">Email</Label>
+                    <Input
+                            bind:value={email}
+                            id="email2"
+                            placeholder="m@example.com"
+                            required
+                            type="email"
+                    />
+                </div>
+                <div class="grid gap-2">
+                    <div class="flex items-center">
+                        <Label for="password2">Password</Label>
+                    </div>
+                    <Input bind:value={password} id="password2" 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}
-							Signing up...
-						{:else}
-							Sign up
-						{/if}
-					</Button>
-				</form>
-				{@render oauthLogin()}
+                <Button class="w-full" disabled={isLoading} type="submit">
+                    {#if isLoading}
+                        Signing up...
+                    {:else}
+                        Sign up
+                    {/if}
+                </Button>
+            </form>
+            {@render oauthLogin()}
 
-				<div class="mt-4 text-center text-sm">
-					<Button onclick={() => (tabValue = 'login')} variant="link"
-						>Already have an account? Login
-					</Button>
-				</div>
-			</Card.Content>
-		</Card.Root>
-	</Tabs.Content>
-</Tabs.Root>
+            <div class="mt-4 text-center text-sm">
+                <Button href="{base}/login/" variant="link"
+                >Already have an account? Login
+                </Button>
+            </div>
+        </Card.Content>
+    </Card.Root>
+{/if}
\ No newline at end of file
diff --git a/web/src/routes/login/+layout.svelte b/web/src/routes/login/+layout.svelte
new file mode 100644
index 0000000..9bef3fa
--- /dev/null
+++ b/web/src/routes/login/+layout.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+    import logo from "$lib/images/logo.svg";
+    import { Separator } from "$lib/components/ui/separator/index.js";
+
+    import background from '$lib/images/pawel-czerwinski-NTYYL9Eb9y8-unsplash.jpg?enhanced';
+    import { PUBLIC_VERSION } from '$env/static/public';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import {setContext} from "svelte";
+
+    setContext("oauthProvider", () => page.data.oauthProvider)
+    let {data, children} = $props();
+</script>
+
+<div class="grid min-h-svh lg:grid-cols-2">
+    <div class="flex flex-col gap-4 p-6 md:p-10">
+        <div class="flex justify-center gap-2 md:justify-start">
+            <a class="flex items-center gap-2 " href="{base}/">
+                <div class="flex size-16 items-center justify-center rounded-md text-primary-foreground">
+                    <img alt="MediaManager Logo" class="size-12" src={logo} />
+                </div>
+                <div>
+                    <h1 class="text-2xl font-bold">Media Manager</h1>
+                    <span class="truncate text-xs">{PUBLIC_VERSION}</span>
+                </div>
+            </a>
+        </div>
+        <div class="flex flex-1 items-center justify-center">
+            <div class="w-full max-w-[90vw]">
+                {@render children()}
+            </div>
+        </div>
+        <div class="flex flex-col items-center justify-center gap-3 text-center">
+            <a class="underline" href="https://maxdorninger.github.io/MediaManager/troubleshooting.html">
+                Trouble logging in?
+            </a>
+            <div
+                class="flex flex-wrap items-center justify-center gap-x-3 gap-y-1 text-sm text-muted-foreground"
+            >
+                <a class="underline" href="https://github.com/maxdorninger/MediaManager">GitHub</a>
+                <Separator class="h-4" orientation="vertical" />
+                <a class="underline" href="https://github.com/sponsors/maxdorninger">Donate</a>
+                <Separator class="h-4" orientation="vertical" />
+                <a
+                    class="underline"
+                    href="https://unsplash.com/photos/blue-white-and-red-abstract-painting-NTYYL9Eb9y8"
+                >
+                    Image Credit
+                </a>
+            </div>
+        </div>
+    </div>
+    <div class="relative hidden lg:block">
+        <enhanced:img
+                src={background}
+                alt="background"
+                class="absolute inset-0 h-full w-full rounded-l-3xl object-cover dark:brightness-[0.8]"
+        />
+    </div>
+</div>
diff --git a/web/src/routes/login/+layout.ts b/web/src/routes/login/+layout.ts
new file mode 100644
index 0000000..6240bee
--- /dev/null
+++ b/web/src/routes/login/+layout.ts
@@ -0,0 +1,16 @@
+import type {LayoutLoad} from './$types';
+import {env} from '$env/dynamic/public';
+
+const apiUrl = env.PUBLIC_API_URL;
+
+export const load: LayoutLoad = async ({fetch}) => {
+    const response = await fetch(apiUrl + '/auth/metadata', {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        credentials: 'include'
+    });
+
+    return {oauthProvider: await response.json()};
+};
\ No newline at end of file
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index 84a0aed..a3f9b4c 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
 	import LoginForm from '$lib/components/login-form.svelte';
-	import logo from '$lib/images/logo.svg';
-	import background from '$lib/images/pawel-czerwinski-NTYYL9Eb9y8-unsplash.jpg?enhanced';
 	import { page } from '$app/state';
+	import {getContext} from "svelte";
 
-	let oauthProvider = page.data.oauthProvider;
+	let oauthProvider: () => {oauth_name: string} = getContext("oauthProvider");
 </script>
 
 <svelte:head>
@@ -15,27 +14,5 @@
 	/>
 </svelte:head>
 
-<div class="grid min-h-svh lg:grid-cols-2">
-	<div class="flex flex-col gap-4 p-6 md:p-10">
-		<div class="flex justify-center gap-2 md:justify-start">
-			<a class="flex items-center gap-2 font-medium" href="##">
-				<div class="flex size-16 items-center justify-center rounded-md text-primary-foreground">
-					<img alt="MediaManager Logo" class="size-12" src={logo} />
-				</div>
-				<h1 class="scale-110">Media Manager</h1>
-			</a>
-		</div>
-		<div class="flex flex-1 items-center justify-center">
-			<div class="w-full max-w-[90vw]">
-				<LoginForm {oauthProvider} />
-			</div>
-		</div>
-	</div>
-	<div class="relative hidden lg:block">
-		<enhanced:img
-			src={background}
-			alt="background"
-			class="absolute inset-0 h-full w-full rounded-l-3xl object-cover dark:brightness-[0.8]"
-		/>
-	</div>
-</div>
+
+<LoginForm oauthProvider={oauthProvider()} login={true} />
diff --git a/web/src/routes/login/+page.ts b/web/src/routes/login/+page.ts
deleted file mode 100644
index dc24ab5..0000000
--- a/web/src/routes/login/+page.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { env } from '$env/dynamic/public';
-import type { PageLoad } from './$types';
-
-const apiUrl = env.PUBLIC_API_URL;
-
-export const load: PageLoad = async ({ fetch }) => {
-	const response = await fetch(apiUrl + '/auth/metadata', {
-		method: 'GET',
-		headers: {
-			'Content-Type': 'application/json'
-		},
-		credentials: 'include'
-	});
-
-	return { oauthProvider: await response.json() };
-};
diff --git a/web/src/routes/login/forgot-password/+page.svelte b/web/src/routes/login/forgot-password/+page.svelte
index 0720992..02b8d6d 100644
--- a/web/src/routes/login/forgot-password/+page.svelte
+++ b/web/src/routes/login/forgot-password/+page.svelte
@@ -67,90 +67,67 @@
 	/>
 </svelte:head>
 
-<div class="grid min-h-svh lg:grid-cols-2">
-	<div class="flex flex-col gap-4 p-6 md:p-10">
-		<div class="flex justify-center gap-2 md:justify-start">
-			<a class="flex items-center gap-2 font-medium" href="{base}/login">
-				<div class="flex size-16 items-center justify-center rounded-md text-primary-foreground">
-					<img alt="MediaManager Logo" class="size-12" src={logo} />
+<Card class="mx-auto max-w-sm">
+	<CardHeader>
+		<CardTitle class="text-2xl">Forgot Password</CardTitle>
+		<CardDescription>
+			{#if isSuccess}
+				We've sent a password reset link to your email address if a SMTP server is
+				configured. Check your inbox and follow the instructions to reset your password. If
+				you didn't receive an email, please contact an administrator, the reset link will be
+				in the logs of MediaManager.
+			{:else}
+				Enter your email address and we'll send you a link to reset your password.
+			{/if}
+		</CardDescription>
+	</CardHeader>
+	<CardContent>
+		{#if isSuccess}
+			<div class="space-y-4">
+				<div class="rounded-lg bg-green-50 p-4 text-center dark:bg-green-950">
+					<p class="text-sm text-green-700 dark:text-green-300">
+						Password reset email sent successfully!
+					</p>
 				</div>
-				<h1 class="scale-110">Media Manager</h1>
+				<div class="text-center text-sm text-muted-foreground">
+					<p>Didn't receive the email? Check your spam folder or</p>
+					<button
+						class="text-primary hover:underline"
+						onclick={() => {
+							isSuccess = false;
+							email = '';
+						}}
+					>
+						try again
+					</button>
+				</div>
+			</div>
+		{:else}
+			<form class="grid gap-4" onsubmit={handleSubmit}>
+				<div class="grid gap-2">
+					<Label for="email">Email</Label>
+					<Input
+						id="email"
+						type="email"
+						placeholder="m@example.com"
+						bind:value={email}
+						disabled={isLoading}
+						required
+					/>
+				</div>
+				<Button type="submit" class="w-full" disabled={isLoading || !email}>
+					{#if isLoading}
+						Sending Reset Email...
+					{:else}
+						Send Reset Email
+					{/if}
+				</Button>
+			</form>
+		{/if}
+		<div class="mt-4 text-center text-sm">
+			<a href="{base}/login" class="font-semibold text-primary hover:underline">
+				Back to Login
 			</a>
 		</div>
-		<div class="flex flex-1 items-center justify-center">
-			<div class="w-full max-w-[90vw]">
-				<Card class="mx-auto max-w-sm">
-					<CardHeader>
-						<CardTitle class="text-2xl">Forgot Password</CardTitle>
-						<CardDescription>
-							{#if isSuccess}
-								We've sent a password reset link to your email address if a SMTP server is
-								configured. Check your inbox and follow the instructions to reset your password. If
-								you didn't receive an email, please contact an administrator, the reset link will be
-								in the logs of MediaManager.
-							{:else}
-								Enter your email address and we'll send you a link to reset your password.
-							{/if}
-						</CardDescription>
-					</CardHeader>
-					<CardContent>
-						{#if isSuccess}
-							<div class="space-y-4">
-								<div class="rounded-lg bg-green-50 p-4 text-center dark:bg-green-950">
-									<p class="text-sm text-green-700 dark:text-green-300">
-										Password reset email sent successfully!
-									</p>
-								</div>
-								<div class="text-center text-sm text-muted-foreground">
-									<p>Didn't receive the email? Check your spam folder or</p>
-									<button
-										class="text-primary hover:underline"
-										onclick={() => {
-											isSuccess = false;
-											email = '';
-										}}
-									>
-										try again
-									</button>
-								</div>
-							</div>
-						{:else}
-							<form class="grid gap-4" onsubmit={handleSubmit}>
-								<div class="grid gap-2">
-									<Label for="email">Email</Label>
-									<Input
-										id="email"
-										type="email"
-										placeholder="m@example.com"
-										bind:value={email}
-										disabled={isLoading}
-										required
-									/>
-								</div>
-								<Button type="submit" class="w-full" disabled={isLoading || !email}>
-									{#if isLoading}
-										Sending Reset Email...
-									{:else}
-										Send Reset Email
-									{/if}
-								</Button>
-							</form>
-						{/if}
-						<div class="mt-4 text-center text-sm">
-							<a href="{base}/login" class="font-semibold text-primary hover:underline">
-								Back to Login
-							</a>
-						</div>
-					</CardContent>
-				</Card>
-			</div>
-		</div>
-	</div>
-	<div class="relative hidden lg:block">
-		<enhanced:img
-			src={background}
-			alt="background"
-			class="absolute inset-0 h-full w-full rounded-l-3xl object-cover dark:brightness-[0.8]"
-		/>
-	</div>
-</div>
+	</CardContent>
+</Card>
diff --git a/web/src/routes/login/reset-password/+page.svelte b/web/src/routes/login/reset-password/+page.svelte
index b5b9d7f..2c402ac 100644
--- a/web/src/routes/login/reset-password/+page.svelte
+++ b/web/src/routes/login/reset-password/+page.svelte
@@ -81,80 +81,57 @@
 	<meta content="Reset your MediaManager password with a secure token" name="description" />
 </svelte:head>
 
-<div class="grid min-h-svh lg:grid-cols-2">
-	<div class="flex flex-col gap-4 p-6 md:p-10">
-		<div class="flex justify-center gap-2 md:justify-start">
-			<a class="flex items-center gap-2 font-medium" href="{base}/login">
-				<div class="flex size-16 items-center justify-center rounded-md text-primary-foreground">
-					<img alt="MediaManager Logo" class="size-12" src={logo} />
-				</div>
-				<h1 class="scale-110">Media Manager</h1>
+<Card class="mx-auto max-w-sm">
+	<CardHeader>
+		<CardTitle class="text-2xl">Reset Password</CardTitle>
+		<CardDescription>Enter your new password below.</CardDescription>
+	</CardHeader>
+	<CardContent>
+		<form class="grid gap-4" onsubmit={handleSubmit}>
+			<div class="grid gap-2">
+				<Label for="new-password">New Password</Label>
+				<Input
+					id="new-password"
+					type="password"
+					placeholder="Enter your new password"
+					bind:value={newPassword}
+					disabled={isLoading}
+					required
+					minlength={1}
+				/>
+			</div>
+			<div class="grid gap-2">
+				<Label for="confirm-password">Confirm Password</Label>
+				<Input
+					id="confirm-password"
+					type="password"
+					placeholder="Confirm your new password"
+					bind:value={confirmPassword}
+					disabled={isLoading}
+					required
+					minlength={1}
+				/>
+			</div>
+			<Button
+				type="submit"
+				class="w-full"
+				disabled={isLoading || !newPassword || !confirmPassword}
+			>
+				{#if isLoading}
+					Resetting Password...
+				{:else}
+					Reset Password
+				{/if}
+			</Button>
+		</form>
+		<div class="mt-4 text-center text-sm">
+			<a href="{base}/login" class="font-semibold text-primary hover:underline">
+				Back to Login
+			</a>
+			<span class="mx-2 text-muted-foreground">•</span>
+			<a href="{base}/login/forgot-password" class="text-primary hover:underline">
+				Request New Reset Link
 			</a>
 		</div>
-		<div class="flex flex-1 items-center justify-center">
-			<div class="w-full max-w-[90vw]">
-				<Card class="mx-auto max-w-sm">
-					<CardHeader>
-						<CardTitle class="text-2xl">Reset Password</CardTitle>
-						<CardDescription>Enter your new password below.</CardDescription>
-					</CardHeader>
-					<CardContent>
-						<form class="grid gap-4" onsubmit={handleSubmit}>
-							<div class="grid gap-2">
-								<Label for="new-password">New Password</Label>
-								<Input
-									id="new-password"
-									type="password"
-									placeholder="Enter your new password"
-									bind:value={newPassword}
-									disabled={isLoading}
-									required
-									minlength={1}
-								/>
-							</div>
-							<div class="grid gap-2">
-								<Label for="confirm-password">Confirm Password</Label>
-								<Input
-									id="confirm-password"
-									type="password"
-									placeholder="Confirm your new password"
-									bind:value={confirmPassword}
-									disabled={isLoading}
-									required
-									minlength={1}
-								/>
-							</div>
-							<Button
-								type="submit"
-								class="w-full"
-								disabled={isLoading || !newPassword || !confirmPassword}
-							>
-								{#if isLoading}
-									Resetting Password...
-								{:else}
-									Reset Password
-								{/if}
-							</Button>
-						</form>
-						<div class="mt-4 text-center text-sm">
-							<a href="{base}/login" class="font-semibold text-primary hover:underline">
-								Back to Login
-							</a>
-							<span class="mx-2 text-muted-foreground">•</span>
-							<a href="{base}/login/forgot-password" class="text-primary hover:underline">
-								Request New Reset Link
-							</a>
-						</div>
-					</CardContent>
-				</Card>
-			</div>
-		</div>
-	</div>
-	<div class="relative hidden lg:block">
-		<enhanced:img
-			src={background}
-			alt="background"
-			class="absolute inset-0 h-full w-full rounded-l-3xl object-cover dark:brightness-[0.8]"
-		/>
-	</div>
-</div>
+	</CardContent>
+</Card>
diff --git a/web/src/routes/login/signup/+page.svelte b/web/src/routes/login/signup/+page.svelte
new file mode 100644
index 0000000..787770f
--- /dev/null
+++ b/web/src/routes/login/signup/+page.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import LoginForm from '$lib/components/login-form.svelte';
+    import {getContext} from "svelte";
+
+    let oauthProvider: () => {oauth_name: string} = getContext("oauthProvider");
+</script>
+
+<svelte:head>
+    <title>Login - MediaManager</title>
+    <meta
+            content="Signup - MediaManager"
+            name="description"
+    />
+</svelte:head>
+
+<LoginForm login={false} oauthProvider={oauthProvider()}/>
diff --git a/web/src/routes/login/verify/+page.svelte b/web/src/routes/login/verify/+page.svelte
index 760dc1f..810b5dc 100644
--- a/web/src/routes/login/verify/+page.svelte
+++ b/web/src/routes/login/verify/+page.svelte
@@ -11,33 +11,27 @@
 	<meta content="Verify your MediaManager account to complete registration" name="description" />
 </svelte:head>
 
-<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="absolute left-4 top-4">
-		<Logo />
-	</div>
-	<div class="absolute right-4 top-4">
-		<Button onclick={() => handleLogout()} variant="outline">Logout</Button>
-	</div>
-	<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="{base}/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="end mt-10 text-sm text-muted-foreground">
-			If you have any questions, please contact an administrator.
-		</p>
-	</div>
+<div class="absolute right-4 top-4">
+	<Button onclick={() => handleLogout()} variant="outline">Logout</Button>
 </div>
+<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="{base}/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="end mt-10 text-sm text-muted-foreground">
+		If you have any questions, please contact an administrator.
+	</p>
+</div>
+