...

2025-12-11 21:36:45 +08:00
parent 65aacc1582
commit b69e168558
41 changed files with 763 additions and 189 deletions
--- a/src/app/auth/AuthForm.tsx
+++ b/src/app/auth/AuthForm.tsx
@@ -0,0 +1,209 @@
+"use client";
+
+import { useState, useActionState } from "react";
+import { useTranslations } from "next-intl";
+import { signInAction, signUpAction, SignUpState } from "@/lib/actions/auth";
+import Container from "@/components/ui/Container";
+import Input from "@/components/ui/Input";
+import LightButton from "@/components/ui/buttons/LightButton";
+import DarkButton from "@/components/ui/buttons/DarkButton";
+import { authClient } from "@/lib/auth-client";
+
+interface AuthFormProps {
+  redirectTo?: string;
+}
+
+export default function AuthForm({ redirectTo }: AuthFormProps) {
+  const t = useTranslations("auth");
+  const [mode, setMode] = useState<'signin' | 'signup'>('signin');
+  
+  const [signInState, signInActionForm, isSignInPending] = useActionState(
+    async (prevState: SignUpState | undefined, formData: FormData) => signInAction(prevState || {}, formData),
+    undefined
+  );
+  const [signUpState, signUpActionForm, isSignUpPending] = useActionState(
+    async (prevState: SignUpState | undefined, formData: FormData) => signUpAction(prevState || {}, formData),
+    undefined
+  );
+
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  const validateForm = (formData: FormData): boolean => {
+    const newErrors: Record<string, string> = {};
+    
+    const email = formData.get("email") as string;
+    const password = formData.get("password") as string;
+    const name = formData.get("name") as string;
+    const confirmPassword = formData.get("confirmPassword") as string;
+
+    if (!email) {
+      newErrors.email = t("emailRequired");
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      newErrors.email = t("invalidEmail");
+    }
+
+    if (!password) {
+      newErrors.password = t("passwordRequired");
+    } else if (password.length < 8) {
+      newErrors.password = t("passwordTooShort");
+    }
+
+    if (mode === 'signup') {
+      if (!name) {
+        newErrors.name = t("nameRequired");
+      }
+      
+      if (!confirmPassword) {
+        newErrors.confirmPassword = t("confirmPasswordRequired");
+      } else if (password !== confirmPassword) {
+        newErrors.confirmPassword = t("passwordsNotMatch");
+      }
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    
+    if (validateForm(formData)) {
+      if (redirectTo) {
+        formData.append("redirectTo", redirectTo);
+      }
+      
+      if (mode === 'signin') {
+        await signInActionForm(formData);
+      } else {
+        await signUpActionForm(formData);
+      }
+    }
+  };
+
+  const handleGitHubSignIn = async () => {
+    await authClient.signIn.social({
+      provider: "github",
+      callbackURL: redirectTo || "/"
+    });
+  };
+
+  const currentError = mode === 'signin' ? signInState : signUpState;
+
+  return (
+    <div className="h-[calc(100vh-64px)] bg-[#35786f] flex items-center justify-center px-4">
+      <Container className="p-8 max-w-md w-full">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold text-gray-800 mb-2">{t(mode === 'signin' ? 'signIn' : 'signUp')}</h1>
+        </div>
+
+        {currentError?.message && (
+          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+            {currentError.message}
+          </div>
+        )}
+
+        <form onSubmit={handleFormSubmit} className="space-y-4">
+          {mode === 'signup' && (
+            <div>
+              <Input
+                type="text"
+                name="name"
+                placeholder={t("name")}
+                className="w-full px-3 py-2"
+              />
+              {errors.name && (
+                <p className="text-red-500 text-sm mt-1">{errors.name}</p>
+              )}
+            </div>
+          )}
+
+          <div>
+            <Input
+              type="email"
+              name="email"
+              placeholder={t("email")}
+              className="w-full px-3 py-2"
+            />
+            {errors.email && (
+              <p className="text-red-500 text-sm mt-1">{errors.email}</p>
+            )}
+          </div>
+
+          <div>
+            <Input
+              type="password"
+              name="password"
+              placeholder={t("password")}
+              className="w-full px-3 py-2"
+            />
+            {errors.password && (
+              <p className="text-red-500 text-sm mt-1">{errors.password}</p>
+            )}
+          </div>
+
+          {mode === 'signup' && (
+            <div>
+              <Input
+                type="password"
+                name="confirmPassword"
+                placeholder={t("confirmPassword")}
+                className="w-full px-3 py-2"
+              />
+              {errors.confirmPassword && (
+                <p className="text-red-500 text-sm mt-1">{errors.confirmPassword}</p>
+              )}
+            </div>
+          )}
+
+          <DarkButton
+            type="submit"
+            className={`w-full py-2 ${isSignInPending || isSignUpPending ? 'opacity-50 cursor-not-allowed' : ''}`}
+          >
+            {isSignInPending || isSignUpPending 
+              ? t("loading") 
+              : t(mode === 'signin' ? 'signInButton' : 'signUpButton')
+            }
+          </DarkButton>
+        </form>
+
+        <div className="mt-6">
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-gray-300"></div>
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="px-2 bg-white text-gray-500">或</span>
+            </div>
+          </div>
+
+          <LightButton
+            onClick={handleGitHubSignIn}
+            className="w-full mt-4 py-2 flex items-center justify-center gap-2"
+          >
+            <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+            </svg>
+            {t(mode === 'signin' ? 'signInWithGitHub' : 'signUpWithGitHub')}
+          </LightButton>
+        </div>
+
+        <div className="mt-6 text-center">
+          <button
+            type="button"
+            onClick={() => {
+              setMode(mode === 'signin' ? 'signup' : 'signin');
+              setErrors({});
+            }}
+            className="text-[#35786f] hover:underline"
+          >
+            {mode === 'signin' 
+              ? `${t("noAccount")} ${t("signUp")}`
+              : `${t("hasAccount")} ${t("signIn")}`
+            }
+          </button>
+        </div>
+      </Container>
+    </div>
+  );
+}