79 lines
3.4 KiB
TypeScript
79 lines
3.4 KiB
TypeScript
import { redirect } from "next/navigation";
|
||
|
||
import { AccountAuthForm } from "@/components/account-auth-form";
|
||
import {
|
||
getCaregiverSession,
|
||
sanitizeCaregiverRedirectPath,
|
||
} from "@/lib/session";
|
||
|
||
export const dynamic = "force-dynamic";
|
||
|
||
type LoginPageProps = {
|
||
searchParams: Promise<Record<string, string | string[] | undefined>>;
|
||
};
|
||
|
||
export default async function LoginPage({ searchParams }: LoginPageProps) {
|
||
const caregiver = await getCaregiverSession();
|
||
const params = await searchParams;
|
||
const redirectTo = sanitizeCaregiverRedirectPath(
|
||
typeof params.redirectTo === "string" ? params.redirectTo : null,
|
||
);
|
||
|
||
if (caregiver) {
|
||
redirect(redirectTo);
|
||
}
|
||
|
||
return (
|
||
<main className="mx-auto flex min-h-screen max-w-6xl items-center px-4 py-8 sm:px-6 lg:px-8">
|
||
<section className="grid w-full gap-6 lg:grid-cols-[0.95fr_1.05fr]">
|
||
<div className="relative overflow-hidden rounded-[40px] border border-white/75 bg-[linear-gradient(160deg,rgba(53,84,141,0.95),rgba(28,45,80,0.94))] p-7 text-white shadow-[0_36px_90px_rgba(53,84,141,0.24)] sm:p-8">
|
||
<div className="absolute -right-10 top-[-40px] h-44 w-44 rounded-full bg-white/10 blur-2xl" />
|
||
<div className="absolute bottom-[-48px] left-[-12px] h-40 w-40 rounded-full border border-white/16" />
|
||
|
||
<p className="relative text-sm font-semibold tracking-[0.22em] text-white/78 uppercase">
|
||
家人连线
|
||
</p>
|
||
<h1 className="relative mt-5 font-[family-name:var(--font-display)] text-4xl leading-[1.18] sm:text-5xl">
|
||
用同一个账号，
|
||
<br />
|
||
在每一台家属设备上继续守护
|
||
</h1>
|
||
<p className="relative mt-5 max-w-2xl text-base leading-8 text-white/78 sm:text-lg">
|
||
现在开始，设备连接、留言记录和消息提醒都按账号归属。您在手机、平板或电脑上登录同一个账号，长辈发来的新留言都会一起送达。
|
||
</p>
|
||
|
||
<div className="relative mt-8 grid gap-3">
|
||
{[
|
||
"绑定过的长辈设备会跟随账号保留，不再分散到不同浏览器会话。",
|
||
"一台设备开了提醒，另一台设备也登录同一个账号时，同样可以独立接收推送。",
|
||
"登录后会自动回到刚才的页面，扫码和绑定流程不用重新开始。",
|
||
].map((item) => (
|
||
<div
|
||
key={item}
|
||
className="rounded-[22px] border border-white/12 bg-white/8 px-5 py-4 text-sm leading-7 text-white/84"
|
||
>
|
||
{item}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-5">
|
||
<div className="rounded-[32px] border border-white/75 bg-white/80 p-6 shadow-[0_26px_60px_rgba(115,76,42,0.12)] sm:p-7">
|
||
<p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
|
||
账号登录
|
||
</p>
|
||
<h2 className="mt-3 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
|
||
先登录，再继续刚才的操作
|
||
</h2>
|
||
<p className="mt-3 text-sm leading-7 text-[var(--muted)]">
|
||
如果您刚刚在扫码或添加设备，登录完成后会自动回到原来的页面，不需要重新输入。
|
||
</p>
|
||
</div>
|
||
|
||
<AccountAuthForm redirectTo={redirectTo} />
|
||
</div>
|
||
</section>
|
||
</main>
|
||
);
|
||
} |