60 lines
2.2 KiB
TypeScript
60 lines
2.2 KiB
TypeScript
import {useContext, useState} from 'react'
|
|
import {Link} from 'react-router-dom'
|
|
import {UserCtx, UserCtxT} from '../context/UserContext';
|
|
|
|
|
|
const Register = () => {
|
|
const {registerUser, wait} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
|
|
const [errMsg, setErrMsg] = useState("false");
|
|
const [successMsg, setSuccessMsg] = useState("false");
|
|
const [formData, setFormData] = useState({
|
|
email:'',
|
|
password:''
|
|
});
|
|
|
|
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() !== '')){
|
|
setSuccessMsg("false");
|
|
setErrMsg('Bitte alle Felder ausfüllen!');
|
|
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);
|
|
}
|
|
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h2>Sign Up</h2>
|
|
<form onSubmit={submitForm}>
|
|
<label htmlFor="email">Email:</label>
|
|
<input type="email" name="email" onChange={onChangeInput} placeholder="Deine email" id="email" value={formData.email} required />
|
|
<label htmlFor="password">Password:</label>
|
|
<input type="password" name="password" onChange={onChangeInput} placeholder="New password" id="password" value={formData.password} required />
|
|
{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; |