starred/MediaManager
1
0
Fork 0
mirror of https://github.com/maxdorninger/MediaManager.git synced 2026-04-27 19:25:40 +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: {

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

@@ -1,22 +1,22 @@
<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('');
@@ -30,19 +30,19 @@
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: {
'application/x-www-form-urlencoded': {
username: email, username: email,
password: password password: password,
} scope: "",
} },
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...';
@@ -61,20 +61,6 @@
} }
} }
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">
@@ -113,20 +99,18 @@
{#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} {#if isLoading}
<LoadingBar /> <LoadingBar/>
{/if} {/if}
<Button class="w-full" disabled={isLoading} type="submit">Login</Button> <Button class="w-full" disabled={isLoading} type="submit">Login</Button>
</form> </form>
{#await oauthProvider} {#each oauthProviderNames as name (name)}
<LoadingBar />
{:then result}
{#if result.oauth_name != null}
<div <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" 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"
> >
@@ -134,11 +118,10 @@
Or continue with Or continue with
</span> </span>
</div> </div>
<Button class="mt-2 w-full" onclick={() => handleOauth()} variant="outline" <Button class="mt-2 w-full" onclick={() => handleOauth(name)} variant="outline"
>Login with {result.oauth_name}</Button >Login with {name}</Button
> >
{/if} {/each}
{/await}
<div class="mt-4 text-center text-sm"> <div class="mt-4 text-center text-sm">
<Button href="{base}/login/signup/" variant="link">Don't have an account? Sign up</Button> <Button href="{base}/login/signup/" variant="link">Don't have an account? Sign up</Button>
</div> </div>

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

@@ -1,14 +1,15 @@
<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 {handleOauth} from "$lib/utils.ts";
import client from '$lib/api'; import client from '$lib/api';
let email = $state(''); let email = $state('');
@@ -18,11 +19,9 @@
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) {
@@ -31,10 +30,13 @@
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,
is_verified: null
} }
}); });
isLoading = false; isLoading = false;
@@ -46,21 +48,6 @@
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">
@@ -103,20 +90,20 @@
</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"
@@ -125,10 +112,7 @@
>Create an account >Create an account
</Button> </Button>
</form> </form>
{#await oauthProvider} {#each oauthProviderNames as name (name)}
<LoadingBar />
{:then result}
{#if result.oauth_name != null}
<div <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" 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"
> >
@@ -136,11 +120,10 @@
Or continue with Or continue with
</span> </span>
</div> </div>
<Button class="mt-2 w-full" onclick={() => handleOauth()} variant="outline" <Button class="mt-2 w-full" onclick={() => handleOauth(name)} variant="outline"
>Login with {result.oauth_name}</Button >Login with {name}</Button
> >
{/if} {/each}
{/await}
<div class="mt-4 text-center text-sm"> <div class="mt-4 text-center text-sm">
<Button href="{base}/login/" variant="link">Already have an account? Login</Button> <Button href="{base}/login/" variant="link">Already have an account? Login</Button>
</div> </div>

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) {
toast.error('Logout failed');
} else {
toast.success('Logout successful!');
await goto(base + '/login'); 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.error("Failed to initiate OAuth 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()} />