strapi-plugin-magic-sessionmanager 4.4.1 → 4.4.3

package/README.md

@@ -95,6 +95,11 @@ Track logins, monitor active users, and secure your app with one simple plugin.
 **When users logout:**
 - Plugin marks their session as "logged out"
 - They disappear from the active sessions list
+- Manual logout permanently blocks session reactivation (security feature)
+
+**Session Timeout vs Manual Logout:**
+- **Timeout:** Session can be reactivated on next request (seamless UX)
+- **Manual Logout:** Session is permanently terminated (security-first)
 
 **While users are active:**
 - Plugin updates their "last seen" time

package/dist/_chunks/{Analytics-sX94t6D9.mjs → Analytics-CQNEZTUR.mjs}

@@ -4,16 +4,9 @@ import { useFetchClient } from "@strapi/strapi/admin";
 import styled, { css, keyframes } from "styled-components";
 import { Loader, Typography, Box, Flex, Badge } from "@strapi/design-system";
 import { ChartBubble, Crown, User, Clock, Monitor } from "@strapi/icons";
-import { a as pluginId } from "./index-Ij0JRf9W.mjs";
-import { u as useLicense } from "./useLicense-DJEDGSap.mjs";
+import { a as pluginId } from "./index-CLfOD-6A.mjs";
+import { u as useLicense } from "./useLicense-Bi6skBLw.mjs";
 const theme = {
-  colors: {
-    primary: { 100: "#E0F2FE", 500: "#0EA5E9", 600: "#0284C7" },
-    secondary: { 100: "#EDE9FE", 500: "#A855F7", 600: "#9333EA" },
-    success: { 100: "#DCFCE7", 500: "#22C55E", 600: "#16A34A" },
-    warning: { 100: "#FEF3C7", 500: "#F59E0B", 600: "#D97706" },
-    neutral: { 0: "#FFFFFF", 100: "#F3F4F6", 200: "#E5E7EB", 600: "#4B5563", 700: "#374151", 800: "#1F2937" }
-  },
   shadows: {
     sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
     md: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
@@ -59,7 +52,7 @@ const Container = styled(Box)`
   padding: ${theme.spacing.xl} 24px 0;
 `;
 const Header = styled(Box)`
-  background: linear-gradient(135deg, ${theme.colors.primary[600]} 0%, ${theme.colors.secondary[600]} 100%);
+  background: linear-gradient(135deg, ${"var(--colors-primary600, #0284C7)"} 0%, ${"var(--colors-secondary600, #9333EA)"} 100%);
   border-radius: ${theme.borderRadius.xl};
   padding: ${theme.spacing.xl} ${theme.spacing["2xl"]};
   margin-bottom: ${theme.spacing.xl};
@@ -95,7 +88,7 @@ const HeaderContent = styled(Flex)`
   z-index: 1;
 `;
 const Title = styled(Typography)`
-  color: ${theme.colors.neutral[0]};
+  color: ${"var(--colors-neutral0, white)"};
   font-size: 2.25rem;
   font-weight: 700;
   letter-spacing: -0.025em;
@@ -124,7 +117,7 @@ const StatsGrid = styled.div`
   margin-bottom: 40px;
 `;
 const StatCard = styled(Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${"var(--colors-neutral0, white)"};
   border-radius: ${theme.borderRadius.lg};
   padding: 32px;
   position: relative;
@@ -133,7 +126,7 @@ const StatCard = styled(Box)`
   ${css`animation: ${fadeIn} ${theme.transitions.slow} backwards;`}
   animation-delay: ${(props) => props.$delay || "0s"};
   box-shadow: ${theme.shadows.sm};
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid ${"rgba(128, 128, 128, 0.2)"};
   text-align: center;
   display: flex;
   flex-direction: column;
@@ -143,7 +136,7 @@ const StatCard = styled(Box)`
   &:hover {
     transform: translateY(-6px);
     box-shadow: ${theme.shadows.xl};
-    border-color: ${(props) => props.$borderColor || theme.colors.primary[500]};
+    border-color: ${(props) => props.$borderColor || "var(--colors-primary600, #0EA5E9)"};
     
     .stat-icon {
       transform: scale(1.15) rotate(5deg);
@@ -151,7 +144,7 @@ const StatCard = styled(Box)`
     
     .stat-value {
       transform: scale(1.08);
-      color: ${(props) => props.$accentColor || theme.colors.primary[600]};
+      color: ${(props) => props.$accentColor || "var(--colors-primary600, #0284C7)"};
     }
   }
 `;
@@ -162,7 +155,7 @@ const StatIcon = styled(Box)`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${(props) => props.$bg || theme.colors.primary[100]};
+  background: ${(props) => props.$bg || "rgba(2, 132, 199, 0.12)"};
   transition: all ${theme.transitions.normal};
   margin: 0 auto 24px;
   box-shadow: ${theme.shadows.sm};
@@ -170,13 +163,13 @@ const StatIcon = styled(Box)`
   svg {
     width: 40px;
     height: 40px;
-    color: ${(props) => props.$color || theme.colors.primary[600]};
+    color: ${(props) => props.$color || "var(--colors-primary600, #0284C7)"};
   }
 `;
 const StatValue = styled(Typography)`
   font-size: 3.5rem;
   font-weight: 700;
-  color: ${theme.colors.neutral[800]};
+  color: ${"var(--colors-neutral800)"};
   line-height: 1;
   margin-bottom: 12px;
   transition: all ${theme.transitions.normal};
@@ -184,29 +177,29 @@ const StatValue = styled(Typography)`
 `;
 const StatLabel = styled(Typography)`
   font-size: 1rem;
-  color: ${theme.colors.neutral[600]};
+  color: ${"var(--colors-neutral600)"};
   font-weight: 500;
   text-align: center;
 `;
 const ChartCard = styled(Box)`
-  background: ${theme.colors.neutral[0]};
+  background: ${"var(--colors-neutral0, white)"};
   border-radius: ${theme.borderRadius.lg};
   padding: 36px;
   box-shadow: ${theme.shadows.md};
-  border: 1px solid ${theme.colors.neutral[200]};
+  border: 1px solid ${"rgba(128, 128, 128, 0.2)"};
   margin-bottom: 28px;
   ${css`animation: ${slideIn} ${theme.transitions.slow};`}
   transition: all ${theme.transitions.normal};
   
   &:hover {
     box-shadow: ${theme.shadows.lg};
-    border-color: ${theme.colors.primary[200]};
+    border-color: ${"rgba(2, 132, 199, 0.2)"};
   }
 `;
 const ChartTitle = styled(Typography)`
   font-size: 1.25rem;
   font-weight: 700;
-  color: ${theme.colors.neutral[800]};
+  color: ${"var(--colors-neutral800)"};
   margin-bottom: 24px;
   display: flex;
   align-items: center;
@@ -215,7 +208,7 @@ const ChartTitle = styled(Typography)`
   svg {
     width: 24px;
     height: 24px;
-    color: ${theme.colors.primary[600]};
+    color: ${"var(--colors-primary600, #0284C7)"};
   }
 `;
 const BarChart = styled.div`
@@ -234,12 +227,12 @@ const BarLabel = styled(Typography)`
   min-width: 110px;
   font-size: 15px;
   font-weight: 600;
-  color: ${theme.colors.neutral[700]};
+  color: ${"var(--colors-neutral700)"};
 `;
 const BarContainer = styled.div`
   flex: 1;
   height: 40px;
-  background: ${theme.colors.neutral[100]};
+  background: ${"var(--colors-neutral100)"};
   border-radius: 10px;
   overflow: hidden;
   position: relative;
@@ -247,7 +240,7 @@ const BarContainer = styled.div`
 `;
 const BarFill = styled.div`
   height: 100%;
-  background: linear-gradient(90deg, ${(props) => props.$color1 || theme.colors.primary[500]}, ${(props) => props.$color2 || theme.colors.primary[600]});
+  background: linear-gradient(90deg, ${(props) => props.$color1 || "var(--colors-primary600, #0EA5E9)"}, ${(props) => props.$color2 || "var(--colors-primary600, #0284C7)"});
   border-radius: 10px;
   --bar-width: ${(props) => props.$percentage || 0}%;
   ${css`animation: ${growBar} 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;`}
@@ -280,7 +273,7 @@ const AnimatedIcon = styled.div`
   ${css`animation: ${float} 3s ease-in-out infinite;`}
   width: 96px;
   height: 96px;
-  color: #d97706;
+  color: var(--colors-warning600, #D97706);
   margin: 0 auto 32px;
   display: flex;
   align-items: center;
@@ -377,7 +370,7 @@ const AnalyticsPage = () => {
   };
   if (licenseLoading) {
     return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs(LoadingOverlay, { children: [
-      /* @__PURE__ */ jsx(ChartBubble, { className: "loader-icon", style: { width: "64px", height: "64px", color: theme.colors.primary[600] } }),
+      /* @__PURE__ */ jsx(ChartBubble, { className: "loader-icon", style: { width: "64px", height: "64px", color: "var(--colors-primary600, #0284C7)" } }),
       /* @__PURE__ */ jsx(Loader, { children: "Checking license..." }),
       /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Please wait while we verify your premium access" })
     ] }) });
@@ -388,9 +381,9 @@ const AnalyticsPage = () => {
       {
         padding: 10,
         style: {
-          background: "linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%)",
+          background: "linear-gradient(135deg, rgba(234, 179, 8, 0.12) 0%, rgba(234, 179, 8, 0.25) 100%)",
           borderRadius: "20px",
-          border: "3px solid #fbbf24",
+          border: "3px solid rgba(234, 179, 8, 0.4)",
           textAlign: "center",
           boxShadow: "0 20px 40px rgba(245, 158, 11, 0.2)",
           maxWidth: "800px",
@@ -417,7 +410,7 @@ const AnalyticsPage = () => {
               {
                 variant: "alpha",
                 style: {
-                  color: "#92400e",
+                  color: "var(--colors-warning600, #92400e)",
                   fontWeight: "700",
                   marginBottom: "24px",
                   fontSize: "36px",
@@ -432,7 +425,7 @@ const AnalyticsPage = () => {
               {
                 variant: "omega",
                 style: {
-                  color: "#78350f",
+                  color: "var(--colors-warning600, #78350f)",
                   lineHeight: "1.9",
                   marginBottom: "44px",
                   fontSize: "17px",
@@ -448,7 +441,7 @@ const AnalyticsPage = () => {
               {
                 onClick: () => window.open("https://magicapi.fitlex.me", "_blank"),
                 style: {
-                  background: "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",
+                  background: "linear-gradient(135deg, var(--colors-warning600, #f59e0b) 0%, var(--colors-warning600, #d97706) 100%)",
                   color: "white",
                   border: "none",
                   padding: "16px 48px",
@@ -477,7 +470,7 @@ const AnalyticsPage = () => {
   }
   if (loading) {
     return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs(LoadingOverlay, { children: [
-      /* @__PURE__ */ jsx(ChartBubble, { className: "loader-icon", style: { width: "64px", height: "64px", color: theme.colors.primary[600] } }),
+      /* @__PURE__ */ jsx(ChartBubble, { className: "loader-icon", style: { width: "64px", height: "64px", color: "var(--colors-primary600, #0284C7)" } }),
       /* @__PURE__ */ jsx(Loader, { children: "Loading analytics data..." })
     ] }) });
   }
@@ -486,17 +479,17 @@ const AnalyticsPage = () => {
   Math.max(...Object.values(analytics?.operatingSystems || {}), 1);
   Math.max(...analytics?.loginHours || [], 1);
   const deviceColors = {
-    "Desktop": [theme.colors.primary[500], theme.colors.primary[600]],
-    "Mobile": [theme.colors.success[500], theme.colors.success[600]],
-    "Tablet": [theme.colors.warning[500], theme.colors.warning[600]]
+    "Desktop": ["var(--colors-primary600, #0EA5E9)", "var(--colors-primary600, #0284C7)"],
+    "Mobile": ["var(--colors-success600, #22C55E)", "var(--colors-success600, #16A34A)"],
+    "Tablet": ["var(--colors-warning600, #F59E0B)", "var(--colors-warning600, #D97706)"]
   };
   const browserColors = {
-    "Chrome": [theme.colors.success[500], theme.colors.success[600]],
-    "Firefox": [theme.colors.warning[500], theme.colors.warning[600]],
-    "Safari": [theme.colors.primary[500], theme.colors.primary[600]],
-    "Edge": [theme.colors.secondary[500], theme.colors.secondary[600]],
-    "API Client": [theme.colors.neutral[600], theme.colors.neutral[700]],
-    "Other": [theme.colors.neutral[500], theme.colors.neutral[600]]
+    "Chrome": ["var(--colors-success600, #22C55E)", "var(--colors-success600, #16A34A)"],
+    "Firefox": ["var(--colors-warning600, #F59E0B)", "var(--colors-warning600, #D97706)"],
+    "Safari": ["var(--colors-primary600, #0EA5E9)", "var(--colors-primary600, #0284C7)"],
+    "Edge": ["var(--colors-secondary500, #A855F7)", "var(--colors-secondary600, #9333EA)"],
+    "API Client": ["var(--colors-neutral600)", "var(--colors-neutral700)"],
+    "Other": ["var(--colors-neutral500)", "var(--colors-neutral600)"]
   };
   return /* @__PURE__ */ jsxs(Container, { children: [
     /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(HeaderContent, { direction: "column", alignItems: "flex-start", gap: 2, children: [
@@ -507,23 +500,23 @@ const AnalyticsPage = () => {
       /* @__PURE__ */ jsx(Subtitle, { children: "Comprehensive insights and statistics about user sessions" })
     ] }) }),
     /* @__PURE__ */ jsxs(StatsGrid, { children: [
-      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.1s", $borderColor: theme.colors.primary[500], $accentColor: theme.colors.primary[600], children: [
-        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.primary[100], $color: theme.colors.primary[600], children: /* @__PURE__ */ jsx(ChartBubble, {}) }),
+      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.1s", $borderColor: "var(--colors-primary600, #0EA5E9)", $accentColor: "var(--colors-primary600, #0284C7)", children: [
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: "rgba(2, 132, 199, 0.12)", $color: "var(--colors-primary600, #0284C7)", children: /* @__PURE__ */ jsx(ChartBubble, {}) }),
         /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: analytics?.totalSessions || 0 }),
         /* @__PURE__ */ jsx(StatLabel, { children: "Total Sessions" })
       ] }),
-      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.2s", $borderColor: theme.colors.success[500], $accentColor: theme.colors.success[600], children: [
-        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.success[100], $color: theme.colors.success[600], children: /* @__PURE__ */ jsx(User, {}) }),
+      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.2s", $borderColor: "var(--colors-success600, #22C55E)", $accentColor: "var(--colors-success600, #16A34A)", children: [
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: "rgba(22, 163, 74, 0.12)", $color: "var(--colors-success600, #16A34A)", children: /* @__PURE__ */ jsx(User, {}) }),
         /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: analytics?.activeSessions || 0 }),
         /* @__PURE__ */ jsx(StatLabel, { children: "Active Now" })
       ] }),
-      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.3s", $borderColor: theme.colors.warning[500], $accentColor: theme.colors.warning[600], children: [
-        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.warning[100], $color: theme.colors.warning[600], children: /* @__PURE__ */ jsx(Clock, {}) }),
+      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.3s", $borderColor: "var(--colors-warning600, #F59E0B)", $accentColor: "var(--colors-warning600, #D97706)", children: [
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: "rgba(234, 179, 8, 0.12)", $color: "var(--colors-warning600, #D97706)", children: /* @__PURE__ */ jsx(Clock, {}) }),
         /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: analytics?.todayLogins || 0 }),
         /* @__PURE__ */ jsx(StatLabel, { children: "Today's Logins" })
       ] }),
-      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.4s", $borderColor: theme.colors.secondary[500], $accentColor: theme.colors.secondary[600], children: [
-        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: theme.colors.secondary[100], $color: theme.colors.secondary[600], children: /* @__PURE__ */ jsx(Clock, {}) }),
+      /* @__PURE__ */ jsxs(StatCard, { $delay: "0.4s", $borderColor: "var(--colors-secondary500, #A855F7)", $accentColor: "var(--colors-secondary600, #9333EA)", children: [
+        /* @__PURE__ */ jsx(StatIcon, { className: "stat-icon", $bg: "rgba(139, 92, 246, 0.12)", $color: "var(--colors-secondary600, #9333EA)", children: /* @__PURE__ */ jsx(Clock, {}) }),
         /* @__PURE__ */ jsx(StatValue, { className: "stat-value", children: analytics?.weekLogins || 0 }),
         /* @__PURE__ */ jsx(StatLabel, { children: "This Week" })
       ] })
@@ -540,8 +533,8 @@ const AnalyticsPage = () => {
             BarFill,
             {
               $percentage: count / maxDevices * 100,
-              $color1: deviceColors[device]?.[0] || theme.colors.neutral[500],
-              $color2: deviceColors[device]?.[1] || theme.colors.neutral[600],
+              $color1: deviceColors[device]?.[0] || "var(--colors-neutral500)",
+              $color2: deviceColors[device]?.[1] || "var(--colors-neutral600)",
               $delay: `${0.5 + idx * 0.1}s`,
               children: /* @__PURE__ */ jsx(BarValue, { children: count })
             }
@@ -559,8 +552,8 @@ const AnalyticsPage = () => {
             BarFill,
             {
               $percentage: count / maxBrowsers * 100,
-              $color1: browserColors[browser]?.[0] || theme.colors.neutral[500],
-              $color2: browserColors[browser]?.[1] || theme.colors.neutral[600],
+              $color1: browserColors[browser]?.[0] || "var(--colors-neutral500)",
+              $color2: browserColors[browser]?.[1] || "var(--colors-neutral600)",
               $delay: `${0.5 + idx * 0.1}s`,
               children: /* @__PURE__ */ jsx(BarValue, { children: count })
             }
@@ -592,7 +585,7 @@ const AnalyticsPage = () => {
           }
         )
       ] }),
-      analytics?.avgSessionDuration > 0 && /* @__PURE__ */ jsx(Box, { marginTop: 5, padding: 5, background: "primary50", hasRadius: true, style: { border: `1px solid ${theme.colors.primary[100]}` }, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "primary700", style: { fontSize: "14px", lineHeight: "1.8", fontWeight: "500" }, children: "ℹ️ Average time between login and last activity across all sessions. Lower values indicate more frequent activity, higher values may indicate idle or abandoned sessions." }) })
+      analytics?.avgSessionDuration > 0 && /* @__PURE__ */ jsx(Box, { marginTop: 5, padding: 5, background: "primary50", hasRadius: true, style: { border: `1px solid ${"rgba(2, 132, 199, 0.12)"}` }, children: /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "primary700", style: { fontSize: "14px", lineHeight: "1.8", fontWeight: "500" }, children: "ℹ️ Average time between login and last activity across all sessions. Lower values indicate more frequent activity, higher values may indicate idle or abandoned sessions." }) })
     ] })
   ] });
 };