125 lines
3.6 KiB
TypeScript
125 lines
3.6 KiB
TypeScript
import { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { registerUser } from "../services/authService";
|
|
|
|
const RegistrationScreen = () => {
|
|
const [username, setUsername] = useState("");
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [confirmPassword, setConfirmPassword] = useState("");
|
|
const [errorMessage, setErrorMessage] = useState("");
|
|
const navigate = useNavigate();
|
|
|
|
const handleRegister = async () => {
|
|
if (password !== confirmPassword) {
|
|
setErrorMessage("Passwörter stimmen nicht überein.");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const result = await registerUser(email, password, username);
|
|
if (result) {
|
|
console.log("Registrierung erfolgreich!");
|
|
navigate("/login");
|
|
} else {
|
|
setErrorMessage("Registrierung fehlgeschlagen.");
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler bei der Registrierung:", error);
|
|
setErrorMessage("Es gab ein Problem bei der Registrierung.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={styles.container}>
|
|
<h2 style={styles.title}>Registrierung</h2>
|
|
|
|
<input
|
|
type="text"
|
|
placeholder="Username"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
style={styles.input}
|
|
/>
|
|
<input
|
|
type="email"
|
|
placeholder="E-Mail"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
style={styles.input}
|
|
/>
|
|
<input
|
|
type="password"
|
|
placeholder="Passwort"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
style={styles.input}
|
|
/>
|
|
<input
|
|
type="password"
|
|
placeholder="Passwort bestätigen"
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
style={styles.input}
|
|
/>
|
|
|
|
{errorMessage && <p style={styles.errorText}>{errorMessage}</p>}
|
|
|
|
<button onClick={handleRegister} style={styles.button}>
|
|
Registrieren
|
|
</button>
|
|
|
|
<p onClick={() => navigate("/login")} style={styles.linkText}>
|
|
Schon ein Konto? Einloggen
|
|
</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const styles: { [key: string]: React.CSSProperties } = {
|
|
container: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
maxWidth: "400px",
|
|
margin: "100px auto",
|
|
padding: "20px",
|
|
border: "1px solid #ccc",
|
|
borderRadius: "8px",
|
|
boxShadow: "0 0 10px rgba(0, 0, 0, 0.1)",
|
|
},
|
|
title: {
|
|
fontSize: "24px",
|
|
marginBottom: "20px",
|
|
textAlign: "center",
|
|
},
|
|
input: {
|
|
padding: "10px",
|
|
marginBottom: "10px",
|
|
borderRadius: "5px",
|
|
border: "1px solid #ccc",
|
|
fontSize: "16px",
|
|
},
|
|
button: {
|
|
padding: "10px",
|
|
backgroundColor: "#007bff",
|
|
color: "#fff",
|
|
border: "none",
|
|
borderRadius: "5px",
|
|
cursor: "pointer",
|
|
fontSize: "16px",
|
|
},
|
|
linkText: {
|
|
marginTop: "10px",
|
|
color: "#007bff",
|
|
textAlign: "center",
|
|
cursor: "pointer",
|
|
},
|
|
errorText: {
|
|
color: "red",
|
|
textAlign: "center",
|
|
marginBottom: "10px",
|
|
},
|
|
};
|
|
|
|
export default RegistrationScreen;
|