add logout button

package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.3.1",
     "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-icons": "^1.3.0",

setup.py

@@ -8,7 +8,7 @@
     # Versions should comply with PEP440.  For a discussion on single-sourcing
     # the version across setup.py and the project code, see
     # https://packaging.python.org/en/latest/single_source_version.html
-    version="0.0.9",
+    version="0.0.11",
     packages=[
         "collapsar",
         "collapsar.config",

src/collapsar/assets/js/components/Header.tsx

@@ -1,6 +1,16 @@
+import { BiUser } from "react-icons/bi"
 import { ThemeToggle } from "./ThemeToggle";
+import { Button } from "./ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@radix-ui/react-dropdown-menu";
 
 export function Header() {
+  const user = window.Collapsar.user
+
   return (
     <div className="flex p-5">
       <div className="ml-auto header--actions">

src/collapsar/assets/js/components/ThemeToggle.tsx

@@ -1,4 +1,4 @@
-import { BiMoon as Moon, BiSun as Sun } from "react-icons/bi"
+import { BiUser } from "react-icons/bi"
 
 import { Button } from "@/components/ui/button"
 import {
@@ -8,6 +8,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { useTheme } from "@/components/theme-provider"
+import { useNavigate } from "react-router-dom"
 
 export function ThemeToggle() {
   const { setTheme } = useTheme()
@@ -16,20 +17,19 @@ export function ThemeToggle() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="outline" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
+          <BiUser className="h-[1.2rem] w-[1.2rem] transition-all" />
+          <span className="sr-only">User menu</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
+          Light theme
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
+          Dark theme
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
+        <DropdownMenuItem onClick={() => location.replace("/collapsar/auth/logout")}>
+          Logout
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>

src/collapsar/assets/js/components/ui/avatar.tsx

@@ -0,0 +1,48 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

src/collapsar/helpers/DashboardHelper.py

@@ -18,6 +18,19 @@ def register_resource(self, resource):
         """Register a resource."""
         self.resources.append(resource)
 
+    def get_user(self):
+        """Return the user."""
+        user = self.application.make("auth").user()
+
+        if user:
+            return {
+                "name": user.name,
+                "email": user.email,
+                "id": user.id,
+            }
+
+        return None
+
     def get_resources_navigation(self):
         """Return the resources navigation."""
         resources = (

src/collapsar/templates/admin/index.html

@@ -3,13 +3,14 @@
 {% block title %}Collapsar Admin{% endblock %}
 
 {% block head_scripts %}
+
 <script>
     window.Collapsar = {
       sidebar: {
         items: {{ dashboard_helper.get_resources_navigation() | json_encode() | safe}}
       },
       token: document.head.querySelector('meta[name="csrf-token"]').content,
-      user: {% if auth.user %} {{ auth.user | json_encode() | safe }} {% else %} {{ "null" }} {% endif %}
+      user: {{ dashboard_helper.get_user() | json_encode() | safe }}
     }
 </script>
 {% endblock %}