passwort ändern

src/App.tsx

@@ -31,6 +31,7 @@ import { ModalsProvider } from '@mantine/modals';
 import { NotificationsProvider } from '@mantine/notifications';
 import { notificationAlert, notificationError, notificationSuccess } from './services/Notifications';
 import DogNavbar from './components/DogNavbar';
+import PasswordChange from './components/PasswordChange';
 
 const App: React.FC = () => 
 {
@@ -118,6 +119,7 @@ const App: React.FC = () =>
                   <Route path="/pwreset/:pwtoken" element={<PasswordReset/>} />
                   <Route path="/wantnewpw" element={<WantNewPw/>} />
                   {user && <Route path="/upload" element={<FileUpload/>} />}
+                  {user && <Route path="/chngpw" element={<PasswordChange/>} />}
                   {user && <Route path="/profil" element={<Profil/>} />}
               </Routes>
               </AppShell>

src/components/DogNavbar.tsx

@@ -64,6 +64,11 @@ function DogNavbar({hasUser, hidden, onLogout}:{hasUser: boolean, hidden: boolea
           <NaveBarIcon icon={<Icons.Grid size={32}/>} href={'/qr'} text={'QrCode drucken'} />
         }
       </Navbar.Section>
+      <Navbar.Section>
+        {hasUser && 
+          <NaveBarIcon icon={<Icons.Repeat size={32}/>} href={'/chngpw'} text={'Passwort ändern'} />
+        }
+      </Navbar.Section>
       <Navbar.Section className='InputForm' >
       {hasUser && 
         <div onClick={(e)=>{onLogout()}}>

src/components/PasswordChange.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { passwordReset, getUser } from '../services/PhpApi';
+import useSWR from 'swr';
+import './InputForm.css';
+import { notificationError, notificationSuccess } from '../services/Notifications';
+import { PasswordInput } from '@mantine/core';
+
+export default function PasswordChange()
+{
+    const [formData, setFormData] = useState({
+        password1:'',
+        password2:''
+    });
+
+    const { data, error, isLoading } = useSWR('pwchange', getUser);
+        if (error) return (<div>failed to load</div>);
+        if (isLoading) return (<div>loading...</div>);
+    
+    const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => {
+        setFormData({
+            ...formData,
+            [e.currentTarget.name]:e.currentTarget.value
+        })
+
+        //console.log(e.currentTarget.value);
+    }
+
+    if(!data.success)
+    {
+        notificationError('Kein Benutzer?!');
+    }
+
+    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => 
+    {
+        e.preventDefault();
+
+        if(!Object.values(formData).every(val => val.trim() !== ''))
+        {
+            notificationError('Bitte alle Felder ausfüllen!');
+            return;
+        }
+
+        if(formData.password1 !== formData.password2)
+        {
+            notificationError('Bitte 2mal das gleiche Passwort eingeben!');
+            return;
+        }
+
+        const sendData = new FormData();
+        const values = Object.values(formData);
+        const keys = Object.keys(formData);
+
+        for (const key of keys) 
+        {
+            const index = keys.indexOf(key);
+            sendData.append(key, values[index]);
+        }
+
+        sendData.append('id', data.data.id);
+ 
+        const dataRes = await passwordReset(sendData);
+        if(dataRes.success)
+        {
+            notificationSuccess('Erfolgreich Passwort geändert!');
+            e.currentTarget?.reset();
+        }
+        else if(!dataRes.success && dataRes.message)
+        {
+            notificationError(dataRes.message);
+        }
+    }
+
+    return ( 
+        <div className='InputForm'>
+            <h2>Passwort ändern!</h2>
+            <div className='frameCenter'>
+            <div className='frame'>
+            <form onSubmit={submitForm}>
+            <PasswordInput className='IF_pw'
+                    sx = {{  maxWidth: '80vw', minWidth: '30vw', width: '300px' }}
+                    label = 'Passwort:'
+                    name="password1" 
+                    onChange={onChangeInput} 
+                    placeholder="Passwort" 
+                    id="password1" 
+                    value={formData.password1} 
+                    required/>
+            <PasswordInput className='IF_pw'
+                    sx = {{  maxWidth: '80vw', minWidth: '30vw', width: '300px' }}
+                    label = 'Passwort wiederholen:'
+                    name="password2" 
+                    onChange={onChangeInput} 
+                    placeholder="Passwort bestätigen" 
+                    id="password2" 
+                    value={formData.password2} 
+                    required/>
+                <button type="submit" >Passwort setzen!</button>
+                <div className="bottom-link"><Link to="/login">Login</Link></div>
+            </form>
+            </div>
+            </div>
+        </div>
+    )
+} 

src/components/PreviewUpload.tsx

@@ -58,7 +58,7 @@ function PreviewUpload({chgFile}:{chgFile: any})
 //  return ( <></> );
   return (
     <div className = 'frameCenter'>
-      <FileInput
+      <FileInput 
 //        label = 'Datei :'
         name="file" 
         placeholder="Bild auswählen"