Sun Mar 8 09:35:08 AM CST 2026

2026-03-08 09:35:08 +08:00
parent dd1c6a7b52
commit 67ac0bf7b6
5 changed files with 174 additions and 106 deletions
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -1,12 +1,21 @@
 "use client";

+import { useState } from "react";
 import { authClient } from "@/lib/auth-client";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect } from "react";
 import { toast } from "sonner";
+import { Card, CardBody } from "@/design-system/base/card";
+import { Input } from "@/design-system/base/input";
+import { PrimaryButton } from "@/design-system/base/button";
+import { VStack } from "@/design-system/layout/stack";

 export default function LoginPage() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
  const searchParams = useSearchParams();
  const redirectTo = searchParams.get("redirect");

@@ -17,50 +26,74 @@ export default function LoginPage() {
    if (session) {
      router.push(redirectTo ?? "/profile");
    }
-    });
+  }, [session, router, redirectTo]);

-    function login() {
-        const username = (document.getElementById("username") as HTMLInputElement).value;
-        const password = (document.getElementById("password") as HTMLInputElement).value;
-        console.log(username, password);
+  const handleLogin = async () => {
+    if (!username || !password) {
+      toast.error("请输入用户名和密码");
+      return;
+    }
+
+    setLoading(true);
+    try {
      if (username.includes("@")) {
-            authClient.signIn.email({
+        await authClient.signIn.email({
          email: username,
          password: username
        });
      } else {
-            authClient.signIn.username({
+        await authClient.signIn.username({
          username: username,
          password: password,
-                fetchOptions: {
-                    onError: (ctx) => {
-                        toast.error(ctx.error.message);
-                    }
-                }
        });
      }
+      router.push(redirectTo ?? "/profile");
+    } catch (error) {
+      toast.error("登录失败");
+    } finally {
+      setLoading(false);
    }
+  };

  return (
-        <div className="flex justify-center items-center h-screen w-screen">
-            <div className="rounded shadow-lg w-96 flex flex-col py-4">
-                <h1 className="text-6xl m-16 text-center">登录</h1>
-                <input type="text"
-                    id="username"
+    <div className="flex justify-center items-center min-h-screen">
+      <Card className="w-80">
+        <CardBody>
+          <VStack gap={4} align="center" justify="center">
+            <h1 className="text-3xl font-bold text-center w-full">登录</h1>
+            
+            <VStack gap={0} align="center" justify="center" className="w-full">
+              <Input
                placeholder="用户名或邮箱地址"
-                    className="mx-auto mb-8 pb-2 w-60 border-b-2 outline-none" />
-                <input type="password"
-                    id="password"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+              />
+              
+              <Input
+                type="password"
                placeholder="密码"
-                    className="mx-auto mb-8 pb-2 w-60 border-b-2 outline-none" />
-                <button
-                    onClick={login}
-                    className="text-xl rounded shadow w-16 mx-auto p-2 my-4">
-                    确认</button>
-                <Link href={"/signup" + (redirectTo ? `?redirect=${redirectTo}` : "")}
-                    className="text-center text-blue-800"
-                >没有账号？去注册</Link>
-            </div>
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </VStack>
+            
+            <PrimaryButton 
+              onClick={handleLogin} 
+              loading={loading}
+              fullWidth
+            >
+              确认
+            </PrimaryButton>
+            
+            <Link 
+              href={"/signup" + (redirectTo ? `?redirect=${redirectTo}` : "")}
+              className="text-center text-primary-500 hover:underline"
+            >
+              没有账号？去注册
+            </Link>
+          </VStack>
+        </CardBody>
+      </Card>
    </div>
  );
 }
--- a/src/app/(auth)/signup/page.tsx
+++ b/src/app/(auth)/signup/page.tsx
@@ -1,67 +1,102 @@
 "use client";

+import { useState } from "react";
 import { authClient } from "@/lib/auth-client";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect } from "react";
 import { toast } from "sonner";
+import { Card, CardBody } from "@/design-system/base/card";
+import { Input } from "@/design-system/base/input";
+import { PrimaryButton } from "@/design-system/base/button";
+import { VStack } from "@/design-system/layout/stack";

 export default function SignUpPage() {
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
  const searchParams = useSearchParams();
  const redirectTo = searchParams.get("redirect");

  const session = authClient.useSession().data;
  const router = useRouter();

-    console.log(JSON.stringify({ re: redirectTo }));
-
  useEffect(() => {
    if (session) {
      router.push(redirectTo ?? "/profile");
    }
-    });
+  }, [session, router, redirectTo]);

-    function login() {
-        const username = (document.getElementById("username") as HTMLInputElement).value;
-        const email = (document.getElementById("email") as HTMLInputElement).value;
-        const password = (document.getElementById("password") as HTMLInputElement).value;
-        authClient.signUp.email({
+  const handleSignUp = async () => {
+    if (!username || !email || !password) {
+      toast.error("请填写所有字段");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await authClient.signUp.email({
        email: email,
        name: username,
        username: username,
        password: password,
-            fetchOptions: {
-                onError: (ctx) => {
-                    toast.error(ctx.error.message);
-                }
-            }
      });
+      router.push(redirectTo ?? "/profile");
+    } catch (error) {
+      toast.error("注册失败");
+    } finally {
+      setLoading(false);
    }
+  };

  return (
-        <div className="flex justify-center items-center h-screen w-screen">
-            <div className="rounded shadow-lg w-96 flex flex-col py-4">
-                <h1 className="text-6xl m-16 text-center">注册</h1>
-                <input type="text"
-                    id="username"
+    <div className="flex justify-center items-center min-h-screen">
+      <Card className="w-80">
+        <CardBody>
+          <VStack gap={4} align="center" justify="center">
+            <h1 className="text-3xl font-bold text-center w-full">注册</h1>
+            
+            <VStack gap={0} align="center" justify="center" className="w-full">
+              <Input
                placeholder="用户名"
-                    className="mx-auto mb-8 pb-2 w-60 border-b-2 outline-none" />
-                <input type="email"
-                    id="email"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+              />
+              
+              <Input
+                type="email"
                placeholder="邮箱地址"
-                    className="mx-auto mb-8 pb-2 w-60 border-b-2 outline-none" />
-                <input type="password"
-                    id="password"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+              
+              <Input
+                type="password"
                placeholder="密码"
-                    className="mx-auto mb-8 pb-2 w-60 border-b-2 outline-none" />
-                <button
-                    onClick={login}
-                    className="text-xl rounded shadow w-16 mx-auto p-2 my-4">
-                    确认</button>
-                <Link href={"/login" + (redirectTo ? `?redirect=${redirectTo}` : "")}
-                    className="text-center text-blue-800"
-                >已有账号？去登录</Link>
-            </div>
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </VStack>
+            
+            <PrimaryButton 
+              onClick={handleSignUp} 
+              loading={loading}
+              fullWidth
+            >
+              确认
+            </PrimaryButton>
+            
+            <Link 
+              href={"/login" + (redirectTo ? `?redirect=${redirectTo}` : "")}
+              className="text-center text-primary-500 hover:underline"
+            >
+              已有账号？去登录
+            </Link>
+          </VStack>
+        </CardBody>
+      </Card>
    </div>
  );
 }
--- a/src/app/(features)/memorize/page.tsx
+++ b/src/app/(features)/memorize/page.tsx
@@ -24,7 +24,7 @@ export default async function MemorizePage({

  if (!folder_id) {
    const session = await auth.api.getSession({ headers: await headers() });
-    if (!session) redirect("/auth?redirect=/memorize");
+    if (!session) redirect("/login?redirect=/memorize");

    return (
      <FolderSelector
--- a/src/app/folders/page.tsx
+++ b/src/app/folders/page.tsx
@@ -7,6 +7,6 @@ export default async function FoldersPage() {
  const session = await auth.api.getSession(
    { headers: await headers() }
  );
-  if (!session) redirect(`/auth?redirect=/folders`);
+  if (!session) redirect(`/login?redirect=/folders`);
  return <FoldersClient userId={session.user.id} />;
 }
--- a/src/modules/auth/auth-action.ts
+++ b/src/modules/auth/auth-action.ts
@@ -139,13 +139,13 @@ export async function signOutAction() {
            headers: await headers()
        });

-        redirect("/auth");
+        redirect("/login");
    } catch (e) {
        if (e instanceof Error && e.message.includes('NEXT_REDIRECT')) {
            throw e;
        }
        console.error("Sign out error:", e);
-        redirect("/auth");
+        redirect("/login");
    }
 }