register

src/components/Qr.tsx

@@ -2,6 +2,7 @@ import React, { ChangeEvent, MouseEventHandler, useState } from 'react'
 import { Link } from 'react-router-dom';
 import { DogT } from '../context/UserContext';
 import {getDog, updateQR} from '../services/PhpApi';
+import toast, { Toaster } from 'react-hot-toast';
 import Checkbox from './Checkbox';
 import Img from './Img';
 import './Qr.css';
@@ -34,8 +35,6 @@ export default function Qr()
             qr_code: '',
             picture: ''
         }); 
-    const [errMsg, setErrMsg] = useState("false");
-    const [successMsg, setSuccessMsg] = useState("false");
     //save reference for dragItem and dragOverItem
     const dragItem = React.useRef<any>(null);
     const dragOverItem = React.useRef<any>(null);
@@ -192,13 +191,12 @@ export default function Qr()
         {
             if(resQR.success)
             {
-                setSuccessMsg('Daten gesichert!');
+                toast.success('Daten gesichert!');
                 mutate();
             }
             else if(!resQR.success && resQR.message)
             {
-                setSuccessMsg("false");
+                toast.error(resQR.message);
-                setErrMsg(resQR.message);
             }
         })
         .catch((err) => console.error(err));
@@ -287,6 +285,7 @@ export default function Qr()
 
     return (
         <div>
+            <Toaster toastOptions={{ position: "top-center" }} />
             <h1>Qr-Code Druck</h1>
             <Link to={"/profil"}>Zurück zum Profil</Link>
             <div className='qrSettings____'>
@@ -352,8 +351,6 @@ export default function Qr()
                 <div className='column'>
                     <button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button>
                     <button id="printButton" className='printButton' onClick={printHandler} >QR-Code drucken</button>
-                    {successMsg !== "false" && <div className="success-msg">{successMsg}</div>}
-                    {errMsg !== "false" && <div className="err-msg">{errMsg}</div>}
                 </div>
             </div>
             <div className='blockRepeat'>

src/components/Register.tsx

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