From 2c0bb261547fa356ddb432cecdf040d5e4e4ac95 Mon Sep 17 00:00:00 2001
From: icy <icyoung520@gmail.com>
Date: Sun, 2 Nov 2025 06:22:38 +0800
Subject: [PATCH] =?UTF-8?q?feat(auth):=20integrate=20beta=20mode=20functio?=
 =?UTF-8?q?nality=20in=20registration=20-=20Add=20beta=20code=20input=20fi?=
 =?UTF-8?q?eld=20to=20registration=20form=20when=20beta=20mode=20is=20enab?=
 =?UTF-8?q?led=20-=20Check=20system=20config=20on=20component=20mount=20to?=
 =?UTF-8?q?=20determine=20beta=20mode=20status=20-=20Require=206-character?=
 =?UTF-8?q?=20alphanumeric=20beta=20code=20for=20registration=20in=20beta?=
 =?UTF-8?q?=20mode=20-=20Maintain=20existing=20internationalization=20and?=
 =?UTF-8?q?=20styling=20patterns=20=F0=9F=A4=96=20Generated=20with=20[Clau?=
 =?UTF-8?q?de=20Code](https://claude.ai/code)=20Co-Authored-By:=20tinkle-c?=
 =?UTF-8?q?ommunity=20<tinklefund@gmail.com>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/RegisterPage.tsx | 92 ++++++++++++++++++++---------
 1 file changed, 65 insertions(+), 27 deletions(-)

diff --git a/web/src/components/RegisterPage.tsx b/web/src/components/RegisterPage.tsx
index 438bed05..3b3b75d9 100644
--- a/web/src/components/RegisterPage.tsx
+++ b/web/src/components/RegisterPage.tsx
@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useAuth } from '../contexts/AuthContext';
 import { useLanguage } from '../contexts/LanguageContext';
 import { t } from '../i18n/translations';
+import { getSystemConfig } from '../lib/config';
 import { ArrowLeft } from 'lucide-react';
 
 export function RegisterPage() {
@@ -11,6 +12,8 @@ export function RegisterPage() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
+  const [betaCode, setBetaCode] = useState('');
+  const [betaMode, setBetaMode] = useState(false);
   const [otpCode, setOtpCode] = useState('');
   const [userID, setUserID] = useState('');
   const [otpSecret, setOtpSecret] = useState('');
@@ -67,6 +70,19 @@ export function RegisterPage() {
     setLoading(false);
   };
 
+  // Check for beta mode on component mount
+  useEffect(() => {
+    const checkBetaMode = async () => {
+      try {
+        const config = await getSystemConfig();
+        setBetaMode(config.beta_mode || false);
+      } catch (error) {
+        console.error('Failed to get system config:', error);
+      }
+    };
+    checkBetaMode();
+  }, []);
+
   const copyToClipboard = (text: string) => {
     navigator.clipboard.writeText(text);
   };
@@ -92,7 +108,7 @@ export function RegisterPage() {
         {/* Logo */}
         <div className="text-center mb-8">
           <div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center">
-            <img src="/images/logo.png" alt="NoFx Logo" className="w-16 h-16 object-contain" />
+            <img src="/icons/nofx.svg" alt="NoFx Logo" className="w-16 h-16 object-contain" />
           </div>
           <h1 className="text-2xl font-bold" style={{ color: '#EAECEF' }}>
             {t('appTitle', language)}
@@ -109,7 +125,7 @@ export function RegisterPage() {
           {step === 'register' && (
             <form onSubmit={handleRegister} className="space-y-4">
               <div>
-                <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                <label className="block text-sm font-semibold mb-2" style={{ color: 'var(--brand-light-gray)' }}>
                   {t('email', language)}
                 </label>
                 <input
@@ -117,14 +133,14 @@ export function RegisterPage() {
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   className="w-full px-3 py-2 rounded"
-                  style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}
+                  style={{ background: 'var(--brand-black)', border: '1px solid var(--panel-border)', color: 'var(--brand-light-gray)' }}
                   placeholder={t('emailPlaceholder', language)}
                   required
                 />
               </div>
 
               <div>
-                <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                <label className="block text-sm font-semibold mb-2" style={{ color: 'var(--brand-light-gray)' }}>
                   {t('password', language)}
                 </label>
                 <input
@@ -132,14 +148,14 @@ export function RegisterPage() {
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
                   className="w-full px-3 py-2 rounded"
-                  style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}
+                  style={{ background: 'var(--brand-black)', border: '1px solid var(--panel-border)', color: 'var(--brand-light-gray)' }}
                   placeholder={t('passwordPlaceholder', language)}
                   required
                 />
               </div>
 
               <div>
-                <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                <label className="block text-sm font-semibold mb-2" style={{ color: 'var(--brand-light-gray)' }}>
                   {t('confirmPassword', language)}
                 </label>
                 <input
@@ -147,14 +163,35 @@ export function RegisterPage() {
                   value={confirmPassword}
                   onChange={(e) => setConfirmPassword(e.target.value)}
                   className="w-full px-3 py-2 rounded"
-                  style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}
+                  style={{ background: 'var(--brand-black)', border: '1px solid var(--panel-border)', color: 'var(--brand-light-gray)' }}
                   placeholder={t('confirmPasswordPlaceholder', language)}
                   required
                 />
               </div>
 
+              {betaMode && (
+                <div>
+                  <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                    内测码 *
+                  </label>
+                  <input
+                    type="text"
+                    value={betaCode}
+                    onChange={(e) => setBetaCode(e.target.value.replace(/[^a-z0-9]/gi, '').toLowerCase())}
+                    className="w-full px-3 py-2 rounded font-mono"
+                    style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}
+                    placeholder="请输入6位内测码"
+                    maxLength={6}
+                    required={betaMode}
+                  />
+                  <p className="text-xs mt-1" style={{ color: '#848E9C' }}>
+                    内测码由6位字母数字组成，区分大小写
+                  </p>
+                </div>
+              )}
+
               {error && (
-                <div className="text-sm px-3 py-2 rounded" style={{ background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }}>
+                <div className="text-sm px-3 py-2 rounded" style={{ background: 'var(--binance-red-bg)', color: 'var(--binance-red)' }}>
                   {error}
                 </div>
               )}
@@ -163,7 +200,7 @@ export function RegisterPage() {
                 type="submit"
                 disabled={loading}
                 className="w-full px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50"
-                style={{ background: '#F0B90B', color: '#000' }}
+                style={{ background: 'var(--brand-yellow)', color: 'var(--brand-black)' }}
               >
                 {loading ? t('loading', language) : t('registerButton', language)}
               </button>
@@ -183,17 +220,17 @@ export function RegisterPage() {
               </div>
 
               <div className="space-y-3">
-                <div className="p-3 rounded" style={{ background: '#0B0E11', border: '1px solid #2B3139' }}>
-                  <p className="text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                <div className="p-3 rounded" style={{ background: 'var(--brand-black)', border: '1px solid var(--panel-border)' }}>
+                  <p className="text-sm font-semibold mb-2" style={{ color: 'var(--brand-light-gray)' }}>
                     {t('step1Title', language)}
                   </p>
-                  <p className="text-xs" style={{ color: '#848E9C' }}>
+                  <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
                     {t('step1Desc', language)}
                   </p>
                 </div>
 
-                <div className="p-3 rounded" style={{ background: '#0B0E11', border: '1px solid #2B3139' }}>
-                  <p className="text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                <div className="p-3 rounded" style={{ background: 'var(--brand-black)', border: '1px solid var(--panel-border)' }}>
+                  <p className="text-sm font-semibold mb-2" style={{ color: 'var(--brand-light-gray)' }}>
                     {t('step2Title', language)}
                   </p>
                   <p className="text-xs mb-2" style={{ color: '#848E9C' }}>
@@ -214,13 +251,13 @@ export function RegisterPage() {
                     <p className="text-xs mb-1" style={{ color: '#848E9C' }}>{t('otpSecret', language)}</p>
                     <div className="flex items-center gap-2">
                       <code className="flex-1 px-2 py-1 text-xs rounded font-mono" 
-                            style={{ background: '#2B3139', color: '#EAECEF' }}>
+                            style={{ background: 'var(--panel-bg-hover)', color: 'var(--brand-light-gray)' }}>
                         {otpSecret}
                       </code>
                       <button
                         onClick={() => copyToClipboard(otpSecret)}
                         className="px-2 py-1 text-xs rounded"
-                        style={{ background: '#F0B90B', color: '#000' }}
+                        style={{ background: 'var(--brand-yellow)', color: 'var(--brand-black)' }}
                       >
                         {t('copy', language)}
                       </button>
@@ -228,11 +265,11 @@ export function RegisterPage() {
                   </div>
                 </div>
 
-                <div className="p-3 rounded" style={{ background: '#0B0E11', border: '1px solid #2B3139' }}>
-                  <p className="text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                <div className="p-3 rounded" style={{ background: 'var(--brand-black)', border: '1px solid var(--panel-border)' }}>
+                  <p className="text-sm font-semibold mb-2" style={{ color: 'var(--brand-light-gray)' }}>
                     {t('step3Title', language)}
                   </p>
-                  <p className="text-xs" style={{ color: '#848E9C' }}>
+                  <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
                     {t('step3Desc', language)}
                   </p>
                 </div>
@@ -259,7 +296,7 @@ export function RegisterPage() {
               </div>
 
               <div>
-                <label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
+                <label className="block text-sm font-semibold mb-2" style={{ color: 'var(--brand-light-gray)' }}>
                   {t('otpCode', language)}
                 </label>
                 <input
@@ -267,7 +304,7 @@ export function RegisterPage() {
                   value={otpCode}
                   onChange={(e) => setOtpCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
                   className="w-full px-3 py-2 rounded text-center text-2xl font-mono"
-                  style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}
+                  style={{ background: 'var(--brand-black)', border: '1px solid var(--panel-border)', color: 'var(--brand-light-gray)' }}
                   placeholder={t('otpPlaceholder', language)}
                   maxLength={6}
                   required
@@ -275,7 +312,7 @@ export function RegisterPage() {
               </div>
 
               {error && (
-                <div className="text-sm px-3 py-2 rounded" style={{ background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }}>
+                <div className="text-sm px-3 py-2 rounded" style={{ background: 'var(--binance-red-bg)', color: 'var(--binance-red)' }}>
                   {error}
                 </div>
               )}
@@ -285,7 +322,7 @@ export function RegisterPage() {
                   type="button"
                   onClick={() => setStep('setup-otp')}
                   className="flex-1 px-4 py-2 rounded text-sm font-semibold"
-                  style={{ background: '#2B3139', color: '#848E9C' }}
+                  style={{ background: 'var(--panel-bg-hover)', color: 'var(--text-secondary)' }}
                 >
                   {t('back', language)}
                 </button>
@@ -305,21 +342,22 @@ export function RegisterPage() {
         {/* Login Link */}
         {step === 'register' && (
           <div className="text-center mt-6">
-            <p className="text-sm" style={{ color: '#848E9C' }}>
+            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
               已有账户？{' '}
               <button
                 onClick={() => {
                   window.history.pushState({}, '', '/login');
                   window.dispatchEvent(new PopStateEvent('popstate'));
                 }}
-                className="font-semibold hover:underline"
-                style={{ color: '#F0B90B' }}
+                className="font-semibold hover:underline transition-colors"
+                style={{ color: 'var(--brand-yellow)' }}
               >
                 立即登录
               </button>
             </p>
           </div>
         )}
+        </div>
       </div>
     </div>
   );