Spaces:
Sleeping
Sleeping
File size: 4,322 Bytes
5a264f5 | 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 111 | import { useState } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'
export default function AuthPage() {
const [searchParams] = useSearchParams()
const [tab, setTab] = useState(searchParams.get('tab') === 'signup' ? 'signup' : 'login')
const [error, setError] = useState('')
const [loading, setLoading] = useState(false)
// Login fields
const [identity, setIdentity] = useState('')
const [loginPw, setLoginPw] = useState('')
// Signup fields
const [uname, setUname] = useState('')
const [email, setEmail] = useState('')
const [signupPw, setSignupPw] = useState('')
const { login, signup } = useAuth()
const navigate = useNavigate()
async function handleLogin(e) {
e.preventDefault()
setError(''); setLoading(true)
try {
await login(identity, loginPw)
navigate('/app/dashboard')
} catch (err) { setError(err.message) }
finally { setLoading(false) }
}
async function handleSignup(e) {
e.preventDefault()
setError(''); setLoading(true)
try {
await signup(uname, email, signupPw)
navigate('/app/dashboard')
} catch (err) { setError(err.message) }
finally { setLoading(false) }
}
return (
<div className="auth-screen">
{/* Breathing rings */}
<div className="breath-rings">
{[1,2,3,4].map(i => <div key={i} className={`ring ring-${i}`} />)}
</div>
<div className="auth-card">
{/* Brand */}
<div className="auth-brand">
<img src="/logo.svg" alt="BREATHE" className="auth-logo" />
<p className="auth-subtitle">Stress Intelligence Platform</p>
</div>
{/* Tabs */}
<div className="auth-tabs">
<button className={`auth-tab ${tab==='login' ? 'auth-tab--active' : ''}`} onClick={() => { setTab('login'); setError('') }}>Log In</button>
<button className={`auth-tab ${tab==='signup' ? 'auth-tab--active' : ''}`} onClick={() => { setTab('signup'); setError('') }}>Sign Up</button>
</div>
{error && <div className="form-error">{error}</div>}
{/* Login form */}
{tab === 'login' && (
<form className="auth-form" onSubmit={handleLogin}>
<div className="field">
<label>Email or Username</label>
<input type="text" placeholder="you@example.com" value={identity}
onChange={e => setIdentity(e.target.value)} autoComplete="username" required />
</div>
<div className="field">
<label>Password</label>
<input type="password" placeholder="••••••••" value={loginPw}
onChange={e => setLoginPw(e.target.value)} autoComplete="current-password" required />
</div>
<button type="submit" className="btn-primary btn--full" disabled={loading}>
{loading ? <span className="btn-spinner" /> : 'Log In →'}
</button>
</form>
)}
{/* Signup form */}
{tab === 'signup' && (
<form className="auth-form" onSubmit={handleSignup}>
<div className="field">
<label>Username</label>
<input type="text" placeholder="breatheuser" value={uname}
onChange={e => setUname(e.target.value)} autoComplete="username" required />
</div>
<div className="field">
<label>Email</label>
<input type="email" placeholder="you@example.com" value={email}
onChange={e => setEmail(e.target.value)} autoComplete="email" required />
</div>
<div className="field">
<label>Password <small>(min 8 characters)</small></label>
<input type="password" placeholder="••••••••" value={signupPw}
onChange={e => setSignupPw(e.target.value)} autoComplete="new-password" required />
</div>
<button type="submit" className="btn-primary btn--full" disabled={loading}>
{loading ? <span className="btn-spinner" /> : 'Create Account →'}
</button>
</form>
)}
</div>
</div>
)
}
|