fullstack

frontend/src/screens/RegisterScreen.tsx

@@ -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;