etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-30 10:27:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update Login.tsx

Browse Source
This commit is contained in:
Egor
2026-01-27 17:50:03 +03:00
committed by GitHub
parent a66a605fb4
commit f2972d023c
1 changed files with 284 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

457
src/pages/Login.tsx
View File

@@ -1,235 +1,259 @@
import { useState, useEffect, useMemo, useCallback } from 'react' import { useState, useEffect, useMemo, useCallback } from 'react';
import { useNavigate, useLocation, useSearchParams } from 'react-router-dom' import { useNavigate, useLocation, useSearchParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next';
import { useQuery } from '@tanstack/react-query' import { useQuery } from '@tanstack/react-query';
import { useAuthStore } from '../store/auth' import { useAuthStore } from '../store/auth';
import { authApi } from '../api/auth' import { authApi } from '../api/auth';
import { brandingApi, getCachedBranding, setCachedBranding, preloadLogo, isLogoPreloaded, type BrandingInfo, type EmailAuthEnabled } from '../api/branding' import {
import { getAndClearReturnUrl } from '../utils/token' brandingApi,
import LanguageSwitcher from '../components/LanguageSwitcher' getCachedBranding,
import TelegramLoginButton from '../components/TelegramLoginButton' setCachedBranding,
preloadLogo,
isLogoPreloaded,
type BrandingInfo,
type EmailAuthEnabled,
} from '../api/branding';
import { getAndClearReturnUrl } from '../utils/token';
import LanguageSwitcher from '../components/LanguageSwitcher';
import TelegramLoginButton from '../components/TelegramLoginButton';
export default function Login() { export default function Login() {
const { t } = useTranslation() const { t } = useTranslation();
const navigate = useNavigate() const navigate = useNavigate();
const location = useLocation() const location = useLocation();
const [searchParams] = useSearchParams() const [searchParams] = useSearchParams();
const { isAuthenticated, loginWithTelegram, loginWithEmail, registerWithEmail } = useAuthStore() const { isAuthenticated, loginWithTelegram, loginWithEmail, registerWithEmail } = useAuthStore();
// Extract referral code from URL // Extract referral code from URL
const referralCode = searchParams.get('ref') || '' const referralCode = searchParams.get('ref') || '';
const [activeTab, setActiveTab] = useState<'telegram' | 'email'>(() =>
referralCode ? 'email' : 'telegram',
);
const [authMode, setAuthMode] = useState<'login' | 'register'>(() => const [authMode, setAuthMode] = useState<'login' | 'register'>(() =>
referralCode ? 'register' : 'login' referralCode ? 'register' : 'login',
) );
const [email, setEmail] = useState('') const [email, setEmail] = useState('');
const [password, setPassword] = useState('') const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('') const [confirmPassword, setConfirmPassword] = useState('');
const [firstName, setFirstName] = useState('') const [firstName, setFirstName] = useState('');
const [error, setError] = useState('') const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(false) const [isLoading, setIsLoading] = useState(false);
const [isTelegramWebApp, setIsTelegramWebApp] = useState(false) const [isTelegramWebApp, setIsTelegramWebApp] = useState(false);
const [logoLoaded, setLogoLoaded] = useState(() => isLogoPreloaded()) const [logoLoaded, setLogoLoaded] = useState(() => isLogoPreloaded());
const [registeredEmail, setRegisteredEmail] = useState<string | null>(null) const [registeredEmail, setRegisteredEmail] = useState<string | null>(null);
const [showForgotPassword, setShowForgotPassword] = useState(false) const [showForgotPassword, setShowForgotPassword] = useState(false);
const [forgotPasswordEmail, setForgotPasswordEmail] = useState('') const [forgotPasswordEmail, setForgotPasswordEmail] = useState('');
const [forgotPasswordSent, setForgotPasswordSent] = useState(false) const [forgotPasswordSent, setForgotPasswordSent] = useState(false);
const [forgotPasswordLoading, setForgotPasswordLoading] = useState(false) const [forgotPasswordLoading, setForgotPasswordLoading] = useState(false);
const [forgotPasswordError, setForgotPasswordError] = useState('') const [forgotPasswordError, setForgotPasswordError] = useState('');
// Получаем URL для возврата после авторизации // Получаем URL для возврата после авторизации
const getReturnUrl = useCallback(() => { const getReturnUrl = useCallback(() => {
// Сначала проверяем state от React Router // Сначала проверяем state от React Router
const stateFrom = (location.state as { from?: string })?.from const stateFrom = (location.state as { from?: string })?.from;
if (stateFrom && stateFrom !== '/login') { if (stateFrom && stateFrom !== '/login') {
return stateFrom return stateFrom;
} }
// Затем проверяем сохранённый URL в sessionStorage (от safeRedirectToLogin) // Затем проверяем сохранённый URL в sessionStorage (от safeRedirectToLogin)
const savedUrl = getAndClearReturnUrl() const savedUrl = getAndClearReturnUrl();
if (savedUrl && savedUrl !== '/login') { if (savedUrl && savedUrl !== '/login') {
return savedUrl return savedUrl;
} }
// По умолчанию на главную // По умолчанию на главную
return '/' return '/';
}, [location.state]) }, [location.state]);
// Fetch branding with unified cache // Fetch branding with unified cache
const cachedBranding = useMemo(() => getCachedBranding(), []) const cachedBranding = useMemo(() => getCachedBranding(), []);
const { data: branding } = useQuery<BrandingInfo>({ const { data: branding } = useQuery<BrandingInfo>({
queryKey: ['branding'], queryKey: ['branding'],
queryFn: async () => { queryFn: async () => {
const data = await brandingApi.getBranding() const data = await brandingApi.getBranding();
setCachedBranding(data) setCachedBranding(data);
preloadLogo(data) preloadLogo(data);
return data return data;
}, },
staleTime: 60000, staleTime: 60000,
initialData: cachedBranding ?? undefined, initialData: cachedBranding ?? undefined,
}) });
// Check if email auth is enabled // Check if email auth is enabled
const { data: emailAuthConfig } = useQuery<EmailAuthEnabled>({ const { data: emailAuthConfig } = useQuery<EmailAuthEnabled>({
queryKey: ['email-auth-enabled'], queryKey: ['email-auth-enabled'],
queryFn: brandingApi.getEmailAuthEnabled, queryFn: brandingApi.getEmailAuthEnabled,
staleTime: 60000, staleTime: 60000,
}) });
const isEmailAuthEnabled = emailAuthConfig?.enabled ?? true const isEmailAuthEnabled = emailAuthConfig?.enabled ?? true;
const botUsername = import.meta.env.VITE_TELEGRAM_BOT_USERNAME || '' const botUsername = import.meta.env.VITE_TELEGRAM_BOT_USERNAME || '';
// If email auth is disabled but user came with ref param, redirect to bot // If email auth is disabled but user came with ref param, redirect to bot
useEffect(() => { useEffect(() => {
if (referralCode && emailAuthConfig?.enabled === false && botUsername) { if (referralCode && emailAuthConfig?.enabled === false && botUsername) {
window.location.href = `https://t.me/${botUsername}?start=ref_${referralCode}` window.location.href = `https://t.me/${botUsername}?start=ref_${referralCode}`;
} }
}, [referralCode, emailAuthConfig, botUsername]) }, [referralCode, emailAuthConfig, botUsername]);
const appName = branding ? branding.name : (import.meta.env.VITE_APP_NAME || 'VPN') // If email auth is disabled but we initially set to email tab, switch back to telegram
const appLogo = branding?.logo_letter || import.meta.env.VITE_APP_LOGO || 'V' useEffect(() => {
const logoUrl = branding ? brandingApi.getLogoUrl(branding) : null 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;
// Set document title // Set document title
useEffect(() => { useEffect(() => {
document.title = appName || 'VPN' document.title = appName || 'VPN';
}, [appName]) }, [appName]);
useEffect(() => { useEffect(() => {
if (isAuthenticated) { if (isAuthenticated) {
navigate(getReturnUrl(), { replace: true }) navigate(getReturnUrl(), { replace: true });
} }
}, [isAuthenticated, navigate, getReturnUrl]) }, [isAuthenticated, navigate, getReturnUrl]);
// Try Telegram WebApp authentication on mount // Try Telegram WebApp authentication on mount
useEffect(() => { useEffect(() => {
const tryTelegramAuth = async () => { const tryTelegramAuth = async () => {
const tg = window.Telegram?.WebApp const tg = window.Telegram?.WebApp;
if (tg?.initData) { if (tg?.initData) {
setIsTelegramWebApp(true) setIsTelegramWebApp(true);
tg.ready() tg.ready();
tg.expand() tg.expand();
setIsLoading(true) setIsLoading(true);
try { try {
await loginWithTelegram(tg.initData) await loginWithTelegram(tg.initData);
navigate(getReturnUrl(), { replace: true }) navigate(getReturnUrl(), { replace: true });
} catch (err) { } catch (err) {
// Log only status code to avoid leaking sensitive data // Log only status code to avoid leaking sensitive data
const status = (err as { response?: { status?: number } })?.response?.status const status = (err as { response?: { status?: number } })?.response?.status;
console.warn('Telegram auth failed with status:', status) console.warn('Telegram auth failed with status:', status);
setError(t('auth.telegramRequired')) setError(t('auth.telegramRequired'));
} finally { } finally {
setIsLoading(false) setIsLoading(false);
}
} }
} }
};
tryTelegramAuth() tryTelegramAuth();
}, [loginWithTelegram, navigate, t, getReturnUrl]) }, [loginWithTelegram, navigate, t, getReturnUrl]);
const handleEmailSubmit = async (e: React.FormEvent) => { const handleEmailSubmit = async (e: React.FormEvent) => {
e.preventDefault() e.preventDefault();
setError('') setError('');
// Валидация email // Валидация email
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!email.trim() || !emailRegex.test(email.trim())) { if (!email.trim() || !emailRegex.test(email.trim())) {
setError(t('auth.invalidEmail', 'Please enter a valid email address')) setError(t('auth.invalidEmail', 'Please enter a valid email address'));
return return;
} }
if (authMode === 'register') { if (authMode === 'register') {
// Валидация для регистрации // Валидация для регистрации
if (password !== confirmPassword) { if (password !== confirmPassword) {
setError(t('auth.passwordMismatch', 'Passwords do not match')) setError(t('auth.passwordMismatch', 'Passwords do not match'));
return return;
} }
if (password.length < 8) { if (password.length < 8) {
setError(t('auth.passwordTooShort', 'Password must be at least 8 characters')) setError(t('auth.passwordTooShort', 'Password must be at least 8 characters'));
return return;
} }
} }
setIsLoading(true) setIsLoading(true);
try { try {
if (authMode === 'login') { if (authMode === 'login') {
await loginWithEmail(email, password) await loginWithEmail(email, password);
navigate(getReturnUrl(), { replace: true }) navigate(getReturnUrl(), { replace: true });
} else { } else {
const result = await registerWithEmail(email, password, firstName || undefined, referralCode || undefined) const result = await registerWithEmail(
email,
password,
firstName || undefined,
referralCode || undefined,
);
// Show "check your email" screen // Show "check your email" screen
setRegisteredEmail(result.email) setRegisteredEmail(result.email);
} }
} catch (err: unknown) { } catch (err: unknown) {
const error = err as { response?: { status?: number; data?: { detail?: string } } } const error = err as { response?: { status?: number; data?: { detail?: string } } };
const status = error.response?.status const status = error.response?.status;
const detail = error.response?.data?.detail const detail = error.response?.data?.detail;
if (status === 400 && detail?.includes('already registered')) { if (status === 400 && detail?.includes('already registered')) {
setError(t('auth.emailAlreadyRegistered', 'This email is already registered')) setError(t('auth.emailAlreadyRegistered', 'This email is already registered'));
} else if (status === 401 || status === 403) { } else if (status === 401 || status === 403) {
if (detail?.includes('verify your email')) { if (detail?.includes('verify your email')) {
setError(t('auth.emailNotVerified', 'Please verify your email first')) setError(t('auth.emailNotVerified', 'Please verify your email first'));
} else { } else {
setError(t('auth.invalidCredentials', 'Invalid email or password')) setError(t('auth.invalidCredentials', 'Invalid email or password'));
} }
} else if (status === 429) { } else if (status === 429) {
setError(t('auth.tooManyAttempts', 'Too many attempts. Please try again later')) setError(t('auth.tooManyAttempts', 'Too many attempts. Please try again later'));
} else { } else {
setError(detail || t('common.error')) setError(detail || t('common.error'));
} }
} finally { } finally {
setIsLoading(false) setIsLoading(false);
}
} }
};
const handleForgotPassword = async (e: React.FormEvent) => { const handleForgotPassword = async (e: React.FormEvent) => {
e.preventDefault() e.preventDefault();
setForgotPasswordError('') setForgotPasswordError('');
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!forgotPasswordEmail.trim() || !emailRegex.test(forgotPasswordEmail.trim())) { if (!forgotPasswordEmail.trim() || !emailRegex.test(forgotPasswordEmail.trim())) {
setForgotPasswordError(t('auth.invalidEmail', 'Please enter a valid email address')) setForgotPasswordError(t('auth.invalidEmail', 'Please enter a valid email address'));
return return;
} }
setForgotPasswordLoading(true) setForgotPasswordLoading(true);
try { try {
await authApi.forgotPassword(forgotPasswordEmail.trim()) await authApi.forgotPassword(forgotPasswordEmail.trim());
setForgotPasswordSent(true) setForgotPasswordSent(true);
} catch (err: unknown) { } catch (err: unknown) {
const error = err as { response?: { status?: number; data?: { detail?: string } } } const error = err as { response?: { status?: number; data?: { detail?: string } } };
const detail = error.response?.data?.detail const detail = error.response?.data?.detail;
setForgotPasswordError(detail || t('common.error')) setForgotPasswordError(detail || t('common.error'));
} finally { } finally {
setForgotPasswordLoading(false) setForgotPasswordLoading(false);
}
} }
};
const closeForgotPasswordModal = () => { const closeForgotPasswordModal = () => {
setShowForgotPassword(false) setShowForgotPassword(false);
setForgotPasswordEmail('') setForgotPasswordEmail('');
setForgotPasswordSent(false) setForgotPasswordSent(false);
setForgotPasswordError('') setForgotPasswordError('');
} };
return ( return (
<div className="min-h-screen flex items-center justify-center py-8 px-4 sm:py-12 sm:px-6 lg:px-8"> <div className="flex min-h-screen items-center justify-center px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
{/* Background gradient */} {/* Background gradient */}
<div className="fixed inset-0 bg-gradient-to-br from-dark-950 via-dark-900 to-dark-950" /> <div className="fixed inset-0 bg-gradient-to-br from-dark-950 via-dark-900 to-dark-950" />
<div className="fixed inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-accent-500/10 via-transparent to-transparent" /> <div className="fixed inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-accent-500/10 via-transparent to-transparent" />
{/* Language switcher */} {/* Language switcher */}
<div className="fixed top-4 right-4 z-50"> <div className="fixed right-4 top-4 z-50">
<LanguageSwitcher /> <LanguageSwitcher />
</div> </div>
<div className="relative max-w-md w-full space-y-8"> <div className="relative w-full max-w-md space-y-8">
{/* Logo */} {/* Logo */}
<div className="text-center"> <div className="text-center">
<div className="mx-auto w-16 h-16 rounded-2xl bg-gradient-to-br from-accent-400 to-accent-600 flex items-center justify-center mb-6 shadow-lg shadow-accent-500/30 overflow-hidden relative"> <div className="relative mx-auto mb-6 flex h-16 w-16 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-accent-400 to-accent-600 shadow-lg shadow-accent-500/30">
{/* Always show letter as fallback */} {/* Always show letter as fallback */}
<span className={`text-white font-bold text-2xl absolute transition-opacity duration-200 ${branding?.has_custom_logo && logoLoaded ? 'opacity-0' : 'opacity-100'}`}> <span
className={`absolute text-2xl font-bold text-white transition-opacity duration-200 ${branding?.has_custom_logo && logoLoaded ? 'opacity-0' : 'opacity-100'}`}
>
{appLogo} {appLogo}
</span> </span>
{/* Logo image with smooth fade-in */} {/* Logo image with smooth fade-in */}
@@ -237,26 +261,30 @@ export default function Login() {
<img <img
src={logoUrl} src={logoUrl}
alt={appName || 'Logo'} alt={appName || 'Logo'}
className={`w-full h-full object-cover absolute transition-opacity duration-200 ${logoLoaded ? 'opacity-100' : 'opacity-0'}`} className={`absolute h-full w-full object-cover transition-opacity duration-200 ${logoLoaded ? 'opacity-100' : 'opacity-0'}`}
onLoad={() => setLogoLoaded(true)} onLoad={() => setLogoLoaded(true)}
/> />
)} )}
</div> </div>
{appName && ( {appName && <h1 className="text-3xl font-bold text-dark-50">{appName}</h1>}
<h1 className="text-3xl font-bold text-dark-50"> <p className="mt-2 text-dark-400">{t('auth.loginSubtitle')}</p>
{appName}
</h1>
)}
<p className="mt-2 text-dark-400">
{t('auth.loginSubtitle')}
</p>
{/* Referral Banner - only show when email auth is enabled */} {/* Referral Banner - only show when email auth is enabled */}
{referralCode && isEmailAuthEnabled && ( {referralCode && isEmailAuthEnabled && (
<div className="mt-4 p-3 rounded-xl bg-accent-500/10 border border-accent-500/30"> <div className="mt-4 rounded-xl border border-accent-500/30 bg-accent-500/10 p-3">
<div className="flex items-center gap-2 text-accent-400"> <div className="flex items-center gap-2 text-accent-400">
<svg className="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}> <svg
<path strokeLinecap="round" strokeLinejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /> className="h-5 w-5 flex-shrink-0"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={1.5}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
/>
</svg> </svg>
<span className="text-sm font-medium">{t('auth.referralInvite')}</span> <span className="text-sm font-medium">{t('auth.referralInvite')}</span>
</div> </div>
@@ -267,25 +295,38 @@ export default function Login() {
{/* Check Email Screen */} {/* Check Email Screen */}
{registeredEmail ? ( {registeredEmail ? (
<div className="card text-center"> <div className="card text-center">
<div className="w-16 h-16 mx-auto mb-6 rounded-2xl bg-success-500/20 flex items-center justify-center"> <div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-success-500/20">
<svg className="w-8 h-8 text-success-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}> <svg
<path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /> className="h-8 w-8 text-success-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={1.5}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
/>
</svg> </svg>
</div> </div>
<h2 className="text-xl font-bold text-dark-50 mb-2"> <h2 className="mb-2 text-xl font-bold text-dark-50">
{t('auth.checkEmail', 'Check your email')} {t('auth.checkEmail', 'Check your email')}
</h2> </h2>
<p className="text-dark-400 mb-4"> <p className="mb-4 text-dark-400">
{t('auth.verificationSent', 'We sent a verification link to:')} {t('auth.verificationSent', 'We sent a verification link to:')}
</p> </p>
<p className="text-accent-400 font-medium mb-6">{registeredEmail}</p> <p className="mb-6 font-medium text-accent-400">{registeredEmail}</p>
<p className="text-sm text-dark-500 mb-6"> <p className="mb-6 text-sm text-dark-500">
{t('auth.clickLinkToVerify', 'Click the link in the email to verify your account and log in.')} {t(
'auth.clickLinkToVerify',
'Click the link in the email to verify your account and log in.',
)}
</p> </p>
<button <button
onClick={() => { onClick={() => {
setRegisteredEmail(null) setRegisteredEmail(null);
setAuthMode('login') setAuthMode('login');
}} }}
className="btn-secondary w-full" className="btn-secondary w-full"
> >
@@ -295,44 +336,62 @@ export default function Login() {
) : ( ) : (
/* Card */ /* Card */
<div className="card"> <div className="card">
{/* Tabs */}
{isEmailAuthEnabled ? (
<div className="mb-6 flex">
<button
className={`flex-1 border-b-2 py-3 text-sm font-medium transition-all ${
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 border-b-2 py-3 text-sm font-medium transition-all ${
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 border-b border-dark-700 pb-3">
<h2 className="text-center text-lg font-medium text-dark-200">Telegram</h2>
</div>
)}
{error && ( {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"> <div className="mb-6 rounded-xl border border-error-500/30 bg-error-500/10 px-4 py-3 text-sm text-error-400">
{error} {error}
</div> </div>
)} )}
{/* Telegram auth — always visible */} {activeTab === 'telegram' || !isEmailAuthEnabled ? (
<div className="space-y-6"> <div className="space-y-6">
<p className="text-center text-sm text-dark-400"> <p className="text-center text-sm text-dark-400">{t('auth.registerHint')}</p>
{t('auth.registerHint')}
</p>
{isLoading && isTelegramWebApp ? ( {isLoading && isTelegramWebApp ? (
<div className="text-center py-8"> <div className="py-8 text-center">
<div className="w-8 h-8 border-2 border-accent-500 border-t-transparent rounded-full animate-spin mx-auto mb-3" /> <div className="mx-auto mb-3 h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
<p className="text-sm text-dark-400">{t('auth.authenticating')}</p> <p className="text-sm text-dark-400">{t('auth.authenticating')}</p>
</div> </div>
) : ( ) : (
<TelegramLoginButton botUsername={botUsername} /> <TelegramLoginButton botUsername={botUsername} />
)} )}
</div> </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"> <div className="space-y-5">
{/* Login / Register toggle */} {/* Login / Register toggle */}
<div className="flex bg-dark-800 rounded-lg p-1"> <div className="flex rounded-lg bg-dark-800 p-1">
<button <button
type="button" type="button"
className={`flex-1 py-2 text-sm font-medium rounded-md transition-all ${ className={`flex-1 rounded-md py-2 text-sm font-medium transition-all ${
authMode === 'login' authMode === 'login'
? 'bg-accent-500 text-white' ? 'bg-accent-500 text-white'
: 'text-dark-400 hover:text-dark-200' : 'text-dark-400 hover:text-dark-200'
@@ -343,7 +402,7 @@ export default function Login() {
</button> </button>
<button <button
type="button" type="button"
className={`flex-1 py-2 text-sm font-medium rounded-md transition-all ${ className={`flex-1 rounded-md py-2 text-sm font-medium transition-all ${
authMode === 'register' authMode === 'register'
? 'bg-accent-500 text-white' ? 'bg-accent-500 text-white'
: 'text-dark-400 hover:text-dark-200' : 'text-dark-400 hover:text-dark-200'
@@ -428,18 +487,16 @@ export default function Login() {
</div> </div>
)} )}
<button <button type="submit" disabled={isLoading} className="btn-primary w-full py-3">
type="submit"
disabled={isLoading}
className="btn-primary w-full py-3"
>
{isLoading ? ( {isLoading ? (
<span className="flex items-center justify-center gap-2"> <span className="flex items-center justify-center gap-2">
<span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
{t('common.loading')} {t('common.loading')}
</span> </span>
) : authMode === 'login' ? (
t('auth.login')
) : ( ) : (
authMode === 'login' ? t('auth.login') : t('auth.register', 'Register') t('auth.register', 'Register')
)} )}
</button> </button>
</form> </form>
@@ -447,24 +504,26 @@ export default function Login() {
{/* Verification notice for registration */} {/* Verification notice for registration */}
{authMode === 'register' && ( {authMode === 'register' && (
<p className="text-center text-xs text-dark-500"> <p className="text-center text-xs text-dark-500">
{t('auth.verificationEmailNotice', 'After registration, a verification email will be sent to your address')} {t(
'auth.verificationEmailNotice',
'After registration, a verification email will be sent to your address',
)}
</p> </p>
)} )}
{/* Forgot password link - only for login */} {/* Forgot password link - only for login */}
{authMode === 'login' && ( {authMode === 'login' && (
<div className="text-center space-y-2"> <div className="space-y-2 text-center">
<button <button
type="button" type="button"
onClick={() => setShowForgotPassword(true)} onClick={() => setShowForgotPassword(true)}
className="text-sm text-accent-400 hover:text-accent-300 transition-colors" className="text-sm text-accent-400 transition-colors hover:text-accent-300"
> >
{t('auth.forgotPassword', 'Forgot password?')} {t('auth.forgotPassword', 'Forgot password?')}
</button> </button>
</div> </div>
)} )}
</div> </div>
</>
)} )}
</div> </div>
)} )}
@@ -474,28 +533,47 @@ export default function Login() {
{showForgotPassword && ( {showForgotPassword && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4"> <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div className="absolute inset-0 bg-black/60" onClick={closeForgotPasswordModal} /> <div className="absolute inset-0 bg-black/60" onClick={closeForgotPasswordModal} />
<div className="relative bg-dark-900 rounded-2xl p-6 w-full max-w-md border border-dark-700"> <div className="relative w-full max-w-md rounded-2xl border border-dark-700 bg-dark-900 p-6">
<button <button
onClick={closeForgotPasswordModal} onClick={closeForgotPasswordModal}
className="absolute top-4 right-4 text-dark-400 hover:text-dark-200 transition-colors" className="absolute right-4 top-4 text-dark-400 transition-colors hover:text-dark-200"
>
<svg
className="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
> >
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg> </svg>
</button> </button>
{forgotPasswordSent ? ( {forgotPasswordSent ? (
<div className="text-center"> <div className="text-center">
<div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-success-500/20 flex items-center justify-center"> <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-success-500/20">
<svg className="w-8 h-8 text-success-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}> <svg
<path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /> className="h-8 w-8 text-success-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={1.5}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
/>
</svg> </svg>
</div> </div>
<h3 className="text-xl font-bold text-dark-50 mb-2"> <h3 className="mb-2 text-xl font-bold text-dark-50">
{t('auth.checkEmail', 'Check your email')} {t('auth.checkEmail', 'Check your email')}
</h3> </h3>
<p className="text-dark-400 mb-4"> <p className="mb-4 text-dark-400">
{t('auth.passwordResetSent', 'If an account exists with this email, we sent password reset instructions.')} {t(
'auth.passwordResetSent',
'If an account exists with this email, we sent password reset instructions.',
)}
</p> </p>
<button onClick={closeForgotPasswordModal} className="btn-primary w-full"> <button onClick={closeForgotPasswordModal} className="btn-primary w-full">
{t('common.close', 'Close')} {t('common.close', 'Close')}
@@ -503,16 +581,21 @@ export default function Login() {
</div> </div>
) : ( ) : (
<> <>
<h3 className="text-xl font-bold text-dark-50 mb-2"> <h3 className="mb-2 text-xl font-bold text-dark-50">
{t('auth.forgotPassword', 'Forgot password?')} {t('auth.forgotPassword', 'Forgot password?')}
</h3> </h3>
<p className="text-dark-400 mb-6"> <p className="mb-6 text-dark-400">
{t('auth.forgotPasswordHint', 'Enter your email and we will send you instructions to reset your password.')} {t(
'auth.forgotPasswordHint',
'Enter your email and we will send you instructions to reset your password.',
)}
</p> </p>
<form onSubmit={handleForgotPassword} className="space-y-4"> <form onSubmit={handleForgotPassword} className="space-y-4">
<div> <div>
<label htmlFor="forgotEmail" className="label">Email</label> <label htmlFor="forgotEmail" className="label">
Email
</label>
<input <input
id="forgotEmail" id="forgotEmail"
type="email" type="email"
@@ -525,7 +608,7 @@ export default function Login() {
</div> </div>
{forgotPasswordError && ( {forgotPasswordError && (
<div className="bg-error-500/10 border border-error-500/30 text-error-400 px-4 py-3 rounded-xl text-sm"> <div className="rounded-xl border border-error-500/30 bg-error-500/10 px-4 py-3 text-sm text-error-400">
{forgotPasswordError} {forgotPasswordError}
</div> </div>
)} )}
@@ -537,7 +620,7 @@ export default function Login() {
> >
{forgotPasswordLoading ? ( {forgotPasswordLoading ? (
<span className="flex items-center justify-center gap-2"> <span className="flex items-center justify-center gap-2">
<span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" /> <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
{t('common.loading')} {t('common.loading')}
</span> </span>
) : ( ) : (
@@ -551,5 +634,5 @@ export default function Login() {
</div> </div>
)} )}
</div> </div>
) );
} }