+page.svelte

<script lang="ts">
	import { _ } from 'svelte-i18n';
	import SEO from '$lib/components/SEO.svelte';
	import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
	import YiviLogin from '$lib/components/YiviLogin.svelte';
	import logoLight from '$lib/assets/images/logo-wide.svg';
	import logoDark from '$lib/assets/images/logo-wide-dark.svg';
	import { goto } from '$app/navigation';
	import { page } from '$app/state';
	import { resolve } from '$app/paths';
	import { safeRedirect } from './safe-redirect';
	import type { PageData } from './$types';

	let { data }: { data: PageData } = $props();

	const redirectTo = $derived(page.url.searchParams.get('redirect'));

	function handleSuccess() {
		// The `redirect` param is attacker-controlled — validate it before navigating.
		goto(resolve(safeRedirect(redirectTo) as '/portal/dashboard'));
	}
</script>

<SEO title={$_('auth.login')} description={$_('auth.loginSubtitle')} />

<section class="login-page">
	<div class="login-header">
		<a href={resolve('/')} class="logo">
			<img src={logoLight} alt="PostGuard" class="logo-img light-only" height="22" /><img
				src={logoDark}
				alt="PostGuard"
				class="logo-img dark-only"
				height="22"
			/>
			<span class="logo-badge">Business</span>
		</a>
		<ThemeSwitcher />
	</div>
	<div class="login-card">
		<h1>{$_('auth.login')}</h1>
		<p class="login-subtitle">
			{$_('auth.loginSubtitle')}
		</p>

		<div class="login-content">
			<p class="login-hint">{$_('auth.loginHint')}</p>
			<YiviLogin type="org" attrs={data.yiviAttrs} onSuccess={handleSuccess} />
		</div>

		<p class="login-footer">
			{$_('auth.noAccount')} <a href={resolve('/register')}>{$_('auth.registerOrg')}</a>
		</p>
	</div>
</section>

<style lang="scss">
	.login-page {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		padding: 0 1.5rem 3rem;
		background: var(--pg-general-background);
	}

	.login-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		max-width: 440px;
		padding: 1.5rem 0;
	}

	.logo {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		text-decoration: none;
	}

	.logo-badge {
		font-family: var(--pg-font-family);
		font-size: var(--pg-font-size-xs);
		font-weight: var(--pg-font-weight-bold);
		background: var(--pg-primary-bg);
		color: #fff;
		padding: 2px 6px;
		border-radius: var(--pg-border-radius-sm);
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.login-card {
		width: 100%;
		max-width: 440px;
		background: var(--pg-soft-background);
		border: 1px solid var(--pg-strong-background);
		border-radius: var(--pg-border-radius-lg);
		padding: 2.5rem 2rem;
		text-align: center;

		h1 {
			margin-bottom: 0.5rem;
		}
	}

	.login-subtitle {
		color: var(--pg-text-secondary);
		margin-bottom: 1.5rem;
	}

	.login-content {
		padding: 1rem 0;
	}

	.login-hint {
		color: var(--pg-text-secondary);
		font-size: var(--pg-font-size-sm);
		margin-bottom: 1.5rem;
		line-height: 1.5;
	}

	.login-footer {
		margin-top: 1.5rem;
		font-size: var(--pg-font-size-sm);
		color: var(--pg-text-secondary);

		a {
			color: var(--pg-primary);
			font-weight: var(--pg-font-weight-medium);
		}
	}
</style>