From 6530638141bf1bb5d52f3a51e328995cc8264c64 Mon Sep 17 00:00:00 2001
From: Nirodan <nirodan.production@gmail.com>
Date: Sat, 14 Jun 2025 13:39:46 +0200
Subject: [PATCH] LogoutButton

---
 react-md5-tools/src/App.jsx                   |  8 ++++--
 react-md5-tools/src/components/Home.jsx       | 28 +++++++++++++++++++
 .../src/components/LogoutButton.jsx           | 16 +++++++++++
 3 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 react-md5-tools/src/components/Home.jsx
 create mode 100644 react-md5-tools/src/components/LogoutButton.jsx

diff --git a/react-md5-tools/src/App.jsx b/react-md5-tools/src/App.jsx
index b58d1b2..cb112d8 100644
--- a/react-md5-tools/src/App.jsx
+++ b/react-md5-tools/src/App.jsx
@@ -3,6 +3,7 @@ import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import LoginForm from './components/LoginForm';
 //import RegisterForm from './components/RegisterForm';
 //import ToolOverview from './components/ToolOverview';
+import Home from './components/Home';
 
 function App() {
   const isLoggedIn = localStorage.getItem('token') !== null;
@@ -11,11 +12,12 @@ function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={isLoggedIn ? <ToolOverview /> : <Navigate to="/login" />} />
+        {/*<Route path="/" element={isLoggedIn ? <ToolOverview /> : <Navigate to="/login" />} />*/}
         <Route path="/login" element={<LoginForm />} />
-        <Route path="/register" element={<RegisterForm />} />
-        {/*<Route path="/tools/md5" element={isLoggedIn ? <Md5Tool /> : <Navigate to="/login" />} />*/}
+        {/*<Route path="/register" element={<RegisterForm />} />*/}
+        <Route path="/tools/md5" element={isLoggedIn ? <Md5Tool /> : <Navigate to="/login" />} />
         {/*<Route path="/admin" element={isLoggedIn && role === 'admin' ? <AdminDashboard /> : <Navigate to="/" />} />*/}
+        <Route path="/" element={<Home />} />
       </Routes>
     </BrowserRouter>
   );
diff --git a/react-md5-tools/src/components/Home.jsx b/react-md5-tools/src/components/Home.jsx
new file mode 100644
index 0000000..bcc7081
--- /dev/null
+++ b/react-md5-tools/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;
diff --git a/react-md5-tools/src/components/LogoutButton.jsx b/react-md5-tools/src/components/LogoutButton.jsx
new file mode 100644
index 0000000..d343282
--- /dev/null
+++ b/react-md5-tools/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;