#load "../../lib/app.uce"

RENDER(Request& context)
{
	starter_boot(context);
	context.call["starter"]["page_title"] = "Auth";
	starter_register_css("views/marketing.css", context);

	DTree props;
	props["title"] = "Sign In to Your Account";
	props["subtitle"] = "Choose your preferred authentication method to continue";
	props["google_client_id"] = "YOUR_GOOGLE_CLIENT_ID";
	props["github_client_id"] = "YOUR_GITHUB_CLIENT_ID";
	props["discord_client_id"] = "YOUR_DISCORD_CLIENT_ID";
	props["twitch_client_id"] = "YOUR_TWITCH_CLIENT_ID";
	props["callback_url"] = starter_link("auth/callback", context);

	<>
		<h1>Authentication Demo</h1>
		<div class="card">
			<h2>OAuth Authentication</h2>
			<p>This component provides secure OAuth authentication with popular identity providers.</p>
			<? print(component("../../components/auth/oauth-client", props, context)); ?>
		</div>
		<div class="card">
			<h2>Current Session Status</h2>
			<? if(context.session[StarterUser::session_key()] != "") { ?>
				<div class="success-card">
					<h3>Logged In</h3>
					<p>User ID: <?= context.session[StarterUser::session_key()] ?></p>
				</div>
			<? } else { ?>
				<div class="component-card">
					<h3>Not Logged In</h3>
					<p>Use the OAuth component above to sign in with Google, GitHub, Discord, or Twitch.</p>
				</div>
			<? } ?>
		</div>
	</>
}