feat: add social authentication support with enabled providers endpoint and UI integration

frontend/src/locales/en.json

@@ -295,7 +295,8 @@
 		"email_required": "Email is required",
 		"new_password": "New Password (6+ characters)",
 		"both_passwords_required": "Both passwords are required",
-		"reset_failed": "Failed to reset password"
+		"reset_failed": "Failed to reset password",
+		"or_3rd_party": "Or login with a third-party service"
 	},
 	"users": {
 		"no_users_found": "No users found with public profiles."

frontend/src/routes/login/+page.server.ts

@@ -4,6 +4,7 @@ import type { Actions, PageServerLoad, RouteParams } from './$types';
 import { getRandomBackground, getRandomQuote } from '$lib';
 import { fetchCSRFToken } from '$lib/index.server';
 const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
 
 export const load: PageServerLoad = async (event) => {
 	if (event.locals.user) {
@@ -12,10 +13,17 @@ export const load: PageServerLoad = async (event) => {
 		const quote = getRandomQuote();
 		const background = getRandomBackground();
 
+		let socialProviderFetch = await event.fetch(`${serverEndpoint}/auth/social-providers/`);
+		if (!socialProviderFetch.ok) {
+			return fail(500, { message: 'settings.social_providers_error' });
+		}
+		let socialProviders = await socialProviderFetch.json();
+
 		return {
 			props: {
 				quote,
-				background
+				background,
+				socialProviders
 			}
 		};
 	}

frontend/src/routes/login/+page.svelte

@@ -9,14 +9,19 @@
 
 	let isImageInfoModalOpen: boolean = false;
 
+	let socialProviders = data.props?.socialProviders ?? [];
+
+	import GitHub from '~icons/mdi/github';
+	import OpenIdConnect from '~icons/mdi/openid';
+
 	import { page } from '$app/stores';
 
 	import ImageInfoModal from '$lib/components/ImageInfoModal.svelte';
 	import type { Background } from '$lib/types.js';
 
-	let quote: { quote: string; author: string } = data.props.quote;
+	let quote: { quote: string; author: string } = data.props?.quote ?? { quote: '', author: '' };
 
-	let background: Background = data.props.background;
+	let background: Background = data.props?.background ?? { url: '' };
 </script>
 
 {#if isImageInfoModalOpen}
@@ -62,6 +67,22 @@
 					{/if}
 					<button class="py-2 px-4 btn btn-primary mr-2">{$t('auth.login')}</button>
 
+					{#if socialProviders.length > 0}
+						<div class="divider text-center text-sm my-4">{$t('auth.or_3rd_party')}</div>
+						<div class="flex justify-center">
+							{#each socialProviders as provider}
+								<a href={provider.url} class="btn btn-primary mr-2 flex items-center">
+									{#if provider.provider === 'github'}
+										<GitHub class="w-4 h-4 mr-2" />
+									{:else if provider.provider === 'openid_connect'}
+										<OpenIdConnect class="w-4 h-4 mr-2" />
+									{/if}
+									{provider.name}
+								</a>
+							{/each}
+						</div>
+					{/if}
+
 					<div class="flex justify-between mt-4">
 						<p><a href="/signup" class="underline">{$t('auth.signup')}</a></p>
 						<p>