starred/MediaManager
1
0
Fork 0
mirror of https://github.com/maxdorninger/MediaManager.git synced 2026-04-28 03:39:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

update how login is handled in the frontend

Browse Source
This commit is contained in:
maxDorninger
2025-09-07 21:01:24 +02:00
parent 340186a3fc
commit 3eaa3dd233
8 changed files with 260 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/lib/api/api.d.ts vendored
View File

@@ -2313,11 +2313,7 @@ export interface operations {
}; };
cookie?: never; cookie?: never;
}; };
requestBody?: { requestBody?: never;
content: {
"application/json": string[];
};
};
responses: { responses: {
/** @description Successful Response */ /** @description Successful Response */
200: { 200: {

249
web/src/lib/components/login-card.svelte
View File

@@ -1,146 +1,129 @@
<script lang="ts"> <script lang="ts">
import { Button } from '$lib/components/ui/button/index.js'; import {Button} from '$lib/components/ui/button/index.js';
import * as Card from '$lib/components/ui/card/index.js'; import * as Card from '$lib/components/ui/card/index.js';
import { Input } from '$lib/components/ui/input/index.js'; import {Input} from '$lib/components/ui/input/index.js';
import { Label } from '$lib/components/ui/label/index.js'; import {Label} from '$lib/components/ui/label/index.js';
import { goto } from '$app/navigation'; import {goto} from '$app/navigation';
import { toast } from 'svelte-sonner'; import {toast} from 'svelte-sonner';
import { base } from '$app/paths'; import {base} from '$app/paths';
import * as Alert from '$lib/components/ui/alert/index.js'; import * as Alert from '$lib/components/ui/alert/index.js';
import AlertCircleIcon from '@lucide/svelte/icons/alert-circle'; import AlertCircleIcon from '@lucide/svelte/icons/alert-circle';
import LoadingBar from '$lib/components/loading-bar.svelte'; import LoadingBar from '$lib/components/loading-bar.svelte';
import client from '$lib/api'; import client from '$lib/api';
import {handleOauth} from "$lib/utils.ts";
import type {components} from "$lib/api/api";
let { let {
oauthProvider oauthProviderNames
}: { }: {
oauthProvider: { oauthProviderNames: string[];
oauth_name: string; } = $props();
};
} = $props();
let email = $state(''); let email = $state('');
let password = $state(''); let password = $state('');
let errorMessage = $state(''); let errorMessage = $state('');
let isLoading = $state(false); let isLoading = $state(false);
async function handleLogin(event: Event) { async function handleLogin(event: Event) {
event.preventDefault(); event.preventDefault();
isLoading = true; isLoading = true;
errorMessage = ''; errorMessage = '';
const { response } = await client.POST('/api/v1/auth/cookie/login', { const {error,response} = await client.POST('/api/v1/auth/cookie/login', {
requestBody: { body: {
content: { username: email,
'application/x-www-form-urlencoded': { password: password,
username: email, scope: "",
password: password },
} headers: {
} "Content-Type": "application/x-www-form-urlencoded",
} }
}); });
isLoading = false; isLoading = false;
if (response.ok) { if (!error) {
console.log('Login successful!'); console.log('Login successful!');
console.log('Received User Data: ', response); console.log('Received User Data: ', response);
errorMessage = 'Login successful! Redirecting...'; errorMessage = 'Login successful! Redirecting...';
toast.success(errorMessage); toast.success(errorMessage);
goto(base + '/dashboard'); goto(base + '/dashboard');
} else { } else {
let errorText = await response.text(); let errorText = await response.text();
try { try {
const errorData = JSON.parse(errorText); const errorData = JSON.parse(errorText);
errorMessage = errorData.message || 'Login failed. Please check your credentials.'; errorMessage = errorData.message || 'Login failed. Please check your credentials.';
} catch { } catch {
errorMessage = errorText || 'Login failed. Please check your credentials.'; errorMessage = errorText || 'Login failed. Please check your credentials.';
} }
toast.error(errorMessage); toast.error(errorMessage);
console.error('Login failed:', response.status, errorText); 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> </script>
<Card.Root class="mx-auto max-w-sm"> <Card.Root class="mx-auto max-w-sm">
<Card.Header> <Card.Header>
<Card.Title class="text-2xl">Login</Card.Title> <Card.Title class="text-2xl">Login</Card.Title>
<Card.Description>Enter your email below to log in to your account</Card.Description> <Card.Description>Enter your email below to log in to your account</Card.Description>
</Card.Header> </Card.Header>
<Card.Content> <Card.Content>
<form class="grid gap-4" onsubmit={handleLogin}> <form class="grid gap-4" onsubmit={handleLogin}>
<div class="grid gap-2"> <div class="grid gap-2">
<Label for="email">Email</Label> <Label for="email">Email</Label>
<Input <Input
autocomplete="email" autocomplete="email"
bind:value={email} bind:value={email}
id="email" id="email"
placeholder="m@example.com" placeholder="m@example.com"
required required
type="email" type="email"
/> />
</div> </div>
<div class="grid gap-2"> <div class="grid gap-2">
<div class="flex items-center"> <div class="flex items-center">
<Label for="password">Password</Label> <Label for="password">Password</Label>
<a class="ml-auto inline-block text-sm underline" href="{base}/login/forgot-password"> <a class="ml-auto inline-block text-sm underline" href="{base}/login/forgot-password">
Forgot your password? Forgot your password?
</a> </a>
</div> </div>
<Input <Input
autocomplete="current-password" autocomplete="current-password"
bind:value={password} bind:value={password}
id="password" id="password"
required required
type="password" type="password"
/> />
</div> </div>
{#if errorMessage} {#if errorMessage}
<Alert.Root variant="destructive"> <Alert.Root variant="destructive">
<AlertCircleIcon class="size-4" /> <AlertCircleIcon class="size-4"/>
<Alert.Title>Error</Alert.Title> <Alert.Title>Error</Alert.Title>
<Alert.Description>{errorMessage}</Alert.Description> <Alert.Description>{errorMessage}</Alert.Description>
</Alert.Root> </Alert.Root>
{/if} {/if}
{#if isLoading}
<LoadingBar /> {#if isLoading}
{/if} <LoadingBar/>
<Button class="w-full" disabled={isLoading} type="submit">Login</Button> {/if}
</form> <Button class="w-full" disabled={isLoading} type="submit">Login</Button>
{#await oauthProvider} </form>
<LoadingBar /> {#each oauthProviderNames as name (name)}
{:then result} <div
{#if result.oauth_name != null} 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"
<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 class="bg-background text-muted-foreground relative z-10 px-2"> </span>
Or continue with </div>
</span> <Button class="mt-2 w-full" onclick={() => handleOauth(name)} variant="outline"
</div> >Login with {name}</Button
<Button class="mt-2 w-full" onclick={() => handleOauth()} variant="outline" >
>Login with {result.oauth_name}</Button {/each}
> <div class="mt-4 text-center text-sm">
{/if} <Button href="{base}/login/signup/" variant="link">Don't have an account? Sign up</Button>
{/await} </div>
<div class="mt-4 text-center text-sm"> </Card.Content>
<Button href="{base}/login/signup/" variant="link">Don't have an account? Sign up</Button>
</div>
</Card.Content>
</Card.Root> </Card.Root>

261
web/src/lib/components/signup-card.svelte
View File

@@ -1,148 +1,131 @@
<script lang="ts"> <script lang="ts">
import { Button } from '$lib/components/ui/button/index.js'; import {Button} from '$lib/components/ui/button/index.js';
import * as Card from '$lib/components/ui/card/index.js'; import * as Card from '$lib/components/ui/card/index.js';
import { Input } from '$lib/components/ui/input/index.js'; import {Input} from '$lib/components/ui/input/index.js';
import { Label } from '$lib/components/ui/label/index.js'; import {Label} from '$lib/components/ui/label/index.js';
import { toast } from 'svelte-sonner'; import {toast} from 'svelte-sonner';
import * as Alert from '$lib/components/ui/alert/index.js'; import * as Alert from '$lib/components/ui/alert/index.js';
import AlertCircleIcon from '@lucide/svelte/icons/alert-circle'; import AlertCircleIcon from '@lucide/svelte/icons/alert-circle';
import LoadingBar from '$lib/components/loading-bar.svelte'; import LoadingBar from '$lib/components/loading-bar.svelte';
import CheckCircle2Icon from '@lucide/svelte/icons/check-circle-2'; import CheckCircle2Icon from '@lucide/svelte/icons/check-circle-2';
import { base } from '$app/paths'; import {base} from '$app/paths';
import client from '$lib/api'; import {handleOauth} from "$lib/utils.ts";
import client from '$lib/api';
let email = $state(''); let email = $state('');
let password = $state(''); let password = $state('');
let errorMessage = $state(''); let errorMessage = $state('');
let successMessage = $state(''); let successMessage = $state('');
let isLoading = $state(false); let isLoading = $state(false);
let confirmPassword = $state(''); let confirmPassword = $state('');
let { let {
oauthProvider oauthProviderNames
}: { }: {
oauthProvider: { oauthProviderNames: string[];
oauth_name: string; } = $props();
};
} = $props();
async function handleSignup(event: Event) { async function handleSignup(event: Event) {
event.preventDefault(); event.preventDefault();
isLoading = true; isLoading = true;
errorMessage = ''; errorMessage = '';
successMessage = ''; successMessage = '';
const { response } = await client.POST('/api/v1/auth/register', { const {response} = await client.POST('/api/v1/auth/register', {
body: { body: {
email: email, email: email,
password: password password: password,
} is_active: null,
}); is_superuser: null,
isLoading = false; is_verified: null
}
});
isLoading = false;
if (response.ok) { if (response.ok) {
successMessage = 'Registration successful! Please login.'; successMessage = 'Registration successful! Please login.';
toast.success(successMessage); toast.success(successMessage);
} else { } else {
toast.error('Registration failed'); 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);
}
}
</script> </script>
<Card.Root class="mx-auto max-w-sm"> <Card.Root class="mx-auto max-w-sm">
<Card.Header> <Card.Header>
<Card.Title class="text-xl">Sign Up</Card.Title> <Card.Title class="text-xl">Sign Up</Card.Title>
<Card.Description>Enter your information to create an account</Card.Description> <Card.Description>Enter your information to create an account</Card.Description>
</Card.Header> </Card.Header>
<Card.Content> <Card.Content>
<form class="grid gap-4" onsubmit={handleSignup}> <form class="grid gap-4" onsubmit={handleSignup}>
<div class="grid gap-2"> <div class="grid gap-2">
<Label for="email">Email</Label> <Label for="email">Email</Label>
<Input <Input
autocomplete="email" autocomplete="email"
bind:value={email} bind:value={email}
id="email" id="email"
placeholder="m@example.com" placeholder="m@example.com"
required required
type="email" type="email"
/> />
</div> </div>
<div class="grid gap-2"> <div class="grid gap-2">
<Label for="password">Password</Label> <Label for="password">Password</Label>
<Input <Input
autocomplete="new-password" autocomplete="new-password"
bind:value={password} bind:value={password}
id="password" id="password"
required required
type="password" type="password"
/> />
</div> </div>
<div class="grid gap-2"> <div class="grid gap-2">
<Label for="password">Confirm Password</Label> <Label for="password">Confirm Password</Label>
<Input <Input
autocomplete="new-password" autocomplete="new-password"
bind:value={confirmPassword} bind:value={confirmPassword}
id="confirm-password" id="confirm-password"
required required
type="password" type="password"
/> />
</div> </div>
{#if errorMessage} {#if errorMessage}
<Alert.Root variant="destructive"> <Alert.Root variant="destructive">
<AlertCircleIcon class="size-4" /> <AlertCircleIcon class="size-4"/>
<Alert.Title>Error</Alert.Title> <Alert.Title>Error</Alert.Title>
<Alert.Description>{errorMessage}</Alert.Description> <Alert.Description>{errorMessage}</Alert.Description>
</Alert.Root> </Alert.Root>
{/if} {/if}
{#if successMessage} {#if successMessage}
<Alert.Root variant="default"> <Alert.Root variant="default">
<CheckCircle2Icon class="size-4" /> <CheckCircle2Icon class="size-4"/>
<Alert.Title>Success</Alert.Title> <Alert.Title>Success</Alert.Title>
<Alert.Description>{successMessage}</Alert.Description> <Alert.Description>{successMessage}</Alert.Description>
</Alert.Root> </Alert.Root>
{/if} {/if}
{#if isLoading} {#if isLoading}
<LoadingBar /> <LoadingBar/>
{/if} {/if}
<Button <Button
class="w-full" class="w-full"
disabled={isLoading || password !== confirmPassword || password === ''} disabled={isLoading || password !== confirmPassword || password === ''}
type="submit" type="submit"
>Create an account >Create an account
</Button> </Button>
</form> </form>
{#await oauthProvider} {#each oauthProviderNames as name (name)}
<LoadingBar /> <div
{:then result} 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"
{#if result.oauth_name != null} >
<div <span class="bg-background text-muted-foreground relative z-10 px-2">
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" Or continue with
> </span>
<span class="bg-background text-muted-foreground relative z-10 px-2"> </div>
Or continue with <Button class="mt-2 w-full" onclick={() => handleOauth(name)} variant="outline"
</span> >Login with {name}</Button
</div> >
<Button class="mt-2 w-full" onclick={() => handleOauth()} variant="outline" {/each}
>Login with {result.oauth_name}</Button <div class="mt-4 text-center text-sm">
> <Button href="{base}/login/" variant="link">Already have an account? Login</Button>
{/if} </div>
{/await} </Card.Content>
<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> </Card.Root>

20
web/src/lib/utils.ts
View File

@@ -59,12 +59,22 @@ export function convertTorrentSeasonRangeToIntegerRange(torrent: {
} }
export async function handleLogout() { export async function handleLogout() {
const { error } = await client.POST('/api/v1/auth/cookie/logout'); await client.POST('/api/v1/auth/cookie/logout');
if (error) { await goto(base + '/login');
toast.error('Logout failed'); }
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 { } else {
toast.success('Logout successful!'); toast.error("Failed to initiate OAuth login.");
await goto(base + '/login');
} }
} }

2
web/src/routes/login/+layout.svelte
View File

@@ -8,7 +8,7 @@
import { page } from '$app/state'; import { page } from '$app/state';
import { setContext } from 'svelte'; import { setContext } from 'svelte';
setContext('oauthProvider', () => page.data.oauthProvider); setContext('oauthProviders', () => page.data.oauthProviders);
let { children } = $props(); let { children } = $props();
</script> </script>

2
web/src/routes/login/+layout.ts
View File

@@ -3,5 +3,5 @@ import client from '$lib/api';
export const load: LayoutLoad = async ({ fetch }) => { export const load: LayoutLoad = async ({ fetch }) => {
const { data } = await client.GET('/api/v1/auth/metadata', { fetch: fetch }); const { data } = await client.GET('/api/v1/auth/metadata', { fetch: fetch });
return { oauthProvider: data }; return { oauthProviders: data };
}; };

4
web/src/routes/login/+page.svelte
View File

@@ -2,7 +2,7 @@
import LoginCard from '$lib/components/login-card.svelte'; import LoginCard from '$lib/components/login-card.svelte';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
let oauthProvider: () => { oauth_name: string } = getContext('oauthProvider'); let oauthProvider: () => string[] = getContext('oauthProviders');
</script> </script>
<svelte:head> <svelte:head>
@@ -14,5 +14,5 @@
</svelte:head> </svelte:head>
<main> <main>
<LoginCard oauthProvider={oauthProvider()} /> <LoginCard oauthProviderNames={oauthProvider()} />
</main> </main>

4
web/src/routes/login/signup/+page.svelte
View File

@@ -2,7 +2,7 @@
import SignupCard from '$lib/components/signup-card.svelte'; import SignupCard from '$lib/components/signup-card.svelte';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
let oauthProvider: () => { oauth_name: string } = getContext('oauthProvider'); let oauthProvider: () => string[] = getContext('oauthProviders');
</script> </script>
<svelte:head> <svelte:head>
@@ -10,4 +10,4 @@
<meta content="Signup - MediaManager" name="description" /> <meta content="Signup - MediaManager" name="description" />
</svelte:head> </svelte:head>
<SignupCard oauthProvider={oauthProvider()} /> <SignupCard oauthProviderNames={oauthProvider()} />