strapi-plugin-magic-mail 1.0.1

package/admin/src/components/Initializer.jsx

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,475 @@
+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

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

package/admin/src/hooks/useAuthRefresh.js

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,158 @@
+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 
+  };
+};
+