umbennen von frontend zu frontend

frontend/src/components/Home.jsx

@@ -0,0 +1,28 @@
+import { useNavigate } from 'react-router-dom';
+
+function Home() {
+  const navigate = useNavigate();
+  const token = localStorage.getItem('token');
+  const role = localStorage.getItem('role');
+
+  return (
+    <div>
+      <h1>Willkommen bei den Tools</h1>
+      {!token ? (
+        <>
+          <p>Bitte logge dich ein oder registriere dich.</p>
+          <button onClick={() => navigate('/login')}>Login</button>
+          <button onClick={() => navigate('/register')}>Registrieren</button>
+        </>
+      ) : (
+        <>
+          <p>Willkommen zurück!</p>
+          <button onClick={() => navigate('/tools/md5')}>Zum MD5 Tool</button>
+          {role === 'admin' && <button onClick={() => navigate('/admin')}>Admin-Bereich</button>}
+        </>
+      )}
+    </div>
+  );
+}
+
+export default Home;

frontend/src/components/LoginForm.jsx

@@ -0,0 +1,32 @@
+// src/components/LoginForm.jsx
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import axios from '../services/api';
+
+function LoginForm() {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const navigate = useNavigate();
+
+  const login = async () => {
+    try {
+      const res = await axios.post('/login', { username, password });
+      localStorage.setItem('token', res.data.token);
+      localStorage.setItem('role', res.data.role);
+      navigate('/');
+    } catch (err) {
+      alert('Login fehlgeschlagen');
+    }
+  };
+
+  return (
+    <div>
+      <h2>Login</h2>
+      <input value={username} onChange={e => setUsername(e.target.value)} placeholder="Benutzername" />
+      <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Passwort" />
+      <button onClick={login}>Anmelden</button>
+    </div>
+  );
+}
+
+export default LoginForm;

frontend/src/components/LogoutButton.jsx

@@ -0,0 +1,16 @@
+import { useNavigate } from 'react-router-dom';
+
+function LogoutButton() {
+  const navigate = useNavigate();
+
+  const logout = () => {
+    localStorage.clear();
+    navigate('/login');
+  };
+
+  return (
+    <button onClick={logout}>Logout</button>
+  );
+}
+
+export default LogoutButton;

frontend/src/components/Md5Tool.jsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import axios from '../services/api';
+
+function Md5Tool() {
+  const [input, setInput] = useState('');
+  const [result, setResult] = useState('');
+
+  const hashPassword = async () => {
+    try {
+      const res = await axios.post('/hash/md5', { password: input });
+      setResult(res.data.md5);
+    } catch (err) {
+      alert('Fehler beim Hashen');
+    }
+  };
+
+  return (
+    <div>
+      <h2>MD5 Hasher</h2>
+      <input
+        type="text"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        placeholder="Gib ein Passwort ein"
+      />
+      <button onClick={hashPassword}>Hash berechnen</button>
+      {result && <p><strong>MD5:</strong> {result}</p>}
+    </div>
+  );
+}
+
+export default Md5Tool;

frontend/src/components/ToolsOverview.jsx

@@ -0,0 +1,23 @@
+import { useNavigate } from 'react-router-dom';
+import LogoutButton from './LogoutButton';
+
+function ToolOverview() {
+  const navigate = useNavigate();
+  const role = localStorage.getItem('role');
+
+  return (
+    <div>
+      <h2>Tool-Übersicht</h2>
+      <p>Wähle ein Tool aus:</p>
+
+      <button onClick={() => navigate('/tools/md5')}>MD5 Tool</button><br /><br />
+      {role === 'admin' && (
+        <button onClick={() => navigate('/admin')}>Admin-Bereich</button>
+      )}
+      <br /><br />
+      <LogoutButton />
+    </div>
+  );
+}
+
+export default ToolOverview;