添加用户注册

2025-12-13 13:03:46 +08:00
parent 15d86e3252
commit 8678d5fe49
9 changed files with 889 additions and 5 deletions
@@ -0,0 +1,341 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+'use client';
+
+import { AlertCircle, CheckCircle, Eye, EyeOff } from 'lucide-react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Suspense, useEffect, useState } from 'react';
+
+import { CURRENT_VERSION } from '@/lib/version';
+import { checkForUpdates, UpdateStatus } from '@/lib/version_check';
+
+import { useSite } from '@/components/SiteProvider';
+import { ThemeToggle } from '@/components/ThemeToggle';
+
+// 版本显示组件
+function VersionDisplay() {
+  const [updateStatus, setUpdateStatus] = useState<UpdateStatus | null>(null);
+  const [isChecking, setIsChecking] = useState(true);
+
+  useEffect(() => {
+    const checkUpdate = async () => {
+      try {
+        const status = await checkForUpdates();
+        setUpdateStatus(status);
+      } catch (_) {
+        // do nothing
+      } finally {
+        setIsChecking(false);
+      }
+    };
+
+    checkUpdate();
+  }, []);
+
+  return (
+    <button
+      onClick={() =>
+        window.open('https://github.com/mtvpls/MoonTVPlus', '_blank')
+      }
+      className='absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 transition-colors cursor-pointer'
+    >
+      <span className='font-mono'>v{CURRENT_VERSION}</span>
+      {!isChecking && updateStatus !== UpdateStatus.FETCH_FAILED && (
+        <div
+          className={`flex items-center gap-1.5 ${updateStatus === UpdateStatus.HAS_UPDATE
+            ? 'text-yellow-600 dark:text-yellow-400'
+            : updateStatus === UpdateStatus.NO_UPDATE
+              ? 'text-green-600 dark:text-green-400'
+              : ''
+            }`}
+        >
+          {updateStatus === UpdateStatus.HAS_UPDATE && (
+            <>
+              <AlertCircle className='w-3.5 h-3.5' />
+              <span className='font-semibold text-xs'>有新版本</span>
+            </>
+          )}
+          {updateStatus === UpdateStatus.NO_UPDATE && (
+            <>
+              <CheckCircle className='w-3.5 h-3.5' />
+              <span className='font-semibold text-xs'>已是最新</span>
+            </>
+          )}
+        </div>
+      )}
+    </button>
+  );
+}
+
+function RegisterPageClient() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
+  const [turnstileLoaded, setTurnstileLoaded] = useState(false);
+  const [siteConfig, setSiteConfig] = useState<any>(null);
+
+  const { siteName } = useSite();
+
+  // 获取站点配置
+  useEffect(() => {
+    const fetchConfig = async () => {
+      try {
+        const res = await fetch('/api/server-config');
+        if (res.ok) {
+          const config = await res.json();
+          setSiteConfig(config);
+
+          // 如果未开启注册，重定向到登录页
+          if (!config.EnableRegistration) {
+            router.replace('/login');
+          }
+        }
+      } catch (error) {
+        console.error('Failed to fetch config:', error);
+      }
+    };
+
+    fetchConfig();
+  }, [router]);
+
+  // 加载Cloudflare Turnstile脚本
+  useEffect(() => {
+    if (!siteConfig?.RegistrationRequireTurnstile || !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 (!username || !password || !confirmPassword) {
+      setError('请填写所有字段');
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('两次输入的密码不一致');
+      return;
+    }
+
+    if (password.length < 6) {
+      setError('密码长度至少为6位');
+      return;
+    }
+
+    // 检查Turnstile验证
+    if (siteConfig?.RegistrationRequireTurnstile && !turnstileToken) {
+      setError('请完成人机验证');
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const res = await fetch('/api/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          username,
+          password,
+          turnstileToken: siteConfig?.RegistrationRequireTurnstile ? turnstileToken : undefined,
+        }),
+      });
+
+      if (res.ok) {
+        // 注册成功，跳转到登录页
+        const redirect = searchParams.get('redirect') || '/login';
+        router.replace(redirect);
+      } else if (res.status === 400) {
+        const data = await res.json().catch(() => ({}));
+        setError(data.error || '注册失败');
+      } else if (res.status === 409) {
+        setError('用户名已存在');
+      } else {
+        const data = await res.json().catch(() => ({}));
+        setError(data.error ?? '服务器错误');
+      }
+    } catch (error) {
+      setError('网络错误，请稍后重试');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 如果配置未加载或未开启注册，显示加载中
+  if (!siteConfig) {
+    return (
+      <div className='relative min-h-screen flex items-center justify-center px-4'>
+        <div className='text-gray-500 dark:text-gray-400'>加载中...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className='relative min-h-screen flex items-center justify-center px-4 overflow-hidden'>
+      <div className='absolute top-4 right-4'>
+        <ThemeToggle />
+      </div>
+      <div className='relative z-10 w-full max-w-md rounded-3xl bg-gradient-to-b from-white/90 via-white/70 to-white/40 dark:from-zinc-900/90 dark:via-zinc-900/70 dark:to-zinc-900/40 backdrop-blur-xl shadow-2xl p-10 dark:border dark:border-zinc-800'>
+        <h1 className='text-green-600 tracking-tight text-center text-3xl font-extrabold mb-2 bg-clip-text drop-shadow-sm'>
+          {siteName}
+        </h1>
+        <p className='text-center text-sm text-gray-600 dark:text-gray-400 mb-8'>
+          创建新账号
+        </p>
+        <form onSubmit={handleSubmit} className='space-y-6'>
+          <div>
+            <label htmlFor='username' className='sr-only'>
+              用户名
+            </label>
+            <input
+              id='username'
+              type='text'
+              autoComplete='username'
+              className='block w-full rounded-lg border-0 py-3 px-4 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-white/60 dark:ring-white/20 placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-green-500 focus:outline-none sm:text-base bg-white/60 dark:bg-zinc-800/60 backdrop-blur'
+              placeholder='输入用户名'
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+            />
+          </div>
+
+          <div>
+            <label htmlFor='password' className='sr-only'>
+              密码
+            </label>
+            <div className='relative'>
+              <input
+                id='password'
+                type={showPassword ? 'text' : 'password'}
+                autoComplete='new-password'
+                className='block w-full rounded-lg border-0 py-3 px-4 pr-12 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-white/60 dark:ring-white/20 placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-green-500 focus:outline-none sm:text-base bg-white/60 dark:bg-zinc-800/60 backdrop-blur'
+                placeholder='输入密码（至少6位）'
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+              <button
+                type='button'
+                className='absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
+                onClick={() => setShowPassword(!showPassword)}
+              >
+                {showPassword ? (
+                  <EyeOff className='h-5 w-5' />
+                ) : (
+                  <Eye className='h-5 w-5' />
+                )}
+              </button>
+            </div>
+          </div>
+
+          <div>
+            <label htmlFor='confirmPassword' className='sr-only'>
+              确认密码
+            </label>
+            <div className='relative'>
+              <input
+                id='confirmPassword'
+                type={showConfirmPassword ? 'text' : 'password'}
+                autoComplete='new-password'
+                className='block w-full rounded-lg border-0 py-3 px-4 pr-12 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-white/60 dark:ring-white/20 placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-green-500 focus:outline-none sm:text-base bg-white/60 dark:bg-zinc-800/60 backdrop-blur'
+                placeholder='再次输入密码'
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+              />
+              <button
+                type='button'
+                className='absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'
+                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+              >
+                {showConfirmPassword ? (
+                  <EyeOff className='h-5 w-5' />
+                ) : (
+                  <Eye className='h-5 w-5' />
+                )}
+              </button>
+            </div>
+          </div>
+
+          {/* Cloudflare Turnstile */}
+          {siteConfig?.RegistrationRequireTurnstile && 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>
+          )}
+
+          {/* 注册按钮 */}
+          <button
+            type='submit'
+            disabled={
+              !username || !password || !confirmPassword || loading ||
+              (siteConfig?.RegistrationRequireTurnstile && !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>
+
+          {/* 返回登录链接 */}
+          <div className='text-center'>
+            <button
+              type='button'
+              onClick={() => router.push('/login')}
+              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>
+
+      {/* 版本信息显示 */}
+      <VersionDisplay />
+    </div>
+  );
+}
+
+export default function RegisterPage() {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <RegisterPageClient />
+    </Suspense>
+  );
+}