etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #213 from BEDOLAGA-DEV/dev

Browse Source 
Dev
This commit is contained in:
Egor
2026-02-11 06:10:33 +03:00
committed by GitHub
parent 75c830ad0b 2964236cdc
commit db1b7e7eea
5 changed files with 651 additions and 813 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/auth.ts
View File

@@ -138,7 +138,7 @@ export const authApi = {
provider: string,
): Promise<{ authorize_url: string; state: string }> => {
const response = await apiClient.get<{ authorize_url: string; state: string }>(
`/cabinet/auth/oauth/${provider}/authorize`,
`/cabinet/auth/oauth/${encodeURIComponent(provider)}/authorize`,
);
return response.data;
},
@@ -146,7 +146,7 @@ export const authApi = {
// OAuth: callback (exchange code for tokens)
oauthCallback: async (provider: string, code: string, state: string): Promise<AuthResponse> => {
const response = await apiClient.post<AuthResponse>(
`/cabinet/auth/oauth/${provider}/callback`,
`/cabinet/auth/oauth/${encodeURIComponent(provider)}/callback`,
{ code, state },
);
return response.data;

490
src/components/ChangeEmailModal.tsx
View File

@@ -1,490 +0,0 @@
import { useState, useRef, useEffect, useCallback } from 'react';
import { createPortal } from 'react-dom';
import { useTranslation } from 'react-i18next';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { authApi } from '../api/auth';
import { isValidEmail } from '../utils/validation';
import { UI } from '../config/constants';
import { useAuthStore } from '../store/auth';
import { useTelegramSDK } from '../hooks/useTelegramSDK';
// Icons
const CloseIcon = () => (
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
);
const EmailIcon = () => (
<svg className="h-6 w-6" 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>
);
const CheckIcon = () => (
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
);
interface ChangeEmailModalProps {
onClose: () => void;
currentEmail: string;
}
type Step = 'email' | 'code' | 'success';
function useIsMobile() {
const [isMobile, setIsMobile] = useState(() => {
if (typeof window === 'undefined') return false;
return window.innerWidth < 640;
});
useEffect(() => {
const check = () => setIsMobile(window.innerWidth < 640);
window.addEventListener('resize', check);
return () => window.removeEventListener('resize', check);
}, []);
return isMobile;
}
const RESEND_COOLDOWN = UI.RESEND_COOLDOWN_SEC;
export default function ChangeEmailModal({ onClose, currentEmail }: ChangeEmailModalProps) {
const { t } = useTranslation();
const queryClient = useQueryClient();
const { setUser } = useAuthStore();
const { isTelegramWebApp, safeAreaInset, contentSafeAreaInset } = useTelegramSDK();
const isMobileScreen = useIsMobile();
const emailInputRef = useRef<HTMLInputElement>(null);
const codeInputRef = useRef<HTMLInputElement>(null);
const [step, setStep] = useState<Step>('email');
const [newEmail, setNewEmail] = useState('');
const [code, setCode] = useState('');
const [error, setError] = useState<string | null>(null);
const [resendCooldown, setResendCooldown] = useState(0);
const safeBottom = isTelegramWebApp
? Math.max(safeAreaInset.bottom, contentSafeAreaInset.bottom)
: 0;
const handleClose = useCallback(() => {
onClose();
}, [onClose]);
// Keyboard: Escape to close
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
e.preventDefault();
handleClose();
}
};
document.addEventListener('keydown', handleKeyDown);
return () => document.removeEventListener('keydown', handleKeyDown);
}, [handleClose]);
// Scroll lock
useEffect(() => {
const scrollY = window.scrollY;
const preventScroll = (e: TouchEvent) => {
const target = e.target as HTMLElement;
if (target.closest('[data-modal-content]')) return;
e.preventDefault();
};
const preventWheel = (e: WheelEvent) => {
const target = e.target as HTMLElement;
if (target.closest('[data-modal-content]')) return;
e.preventDefault();
};
document.addEventListener('touchmove', preventScroll, { passive: false });
document.addEventListener('wheel', preventWheel, { passive: false });
document.body.style.overflow = 'hidden';
return () => {
document.removeEventListener('touchmove', preventScroll);
document.removeEventListener('wheel', preventWheel);
document.body.style.overflow = '';
window.scrollTo(0, scrollY);
};
}, []);
// Resend cooldown timer
useEffect(() => {
if (resendCooldown <= 0) return;
const timer = setInterval(() => {
setResendCooldown((prev) => Math.max(0, prev - 1));
}, 1000);
return () => clearInterval(timer);
}, [resendCooldown]);
// Auto-focus inputs
useEffect(() => {
const timer = setTimeout(() => {
if (step === 'email' && emailInputRef.current) {
emailInputRef.current.focus();
} else if (step === 'code' && codeInputRef.current) {
codeInputRef.current.focus();
}
}, 100);
return () => clearTimeout(timer);
}, [step]);
// Request email change mutation
const requestChangeMutation = useMutation({
mutationFn: (email: string) => authApi.requestEmailChange(email),
onSuccess: () => {
setError(null);
setStep('code');
setResendCooldown(RESEND_COOLDOWN);
},
onError: (err: { response?: { data?: { detail?: string } } }) => {
const detail = err.response?.data?.detail;
if (detail?.includes('already registered') || detail?.includes('already in use')) {
setError(t('profile.changeEmail.emailAlreadyUsed'));
} else if (detail?.includes('same as current')) {
setError(t('profile.changeEmail.sameEmail'));
} else if (detail?.includes('rate limit') || detail?.includes('too many')) {
setError(t('profile.changeEmail.tooManyRequests'));
} else {
setError(detail || t('common.error'));
}
},
});
// Verify code mutation
const verifyCodeMutation = useMutation({
mutationFn: (verificationCode: string) => authApi.verifyEmailChange(verificationCode),
onSuccess: async () => {
setError(null);
setStep('success');
// Refresh user data
const updatedUser = await authApi.getMe();
setUser(updatedUser);
queryClient.invalidateQueries({ queryKey: ['user'] });
},
onError: (err: { response?: { data?: { detail?: string } } }) => {
const detail = err.response?.data?.detail;
if (detail?.includes('invalid') || detail?.includes('wrong')) {
setError(t('profile.changeEmail.invalidCode'));
} else if (detail?.includes('expired')) {
setError(t('profile.changeEmail.codeExpired'));
} else {
setError(detail || t('common.error'));
}
},
});
const handleSendCode = () => {
setError(null);
if (!newEmail.trim()) {
setError(t('profile.emailRequired'));
return;
}
if (!isValidEmail(newEmail.trim())) {
setError(t('profile.invalidEmail'));
return;
}
if (newEmail.toLowerCase().trim() === currentEmail.toLowerCase()) {
setError(t('profile.changeEmail.sameEmail'));
return;
}
requestChangeMutation.mutate(newEmail.trim());
};
const handleVerifyCode = () => {
setError(null);
if (!code.trim()) {
setError(t('profile.changeEmail.enterCode'));
return;
}
if (code.trim().length < 4) {
setError(t('profile.changeEmail.invalidCode'));
return;
}
verifyCodeMutation.mutate(code.trim());
};
const handleResendCode = () => {
if (resendCooldown > 0) return;
requestChangeMutation.mutate(newEmail.trim());
};
const handleBack = () => {
setStep('email');
setCode('');
setError(null);
};
const isPending = requestChangeMutation.isPending || verifyCodeMutation.isPending;
// Content JSX
const contentJSX = (
<div className="space-y-5">
{/* Header icon */}
<div className="flex items-center gap-4 pb-1">
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-accent-500/20 to-accent-600/20 text-accent-400">
<EmailIcon />
</div>
<div className="flex-1">
<h3 className="text-lg font-bold text-dark-100">{t('profile.changeEmail.title')}</h3>
<p className="text-sm text-dark-400">
{step === 'email' && t('profile.changeEmail.description')}
{step === 'code' && t('profile.changeEmail.enterCodeDescription')}
{step === 'success' && t('profile.changeEmail.successDescription')}
</p>
</div>
</div>
{/* Current email display */}
{step === 'email' && (
<div className="rounded-xl border border-dark-700/50 bg-dark-800/50 p-4">
<p className="text-xs text-dark-500">{t('profile.changeEmail.currentEmail')}</p>
<p className="mt-1 font-medium text-dark-200">{currentEmail}</p>
</div>
)}
{/* Email input step */}
{step === 'email' && (
<div className="space-y-4">
<div>
<label className="mb-2 block text-sm font-medium text-dark-400">
{t('profile.changeEmail.newEmail')}
</label>
<input
ref={emailInputRef}
type="email"
value={newEmail}
onChange={(e) => setNewEmail(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
handleSendCode();
}
}}
placeholder="new@email.com"
className="input w-full"
autoComplete="email"
autoFocus
/>
</div>
<button
type="button"
onClick={handleSendCode}
disabled={isPending || !newEmail.trim()}
className="btn-primary w-full"
>
{requestChangeMutation.isPending ? (
<span className="flex items-center justify-center gap-2">
<span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
{t('common.loading')}
</span>
) : (
t('profile.changeEmail.sendCode')
)}
</button>
</div>
)}
{/* Code verification step */}
{step === 'code' && (
<div className="space-y-4">
<div className="rounded-xl border border-accent-500/30 bg-accent-500/10 p-4">
<p className="text-sm text-accent-400">
{t('profile.changeEmail.codeSentTo', { email: newEmail })}
</p>
</div>
<div>
<label className="mb-2 block text-sm font-medium text-dark-400">
{t('profile.changeEmail.verificationCode')}
</label>
<input
ref={codeInputRef}
type="text"
inputMode="numeric"
value={code}
onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
handleVerifyCode();
}
}}
placeholder="000000"
maxLength={6}
className="input w-full text-center text-2xl tracking-[0.5em]"
autoComplete="one-time-code"
autoFocus
/>
</div>
<button
type="button"
onClick={handleVerifyCode}
disabled={isPending || !code.trim()}
className="btn-primary w-full"
>
{verifyCodeMutation.isPending ? (
<span className="flex items-center justify-center gap-2">
<span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
{t('common.loading')}
</span>
) : (
t('profile.changeEmail.verify')
)}
</button>
<div className="flex items-center justify-between">
<button
type="button"
onClick={handleBack}
className="text-sm text-dark-400 hover:text-dark-200"
>
{t('common.back')}
</button>
<button
type="button"
onClick={handleResendCode}
disabled={resendCooldown > 0 || requestChangeMutation.isPending}
className={`text-sm ${
resendCooldown > 0 ? 'text-dark-500' : 'text-accent-400 hover:text-accent-300'
}`}
>
{resendCooldown > 0
? t('profile.changeEmail.resendIn', { seconds: resendCooldown })
: t('profile.changeEmail.resendCode')}
</button>
</div>
</div>
)}
{/* Success step */}
{step === 'success' && (
<div className="space-y-4">
<div className="flex flex-col items-center rounded-xl border border-success-500/30 bg-success-500/10 p-6">
<div className="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-success-500/20">
<CheckIcon />
</div>
<p className="text-center font-medium text-success-400">
{t('profile.changeEmail.success')}
</p>
<p className="mt-1 text-center text-sm text-dark-400">{newEmail}</p>
</div>
<button type="button" onClick={handleClose} className="btn-primary w-full">
{t('common.close')}
</button>
</div>
)}
{/* Error message */}
{error && (
<div className="flex items-center gap-2 rounded-xl border border-error-500/20 bg-error-500/10 p-3">
<svg
className="h-5 w-5 shrink-0 text-error-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<span className="text-sm text-error-400">{error}</span>
</div>
)}
</div>
);
// Render modal based on screen size
const modalContent = isMobileScreen ? (
<>
{/* Backdrop */}
<div className="fixed inset-0 z-[9998] bg-black/70" onClick={handleClose} />
{/* Bottom sheet */}
<div
data-modal-content
className="fixed inset-x-0 bottom-0 z-[9999] flex max-h-[90vh] flex-col overflow-hidden rounded-t-3xl bg-dark-900"
style={{
paddingBottom: safeBottom
? `${safeBottom + 20}px`
: 'max(20px, env(safe-area-inset-bottom))',
}}
onClick={(e) => e.stopPropagation()}
>
{/* Handle bar */}
<div className="flex justify-center pb-1 pt-3">
<div className="h-1 w-10 rounded-full bg-dark-600" />
</div>
{/* Header */}
<div className="flex items-center justify-between px-5 py-2">
<div className="flex items-center gap-2">
<EmailIcon />
<span className="text-lg font-bold text-dark-100">
{t('profile.changeEmail.title')}
</span>
</div>
<button
onClick={handleClose}
className="-mr-2 rounded-xl p-2 text-dark-400 transition-colors hover:bg-dark-800"
>
<CloseIcon />
</button>
</div>
{/* Divider */}
<div className="mx-5 h-px bg-gradient-to-r from-transparent via-dark-700 to-transparent" />
{/* Content */}
<div className="overflow-y-auto px-5 py-5">{contentJSX}</div>
</div>
</>
) : (
<div
className="fixed inset-0 z-[60] flex items-start justify-center p-4 pt-[10vh]"
onClick={handleClose}
>
<div
data-modal-content
className="w-full max-w-md overflow-hidden rounded-3xl border border-dark-700/50 bg-dark-900 shadow-2xl"
onClick={(e) => e.stopPropagation()}
>
{/* Header */}
<div className="flex items-center justify-between border-b border-dark-700/50 bg-gradient-to-r from-dark-800/80 to-dark-800/40 px-6 py-4">
<div className="flex items-center gap-3">
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-accent-500/10 text-accent-400">
<EmailIcon />
</div>
<span className="text-lg font-bold text-dark-100">
{t('profile.changeEmail.title')}
</span>
</div>
<button
onClick={handleClose}
className="-mr-1 rounded-xl p-2 text-dark-400 transition-colors hover:bg-dark-700"
>
<CloseIcon />
</button>
</div>
{/* Content */}
<div className="p-6">{contentJSX}</div>
</div>
</div>
);
if (typeof document !== 'undefined') {
return createPortal(modalContent, document.body);
}
return modalContent;
}

629
src/pages/Login.tsx
View File

@@ -15,7 +15,7 @@ import {
type EmailAuthEnabled,
} from '../api/branding';
import { getAndClearReturnUrl } from '../utils/token';
import { isInTelegramWebApp, getTelegramInitData } from '../hooks/useTelegramSDK';
import { isInTelegramWebApp, getTelegramInitData, useTelegramSDK } from '../hooks/useTelegramSDK';
import LanguageSwitcher from '../components/LanguageSwitcher';
import TelegramLoginButton from '../components/TelegramLoginButton';
import OAuthProviderIcon from '../components/OAuthProviderIcon';
@@ -54,6 +54,12 @@ export default function Login() {
const [forgotPasswordSent, setForgotPasswordSent] = useState(false);
const [forgotPasswordLoading, setForgotPasswordLoading] = useState(false);
const [forgotPasswordError, setForgotPasswordError] = useState('');
const [showEmailForm, setShowEmailForm] = useState(() => !!referralCode);
// Telegram safe area insets
const { safeAreaInset, contentSafeAreaInset } = useTelegramSDK();
const safeTop = Math.max(safeAreaInset.top, contentSafeAreaInset.top);
const safeBottom = Math.max(safeAreaInset.bottom, contentSafeAreaInset.bottom);
// Получаем URL для возврата после авторизации
const getReturnUrl = useCallback(() => {
@@ -100,7 +106,7 @@ export default function Login() {
queryFn: authApi.getOAuthProviders,
staleTime: 60000,
});
const oauthProviders = oauthData?.providers ?? [];
const oauthProviders = Array.isArray(oauthData?.providers) ? oauthData.providers : [];
const [oauthLoading, setOauthLoading] = useState<string | null>(null);
@@ -109,6 +115,17 @@ export default function Login() {
setOauthLoading(provider);
try {
const { authorize_url, state } = await authApi.getOAuthAuthorizeUrl(provider);
// Validate redirect URL — only allow HTTPS to prevent open redirect
try {
const parsed = new URL(authorize_url);
if (parsed.protocol !== 'https:') {
throw new Error('Invalid OAuth redirect URL');
}
} catch {
throw new Error('Invalid OAuth redirect URL');
}
saveOAuthState(state, provider);
window.location.href = authorize_url;
} catch {
@@ -122,7 +139,7 @@ export default function Login() {
// If email auth is disabled but user came with ref param, redirect to bot
useEffect(() => {
if (referralCode && emailAuthConfig?.enabled === false && botUsername) {
window.location.href = `https://t.me/${botUsername}?start=${referralCode}`;
window.location.href = `https://t.me/${botUsername}?start=${encodeURIComponent(referralCode)}`;
}
}, [referralCode, emailAuthConfig, botUsername]);
@@ -165,7 +182,8 @@ export default function Login() {
const error = err as { response?: { status?: number; data?: { detail?: string } } };
const status = error.response?.status;
const detail = error.response?.data?.detail;
console.warn(`Telegram auth attempt ${attempt + 1} failed:`, status, detail);
if (import.meta.env.DEV)
console.warn(`Telegram auth attempt ${attempt + 1} failed:`, status, detail);
if (status === 401 && attempt < MAX_RETRIES) {
await new Promise((r) => setTimeout(r, 1500));
@@ -200,7 +218,7 @@ export default function Login() {
const error = err as { response?: { status?: number; data?: { detail?: string } } };
const status = error.response?.status;
const detail = error.response?.data?.detail;
console.warn('Telegram auth retry failed:', status, detail);
if (import.meta.env.DEV) console.warn('Telegram auth retry failed:', status, detail);
setError(
detail ||
t('auth.telegramRetryFailed', 'Authorization failed. Close the app and try again.'),
@@ -301,45 +319,57 @@ export default function Login() {
};
return (
<div className="flex min-h-screen items-center justify-center px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
<div
className="flex min-h-[100dvh] items-center justify-center px-4 sm:px-6 lg:px-8"
style={{
paddingTop:
safeTop > 0 ? `${safeTop + 16}px` : 'calc(1rem + env(safe-area-inset-top, 0px))',
paddingBottom:
safeBottom > 0 ? `${safeBottom + 16}px` : 'calc(1rem + env(safe-area-inset-bottom, 0px))',
}}
>
{/* 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-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-accent-500/10 via-transparent to-transparent" />
{/* Language switcher */}
<div className="fixed right-4 top-4 z-50">
<div
className="fixed right-3 z-50"
style={{
top: safeTop > 0 ? `${safeTop + 12}px` : 'calc(12px + env(safe-area-inset-top, 0px))',
}}
>
<LanguageSwitcher />
</div>
<div className="relative w-full max-w-md space-y-8">
{/* Logo */}
<div className="relative w-full max-w-md space-y-5">
{/* Logo & branding */}
<div className="text-center">
<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 */}
<div className="relative mx-auto mb-3 flex h-12 w-12 items-center justify-center overflow-hidden rounded-xl border border-dark-700/50 bg-dark-800/80 shadow-md">
{/* Letter fallback */}
<span
className={`absolute text-2xl font-bold text-white transition-opacity duration-200 ${branding?.has_custom_logo && logoLoaded ? 'opacity-0' : 'opacity-100'}`}
className={`absolute text-lg font-bold text-accent-400 transition-opacity duration-200 ${branding?.has_custom_logo && logoLoaded ? 'opacity-0' : 'opacity-100'}`}
>
{appLogo}
</span>
{/* Logo image with smooth fade-in */}
{/* Logo image */}
{branding?.has_custom_logo && logoUrl && (
<img
src={logoUrl}
alt={appName || 'Logo'}
className={`absolute h-full w-full object-cover transition-opacity duration-200 ${logoLoaded ? 'opacity-100' : 'opacity-0'}`}
className={`absolute h-full w-full object-contain transition-opacity duration-200 ${logoLoaded ? 'opacity-100' : 'opacity-0'}`}
onLoad={() => setLogoLoaded(true)}
/>
)}
</div>
{appName && <h1 className="text-3xl font-bold text-dark-50">{appName}</h1>}
<p className="mt-2 text-dark-400">{t('auth.loginSubtitle')}</p>
{appName && <h1 className="text-2xl font-bold text-dark-50">{appName}</h1>}
{/* Referral Banner - only show when email auth is enabled */}
{/* Referral Banner */}
{referralCode && isEmailAuthEnabled && (
<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="mt-3 rounded-xl border border-accent-500/30 bg-accent-500/10 p-2.5">
<div className="flex items-center justify-center gap-2 text-accent-400">
<svg
className="h-5 w-5 flex-shrink-0"
className="h-4 w-4 flex-shrink-0"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -351,7 +381,7 @@ export default function Login() {
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>
<span className="text-sm font-medium">{t('auth.referralInvite')}</span>
<span className="text-xs font-medium">{t('auth.referralInvite')}</span>
</div>
</div>
)}
@@ -360,9 +390,9 @@ export default function Login() {
{/* Check Email Screen */}
{registeredEmail ? (
<div className="card text-center">
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-2xl bg-success-500/20">
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-success-500/20">
<svg
className="h-8 w-8 text-success-400"
className="h-7 w-7 text-success-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -375,14 +405,14 @@ export default function Login() {
/>
</svg>
</div>
<h2 className="mb-2 text-xl font-bold text-dark-50">
<h2 className="mb-2 text-lg font-bold text-dark-50">
{t('auth.checkEmail', 'Check your email')}
</h2>
<p className="mb-4 text-dark-400">
<p className="mb-3 text-sm text-dark-400">
{t('auth.verificationSent', 'We sent a verification link to:')}
</p>
<p className="mb-6 font-medium text-accent-400">{registeredEmail}</p>
<p className="mb-6 text-sm text-dark-500">
<p className="mb-4 text-sm font-medium text-accent-400">{registeredEmail}</p>
<p className="mb-5 text-xs text-dark-500">
{t(
'auth.clickLinkToVerify',
'Click the link in the email to verify your account and log in.',
@@ -399,31 +429,29 @@ export default function Login() {
</button>
</div>
) : (
/* Card */
/* Main auth card */
<div className="card">
{error && (
<div className="mb-6 rounded-xl border border-error-500/30 bg-error-500/10 px-4 py-3 text-sm text-error-400">
<div className="mb-4 rounded-xl border border-error-500/30 bg-error-500/10 px-4 py-2.5 text-sm text-error-400">
{error}
</div>
)}
{/* Telegram auth section */}
<div className="space-y-6">
<p className="text-center text-sm text-dark-400">{t('auth.registerHint')}</p>
<div className="space-y-3">
{isLoading && isTelegramWebApp ? (
<div className="py-8 text-center">
<div className="py-6 text-center">
<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>
</div>
) : isTelegramWebApp && error ? (
<div className="space-y-4 text-center">
<div className="space-y-3 text-center">
<button
onClick={handleRetryTelegramAuth}
className="btn-primary mx-auto flex items-center gap-2 px-6 py-3"
className="btn-primary mx-auto flex items-center gap-2 px-5 py-2.5"
>
<svg
className="h-5 w-5"
className="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -449,296 +477,325 @@ export default function Login() {
)}
</div>
{/* OAuth providers section */}
{/* OAuth providers - compact icon row */}
{oauthProviders.length > 0 && (
<>
<div className="my-6 flex items-center gap-3">
<div className="my-4 flex items-center gap-3">
<div className="h-px flex-1 bg-dark-700" />
<span className="text-xs text-dark-500">{t('auth.or', 'or')}</span>
<div className="h-px flex-1 bg-dark-700" />
</div>
<div className="space-y-3">
<div className="flex items-stretch gap-2">
{oauthProviders.map((provider) => (
<button
key={provider.name}
type="button"
onClick={() => handleOAuthLogin(provider.name)}
disabled={oauthLoading !== null}
className="hover:bg-dark-750 flex w-full items-center justify-center gap-3 rounded-xl border border-dark-700 bg-dark-800 px-4 py-3 text-sm font-medium text-dark-100 transition-colors hover:border-dark-600 disabled:opacity-50"
className="flex flex-1 flex-col items-center justify-center gap-1.5 rounded-xl border border-dark-700 bg-dark-800/80 py-2.5 transition-all hover:border-dark-600 hover:bg-dark-700 disabled:opacity-50"
title={provider.display_name}
>
{oauthLoading === provider.name ? (
<span className="h-5 w-5 animate-spin rounded-full border-2 border-dark-400 border-t-white" />
) : (
<OAuthProviderIcon provider={provider.name} className="h-5 w-5" />
)}
{t(
`auth.continueWith${provider.name.charAt(0).toUpperCase() + provider.name.slice(1)}`,
`Continue with ${provider.display_name}`,
)}
<span className="text-[10px] leading-none text-dark-500">
{provider.display_name}
</span>
</button>
))}
</div>
</>
)}
{/* Email auth section - only when enabled */}
{/* Email auth section - collapsible */}
{isEmailAuthEnabled && (
<>
{/* Divider */}
<div className="my-6 flex items-center gap-3">
<div className="my-4 flex items-center gap-3">
<div className="h-px flex-1 bg-dark-700" />
<span className="text-xs text-dark-500">{t('auth.or', 'or')}</span>
<button
type="button"
onClick={() => setShowEmailForm(!showEmailForm)}
className="flex items-center gap-1.5 rounded-full border border-dark-700 bg-dark-800/60 px-3.5 py-1.5 text-xs font-medium text-dark-300 transition-all hover:border-dark-600 hover:bg-dark-700 hover:text-dark-200"
>
<svg
className="h-3.5 w-3.5 text-dark-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>
<span>{t('auth.loginWithEmail')}</span>
<svg
className={`h-3 w-3 text-dark-400 transition-transform duration-300 ${showEmailForm ? 'rotate-180' : ''}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2.5}
>
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</button>
<div className="h-px flex-1 bg-dark-700" />
</div>
<div className="space-y-5">
{/* Login / Register toggle */}
<div className="flex rounded-lg bg-dark-800 p-1">
<button
type="button"
className={`flex-1 rounded-md py-2 text-sm font-medium transition-all ${
authMode === 'login'
? 'bg-accent-500 text-white'
: 'text-dark-400 hover:text-dark-200'
}`}
onClick={() => setAuthMode('login')}
>
{t('auth.login')}
</button>
<button
type="button"
className={`flex-1 rounded-md py-2 text-sm font-medium transition-all ${
authMode === 'register'
? 'bg-accent-500 text-white'
: 'text-dark-400 hover:text-dark-200'
}`}
onClick={() => setAuthMode('register')}
>
{t('auth.register', 'Register')}
</button>
</div>
<form className="space-y-4" onSubmit={handleEmailSubmit}>
{/* First name field - only for registration */}
{authMode === 'register' && (
<div>
<label htmlFor="firstName" className="label">
{t('auth.firstName', 'First Name')}
</label>
<input
id="firstName"
name="firstName"
type="text"
autoComplete="given-name"
className="input"
placeholder={t('auth.firstNamePlaceholder', 'Your name (optional)')}
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
/>
</div>
)}
<div>
<label htmlFor="email" className="label">
{t('auth.email')}
</label>
<input
id="email"
name="email"
type="email"
autoComplete="email"
required
className="input"
placeholder="you@example.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div>
<label htmlFor="password" className="label">
{t('auth.password')}
</label>
<input
id="password"
name="password"
type="password"
autoComplete={authMode === 'login' ? 'current-password' : 'new-password'}
required
className="input"
placeholder="••••••••"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
{/* Confirm password - only for registration */}
{authMode === 'register' && (
<div>
<label htmlFor="confirmPassword" className="label">
{t('auth.confirmPassword', 'Confirm Password')}
</label>
<input
id="confirmPassword"
name="confirmPassword"
type="password"
autoComplete="new-password"
required
className="input"
placeholder="••••••••"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
/>
</div>
)}
<button type="submit" disabled={isLoading} className="btn-primary w-full py-3">
{isLoading ? (
<span className="flex items-center justify-center gap-2">
<span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
{t('common.loading')}
</span>
) : authMode === 'login' ? (
t('auth.login')
{/* Collapsible email form */}
<div
className={`grid transition-[grid-template-rows] duration-300 ease-in-out ${
showEmailForm ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
}`}
style={{ transform: 'translateZ(0)' }}
>
<div className="overflow-hidden">
<div className="space-y-4 pb-1 pt-1">
{showForgotPassword ? (
/* Forgot password screen - replaces login/register */
forgotPasswordSent ? (
<div className="space-y-4 text-center">
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-success-500/20">
<svg
className="h-6 w-6 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>
</div>
<p className="text-sm font-medium text-dark-100">
{t('auth.checkEmail', 'Check your email')}
</p>
<p className="text-xs text-dark-400">
{t(
'auth.passwordResetSent',
'If an account exists with this email, we sent password reset instructions.',
)}
</p>
<button
type="button"
onClick={closeForgotPasswordModal}
className="text-sm text-accent-400 transition-colors hover:text-accent-300"
>
{t('common.back', 'Back')}
</button>
</div>
) : (
<div className="space-y-4">
<p className="text-center text-sm text-dark-400">
{t(
'auth.forgotPasswordHint',
'Enter your email and we will send you instructions to reset your password.',
)}
</p>
<form onSubmit={handleForgotPassword} className="space-y-3">
<div>
<label htmlFor="forgotEmail" className="label">
Email
</label>
<input
id="forgotEmail"
type="email"
value={forgotPasswordEmail}
onChange={(e) => setForgotPasswordEmail(e.target.value)}
placeholder="you@example.com"
className="input"
autoFocus
/>
</div>
{forgotPasswordError && (
<p className="text-sm text-error-400">{forgotPasswordError}</p>
)}
<button
type="submit"
disabled={forgotPasswordLoading}
className="btn-primary w-full py-2.5"
>
{forgotPasswordLoading ? (
<span className="flex items-center justify-center gap-2">
<span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
{t('common.loading')}
</span>
) : (
t('auth.sendResetLink', 'Send reset link')
)}
</button>
</form>
<div className="text-center">
<button
type="button"
onClick={closeForgotPasswordModal}
className="text-sm text-dark-400 transition-colors hover:text-dark-200"
>
{t('common.back', 'Back')}
</button>
</div>
</div>
)
) : (
t('auth.register', 'Register')
)}
</button>
</form>
/* Normal login / register */
<>
<div className="flex rounded-lg bg-dark-800 p-1">
<button
type="button"
className={`flex-1 rounded-md py-2 text-sm font-medium transition-all ${
authMode === 'login'
? 'bg-accent-500 text-white'
: 'text-dark-400 hover:text-dark-200'
}`}
onClick={() => setAuthMode('login')}
>
{t('auth.login')}
</button>
<button
type="button"
className={`flex-1 rounded-md py-2 text-sm font-medium transition-all ${
authMode === 'register'
? 'bg-accent-500 text-white'
: 'text-dark-400 hover:text-dark-200'
}`}
onClick={() => setAuthMode('register')}
>
{t('auth.register', 'Register')}
</button>
</div>
{/* Verification notice for registration */}
{authMode === 'register' && (
<p className="text-center text-xs text-dark-500">
{t(
'auth.verificationEmailNotice',
'After registration, a verification email will be sent to your address',
)}
</p>
)}
<form className="space-y-3" onSubmit={handleEmailSubmit}>
{authMode === 'register' && (
<div>
<label htmlFor="firstName" className="label">
{t('auth.firstName', 'First Name')}
</label>
<input
id="firstName"
name="firstName"
type="text"
autoComplete="given-name"
className="input"
placeholder={t(
'auth.firstNamePlaceholder',
'Your name (optional)',
)}
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
/>
</div>
)}
{/* Forgot password link - only for login */}
{authMode === 'login' && (
<div className="space-y-2 text-center">
<button
type="button"
onClick={() => setShowForgotPassword(true)}
className="text-sm text-accent-400 transition-colors hover:text-accent-300"
>
{t('auth.forgotPassword', 'Forgot password?')}
</button>
<div>
<label htmlFor="email" className="label">
{t('auth.email')}
</label>
<input
id="email"
name="email"
type="email"
autoComplete="email"
required
className="input"
placeholder="you@example.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div>
<label htmlFor="password" className="label">
{t('auth.password')}
</label>
<input
id="password"
name="password"
type="password"
autoComplete={
authMode === 'login' ? 'current-password' : 'new-password'
}
required
className="input"
placeholder="••••••••"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
{authMode === 'register' && (
<div>
<label htmlFor="confirmPassword" className="label">
{t('auth.confirmPassword', 'Confirm Password')}
</label>
<input
id="confirmPassword"
name="confirmPassword"
type="password"
autoComplete="new-password"
required
className="input"
placeholder="••••••••"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
/>
</div>
)}
<button
type="submit"
disabled={isLoading}
className="btn-primary w-full py-2.5"
>
{isLoading ? (
<span className="flex items-center justify-center gap-2">
<span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
{t('common.loading')}
</span>
) : authMode === 'login' ? (
t('auth.login')
) : (
t('auth.register', 'Register')
)}
</button>
</form>
{authMode === 'register' && (
<p className="text-center text-xs text-dark-500">
{t(
'auth.verificationEmailNotice',
'After registration, a verification email will be sent to your address',
)}
</p>
)}
{authMode === 'login' && (
<div className="text-center">
<button
type="button"
onClick={() => setShowForgotPassword(true)}
className="text-sm text-accent-400 transition-colors hover:text-accent-300"
>
{t('auth.forgotPassword', 'Forgot password?')}
</button>
</div>
)}
</>
)}
</div>
)}
</div>
</div>
</>
)}
</div>
)}
</div>
{/* Forgot Password Modal */}
{showForgotPassword && (
<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="relative w-full max-w-md rounded-2xl border border-dark-700 bg-dark-900 p-6">
<button
onClick={closeForgotPasswordModal}
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}
>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
{forgotPasswordSent ? (
<div className="text-center">
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-success-500/20">
<svg
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>
</div>
<h3 className="mb-2 text-xl font-bold text-dark-50">
{t('auth.checkEmail', 'Check your email')}
</h3>
<p className="mb-4 text-dark-400">
{t(
'auth.passwordResetSent',
'If an account exists with this email, we sent password reset instructions.',
)}
</p>
<button onClick={closeForgotPasswordModal} className="btn-primary w-full">
{t('common.close', 'Close')}
</button>
</div>
) : (
<>
<h3 className="mb-2 text-xl font-bold text-dark-50">
{t('auth.forgotPassword', 'Forgot password?')}
</h3>
<p className="mb-6 text-dark-400">
{t(
'auth.forgotPasswordHint',
'Enter your email and we will send you instructions to reset your password.',
)}
</p>
<form onSubmit={handleForgotPassword} className="space-y-4">
<div>
<label htmlFor="forgotEmail" className="label">
Email
</label>
<input
id="forgotEmail"
type="email"
value={forgotPasswordEmail}
onChange={(e) => setForgotPasswordEmail(e.target.value)}
placeholder="you@example.com"
className="input"
autoFocus
/>
</div>
{forgotPasswordError && (
<div className="rounded-xl border border-error-500/30 bg-error-500/10 px-4 py-3 text-sm text-error-400">
{forgotPasswordError}
</div>
)}
<button
type="submit"
disabled={forgotPasswordLoading}
className="btn-primary w-full"
>
{forgotPasswordLoading ? (
<span className="flex items-center justify-center gap-2">
<span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
{t('common.loading')}
</span>
) : (
t('auth.sendResetLink', 'Send reset link')
)}
</button>
</form>
</>
)}
</div>
</div>
)}
</div>
);
}

321
src/pages/Profile.tsx
View File

@@ -1,8 +1,8 @@
import { useState } from 'react';
import { useState, useRef, useEffect } from 'react';
import { Link } from 'react-router';
import { useTranslation } from 'react-i18next';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { motion } from 'framer-motion';
import { motion, AnimatePresence } from 'framer-motion';
import { useAuthStore } from '../store/auth';
import { authApi } from '../api/auth';
import { isValidEmail } from '../utils/validation';
@@ -13,7 +13,7 @@ import {
} from '../api/notifications';
import { referralApi } from '../api/referral';
import { brandingApi, type EmailAuthEnabled } from '../api/branding';
import ChangeEmailModal from '../components/ChangeEmailModal';
import { UI } from '../config/constants';
import { Card } from '@/components/data-display/Card';
import { Button } from '@/components/primitives/Button';
import { Switch } from '@/components/primitives/Switch';
@@ -70,7 +70,15 @@ export default function Profile() {
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState<string | null>(null);
const [copied, setCopied] = useState(false);
const [showChangeEmailModal, setShowChangeEmailModal] = useState(false);
// Inline email change flow
const [changeEmailStep, setChangeEmailStep] = useState<'email' | 'code' | 'success' | null>(null);
const [newEmail, setNewEmail] = useState('');
const [changeCode, setChangeCode] = useState('');
const [changeError, setChangeError] = useState<string | null>(null);
const [resendCooldown, setResendCooldown] = useState(0);
const newEmailInputRef = useRef<HTMLInputElement>(null);
const codeInputRef = useRef<HTMLInputElement>(null);
// Referral data
const { data: referralInfo } = useQuery({
@@ -170,6 +178,117 @@ export default function Profile() {
},
});
// Email change mutations
const requestEmailChangeMutation = useMutation({
mutationFn: (emailAddr: string) => authApi.requestEmailChange(emailAddr),
onSuccess: () => {
setChangeError(null);
setChangeEmailStep('code');
setResendCooldown(UI.RESEND_COOLDOWN_SEC);
},
onError: (err: { response?: { data?: { detail?: string } } }) => {
const detail = err.response?.data?.detail;
if (detail?.includes('already registered') || detail?.includes('already in use')) {
setChangeError(t('profile.changeEmail.emailAlreadyUsed'));
} else if (detail?.includes('same as current')) {
setChangeError(t('profile.changeEmail.sameEmail'));
} else if (detail?.includes('rate limit') || detail?.includes('too many')) {
setChangeError(t('profile.changeEmail.tooManyRequests'));
} else {
setChangeError(detail || t('common.error'));
}
},
});
const verifyEmailChangeMutation = useMutation({
mutationFn: (verificationCode: string) => authApi.verifyEmailChange(verificationCode),
onSuccess: async () => {
setChangeError(null);
setChangeEmailStep('success');
const updatedUser = await authApi.getMe();
setUser(updatedUser);
queryClient.invalidateQueries({ queryKey: ['user'] });
},
onError: (err: { response?: { data?: { detail?: string } } }) => {
const detail = err.response?.data?.detail;
if (detail?.includes('invalid') || detail?.includes('wrong')) {
setChangeError(t('profile.changeEmail.invalidCode'));
} else if (detail?.includes('expired')) {
setChangeError(t('profile.changeEmail.codeExpired'));
} else {
setChangeError(detail || t('common.error'));
}
},
});
// Resend cooldown timer
useEffect(() => {
if (resendCooldown <= 0) return;
const timer = setInterval(() => {
setResendCooldown((prev) => Math.max(0, prev - 1));
}, 1000);
return () => clearInterval(timer);
}, [resendCooldown]);
// Auto-focus inputs on step change
useEffect(() => {
const timer = setTimeout(() => {
if (changeEmailStep === 'email') newEmailInputRef.current?.focus();
else if (changeEmailStep === 'code') codeInputRef.current?.focus();
}, 100);
return () => clearTimeout(timer);
}, [changeEmailStep]);
// Auto-close success after 3s
useEffect(() => {
if (changeEmailStep !== 'success') return;
const timer = setTimeout(() => resetChangeEmail(), 3000);
return () => clearTimeout(timer);
}, [changeEmailStep]);
const resetChangeEmail = () => {
setChangeEmailStep(null);
setNewEmail('');
setChangeCode('');
setChangeError(null);
setResendCooldown(0);
};
const handleSendChangeCode = () => {
setChangeError(null);
if (!newEmail.trim()) {
setChangeError(t('profile.emailRequired'));
return;
}
if (!isValidEmail(newEmail.trim())) {
setChangeError(t('profile.invalidEmail'));
return;
}
if (user?.email && newEmail.toLowerCase().trim() === user.email.toLowerCase()) {
setChangeError(t('profile.changeEmail.sameEmail'));
return;
}
requestEmailChangeMutation.mutate(newEmail.trim());
};
const handleVerifyChangeCode = () => {
setChangeError(null);
if (!changeCode.trim()) {
setChangeError(t('profile.changeEmail.enterCode'));
return;
}
if (changeCode.trim().length < 4) {
setChangeError(t('profile.changeEmail.invalidCode'));
return;
}
verifyEmailChangeMutation.mutate(changeCode.trim());
};
const handleResendChangeCode = () => {
if (resendCooldown > 0) return;
requestEmailChangeMutation.mutate(newEmail.trim());
};
const { data: notificationSettings, isLoading: notificationsLoading } = useQuery({
queryKey: ['notification-settings'],
queryFn: notificationsApi.getSettings,
@@ -324,27 +443,179 @@ export default function Profile() {
<p className="mb-4 text-sm text-warning-400">
{t('profile.verificationRequired')}
</p>
<Button
onClick={() => resendVerificationMutation.mutate()}
loading={resendVerificationMutation.isPending}
>
{t('profile.resendVerification')}
</Button>
<div className="flex items-center gap-3">
<Button
onClick={() => resendVerificationMutation.mutate()}
loading={resendVerificationMutation.isPending}
>
{t('profile.resendVerification')}
</Button>
{(user.auth_type === 'telegram' || user.auth_type === 'email') && (
<button
onClick={() => setChangeEmailStep('email')}
className="text-sm text-accent-400 transition-colors hover:text-accent-300"
>
{t('profile.changeEmail.button')}
</button>
)}
</div>
</div>
)}
{user.email_verified && (
<div className="flex items-center justify-between">
<p className="text-sm text-dark-400">{t('profile.canLoginWithEmail')}</p>
<button
onClick={() => setShowChangeEmailModal(true)}
className="flex items-center gap-2 text-sm text-accent-400 transition-colors hover:text-accent-300"
{user.email_verified &&
(user.auth_type === 'telegram' || user.auth_type === 'email') && (
<div className="flex items-center justify-between">
<p className="text-sm text-dark-400">{t('profile.canLoginWithEmail')}</p>
<button
onClick={() => setChangeEmailStep('email')}
className="flex items-center gap-2 text-sm text-accent-400 transition-colors hover:text-accent-300"
>
<PencilIcon />
<span>{t('profile.changeEmail.button')}</span>
</button>
</div>
)}
{/* Inline email change flow */}
<AnimatePresence>
{changeEmailStep === 'email' && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.2 }}
className="overflow-hidden"
>
<PencilIcon />
<span>{t('profile.changeEmail.button')}</span>
</button>
</div>
)}
<div className="space-y-3 border-t border-dark-800/50 pt-4">
<label className="block text-sm font-medium text-dark-400">
{t('profile.changeEmail.newEmail')}
</label>
<input
ref={newEmailInputRef}
type="email"
value={newEmail}
onChange={(e) => setNewEmail(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
handleSendChangeCode();
}
}}
placeholder="new@email.com"
className="input w-full"
autoComplete="email"
/>
{changeError && <p className="text-sm text-error-400">{changeError}</p>}
<div className="flex items-center gap-3">
<Button
onClick={handleSendChangeCode}
loading={requestEmailChangeMutation.isPending}
disabled={!newEmail.trim()}
>
{t('profile.changeEmail.sendCode')}
</Button>
<button
onClick={resetChangeEmail}
className="text-sm text-dark-400 hover:text-dark-200"
>
{t('common.cancel')}
</button>
</div>
</div>
</motion.div>
)}
{changeEmailStep === 'code' && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.2 }}
className="overflow-hidden"
>
<div className="space-y-3 border-t border-dark-800/50 pt-4">
<div className="rounded-linear border border-accent-500/30 bg-accent-500/10 p-3">
<p className="text-sm text-accent-400">
{t('profile.changeEmail.codeSentTo', { email: newEmail })}
</p>
</div>
<label className="block text-sm font-medium text-dark-400">
{t('profile.changeEmail.verificationCode')}
</label>
<input
ref={codeInputRef}
type="text"
inputMode="numeric"
value={changeCode}
onChange={(e) => setChangeCode(e.target.value.replace(/\D/g, ''))}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
handleVerifyChangeCode();
}
}}
placeholder="000000"
maxLength={6}
className="input w-full text-center text-2xl tracking-[0.5em]"
autoComplete="one-time-code"
/>
{changeError && <p className="text-sm text-error-400">{changeError}</p>}
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Button
onClick={handleVerifyChangeCode}
loading={verifyEmailChangeMutation.isPending}
disabled={!changeCode.trim()}
>
{t('profile.changeEmail.verify')}
</Button>
<button
onClick={() => {
setChangeEmailStep('email');
setChangeCode('');
setChangeError(null);
}}
className="text-sm text-dark-400 hover:text-dark-200"
>
{t('common.back')}
</button>
</div>
<button
onClick={handleResendChangeCode}
disabled={resendCooldown > 0 || requestEmailChangeMutation.isPending}
className={`text-sm ${resendCooldown > 0 ? 'text-dark-500' : 'text-accent-400 hover:text-accent-300'}`}
>
{resendCooldown > 0
? t('profile.changeEmail.resendIn', { seconds: resendCooldown })
: t('profile.changeEmail.resendCode')}
</button>
</div>
</div>
</motion.div>
)}
{changeEmailStep === 'success' && (
<motion.div
initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }}
transition={{ duration: 0.2 }}
className="overflow-hidden"
>
<div className="border-t border-dark-800/50 pt-4">
<div className="flex items-center gap-3 rounded-linear border border-success-500/30 bg-success-500/10 p-4">
<CheckIcon />
<div>
<p className="font-medium text-success-400">
{t('profile.changeEmail.success')}
</p>
<p className="text-sm text-dark-400">{newEmail}</p>
</div>
</div>
</div>
</motion.div>
)}
</AnimatePresence>
</div>
) : (
<div>
@@ -586,14 +857,6 @@ export default function Profile() {
)}
</Card>
</motion.div>
{/* Change Email Modal */}
{showChangeEmailModal && user?.email && (
<ChangeEmailModal
onClose={() => setShowChangeEmailModal(false)}
currentEmail={user.email}
/>
)}
</motion.div>
);
}

20
src/pages/TopUpAmount.tsx
View File

@@ -87,7 +87,7 @@ export default function TopUpAmount() {
const queryClient = useQueryClient();
const { formatAmount, currencySymbol, convertAmount, convertToRub, targetCurrency } =
useCurrency();
const { openInvoice } = usePlatform();
const { openInvoice, openTelegramLink, openLink } = usePlatform();
const haptic = useHaptic();
const inputRef = useRef<HTMLInputElement>(null);
@@ -281,6 +281,15 @@ export default function TopUpAmount() {
: convertAmount(rub).toFixed(currencyDecimals);
const isPending = topUpMutation.isPending || starsPaymentMutation.isPending;
const handleOpenPayment = () => {
if (!paymentUrl) return;
if (paymentUrl.includes('t.me/')) {
openTelegramLink(paymentUrl);
} else {
openLink(paymentUrl);
}
};
const handleCopyUrl = async () => {
if (!paymentUrl) return;
try {
@@ -478,15 +487,14 @@ export default function TopUpAmount() {
<p className="text-sm text-dark-400">{t('balance.clickToOpenPayment')}</p>
<a
href={paymentUrl}
target="_blank"
rel="noopener noreferrer"
<button
type="button"
onClick={handleOpenPayment}
className="flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-success-500 font-bold text-white transition-colors hover:bg-success-400 active:bg-success-600"
>
<ExternalLinkIcon />
<span>{t('balance.openPaymentPage')}</span>
</a>
</button>
<div className="flex items-center gap-2">
<div className="min-w-0 flex-1 rounded-lg border border-dark-700/50 bg-dark-800/70 px-3 py-2">