添加用户注册

src/app/login/page.tsx

@@ -77,6 +77,9 @@ function LoginPageClient() {
   const [shouldAskUsername, setShouldAskUsername] = useState(false);
   const [rememberPassword, setRememberPassword] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
+  const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
+  const [turnstileLoaded, setTurnstileLoaded] = useState(false);
+  const [siteConfig, setSiteConfig] = useState<any>(null);
 
   const { siteName } = useSite();
 
@@ -86,7 +89,7 @@ function LoginPageClient() {
       const storageType = (window as any).RUNTIME_CONFIG?.STORAGE_TYPE;
       const shouldAsk = storageType && storageType !== 'localstorage';
       setShouldAskUsername(shouldAsk);
-      
+
       // 从localStorage读取记住的密码信息
       const rememberedCredentials = localStorage.getItem('rememberedCredentials');
       if (rememberedCredentials) {
@@ -107,12 +110,72 @@ function LoginPageClient() {
     }
   }, []);
 
+  // 获取站点配置
+  useEffect(() => {
+    const fetchConfig = async () => {
+      try {
+        const res = await fetch('/api/server-config');
+        if (res.ok) {
+          const config = await res.json();
+          setSiteConfig(config);
+        }
+      } catch (error) {
+        console.error('Failed to fetch config:', error);
+      }
+    };
+
+    fetchConfig();
+  }, []);
+
+  // 加载Cloudflare Turnstile脚本
+  useEffect(() => {
+    if (!siteConfig?.LoginRequireTurnstile || !siteConfig?.TurnstileSiteKey) {
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
+    script.async = true;
+    script.defer = true;
+    script.onload = () => {
+      setTurnstileLoaded(true);
+    };
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, [siteConfig]);
+
+  // 渲染Turnstile组件
+  useEffect(() => {
+    if (!turnstileLoaded || !siteConfig?.TurnstileSiteKey) {
+      return;
+    }
+
+    const container = document.getElementById('turnstile-container');
+    if (container && (window as any).turnstile) {
+      (window as any).turnstile.render('#turnstile-container', {
+        sitekey: siteConfig.TurnstileSiteKey,
+        callback: (token: string) => {
+          setTurnstileToken(token);
+        },
+      });
+    }
+  }, [turnstileLoaded, siteConfig]);
+
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setError(null);
 
     if (!password || (shouldAskUsername && !username)) return;
 
+    // 检查Turnstile验证
+    if (siteConfig?.LoginRequireTurnstile && !turnstileToken) {
+      setError('请完成人机验证');
+      return;
+    }
+
     try {
       setLoading(true);
       const res = await fetch('/api/login', {
@@ -121,6 +184,7 @@ function LoginPageClient() {
         body: JSON.stringify({
           password,
           ...(shouldAskUsername ? { username } : {}),
+          ...(siteConfig?.LoginRequireTurnstile ? { turnstileToken } : {}),
         }),
       });
 
@@ -210,6 +274,11 @@ function LoginPageClient() {
             </div>
           </div>
 
+          {/* Cloudflare Turnstile */}
+          {siteConfig?.LoginRequireTurnstile && siteConfig?.TurnstileSiteKey && (
+            <div id='turnstile-container' className='flex justify-center'></div>
+          )}
+
           {error && (
             <p className='text-sm text-red-600 dark:text-red-400'>{error}</p>
           )}
@@ -235,12 +304,26 @@ function LoginPageClient() {
           <button
             type='submit'
             disabled={
-              !password || loading || (shouldAskUsername && !username)
+              !password || loading || (shouldAskUsername && !username) ||
+              (siteConfig?.LoginRequireTurnstile && !turnstileToken)
             }
             className='inline-flex w-full justify-center rounded-lg bg-green-600 py-3 text-base font-semibold text-white shadow-lg transition-all duration-200 hover:from-green-600 hover:to-blue-600 disabled:cursor-not-allowed disabled:opacity-50'
           >
             {loading ? '登录中...' : '登录'}
           </button>
+
+          {/* 注册按钮 */}
+          {siteConfig?.EnableRegistration && shouldAskUsername && (
+            <div className='text-center'>
+              <button
+                type='button'
+                onClick={() => router.push('/register')}
+                className='text-sm text-green-600 dark:text-green-400 hover:text-green-700 dark:hover:text-green-300 transition-colors'
+              >
+                还没有账号？立即注册
+              </button>
+            </div>
+          )}
         </form>
       </div>