From 679ef7dcbd5a80da4a38a1e4bb7a7316a2f39368 Mon Sep 17 00:00:00 2001
From: Theis Gaedigk <theis.gaedigk@icloud.com>
Date: Fri, 19 Sep 2025 12:24:17 +0200
Subject: [PATCH] feat: implement Landingpage component and update Layout to
 conditionally render it

---
 admin/src/App.tsx                        |  4 +--
 admin/src/Layout/Layout.tsx              | 38 +++++++++++++++---------
 admin/src/components/API/Landingpage.tsx | 11 +++++++
 3 files changed, 36 insertions(+), 17 deletions(-)
 create mode 100644 admin/src/components/API/Landingpage.tsx

diff --git a/admin/src/App.tsx b/admin/src/App.tsx
index 2269c2e..f0933ae 100644
--- a/admin/src/App.tsx
+++ b/admin/src/App.tsx
@@ -4,9 +4,7 @@ import Layout from "./Layout/Layout";
 function App() {
   return (
     <>
-      <Layout>
-        <p></p>
-      </Layout>
+      <Layout />
     </>
   );
 }
diff --git a/admin/src/Layout/Layout.tsx b/admin/src/Layout/Layout.tsx
index b7df89a..f5d3f74 100644
--- a/admin/src/Layout/Layout.tsx
+++ b/admin/src/Layout/Layout.tsx
@@ -3,15 +3,20 @@ import { useEffect } from "react";
 import Dashboard from "./Dashboard";
 import Login from "./Login";
 import Cookies from "js-cookie";
+import Landingpage from "@/components/API/Landingpage";
 
-type LayoutProps = {
-  children: React.ReactNode;
-};
-
-const Layout: React.FC<LayoutProps> = ({ children }) => {
+const Layout: React.FC = () => {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [showAPI, setShowAPI] = useState(false);
 
   useEffect(() => {
+    const path = window.location.pathname.replace(/\/+$/, ""); // remove trailing slash
+    if (path === "/api") {
+      setShowAPI(true);
+      console.log("signal");
+      return;
+    }
+
     if (Cookies.get("token")) {
       const verifyToken = async () => {
         const response = await fetch("http://localhost:8002/api/verifyToken", {
@@ -37,17 +42,22 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
     setIsLoggedIn(false);
   };
 
-  return (
-    <>
+  if (showAPI) {
+    return (
       <main>
-        {isLoggedIn ? (
-          <Dashboard onLogout={() => handleLogout()} />
-        ) : (
-          <Login onSuccess={() => setIsLoggedIn(true)} />
-        )}
+        <Landingpage />
       </main>
-      {children}
-    </>
+    );
+  }
+
+  return (
+    <main>
+      {isLoggedIn ? (
+        <Dashboard onLogout={() => handleLogout()} />
+      ) : (
+        <Login onSuccess={() => setIsLoggedIn(true)} />
+      )}
+    </main>
   );
 };
 
diff --git a/admin/src/components/API/Landingpage.tsx b/admin/src/components/API/Landingpage.tsx
new file mode 100644
index 0000000..c0eef14
--- /dev/null
+++ b/admin/src/components/API/Landingpage.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+const Landingpage: React.FC = () => {
+  return (
+    <>
+      <h1>Übersicht über alle Gegenstände und Ausleihen</h1>
+    </>
+  );
+};
+
+export default Landingpage;