94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
import Link from "next/link";
|
|
import { LoginForm } from "@/components/login-form";
|
|
import { getViewerSession } from "@/lib/popiart-api";
|
|
import { getLiveCopy } from "@/lib/live-copy";
|
|
import { type Locale } from "@/lib/site-content";
|
|
|
|
export default async function LoginPage({
|
|
params,
|
|
}: {
|
|
params: Promise<{ locale: string }>;
|
|
}) {
|
|
const { locale } = await params;
|
|
const typedLocale = locale as Locale;
|
|
const liveCopy = getLiveCopy(typedLocale);
|
|
const session = await getViewerSession();
|
|
const isZh = typedLocale === "zh";
|
|
|
|
const title = isZh ? "使用 PopiNewAPI Key 登录" : "Sign in with your PopiNewAPI key";
|
|
const subtitle = isZh
|
|
? "页面登录后会换取产品层 session，控制台与 CLI 共用同一条认证链路。"
|
|
: "The web app exchanges your key for a product-layer session shared by the console and CLI.";
|
|
const cliTitle = isZh ? "CLI 登录指引" : "CLI sign-in guide";
|
|
const cliBody = isZh
|
|
? "如果你更习惯终端工作流，可以先安装 popiartcli，再用同一个 key 完成登录。"
|
|
: "If you prefer terminal-first workflows, install popiartcli and sign in with the same key.";
|
|
const installTitle = isZh ? "推荐命令" : "Recommended commands";
|
|
const continueCta = isZh ? "进入控制台" : "Open console";
|
|
|
|
const cliCommands = [
|
|
"brew tap wtgoku-create/popi",
|
|
"brew install wtgoku-create/popi/popiart",
|
|
"popiart auth login --key <your-popinewapi-key>",
|
|
"popiart skills list",
|
|
].join("\n");
|
|
|
|
return (
|
|
<div className="page-stack">
|
|
<section className="login-shell login-shell-focused">
|
|
<div className="login-panel login-panel-plain">
|
|
<div className="eyebrow">{isZh ? "SIGN IN" : "SIGN IN"}</div>
|
|
<h1>{title}</h1>
|
|
<p>{subtitle}</p>
|
|
{session ? (
|
|
<div className="login-form-stack">
|
|
<div className="status-banner">
|
|
<strong>{session.user.name || session.user.email || session.user.id}</strong>
|
|
<span>{liveCopy.login.alreadySignedIn}</span>
|
|
</div>
|
|
<Link className="button button-dark" href={`/${locale}/console`}>
|
|
{continueCta}
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<LoginForm
|
|
labels={{
|
|
fieldLabel: liveCopy.login.fieldLabel,
|
|
fieldHint: liveCopy.login.fieldHint,
|
|
submit: liveCopy.login.submit,
|
|
submitting: liveCopy.login.submitting,
|
|
helperTitle: liveCopy.login.helperTitle,
|
|
helperBody: liveCopy.login.helperBody,
|
|
commandLabel: liveCopy.login.commandLabel,
|
|
invalidKey: liveCopy.login.invalidKey,
|
|
}}
|
|
locale={typedLocale}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<div className="login-guide-panel">
|
|
<div className="section-heading compact">
|
|
<div className="eyebrow">{isZh ? "CLI" : "CLI"}</div>
|
|
<h2>{cliTitle}</h2>
|
|
<p>{cliBody}</p>
|
|
</div>
|
|
<div className="inline-note">
|
|
<strong>{installTitle}</strong>
|
|
<p>{liveCopy.login.helperBody}</p>
|
|
</div>
|
|
<div className="code-card login-guide-code">
|
|
<span className="card-kicker">{liveCopy.login.commandLabel}</span>
|
|
<pre>
|
|
<code>{cliCommands}</code>
|
|
</pre>
|
|
</div>
|
|
<Link className="button button-light" href={`/${locale}/docs`}>
|
|
{isZh ? "查看文档" : "Read docs"}
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|