✨ feat: impl accounts and channels

app/login/login-form.tsx

@@ -0,0 +1,396 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { signIn } from "next-auth/react";
+import {
+  ArrowRightIcon,
+  CheckCircle2Icon,
+  CoinsIcon,
+  Globe2Icon,
+  KeyRoundIcon,
+  Loader2Icon,
+  LockIcon,
+  MailIcon,
+  PieChartIcon,
+  TrendingUpIcon,
+  WalletIcon,
+} from "lucide-react";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { FluxentLogo } from "@/components/fluxent-logo";
+import { ThemeToggle } from "@/components/theme-toggle";
+
+interface LoginFormProps {
+  oidcEnabled: boolean;
+  oidcName: string;
+}
+
+export function LoginForm({ oidcEnabled, oidcName }: LoginFormProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const callbackUrl = searchParams.get("callbackUrl") || "/";
+  const authError = searchParams.get("error");
+  const registered = searchParams.get("registered");
+
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [rememberMe, setRememberMe] = React.useState(false);
+  const [isPending, setIsPending] = React.useState(false);
+  const [isOidcPending, setIsOidcPending] = React.useState(false);
+  const [errorMessage, setErrorMessage] = React.useState<string | null>(() => {
+    if (authError === "CredentialsSignin") {
+      return "邮箱或密码错误，请核对后重试";
+    }
+    if (authError) {
+      return "认证过程中遇到问题，请重新登录";
+    }
+    return null;
+  });
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setErrorMessage(null);
+
+    if (!email.trim()) {
+      setErrorMessage("请输入登录邮箱");
+      return;
+    }
+    if (!password) {
+      setErrorMessage("请输入登录密码");
+      return;
+    }
+
+    try {
+      setIsPending(true);
+      const res = await signIn("credentials", {
+        email: email.trim(),
+        password,
+        redirect: false,
+        callbackUrl,
+      });
+
+      if (res?.error) {
+        if (res.error === "CredentialsSignin" || res.code === "credentials") {
+          setErrorMessage("账号或密码不正确，请重新检查");
+        } else {
+          setErrorMessage("登录失败，请稍后重试");
+        }
+        return;
+      }
+
+      router.push(callbackUrl);
+      router.refresh();
+    } catch {
+      setErrorMessage("网络异常，无法连接到认证服务器");
+    } finally {
+      setIsPending(false);
+    }
+  };
+
+  const handleOidcLogin = async () => {
+    try {
+      setIsOidcPending(true);
+      await signIn("oidc", { callbackUrl });
+    } catch {
+      setIsOidcPending(false);
+      setErrorMessage("SSO 单点登录发起失败，请稍后重试");
+    }
+  };
+
+  return (
+    <div className="relative flex min-h-svh flex-col justify-between overflow-hidden bg-background">
+      {/* Decorative ambient background meshes */}
+      <div className="pointer-events-none absolute -top-40 -right-40 size-[32rem] rounded-full bg-primary/5 blur-3xl" />
+      <div className="pointer-events-none absolute top-1/2 -left-48 size-[34rem] rounded-full bg-primary/5 blur-3xl" />
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.08),rgba(255,255,255,0))]" />
+
+      {/* Top navigation / branding header */}
+      <header className="relative z-10 flex h-16 w-full items-center justify-between px-6 md:px-12">
+        <Link
+          href="/"
+          className="group flex items-center gap-2.5 outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <FluxentLogo size={32} />
+          <div className="flex flex-col">
+            <span className="font-heading text-base font-semibold tracking-tight">
+              Fluxent
+            </span>
+            <span className="text-[10px] tracking-wider text-muted-foreground uppercase">
+              Financial OS
+            </span>
+          </div>
+        </Link>
+        <div className="flex items-center gap-2">
+          <ThemeToggle />
+        </div>
+      </header>
+
+      {/* Main content grid */}
+      <main className="relative z-10 flex flex-1 items-center justify-center px-4 py-8 sm:px-6">
+        <div className="grid w-full max-w-4xl gap-8 lg:grid-cols-[1.1fr_1fr] lg:items-center">
+          {/* Left Hero feature showcase (visible on large screen) */}
+          <div className="hidden flex-col gap-8 pr-4 lg:flex">
+            <div className="flex flex-col gap-3">
+              <div className="inline-flex w-fit items-center gap-2 rounded-full border border-border/80 bg-muted/60 px-3 py-1 text-xs text-muted-foreground backdrop-blur-xs">
+                <span className="inline-block size-1.5 rounded-full bg-primary animate-pulse" />
+                全球多币种 • 全场景记账 • 实时汇率
+              </div>
+              <h1 className="font-heading text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+                掌控每一笔资产流动，
+                <br />
+                让财务管理行云流水。
+              </h1>
+              <p className="text-muted-foreground text-sm leading-relaxed">
+                无论是跨国多币种账户、信用卡记账，还是银行与电子钱包资金调度，Fluxent
+                提供银行级的精确记录与现代化的优雅交互体验。
+              </p>
+            </div>
+
+            {/* Visual value propositions */}
+            <div className="grid grid-cols-2 gap-3">
+              <div className="flex flex-col gap-1.5 rounded-xl border border-border/60 bg-card/50 p-3.5 backdrop-blur-xs transition-colors hover:border-border">
+                <div className="flex size-8 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                  <CoinsIcon className="size-4" />
+                </div>
+                <h3 className="text-xs font-semibold text-foreground">
+                  全币种与汇率追踪
+                </h3>
+                <p className="text-[11px] text-muted-foreground leading-normal">
+                  多币种入账与清算汇率对账，资产估值一目了然
+                </p>
+              </div>
+
+              <div className="flex flex-col gap-1.5 rounded-xl border border-border/60 bg-card/50 p-3.5 backdrop-blur-xs transition-colors hover:border-border">
+                <div className="flex size-8 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                  <WalletIcon className="size-4" />
+                </div>
+                <h3 className="text-xs font-semibold text-foreground">
+                  全渠道多账户管理
+                </h3>
+                <p className="text-[11px] text-muted-foreground leading-normal">
+                  银行账户、电子钱包与支付卡渠道统一调度
+                </p>
+              </div>
+
+              <div className="flex flex-col gap-1.5 rounded-xl border border-border/60 bg-card/50 p-3.5 backdrop-blur-xs transition-colors hover:border-border">
+                <div className="flex size-8 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                  <TrendingUpIcon className="size-4" />
+                </div>
+                <h3 className="text-xs font-semibold text-foreground">
+                  复式记账与场景分类
+                </h3>
+                <p className="text-[11px] text-muted-foreground leading-normal">
+                  标准借贷分录与消费场景画像，财务合规严谨
+                </p>
+              </div>
+
+              <div className="flex flex-col gap-1.5 rounded-xl border border-border/60 bg-card/50 p-3.5 backdrop-blur-xs transition-colors hover:border-border">
+                <div className="flex size-8 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                  <PieChartIcon className="size-4" />
+                </div>
+                <h3 className="text-xs font-semibold text-foreground">
+                  资产汇总与统计
+                </h3>
+                <p className="text-[11px] text-muted-foreground leading-normal">
+                  跨账户资金结构分布分析，收支报表一览无余
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Right Login Card */}
+          <div className="w-full">
+            <Card className="border-border/80 shadow-lg shadow-black/5 dark:shadow-black/25">
+              <CardHeader className="gap-1.5 pb-4">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-xl font-bold tracking-tight">
+                    欢迎回到 Fluxent
+                  </CardTitle>
+                  <div className="flex size-7 items-center justify-center rounded-lg bg-primary/5 text-primary lg:hidden">
+                    <FluxentLogo size={24} />
+                  </div>
+                </div>
+                <CardDescription className="text-xs">
+                  输入您的注册邮箱与密码以继续使用
+                </CardDescription>
+              </CardHeader>
+
+              <CardContent className="flex flex-col gap-4">
+                {registered === "1" && (
+                  <Alert className="border-border bg-muted/40">
+                    <CheckCircle2Icon className="text-foreground" />
+                    <AlertTitle>账号注册成功</AlertTitle>
+                    <AlertDescription className="text-xs">
+                      您的 Fluxent 账户已就绪，请使用新密码进行登录。
+                    </AlertDescription>
+                  </Alert>
+                )}
+
+                {errorMessage && (
+                  <Alert variant="destructive">
+                    <AlertDescription className="text-xs">
+                      {errorMessage}
+                    </AlertDescription>
+                  </Alert>
+                )}
+
+                {/* OIDC Single Sign On Button (if enabled) */}
+                {oidcEnabled && (
+                  <div className="flex flex-col gap-3">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="lg"
+                      onClick={handleOidcLogin}
+                      disabled={isOidcPending || isPending}
+                      className="w-full justify-center text-xs font-medium"
+                    >
+                      {isOidcPending ? (
+                        <Loader2Icon
+                          data-icon="inline-start"
+                          className="animate-spin"
+                        />
+                      ) : (
+                        <Globe2Icon data-icon="inline-start" />
+                      )}
+                      通过 {oidcName} 快速登录
+                    </Button>
+
+                    <div className="relative flex items-center justify-center">
+                      <Separator className="w-full" />
+                      <span className="absolute bg-card px-2 text-[11px] uppercase tracking-wider text-muted-foreground">
+                        或者使用邮箱密码
+                      </span>
+                    </div>
+                  </div>
+                )}
+
+                {/* Main Email & Password Form */}
+                <form onSubmit={handleSubmit} className="flex flex-col gap-3.5">
+                  <div className="flex flex-col gap-1.5">
+                    <Label htmlFor="email" className="text-xs font-medium">
+                      邮箱地址
+                    </Label>
+                    <div className="relative flex items-center">
+                      <Input
+                        id="email"
+                        name="email"
+                        type="email"
+                        autoComplete="email"
+                        placeholder="name@company.com"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        required
+                        disabled={isPending}
+                        className="pl-8"
+                      />
+                      <MailIcon className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col gap-1.5">
+                    <div className="flex items-center justify-between">
+                      <Label htmlFor="password" className="text-xs font-medium">
+                        密码
+                      </Label>
+                    </div>
+                    <div className="relative flex items-center">
+                      <Input
+                        id="password"
+                        name="password"
+                        type="password"
+                        autoComplete="current-password"
+                        placeholder="••••••••"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        required
+                        disabled={isPending}
+                        className="pl-8"
+                      />
+                      <LockIcon className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
+                    </div>
+                  </div>
+
+                  <div className="flex items-center justify-between pt-0.5">
+                    <div className="flex items-center gap-2">
+                      <Checkbox
+                        id="rememberMe"
+                        checked={rememberMe}
+                        onCheckedChange={(checked) =>
+                          setRememberMe(Boolean(checked))
+                        }
+                      />
+                      <label
+                        htmlFor="rememberMe"
+                        className="text-xs text-muted-foreground cursor-pointer select-none"
+                      >
+                        保持此设备的登录状态
+                      </label>
+                    </div>
+                  </div>
+
+                  <Button
+                    type="submit"
+                    size="lg"
+                    disabled={isPending}
+                    className="mt-1 w-full justify-center text-xs font-medium"
+                  >
+                    {isPending ? (
+                      <Loader2Icon
+                        data-icon="inline-start"
+                        className="animate-spin"
+                      />
+                    ) : (
+                      <KeyRoundIcon data-icon="inline-start" />
+                    )}
+                    {isPending ? "正在登录..." : "登录进入系统"}
+                  </Button>
+                </form>
+              </CardContent>
+
+              <CardFooter className="justify-center border-t border-border/50 py-3 text-xs text-muted-foreground">
+                <p>
+                  还没有 Fluxent 账号？{" "}
+                  <Link
+                    href="/register"
+                    className="font-medium text-foreground underline underline-offset-4 hover:text-primary"
+                  >
+                    立即注册新账号
+                    <ArrowRightIcon
+                      data-icon="inline-end"
+                      className="inline size-3 ml-0.5"
+                    />
+                  </Link>
+                </p>
+              </CardFooter>
+            </Card>
+
+            <p className="mt-4 text-center text-[11px] text-muted-foreground">
+              登录即代表您同意 Fluxent 的服务条款与隐私政策
+            </p>
+          </div>
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="relative z-10 flex h-12 items-center justify-center border-t border-border/40 px-6 text-center text-[11px] text-muted-foreground">
+        <span>© {new Date().getFullYear()} Fluxent Financial. 保留所有权利。</span>
+      </footer>
+    </div>
+  );
+}