feat(project): init

src/components/login-form.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+
+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";
+
+const LoginForm = (props: {
+  clientId: string;
+  tenantId: string;
+  callback: string;
+  initialEmail: string;
+}) => {
+  const [email, setEmail] = React.useState(props.initialEmail);
+  const [password, setPassword] = React.useState("");
+  const [captcha, setCaptcha] = React.useState("");
+  const [rememberMe, setRememberMe] = React.useState(
+    Boolean(props.initialEmail),
+  );
+  const [submitting, setSubmitting] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const [captchaKey, setCaptchaKey] = React.useState(() => String(Date.now()));
+
+  const clientId = props.clientId;
+  const tenantId = props.tenantId;
+  const callback = props.callback;
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      const res = await fetch("/api/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          clientId,
+          tenantId,
+          callback,
+          email,
+          password,
+          captcha,
+          rememberMe,
+        }),
+      });
+      const json = (await res.json()) as {
+        redirectTo?: string;
+        message?: string;
+      };
+      if (!res.ok || !json.redirectTo) {
+        throw new Error(json.message || "登录失败");
+      }
+      console.log(`json.redirectTo`, json.redirectTo);
+      window.location.href = json.redirectTo;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "登录失败");
+      setCaptcha("");
+      setCaptchaKey(String(Date.now()));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  const missingParams = !clientId || !tenantId || !callback;
+
+  return (
+    <Card className="w-full max-w-md">
+      <CardHeader>
+        <CardTitle>统一登录</CardTitle>
+        <CardDescription>使用 IAM 账号登录以访问业务系统</CardDescription>
+      </CardHeader>
+      <form onSubmit={onSubmit}>
+        <CardContent className="space-y-4">
+          {missingParams ? (
+            <div className="text-sm text-destructive">
+              缺少 clientId、tenantId 或 callback 参数，无法继续登录
+            </div>
+          ) : null}
+          {error ? (
+            <div className="text-sm text-destructive">{error}</div>
+          ) : null}
+
+          <div className="space-y-2">
+            <Label htmlFor="email">用户名</Label>
+            <Input
+              id="email"
+              autoComplete="username"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="user@example.com"
+              disabled={submitting}
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="password">密码</Label>
+            <Input
+              id="password"
+              type="password"
+              autoComplete="current-password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              disabled={submitting}
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="captcha">验证码</Label>
+            <div className="flex gap-2">
+              <Input
+                id="captcha"
+                inputMode="numeric"
+                value={captcha}
+                onChange={(e) => setCaptcha(e.target.value)}
+                disabled={submitting}
+                required
+              />
+              <button
+                type="button"
+                className="shrink-0 rounded-md border border-input bg-background px-2"
+                onClick={() => setCaptchaKey(String(Date.now()))}
+                aria-label="刷新验证码"
+              >
+                <img
+                  alt="captcha"
+                  src={`/api/captcha?key=${encodeURIComponent(captchaKey)}`}
+                  width={120}
+                  height={40}
+                />
+              </button>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <label className="flex items-center gap-2 text-sm">
+              <Checkbox
+                checked={rememberMe}
+                onCheckedChange={(v) => setRememberMe(Boolean(v))}
+              />
+              记住我
+            </label>
+            <Link
+              className="text-sm underline underline-offset-4"
+              href={`/forgot-password?tenantId=${encodeURIComponent(tenantId)}`}
+            >
+              忘记密码
+            </Link>
+          </div>
+        </CardContent>
+        <CardFooter className="flex gap-2">
+          <Button
+            type="submit"
+            className="w-full"
+            disabled={submitting || missingParams}
+          >
+            {submitting ? "登录中..." : "登录"}
+          </Button>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+};
+
+export default LoginForm;

src/components/ui/button.tsx

@@ -0,0 +1,52 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:opacity-90",
+        secondary: "bg-secondary text-secondary-foreground hover:opacity-90",
+        outline: "border border-input bg-background hover:bg-secondary",
+        ghost: "hover:bg-secondary",
+        destructive: "bg-destructive text-destructive-foreground hover:opacity-90",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
+

src/components/ui/card.tsx

@@ -0,0 +1,52 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("rounded-lg border border-border bg-card text-card-foreground shadow-sm", className)}
+      {...props}
+    />
+  ),
+)
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+)
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
+  ),
+)
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  ),
+)
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  ),
+)
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  ),
+)
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+

src/components/ui/checkbox.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-input bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+      <Check className="h-3.5 w-3.5" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
+

src/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Input.displayName = "Input"
+
+export { Input }
+

src/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className,
+    )}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
+