strapi-plugin-magic-mail 2.2.3 → 2.2.5

package/admin/src/components/Initializer.jsx

@@ -1,14 +0,0 @@
-import { useEffect, useRef } from 'react';
-import pluginId from '../pluginId';
-
-const Initializer = ({ setPlugin }) => {
-  const ref = useRef(setPlugin);
-
-  useEffect(() => {
-    ref.current(pluginId);
-  }, []);
-
-  return null;
-};
-
-export default Initializer;

package/admin/src/components/LicenseGuard.jsx

@@ -1,475 +0,0 @@
-import { useState, useEffect } from 'react';
-import styled, { keyframes } from 'styled-components';
-import {
-  Typography,
-  Box,
-  Flex,
-  Button,
-  TextInput,
-  Loader,
-} from '@strapi/design-system';
-import { useFetchClient, useNotification } from '@strapi/strapi/admin';
-import { CheckIcon, KeyIcon, XMarkIcon } from '@heroicons/react/24/outline';
-import { useNavigate } from 'react-router-dom';
-import { useAuthRefresh } from '../hooks/useAuthRefresh';
-
-// Animations
-const fadeIn = keyframes`
-  from { opacity: 0; }
-  to { opacity: 1; }
-`;
-
-const slideUp = keyframes`
-  from { 
-    opacity: 0;
-    transform: translateY(30px);
-  }
-  to { 
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-
-// Styled Components
-const ModalOverlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(4, 28, 47, 0.85);
-  backdrop-filter: blur(8px);
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: ${fadeIn} 0.3s ease-out;
-  padding: 20px;
-`;
-
-const ModalContent = styled(Box)`
-  background: white;
-  border-radius: 16px;
-  width: 100%;
-  max-width: 580px;
-  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
-  animation: ${slideUp} 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: hidden;
-`;
-
-const GradientHeader = styled(Box)`
-  background: linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%);
-  padding: 32px 40px;
-  position: relative;
-  overflow: hidden;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    right: -50%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
-  }
-`;
-
-const IconWrapper = styled.div`
-  width: 72px;
-  height: 72px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto 16px;
-  backdrop-filter: blur(10px);
-  border: 2px solid rgba(255, 255, 255, 0.3);
-
-  svg {
-    width: 36px;
-    height: 36px;
-    color: white;
-  }
-`;
-
-const CloseButton = styled.button`
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  background: rgba(255, 255, 255, 0.2);
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-radius: 50%;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s;
-  z-index: 10;
-  
-  svg {
-    width: 20px;
-    height: 20px;
-    color: white;
-  }
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.3);
-    transform: scale(1.1);
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-`;
-
-const ToggleButton = styled.button`
-  background: none;
-  border: none;
-  color: #0EA5E9;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  padding: 8px 0;
-  text-decoration: underline;
-  transition: color 0.2s;
-  
-  &:hover {
-    color: #A855F7;
-  }
-  
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;
-
-const LicenseGuard = ({ children }) => {
-  const { get, post } = useFetchClient();
-  const { toggleNotification } = useNotification();
-  const navigate = useNavigate();
-  useAuthRefresh(); // Initialize token auto-refresh
-
-  const [isChecking, setIsChecking] = useState(true);
-  const [needsLicense, setNeedsLicense] = useState(false);
-  const [isCreating, setIsCreating] = useState(false);
-  const [useExistingKey, setUseExistingKey] = useState(false);
-  const [useAutoCreate, setUseAutoCreate] = useState(true);
-  const [existingLicenseKey, setExistingLicenseKey] = useState('');
-  const [existingEmail, setExistingEmail] = useState('');
-  const [adminUser, setAdminUser] = useState(null);
-
-  useEffect(() => {
-    checkLicenseStatus();
-    fetchAdminUser();
-  }, []);
-
-  const fetchAdminUser = async () => {
-    try {
-      const response = await get('/admin/users/me');
-      const userData = response.data?.data || response.data;
-      if (userData) {
-        setAdminUser(userData);
-      }
-    } catch (error) {
-      console.debug('[MagicMail] Could not fetch admin user');
-    }
-  };
-
-  const checkLicenseStatus = async () => {
-    setIsChecking(true);
-    try {
-      const response = await get('/magic-mail/license/status');
-      
-      if (response.data.valid) {
-        setNeedsLicense(false);
-      } else {
-        setNeedsLicense(true);
-      }
-    } catch (error) {
-      console.error('[MagicMail] License check error:', error);
-      setNeedsLicense(true);
-    } finally {
-      setIsChecking(false);
-    }
-  };
-
-  const handleAutoCreateLicense = async (e) => {
-    e.preventDefault();
-    setIsCreating(true);
-    
-    try {
-      const response = await post('/magic-mail/license/auto-create', {});
-      
-      if (response.data && response.data.success) {
-        toggleNotification({
-          type: 'success',
-          message: '✅ License created! Reloading...',
-        });
-        
-        setNeedsLicense(false);
-        
-        setTimeout(() => {
-          window.location.reload();
-        }, 500);
-      } else {
-        throw new Error('Failed to auto-create license');
-      }
-    } catch (error) {
-      console.error('[MagicMail] Error:', error);
-      toggleNotification({
-        type: 'danger',
-        message: 'Failed to create license. Try manual entry.',
-      });
-      setIsCreating(false);
-      setUseAutoCreate(false);
-    }
-  };
-
-  const handleValidateExistingKey = async (e) => {
-    e.preventDefault();
-    
-    if (!existingLicenseKey.trim() || !existingEmail.trim()) {
-      toggleNotification({
-        type: 'warning',
-        message: 'Please enter both license key and email address',
-      });
-      return;
-    }
-
-    setIsCreating(true);
-    
-    try {
-      const response = await post('/magic-mail/license/store-key', {
-        licenseKey: existingLicenseKey.trim(),
-        email: existingEmail.trim(),
-      });
-
-      if (response.data && response.data.success) {
-        toggleNotification({
-          type: 'success',
-          message: '✅ License activated! Reloading...',
-        });
-        
-        setNeedsLicense(false);
-        
-        setTimeout(() => {
-          window.location.reload();
-        }, 500);
-      } else {
-        throw new Error('Invalid license');
-      }
-    } catch (error) {
-      toggleNotification({
-        type: 'danger',
-        message: 'Invalid license key or email address',
-      });
-      setIsCreating(false);
-    }
-  };
-
-  const handleClose = () => {
-    navigate('/content-manager');
-  };
-
-  if (isChecking) {
-    return (
-      <Box padding={8} style={{ textAlign: 'center' }}>
-        <Loader>Checking license...</Loader>
-      </Box>
-    );
-  }
-
-  if (needsLicense) {
-    return (
-      <ModalOverlay>
-        <ModalContent>
-          <GradientHeader>
-            <CloseButton onClick={handleClose} type="button">
-              <XMarkIcon />
-            </CloseButton>
-            <IconWrapper>
-              <KeyIcon />
-            </IconWrapper>
-            <Box style={{ textAlign: 'center', position: 'relative' }}>
-              <Typography
-                variant="alpha"
-                style={{
-                  color: 'white',
-                  fontSize: '24px',
-                  fontWeight: '700',
-                  marginBottom: '12px',
-                  display: 'block',
-                }}
-              >
-                🔐 Activate MagicMail
-              </Typography>
-              <Typography
-                variant="epsilon"
-                style={{
-                  color: 'rgba(255, 255, 255, 0.9)',
-                  fontSize: '14px',
-                  display: 'block',
-                }}
-              >
-                {useExistingKey ? 'Enter your existing license key' : 'Create a license to start using the plugin'}
-              </Typography>
-            </Box>
-          </GradientHeader>
-
-          <form onSubmit={useExistingKey ? handleValidateExistingKey : handleAutoCreateLicense}>
-            <Box padding={6} paddingLeft={8} paddingRight={8}>
-              <Flex direction="column" gap={5} style={{ width: '100%' }}>
-                <Box style={{ textAlign: 'center', width: '100%' }}>
-                  <ToggleButton 
-                    type="button"
-                    onClick={() => setUseExistingKey(!useExistingKey)}
-                    disabled={isCreating}
-                  >
-                    {useExistingKey ? '← Create new license' : 'Have a license key? →'}
-                  </ToggleButton>
-                </Box>
-
-                <Box
-                  background="primary100"
-                  padding={4}
-                  style={{
-                    borderRadius: '8px',
-                    border: '2px solid #BAE6FD',
-                    width: '100%',
-                  }}
-                >
-                  <Typography variant="omega" style={{ fontSize: '13px', lineHeight: '1.6' }}>
-                    {useExistingKey 
-                      ? '🔑 Enter your email and license key to activate.'
-                      : adminUser && adminUser.email
-                      ? `✨ Click "Activate" to auto-create a license with your account (${adminUser.email})`
-                      : '✨ Click "Activate" to auto-create a license with your admin account'
-                    }
-                  </Typography>
-                </Box>
-
-                {useExistingKey ? (
-                  // Existing License Key Input
-                  <>
-                    <Box style={{ width: '100%' }}>
-                      <Typography
-                        variant="pi"
-                        fontWeight="bold"
-                        style={{ marginBottom: '8px', display: 'block' }}
-                      >
-                        Email Address *
-                      </Typography>
-                      <TextInput
-                        placeholder="admin@example.com"
-                        type="email"
-                        value={existingEmail}
-                        onChange={(e) => setExistingEmail(e.target.value)}
-                        required
-                        disabled={isCreating}
-                      />
-                      <Typography variant="omega" textColor="neutral600" style={{ fontSize: '11px', marginTop: '4px' }}>
-                        Enter the email address associated with this license
-                      </Typography>
-                    </Box>
-
-                    <Box style={{ width: '100%' }}>
-                      <Typography
-                        variant="pi"
-                        fontWeight="bold"
-                        style={{ marginBottom: '8px', display: 'block' }}
-                      >
-                        License Key *
-                      </Typography>
-                      <TextInput
-                        placeholder="MAGIC-MAIL-XXXX-XXXX-XXXX"
-                        value={existingLicenseKey}
-                        onChange={(e) => setExistingLicenseKey(e.target.value)}
-                        required
-                        disabled={isCreating}
-                      />
-                      <Typography variant="omega" textColor="neutral600" style={{ fontSize: '11px', marginTop: '4px' }}>
-                        Enter the license key
-                      </Typography>
-                    </Box>
-                  </>
-                ) : adminUser ? (
-                  // Auto-create mode - Show user info
-                  <Box
-                    background="success100"
-                    padding={5}
-                    style={{
-                      borderRadius: '8px',
-                      border: '2px solid #DCFCE7',
-                      textAlign: 'center',
-                    }}
-                  >
-                    <Typography variant="omega" fontWeight="bold" style={{ marginBottom: '12px', display: 'block' }}>
-                      Ready to activate with your account:
-                    </Typography>
-                    <Typography variant="pi" style={{ marginBottom: '4px', display: 'block' }}>
-                      👤 {adminUser.firstname || 'Admin'} {adminUser.lastname || 'User'}
-                    </Typography>
-                    <Typography variant="pi" textColor="neutral600">
-                      📧 {adminUser.email || 'Loading...'}
-                    </Typography>
-                  </Box>
-                ) : (
-                  <Box padding={4} background="neutral100" hasRadius style={{ textAlign: 'center' }}>
-                    <Loader small />
-                    <Typography variant="pi" marginTop={2}>Loading admin user data...</Typography>
-                  </Box>
-                )}
-
-                <Flex gap={3} justifyContent="center" style={{ marginTop: '16px' }}>
-                  {useExistingKey ? (
-                    <Button
-                      type="submit"
-                      size="L"
-                      startIcon={<CheckIcon style={{ width: 20, height: 20 }} />}
-                      loading={isCreating}
-                      disabled={isCreating || !existingLicenseKey.trim() || !existingEmail.trim()}
-                      style={{
-                        background: 'linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%)',
-                        color: 'white',
-                        fontWeight: '600',
-                        border: 'none',
-                        boxShadow: '0 4px 12px rgba(14, 165, 233, 0.4)',
-                      }}
-                    >
-                      Validate License
-                    </Button>
-                  ) : (
-                    <Button
-                      type="submit"
-                      size="L"
-                      startIcon={<CheckIcon style={{ width: 20, height: 20 }} />}
-                      loading={isCreating}
-                      disabled={isCreating || !adminUser}
-                      style={{
-                        background: 'linear-gradient(135deg, #0EA5E9 0%, #A855F7 100%)',
-                        color: 'white',
-                        fontWeight: '600',
-                        border: 'none',
-                        boxShadow: '0 4px 12px rgba(14, 165, 233, 0.4)',
-                      }}
-                    >
-                      Activate License
-                    </Button>
-                  )}
-                </Flex>
-              </Flex>
-            </Box>
-          </form>
-        </ModalContent>
-      </ModalOverlay>
-    );
-  }
-
-  return <>{children}</>;
-};
-
-export default LicenseGuard;
-

package/admin/src/components/PluginIcon.jsx

@@ -1,5 +0,0 @@
-import { EnvelopeIcon } from '@heroicons/react/24/outline';
-
-const PluginIcon = () => <EnvelopeIcon style={{ width: 24, height: 24 }} />;
-
-export default PluginIcon;

package/admin/src/hooks/useAuthRefresh.js

@@ -1,44 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useFetchClient } from '@strapi/strapi/admin';
-
-/**
- * Hook to handle JWT token refresh for admin panel
- * Automatically refreshes token before expiration (every 4 minutes)
- * Also handles 401 responses with automatic token refresh
- */
-export const useAuthRefresh = () => {
-  const { get } = useFetchClient();
-  const intervalRef = useRef(null);
-
-  useEffect(() => {
-    // Set up auto-refresh every 4 minutes (before 5 min expiration)
-    intervalRef.current = setInterval(async () => {
-      try {
-        // Refresh token by hitting a protected endpoint
-        await get('/admin/users/me');
-        console.debug('[Auth Refresh] Token refreshed successfully');
-      } catch (error) {
-        // If refresh fails, log but don't break
-        console.debug('[Auth Refresh] Token refresh attempt failed');
-      }
-    }, 4 * 60 * 1000); // 4 minutes
-
-    return () => {
-      if (intervalRef.current) {
-        clearInterval(intervalRef.current);
-      }
-    };
-  }, [get]);
-
-  return {
-    refreshToken: async () => {
-      try {
-        await get('/admin/users/me');
-        return true;
-      } catch (error) {
-        return false;
-      }
-    },
-  };
-};
-

package/admin/src/hooks/useLicense.js

@@ -1,158 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useFetchClient } from '@strapi/strapi/admin';
-
-/**
- * Hook to check license status for MagicMail
- * Returns: { isPremium, loading, error, licenseData, refetch }
- */
-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(() => {
-    let mounted = true;
-    
-    const fetchLicense = async () => {
-      if (mounted) {
-        await checkLicense();
-      }
-    };
-    
-    fetchLicense();
-    
-    // Auto-refresh every 1 hour
-    const interval = setInterval(() => {
-      if (mounted) {
-        checkLicense(true); // Silent refresh
-      }
-    }, 60 * 60 * 1000);
-    
-    return () => {
-      mounted = false;
-      clearInterval(interval);
-    };
-  }, []);
-
-  const checkLicense = async (silent = false) => {
-    if (!silent) {
-      setLoading(true);
-    }
-    
-    try {
-      const response = await get('/magic-mail/license/status');
-      
-      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;
-      
-      setIsPremium(isValid && hasPremiumFeature);
-      setIsAdvanced(isValid && hasAdvancedFeature);
-      setIsEnterprise(isValid && hasEnterpriseFeature);
-      setLicenseData(response.data?.data || null);
-      setError(null);
-    } catch (err) {
-      // Ignore AbortError (happens on unmount)
-      if (err.name === 'AbortError') {
-        return;
-      }
-      
-      if (!silent) {
-        console.error('[MagicMail] License check error:', err);
-      }
-      setIsPremium(false);
-      setIsAdvanced(false);
-      setIsEnterprise(false);
-      setLicenseData(null);
-      setError(err);
-    } finally {
-      if (!silent) {
-        setLoading(false);
-      }
-    }
-  };
-
-  /**
-   * Check if a specific feature is available
-   * @param {string} featureName - Name of the feature to check
-   * @returns {boolean}
-   */
-  const hasFeature = (featureName) => {
-    if (!featureName) return false;
-    
-    // Free tier features (always available)
-    const freeFeatures = [
-      'basic-smtp',
-      'oauth-gmail',
-      'oauth-microsoft',
-      'oauth-yahoo',
-      'basic-routing',
-      'email-logging',
-      'account-testing',
-      'strapi-service-override',
-      'email-designer-basic',
-    ];
-    
-    if (freeFeatures.includes(featureName)) return true;
-    
-    // Premium+ features
-    const premiumFeatures = [
-      'email-designer-templates',
-    ];
-    
-    if (premiumFeatures.includes(featureName) && isPremium) return true;
-    
-    // Advanced+ features
-    const advancedFeatures = [
-      'sendgrid',
-      'mailgun',
-      'dkim-signing',
-      'priority-headers',
-      'list-unsubscribe',
-      'security-validation',
-      'analytics-dashboard',
-      'advanced-routing',
-      'email-designer-versioning',
-      'email-designer-import-export',
-    ];
-    
-    if (advancedFeatures.includes(featureName) && isAdvanced) return true;
-    
-    // Enterprise features
-    const enterpriseFeatures = [
-      'multi-tenant',
-      'compliance-reports',
-      'custom-security-rules',
-      'priority-support',
-      'email-designer-custom-blocks',
-      'email-designer-team-library',
-      'email-designer-a-b-testing',
-    ];
-    
-    if (enterpriseFeatures.includes(featureName) && isEnterprise) return true;
-    
-    return false;
-  };
-
-  return { 
-    isPremium, 
-    isAdvanced,
-    isEnterprise,
-    loading, 
-    error, 
-    licenseData,
-    features: {
-      premium: isPremium,
-      advanced: isAdvanced,
-      enterprise: isEnterprise,
-    },
-    hasFeature,
-    refetch: checkLicense 
-  };
-};
-