122 lines
4.2 KiB
TypeScript
122 lines
4.2 KiB
TypeScript
import { useState } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { api, AuthResponse, User } from '../lib/api';
|
|
|
|
interface SignUpProps {
|
|
onSuccess: (user: User, token: string) => void;
|
|
}
|
|
|
|
export default function SignUp({ onSuccess }: SignUpProps) {
|
|
const [email, setEmail] = useState('');
|
|
const [displayName, setDisplayName] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [passwordVerify, setPasswordVerify] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError('');
|
|
|
|
if (password !== passwordVerify) {
|
|
setError('Passwords do not match');
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
try {
|
|
const response = await api.post<AuthResponse>('/auth/sign-up', {
|
|
email,
|
|
password,
|
|
displayName,
|
|
});
|
|
onSuccess(response.user, response.token);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : 'Sign up failed');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-bg-primary">
|
|
<div className="w-full max-w-md p-8">
|
|
<h1 className="text-2xl font-bold text-center mb-6">Create Account</h1>
|
|
{error && (
|
|
<div className="mb-4 p-3 bg-red-900/30 border border-red-700 rounded-lg text-red-200">
|
|
{error}
|
|
</div>
|
|
)}
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm text-text-muted mb-1">
|
|
Email Address
|
|
</label>
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="w-full px-4 py-2 bg-bg-tertiary border border-border-default rounded-lg text-text-primary focus:outline-none focus:border-brand"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="displayName" className="block text-sm text-text-muted mb-1">
|
|
Display Name
|
|
</label>
|
|
<input
|
|
id="displayName"
|
|
type="text"
|
|
value={displayName}
|
|
onChange={(e) => setDisplayName(e.target.value)}
|
|
className="w-full px-4 py-2 bg-bg-tertiary border border-border-default rounded-lg text-text-primary focus:outline-none focus:border-brand"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="password" className="block text-sm text-text-muted mb-1">
|
|
Password
|
|
</label>
|
|
<input
|
|
id="password"
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="w-full px-4 py-2 bg-bg-tertiary border border-border-default rounded-lg text-text-primary focus:outline-none focus:border-brand"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="passwordVerify" className="block text-sm text-text-muted mb-1">
|
|
Verify Password
|
|
</label>
|
|
<input
|
|
id="passwordVerify"
|
|
type="password"
|
|
value={passwordVerify}
|
|
onChange={(e) => setPasswordVerify(e.target.value)}
|
|
className="w-full px-4 py-2 bg-bg-tertiary border border-border-default rounded-lg text-text-primary focus:outline-none focus:border-brand"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="flex gap-4 pt-2">
|
|
<Link
|
|
to="/"
|
|
className="flex-1 px-4 py-2 text-center border border-border-default rounded-lg hover:bg-bg-tertiary transition-colors"
|
|
>
|
|
Cancel
|
|
</Link>
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="flex-1 px-4 py-2 bg-brand hover:bg-red-700 text-white rounded-lg transition-colors disabled:opacity-50"
|
|
>
|
|
{loading ? 'Creating...' : 'Sign Up'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |