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

feat: implement OAuth2 login

Browse Source
This commit is contained in:
maxDorninger
2025-05-25 19:07:53 +02:00
parent 5f2af624c9
commit 018fa24021
11 changed files with 165 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
web/src/lib/components/login-form.svelte
View File

@@ -7,9 +7,14 @@
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";
let apiUrl = env.PUBLIC_API_URL;
let {oauthProvider} = $props();
let oauthProviderName = $derived(oauthProvider.oauth_name)
let email = $state('');
let password = $state('');
let errorMessage = $state('');
@@ -105,20 +110,49 @@
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);
}
}
</script>
{#snippet tabSwitcher()}
<!-- <Tabs.List>-->
<!-- <Tabs.Trigger value="login">Login</Tabs.Trigger>-->
<!-- <Tabs.Trigger value="register">Sign up</Tabs.Trigger>-->
<!-- </Tabs.List>-->
{#snippet oauthLogin()}
{#await oauthProvider}
<LoadingBar/>
{:then result}
{#if result.oauth_name != null}
<Button class="mt-2 w-full" onclick={() => handleOauth()} variant="outline">Login
with {result.oauth_name}</Button>
{/if}
{/await}
{/snippet}
<Tabs.Root class="w-[400px]" value={tabValue}>
<Tabs.Content value="login">
<Card.Root class="mx-auto max-w-sm">
<Card.Header>
{@render tabSwitcher()}
<Card.Title class="text-2xl">Login</Card.Title>
<Card.Description>Enter your email below to login to your account</Card.Description>
</Card.Header>
@@ -158,7 +192,7 @@
</Button>
</form>
<Button class="mt-2 w-full" variant="outline">Login with Google</Button>
{@render oauthLogin()}
<div class="mt-4 text-center text-sm">
<Button onclick={() => (tabValue = 'register')} variant="link">
@@ -172,7 +206,6 @@
<Tabs.Content value="register">
<Card.Root class="mx-auto max-w-sm">
<Card.Header>
{@render tabSwitcher()}
<Card.Title class="text-2xl">Sign up</Card.Title>
<Card.Description>Enter your email and password below to sign up.</Card.Description>
</Card.Header>
@@ -208,7 +241,8 @@
</Button>
</form>
<!-- TODO: dynamically display oauth providers based on config -->
<Button class="mt-2 w-full" variant="outline">Login with Google</Button>
{@render oauthLogin()}
<div class="mt-4 text-center text-sm">
<Button onclick={() => (tabValue = 'login')} variant="link"