strapi-plugin-magic-sessionmanager 2.0.0 → 2.0.2

package/admin/src/components/SessionInfoCard.jsx

@@ -0,0 +1,151 @@
+import { useState, useEffect } from 'react';
+import { Box, Typography, Flex, Badge } from '@strapi/design-system';
+import { useFetchClient } from '@strapi/strapi/admin';
+
+/**
+ * Session Info Card - shows user's session status and history
+ * Injected into Content Manager edit view for Users
+ */
+const SessionInfoCard = ({ id, model }) => {
+  const { get } = useFetchClient();
+  const [sessions, setSessions] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [isUserModel, setIsUserModel] = useState(false);
+
+  useEffect(() => {
+    // Only show for User content type
+    if (model !== 'plugin::users-permissions.user') {
+      setIsUserModel(false);
+      setLoading(false);
+      return;
+    }
+
+    setIsUserModel(true);
+
+    // Fetch user's sessions
+    const fetchSessions = async () => {
+      if (!id) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const { data } = await get(`/api/magic-sessionmanager/user/${id}/sessions`);
+          setSessions(data.data || []);
+      } catch (err) {
+        console.error('[SessionInfoCard] Error fetching sessions:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchSessions();
+  }, [id, model, get]);
+
+  // Don't render anything if not a User model
+  if (!isUserModel) {
+    return null;
+  }
+
+  if (loading) {
+    return (
+      <Box padding={4} background="neutral100" borderRadius="4px">
+        <Typography variant="sigma" textColor="neutral600">
+          Loading sessions...
+        </Typography>
+      </Box>
+    );
+  }
+
+  const activeSessions = sessions.filter(s => s.isActive);
+  const isOnline = activeSessions.length > 0;
+
+  return (
+    <Box 
+      padding={4} 
+      background="neutral0" 
+      shadow="tableShadow"
+      borderRadius="4px"
+      marginBottom={4}
+    >
+      <Flex direction="column" gap={3}>
+        {/* Header */}
+        <Flex justifyContent="space-between" alignItems="center">
+          <Typography variant="sigma" textColor="neutral600" textTransform="uppercase">
+            Session Status
+          </Typography>
+          {isOnline ? (
+            <Badge active backgroundColor="success500">
+              🟢 Online
+            </Badge>
+          ) : (
+            <Badge backgroundColor="neutral150">
+              ⚫ Offline
+            </Badge>
+          )}
+        </Flex>
+
+        {/* Stats */}
+        <Box>
+          <Typography variant="omega" fontWeight="bold">
+            Active Sessions: {activeSessions.length}
+          </Typography>
+          <Typography variant="pi" textColor="neutral600">
+            Total Sessions: {sessions.length}
+          </Typography>
+        </Box>
+
+        {/* Active Sessions List */}
+        {activeSessions.length > 0 && (
+          <Box>
+            <Typography variant="pi" fontWeight="bold" marginBottom={2}>
+              Current Sessions:
+            </Typography>
+            {activeSessions.slice(0, 3).map((session) => (
+              <Box 
+                key={session.id} 
+                padding={2} 
+                background="neutral100" 
+                borderRadius="4px"
+                marginBottom={2}
+              >
+                <Typography variant="pi" textColor="neutral800">
+                  📱 {session.ipAddress}
+                </Typography>
+                <Typography variant="pi" textColor="neutral600" fontSize="11px">
+                  {new Date(session.loginTime).toLocaleString()}
+                </Typography>
+              </Box>
+            ))}
+            {activeSessions.length > 3 && (
+              <Typography variant="pi" textColor="neutral600">
+                + {activeSessions.length - 3} more...
+              </Typography>
+            )}
+          </Box>
+        )}
+
+        {/* Last Activity */}
+        {sessions.length > 0 && (
+          <Box>
+            <Typography variant="pi" textColor="neutral600">
+              Last Activity: {new Date(sessions[0].lastActive).toLocaleString()}
+            </Typography>
+          </Box>
+        )}
+
+        {/* No sessions message */}
+        {sessions.length === 0 && (
+          <Box padding={2} background="neutral100" borderRadius="4px">
+            <Typography variant="pi" textColor="neutral600">
+              No session data available
+            </Typography>
+          </Box>
+        )}
+      </Flex>
+    </Box>
+  );
+};
+
+export default SessionInfoCard;
+

package/admin/src/components/SessionInfoPanel.jsx

@@ -0,0 +1,375 @@
+import { useState, useEffect } from 'react';
+import { Box, Typography, Flex, Button, Badge, Divider } from '@strapi/design-system';
+import { Check, Cross, Monitor, Phone, Server, Clock } from '@strapi/icons';
+import { useFetchClient, useNotification } from '@strapi/strapi/admin';
+import parseUserAgent from '../utils/parseUserAgent';
+
+/**
+ * Session Info Panel - Native Strapi design
+ * Clean, professional sidebar panel for Content Manager
+ */
+const SessionInfoPanel = ({ documentId, model, document }) => {
+  const [sessions, setSessions] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [isBlocked, setIsBlocked] = useState(false);
+  const [actionLoading, setActionLoading] = useState(false);
+  const { get, post: postRequest } = useFetchClient();
+  const { toggleNotification } = useNotification();
+
+  const userId = document?.id || documentId;
+
+  useEffect(() => {
+    if (model !== 'plugin::users-permissions.user' || !userId) {
+      setLoading(false);
+      return;
+    }
+
+    const fetchData = async () => {
+      try {
+        const { data } = await get(`/api/magic-sessionmanager/user/${userId}/sessions`);
+          // Filter by truly active (not just isActive, but also within timeout)
+          const activeSessions = (data.data || []).filter(s => s.isTrulyActive);
+          setSessions(activeSessions);
+
+        setIsBlocked(document?.blocked || false);
+      } catch (err) {
+        console.error('[SessionInfoPanel] Error:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [userId, model, document, get]);
+
+  const handleLogoutAll = async () => {
+    if (!userId) return;
+    
+    setActionLoading(true);
+    try {
+      const response = await postRequest(`/magic-sessionmanager/user/${userId}/terminate-all`);
+      
+      if (response.data?.success) {
+        toggleNotification({
+          type: 'success',
+          message: 'All sessions terminated successfully',
+        });
+        setSessions([]);
+      }
+    } catch (error) {
+      toggleNotification({
+        type: 'warning',
+        message: 'Failed to terminate sessions',
+      });
+      console.error('[SessionInfoPanel] Logout all error:', error);
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const handleToggleBlock = async () => {
+    if (!userId) return;
+    
+    setActionLoading(true);
+    try {
+      const response = await postRequest(`/magic-sessionmanager/user/${userId}/toggle-block`);
+      
+      if (response.data?.success) {
+        const newBlockedStatus = response.data.blocked;
+        setIsBlocked(newBlockedStatus);
+        
+        toggleNotification({
+          type: 'success',
+          message: newBlockedStatus ? 'User blocked successfully' : 'User unblocked successfully',
+        });
+        
+        if (newBlockedStatus) {
+          setSessions([]);
+        }
+      }
+    } catch (error) {
+      toggleNotification({
+        type: 'warning',
+        message: 'Failed to update user status',
+      });
+      console.error('[SessionInfoPanel] Toggle block error:', error);
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  const getDeviceIcon = (deviceType) => {
+    if (deviceType === 'Mobile' || deviceType === 'Tablet') return Phone;
+    if (deviceType === 'Desktop' || deviceType === 'Laptop') return Monitor;
+    return Server;
+  };
+
+  // ONLY show for User content type - hide completely for others
+  if (model !== 'plugin::users-permissions.user') {
+    return null;
+  }
+
+  if (loading) {
+    return {
+      title: 'Session Info',
+      content: (
+        <Box padding={4} background="neutral0">
+          <Typography variant="pi" textColor="neutral600">Loading...</Typography>
+        </Box>
+      ),
+    };
+  }
+
+  const isOnline = sessions.length > 0;
+
+  return {
+    title: 'Session Info',
+    content: (
+      <Box style={{ width: '100%' }}>
+        <Flex direction="column" gap={4} alignItems="stretch">
+        {/* Status Bar */}
+        <Box 
+          padding={5} 
+          background={isOnline ? 'success100' : 'neutral150'}
+          hasRadius
+          style={{ 
+            border: isOnline ? '1px solid #c6f6d5' : '1px solid #eaeaef',
+            transition: 'all 0.2s ease'
+          }}
+        >
+          <Flex direction="column" gap={3} alignItems="center">
+            <Badge 
+              backgroundColor={isOnline ? 'success600' : 'neutral600'}
+              textColor="neutral0"
+              size="M"
+              style={{ fontSize: '14px', padding: '6px 12px' }}
+            >
+              {isOnline ? '🟢 ACTIVE' : '⚫ OFFLINE'}
+            </Badge>
+            <Typography variant="omega" fontWeight="semiBold" textColor={isOnline ? 'success700' : 'neutral700'}>
+              {sessions.length} active session{sessions.length !== 1 ? 's' : ''}
+            </Typography>
+          </Flex>
+        </Box>
+
+        {/* User Blocked Warning */}
+        {isBlocked && (
+          <Box
+            padding={4}
+            background="danger100"
+            hasRadius
+          >
+            <Typography variant="omega" fontWeight="semiBold" textColor="danger700" marginBottom={1}>
+              User is blocked
+            </Typography>
+            <Typography variant="pi" textColor="danger600">
+              Authentication disabled
+            </Typography>
+          </Box>
+        )}
+
+        {/* Active Sessions List */}
+        {sessions.length > 0 ? (
+          <Flex direction="column" gap={3} alignItems="stretch">
+            <Typography variant="sigma" textColor="neutral600" textTransform="uppercase" style={{ 
+              textAlign: 'left',
+              letterSpacing: '0.5px',
+              fontSize: '12px'
+            }}>
+              Active Sessions
+            </Typography>
+            
+            {sessions.slice(0, 5).map((session) => {
+              const deviceInfo = parseUserAgent(session.userAgent);
+              const DeviceIcon = getDeviceIcon(deviceInfo.device);
+              
+              return (
+                <Box 
+                  key={session.id}
+                  padding={4}
+                  background="neutral0"
+                  hasRadius
+                  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';
+                  }}
+                >
+                  <Flex direction="column" gap={2} alignItems="flex-start">
+                    {/* Device Name with Icon */}
+                    <Flex gap={2} alignItems="center">
+                      <DeviceIcon width="20px" height="20px" />
+                      <Typography variant="omega" fontWeight="bold" textColor="neutral800">
+                        {deviceInfo.device}
+                      </Typography>
+                    </Flex>
+                    
+                    {/* Status Badge */}
+                    <Badge 
+                      backgroundColor="success600" 
+                      textColor="neutral0" 
+                      size="S"
+                    >
+                      Active
+                    </Badge>
+                    
+                    {/* Browser & OS */}
+                    <Typography variant="pi" textColor="neutral600">
+                      {deviceInfo.browser} on {deviceInfo.os}
+                    </Typography>
+                    
+                    <Divider />
+                    
+                    {/* IP Address */}
+                    <Flex gap={2} alignItems="center">
+                      <Server width="14px" height="14px" />
+                      <Typography variant="pi" textColor="neutral600">
+                        {session.ipAddress}
+                      </Typography>
+                    </Flex>
+                    
+                    {/* Login Time */}
+                      <Flex gap={2} alignItems="center">
+                        <Clock width="14px" height="14px" />
+                        <Typography variant="pi" textColor="neutral600">
+                          {new Date(session.loginTime).toLocaleString('en-US', {
+                            month: 'short',
+                            day: 'numeric',
+                            hour: '2-digit',
+                            minute: '2-digit'
+                          })}
+                        </Typography>
+                      </Flex>
+                      
+                      {/* Show minutes since last activity */}
+                      {session.minutesSinceActive !== undefined && session.minutesSinceActive < 60 && (
+                        <Typography variant="pi" textColor="success600" fontWeight="semiBold">
+                          Active {session.minutesSinceActive === 0 ? 'now' : `${session.minutesSinceActive} min ago`}
+                        </Typography>
+                      )}
+                  </Flex>
+                </Box>
+              );
+            })}
+            
+            {sessions.length > 5 && (
+              <Box padding={3} background="primary100" hasRadius textAlign="center">
+                <Typography variant="pi" textColor="primary600" fontWeight="semiBold">
+                  +{sessions.length - 5} more session{sessions.length - 5 !== 1 ? 's' : ''}
+                </Typography>
+              </Box>
+            )}
+          </Flex>
+        ) : (
+          <Box 
+            padding={6}
+            background="neutral100"
+            hasRadius
+            style={{ 
+              border: '1px dashed #dcdce4',
+              textAlign: 'center'
+            }}
+          >
+            <Flex direction="column" alignItems="center" gap={2}>
+              <Typography 
+                variant="pi" 
+                textColor="neutral600"
+                style={{ fontSize: '32px', marginBottom: '8px' }}
+              >
+                💤
+              </Typography>
+              <Typography variant="omega" fontWeight="semiBold" textColor="neutral700">
+              No active sessions
+            </Typography>
+              <Typography variant="pi" textColor="neutral500" style={{ fontSize: '13px' }}>
+              User has not logged in yet
+            </Typography>
+            </Flex>
+          </Box>
+        )}
+
+        {/* Action Buttons - Always at the bottom */}
+        <Divider />
+        
+        <Flex direction="column" gap={3} alignItems="stretch">
+          <Typography variant="sigma" textColor="neutral600" textTransform="uppercase" style={{ 
+            textAlign: 'left',
+            letterSpacing: '0.5px',
+            fontSize: '12px'
+          }}>
+            Actions
+          </Typography>
+          
+          <Button
+            variant="secondary"
+            size="M"
+            fullWidth
+            onClick={handleLogoutAll}
+            disabled={actionLoading || sessions.length === 0}
+            startIcon={<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';
+              }
+            }}
+          >
+            Terminate All Sessions
+          </Button>
+          
+          <Button
+            variant="secondary"
+            size="M"
+            fullWidth
+            onClick={handleToggleBlock}
+            disabled={actionLoading}
+            startIcon={isBlocked ? <Check /> : <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';
+              }
+            }}
+          >
+            {isBlocked ? 'Unblock User' : 'Block User'}
+          </Button>
+        </Flex>
+        </Flex>
+      </Box>
+    ),
+  };
+};
+
+export default SessionInfoPanel;

package/admin/src/components/index.jsx

@@ -0,0 +1,5 @@
+export { default as Initializer } from './Initializer';
+export { default as PluginIcon } from './PluginIcon';
+export { default as SessionInfoCard } from './SessionInfoCard';
+export { default as SessionInfoPanel } from './SessionInfoPanel';
+export { default as OnlineUsersWidget } from './OnlineUsersWidget';

package/admin/src/hooks/useLicense.js

@@ -0,0 +1,103 @@
+import { useState, useEffect } from 'react';
+import { useFetchClient } from '@strapi/strapi/admin';
+import pluginId from '../pluginId';
+
+/**
+ * Hook to check license status
+ * Returns: { isPremium, loading, error }
+ */
+export const useLicense = () => {
+  const { get } = useFetchClient();
+  const [isPremium, setIsPremium] = useState(false);
+  const [isAdvanced, setIsAdvanced] = useState(false);
+  const [isEnterprise, setIsEnterprise] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [licenseData, setLicenseData] = useState(null);
+
+  useEffect(() => {
+    checkLicense();
+    
+    // Auto-refresh every 1 hour to detect license changes (silent background check)
+    const interval = setInterval(() => {
+      checkLicense(true); // Silent refresh - user merkt nichts
+    }, 60 * 60 * 1000); // 1 hour
+    
+    return () => clearInterval(interval);
+  }, []);
+
+  const checkLicense = async (silent = false) => {
+    if (!silent) {
+      setLoading(true);
+    }
+    
+    try {
+      const response = await get(`/${pluginId}/license/status`);
+      
+      // Debug logging with plugin name
+      if (!silent) {
+        console.log('[magic-sessionmanager/useLicense] Full API Response:', response.data);
+        console.log('[magic-sessionmanager/useLicense] License Details:', {
+          valid: response.data?.valid,
+          demo: response.data?.demo,
+          licenseKey: response.data?.data?.licenseKey?.substring(0, 13) + '...',
+          email: response.data?.data?.email,
+          features: response.data?.data?.features,
+          rawFeaturePremium: response.data?.data?.features?.premium,
+        });
+      }
+      
+      // Check if license is valid AND has premium feature enabled
+      const isValid = response.data?.valid || false;
+      const hasPremiumFeature = response.data?.data?.features?.premium || false;
+      const hasAdvancedFeature = response.data?.data?.features?.advanced || false;
+      const hasEnterpriseFeature = response.data?.data?.features?.enterprise || false;
+      const newIsPremium = isValid && hasPremiumFeature;
+      const newIsAdvanced = isValid && hasAdvancedFeature;
+      const newIsEnterprise = isValid && hasEnterpriseFeature;
+      
+      // Log with plugin name
+      if ((newIsPremium !== isPremium || !silent) && !silent) {
+        console.log(`[magic-sessionmanager/useLicense] Premium Status: ${newIsPremium} (valid: ${isValid}, featurePremium: ${hasPremiumFeature})`);
+        if (!newIsPremium && isValid) {
+          console.warn('[magic-sessionmanager/useLicense] ⚠️ License is valid but Premium feature is not enabled!');
+        }
+      }
+      
+      setIsPremium(newIsPremium);
+      setIsAdvanced(newIsAdvanced);
+      setIsEnterprise(newIsEnterprise);
+      setLicenseData(response.data?.data || null);
+      setError(null);
+    } catch (err) {
+      if (!silent) {
+        console.error('[useLicense] Error checking license:', err);
+      }
+      setIsPremium(false);
+      setIsAdvanced(false);
+      setIsEnterprise(false);
+      setLicenseData(null);
+      setError(err);
+    } finally {
+      if (!silent) {
+        setLoading(false);
+      }
+    }
+  };
+
+  return { 
+    isPremium, 
+    isAdvanced,
+    isEnterprise,
+    loading, 
+    error, 
+    licenseData,
+    features: {
+      premium: isPremium,
+      advanced: isAdvanced,
+      enterprise: isEnterprise,
+    },
+    refetch: checkLicense 
+  };
+};
+