138 lines
4.4 KiB
TypeScript
138 lines
4.4 KiB
TypeScript
import {useState} from 'react'
|
|
import {Link} from 'react-router-dom'
|
|
import './InputForm.css';
|
|
import {registerUser} from '../services/PhpApi';
|
|
import { PasswordInput, Stack, TextInput } from '@mantine/core';
|
|
import { CheckCircledIcon, CrossCircledIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
|
|
import { showNotification } from '@mantine/notifications';
|
|
|
|
const Register = () =>
|
|
{
|
|
const [formData, setFormData] = useState({
|
|
email:'',
|
|
password:'',
|
|
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() !== ''))
|
|
{
|
|
showNotification(
|
|
{
|
|
icon: <div style=
|
|
{
|
|
{
|
|
transform: "translate(0px, -2px) scale(1.5)"
|
|
}
|
|
}>
|
|
<ExclamationTriangleIcon/></div>,
|
|
color: 'orange',
|
|
message: 'Bitte alle Felder ausfüllen!'
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
if(formData.password !== formData.password2)
|
|
{
|
|
showNotification(
|
|
{
|
|
icon: <div style=
|
|
{
|
|
{
|
|
transform: "translate(0px, -2px) scale(1.5)"
|
|
}
|
|
}>
|
|
<ExclamationTriangleIcon/></div>,
|
|
color: 'orange',
|
|
message: 'Bitte 2mal das gleiche Passwort eingeben!'
|
|
});
|
|
return;
|
|
}
|
|
|
|
const data = await registerUser(formData);
|
|
if(data.success)
|
|
{
|
|
showNotification(
|
|
{
|
|
icon: <div style=
|
|
{
|
|
{
|
|
transform: "translate(0px, -2px) scale(2.2)"
|
|
}
|
|
}>
|
|
<CheckCircledIcon/></div>,
|
|
color: 'green',
|
|
message: 'Erfolgreich Registriert!'
|
|
});
|
|
e.currentTarget.reset();
|
|
}
|
|
else if(!data.success && data.message)
|
|
{
|
|
showNotification(
|
|
{
|
|
icon: <div style=
|
|
{
|
|
{
|
|
transform: "translate(0px, -2px) scale(2.2)"
|
|
}
|
|
}>
|
|
<CrossCircledIcon/></div>,
|
|
color: 'red',
|
|
message: data.message
|
|
});
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className='InputForm'>
|
|
<h2>Register</h2>
|
|
<div className='frameCenter'>
|
|
<div className='frame'>
|
|
<form onSubmit={submitForm}>
|
|
<Stack align="flex-start" sx={{textAlign: 'left'}}>
|
|
<TextInput
|
|
label = 'Email:'
|
|
type="email"
|
|
name="email"
|
|
onChange={onChangeInput}
|
|
placeholder="Deine Email"
|
|
id="email"
|
|
value={formData.email}
|
|
required />
|
|
<PasswordInput
|
|
sx = {{ maxWidth: '80vw', minWidth: '30vw', width: '300px' }}
|
|
label = 'Passwort:'
|
|
name="password"
|
|
onChange={onChangeInput}
|
|
placeholder="Passwort"
|
|
id="password" value={formData.password}
|
|
required/>
|
|
<PasswordInput
|
|
sx = {{ maxWidth: '80vw', minWidth: '30vw', width: '300px' }}
|
|
label = 'Passwort:'
|
|
name="password2"
|
|
onChange={onChangeInput}
|
|
placeholder="Passwort bestätigen"
|
|
id="password2" value={formData.password2}
|
|
required/>
|
|
</Stack>
|
|
<button type="submit" >Register</button>
|
|
<div className="bottom-link"><Link to="/login">Login</Link></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
export default Register; |