mantine kjhkjh

src/components/Login.tsx

@@ -2,8 +2,12 @@ import {useState} from 'react';
 import { Link/*, useNavigate*/ } from 'react-router-dom';
 import './InputForm.css';
 import {getUser, loginUser} from '../services/PhpApi'
-import { toast, Toaster } from 'react-hot-toast';
 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';
+
 
 const Login = () => 
 {
@@ -19,10 +23,15 @@ const Login = () =>
 
     if (error)
     { 
-      toast.error(error.message);
+        showNotification(
+            {
+                icon: <CrossCircledIcon />,
+                color: 'red',
+                message: error.message
+            });
+
       return (
         <>
-          <Toaster toastOptions={{ position: "top-center" }} />
           <div>failed to load</div>
         </>);
     }
@@ -50,37 +59,67 @@ const Login = () =>
 
         if(!Object.values(formData).every(val => val.trim() !== ''))
         {
-            toast.error('Please Fill in all Required Fields!');
+            showNotification(
+                {
+                    icon: <ExclamationTriangleIcon/>,
+                    color: 'orange',
+                    message: 'Please Fill in all Required Fields!'
+                });
             return;
         }
 
         const logResp = await loginUser(formData);
         if(logResp.success)
         {
-            toast.success(logResp.message);
+            showNotification(
+                {
+                    icon: <CheckCircledIcon/>,
+                    color: 'green',
+                    message: logResp.message
+                });
             mutate(); // update swr
         }
         else
         {
-            toast.error(logResp.message);
+            // if(logResp.message === undefined)
+            // {
+            //     toast.error(logResp);
+            // }
+            // else
+            showNotification(
+                {
+                    icon: <CrossCircledIcon width={30}/>,
+                    color: 'red',
+                    message: logResp.message
+                });
         }
     }
 
     return (
         <div className='InputForm'>
-            <Toaster toastOptions={{ position: "top-center" }} />
             <h2>Login</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="Your email" id="email" value={formData.email} required />
-                </div>
-                <div className='neben'>
-                    <label htmlFor="password">Password:</label>
-                    <input type="password" name="password" onChange={onChangeInput} placeholder="New password" id="password" value={formData.password} 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="New password" 
+                    id="password" value={formData.password} 
+                    required/>
+                </Stack>
                 <button type="submit">Login</button>
                 <div className="bottom-link"><Link to="/reg">Register</Link></div>
                 <div className="bottom-link"><Link to="/wantnewpw">Passwort vergessen</Link></div>