fixed sidebar and backend for sidebar

backend/routes/api.js

@@ -7,7 +7,10 @@ const router = express.Router();
 router.post("/login", async (req, res) => {
   const result = await loginFunc(req.body.username, req.body.password);
   if (result.success) {
-    const token = await generateToken({ username: req.body.username });
+    const token = await generateToken({
+      username: result.data.username,
+      role: result.data.role,
+    });
     res.status(200).json({ message: "Login successful", token });
   } else {
     res.status(401).json({ message: "Invalid credentials" });
@@ -15,7 +18,8 @@ router.post("/login", async (req, res) => {
 });
 
 router.get("/items", authenticate, async (req, res) => {
-  const result = await getItemsFromDatabase();
+  console.log(req);
+  const result = await getItemsFromDatabase(req.user.role);
   if (result.success) {
     res.status(200).json(result.data);
   } else {

backend/services/database.js

@@ -17,14 +17,21 @@ export const loginFunc = async (username, password) => {
     "SELECT * FROM users WHERE username = ? AND password = ?",
     [username, password]
   );
-  if (result.length > 0) return { success: true };
+  if (result.length > 0) return { success: true, data: result[0] };
   return { success: false };
 };
 
-export const getItemsFromDatabase = async () => {
-  const [result] = await pool.query("SELECT * FROM items");
-  if (result.length > 0) {
-    return { success: true, data: result };
+export const getItemsFromDatabase = async (role) => {
+  const sql =
+    role == 0
+      ? "SELECT * FROM items;"
+      : "SELECT * FROM items WHERE can_borrow_role >= ?";
+  const params = role == 0 ? [] : [role];
+
+  const [rows] = await pool.query(sql, params);
+  if (rows.length > 0) {
+    return { success: true, data: rows };
   }
   return { success: false };
 };
+

frontend/src/components/Header.tsx

@@ -13,6 +13,8 @@ const Header: React.FC = () => {
       <button
         onClick={() => {
           Cookies.remove("token");
+          localStorage.removeItem("allItems");
+
           window.location.reload();
         }}
         className="text-blue-500 hover:underline"

frontend/src/components/Sidebar.tsx

@@ -32,7 +32,12 @@ const Sidebar: React.FC = () => {
             key={item.item_name}
             className="bg-white/80 rounded-xl p-4 shadow hover:shadow-md transition"
           >
-            <Object title={item.item_name} description={"test"} />
+            <Object
+              title={item.item_name}
+              description={
+                item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
+              }
+            />
           </div>
         ))}
       </div>
@@ -40,8 +45,8 @@ const Sidebar: React.FC = () => {
       <div className="mt-6 text-xs text-gray-400 flex items-center gap-4">
         <span className="inline-block w-3 h-3 bg-green-400 rounded-full"></span>
         Verfügbar
-        <span className="inline-block w-3 h-3 bg-blue-400 rounded-full"></span>
-        Verliehen
+        <span className="inline-block w-3 h-3 bg-red-400 rounded-full"></span>
+        Außerhalb des Schließfachs
       </div>
     </aside>
   );