strapi-plugin-magic-sessionmanager 4.3.0 → 4.3.1

package/dist/_chunks/{index-Dpdcg2zl.mjs → index-Ij0JRf9W.mjs}

@@ -2,8 +2,9 @@ import { useRef, useEffect, useState } from "react";
 import { useFetchClient, useNotification } from "@strapi/strapi/admin";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useIntl } from "react-intl";
-import { Box, Typography, Flex, Badge, Divider, Button } from "@strapi/design-system";
-import { Server, Clock, Cross, Check, Phone, Monitor } from "@strapi/icons";
+import styled from "styled-components";
+import { Box, Typography, Flex, Badge, Divider } from "@strapi/design-system";
+import { Server, Clock, User, Cross, Check, Phone, Monitor } from "@strapi/icons";
 const strapi = {
   name: "magic-sessionmanager",
   displayName: "Magic Sessionmanager"
@@ -102,6 +103,123 @@ const parseUserAgent = (userAgent) => {
   };
 };
 const getTranslation = (id) => `${PLUGIN_ID}.${id}`;
+const PanelContainer = styled(Box)`
+  width: 100%;
+`;
+const StatusCard = styled(Box)`
+  padding: 20px;
+  border-radius: 12px;
+  border: 1px solid ${(props) => props.$isOnline ? "#BBF7D0" : "#E5E7EB"};
+  background: ${(props) => props.$isOnline ? "linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%)" : "linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%)"};
+  transition: all 0.2s ease;
+`;
+const BlockedWarning = styled(Box)`
+  padding: 16px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
+  border: 1px solid #FECACA;
+`;
+const SessionCard = styled(Box)`
+  padding: 16px;
+  background: white;
+  border-radius: 10px;
+  border: 1px solid #E5E7EB;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  transition: all 0.2s ease;
+  
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    border-color: #0EA5E9;
+  }
+`;
+const EmptyState = styled(Box)`
+  padding: 32px;
+  background: #F9FAFB;
+  border-radius: 12px;
+  border: 2px dashed #E5E7EB;
+  text-align: center;
+`;
+const EmptyIcon = styled(Box)`
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #E5E7EB;
+  border-radius: 50%;
+  color: #9CA3AF;
+`;
+const SectionLabel = styled(Typography)`
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-size: 11px !important;
+  font-weight: 700 !important;
+  color: #6B7280;
+  margin-bottom: 12px;
+  display: block;
+`;
+const ActionButton = styled.button`
+  width: 100%;
+  padding: 12px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: all 0.2s ease;
+  
+  ${(props) => props.$variant === "danger" && `
+    background: white;
+    color: #DC2626;
+    border: 2px solid #DC2626;
+    
+    &:hover:not(:disabled) {
+      background: #DC2626;
+      color: white;
+    }
+  `}
+  
+  ${(props) => props.$variant === "success" && `
+    background: white;
+    color: #16A34A;
+    border: 2px solid #16A34A;
+    
+    &:hover:not(:disabled) {
+      background: #16A34A;
+      color: white;
+    }
+  `}
+  
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+const IconWrapper = styled(Box)`
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #F3F4F6;
+  border-radius: 8px;
+  flex-shrink: 0;
+  
+  svg {
+    width: 16px;
+    height: 16px;
+    color: #6B7280;
+  }
+`;
 const SessionInfoPanel = ({ documentId, model, document }) => {
   const { formatMessage } = useIntl();
   const [sessions, setSessions] = useState([]);
@@ -196,202 +314,109 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
   const isOnline = sessions.length > 0;
   return {
     title: t("panel.title", "Session Info"),
-    content: /* @__PURE__ */ jsx(Box, { style: { width: "100%" }, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, alignItems: "stretch", children: [
-      /* @__PURE__ */ jsx(
-        Box,
-        {
-          padding: 5,
-          background: isOnline ? "success100" : "neutral150",
-          hasRadius: true,
-          style: {
-            border: isOnline ? "1px solid #c6f6d5" : "1px solid #eaeaef",
-            transition: "all 0.2s ease"
-          },
-          children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, alignItems: "center", children: [
-            /* @__PURE__ */ jsx(
-              Badge,
-              {
-                backgroundColor: isOnline ? "success600" : "neutral600",
-                textColor: "neutral0",
-                size: "M",
-                style: { fontSize: "14px", padding: "6px 12px" },
-                children: isOnline ? t("panel.status.active", "ACTIVE") : t("panel.status.offline", "OFFLINE")
-              }
-            ),
-            /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", textColor: isOnline ? "success700" : "neutral700", children: t("panel.sessions.count", "{count} active session{count, plural, one {} other {s}}", { count: sessions.length }) })
-          ] })
-        }
-      ),
-      isBlocked && /* @__PURE__ */ jsxs(
-        Box,
-        {
-          padding: 4,
-          background: "danger100",
-          hasRadius: true,
-          children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", textColor: "danger700", marginBottom: 1, children: t("panel.blocked.title", "User is blocked") }),
-            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "danger600", children: t("panel.blocked.description", "Authentication disabled") })
-          ]
-        }
-      ),
+    content: /* @__PURE__ */ jsx(PanelContainer, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, alignItems: "stretch", children: [
+      /* @__PURE__ */ jsx(StatusCard, { $isOnline: isOnline, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, alignItems: "center", children: [
+        /* @__PURE__ */ jsx(
+          Badge,
+          {
+            backgroundColor: isOnline ? "success600" : "neutral600",
+            textColor: "neutral0",
+            size: "M",
+            style: { fontSize: "12px", padding: "6px 14px", fontWeight: "700" },
+            children: isOnline ? t("panel.status.active", "ONLINE") : t("panel.status.offline", "OFFLINE")
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            variant: "omega",
+            fontWeight: "semiBold",
+            textColor: isOnline ? "success700" : "neutral700",
+            children: [
+              sessions.length,
+              " ",
+              t("panel.sessions.label", "active session"),
+              sessions.length !== 1 ? "s" : ""
+            ]
+          }
+        )
+      ] }) }),
+      isBlocked && /* @__PURE__ */ jsxs(BlockedWarning, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", textColor: "danger700", children: t("panel.blocked.title", "User is blocked") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "danger600", style: { marginTop: "4px" }, children: t("panel.blocked.description", "Authentication disabled") })
+      ] }),
       sessions.length > 0 ? /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, alignItems: "stretch", children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", style: {
-          textAlign: "left",
-          letterSpacing: "0.5px",
-          fontSize: "12px"
-        }, children: t("panel.sessions.title", "Active Sessions") }),
+        /* @__PURE__ */ jsx(SectionLabel, { children: t("panel.sessions.title", "Active Sessions") }),
         sessions.slice(0, 5).map((session) => {
           const deviceInfo = parseUserAgent(session.userAgent);
           const DeviceIcon = getDeviceIcon(deviceInfo.device);
-          return /* @__PURE__ */ jsx(
-            Box,
-            {
-              padding: 4,
-              background: "neutral0",
-              hasRadius: true,
-              style: {
-                border: "1px solid #e3e8ef",
-                boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
-                transition: "all 0.2s ease"
-              },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.08)";
-                e.currentTarget.style.borderColor = "#4945FF";
-              },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.boxShadow = "0 1px 3px rgba(0, 0, 0, 0.04)";
-                e.currentTarget.style.borderColor = "#e3e8ef";
-              },
-              children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, alignItems: "flex-start", children: [
-                /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
-                  /* @__PURE__ */ jsx(DeviceIcon, { width: "20px", height: "20px" }),
-                  /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral800", children: deviceInfo.device })
-                ] }),
-                /* @__PURE__ */ jsx(
-                  Badge,
-                  {
-                    backgroundColor: "success600",
-                    textColor: "neutral0",
-                    size: "S",
-                    children: t("panel.sessions.active", "Active")
-                  }
-                ),
-                /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", children: [
-                  deviceInfo.browser,
-                  " on ",
-                  deviceInfo.os
-                ] }),
-                /* @__PURE__ */ jsx(Divider, {}),
-                /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
-                  /* @__PURE__ */ jsx(Server, { width: "14px", height: "14px" }),
-                  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: session.ipAddress })
-                ] }),
-                /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
-                  /* @__PURE__ */ jsx(Clock, { width: "14px", height: "14px" }),
-                  /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: new Date(session.loginTime).toLocaleString("en-US", {
-                    month: "short",
-                    day: "numeric",
-                    hour: "2-digit",
-                    minute: "2-digit"
-                  }) })
-                ] }),
-                session.minutesSinceActive !== void 0 && session.minutesSinceActive < 60 && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "success600", fontWeight: "semiBold", children: session.minutesSinceActive === 0 ? t("panel.sessions.activeNow", "Active now") : t("panel.sessions.activeAgo", "Active {minutes} min ago", { minutes: session.minutesSinceActive }) })
-              ] })
-            },
-            session.id
-          );
+          return /* @__PURE__ */ jsx(SessionCard, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, alignItems: "flex-start", children: [
+            /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+              /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(DeviceIcon, {}) }),
+              /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral800", children: deviceInfo.device })
+            ] }),
+            /* @__PURE__ */ jsx(Badge, { backgroundColor: "success600", textColor: "neutral0", size: "S", children: t("panel.sessions.active", "Active") }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", children: [
+              deviceInfo.browser,
+              " on ",
+              deviceInfo.os
+            ] }),
+            /* @__PURE__ */ jsx(Divider, {}),
+            /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+              /* @__PURE__ */ jsx(Server, { width: "14px", height: "14px", style: { color: "#9CA3AF" } }),
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: session.ipAddress })
+            ] }),
+            /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+              /* @__PURE__ */ jsx(Clock, { width: "14px", height: "14px", style: { color: "#9CA3AF" } }),
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: new Date(session.loginTime).toLocaleString("en-US", {
+                month: "short",
+                day: "numeric",
+                hour: "2-digit",
+                minute: "2-digit"
+              }) })
+            ] }),
+            session.minutesSinceActive !== void 0 && session.minutesSinceActive < 60 && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "success600", fontWeight: "semiBold", children: session.minutesSinceActive === 0 ? t("panel.sessions.activeNow", "Active now") : t("panel.sessions.activeAgo", "Active {minutes} min ago", { minutes: session.minutesSinceActive }) })
+          ] }) }, session.id);
         }),
-        sessions.length > 5 && /* @__PURE__ */ jsx(Box, { padding: 3, background: "primary100", hasRadius: true, textAlign: "center", children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "primary600", fontWeight: "semiBold", children: t("panel.sessions.more", "+{count} more session{count, plural, one {} other {s}}", { count: sessions.length - 5 }) }) })
-      ] }) : /* @__PURE__ */ jsx(
-        Box,
-        {
-          padding: 6,
-          background: "neutral100",
-          hasRadius: true,
-          style: {
-            border: "1px dashed #dcdce4",
-            textAlign: "center"
-          },
-          children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 2, children: [
-            /* @__PURE__ */ jsx(
-              Typography,
-              {
-                variant: "pi",
-                textColor: "neutral600",
-                style: { fontSize: "32px", marginBottom: "8px" },
-                children: "💤"
-              }
-            ),
-            /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", textColor: "neutral700", children: t("panel.empty.title", "No active sessions") }),
-            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", style: { fontSize: "13px" }, children: t("panel.empty.description", "User has not logged in yet") })
-          ] })
-        }
-      ),
+        sessions.length > 5 && /* @__PURE__ */ jsx(Box, { padding: 3, background: "primary100", hasRadius: true, style: { textAlign: "center" }, children: /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "primary600", fontWeight: "semiBold", children: [
+          "+",
+          sessions.length - 5,
+          " ",
+          t("panel.sessions.more", "more session"),
+          sessions.length - 5 !== 1 ? "s" : ""
+        ] }) })
+      ] }) : /* @__PURE__ */ jsxs(EmptyState, { children: [
+        /* @__PURE__ */ jsx(EmptyIcon, { children: /* @__PURE__ */ jsx(User, { width: "24px", height: "24px" }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", textColor: "neutral700", style: { display: "block" }, children: t("panel.empty.title", "No active sessions") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", style: { display: "block", marginTop: "4px" }, children: t("panel.empty.description", "User has not logged in yet") })
+      ] }),
       /* @__PURE__ */ jsx(Divider, {}),
       /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, alignItems: "stretch", children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", textTransform: "uppercase", style: {
-          textAlign: "left",
-          letterSpacing: "0.5px",
-          fontSize: "12px"
-        }, children: t("panel.actions.title", "Actions") }),
-        /* @__PURE__ */ jsx(
-          Button,
+        /* @__PURE__ */ jsx(SectionLabel, { children: t("panel.actions.title", "Actions") }),
+        /* @__PURE__ */ jsxs(
+          ActionButton,
           {
-            variant: "secondary",
-            size: "M",
-            fullWidth: true,
+            $variant: "danger",
             onClick: handleLogoutAll,
             disabled: actionLoading || sessions.length === 0,
-            startIcon: /* @__PURE__ */ jsx(Cross, {}),
-            style: {
-              border: "1px solid #dc2626",
-              color: "#dc2626",
-              backgroundColor: "transparent",
-              transition: "all 0.2s ease"
-            },
-            onMouseEnter: (e) => {
-              if (!actionLoading && sessions.length > 0) {
-                e.currentTarget.style.backgroundColor = "#dc2626";
-                e.currentTarget.style.color = "white";
-              }
-            },
-            onMouseLeave: (e) => {
-              if (!actionLoading && sessions.length > 0) {
-                e.currentTarget.style.backgroundColor = "transparent";
-                e.currentTarget.style.color = "#dc2626";
-              }
-            },
-            children: t("panel.actions.terminateAll", "Terminate All Sessions")
+            type: "button",
+            children: [
+              /* @__PURE__ */ jsx(Cross, {}),
+              t("panel.actions.terminateAll", "Terminate All Sessions")
+            ]
           }
         ),
-        /* @__PURE__ */ jsx(
-          Button,
+        /* @__PURE__ */ jsxs(
+          ActionButton,
           {
-            variant: "secondary",
-            size: "M",
-            fullWidth: true,
+            $variant: isBlocked ? "success" : "danger",
             onClick: handleToggleBlock,
             disabled: actionLoading,
-            startIcon: isBlocked ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Cross, {}),
-            style: {
-              border: isBlocked ? "1px solid #16a34a" : "1px solid #dc2626",
-              color: isBlocked ? "#16a34a" : "#dc2626",
-              backgroundColor: "transparent",
-              transition: "all 0.2s ease"
-            },
-            onMouseEnter: (e) => {
-              if (!actionLoading) {
-                e.currentTarget.style.backgroundColor = isBlocked ? "#16a34a" : "#dc2626";
-                e.currentTarget.style.color = "white";
-              }
-            },
-            onMouseLeave: (e) => {
-              if (!actionLoading) {
-                e.currentTarget.style.backgroundColor = "transparent";
-                e.currentTarget.style.color = isBlocked ? "#16a34a" : "#dc2626";
-              }
-            },
-            children: isBlocked ? t("panel.actions.unblockUser", "Unblock User") : t("panel.actions.blockUser", "Block User")
+            type: "button",
+            children: [
+              isBlocked ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Cross, {}),
+              isBlocked ? t("panel.actions.unblockUser", "Unblock User") : t("panel.actions.blockUser", "Block User")
+            ]
           }
         )
       ] })
@@ -415,7 +440,7 @@ const index = {
         id: `${pluginId}.plugin.name`,
         defaultMessage: pluginPkg.strapi.displayName
       },
-      Component: () => import("./App-Bgq2FgRY.mjs")
+      Component: () => import("./App-Cs4KKd3L.mjs")
     });
     app.createSettingSection(
       {
@@ -431,7 +456,7 @@ const index = {
           },
           id: "upgrade",
           to: `${pluginId}/upgrade`,
-          Component: () => import("./UpgradePage-B_2RowKN.mjs")
+          Component: () => import("./UpgradePage-C441wvPX.mjs")
         },
         {
           intlLabel: {
@@ -440,7 +465,7 @@ const index = {
           },
           id: "general",
           to: `${pluginId}/general`,
-          Component: () => import("./Settings-B3FaQckW.mjs")
+          Component: () => import("./Settings-XloJ-aHl.mjs")
         },
         {
           intlLabel: {
@@ -449,7 +474,7 @@ const index = {
           },
           id: "analytics",
           to: `${pluginId}/analytics`,
-          Component: () => import("./Analytics-CYYb-qXQ.mjs")
+          Component: () => import("./Analytics-sX94t6D9.mjs")
         },
         {
           intlLabel: {
@@ -458,7 +483,7 @@ const index = {
           },
           id: "license",
           to: `${pluginId}/license`,
-          Component: () => import("./License-CcD3WDcC.mjs")
+          Component: () => import("./License-CN5YpqIu.mjs")
         }
       ]
     );
@@ -476,7 +501,7 @@ const index = {
           defaultMessage: "Online Users"
         },
         component: async () => {
-          const component = await import("./OnlineUsersWidget-DHElrP3_.mjs");
+          const component = await import("./OnlineUsersWidget-ytykP_tA.mjs");
           return component.default;
         },
         id: "online-users-widget",

package/dist/_chunks/{useLicense-CThICQyr.mjs → useLicense-DJEDGSap.mjs}

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { useFetchClient } from "@strapi/strapi/admin";
-import { a as pluginId } from "./index-Dpdcg2zl.mjs";
+import { a as pluginId } from "./index-Ij0JRf9W.mjs";
 const useLicense = () => {
   const { get } = useFetchClient();
   const [isPremium, setIsPremium] = useState(false);

package/dist/_chunks/{useLicense-DOnfhNxz.js → useLicense-NCFYHpDd.js}

@@ -1,7 +1,7 @@
 "use strict";
 const react = require("react");
 const admin = require("@strapi/strapi/admin");
-const index = require("./index-Cf1Wqdeg.js");
+const index = require("./index-DtBfKBne.js");
 const useLicense = () => {
   const { get } = admin.useFetchClient();
   const [isPremium, setIsPremium] = react.useState(false);

package/dist/admin/index.js

@@ -1,3 +1,3 @@
 "use strict";
-const index = require("../_chunks/index-Cf1Wqdeg.js");
+const index = require("../_chunks/index-DtBfKBne.js");
 module.exports = index.index;

package/dist/admin/index.mjs

@@ -1,4 +1,4 @@
-import { i } from "../_chunks/index-Dpdcg2zl.mjs";
+import { i } from "../_chunks/index-Ij0JRf9W.mjs";
 export {
   i as default
 };