register

src/components/Register.tsx

@@ -1,78 +1,73 @@
-// import {useContext, useState} from 'react'
-// import {Link} from 'react-router-dom'
-// import {UserCtx, UserCtxT} from '../context/UserContext';
-// import './Register.css';
-// import {registerUser} from '../services/PhpApi';
+import {useState} from 'react'
+import {Link} from 'react-router-dom'
+import toast, { Toaster } from 'react-hot-toast';
+import './Register.css';
+import {registerUser} from '../services/PhpApi';
 
-const Register = () => {
-//     const {wait} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
-//     const [errMsg, setErrMsg] = useState("false");
-//     const [successMsg, setSuccessMsg] = useState("false");
-//     const [formData, setFormData] = useState({
-//         email:'',
-//         password:'',
-//         password2:''
-//     });
+const Register = () => 
+{
+    const [formData, setFormData] = useState({
+        email:'',
+        password:'',
+        password2:''
+    });
 
-//     const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => {
-//         setFormData({
-//             ...formData,
-//             [e.currentTarget.name]:e.currentTarget.value
-//         })
-//     }
+    const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => {
+        setFormData({
+            ...formData,
+            [e.currentTarget.name]:e.currentTarget.value
+        })
+    }
 
-//     const submitForm = async (e: React.FormEvent<HTMLFormElement>) => 
-//     {
-//         e.preventDefault();
+    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;
-//         }
+        if(!Object.values(formData).every(val => val.trim() !== ''))
+        {
+            toast.error('Bitte alle Felder ausfüllen!');
+            return;
+        }
 
-//         if(formData.password !== formData.password2)
-//         {
-//             setSuccessMsg("false");
-//             setErrMsg('Bitte 2mal das gleiche Passwort eingeben!');
-//             return;
+        if(formData.password !== formData.password2)
+        {
+            toast.error('Bitte 2mal das gleiche Passwort eingeben!');
+            return;
+        }
 
-//         }
+        const data = await registerUser(formData);
+        if(data.success)
+        {
+            toast.success('Erfolgreich Registriert!');
+            e.currentTarget.reset();
+        }
+        else if(!data.success && data.message)
+        {
+            toast.error(data.message);
+        }
+    }
 
-//         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 className='Register'>
-//             <h2>Register</h2>
-//             <form onSubmit={submitForm}>
-//                 <div className='neben'>
-//                     <label htmlFor="email">Email: </label>                    
-//                     <input type="email" name="email" onChange={onChangeInput} placeholder="Deine email" id="email" value={formData.email} required />
-//                 </div>
-//                 <div className='neben'>
-//                     <label htmlFor="password">Passwort: </label>
-//                     <input type="password" name="password" onChange={onChangeInput} placeholder="New password" id="password" value={formData.password} required />
-//                 </div> 
-//                 <div className='neben'>
-//                     <label htmlFor="password2">Passwort wiederholen: </label>
-//                     <input type="password" name="password2" onChange={onChangeInput} placeholder="New password" id="password2" value={formData.password2} required />
-//                 </div>
-//                 {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>
-//     )
+    return ( 
+        <div className='Register'>
+            <Toaster toastOptions={{ position: "top-center" }} />
+            <h2>Register</h2>
+            <form onSubmit={submitForm}>
+                <div className='neben'>
+                    <label htmlFor="email">Email: </label>                    
+                    <input type="email" name="email" onChange={onChangeInput} placeholder="Deine email" id="email" value={formData.email} required />
+                </div>
+                <div className='neben'>
+                    <label htmlFor="password">Passwort: </label>
+                    <input type="password" name="password" onChange={onChangeInput} placeholder="New password" id="password" value={formData.password} required />
+                </div> 
+                <div className='neben'>
+                    <label htmlFor="password2">Passwort wiederholen: </label>
+                    <input type="password" name="password2" onChange={onChangeInput} placeholder="New password" id="password2" value={formData.password2} required />
+                </div>
+                <button type="submit" >Register</button>
+                <div className="bottom-link"><Link to="/login">Login</Link></div>
+            </form>
+        </div>
+    )
 }
 export default Register;