feat(project): init

2026-02-03 17:33:52 +08:00
commit b57d04f172
32 changed files with 1057 additions and 0 deletions
--- a/src/components/login-form.tsx
+++ b/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;