added logout function and enhanced greeting

FrontendV2/src/App.tsx

@@ -8,6 +8,7 @@ import Cookies from "js-cookie";
 import { useAtom } from "jotai";
 import { setIsLoggedInAtom } from "@/states/Atoms";
 import { UserContext, type User } from "./states/Context";
+import { triggerLogoutAtom } from "@/states/Atoms";
 
 const API_BASE =
   (import.meta as any).env?.VITE_BACKEND_URL ||
@@ -16,8 +17,9 @@ const API_BASE =
 
 function App() {
   const [user, setUser] = useState<User | undefined>(undefined);
-
   const [, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
+  const [, setTriggerLogout] = useAtom(triggerLogoutAtom);
+
   useEffect(() => {
     if (Cookies.get("token")) {
       const verifyToken = async () => {
@@ -28,6 +30,7 @@ function App() {
           },
         });
         if (response.ok) {
+          setTriggerLogout(false);
           const data = await response.json();
           setUser({ username: data.user.username, role: data.user.role });
           setIsLoggedIn(true);

FrontendV2/src/pages/HomePage.tsx

@@ -1,4 +1,16 @@
 import { useUserContext } from "@/states/Context";
+import {
+  Container,
+  Stack,
+  Heading,
+  Text,
+  Badge,
+  Flex,
+  Button,
+} from "@chakra-ui/react";
+import { triggerLogoutAtom, setIsLoggedInAtom } from "@/states/Atoms";
+import { useAtom } from "jotai";
+import Cookies from "js-cookie";
 
 export interface User {
   username: string;
@@ -7,12 +19,56 @@ export interface User {
 
 export const HomePage = () => {
   const userData = useUserContext();
+  const [, setTriggerLogout] = useAtom(triggerLogoutAtom);
+  const [, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
 
   return (
-    <div>
-      <h1>Home Page</h1>
-      <p>Welcome, {userData.username}!</p>
-      <p>Your role is: {userData.role}</p>
-    </div>
+    <Container maxW="7xl" className="px-6 sm:px-8 pt-10">
+      <Stack as="header" gap={3} className="mb-16">
+        <Flex
+          direction={{ base: "column", md: "row" }}
+          align={{ base: "stretch", md: "center" }}
+          justify="space-between"
+          gap={4}
+        >
+          <Stack gap={2}>
+            <Heading
+              size="2xl"
+              className="tracking-tight text-slate-900 dark:text-slate-100"
+            >
+              Home
+            </Heading>
+            <Stack
+              direction={{ base: "column", sm: "row" }}
+              gap={2}
+              alignItems="start"
+            >
+              <Text
+                fontSize="md"
+                className="text-slate-600 dark:text-slate-400"
+              >
+                Willkommen zurück, {userData.username}!
+              </Text>
+              <Badge variant="subtle" px={2} py={1} borderRadius="full">
+                Rolle: {userData.role}
+              </Badge>
+            </Stack>
+          </Stack>
+
+          <Button
+            onClick={() => {
+              Cookies.remove("token");
+              setIsLoggedIn(false);
+              setTriggerLogout(true);
+            }}
+            variant="solid"
+            size="sm"
+            className="self-start md:self-auto"
+          >
+            Logout
+          </Button>
+        </Flex>
+      </Stack>
+    </Container>
   );
 };

FrontendV2/src/pages/LoginPage.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import MyAlert from "../components/myChakra/MyAlert";
 import { Button, Card, Field, Input, Stack } from "@chakra-ui/react";
-import { setIsLoggedInAtom } from "@/states/Atoms";
+import { setIsLoggedInAtom, triggerLogoutAtom } from "@/states/Atoms";
 import { useAtom } from "jotai";
 import Cookies from "js-cookie";
 import { Navigate, useNavigate } from "react-router-dom";
@@ -13,6 +13,7 @@ const API_BASE =
 
 export const LoginPage = () => {
   const [isLoggedIn, setIsLoggedIn] = useAtom(setIsLoggedInAtom);
+  const [triggerLogout, setTriggerLogout] = useAtom(triggerLogoutAtom);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -57,6 +58,7 @@ export const LoginPage = () => {
       setIsError(true);
       return;
     }
+    setTriggerLogout(false);
     navigate("/", { replace: true });
   };
 
@@ -98,9 +100,18 @@ export const LoginPage = () => {
               <MyAlert status="error" title={errorMsg} description={errorDsc} />
             )}
             <Button type="submit" onClick={() => handleLogin()} variant="solid">
-              Login <p>{isLoggedIn}</p>
+              Login
             </Button>
           </Card.Footer>
+          <Card.Footer justifyContent="flex-end">
+            {triggerLogout && (
+              <MyAlert
+                status="success"
+                title={"Logout erfolgreich!"}
+                description={"Sie wurden erfolgreich abgemeldet."}
+              />
+            )}
+          </Card.Footer>
         </Card.Root>
       </form>
     </div>

FrontendV2/src/states/Atoms.tsx

@@ -1,4 +1,5 @@
 import { atom } from "jotai";
 
 export const testAtom = atom<number>(0);
-export const setIsLoggedInAtom = atom<boolean>(false);
+export const setIsLoggedInAtom = atom<boolean>(false);
+export const triggerLogoutAtom = atom<boolean>(false);