frontend: add logout button

src/main/frontend/src/components/Layout.tsx

@@ -1,18 +1,29 @@
-import {Outlet} from "react-router-dom";
+import {Outlet, useNavigate} from "react-router-dom";
+import {useAuth} from "@/components/Auth";
+import {Button} from "@/components/ui/button";
 
 function Layout() {
-  return (
-    <>
-        <nav className={"py-3 w-11/12 mx-auto"}>
-            <div className={"flex items-center bg-commerce-green rounded-full px-2 py-1 nav-shadow"}>
-                <img src={"/commerce_globe_45x48.png"} alt={"Logo"} />
+    const { signOut, user } = useAuth();
+    const navigate = useNavigate();
+
+    return (
+        <>
+            <nav className={"py-3 w-11/12 mx-auto"}>
+                <div className={"flex items-center justify-between bg-commerce-green rounded-full px-2 py-1 nav-shadow"}>
+                    <img src={"/commerce_globe_45x48.png"} alt={"Logo"} />
+                    {user &&
+                        <Button className={"rounded-full mr-2"} onClick={() => {
+                            signOut();
+                            navigate("/login");
+                        }} variant={"secondary"}>Logout</Button>
+                    }
+                </div>
+            </nav>
+            <div className={"grow flex flex-col justify-center items-center"}>
+                <Outlet />
             </div>
-        </nav>
-        <div className={"grow flex flex-col justify-center items-center"}>
-            <Outlet />
-        </div>
-    </>
-  );
+        </>
+    );
 }
 
 export default Layout;

src/main/frontend/src/components/ProtectedRoute.tsx

@@ -3,7 +3,6 @@ import {useAuth} from "@/components/Auth.tsx";
 
 function ProtectedRoute() {
     const {user} = useAuth();
-    console.log(`User2: ${user}`);
     if (user === undefined) {
         return <Navigate to={"/login"} replace />;
     }