hope/dog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

phpmailer passwort reset

Browse Source
This commit is contained in:
Peter Hoppe
2023-02-08 16:09:00 +01:00
parent 9821f20dee
commit 0c5cfcbd19
15 changed files with 247 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Login.css → src/components/InputForm.css
View File

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

5
src/components/Login.tsx
View File

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

82
src/components/PasswordReset.tsx Normal file
View File

@ -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>
)
}

9
src/components/Profil.css
View File

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

3
src/components/Profil.tsx
View File

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

8
src/components/Register.css
View File

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

4
src/components/Register.tsx
View File

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

52
src/components/WantNewPw.tsx Normal file
View File

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