EpicNext-Cms/src/app/(site)/login/page.tsx

import { desc, eq } from "drizzle-orm";
import type { Metadata } from "next";
import { headers } from "next/headers";
import Image from "next/image";
import { redirect } from "next/navigation";
import { getTranslations } from "next-intl/server";
import {
	AuthPageFrame,
	AuthUsersCards,
} from "@/components/auth/auth-page-frame";
import { LoginForm } from "@/components/auth/login-form";
import { SurfaceCard } from "@/components/surface-card";
import { auth } from "@/lib/auth";
import { safeRedirectPath } from "@/lib/auth/safe-redirect";
import { cached } from "@/lib/cache";

import { db, User } from "@/lib/db";
import { resolveHotelName } from "@/lib/hotel-name";
import { captchaConfig } from "@/lib/services/captcha";
import { cachedOnlineCount } from "@/lib/services/public-counters";
import { siteSettings } from "@/lib/services/site-settings";

export async function generateMetadata(): Promise<Metadata> {
	const t = await getTranslations("pages.login");
	const title = t("title");
	const description = t("subtitle");
	return {
		title,
		description,
		// Sign-in is a dead end for crawlers and duplicates the homepage copy.
		robots: { index: false, follow: false },
		openGraph: { title, description, type: "website" },
	};
}

export default async function LoginPage({
	searchParams,
}: {
	searchParams: Promise<{
		from?: string;
		registered?: string;
		reset?: string;
	}>;
}) {
	const t = await getTranslations("pages.login");
	const [hotelName, cfg, logo] = await Promise.all([
		resolveHotelName(),
		captchaConfig(),
		siteSettings.get("cms_logo", ""),
	]);
	const nonce = (await headers()).get("x-nonce") ?? undefined;

	const sp = await searchParams;
	const redirectTo = safeRedirectPath(sp.from);

	// Already signed in: the form has nothing to do here. Honour `from` first so
	// an admin bounced off /admin lands back where they were heading.
	const session = await auth();
	if (session?.user?.id) redirect(redirectTo);

	const [online, recentUsers, latestUsers] = await Promise.all([
		cachedOnlineCount().catch(() => 0),
		cached(
			"auth_online_users",
			10_000,
			() =>
				db
					.select({ id: User.id, username: User.username, look: User.look })
					.from(User)
					.where(eq(User.online, "1"))
					.limit(8),
			{ staleMs: 30000 },
		).catch(() => []),
		cached(
			"auth_latest_users",
			30_000,
			() =>
				db
					.select({ id: User.id, username: User.username, look: User.look })
					.from(User)
					.orderBy(desc(User.accountCreated))
					.limit(8),
			{ staleMs: 60000 },
		).catch(() => []),
	]);

	// `/login?registered=1` is where the sign-up form lands when it could not
	// auto sign-in (e-mail verification still pending). Without this notice the
	// visitor would only see an empty login form and no sign their account
	// exists.
	const notice =
		sp.registered === "1" ? (
			<p
				role="status"
				className="auth-alert auth-alert--success animate-fade-in-up m-0 mb-4"
			>
				{t("registeredSuccess")}
			</p>
		) : sp.reset === "1" ? (
			// `?reset=1` comes from a successful password reset; saying so matters
			// because the visitor just changed their password and a silent form
			// reads like the reset failed.
			<p
				role="status"
				className="auth-alert auth-alert--success animate-fade-in-up m-0 mb-4"
			>
				{t("passwordChanged")}
			</p>
		) : undefined;

	return (
		<AuthPageFrame
			hotelName={hotelName}
			logo={logo}
			title={t("title")}
			subtitle={t("subtitle")}
			notice={notice}
			form={
				<LoginForm
					redirectTo={redirectTo}
					captcha={{
						provider: cfg.provider,
						siteKey: cfg.siteKey || undefined,
						field: cfg.field || undefined,
					}}
					nonce={nonce}
				/>
			}
		>
			<SurfaceCard
				className="card-glow relative overflow-hidden p-6 text-center"
				style={{
					borderColor:
						"color-mix(in srgb, var(--color-primary) 20%, transparent)",
				}}
			>
				<div
					className="absolute inset-0"
					style={{
						background:
							"linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, transparent), color-mix(in srgb, var(--color-accent) 10%, transparent))",
					}}
				/>
				<div aria-hidden="true" className="absolute inset-0 overflow-hidden">
					<div className="brand-halo left-1/2 top-0 h-64 w-[460px] max-w-full -translate-x-1/2 -translate-y-1/2" />
					<div
						className="aurora-blob -left-16 top-10 h-56 w-56"
						style={{
							background:
								"color-mix(in srgb, var(--color-primary) 45%, transparent)",
						}}
					/>
					<div
						className="aurora-blob -right-16 bottom-0 h-56 w-56"
						style={{
							background:
								"color-mix(in srgb, var(--color-accent) 40%, transparent)",
							animationDelay: "-8s",
						}}
					/>
				</div>
				<div className="relative">
					<div className="brand-halo left-1/2 top-8 h-52 w-52 -translate-x-1/2" />
					<Image
						src="/assets/images/FrankwithBag.gif"
						alt="Frank"
						width={130}
						height={170}
						className="relative object-contain mx-auto drop-shadow-xl animate-float"
						unoptimized
					/>
					<div
						className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider mt-4 mb-3 border"
						style={{
							borderColor:
								"color-mix(in srgb, var(--color-primary) 30%, transparent)",
							background:
								"color-mix(in srgb, var(--color-surface) 72%, transparent)",
							color: "var(--color-primary-readable, var(--color-primary))",
							boxShadow:
								"0 8px 20px -12px color-mix(in srgb, var(--color-primary) 70%, transparent)",
						}}
					>
						<span className="relative flex h-2 w-2">
							<span
								className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"
								style={{ background: "var(--color-primary)" }}
							/>
							<span
								className="relative inline-flex rounded-full h-2 w-2"
								style={{ background: "var(--color-primary)" }}
							/>
						</span>
						{t("usersOnline", { count: online })}
					</div>
					<h1
						className="text-xl font-black"
						style={{
							color: "var(--color-text-readable)",
							fontFamily: "var(--font-nunito)",
						}}
					>
						{t("welcomeBack")}
					</h1>
					<p
						className="text-xs mt-1.5 mx-auto max-w-[220px] leading-relaxed"
						style={{ color: "var(--color-text-muted)" }}
					>
						{t("welcomeBackSub", { hotelName })}
					</p>
				</div>
			</SurfaceCard>

			<AuthUsersCards
				recentUsers={recentUsers}
				latestUsers={latestUsers}
				recentTitle={t("whoIsOnline")}
				latestTitle={t("newestCitizens")}
			/>
		</AuthPageFrame>
	);
}