fullstack
This commit is contained in:
124
frontend/src/screens/RegisterScreen.tsx
Normal file
124
frontend/src/screens/RegisterScreen.tsx
Normal file
@ -0,0 +1,124 @@
|
||||
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;
|
Reference in New Issue
Block a user