118 lines
3.3 KiB
TypeScript
118 lines
3.3 KiB
TypeScript
|
/**
|
|||
|
|
* Register Page – New user registration
|
|||
|
|
*/
|
|||
|
|
import { useState, type FormEvent } from 'react';
|
|||
|
|
import { useAuth } from '../contexts/AuthContext';
|
|||
|
|
|
|||
|
|
interface RegisterProps {
|
|||
|
|
onSwitchToLogin: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function Register({ onSwitchToLogin }: RegisterProps) {
|
|||
|
|
const { register, loading, error, clearError } = useAuth();
|
|||
|
|
const [email, setEmail] = useState('');
|
|||
|
|
const [name, setName] = useState('');
|
|||
|
|
const [password, setPassword] = useState('');
|
|||
|
|
const [confirmPassword, setConfirmPassword] = useState('');
|
|||
|
|
const [localError, setLocalError] = useState<string | null>(null);
|
|||
|
|
|
|||
|
|
const handleSubmit = async (e: FormEvent) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
setLocalError(null);
|
|||
|
|
|
|||
|
|
if (password !== confirmPassword) {
|
|||
|
|
setLocalError('Passwörter stimmen nicht überein');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (password.length < 6) {
|
|||
|
|
setLocalError('Passwort muss mindestens 6 Zeichen lang sein');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await register(email, password, name);
|
|||
|
|
} catch {
|
|||
|
|
// error is set in context
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const displayError = localError || error;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="auth-page">
|
|||
|
|
<div className="auth-card">
|
|||
|
|
<h1 className="auth-title">Web CAD</h1>
|
|||
|
|
<p className="auth-subtitle">Registrieren</p>
|
|||
|
|
|
|||
|
|
{displayError && (
|
|||
|
|
<div className="auth-error" onClick={() => { clearError(); setLocalError(null); }}>
|
|||
|
|
{displayError}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<form onSubmit={handleSubmit} className="auth-form">
|
|||
|
|
<div className="auth-field">
|
|||
|
|
<label htmlFor="reg-name">Name</label>
|
|||
|
|
<input
|
|||
|
|
id="reg-name"
|
|||
|
|
type="text"
|
|||
|
|
value={name}
|
|||
|
|
onChange={e => setName(e.target.value)}
|
|||
|
|
required
|
|||
|
|
autoFocus
|
|||
|
|
placeholder="Ihr Name"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="auth-field">
|
|||
|
|
<label htmlFor="reg-email">E-Mail</label>
|
|||
|
|
<input
|
|||
|
|
id="reg-email"
|
|||
|
|
type="email"
|
|||
|
|
value={email}
|
|||
|
|
onChange={e => setEmail(e.target.value)}
|
|||
|
|
required
|
|||
|
|
placeholder="name@example.com"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="auth-field">
|
|||
|
|
<label htmlFor="reg-password">Passwort</label>
|
|||
|
|
<input
|
|||
|
|
id="reg-password"
|
|||
|
|
type="password"
|
|||
|
|
value={password}
|
|||
|
|
onChange={e => setPassword(e.target.value)}
|
|||
|
|
required
|
|||
|
|
placeholder="min. 6 Zeichen"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="auth-field">
|
|||
|
|
<label htmlFor="reg-confirm">Passwort bestätigen</label>
|
|||
|
|
<input
|
|||
|
|
id="reg-confirm"
|
|||
|
|
type="password"
|
|||
|
|
value={confirmPassword}
|
|||
|
|
onChange={e => setConfirmPassword(e.target.value)}
|
|||
|
|
required
|
|||
|
|
placeholder="••••••••"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button type="submit" className="auth-button" disabled={loading}>
|
|||
|
|
{loading ? 'Wird registriert…' : 'Registrieren'}
|
|||
|
|
</button>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
<p className="auth-switch">
|
|||
|
|
Bereits ein Konto?{' '}
|
|||
|
|
<button type="button" className="auth-link" onClick={onSwitchToLogin}>
|
|||
|
|
Anmelden
|
|||
|
|
</button>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|