This commit is contained in:
Peter Hoppe
2023-01-30 17:01:44 +01:00
parent ff8e4bc831
commit a861acb2e0
11 changed files with 551 additions and 517 deletions

View File

@ -1,78 +1,78 @@
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 {useContext, useState} from 'react'
// import {Link} from 'react-router-dom'
// import {UserCtx, UserCtxT} from '../context/UserContext';
// 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 {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 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() !== '')){
// setSuccessMsg("false");
// setErrMsg('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)
// {
// setSuccessMsg("false");
// setErrMsg('Bitte 2mal das gleiche Passwort eingeben!');
// 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);
}
}
// 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'>
// <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>
// )
}
export default Register;