From 3eaa3dd233bfb36d2c43e272ffc487d89109fa4a Mon Sep 17 00:00:00 2001
From: maxDorninger <97409287+maxDorninger@users.noreply.github.com>
Date: Sun, 7 Sep 2025 21:01:24 +0200
Subject: [PATCH] update how login is handled in the frontend

---
 web/src/lib/api/api.d.ts                  |   6 +-
 web/src/lib/components/login-card.svelte  | 249 ++++++++++-----------
 web/src/lib/components/signup-card.svelte | 261 ++++++++++------------
 web/src/lib/utils.ts                      |  20 +-
 web/src/routes/login/+layout.svelte       |   2 +-
 web/src/routes/login/+layout.ts           |   2 +-
 web/src/routes/login/+page.svelte         |   4 +-
 web/src/routes/login/signup/+page.svelte  |   4 +-
 8 files changed, 260 insertions(+), 288 deletions(-)

diff --git a/web/src/lib/api/api.d.ts b/web/src/lib/api/api.d.ts
index 4ab7acc..05c4cea 100644
--- a/web/src/lib/api/api.d.ts
+++ b/web/src/lib/api/api.d.ts
@@ -2313,11 +2313,7 @@ export interface operations {
             };
             cookie?: never;
         };
-        requestBody?: {
-            content: {
-                "application/json": string[];
-            };
-        };
+        requestBody?: never;
         responses: {
             /** @description Successful Response */
             200: {
diff --git a/web/src/lib/components/login-card.svelte b/web/src/lib/components/login-card.svelte
index 4c8600f..00a2c00 100644
--- a/web/src/lib/components/login-card.svelte
+++ b/web/src/lib/components/login-card.svelte
@@ -1,146 +1,129 @@
 <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 { toast } from 'svelte-sonner';
-	import { base } from '$app/paths';
-	import * as Alert from '$lib/components/ui/alert/index.js';
-	import AlertCircleIcon from '@lucide/svelte/icons/alert-circle';
-	import LoadingBar from '$lib/components/loading-bar.svelte';
-	import client from '$lib/api';
+    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 {toast} from 'svelte-sonner';
+    import {base} from '$app/paths';
+    import * as Alert from '$lib/components/ui/alert/index.js';
+    import AlertCircleIcon from '@lucide/svelte/icons/alert-circle';
+    import LoadingBar from '$lib/components/loading-bar.svelte';
+    import client from '$lib/api';
+    import {handleOauth} from "$lib/utils.ts";
+    import type {components} from "$lib/api/api";
 
-	let {
-		oauthProvider
-	}: {
-		oauthProvider: {
-			oauth_name: string;
-		};
-	} = $props();
+    let {
+        oauthProviderNames
+    }: {
+        oauthProviderNames: string[];
+    } = $props();
 
-	let email = $state('');
-	let password = $state('');
-	let errorMessage = $state('');
-	let isLoading = $state(false);
+    let email = $state('');
+    let password = $state('');
+    let errorMessage = $state('');
+    let isLoading = $state(false);
 
-	async function handleLogin(event: Event) {
-		event.preventDefault();
+    async function handleLogin(event: Event) {
+        event.preventDefault();
 
-		isLoading = true;
-		errorMessage = '';
+        isLoading = true;
+        errorMessage = '';
 
-		const { response } = await client.POST('/api/v1/auth/cookie/login', {
-			requestBody: {
-				content: {
-					'application/x-www-form-urlencoded': {
-						username: email,
-						password: password
-					}
-				}
-			}
-		});
-		isLoading = false;
+        const {error,response} = await client.POST('/api/v1/auth/cookie/login', {
+            body: {
+                username: email,
+                password: password,
+                scope: "",
+            },
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded",
+            }
+        });
+        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);
-		}
-	}
+        if (!error) {
+            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);
+        }
+    }
 
-	async function handleOauth() {
-		const { response, data } = await client.GET(`/api/v1/auth/cookie/${oauthProvider.oauth_name}/authorize`, {
-			params: {
-				query: {
-					scopes: 'email'
-				}
-			}
-		});
-		if (response.ok) {
-			window.location = data.authorization_url;
-		} else {
-			toast.error(data);
-		}
-	}
 </script>
 
 <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
-					autocomplete="email"
-					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
-					autocomplete="current-password"
-					bind:value={password}
-					id="password"
-					required
-					type="password"
-				/>
-			</div>
+    <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
+                        autocomplete="email"
+                        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
+                        autocomplete="current-password"
+                        bind:value={password}
+                        id="password"
+                        required
+                        type="password"
+                />
+            </div>
 
-			{#if errorMessage}
-				<Alert.Root variant="destructive">
-					<AlertCircleIcon class="size-4" />
-					<Alert.Title>Error</Alert.Title>
-					<Alert.Description>{errorMessage}</Alert.Description>
-				</Alert.Root>
-			{/if}
-			{#if isLoading}
-				<LoadingBar />
-			{/if}
-			<Button class="w-full" disabled={isLoading} type="submit">Login</Button>
-		</form>
-		{#await oauthProvider}
-			<LoadingBar />
-		{:then result}
-			{#if result.oauth_name != null}
-				<div
-					class="after:border-border 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"
-				>
-					<span class="bg-background text-muted-foreground relative z-10 px-2">
-						Or continue with
-					</span>
-				</div>
-				<Button class="mt-2 w-full" onclick={() => handleOauth()} variant="outline"
-					>Login with {result.oauth_name}</Button
-				>
-			{/if}
-		{/await}
-		<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>
+            {#if errorMessage}
+                <Alert.Root variant="destructive">
+                    <AlertCircleIcon class="size-4"/>
+                    <Alert.Title>Error</Alert.Title>
+                    <Alert.Description>{errorMessage}</Alert.Description>
+                </Alert.Root>
+            {/if}
+
+            {#if isLoading}
+                <LoadingBar/>
+            {/if}
+            <Button class="w-full" disabled={isLoading} type="submit">Login</Button>
+        </form>
+        {#each oauthProviderNames as name (name)}
+            <div
+                    class="after:border-border 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"
+            >
+                <span class="bg-background text-muted-foreground relative z-10 px-2">
+                    Or continue with
+                </span>
+            </div>
+            <Button class="mt-2 w-full" onclick={() => handleOauth(name)} variant="outline"
+            >Login with {name}</Button
+            >
+        {/each}
+        <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>
diff --git a/web/src/lib/components/signup-card.svelte b/web/src/lib/components/signup-card.svelte
index 35f1943..626928f 100644
--- a/web/src/lib/components/signup-card.svelte
+++ b/web/src/lib/components/signup-card.svelte
@@ -1,148 +1,131 @@
 <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 { toast } from 'svelte-sonner';
-	import * as Alert from '$lib/components/ui/alert/index.js';
-	import AlertCircleIcon from '@lucide/svelte/icons/alert-circle';
-	import LoadingBar from '$lib/components/loading-bar.svelte';
-	import CheckCircle2Icon from '@lucide/svelte/icons/check-circle-2';
-	import { base } from '$app/paths';
-	import client from '$lib/api';
+    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 {toast} from 'svelte-sonner';
+    import * as Alert from '$lib/components/ui/alert/index.js';
+    import AlertCircleIcon from '@lucide/svelte/icons/alert-circle';
+    import LoadingBar from '$lib/components/loading-bar.svelte';
+    import CheckCircle2Icon from '@lucide/svelte/icons/check-circle-2';
+    import {base} from '$app/paths';
+    import {handleOauth} from "$lib/utils.ts";
+    import client from '$lib/api';
 
-	let email = $state('');
-	let password = $state('');
-	let errorMessage = $state('');
-	let successMessage = $state('');
-	let isLoading = $state(false);
-	let confirmPassword = $state('');
-	let {
-		oauthProvider
-	}: {
-		oauthProvider: {
-			oauth_name: string;
-		};
-	} = $props();
+    let email = $state('');
+    let password = $state('');
+    let errorMessage = $state('');
+    let successMessage = $state('');
+    let isLoading = $state(false);
+    let confirmPassword = $state('');
+    let {
+        oauthProviderNames
+    }: {
+        oauthProviderNames: string[];
+    } = $props();
 
-	async function handleSignup(event: Event) {
-		event.preventDefault();
+    async function handleSignup(event: Event) {
+        event.preventDefault();
 
-		isLoading = true;
-		errorMessage = '';
-		successMessage = '';
-		const { response } = await client.POST('/api/v1/auth/register', {
-			body: {
-				email: email,
-				password: password
-			}
-		});
-		isLoading = false;
+        isLoading = true;
+        errorMessage = '';
+        successMessage = '';
+        const {response} = await client.POST('/api/v1/auth/register', {
+            body: {
+                email: email,
+                password: password,
+                is_active: null,
+                is_superuser: null,
+                is_verified: null
+            }
+        });
+        isLoading = false;
 
-		if (response.ok) {
-			successMessage = 'Registration successful! Please login.';
-			toast.success(successMessage);
-		} else {
-			toast.error('Registration failed');
-		}
-	}
-
-	async function handleOauth() {
-		const { response, data, error } = await client.GET('/api/v1/auth/cookie/OpenID/authorize', {
-			params: {
-				query: {
-					scopes: 'email'
-				}
-			}
-		});
-		if (response.ok) {
-			window.location = data.authorization_url;
-		} else {
-			toast.error(error);
-		}
-	}
+        if (response.ok) {
+            successMessage = 'Registration successful! Please login.';
+            toast.success(successMessage);
+        } else {
+            toast.error('Registration failed');
+        }
+    }
 </script>
 
 <Card.Root class="mx-auto max-w-sm">
-	<Card.Header>
-		<Card.Title class="text-xl">Sign Up</Card.Title>
-		<Card.Description>Enter your information to create an account</Card.Description>
-	</Card.Header>
-	<Card.Content>
-		<form class="grid gap-4" onsubmit={handleSignup}>
-			<div class="grid gap-2">
-				<Label for="email">Email</Label>
-				<Input
-					autocomplete="email"
-					bind:value={email}
-					id="email"
-					placeholder="m@example.com"
-					required
-					type="email"
-				/>
-			</div>
-			<div class="grid gap-2">
-				<Label for="password">Password</Label>
-				<Input
-					autocomplete="new-password"
-					bind:value={password}
-					id="password"
-					required
-					type="password"
-				/>
-			</div>
-			<div class="grid gap-2">
-				<Label for="password">Confirm Password</Label>
-				<Input
-					autocomplete="new-password"
-					bind:value={confirmPassword}
-					id="confirm-password"
-					required
-					type="password"
-				/>
-			</div>
-			{#if errorMessage}
-				<Alert.Root variant="destructive">
-					<AlertCircleIcon class="size-4" />
-					<Alert.Title>Error</Alert.Title>
-					<Alert.Description>{errorMessage}</Alert.Description>
-				</Alert.Root>
-			{/if}
-			{#if successMessage}
-				<Alert.Root variant="default">
-					<CheckCircle2Icon class="size-4" />
-					<Alert.Title>Success</Alert.Title>
-					<Alert.Description>{successMessage}</Alert.Description>
-				</Alert.Root>
-			{/if}
-			{#if isLoading}
-				<LoadingBar />
-			{/if}
-			<Button
-				class="w-full"
-				disabled={isLoading || password !== confirmPassword || password === ''}
-				type="submit"
-				>Create an account
-			</Button>
-		</form>
-		{#await oauthProvider}
-			<LoadingBar />
-		{:then result}
-			{#if result.oauth_name != null}
-				<div
-					class="after:border-border 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"
-				>
-					<span class="bg-background text-muted-foreground relative z-10 px-2">
-						Or continue with
-					</span>
-				</div>
-				<Button class="mt-2 w-full" onclick={() => handleOauth()} variant="outline"
-					>Login with {result.oauth_name}</Button
-				>
-			{/if}
-		{/await}
-		<div class="mt-4 text-center text-sm">
-			<Button href="{base}/login/" variant="link">Already have an account? Login</Button>
-		</div>
-	</Card.Content>
+    <Card.Header>
+        <Card.Title class="text-xl">Sign Up</Card.Title>
+        <Card.Description>Enter your information to create an account</Card.Description>
+    </Card.Header>
+    <Card.Content>
+        <form class="grid gap-4" onsubmit={handleSignup}>
+            <div class="grid gap-2">
+                <Label for="email">Email</Label>
+                <Input
+                        autocomplete="email"
+                        bind:value={email}
+                        id="email"
+                        placeholder="m@example.com"
+                        required
+                        type="email"
+                />
+            </div>
+            <div class="grid gap-2">
+                <Label for="password">Password</Label>
+                <Input
+                        autocomplete="new-password"
+                        bind:value={password}
+                        id="password"
+                        required
+                        type="password"
+                />
+            </div>
+            <div class="grid gap-2">
+                <Label for="password">Confirm Password</Label>
+                <Input
+                        autocomplete="new-password"
+                        bind:value={confirmPassword}
+                        id="confirm-password"
+                        required
+                        type="password"
+                />
+            </div>
+            {#if errorMessage}
+                <Alert.Root variant="destructive">
+                    <AlertCircleIcon class="size-4"/>
+                    <Alert.Title>Error</Alert.Title>
+                    <Alert.Description>{errorMessage}</Alert.Description>
+                </Alert.Root>
+            {/if}
+            {#if successMessage}
+                <Alert.Root variant="default">
+                    <CheckCircle2Icon class="size-4"/>
+                    <Alert.Title>Success</Alert.Title>
+                    <Alert.Description>{successMessage}</Alert.Description>
+                </Alert.Root>
+            {/if}
+            {#if isLoading}
+                <LoadingBar/>
+            {/if}
+            <Button
+                    class="w-full"
+                    disabled={isLoading || password !== confirmPassword || password === ''}
+                    type="submit"
+            >Create an account
+            </Button>
+        </form>
+        {#each oauthProviderNames as name (name)}
+            <div
+                    class="after:border-border 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"
+            >
+                <span class="bg-background text-muted-foreground relative z-10 px-2">
+                    Or continue with
+                </span>
+            </div>
+            <Button class="mt-2 w-full" onclick={() => handleOauth(name)} variant="outline"
+            >Login with {name}</Button
+            >
+        {/each}
+        <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>
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
index 6e61d21..5696f4f 100644
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -59,12 +59,22 @@ export function convertTorrentSeasonRangeToIntegerRange(torrent: {
 }
 
 export async function handleLogout() {
-	const { error } = await client.POST('/api/v1/auth/cookie/logout');
-	if (error) {
-		toast.error('Logout failed');
+	await client.POST('/api/v1/auth/cookie/logout');
+	await goto(base + '/login');
+}
+
+export async function handleOauth(oauth_name: string) {
+	const {error, data} = await client.GET(`/api/v1/auth/oauth/{openid_provider_name}/authorize`, {
+		params: {
+			path:{
+				openid_provider_name: oauth_name
+			}
+		}
+	});
+	if (!error && data?.authorization_url) {
+		window.location.href = data.authorization_url;
 	} else {
-		toast.success('Logout successful!');
-		await goto(base + '/login');
+		toast.error("Failed to initiate OAuth login.");
 	}
 }
 
diff --git a/web/src/routes/login/+layout.svelte b/web/src/routes/login/+layout.svelte
index 32f9266..58dc660 100644
--- a/web/src/routes/login/+layout.svelte
+++ b/web/src/routes/login/+layout.svelte
@@ -8,7 +8,7 @@
 	import { page } from '$app/state';
 	import { setContext } from 'svelte';
 
-	setContext('oauthProvider', () => page.data.oauthProvider);
+	setContext('oauthProviders', () => page.data.oauthProviders);
 	let { children } = $props();
 </script>
 
diff --git a/web/src/routes/login/+layout.ts b/web/src/routes/login/+layout.ts
index 2c7c0e6..ca0701d 100644
--- a/web/src/routes/login/+layout.ts
+++ b/web/src/routes/login/+layout.ts
@@ -3,5 +3,5 @@ import client from '$lib/api';
 
 export const load: LayoutLoad = async ({ fetch }) => {
 	const { data } = await client.GET('/api/v1/auth/metadata', { fetch: fetch });
-	return { oauthProvider: data };
+	return { oauthProviders: data };
 };
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index df774b7..9e794a2 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -2,7 +2,7 @@
 	import LoginCard from '$lib/components/login-card.svelte';
 	import { getContext } from 'svelte';
 
-	let oauthProvider: () => { oauth_name: string } = getContext('oauthProvider');
+	let oauthProvider: () => string[] = getContext('oauthProviders');
 </script>
 
 <svelte:head>
@@ -14,5 +14,5 @@
 </svelte:head>
 
 <main>
-	<LoginCard oauthProvider={oauthProvider()} />
+	<LoginCard oauthProviderNames={oauthProvider()} />
 </main>
diff --git a/web/src/routes/login/signup/+page.svelte b/web/src/routes/login/signup/+page.svelte
index 723969b..14e0464 100644
--- a/web/src/routes/login/signup/+page.svelte
+++ b/web/src/routes/login/signup/+page.svelte
@@ -2,7 +2,7 @@
 	import SignupCard from '$lib/components/signup-card.svelte';
 	import { getContext } from 'svelte';
 
-	let oauthProvider: () => { oauth_name: string } = getContext('oauthProvider');
+	let oauthProvider: () => string[] = getContext('oauthProviders');
 </script>
 
 <svelte:head>
@@ -10,4 +10,4 @@
 	<meta content="Signup - MediaManager" name="description" />
 </svelte:head>
 
-<SignupCard oauthProvider={oauthProvider()} />
+<SignupCard oauthProviderNames={oauthProvider()} />