File size: 5,475 Bytes
212c959 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | import { useState } from 'react'
export default function AuthModal({ mode, onModeChange, onLogin, onRegister, onClose }) {
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const [err, setErr] = useState('')
const [loading, setLoading] = useState(false)
const handleSubmit = async (e) => {
e.preventDefault()
setErr('')
if (!username || !password) return setErr('Please fill in all fields.')
if (password.length < 6) return setErr('Password must be at least 6 characters.')
if (mode === 'register') {
if (username.length < 3) return setErr('Username must be at least 3 characters.')
if (!/^[a-zA-Z0-9_]+$/.test(username)) {
return setErr('Username can only contain letters, numbers, and underscores. No spaces or special characters (e.g. no @, ., -).')
}
}
setLoading(true)
try {
if (mode === 'login') await onLogin(username, password)
else await onRegister(username, password)
} catch (e) {
setErr(e.message || 'Something went wrong. Please try again.')
} finally {
setLoading(false)
}
}
const handleGoogle = () => {
window.location.href = '/auth/google/login'
}
return (
<div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
<div className="modal-card" style={{ maxWidth: 380 }}>
<div className="modal-header">
<span className="modal-title">Welcome to OwnGPT v2</span>
<button className="modal-close" onClick={onClose}>
<svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div className="modal-body">
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}>
<div className="sidebar-logo-icon" style={{ animation: 'logoPulse 3s infinite', width: 48, height: 48, fontSize: 24 }}>✦</div>
</div>
<div className="auth-tabs" style={{ position: 'relative' }}>
<div style={{
position: 'absolute', top: 3, bottom: 3, width: 'calc(50% - 3px)',
background: 'var(--s2)', borderRadius: 'var(--rx)', zIndex: 0,
transform: `translateX(${mode === 'login' ? '0' : 'calc(100% + 3px)'})`,
transition: 'transform 0.3s var(--spring)', boxShadow: '0 2px 8px rgba(0,0,0,0.20)'
}} />
<button style={{ position: 'relative', zIndex: 1, backgroundColor: 'transparent', boxShadow: 'none' }} className={`auth-tab ${mode === 'login' ? 'active' : ''}`} onClick={() => { onModeChange('login'); setErr('') }}>Sign In</button>
<button style={{ position: 'relative', zIndex: 1, backgroundColor: 'transparent', boxShadow: 'none' }} className={`auth-tab ${mode === 'register' ? 'active' : ''}`} onClick={() => { onModeChange('register'); setErr('') }}>Sign Up</button>
</div>
<form onSubmit={handleSubmit}>
<label className="field-label">Username</label>
<input
className="field-input"
type="text"
value={username} onChange={e => setUsername(e.target.value)}
placeholder={mode === 'register' ? "Letters, numbers, underscores only" : "Your username"}
autoFocus
/>
<label className="field-label">Password</label>
<input
className="field-input"
type="password"
value={password} onChange={e => setPassword(e.target.value)}
placeholder="••••••••"
/>
{mode === 'register' && password.length > 0 && (
<div style={{ display: 'flex', gap: 4, marginTop: -8, marginBottom: 16 }}>
{[1, 2, 3].map(i => (
<div key={i} style={{
height: 4, flex: 1, borderRadius: 2,
background: password.length > i * 3 ? (password.length > 8 ? 'var(--em)' : 'var(--am)') : 'var(--b2)',
transition: 'all 0.3s'
}} />
))}
</div>
)}
{err && <div className="field-error">{err}</div>}
<button type="submit" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }} disabled={loading}>
{loading ? 'Processing...' : (mode === 'login' ? 'Sign In' : 'Create Account')}
</button>
</form>
<div className="divider-or">or continue with</div>
<button className="btn btn-google" onClick={handleGoogle} type="button">
<svg width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
Google
</button>
</div>
</div>
</div>
)
}
|