läuft schon

src/components/Register.tsx

@@ -1,9 +1,60 @@
-import React from 'react'
+import {useContext, useState} from 'react'
+import {Link} from 'react-router-dom'
+import {UserCtx, UserCtxT} from '../context/UserContext';
 
-export default function Register() {
-  return (
-    <div>
-      <h1>Register</h1>
-    </div>
-  )
+
+const Register = () => {
+    const {registerUser, wait} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+    const [errMsg, setErrMsg] = useState("false");
+    const [successMsg, setSuccessMsg] = useState("false");
+    const [formData, setFormData] = useState({
+        email:'',
+        password:''
+    });
+
+    const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => {
+        setFormData({
+            ...formData,
+            [e.currentTarget.name]:e.currentTarget.value
+        })
+    }
+
+    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+
+        if(!Object.values(formData).every(val => val.trim() !== '')){
+            setSuccessMsg("false");
+            setErrMsg('Bitte alle Felder ausfüllen!');
+            return;
+        }
+
+        const data = await registerUser(formData);
+        if(data.success){
+            setSuccessMsg('Erfolgreich Registriert!');
+            setErrMsg("false");
+            e.currentTarget.reset();
+        }
+        else if(!data.success && data.message){
+            setSuccessMsg("false");
+            setErrMsg(data.message);
+        }
+        
+    }
+
+    return (
+        <div>
+            <h2>Sign Up</h2>
+            <form onSubmit={submitForm}>
+                <label htmlFor="email">Email:</label>
+                <input type="email" name="email" onChange={onChangeInput} placeholder="Deine email" id="email" value={formData.email} required />
+                <label htmlFor="password">Password:</label>
+                <input type="password" name="password" onChange={onChangeInput} placeholder="New password" id="password" value={formData.password} required />
+                {successMsg !== "false" && <div className="success-msg">{successMsg}</div>}
+                {errMsg !== "false" && <div className="err-msg">{errMsg}</div>}
+                <button type="submit" disabled={wait}>Register</button>
+                <div className="bottom-link"><Link to="/login">Login</Link></div>
+            </form>
+        </div>
+    )
 }
+export default Register;