xladmin 0.5.0 → 0.6.0

package/README.md

@@ -34,6 +34,7 @@ You also need one router adapter:
 - `createAxiosAdminClient(...)`
 - `createFetchAdminClient(...)`
 - `createBrowserAdminRouter(...)`
+- `AdminCurrentUser`
 - admin types, i18n helpers, and default theme
 
 ## Minimal Example
@@ -67,6 +68,48 @@ export function AdminApp() {
 
 For framework routing, use one of the adapter packages instead of the default browser router.
 
+## Current User And Logout
+
+`Shell` shows a compact current-user panel pinned to the bottom of the sidebar when a user is available.
+By default it calls:
+
+- `client.getCurrentUser()` -> `GET /xladmin/me/`
+- `client.logout()` -> `POST /xladmin/logout/`
+
+After logout, `Shell` redirects to `/login`.
+
+```tsx
+<Shell
+  client={client}
+  models={models}
+  blocks={blocks}
+  basePath="/admin"
+  loginPath="/login"
+>
+  {content}
+</Shell>
+```
+
+If your application already has the user or a custom logout flow, pass them explicitly:
+
+```tsx
+<Shell
+  client={client}
+  models={models}
+  blocks={blocks}
+  basePath="/admin"
+  currentUser={{login: auth.user.email}}
+  onLogout={async () => {
+    await auth.logout();
+  }}
+  loginPath="/sign-in"
+>
+  {content}
+</Shell>
+```
+
+Set `currentUser={null}` to hide the sidebar user panel.
+
 ## Development
 
 ```bash

package/dist/client.d.ts

@@ -1,4 +1,4 @@
-import type { AdminChoicesResponse, AdminDeletePreviewResponse, AdminDetailResponse, AdminListResponse, AdminModelMeta, AdminModelsResponse, AdminObjectActionResponse } from './types';
+import type { AdminChoicesResponse, AdminDeletePreviewResponse, AdminDetailResponse, AdminCurrentUser, AdminListResponse, AdminModelMeta, AdminModelsResponse, AdminObjectActionResponse } from './types';
 export type AdminRequestOptions = {
     signal?: AbortSignal;
 };
@@ -11,6 +11,8 @@ export type AdminSelectionOptions = {
     selectionScope?: AdminSelectionScope;
 };
 export type AdminClient = {
+    getCurrentUser: () => Promise<AdminCurrentUser>;
+    logout: () => Promise<void>;
     getModels: () => Promise<AdminModelsResponse>;
     getModel: (slug: string) => Promise<AdminModelMeta>;
     getItems: (slug: string, params?: {

package/dist/components/Shell.d.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { type Theme } from '@mui/material/styles';
 import type { AdminClient } from '../client';
 import type { AdminRouter } from '../router';
-import type { AdminModelMeta, AdminModelsBlockMeta } from '../types';
+import type { AdminCurrentUser, AdminModelMeta, AdminModelsBlockMeta } from '../types';
 type AdminShellProps = {
     client: AdminClient;
     models: AdminModelMeta[];
@@ -12,7 +12,10 @@ type AdminShellProps = {
     children: ReactNode;
     theme?: Theme;
     router?: AdminRouter;
+    currentUser?: AdminCurrentUser | string | null;
+    loginPath?: string | null;
+    onLogout?: () => void | Promise<void>;
 };
 export type ShellProps = AdminShellProps;
-export declare function Shell({ client, models, blocks, basePath, locale, children, theme, router }: ShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function Shell({ client, models, blocks, basePath, locale, children, theme, router, currentUser, loginPath, onLogout, }: ShellProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/layout/Sidebar.d.ts

@@ -1,8 +1,11 @@
-import type { AdminModelMeta, AdminModelsBlockMeta } from '@xladmin-core/types';
+import type { AdminCurrentUser, AdminModelMeta, AdminModelsBlockMeta } from '@xladmin-core/types';
 type SidebarProps = {
     models: AdminModelMeta[];
     blocks: AdminModelsBlockMeta[];
     basePath: string;
+    currentUser?: AdminCurrentUser | null;
+    isLoggingOut?: boolean;
+    onLogout?: () => void;
 };
 export declare const Sidebar: import("react").NamedExoticComponent<SidebarProps>;
 export {};

package/dist/index.js

@@ -1,6 +1,12 @@
 // src/client.ts
 function createAdminClient(transport) {
   return {
+    async getCurrentUser() {
+      return await transportGet(transport, "/xladmin/me/");
+    },
+    async logout() {
+      await transportPost(transport, "/xladmin/logout/", {});
+    },
     async getModels() {
       return await transportGet(transport, "/xladmin/models/");
     },
@@ -148,7 +154,14 @@ function isWrappedTransportResponse(response) {
 }
 async function requestJson(fetchImpl, config, method, url, body, params, signal) {
   const response = await requestRaw(fetchImpl, config, method, url, body, params, signal);
-  return await response.json();
+  if (response.status === 204) {
+    return void 0;
+  }
+  const text = await response.text();
+  if (!text.trim()) {
+    return void 0;
+  }
+  return JSON.parse(text);
 }
 async function requestRaw(fetchImpl, config, method, url, body, params, signal) {
   var _a;
@@ -5063,7 +5076,7 @@ function ObjectPage({ client, slug, id, router }) {
 }
 
 // src/components/Shell.tsx
-import { useEffect as useEffect14, useMemo as useMemo11, useState as useState13 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect14, useMemo as useMemo11, useState as useState13 } from "react";
 import { Box as Box17, CssBaseline, Drawer, GlobalStyles, Stack as Stack14, useMediaQuery as useMediaQuery4 } from "@mui/material";
 import { ThemeProvider } from "@mui/material/styles";
 
@@ -5234,7 +5247,8 @@ function Main({ children }) {
 
 // src/components/layout/Sidebar.tsx
 import { memo as memo8, useEffect as useEffect13, useRef as useRef7 } from "react";
-import { Box as Box16, ListItemButton as ListItemButton3, Typography as Typography8 } from "@mui/material";
+import LogoutIcon from "@mui/icons-material/Logout";
+import { Box as Box16, IconButton as IconButton5, ListItemButton as ListItemButton3, Tooltip as Tooltip2, Typography as Typography8 } from "@mui/material";
 import { jsx as jsx27, jsxs as jsxs19 } from "react/jsx-runtime";
 function getOffsetTopWithinContainer(element, container) {
   let offsetTop = element.offsetTop;
@@ -5245,7 +5259,14 @@ function getOffsetTopWithinContainer(element, container) {
   }
   return offsetTop;
 }
-var Sidebar = memo8(function Sidebar2({ models, blocks, basePath }) {
+var Sidebar = memo8(function Sidebar2({
+  models,
+  blocks,
+  basePath,
+  currentUser,
+  isLoggingOut = false,
+  onLogout
+}) {
   var _a;
   const t = useAdminTranslation();
   const { pathname } = useAdminLocation();
@@ -5328,59 +5349,123 @@ var Sidebar = memo8(function Sidebar2({ models, blocks, basePath }) {
       }
     };
   }, [activeModelSlug, blocks]);
-  return /* @__PURE__ */ jsx27(Box16, { sx: { height: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs19(Box16, { sx: { height: "100%", overflow: "hidden", display: "flex", flexDirection: "column", minHeight: 0 }, children: [
+    /* @__PURE__ */ jsx27(
+      Box16,
+      {
+        ref: scrollContainerRef,
+        sx: {
+          flex: 1,
+          minHeight: 0,
+          overflowY: "scroll",
+          overflowX: "hidden",
+          scrollbarGutter: "stable",
+          direction: "rtl",
+          ml: 0,
+          pl: 0
+        },
+        children: /* @__PURE__ */ jsxs19(Box16, { sx: { direction: "ltr", pl: 1 }, children: [
+          /* @__PURE__ */ jsx27(
+            NavLink,
+            {
+              href: basePath,
+              style: { textDecoration: "none", display: "block" },
+              onClick: () => startPendingNavigation(basePath, "overview"),
+              children: /* @__PURE__ */ jsx27(
+                ListItemButton3,
+                {
+                  selected: isOverviewActive,
+                  sx: {
+                    mb: 2,
+                    borderRadius: "8px",
+                    backgroundColor: isOverviewActive ? "rgba(255, 255, 255, 0.18)" : "rgba(255, 255, 255, 0.035)",
+                    boxShadow: isOverviewActive ? "inset 0 0 0 1px rgba(255, 255, 255, 0.08)" : "none",
+                    "&:hover": {
+                      backgroundColor: isOverviewActive ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.055)"
+                    }
+                  },
+                  children: /* @__PURE__ */ jsx27(Typography8, { variant: "subtitle1", sx: { fontWeight: 700 }, children: t("overview") })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx27(
+            ModelsBlocks,
+            {
+              models,
+              blocks,
+              basePath,
+              variant: "sidebar",
+              activeModelSlug,
+              onModelNavigate: (href) => startPendingNavigation(href, "model")
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx27(SidebarCurrentUser, { currentUser, isLoggingOut, onLogout })
+  ] });
+});
+function SidebarCurrentUser({ currentUser, isLoggingOut, onLogout }) {
+  if (!currentUser) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs19(
     Box16,
     {
-      ref: scrollContainerRef,
       sx: {
-        height: "100%",
-        overflowY: "scroll",
-        overflowX: "hidden",
-        scrollbarGutter: "stable",
-        direction: "rtl",
-        ml: 0,
-        pl: 0
+        flexShrink: 0,
+        ml: 1,
+        mt: 1.25,
+        borderRadius: "8px",
+        backgroundColor: "rgba(255, 255, 255, 0.02)",
+        boxShadow: "inset 0 0 0 1px rgba(255, 255, 255, 0.03)",
+        display: "flex",
+        alignItems: "center",
+        minHeight: 44,
+        px: 1,
+        gap: 1
       },
-      children: /* @__PURE__ */ jsxs19(Box16, { sx: { direction: "ltr", pl: 1 }, children: [
+      children: [
         /* @__PURE__ */ jsx27(
-          NavLink,
+          Typography8,
           {
-            href: basePath,
-            style: { textDecoration: "none", display: "block" },
-            onClick: () => startPendingNavigation(basePath, "overview"),
-            children: /* @__PURE__ */ jsx27(
-              ListItemButton3,
-              {
-                selected: isOverviewActive,
-                sx: {
-                  mb: 2,
-                  borderRadius: "8px",
-                  backgroundColor: isOverviewActive ? "rgba(255, 255, 255, 0.18)" : "rgba(255, 255, 255, 0.035)",
-                  boxShadow: isOverviewActive ? "inset 0 0 0 1px rgba(255, 255, 255, 0.08)" : "none",
-                  "&:hover": {
-                    backgroundColor: isOverviewActive ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.055)"
-                  }
-                },
-                children: /* @__PURE__ */ jsx27(Typography8, { variant: "subtitle1", sx: { fontWeight: 700 }, children: t("overview") })
-              }
-            )
+            title: currentUser.login,
+            sx: {
+              flex: 1,
+              minWidth: 0,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              fontSize: 13,
+              fontWeight: 650
+            },
+            children: currentUser.login
           }
         ),
-        /* @__PURE__ */ jsx27(
-          ModelsBlocks,
+        onLogout ? /* @__PURE__ */ jsx27(Tooltip2, { title: "Logout", children: /* @__PURE__ */ jsx27("span", { children: /* @__PURE__ */ jsx27(
+          IconButton5,
           {
-            models,
-            blocks,
-            basePath,
-            variant: "sidebar",
-            activeModelSlug,
-            onModelNavigate: (href) => startPendingNavigation(href, "model")
+            "aria-label": "Logout",
+            size: "small",
+            disabled: isLoggingOut,
+            onClick: onLogout,
+            sx: {
+              width: 32,
+              height: 32,
+              color: "text.secondary",
+              "&:hover": {
+                backgroundColor: "rgba(255, 255, 255, 0.08)",
+                color: "text.primary"
+              }
+            },
+            children: /* @__PURE__ */ jsx27(LogoutIcon, { sx: { fontSize: 18 } })
           }
-        )
-      ] })
+        ) }) }) : null
+      ]
     }
-  ) });
-});
+  );
+}
 
 // src/components/Shell.tsx
 import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
@@ -5388,8 +5473,19 @@ function normalizeAdminPath(path) {
   const normalizedPath = path.endsWith("/") && path !== "/" ? path.slice(0, -1) : path;
   return normalizedPath.replace(/^\/(ru|en)(?=\/|$)/, "") || "/";
 }
-function Shell({ client, models, blocks, basePath, locale, children, theme, router }) {
-  void client;
+function Shell({
+  client,
+  models,
+  blocks,
+  basePath,
+  locale,
+  children,
+  theme,
+  router,
+  currentUser,
+  loginPath = "/login",
+  onLogout
+}) {
   const activeTheme = theme != null ? theme : defaultAdminTheme;
   const resolvedRouter = useAdminRouter(router);
   const location = useAdminLocation(resolvedRouter);
@@ -5398,6 +5494,12 @@ function Shell({ client, models, blocks, basePath, locale, children, theme, rout
   const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState13(false);
   const [pendingPath, setPendingPath] = useState13(null);
   const [pendingView, setPendingView] = useState13(null);
+  const [loadedCurrentUser, setLoadedCurrentUser] = useState13(null);
+  const [isLoggingOut, setIsLoggingOut] = useState13(false);
+  const sidebarCurrentUser = useMemo11(
+    () => normalizeCurrentUser(currentUser === void 0 ? loadedCurrentUser : currentUser),
+    [currentUser, loadedCurrentUser]
+  );
   useEffect14(() => {
     if (isDesktopSidebar) {
       setIsMobileSidebarOpen(false);
@@ -5406,6 +5508,40 @@ function Shell({ client, models, blocks, basePath, locale, children, theme, rout
   useEffect14(() => {
     setIsMobileSidebarOpen(false);
   }, [pathname]);
+  useEffect14(() => {
+    if (currentUser !== void 0) {
+      return;
+    }
+    let isMounted = true;
+    client.getCurrentUser().then((response) => {
+      if (!isMounted) return;
+      setLoadedCurrentUser(response);
+    }).catch(() => {
+      if (!isMounted) return;
+      setLoadedCurrentUser(null);
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [client, currentUser]);
+  const handleLogout = useCallback8(async () => {
+    if (isLoggingOut) {
+      return;
+    }
+    setIsLoggingOut(true);
+    try {
+      if (onLogout) {
+        await onLogout();
+      } else {
+        await client.logout();
+      }
+      if (loginPath) {
+        resolvedRouter.replace(loginPath);
+      }
+    } finally {
+      setIsLoggingOut(false);
+    }
+  }, [client, isLoggingOut, loginPath, onLogout, resolvedRouter]);
   const shellContextValue = useMemo11(() => ({
     isMobile: !isDesktopSidebar,
     openMobileSidebar: () => setIsMobileSidebarOpen(true),
@@ -5500,7 +5636,17 @@ function Shell({ client, models, blocks, basePath, locale, children, theme, rout
                     pl: 0,
                     pr: 1
                   },
-                  children: /* @__PURE__ */ jsx28(Sidebar, { models, blocks, basePath })
+                  children: /* @__PURE__ */ jsx28(
+                    Sidebar,
+                    {
+                      models,
+                      blocks,
+                      basePath,
+                      currentUser: sidebarCurrentUser,
+                      isLoggingOut,
+                      onLogout: handleLogout
+                    }
+                  )
                 }
               ),
               /* @__PURE__ */ jsx28(
@@ -5544,11 +5690,31 @@ function Shell({ client, models, blocks, basePath, locale, children, theme, rout
             }
           }
         },
-        children: /* @__PURE__ */ jsx28(Box17, { sx: { height: "100%", minHeight: 0, pr: 1.5 }, children: /* @__PURE__ */ jsx28(Sidebar, { models, blocks, basePath }) })
+        children: /* @__PURE__ */ jsx28(Box17, { sx: { height: "100%", minHeight: 0, pr: 1.5 }, children: /* @__PURE__ */ jsx28(
+          Sidebar,
+          {
+            models,
+            blocks,
+            basePath,
+            currentUser: sidebarCurrentUser,
+            isLoggingOut,
+            onLogout: handleLogout
+          }
+        ) })
       }
     )
   ] }) }) }) }) }) });
 }
+function normalizeCurrentUser(user) {
+  if (typeof user === "string") {
+    const login = user.trim();
+    return login ? { login } : null;
+  }
+  if (!user || !user.login.trim()) {
+    return null;
+  }
+  return user;
+}
 export {
   AdminLocaleProvider,
   AdminRouterProvider,

package/dist/types/index.d.ts

@@ -135,6 +135,12 @@ export type AdminModelsResponse = {
     items: AdminModelMeta[];
     blocks: AdminModelsBlockMeta[];
 };
+export type AdminCurrentUser = {
+    id?: string | number | null;
+    login: string;
+    email?: string | null;
+    name?: string | null;
+};
 export type AdminChoicesResponse = {
     items: Array<{
         id: string | number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xladmin",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Framework-agnostic React + MUI admin frontend for xladmin.",
   "license": "MIT",
   "type": "module",