strapi-plugin-magic-sessionmanager 4.2.4 → 4.2.6

package/admin/src/components/OnlineUsersWidget.jsx

@@ -1,212 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import { useIntl } from 'react-intl';
-import { Box, Typography, Flex, Grid } from '@strapi/design-system';
-import { Check, Cross, Clock, User, Monitor } from '@strapi/icons';
-import { useFetchClient } from '@strapi/strapi/admin';
-import { getTranslation } from '../utils/getTranslation';
-
-/**
- * Online Users Widget - Dashboard widget showing user activity statistics
- * Styled exactly like Project Statistics
- */
-const OnlineUsersWidget = () => {
-  const { formatMessage } = useIntl();
-  const { get } = useFetchClient();
-  const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
-  const [stats, setStats] = useState({
-    onlineNow: 0,
-    offline: 0,
-    last15min: 0,
-    last30min: 0,
-    totalUsers: 0,
-    blocked: 0,
-  });
-  const [loading, setLoading] = useState(true);
-
-  const fetchStats = useCallback(async () => {
-    try {
-      const { data } = await get('/magic-sessionmanager/sessions');
-        const sessions = data.data || [];
-        
-        const now = Date.now();
-        const fifteenMin = 15 * 60 * 1000;
-        const thirtyMin = 30 * 60 * 1000;
-        
-        const onlineNow = new Set();
-        const last15min = new Set();
-        const last30min = new Set();
-        
-        sessions.forEach(session => {
-          const userId = session.user?.id;
-          if (!userId) return;
-          
-          const lastActive = session.lastActive ? new Date(session.lastActive) : new Date(session.loginTime);
-          const timeSinceActive = now - lastActive.getTime();
-          
-          if (timeSinceActive < fifteenMin) {
-            onlineNow.add(userId);
-            last15min.add(userId);
-            last30min.add(userId);
-          } else if (timeSinceActive < thirtyMin) {
-            last15min.add(userId);
-            last30min.add(userId);
-          }
-        });
-        
-        try {
-          // Get total users
-          const { data: usersData } = await get('/content-manager/collection-types/plugin::users-permissions.user?pageSize=1');
-          const totalUsers = usersData?.pagination?.total || 0;
-          
-          // Get blocked users count
-          const { data: blockedData } = await get('/content-manager/collection-types/plugin::users-permissions.user?filters[$and][0][blocked][$eq]=true&pageSize=1');
-          const blockedUsers = blockedData?.pagination?.total || 0;
-          
-          setStats({
-            onlineNow: onlineNow.size,
-            last15min: last15min.size,
-            last30min: last30min.size,
-            offline: totalUsers - onlineNow.size,
-            totalUsers,
-            blocked: blockedUsers,
-          });
-        } catch (err) {
-          console.error('[OnlineUsersWidget] Error fetching user count:', err);
-          setStats({
-            onlineNow: onlineNow.size,
-            last15min: last15min.size,
-            last30min: last30min.size,
-            offline: 0,
-            totalUsers: onlineNow.size,
-            blocked: 0,
-          });
-      }
-    } catch (err) {
-      console.error('[OnlineUsersWidget] Error:', err);
-    } finally {
-      setLoading(false);
-    }
-  }, [get]);
-
-  useEffect(() => {
-    fetchStats();
-    
-    // Refresh every 30 seconds
-    const interval = setInterval(fetchStats, 30000);
-    return () => clearInterval(interval);
-  }, [fetchStats]);
-
-  // Stat Card - styled like Project Statistics items
-  const StatCard = ({ icon: Icon, label, value, color }) => (
-    <Box
-      as="a"
-      padding={4}
-      background="neutral0"
-      hasRadius
-      shadow="tableShadow"
-      style={{
-        textDecoration: 'none',
-        cursor: 'default',
-        transition: 'box-shadow 0.2s',
-        border: '1px solid #f0f0ff',
-      }}
-    >
-      <Flex justifyContent="space-between" alignItems="flex-start">
-        <Flex gap={3} alignItems="center">
-          <Box
-            padding={2}
-            background={`${color}100`}
-            hasRadius
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <Icon width="16px" height="16px" fill={`${color}600`} />
-          </Box>
-          <Flex direction="column" gap={1} alignItems="flex-start">
-            <Typography variant="pi" textColor="neutral600">
-              {label}
-            </Typography>
-            <Typography variant="delta" fontWeight="bold" textColor="neutral800">
-              {value}
-            </Typography>
-          </Flex>
-        </Flex>
-      </Flex>
-    </Box>
-  );
-
-  if (loading) {
-    return (
-      <Box padding={4}>
-        <Typography variant="pi" textColor="neutral600">{t('common.loading', 'Loading...')}</Typography>
-      </Box>
-    );
-  }
-
-  return (
-    <Box padding={0}>
-      <Flex direction="column" gap={3}>
-        <Grid.Root gap={3} gridCols={2}>
-          <Grid.Item col={1}>
-            <StatCard 
-              icon={Check} 
-              label={t('widget.stats.onlineNow', 'Online Now')}
-              value={stats.onlineNow}
-              color="success"
-            />
-          </Grid.Item>
-          
-          <Grid.Item col={1}>
-            <StatCard 
-              icon={Cross} 
-              label={t('widget.stats.offline', 'Offline')}
-              value={stats.offline}
-              color="neutral"
-            />
-          </Grid.Item>
-          
-          <Grid.Item col={1}>
-            <StatCard 
-              icon={Clock} 
-              label={t('widget.stats.last15min', 'Last 15 min')}
-              value={stats.last15min}
-              color="primary"
-            />
-          </Grid.Item>
-          
-          <Grid.Item col={1}>
-            <StatCard 
-              icon={Clock} 
-              label={t('widget.stats.last30min', 'Last 30 min')}
-              value={stats.last30min}
-              color="secondary"
-            />
-          </Grid.Item>
-          
-          <Grid.Item col={1}>
-            <StatCard 
-              icon={User} 
-              label={t('widget.stats.totalUsers', 'Total Users')}
-              value={stats.totalUsers}
-              color="neutral"
-            />
-          </Grid.Item>
-          
-          <Grid.Item col={1}>
-            <StatCard 
-              icon={Cross} 
-              label={t('widget.stats.blocked', 'Blocked')}
-              value={stats.blocked}
-              color="danger"
-            />
-          </Grid.Item>
-        </Grid.Root>
-      </Flex>
-    </Box>
-  );
-};
-
-export default OnlineUsersWidget;

package/admin/src/components/PluginIcon.jsx

@@ -1,8 +0,0 @@
-// Monitor Icon - Session Manager
-const PluginIcon = () => (
-  <svg viewBox="0 0 32 32" fill="currentColor" width="24" height="24">
-    <path d="M26 5H6a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h20a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3M20 27h-8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2" />
-  </svg>
-);
-
-export default PluginIcon;

package/admin/src/components/SessionDetailModal.jsx

@@ -1,449 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-import {
-  Modal,
-  Box,
-  Flex,
-  Typography,
-  Button,
-  Badge,
-  Divider,
-} from '@strapi/design-system';
-import {
-  Monitor,
-  Phone,
-  Server,
-  Cross,
-  Check,
-  Clock,
-  Information,
-  Crown,
-  Earth,
-  Shield,
-} from '@strapi/icons';
-import { useFetchClient, useNotification } from '@strapi/strapi/admin';
-import parseUserAgent from '../utils/parseUserAgent';
-import pluginId from '../pluginId';
-import { useLicense } from '../hooks/useLicense';
-import { getTranslation } from '../utils/getTranslation';
-
-const TwoColumnGrid = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 24px;
-  
-  @media (max-width: 768px) {
-    grid-template-columns: 1fr;
-  }
-`;
-
-const SectionTitle = styled(Typography)`
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  font-size: 11px;
-  font-weight: 700;
-  color: #374151;
-  margin-bottom: 16px;
-  padding-bottom: 8px;
-  border-bottom: 2px solid #e5e7eb;
-  display: block;
-`;
-
-const Section = styled(Box)`
-  margin-bottom: 24px;
-`;
-
-const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
-  const { formatMessage } = useIntl();
-  const { get, post } = useFetchClient();
-  const { toggleNotification } = useNotification();
-  const { isPremium, loading: licenseLoading } = useLicense();
-  const [terminating, setTerminating] = useState(false);
-  const [showUserAgent, setShowUserAgent] = useState(false);
-  const [geoData, setGeoData] = useState(null);
-  const [geoLoading, setGeoLoading] = useState(false);
-  const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
-
-  if (!session) return null;
-
-  const deviceInfo = parseUserAgent(session.userAgent);
-  const isOnline = session.isTrulyActive;
-
-  // Fetch real geolocation data if premium
-  useEffect(() => {
-    if (isPremium && session.ipAddress && !geoData) {
-      fetchGeolocationData();
-    }
-  }, [isPremium, session.ipAddress]);
-
-  const fetchGeolocationData = async () => {
-    setGeoLoading(true);
-    try {
-      const { data } = await get(`/${pluginId}/geolocation/${session.ipAddress}`);
-      setGeoData(data.data);
-    } catch (err) {
-      console.error('[SessionDetailModal] Error fetching geolocation:', err);
-      // Fallback to mock data if API fails
-      setGeoData({
-        country_flag: '',
-        country: 'Unknown',
-        city: 'Unknown',
-        timezone: 'Unknown',
-        securityScore: 50,
-        riskLevel: 'Unknown',
-        isVpn: false,
-        isProxy: false,
-      });
-    } finally {
-      setGeoLoading(false);
-    }
-  };
-  
-  // Use real data if available, otherwise fallback
-  const premiumData = geoData || {
-    country_flag: '',
-    country: 'Loading...',
-    city: 'Loading...',
-    timezone: 'Loading...',
-    securityScore: 0,
-    riskLevel: 'Unknown',
-    isVpn: false,
-    isProxy: false,
-  };
-  
-  const getDeviceIcon = (deviceType) => {
-    if (deviceType === 'Mobile' || deviceType === 'Tablet') return Phone;
-    if (deviceType === 'Desktop' || deviceType === 'Laptop') return Monitor;
-    return Server;
-  };
-  
-  const DeviceIcon = getDeviceIcon(deviceInfo.device);
-
-  const handleTerminate = async () => {
-    if (!confirm(t('modal.confirm.terminate', 'Are you sure you want to terminate this session?'))) {
-      return;
-    }
-
-    setTerminating(true);
-    try {
-      await post(`/${pluginId}/sessions/${session.id}/terminate`);
-      
-      toggleNotification({
-        type: 'success',
-        message: t('notifications.success.terminated', 'Session terminated successfully'),
-      });
-      
-      onSessionTerminated();
-      onClose();
-    } catch (err) {
-      console.error('[SessionDetailModal] Error:', err);
-      toggleNotification({
-        type: 'danger',
-        message: t('notifications.error.terminate', 'Failed to terminate session'),
-      });
-    } finally {
-      setTerminating(false);
-    }
-  };
-
-  const DetailRow = ({ label, value, icon: Icon, compact }) => (
-    <Flex gap={3} alignItems="flex-start" style={{ marginBottom: compact ? '12px' : '16px' }}>
-      {Icon && (
-        <Box style={{ 
-          width: '36px', 
-          height: '36px', 
-          display: 'flex', 
-          alignItems: 'center', 
-          justifyContent: 'center',
-          background: '#f3f4f6',
-          borderRadius: '8px',
-          flexShrink: 0,
-        }}>
-          <Icon width="18px" height="18px" />
-        </Box>
-      )}
-      <Flex direction="column" alignItems="flex-start" style={{ flex: 1, minWidth: 0 }}>
-        <Typography variant="pi" textColor="neutral600" style={{ fontSize: '11px', fontWeight: '600', marginBottom: '4px' }}>
-          {label}
-        </Typography>
-        <Typography variant="omega" textColor="neutral800" style={{ fontSize: '14px', fontWeight: '500' }}>
-          {value}
-        </Typography>
-      </Flex>
-    </Flex>
-  );
-
-  return (
-    <Modal.Root open onOpenChange={onClose}>
-      <Modal.Content style={{ maxWidth: '900px' }}>
-        <Modal.Header>
-          <Flex gap={3} alignItems="center">
-            <Box style={{
-              width: '48px',
-              height: '48px',
-              borderRadius: '12px',
-              background: isOnline ? '#dcfce7' : '#f3f4f6',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}>
-              <DeviceIcon width="24px" height="24px" />
-            </Box>
-            <Flex direction="column" alignItems="flex-start">
-              <Typography variant="beta" fontWeight="bold">
-                {t('modal.title', 'Session Details')}
-              </Typography>
-              <Typography variant="pi" textColor="neutral600">
-                {t('modal.id', 'ID: {id}', { id: session.id })}
-              </Typography>
-            </Flex>
-          </Flex>
-        </Modal.Header>
-
-        <Modal.Body>
-          <Box padding={6}>
-            {/* Status Badge */}
-            <Flex justifyContent="center" style={{ marginBottom: '24px' }}>
-              <Badge 
-                backgroundColor={isOnline ? 'success600' : 'neutral600'}
-                textColor="neutral0"
-                size="M"
-                style={{ fontSize: '14px', padding: '8px 20px', fontWeight: '600' }}
-              >
-                {isOnline ? t('modal.status.online', 'ONLINE') : t('modal.status.offline', 'OFFLINE')}
-              </Badge>
-            </Flex>
-
-            <Divider style={{ marginBottom: '24px' }} />
-
-            {/* Two Column Layout */}
-            <TwoColumnGrid>
-              {/* Left Column: User & Device */}
-              <Box>
-                {/* User Information */}
-                <Section>
-                  <SectionTitle>
-                    {t('modal.section.user', 'User')}
-                  </SectionTitle>
-                  
-                  <DetailRow compact icon={Check} label={t('modal.user.username', 'Username')} value={session.user?.username || t('modal.user.na', 'N/A')} />
-                  <DetailRow compact icon={Information} label={t('modal.user.email', 'Email')} value={session.user?.email || t('modal.user.na', 'N/A')} />
-                  <DetailRow compact icon={Information} label={t('modal.user.id', 'User ID')} value={session.user?.id || t('modal.user.na', 'N/A')} />
-                </Section>
-
-                {/* Device Information */}
-                <Section>
-                  <SectionTitle>
-                    {t('modal.section.device', 'Device')}
-                  </SectionTitle>
-                  
-                  <DetailRow compact icon={DeviceIcon} label={t('modal.device.device', 'Device')} value={deviceInfo.device} />
-                  <DetailRow compact icon={Monitor} label={t('modal.device.browser', 'Browser')} value={`${deviceInfo.browser} ${deviceInfo.browserVersion || ''}`} />
-                  <DetailRow compact icon={Server} label={t('modal.device.os', 'OS')} value={deviceInfo.os} />
-                  <DetailRow compact icon={Information} label={t('modal.device.ip', 'IP')} value={session.ipAddress} />
-                </Section>
-              </Box>
-
-              {/* Right Column: Timeline */}
-              <Box>
-                <Section>
-                  <SectionTitle>
-                    {t('modal.section.timeline', 'Timeline')}
-                  </SectionTitle>
-                
-                <DetailRow 
-                  compact 
-                  icon={Clock} 
-                  label={t('modal.timeline.login', 'Login')}
-                  value={new Date(session.loginTime).toLocaleString('de-DE', { 
-                    day: '2-digit', 
-                    month: 'short', 
-                    hour: '2-digit', 
-                    minute: '2-digit' 
-                  })} 
-                />
-                <DetailRow 
-                  compact 
-                  icon={Clock} 
-                  label={t('modal.timeline.lastActive', 'Last Active')}
-                  value={new Date(session.lastActive || session.loginTime).toLocaleString('de-DE', { 
-                    day: '2-digit', 
-                    month: 'short', 
-                    hour: '2-digit', 
-                    minute: '2-digit' 
-                  })} 
-                />
-                <DetailRow 
-                  compact 
-                  icon={Clock} 
-                  label={t('modal.timeline.idleTime', 'Idle Time')}
-                  value={t('modal.timeline.minutes', '{minutes} min', { minutes: session.minutesSinceActive })}
-                />
-                {session.logoutTime && (
-                  <DetailRow 
-                    compact 
-                    icon={Cross} 
-                    label={t('modal.timeline.logout', 'Logout')}
-                    value={new Date(session.logoutTime).toLocaleString('de-DE', { 
-                      day: '2-digit', 
-                      month: 'short', 
-                      hour: '2-digit', 
-                      minute: '2-digit' 
-                    })} 
-                  />
-                )}
-                </Section>
-              </Box>
-            </TwoColumnGrid>
-
-            {/* PREMIUM: Geolocation & Security Information */}
-            {isPremium ? (
-              <Section>
-                <SectionTitle>
-                  {t('modal.section.security', 'Location and Security')}
-                </SectionTitle>
-                
-                {geoLoading ? (
-                  <Box padding={4} style={{ textAlign: 'center' }}>
-                    <Typography variant="pi" textColor="neutral600">
-                      {t('modal.security.loading', 'Loading location data...')}
-                    </Typography>
-                  </Box>
-                ) : (
-                  <TwoColumnGrid>
-                    <Box>
-                      <DetailRow 
-                        compact 
-                        icon={Earth} 
-                        label={t('modal.security.country', 'Country')}
-                        value={`${premiumData.country_flag || ''} ${premiumData.country}`.trim()} 
-                      />
-                      <DetailRow compact icon={Earth} label={t('modal.security.city', 'City')} value={premiumData.city} />
-                      <DetailRow compact icon={Clock} label={t('modal.security.timezone', 'Timezone')} value={premiumData.timezone} />
-                    </Box>
-                    <Box>
-                      <DetailRow 
-                        compact 
-                        icon={Shield} 
-                        label={t('modal.security.score', 'Security')}
-                        value={`${premiumData.securityScore}/100 (${premiumData.riskLevel})`} 
-                      />
-                      <DetailRow 
-                        compact 
-                        icon={Shield} 
-                        label={t('modal.security.vpn', 'VPN')}
-                        value={premiumData.isVpn ? t('modal.security.vpnWarning', '[WARNING] Yes') : t('modal.security.no', 'No')} 
-                      />
-                      <DetailRow 
-                        compact 
-                        icon={Shield} 
-                        label={t('modal.security.proxy', 'Proxy')}
-                        value={premiumData.isProxy ? t('modal.security.vpnWarning', '[WARNING] Yes') : t('modal.security.no', 'No')} 
-                      />
-                    </Box>
-                  </TwoColumnGrid>
-                )}
-              </Section>
-            ) : (
-              <Section>
-                <Box
-                  padding={5}
-                  style={{
-                    background: 'linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%)',
-                    borderRadius: '12px',
-                    border: '2px solid #fbbf24',
-                    textAlign: 'center',
-                  }}
-                >
-                  <Flex direction="column" alignItems="center" gap={3}>
-                    <Crown style={{ width: '40px', height: '40px', color: '#d97706' }} />
-                    <Typography variant="beta" style={{ color: '#92400e', fontWeight: '700' }}>
-                      {t('modal.premium.title', 'Location and Security Analysis')}
-                    </Typography>
-                    <Typography variant="omega" style={{ color: '#78350f', fontSize: '14px', lineHeight: '1.6' }}>
-                      {t('modal.premium.description', 'Unlock premium features to get IP geolocation, security scoring, and VPN/Proxy detection for every session')}
-                    </Typography>
-                    <Button
-                      variant="secondary"
-                      size="M"
-                      onClick={() => window.open('https://magicapi.fitlex.me', '_blank')}
-                      style={{
-                        background: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
-                        color: 'white',
-                        border: 'none',
-                        fontWeight: '600',
-                        marginTop: '8px',
-                        boxShadow: '0 4px 12px rgba(245, 158, 11, 0.3)',
-                      }}
-                    >
-                      {t('modal.premium.upgrade', 'Upgrade to Premium')}
-                    </Button>
-                  </Flex>
-                </Box>
-              </Section>
-            )}
-
-            {/* User Agent - Collapsible */}
-            <Section>
-              <Flex justifyContent="space-between" alignItems="center" style={{ marginBottom: '12px' }}>
-                <SectionTitle style={{ marginBottom: 0, paddingBottom: 0, border: 'none' }}>
-                  {t('modal.section.technical', 'Technical Details')}
-                </SectionTitle>
-                <Button
-                  variant="tertiary"
-                  size="S"
-                  onClick={() => setShowUserAgent(!showUserAgent)}
-                  style={{ fontSize: '12px' }}
-                >
-                  {showUserAgent ? `▲ ${t('modal.technical.hide', 'Hide Details')}` : `▼ ${t('modal.technical.show', 'Show Details')}`}
-                </Button>
-              </Flex>
-              
-              {showUserAgent && (
-                <Box 
-                  padding={3} 
-                  background="neutral100" 
-                  hasRadius
-                  style={{ 
-                    fontFamily: 'monospace', 
-                    fontSize: '10px', 
-                    wordBreak: 'break-all',
-                    maxHeight: '80px',
-                    overflow: 'auto',
-                    marginTop: '8px',
-                    animation: 'fadeIn 0.3s ease-in-out',
-                  }}
-                >
-                  <Typography variant="pi" textColor="neutral600" style={{ lineHeight: '1.6' }}>
-                    {session.userAgent}
-                  </Typography>
-                </Box>
-              )}
-            </Section>
-          </Box>
-        </Modal.Body>
-
-        <Modal.Footer>
-          <Flex justifyContent="space-between" style={{ width: '100%' }}>
-            <Button onClick={onClose} variant="tertiary">
-              {t('modal.actions.close', 'Close')}
-            </Button>
-            <Button 
-              onClick={handleTerminate}
-              variant="danger"
-              disabled={!session.isActive || terminating}
-              loading={terminating}
-              startIcon={<Cross />}
-            >
-              {t('modal.actions.terminate', 'Terminate Session')}
-            </Button>
-          </Flex>
-        </Modal.Footer>
-      </Modal.Content>
-    </Modal.Root>
-  );
-};
-
-export default SessionDetailModal;
-