LogoutButton

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>
   );

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;

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;