mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
Add files via upload
This commit is contained in:
Egor
GitHub
504
src/components/ChangeEmailModal.tsx
Normal file
504
src/components/ChangeEmailModal.tsx
Normal file
@@ -0,0 +1,504 @@
|
||||
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 { useAuthStore } from '../store/auth';
|
||||
import { useTelegramWebApp } from '../hooks/useTelegramWebApp';
|
||||
|
||||
// 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 = 60; // seconds
|
||||
|
||||
export default function ChangeEmailModal({ onClose, currentEmail }: ChangeEmailModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
const { setUser } = useAuthStore();
|
||||
const { isTelegramWebApp, safeAreaInset, contentSafeAreaInset, webApp } = useTelegramWebApp();
|
||||
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]);
|
||||
|
||||
// Telegram back button
|
||||
useEffect(() => {
|
||||
if (!webApp?.BackButton) return;
|
||||
webApp.BackButton.show();
|
||||
webApp.BackButton.onClick(handleClose);
|
||||
return () => {
|
||||
webApp.BackButton.offClick(handleClose);
|
||||
webApp.BackButton.hide();
|
||||
};
|
||||
}, [webApp, 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 validateEmail = (email: string): boolean => {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email.trim());
|
||||
};
|
||||
|
||||
const handleSendCode = () => {
|
||||
setError(null);
|
||||
if (!newEmail.trim()) {
|
||||
setError(t('profile.emailRequired'));
|
||||
return;
|
||||
}
|
||||
if (!validateEmail(newEmail)) {
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user