Merge pull request #100 from BEDOLAGA-DEV/dev

Dev

src/locales/en.json

@@ -69,6 +69,7 @@
     "loginWithEmail": "Login with Email",
     "noAccount": "Don't have an account?",
     "hasAccount": "Already have an account?",
+    "or": "or",
     "registerHint": "To register with email, first log in via Telegram, then link your email in settings.",
     "telegramRequired": "Telegram authorization required",
     "telegramNotConfigured": "Telegram bot is not configured",

src/locales/fa.json

@@ -64,6 +64,7 @@
     "loginWithEmail": "ورود با ایمیل",
     "noAccount": "حساب کاربری ندارید؟",
     "hasAccount": "قبلاً حساب دارید؟",
+    "or": "یا",
     "registerHint": "برای ثبت نام با ایمیل، ابتدا با تلگرام وارد شوید، سپس ایمیل خود را در تنظیمات متصل کنید.",
     "telegramRequired": "نیاز به تایید تلگرام",
     "telegramNotConfigured": "ربات تلگرام پیکربندی نشده",

src/locales/ru.json

@@ -69,6 +69,7 @@
     "loginWithEmail": "Войти по Email",
     "noAccount": "Нет аккаунта?",
     "hasAccount": "Уже есть аккаунт?",
+    "or": "или",
     "registerHint": "Для регистрации по email сначала авторизуйтесь через Telegram, затем привяжите email в настройках.",
     "telegramRequired": "Требуется авторизация через Telegram",
     "telegramNotConfigured": "Telegram бот не настроен",

src/locales/zh.json

@@ -65,6 +65,7 @@
     "loginWithEmail": "通过邮箱登录",
     "noAccount": "没有账户？",
     "hasAccount": "已有账户？",
+    "or": "或",
     "registerHint": "要通过邮箱注册，请先通过Telegram登录，然后在设置中绑定邮箱。",
     "telegramRequired": "需要Telegram授权",
     "telegramNotConfigured": "Telegram机器人未配置",

src/pages/Login.tsx

@@ -19,9 +19,6 @@ export default function Login() {
   // Extract referral code from URL
   const referralCode = searchParams.get('ref') || ''
 
-  const [activeTab, setActiveTab] = useState<'telegram' | 'email'>(() =>
-    referralCode ? 'email' : 'telegram'
-  )
   const [authMode, setAuthMode] = useState<'login' | 'register'>(() =>
     referralCode ? 'register' : 'login'
   )
@@ -88,12 +85,6 @@ export default function Login() {
     }
   }, [referralCode, emailAuthConfig, botUsername])
 
-  // If email auth is disabled but we initially set to email tab, switch back to telegram
-  useEffect(() => {
-    if (!isEmailAuthEnabled && activeTab === 'email') {
-      setActiveTab('telegram')
-    }
-  }, [isEmailAuthEnabled, activeTab])
   const appName = branding ? branding.name : (import.meta.env.VITE_APP_NAME || 'VPN')
   const appLogo = branding?.logo_letter || import.meta.env.VITE_APP_LOGO || 'V'
   const logoUrl = branding ? brandingApi.getLogoUrl(branding) : null
@@ -304,43 +295,13 @@ export default function Login() {
         ) : (
         /* Card */
         <div className="card">
-          {/* Tabs */}
-          {isEmailAuthEnabled ? (
-            <div className="flex mb-6">
-              <button
-                className={`flex-1 py-3 text-sm font-medium transition-all border-b-2 ${
-                  activeTab === 'telegram'
-                    ? 'border-accent-500 text-accent-400'
-                    : 'border-transparent text-dark-500 hover:text-dark-300'
-                }`}
-                onClick={() => setActiveTab('telegram')}
-              >
-                Telegram
-              </button>
-              <button
-                className={`flex-1 py-3 text-sm font-medium transition-all border-b-2 ${
-                  activeTab === 'email'
-                    ? 'border-accent-500 text-accent-400'
-                    : 'border-transparent text-dark-500 hover:text-dark-300'
-                }`}
-                onClick={() => setActiveTab('email')}
-              >
-                Email
-              </button>
-            </div>
-          ) : (
-            <div className="mb-6 pb-3 border-b border-dark-700">
-              <h2 className="text-lg font-medium text-dark-200 text-center">Telegram</h2>
-            </div>
-          )}
-
           {error && (
             <div className="bg-error-500/10 border border-error-500/30 text-error-400 px-4 py-3 rounded-xl text-sm mb-6">
               {error}
             </div>
           )}
 
-          {activeTab === 'telegram' || !isEmailAuthEnabled ? (
+          {/* Telegram auth — always visible */}
           <div className="space-y-6">
             <p className="text-center text-sm text-dark-400">
               {t('auth.registerHint')}
@@ -355,7 +316,17 @@ export default function Login() {
               <TelegramLoginButton botUsername={botUsername} />
             )}
           </div>
-          ) : (
+
+          {/* Email auth — only when enabled */}
+          {isEmailAuthEnabled && (
+            <>
+              {/* Divider */}
+              <div className="flex items-center gap-3 my-6">
+                <div className="flex-1 h-px bg-dark-700" />
+                <span className="text-xs text-dark-500 uppercase">{t('auth.or', 'or')}</span>
+                <div className="flex-1 h-px bg-dark-700" />
+              </div>
+
               <div className="space-y-5">
                 {/* Login / Register toggle */}
                 <div className="flex bg-dark-800 rounded-lg p-1">
@@ -493,6 +464,7 @@ export default function Login() {
                   </div>
                 )}
               </div>
+            </>
           )}
         </div>
         )}