implement logout and profile

.devcontainer/devcontainer.json

@@ -10,10 +10,14 @@
   "features": {
     "ghcr.io/devcontainers/features/common-utils:1": {}
   },
-  "forwardPorts": [5000, 5001, 5173, 8554, 8555],
+  "forwardPorts": [8080, 5000, 5001, 5173, 8554, 8555],
   "portsAttributes": {
+    "8080": {
+      "label": "External NGINX",
+      "onAutoForward": "silent"
+    },
     "5000": {
-      "label": "NGINX",
+      "label": "Internal NGINX",
       "onAutoForward": "silent"
     },
     "5001": {

frigate/api/auth.py

@@ -252,6 +252,20 @@ def auth():
         return fail_response
 
 
+@AuthBp.route("/profile")
+def profile():
+    username = request.headers.get("remote-user", type=str)
+    return jsonify({"username": username})
+
+
+@AuthBp.route("/logout", methods=["POST"])
+def logout():
+    JWT_COOKIE_NAME = current_app.frigate_config.auth.cookie_name
+    response = make_response({}, 200)
+    response.delete_cookie(JWT_COOKIE_NAME)
+    return response
+
+
 @AuthBp.route("/login", methods=["POST"])
 @limiter.limit(get_rate_limit, deduct_when=lambda response: response.status_code == 400)
 def login():

web/src/components/menu/AccountSettings.tsx

@@ -7,31 +7,89 @@ import { cn } from "@/lib/utils";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { isDesktop } from "react-device-detect";
 import { VscAccount } from "react-icons/vsc";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
+import { DialogClose } from "../ui/dialog";
+import { LuLogOut } from "react-icons/lu";
+import { useCallback } from "react";
+import axios from "axios";
+import useSWR from "swr";
 
 type AccountSettingsProps = {
   className?: string;
 };
 export default function AccountSettings({ className }: AccountSettingsProps) {
+  const { data: profile } = useSWR("profile");
+
+  const handleLogout = useCallback(() => {
+    axios.post(`logout`).then((response) => {
+      if (response.status == 200) {
+        window.location.href = "/";
+      }
+    });
+  }, []);
+
+  const Container = isDesktop ? DropdownMenu : Drawer;
+  const Trigger = isDesktop ? DropdownMenuTrigger : DrawerTrigger;
+  const Content = isDesktop ? DropdownMenuContent : DrawerContent;
+  const MenuItem = isDesktop ? DropdownMenuItem : DialogClose;
+
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <div
-          className={cn(
-            "flex flex-col items-center justify-center",
-            isDesktop
-              ? "cursor-pointer rounded-lg bg-secondary text-secondary-foreground hover:bg-muted"
-              : "text-secondary-foreground",
-            className,
-          )}
+    <div className={className}>
+      <Container>
+        <Trigger asChild>
+          <a href="#">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div
+                  className={cn(
+                    "flex flex-col items-center justify-center",
+                    isDesktop
+                      ? "cursor-pointer rounded-lg bg-secondary text-secondary-foreground hover:bg-muted"
+                      : "text-secondary-foreground",
+                    className
+                  )}
+                >
+                  <VscAccount className="size-5 md:m-[6px]" />
+                </div>
+              </TooltipTrigger>
+              <TooltipPortal>
+                <TooltipContent side="right">
+                  <p>Account</p>
+                </TooltipContent>
+              </TooltipPortal>
+            </Tooltip>
+          </a>
+        </Trigger>
+        <Content
+          className={
+            isDesktop ? "w-72 mr-5" : "max-h-[75dvh] p-2 overflow-hidden"
+          }
         >
-          <VscAccount className="size-5 md:m-[6px]" />
-        </div>
-      </TooltipTrigger>
-      <TooltipPortal>
-        <TooltipContent side="right">
-          <p>Account</p>
-        </TooltipContent>
-      </TooltipPortal>
-    </Tooltip>
+          <div className="w-full flex-col overflow-y-auto overflow-x-hidden">
+            <DropdownMenuLabel>
+              Current User: {profile?.username}
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator className={isDesktop ? "mt-3" : "mt-1"} />
+            <MenuItem
+              className={
+                isDesktop ? "cursor-pointer" : "p-2 flex items-center text-sm"
+              }
+              onClick={() => handleLogout()}
+            >
+              <LuLogOut className="mr-2 size-4" />
+              <span>Logout</span>
+            </MenuItem>
+          </div>
+        </Content>
+      </Container>
+    </div>
   );
 }

web/src/components/settings/Authentication.tsx

@@ -34,15 +34,13 @@ export default function Authentication() {
       })
       .then((response) => {
         if (response.status == 200) {
-          // console.log("saved");
+          setShowSetPassword(false);
         }
       })
-      .catch((error) => {
-        if (error.response?.data?.message) {
-          // console.log("error");
-        } else {
-          // console.log("error");
-        }
+      .catch((_error) => {
+        toast.error("Error setting password", {
+          position: "top-center",
+        });
       });
   }, []);
 

web/vite.config.ts

@@ -4,6 +4,8 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import monacoEditorPlugin from "vite-plugin-monaco-editor";
 
+const proxyHost = "localhost:5000";
+
 // https://vitejs.dev/config/
 export default defineConfig({
   define: {
@@ -12,24 +14,24 @@ export default defineConfig({
   server: {
     proxy: {
       "/api": {
-        target: "http://localhost:5000",
+        target: `http://${proxyHost}`,
         ws: true,
       },
       "/vod": {
-        target: "http://localhost:5000",
+        target: `http://${proxyHost}`,
       },
       "/clips": {
-        target: "http://localhost:5000",
+        target: `http://${proxyHost}`,
       },
       "/exports": {
-        target: "http://localhost:5000",
+        target: `http://${proxyHost}`,
       },
       "/ws": {
-        target: "ws://localhost:5000",
+        target: `ws://${proxyHost}`,
         ws: true,
       },
       "/live": {
-        target: "ws://localhost:5000",
+        target: `ws://${proxyHost}`,
         changeOrigin: true,
         ws: true,
       },