383 lines
11 KiB
TypeScript
383 lines
11 KiB
TypeScript
'use client'
|
||
|
||
import { useState, useEffect } from 'react'
|
||
import { useSearchParams } from 'next/navigation'
|
||
import { useI18n } from '@/lib/i18n'
|
||
|
||
interface User {
|
||
id: number
|
||
username: string
|
||
email: string
|
||
}
|
||
|
||
interface AuthModalProps {
|
||
isOpen: boolean
|
||
onClose: () => void
|
||
onLogin: (user: User) => void
|
||
}
|
||
|
||
export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps) {
|
||
const { t } = useI18n()
|
||
const searchParams = useSearchParams()
|
||
const [isLogin, setIsLogin] = useState(true)
|
||
const [username, setUsername] = useState('')
|
||
const [password, setPassword] = useState('')
|
||
const [email, setEmail] = useState('')
|
||
const [referralId, setReferralId] = useState('')
|
||
const [error, setError] = useState('')
|
||
const [loading, setLoading] = useState(false)
|
||
|
||
useEffect(() => {
|
||
if (isOpen) {
|
||
// Reset form when modal opens
|
||
setUsername('')
|
||
setPassword('')
|
||
setEmail('')
|
||
setError('')
|
||
setIsLogin(true)
|
||
|
||
// Auto-fill referral ID from URL if present
|
||
const refFromUrl = searchParams?.get('ref')
|
||
if (refFromUrl) {
|
||
setReferralId(refFromUrl)
|
||
} else {
|
||
setReferralId('')
|
||
}
|
||
}
|
||
}, [isOpen, searchParams])
|
||
|
||
// Update referral ID when switching to register mode and URL has ref parameter
|
||
useEffect(() => {
|
||
if (!isLogin) {
|
||
const refFromUrl = searchParams?.get('ref')
|
||
if (refFromUrl && !referralId) {
|
||
setReferralId(refFromUrl)
|
||
}
|
||
}
|
||
}, [isLogin, searchParams, referralId])
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
setError('')
|
||
setLoading(true)
|
||
|
||
try {
|
||
const endpoint = isLogin ? '/api/auth/login' : '/api/auth/register'
|
||
|
||
// Use referral ID from input field, or fall back to URL parameter
|
||
const referralIdToUse = !isLogin && referralId.trim()
|
||
? referralId.trim()
|
||
: (!isLogin ? searchParams?.get('ref') : null)
|
||
|
||
const body = isLogin
|
||
? { username, password }
|
||
: { username, password, email, referral_id: referralIdToUse }
|
||
|
||
const response = await fetch(endpoint, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(body),
|
||
credentials: 'include', // Important for cookies
|
||
})
|
||
|
||
const data = await response.json()
|
||
|
||
if (!response.ok) {
|
||
setError(data.error || t('auth.anErrorOccurred'))
|
||
setLoading(false)
|
||
return
|
||
}
|
||
|
||
// Success - call onLogin callback and close modal
|
||
onLogin(data.user)
|
||
onClose()
|
||
} catch (error) {
|
||
console.error('Auth error:', error)
|
||
setError(t('auth.unexpectedError'))
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
if (!isOpen) return null
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
position: 'fixed',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
background: 'rgba(0, 0, 0, 0.7)',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
zIndex: 1000,
|
||
padding: '20px',
|
||
}}
|
||
onClick={onClose}
|
||
>
|
||
<div
|
||
style={{
|
||
background: 'var(--card)',
|
||
borderRadius: '16px',
|
||
padding: '32px',
|
||
maxWidth: '400px',
|
||
width: '100%',
|
||
boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
|
||
}}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
|
||
<h2 style={{ margin: 0 }}>
|
||
{isLogin ? t('auth.login') : t('auth.register')}
|
||
</h2>
|
||
<button
|
||
onClick={onClose}
|
||
style={{
|
||
background: 'transparent',
|
||
border: 'none',
|
||
fontSize: '24px',
|
||
cursor: 'pointer',
|
||
color: 'var(--muted)',
|
||
padding: 0,
|
||
width: '32px',
|
||
height: '32px',
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
}}
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
<form onSubmit={handleSubmit}>
|
||
{!isLogin && (
|
||
<div style={{ marginBottom: '16px' }}>
|
||
<label
|
||
htmlFor="email"
|
||
style={{
|
||
display: 'block',
|
||
marginBottom: '8px',
|
||
fontSize: '14px',
|
||
color: 'var(--text)',
|
||
}}
|
||
>
|
||
{t('auth.email')}
|
||
</label>
|
||
<input
|
||
type="email"
|
||
id="email"
|
||
value={email}
|
||
onChange={(e) => setEmail(e.target.value)}
|
||
required
|
||
style={{
|
||
width: '100%',
|
||
padding: '12px',
|
||
borderRadius: '8px',
|
||
border: '1px solid var(--border)',
|
||
background: 'var(--bg-soft)',
|
||
color: 'var(--text)',
|
||
fontSize: '14px',
|
||
}}
|
||
placeholder={t('auth.email')}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
<div style={{ marginBottom: '16px' }}>
|
||
<label
|
||
htmlFor="username"
|
||
style={{
|
||
display: 'block',
|
||
marginBottom: '8px',
|
||
fontSize: '14px',
|
||
color: 'var(--text)',
|
||
}}
|
||
>
|
||
{t('auth.username')}
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="username"
|
||
value={username}
|
||
onChange={(e) => setUsername(e.target.value)}
|
||
required
|
||
minLength={isLogin ? undefined : 3}
|
||
style={{
|
||
width: '100%',
|
||
padding: '12px',
|
||
borderRadius: '8px',
|
||
border: '1px solid var(--border)',
|
||
background: 'var(--bg-soft)',
|
||
color: 'var(--text)',
|
||
fontSize: '14px',
|
||
}}
|
||
placeholder={t('auth.username')}
|
||
/>
|
||
</div>
|
||
|
||
<div style={{ marginBottom: '16px' }}>
|
||
<label
|
||
htmlFor="password"
|
||
style={{
|
||
display: 'block',
|
||
marginBottom: '8px',
|
||
fontSize: '14px',
|
||
color: 'var(--text)',
|
||
}}
|
||
>
|
||
{t('auth.password')}
|
||
</label>
|
||
<input
|
||
type="password"
|
||
id="password"
|
||
value={password}
|
||
onChange={(e) => setPassword(e.target.value)}
|
||
required
|
||
minLength={isLogin ? undefined : 6}
|
||
style={{
|
||
width: '100%',
|
||
padding: '12px',
|
||
borderRadius: '8px',
|
||
border: '1px solid var(--border)',
|
||
background: 'var(--bg-soft)',
|
||
color: 'var(--text)',
|
||
fontSize: '14px',
|
||
}}
|
||
placeholder={t('auth.password')}
|
||
/>
|
||
</div>
|
||
|
||
{!isLogin && (
|
||
<div style={{ marginBottom: '20px' }}>
|
||
<label
|
||
htmlFor="referralId"
|
||
style={{
|
||
display: 'block',
|
||
marginBottom: '8px',
|
||
fontSize: '14px',
|
||
color: 'var(--text)',
|
||
}}
|
||
>
|
||
{t('auth.referralId')} <span style={{ color: 'var(--muted)', fontSize: '12px', fontWeight: 'normal' }}>({t('auth.optional')})</span>
|
||
</label>
|
||
<input
|
||
type="text"
|
||
id="referralId"
|
||
value={referralId}
|
||
onChange={(e) => setReferralId(e.target.value)}
|
||
style={{
|
||
width: '100%',
|
||
padding: '12px',
|
||
borderRadius: '8px',
|
||
border: '1px solid var(--border)',
|
||
background: 'var(--bg-soft)',
|
||
color: 'var(--text)',
|
||
fontSize: '14px',
|
||
}}
|
||
placeholder={t('auth.referralId')}
|
||
/>
|
||
{searchParams?.get('ref') && referralId === searchParams.get('ref') && (
|
||
<small style={{ display: 'block', marginTop: '4px', fontSize: '12px', color: 'var(--accent)' }}>
|
||
{t('auth.autoFilled')}
|
||
</small>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{error && (
|
||
<div
|
||
style={{
|
||
padding: '12px',
|
||
background: 'rgba(255, 0, 0, 0.1)',
|
||
border: '1px solid rgba(255, 0, 0, 0.3)',
|
||
borderRadius: '8px',
|
||
color: '#ff4444',
|
||
fontSize: '14px',
|
||
marginBottom: '16px',
|
||
}}
|
||
>
|
||
{error}
|
||
</div>
|
||
)}
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={loading}
|
||
className="cta"
|
||
style={{
|
||
width: '100%',
|
||
padding: '12px',
|
||
cursor: loading ? 'not-allowed' : 'pointer',
|
||
opacity: loading ? 0.6 : 1,
|
||
}}
|
||
>
|
||
{loading
|
||
? t('common.processing')
|
||
: isLogin
|
||
? t('auth.login')
|
||
: t('auth.register')}
|
||
</button>
|
||
</form>
|
||
|
||
<div
|
||
style={{
|
||
marginTop: '20px',
|
||
textAlign: 'center',
|
||
fontSize: '14px',
|
||
color: 'var(--muted)',
|
||
}}
|
||
>
|
||
{isLogin ? (
|
||
<>
|
||
{t('auth.dontHaveAccount')}{' '}
|
||
<button
|
||
onClick={() => {
|
||
setIsLogin(false)
|
||
setError('')
|
||
}}
|
||
style={{
|
||
background: 'transparent',
|
||
border: 'none',
|
||
color: 'var(--accent)',
|
||
cursor: 'pointer',
|
||
textDecoration: 'underline',
|
||
padding: 0,
|
||
}}
|
||
>
|
||
{t('auth.register')}
|
||
</button>
|
||
</>
|
||
) : (
|
||
<>
|
||
{t('auth.alreadyHaveAccount')}{' '}
|
||
<button
|
||
onClick={() => {
|
||
setIsLogin(true)
|
||
setError('')
|
||
}}
|
||
style={{
|
||
background: 'transparent',
|
||
border: 'none',
|
||
color: 'var(--accent)',
|
||
cursor: 'pointer',
|
||
textDecoration: 'underline',
|
||
padding: 0,
|
||
}}
|
||
>
|
||
{t('auth.login')}
|
||
</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|