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

icons neu, toaster weg

Browse Source
This commit is contained in:
Peter Hoppe
2023-02-16 10:54:33 +01:00
parent 71fed22a2a
commit 3d04de84fa
2 changed files with 108 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/Login.tsx
View File

@ -5,7 +5,6 @@ import {getUser, loginUser} from '../services/PhpApi'
import useSWR from 'swr';
import { PasswordInput, Stack, TextInput } from '@mantine/core';
import { showNotification } from '@mantine/notifications';
//import {IonIcon} from '@ionic/react'
import { CheckCircledIcon, CrossCircledIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
@ -25,7 +24,13 @@ const Login = () =>
{
showNotification(
{
icon: <CrossCircledIcon />,
icon: <div style=
{
{
transform: "translate(0px, -2px) scale(2.2)"
}
}>
<CrossCircledIcon/></div>,
color: 'red',
message: error.message
});
@ -61,9 +66,15 @@ const Login = () =>
{
showNotification(
{
icon: <ExclamationTriangleIcon/>,
icon: <div style=
{
{
transform: "translate(0px, -2px) scale(1.5)"
}
}>
<ExclamationTriangleIcon/></div>,
color: 'orange',
message: 'Please Fill in all Required Fields!'
message: 'Bitte alle Felder ausfüllen!'
});
return;
}
@ -73,7 +84,13 @@ const Login = () =>
{
showNotification(
{
icon: <CheckCircledIcon/>,
icon: <div style=
{
{
transform: "translate(0px, -2px) scale(2.2)"
}
}>
<CheckCircledIcon/></div>,
color: 'green',
message: logResp.message
});
@ -88,7 +105,13 @@ const Login = () =>
// else
showNotification(
{
icon: <CrossCircledIcon width={30}/>,
icon: <div style=
{
{
transform: "translate(0px, -2px) scale(2.2)"
}
}>
<CrossCircledIcon/></div>,
color: 'red',
message: logResp.message
});

97
src/components/Register.tsx
View File

@ -1,8 +1,10 @@
import {useState} from 'react'
import {Link} from 'react-router-dom'
import toast, { Toaster } from 'react-hot-toast';
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 = () =>
{
@ -25,47 +27,106 @@ const Register = () =>
if(!Object.values(formData).every(val => val.trim() !== ''))
{
toast.error('Bitte alle Felder ausfüllen!');
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)
{
toast.error('Bitte 2mal das gleiche Passwort eingeben!');
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)
{
toast.success('Erfolgreich Registriert!');
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)
{
toast.error(data.message);
showNotification(
{
icon: <div style=
{
{
transform: "translate(0px, -2px) scale(2.2)"
}
}>
<CrossCircledIcon/></div>,
color: 'red',
message: data.message
});
}
}
return (
<div className='InputForm'>
<Toaster toastOptions={{ position: "top-center" }} />
<h2>Register</h2>
<div className='frameCenter'>
<div className='frame'>
<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>
<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>