@strapi-community/plugin-better-auth-dashboard 1.0.0-alpha.9 → 1.0.0-beta.1

package/README.md

@@ -64,6 +64,23 @@ export const auth = betterAuth({
 });
 ```
 
+To enable the "Send verification email" and "Send password reset" actions in the user detail drawer, configure the dashboard plugin itself in `config/plugins.js`/`.ts`:
+
+```typescript title="config/plugins.ts"
+export default {
+  "better-auth-dashboard": {
+    config: {
+      // Absolute URL of your public-facing client app. Used as the
+      // callback destination for email verification / password reset
+      // links sent from the dashboard. Unset by default — the two
+      // actions above stay disabled until this is configured, rather
+      // than guessing at a URL (e.g. the admin panel's own origin).
+      email_callback_url: process.env.BETTER_AUTH_DASHBOARD_CALLBACK_URL,
+    },
+  },
+};
+```
+
 ### Start Strapi
 
 ```bash
@@ -80,6 +97,54 @@ The dashboard is now available in the Strapi admin panel.
 | **Users** | Searchable user table with create, edit, delete, ban, and session revoke per user |
 | **Organizations** | Organization list with member management (requires Better Auth `organization` plugin) |
 
+## Extending the dashboard
+
+Other Strapi admin plugins can add sections and lazy-loaded screens through the dashboard plugin's admin API. Call the API during your plugin's `bootstrap` lifecycle:
+
+```typescript
+export default {
+  bootstrap(app) {
+    const plugin = app.getPlugin("better-auth-dashboard");
+    if (!plugin) return;
+
+    const dashboard = plugin.apis;
+
+    dashboard.addDashSection({
+      id: "my-plugin",
+      intlLabel: {
+        id: "my-plugin.dashboard.section",
+        defaultMessage: "My plugin",
+      },
+      priority: 20,
+    });
+
+    dashboard.addDashLink("my-plugin", {
+      id: "my-plugin.audit-log",
+      intlLabel: {
+        id: "my-plugin.dashboard.audit-log",
+        defaultMessage: "Audit log",
+      },
+      to: "/audit-log",
+      Component: () => import("./pages/AuditLog"),
+      permissions: [],
+      isAvailable: async () => checkAuditLogAvailability(),
+    });
+  },
+};
+```
+
+Available APIs:
+
+| API | Description |
+| --- | --- |
+| `addDashSection(section)` | Creates a navigation section. `priority` controls section order. |
+| `addDashLink(section, link)` | Registers a lazy route and adds its link to a section. Supports Strapi admin `permissions` and sync or async `isAvailable`. |
+| `getDashLinks()` | Returns the live section and link registry. Treat the result as read-only. |
+
+`isAvailable` defaults to `true`. Its result is cached for five minutes, combined with permission checks, and applied to both navigation and direct route access. Errors are treated as unavailable.
+
+See the [Dashboard documentation](https://strapi-community.github.io/plugin-better-auth/docs/better-auth/dashboard#dashboard-screen-api) for the complete API reference and extension guidance.
+
 ## Requirements
 
 - `@strapi-community/plugin-better-auth` installed and configured

package/dist/admin/Avatar-Cvk89aMx.js

@@ -0,0 +1,67 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const designSystem = require("@strapi/design-system");
+const styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const PALETTE = [
+  { bg: "#EAF5FF", fg: "#0C75AF" },
+  { bg: "#F0F0FF", fg: "#4945FF" },
+  { bg: "#EAFBE7", fg: "#328048" },
+  { bg: "#FFF3D3", fg: "#8E6A00" },
+  { bg: "#FCECEA", fg: "#D02B20" },
+  { bg: "#F6ECFC", fg: "#8312D1" },
+  { bg: "#E8F8F5", fg: "#1A7F64" }
+];
+const Circle = styled__default.default.div`
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  border-radius: 50%;
+  background: ${(p) => p.$bg};
+  color: ${(p) => p.$fg};
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: ${(p) => Math.round(p.$size * 0.38)}px;
+  font-weight: 700;
+  flex-shrink: 0;
+  letter-spacing: -0.01em;
+  user-select: none;
+`;
+function getColor(seed) {
+  const code = (seed.charCodeAt(0) || 0) + (seed.charCodeAt(1) || 0);
+  return PALETTE[code % PALETTE.length];
+}
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 0 || !parts[0]) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+function Avatar({
+  name,
+  src,
+  size = 32
+}) {
+  if (src) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Box,
+      {
+        tag: "img",
+        src,
+        alt: "",
+        style: {
+          width: size,
+          height: size,
+          borderRadius: "50%",
+          objectFit: "cover",
+          flexShrink: 0,
+          display: "block"
+        }
+      }
+    );
+  }
+  const color = getColor(name || "?");
+  return /* @__PURE__ */ jsxRuntime.jsx(Circle, { $bg: color.bg, $fg: color.fg, $size: size, children: getInitials(name || "?") });
+}
+exports.Avatar = Avatar;

package/dist/admin/Avatar-DNczJU0i.mjs

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import { Box } from "@strapi/design-system";
+import styled from "styled-components";
+const PALETTE = [
+  { bg: "#EAF5FF", fg: "#0C75AF" },
+  { bg: "#F0F0FF", fg: "#4945FF" },
+  { bg: "#EAFBE7", fg: "#328048" },
+  { bg: "#FFF3D3", fg: "#8E6A00" },
+  { bg: "#FCECEA", fg: "#D02B20" },
+  { bg: "#F6ECFC", fg: "#8312D1" },
+  { bg: "#E8F8F5", fg: "#1A7F64" }
+];
+const Circle = styled.div`
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  border-radius: 50%;
+  background: ${(p) => p.$bg};
+  color: ${(p) => p.$fg};
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: ${(p) => Math.round(p.$size * 0.38)}px;
+  font-weight: 700;
+  flex-shrink: 0;
+  letter-spacing: -0.01em;
+  user-select: none;
+`;
+function getColor(seed) {
+  const code = (seed.charCodeAt(0) || 0) + (seed.charCodeAt(1) || 0);
+  return PALETTE[code % PALETTE.length];
+}
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 0 || !parts[0]) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+function Avatar({
+  name,
+  src,
+  size = 32
+}) {
+  if (src) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        tag: "img",
+        src,
+        alt: "",
+        style: {
+          width: size,
+          height: size,
+          borderRadius: "50%",
+          objectFit: "cover",
+          flexShrink: 0,
+          display: "block"
+        }
+      }
+    );
+  }
+  const color = getColor(name || "?");
+  return /* @__PURE__ */ jsx(Circle, { $bg: color.bg, $fg: color.fg, $size: size, children: getInitials(name || "?") });
+}
+export {
+  Avatar as A
+};

package/dist/admin/Root-2FMy-qQg.mjs

@@ -0,0 +1,357 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useId, useState, useEffect, useMemo } from "react";
+import { useQueryClient, QueryClient, QueryClientProvider } from "react-query";
+import { NavLink, Outlet, useMatch, Navigate } from "react-router-dom";
+import { g as getDashLinks, P as PLUGIN_ID, a as getDashLinkAvailabilityQueryKey, r as resolveDashLinkAvailability, D as DASH_LINK_AVAILABILITY_STALE_TIME } from "./index-D9CiI8Yr.mjs";
+import { Typography, ScrollArea, Box, Flex, Badge, SubNav as SubNav$1, Divider } from "@strapi/design-system";
+import { useAuth, Layouts, Page, BackButton } from "@strapi/strapi/admin";
+import { useIntl } from "react-intl";
+import "@strapi/icons";
+import styled from "styled-components";
+const HEIGHT_TOP_NAVIGATION = "6.4rem";
+const HEIGHT_TOP_NAVIGATION_MEDIUM = "5.6rem";
+const WIDTH_SIDE_NAVIGATION = "23.2rem";
+const MainSubNav = styled(SubNav$1)`
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: ${({ theme }) => theme.colors.neutral0};
+  display: flex;
+  flex-direction: column;
+  border-right: 0;
+  box-shadow: none;
+  position: relative;
+
+  ${({ theme }) => theme.breakpoints.medium} {
+    width: ${WIDTH_SIDE_NAVIGATION};
+    position: sticky;
+    top: 0;
+    border-right: 1px solid ${({ theme }) => theme.colors.neutral150};
+    overscroll-behavior: contain;
+  }
+`;
+const Main = ({ children, ...props }) => /* @__PURE__ */ jsx(MainSubNav, { ...props, children });
+const StyledLink = styled(NavLink)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-decoration: none;
+  height: 32px;
+  color: ${({ theme }) => theme.colors.neutral800};
+
+  &.active > div {
+    background-color: ${({ theme }) => theme.colors.primary100};
+    color: ${({ theme }) => theme.colors.primary700};
+    font-weight: 500;
+  }
+
+  &:hover.active > div {
+    background-color: ${({ theme }) => theme.colors.primary100};
+    color: ${({ theme }) => theme.colors.primary700};
+    font-weight: 500;
+  }
+
+  &:hover > div {
+    background-color: ${({ theme }) => theme.colors.neutral100};
+  }
+
+  &:focus-visible {
+    outline-offset: -2px;
+  }
+`;
+const Link = (props) => {
+  const { to, label, endAction, handleClick, ...rest } = props;
+  return /* @__PURE__ */ jsx(StyledLink, { to, ...rest, onClick: handleClick, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      width: "100%",
+      paddingLeft: 3,
+      paddingRight: 3,
+      paddingTop: { initial: 1, large: 0 },
+      paddingBottom: { initial: 1, large: 0 },
+      borderRadius: 1,
+      children: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          justifyContent: "space-between",
+          width: "100%",
+          gap: { initial: 2, large: 1 },
+          children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                tag: "div",
+                lineHeight: "32px",
+                width: { initial: "80dvw", medium: "100%" },
+                overflow: "hidden",
+                style: { textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsx(Flex, { gap: 2, children: endAction })
+          ]
+        }
+      )
+    }
+  ) });
+};
+const StyledHeader = styled(Flex)`
+  flex: 0 0 ${HEIGHT_TOP_NAVIGATION};
+  height: ${HEIGHT_TOP_NAVIGATION};
+
+  ${({ theme }) => theme.breakpoints.medium} {
+    flex: 0 0 ${HEIGHT_TOP_NAVIGATION_MEDIUM};
+    height: ${HEIGHT_TOP_NAVIGATION_MEDIUM};
+  }
+`;
+const Header = ({ label }) => {
+  return /* @__PURE__ */ jsx(
+    StyledHeader,
+    {
+      justifyContent: "space-between",
+      paddingLeft: 5,
+      paddingRight: 5,
+      children: /* @__PURE__ */ jsx(Typography, { variant: "beta", tag: "h2", children: label })
+    }
+  );
+};
+const Sections = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      paddingTop: { initial: 5, large: 4 },
+      paddingBottom: { initial: 5, large: 4 },
+      paddingLeft: { initial: 3, large: 0 },
+      paddingRight: { initial: 3, large: 0 },
+      maxWidth: { initial: "100%", medium: WIDTH_SIDE_NAVIGATION },
+      children: /* @__PURE__ */ jsx(Flex, { tag: "ul", gap: 6, direction: "column", alignItems: "stretch", ...props, children: children.map((child, index) => {
+        return /* @__PURE__ */ jsx("li", { children: child }, index);
+      }) })
+    }
+  );
+};
+const Section = ({
+  label,
+  children,
+  badgeLabel
+}) => {
+  const listId = useId();
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        paddingLeft: {
+          initial: 3,
+          large: 5
+        },
+        paddingRight: {
+          initial: 3,
+          large: 5
+        },
+        children: /* @__PURE__ */ jsxs(Flex, { position: "relative", justifyContent: "space-between", gap: 2, children: [
+          /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: label }) }) }),
+          /* @__PURE__ */ jsx(Flex, { gap: 1, children: badgeLabel && /* @__PURE__ */ jsx(Badge, { backgroundColor: "neutral150", textColor: "neutral600", children: badgeLabel }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Flex,
+      {
+        tag: "ol",
+        id: listId,
+        direction: "column",
+        gap: { initial: 2, large: "2px" },
+        alignItems: "stretch",
+        marginLeft: {
+          initial: 0,
+          large: 2
+        },
+        marginRight: {
+          initial: 0,
+          large: 2
+        },
+        children: children.map((child, index) => {
+          return /* @__PURE__ */ jsx("li", { children: child }, index);
+        })
+      }
+    )
+  ] });
+};
+styled.button`
+  cursor: pointer;
+  width: 100%;
+  border: none;
+  padding: 0;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  border-radius: ${({ theme }) => theme.borderRadius};
+  padding-left: ${({ theme }) => theme.spaces[3]};
+  padding-right: ${({ theme }) => theme.spaces[3]};
+  padding-top: ${({ theme }) => theme.spaces[2]};
+  padding-bottom: ${({ theme }) => theme.spaces[2]};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.neutral100};
+  }
+`;
+styled.li`
+  ${StyledLink} > div {
+    padding-left: 36px;
+  }
+`;
+styled(Box)`
+  width: 100%;
+
+  ${MainSubNav} {
+    background-color: transparent;
+    border-right: none;
+  }
+
+  ${({ theme }) => theme.breakpoints.medium} {
+    overflow: hidden;
+
+    ${MainSubNav} {
+      top: 0;
+    }
+  }
+`;
+const Content = ({ children }) => {
+  return /* @__PURE__ */ jsx(ScrollArea, { children });
+};
+const SubNav = {
+  Main,
+  Content,
+  Header,
+  Link,
+  Sections,
+  Section
+};
+const Nav = ({ isFullPage = false }) => {
+  const { formatMessage } = useIntl();
+  const queryClient = useQueryClient();
+  const checkUserHasPermissions = useAuth(
+    "DashboardNav",
+    (state) => state.checkUserHasPermissions
+  );
+  const dashLinks = getDashLinks();
+  const [sections, setSections] = useState([]);
+  useEffect(() => {
+    let isCurrent = true;
+    const loadAuthorizedSections = async () => {
+      const authorizedSections = await Promise.all(
+        Object.values(dashLinks).map(async (section) => ({
+          ...section,
+          links: (await Promise.all(
+            section.links.map(async (link) => {
+              const permissions = link.permissions ?? [];
+              const [hasPermission, isAvailable] = await Promise.all([
+                permissions.length === 0 ? true : checkUserHasPermissions(permissions).then(
+                  (authorizedPermissions) => authorizedPermissions.length > 0
+                ),
+                queryClient.fetchQuery(
+                  getDashLinkAvailabilityQueryKey(link),
+                  () => resolveDashLinkAvailability(link),
+                  { staleTime: DASH_LINK_AVAILABILITY_STALE_TIME }
+                )
+              ]);
+              return hasPermission && isAvailable ? link : null;
+            })
+          )).filter((link) => link !== null)
+        }))
+      );
+      if (isCurrent) {
+        setSections(
+          authorizedSections.filter((section) => section.links.length > 0).sort(
+            (a, b) => (a.priority ?? 0) - (b.priority ?? 0) || a.id.localeCompare(b.id)
+          )
+        );
+      }
+    };
+    loadAuthorizedSections();
+    return () => {
+      isCurrent = false;
+    };
+  }, [checkUserHasPermissions, dashLinks, queryClient]);
+  return /* @__PURE__ */ jsxs(SubNav.Main, { children: [
+    !isFullPage && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SubNav.Header, { label: "Authentication" }),
+      /* @__PURE__ */ jsx(Divider, {})
+    ] }),
+    /* @__PURE__ */ jsxs(SubNav.Content, { children: [
+      isFullPage && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SubNav.Header, { label: "Authentication" }),
+        /* @__PURE__ */ jsx(Divider, {})
+      ] }),
+      /* @__PURE__ */ jsx(SubNav.Sections, { "data-testid": "main-nav", children: sections.map((section) => /* @__PURE__ */ jsx(
+        SubNav.Section,
+        {
+          label: formatMessage(section.intlLabel),
+          children: section.links.map((link) => {
+            return /* @__PURE__ */ jsx(
+              SubNav.Link,
+              {
+                to: `/plugins/${PLUGIN_ID}/${link.to.replace(/^\/+/, "")}`,
+                label: formatMessage(link.intlLabel),
+                "data-testid": `nav-${link.id}`,
+                children: formatMessage(link.intlLabel)
+              },
+              link.id
+            );
+          })
+        },
+        section.id
+      )) })
+    ] })
+  ] });
+};
+const RESPONSIVE_DEFAULT_SPACING = {
+  initial: 4,
+  medium: 6,
+  large: 10
+};
+const App = () => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": "dashboard-root",
+      style: { display: "flex", flex: "1 1 auto", minHeight: "100vh" },
+      children: /* @__PURE__ */ jsxs(Layouts.Root, { sideNav: /* @__PURE__ */ jsx(Nav, {}), children: [
+        /* @__PURE__ */ jsx(Page.Title, { children: "Authentication" }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            display: { initial: "block", medium: "none" },
+            paddingLeft: RESPONSIVE_DEFAULT_SPACING,
+            paddingRight: RESPONSIVE_DEFAULT_SPACING,
+            paddingTop: RESPONSIVE_DEFAULT_SPACING,
+            children: /* @__PURE__ */ jsx(BackButton, { fallback: "/plugins/better-auth-dashboard" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Outlet, {})
+      ] })
+    }
+  );
+};
+function Root() {
+  const isDashboardIndex = useMatch({
+    path: `/plugins/${PLUGIN_ID}`,
+    end: true
+  });
+  const queryClient = useMemo(
+    () => new QueryClient({
+      defaultOptions: {
+        queries: { retry: 1, refetchOnWindowFocus: false, staleTime: 3e4 }
+      }
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: isDashboardIndex ? /* @__PURE__ */ jsx(Navigate, { to: "overview", replace: true }) : /* @__PURE__ */ jsx(App, {}) });
+}
+export {
+  Root,
+  Root as default
+};