mirror of
https://github.com/maxdorninger/MediaManager.git
synced 2026-02-19 15:35:18 -05:00
update how login is handled in the frontend
This commit is contained in:
maxDorninger
6
web/src/lib/api/api.d.ts
vendored
6
web/src/lib/api/api.d.ts
vendored
@@ -2313,11 +2313,7 @@ export interface operations {
|
||||
};
|
||||
cookie?: never;
|
||||
};
|
||||
requestBody?: {
|
||||
content: {
|
||||
"application/json": string[];
|
||||
};
|
||||
};
|
||||
requestBody?: never;
|
||||
responses: {
|
||||
/** @description Successful Response */
|
||||
200: {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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.");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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 };
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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()} />
|
||||
|
||||
Reference in New Issue
Block a user