adilallo
64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { Suspense } from "react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { useTranslation } from "../../contexts/MessagesContext";
|
|
import Login from "../../components/modals/Login";
|
|
import LoginForm from "../../components/modals/Login/LoginForm";
|
|
|
|
const loginPageBgClass =
|
|
"min-h-[100dvh] bg-[var(--color-surface-inverse-brand-primary)]";
|
|
|
|
function LoginLoadingFallback() {
|
|
const t = useTranslation("pages.login");
|
|
return (
|
|
<div className={`${loginPageBgClass} flex items-center justify-center`}>
|
|
<p className="font-inter text-[14px] text-[var(--color-content-default-primary)]">
|
|
{t("loadingFallback")}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Full-page login shell for magic-link **error redirects** (`?error=*`) and direct `/login` visits.
|
|
* Header **Log in** uses `AuthModalProvider` instead; this route stays for verify failures and bookmarks.
|
|
*/
|
|
function LoginWithSearchParams() {
|
|
const router = useRouter();
|
|
const t = useTranslation("pages.login");
|
|
|
|
return (
|
|
<div className={loginPageBgClass}>
|
|
<Login
|
|
isOpen
|
|
usePortal={false}
|
|
backdropVariant="solid"
|
|
onClose={() => {
|
|
router.push("/");
|
|
}}
|
|
ariaLabelledBy="login-modal-heading"
|
|
belowCard={
|
|
<Link
|
|
href="/"
|
|
className="font-inter font-normal text-[14px] leading-[20px] text-[var(--color-content-invert-tertiary,#2d2d2d)] text-center hover:opacity-90"
|
|
>
|
|
{t("backToHome")}
|
|
</Link>
|
|
}
|
|
>
|
|
<LoginForm />
|
|
</Login>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function LoginPage() {
|
|
return (
|
|
<Suspense fallback={<LoginLoadingFallback />}>
|
|
<LoginWithSearchParams />
|
|
</Suspense>
|
|
);
|
|
}
|