phpmailer passwort reset

src/App.tsx

@@ -3,7 +3,6 @@ import './App.css';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Login from './components/Login';
 import Register from './components/Register';
-import Home from './components/Home';
 import Dog from './components/Dog';
 import Qr from './components/Qr';
 import Header from './components/Header';
@@ -16,6 +15,8 @@ import useSWR from 'swr';
 import {getUser} from './services/PhpApi'
 import toast, { Toaster } from 'react-hot-toast';
 import { TUser } from './context/UserContext';
+import PasswordReset from './components/PasswordReset';
+import WantNewPw from './components/WantNewPw';
 
 const App: React.FC = () => 
 {
@@ -60,6 +61,8 @@ const App: React.FC = () =>
                   <Route path="/login" element={<Login/>} />
                   <Route path="/reg" element={<Register/>} />
                   <Route path="/impressum" element={<Impressum/>} />
+                  <Route path="/pwreset/:pwtoken" element={<PasswordReset/>} />
+                  <Route path="/wantnewpw" element={<WantNewPw/>} />
                   {user && <Route path="/upload" element={<FileUpload/>} />}
                   {user && <Route path="/profil" element={<Profil/>} />}
               </Routes>

src/components/InputForm.css

@@ -1,4 +1,4 @@
-.Login
+.InputForm
 form
 {
     width: 65%;

src/components/Login.tsx

@@ -1,6 +1,6 @@
 import {useState} from 'react';
 import { Link/*, useNavigate*/ } from 'react-router-dom';
-import './Login.css';
+import './InputForm.css';
 import {getUser, loginUser} from '../services/PhpApi'
 import { toast, Toaster } from 'react-hot-toast';
 import useSWR from 'swr';
@@ -67,7 +67,7 @@ const Login = () =>
     }
 
     return (
-        <div className='Login'>
+        <div className='InputForm'>
             <Toaster toastOptions={{ position: "top-center" }} />
             <h2>Login</h2>
 
@@ -82,6 +82,7 @@ const Login = () =>
                 </div>
                 <button type="submit">Login</button>
                 <div className="bottom-link"><Link to="/reg">Register</Link></div>
+                <div className="bottom-link"><Link to="/wantnewpw">Passwort vergessen</Link></div>
             </form>
         </div>
     )

src/components/PasswordReset.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react'
+import toast, { Toaster } from 'react-hot-toast';
+import { Link, useParams } from 'react-router-dom';
+import { passwordReset } from '../services/PhpApi';
+import './InputForm.css';
+
+export default function PasswordReset()
+{
+    const params = useParams();
+    const passwordToken = Object.values(params)[0];
+
+    const [formData, setFormData] = useState({
+        password1:'',
+        password2:''
+    });
+
+    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() !== ''))
+        {
+            toast.error('Bitte alle Felder ausfüllen!');
+            return;
+        }
+
+        if(formData.password1 !== formData.password2)
+        {
+            toast.error('Bitte 2mal das gleiche Passwort eingeben!');
+            return;
+        }
+
+        const sendData = new FormData();
+        const values = Object.values(formData);
+        const keys = Object.keys(formData);
+
+        for (const key of keys) 
+        {
+            const index = keys.indexOf(key);
+            sendData.append(key, values[index]);
+        }
+
+        sendData.append('passwordToken', passwordToken!);
+ 
+        const data = await passwordReset(sendData);
+        if(data.success)
+        {
+            toast.success('Erfolgreich Passwort geändert!');
+            e.currentTarget.reset();
+        }
+        else if(!data.success && data.message)
+        {
+            toast.error(data.message);
+        }
+    }
+
+    return ( 
+        <div className='InputForm'>
+            <Toaster toastOptions={{ position: "top-center" }} />
+            <h2>Passwort zurücksetzten!</h2>
+            <form onSubmit={submitForm}>
+                <div className='neben'>
+                    <label htmlFor="password1">Passwort: </label>
+                    <input type="password" name="password1" onChange={onChangeInput} placeholder="Neues Passwort" id="password1" value={formData.password1} required />
+                </div> 
+                <div className='neben'>
+                    <label htmlFor="password2">Passwort wiederholen: </label>
+                    <input type="password" name="password2" onChange={onChangeInput} placeholder="Neues Passwort wiederholen!" id="password2" value={formData.password2} required />
+                </div>
+                <button type="submit" >Passwort </button>
+                <div className="bottom-link"><Link to="/login">Login</Link></div>
+            </form>
+        </div>
+    )
+} 

src/components/Profil.css

@@ -1,12 +1,3 @@
-.Profil
-form
-{
-    width: 65%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-}
-
 button.QRakt
 {
     max-width: 80%;

src/components/Profil.tsx

@@ -6,6 +6,7 @@ import {TUser} from '../context/UserContext';
 import {getProfilData, updateDog} from '../services/PhpApi';
 import CreateQr from '../services/CreateQr';
 import Img from './Img';
+import './InputForm.css';
 import './Profil.css';
 
 function Profil() 
@@ -141,7 +142,7 @@ function Profil()
     console.log(formData_loc);
 
     return (
-        <div className='Profil'>
+        <div className='InputForm'>
             <Toaster toastOptions={{ position: "top-center" }} />
             <h2>Profil</h2>
             <div className='neben'>

src/components/Register.css

@@ -1,8 +0,0 @@
-.Register
-form
-{
-    width: 65%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-}

src/components/Register.tsx

@@ -1,7 +1,7 @@
 import {useState} from 'react'
 import {Link} from 'react-router-dom'
 import toast, { Toaster } from 'react-hot-toast';
-import './Register.css';
+import './InputForm.css';
 import {registerUser} from '../services/PhpApi';
 
 const Register = () => 
@@ -48,7 +48,7 @@ const Register = () =>
     }
 
     return ( 
-        <div className='Register'>
+        <div className='InputForm'>
             <Toaster toastOptions={{ position: "top-center" }} />
             <h2>Register</h2>
             <form onSubmit={submitForm}>

src/components/WantNewPw.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react'
+import toast, { Toaster } from 'react-hot-toast';
+import './ImportForm.css';
+
+function WantNewPw() 
+{
+    const [email, setEmail] = useState('');
+
+    const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => {
+        setEmail(e.currentTarget.value);
+    }
+
+    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => 
+    {
+        e.preventDefault();
+
+        if(e.currentTarget.value.trim() !== '')
+        {
+            toast.error('Bitte Feld ausfüllen!');
+            return;
+        }
+ 
+        const data = await wantNewPw(email);
+        if(data.success)
+        {
+            toast.success('Erfolgreich Passwort geändert!');
+            e.currentTarget.reset();
+        }
+        else if(!data.success && data.message)
+        {
+            toast.error(data.message);
+        }
+    }
+
+    return ( 
+        <div className='InputForm'>
+            <Toaster toastOptions={{ position: "top-center" }} />
+            <h2>Neues Passwort setzen!</h2>
+            <form onSubmit={submitForm}>
+                <div className='neben'>
+                    <label htmlFor="email">Email: </label>
+                    <input type="email" name="email" onChange={onChangeInput} 
+                        placeholder="Gleiche Email, wie bei der Registrierung angeben" 
+                        id="email" value={email} required />
+                </div> 
+                <button type="submit" >Passwort anfordern</button>
+            </form>
+        </div>
+    )
+} 
+
+export default WantNewPw

src/services/PhpApi.ts

@@ -22,7 +22,7 @@ export const updateDog = async ({email, name, phone}:
         return data;
     }
     catch(err){
-        return {success:0, message:'Server Error!'};
+        return {success:0, message:'Update Dog Server Error!'};
     }
 }
 
@@ -81,7 +81,7 @@ export const registerUser = async ({email,password}:
     }
     catch(err)
     {
-        return {success:0, message:'Server Error!'};
+        return {success:0, message:'Register User Server Error!'};
     }
 }
 
@@ -106,7 +106,7 @@ export const foundMsg = async (form_data:
     }
     catch(err)
     {
-        return {success:0, message:'Server Error!'};
+        return {success:0, message:'Found Msg Server Error!'};
     }
 }
 
@@ -137,7 +137,7 @@ export const updateQR = async ({qr_width_cm, qr_height_cm, qr_fontsize, qr_visib
     }
     catch(err)
     {
-        return {success:0, message:'Server Error!'};
+        return {success:0, message:'Update QR Server Error!'};
     }
 }
 
@@ -240,6 +240,38 @@ export const logOut = () =>
     .catch((err) => console.error(err));
 }
 
+export const passwordReset = async (form_data:
+    FormData) => 
+{
+    try
+    {
+        const {data} = await Axios.post('passwordReset.php', form_data);
+        console.log('Api passwordReset');
+        console.log(data);
+        return data;
+    }
+    catch(err)
+    {
+        return {success:0, message:'Password Reset Server Error!'};
+    }
+}
+
+export const wantNewPw = async ({email}:{email: string}) => 
+{
+    try
+    {
+        const {data} = await Axios.post('wantNewPw.php', {email});
+        console.log('Api wantNewPw');
+        console.log(data);
+        return data;
+    }
+    catch(err)
+    {
+        return {success:0, message:'Password Reset Server Error!'};
+    }
+}
+
+
 // export const sleep = (ms: number) => 
 // {
 //     return new Promise((resolve) => setTimeout(resolve, ms));