This commit is contained in:
root
2025-12-22 06:43:19 +01:00
parent a940d51475
commit 6f4ca75faf
25 changed files with 1350 additions and 221 deletions

View File

@@ -2,6 +2,7 @@
import { useState, useEffect } from 'react'
import { useSearchParams } from 'next/navigation'
import { useI18n } from '@/lib/i18n'
interface User {
id: number
@@ -16,6 +17,7 @@ interface AuthModalProps {
}
export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps) {
const { t } = useI18n()
const searchParams = useSearchParams()
const [isLogin, setIsLogin] = useState(true)
const [username, setUsername] = useState('')
@@ -83,7 +85,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
const data = await response.json()
if (!response.ok) {
setError(data.error || 'An error occurred')
setError(data.error || t('auth.anErrorOccurred'))
setLoading(false)
return
}
@@ -93,7 +95,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
onClose()
} catch (error) {
console.error('Auth error:', error)
setError('An unexpected error occurred')
setError(t('auth.unexpectedError'))
} finally {
setLoading(false)
}
@@ -131,7 +133,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
<h2 style={{ margin: 0 }}>
{isLogin ? 'Login' : 'Register'}
{isLogin ? t('auth.login') : t('auth.register')}
</h2>
<button
onClick={onClose}
@@ -165,7 +167,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
color: 'var(--text)',
}}
>
Email
{t('auth.email')}
</label>
<input
type="email"
@@ -182,7 +184,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
color: 'var(--text)',
fontSize: '14px',
}}
placeholder="your@email.com"
placeholder={t('auth.email')}
/>
</div>
)}
@@ -197,7 +199,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
color: 'var(--text)',
}}
>
Username
{t('auth.username')}
</label>
<input
type="text"
@@ -215,7 +217,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
color: 'var(--text)',
fontSize: '14px',
}}
placeholder="username"
placeholder={t('auth.username')}
/>
</div>
@@ -229,7 +231,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
color: 'var(--text)',
}}
>
Password
{t('auth.password')}
</label>
<input
type="password"
@@ -247,7 +249,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
color: 'var(--text)',
fontSize: '14px',
}}
placeholder="password"
placeholder={t('auth.password')}
/>
</div>
@@ -262,7 +264,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
color: 'var(--text)',
}}
>
Referral ID <span style={{ color: 'var(--muted)', fontSize: '12px', fontWeight: 'normal' }}>(optional)</span>
{t('auth.referralId')} <span style={{ color: 'var(--muted)', fontSize: '12px', fontWeight: 'normal' }}>({t('auth.optional')})</span>
</label>
<input
type="text"
@@ -278,11 +280,11 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
color: 'var(--text)',
fontSize: '14px',
}}
placeholder="Enter referral ID"
placeholder={t('auth.referralId')}
/>
{searchParams?.get('ref') && referralId === searchParams.get('ref') && (
<small style={{ display: 'block', marginTop: '4px', fontSize: '12px', color: 'var(--accent)' }}>
Auto-filled from referral link
{t('auth.autoFilled')}
</small>
)}
</div>
@@ -316,10 +318,10 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
}}
>
{loading
? 'Processing...'
? t('common.processing')
: isLogin
? 'Login'
: 'Register'}
? t('auth.login')
: t('auth.register')}
</button>
</form>
@@ -333,7 +335,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
>
{isLogin ? (
<>
Don't have an account?{' '}
{t('auth.dontHaveAccount')}{' '}
<button
onClick={() => {
setIsLogin(false)
@@ -348,12 +350,12 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
padding: 0,
}}
>
Register
{t('auth.register')}
</button>
</>
) : (
<>
Already have an account?{' '}
{t('auth.alreadyHaveAccount')}{' '}
<button
onClick={() => {
setIsLogin(true)
@@ -368,7 +370,7 @@ export default function AuthModal({ isOpen, onClose, onLogin }: AuthModalProps)
padding: 0,
}}
>
Login
{t('auth.login')}
</button>
</>
)}