From 3d04de84fa148e30b82ff453aae78d73681e7c8c Mon Sep 17 00:00:00 2001
From: Peter Hoppe <p.hoppe@gmx.de>
Date: Thu, 16 Feb 2023 10:54:33 +0100
Subject: [PATCH] icons neu, toaster weg

---
 src/components/Login.tsx    | 35 ++++++++++---
 src/components/Register.tsx | 97 ++++++++++++++++++++++++++++++-------
 2 files changed, 108 insertions(+), 24 deletions(-)

diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index b39b890..1ceb069 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -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
                 });
diff --git a/src/components/Register.tsx b/src/components/Register.tsx
index 685c809..b5c5f44 100644
--- a/src/components/Register.tsx
+++ b/src/components/Register.tsx
@@ -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>