strapi-plugin-magic-mail 1.0.1

package/admin/src/components/AddAccountModal.jsx

@@ -0,0 +1,1943 @@
+import React, { useState } from 'react';
+import styled, { keyframes, css } from 'styled-components';
+import {
+  Modal,
+  Typography,
+  Box,
+  Flex,
+  Button,
+  Field,
+  TextInput,
+  Textarea,
+  NumberInput,
+  Toggle,
+  Alert,
+  Divider,
+  Badge,
+} from '@strapi/design-system';
+import { useFetchClient, useNotification } from '@strapi/strapi/admin';
+import { Mail, Server, Key, ArrowRight, ArrowLeft, Check, Lock, Cloud, Cog, Star } from '@strapi/icons';
+
+// ============= ANIMATIONS =============
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+const pulse = keyframes`
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+`;
+
+const slideIn = keyframes`
+  from {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+`;
+
+// ============= COLORS =============
+const colors = {
+  primary: '#4945ff',      // Strapi Primary Blue
+  primaryLight: '#f0f0ff', // Light Blue Background
+  success: '#5cb176',      // Green for completed
+  successLight: '#eafaf1', // Light green background
+  neutral: '#8e8ea9',      // Gray
+  neutralLight: '#f6f6f9', // Light gray
+  white: '#ffffff',
+  border: '#dcdce4',
+  text: '#32324d',
+  textLight: '#666687',
+};
+
+// ============= STYLED COMPONENTS =============
+const StepHeader = styled(Box)`
+  padding-bottom: 24px;
+  margin-bottom: 32px;
+  position: relative;
+  animation: ${fadeIn} 0.4s ease;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: -24px;
+    right: -24px;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, ${colors.border}, transparent);
+  }
+`;
+
+const StepTitle = styled(Typography)`
+  color: ${colors.text};
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+
+const StepSubtitle = styled(Typography)`
+  color: ${colors.textLight};
+  font-size: 14px;
+  line-height: 1.5;
+`;
+
+const StepperContainer = styled(Box)`
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 0;
+  margin-bottom: 48px;
+  margin-top: 8px;
+  position: relative;
+  padding: 0 40px;
+`;
+
+const StepWrapper = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  
+  &:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    top: 28px;
+    left: 50%;
+    width: 100%;
+    height: 3px;
+    background: ${props => props.$completed ? colors.success : colors.neutralLight};
+    transition: all 0.4s ease;
+    z-index: 0;
+  }
+`;
+
+const StepDot = styled.div`
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: ${props => 
+    props.$active ? colors.primary : 
+    props.$completed ? colors.success : 
+    colors.white
+  };
+  color: ${props => 
+    props.$active || props.$completed ? colors.white : colors.textLight
+  };
+  border: 4px solid ${props =>
+    props.$active ? colors.primary :
+    props.$completed ? colors.success :
+    colors.border
+  };
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 18px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  z-index: 1;
+  cursor: ${props => props.$completed ? 'pointer' : 'default'};
+  box-shadow: ${props => 
+    props.$active ? `0 4px 16px ${colors.primary}40, 0 0 0 8px ${colors.primaryLight}` :
+    props.$completed ? `0 4px 12px ${colors.success}30` :
+    '0 2px 8px rgba(0,0,0,0.08)'
+  };
+  
+  ${props => props.$active && css`
+    animation: ${pulse} 2s infinite;
+  `}
+  
+  &:hover {
+    transform: ${props => props.$completed ? 'scale(1.1)' : props.$active ? 'scale(1.05)' : 'scale(1)'};
+  }
+`;
+
+const StepLabel = styled(Typography)`
+  margin-top: 12px;
+  font-size: 13px;
+  color: ${props => props.$active ? colors.primary : props.$completed ? colors.success : colors.textLight};
+  white-space: nowrap;
+  font-weight: ${props => props.$active ? 600 : 500};
+  text-align: center;
+  transition: all 0.3s ease;
+`;
+
+const ProvidersGrid = styled(Box)`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  margin-bottom: 24px;
+  animation: ${slideIn} 0.5s ease;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+`;
+
+const ProviderCard = styled(Box)`
+  background: ${props => props.$selected ? colors.successLight : colors.white};
+  border: 2px solid ${props => props.$selected ? colors.success : colors.border};
+  border-radius: 12px;
+  padding: 24px;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  text-align: center;
+  aspect-ratio: 1;
+  min-height: 180px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  position: relative;
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, transparent, rgba(73, 69, 255, 0.05));
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+  
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(73, 69, 255, 0.12);
+    border-color: ${props => props.$selected ? colors.success : colors.primary};
+    
+    &::before {
+      opacity: 1;
+    }
+  }
+  
+  ${props => props.$selected && `
+    &::after {
+      content: '✓';
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      width: 24px;
+      height: 24px;
+      background: ${colors.success};
+      color: white;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: bold;
+    }
+  `}
+`;
+
+const ProviderIcon = styled.div`
+  width: 56px;
+  height: 56px;
+  border-radius: ${props => props.$round ? '50%' : '12px'};
+  background: ${props => props.$bgColor || colors.primaryLight};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: ${props => props.$fontSize || '24px'};
+  font-weight: bold;
+  color: ${props => props.$color || colors.primary};
+  box-shadow: 0 4px 12px ${props => props.$shadowColor || 'rgba(73, 69, 255, 0.15)'};
+`;
+
+const ProviderName = styled(Typography)`
+  font-weight: 600;
+  font-size: 15px;
+  color: ${colors.text};
+  margin: 0;
+`;
+
+const ProviderTagline = styled(Typography)`
+  font-size: 12px;
+  color: ${colors.textLight};
+  margin: 0;
+`;
+
+const InfoAlert = styled(Alert)`
+  background: ${colors.primaryLight};
+  border: 1px solid ${colors.primary}33;
+  animation: ${fadeIn} 0.4s ease;
+  
+  svg {
+    color: ${colors.primary};
+  }
+`;
+
+const FormSection = styled(Box)`
+  animation: ${slideIn} 0.4s ease;
+  width: 100%;
+  max-width: 100%;
+`;
+
+const FullWidthField = styled(Box)`
+  width: 100%;
+  
+  & > * {
+    width: 100%;
+  }
+  
+  input, textarea {
+    width: 100% !important;
+  }
+`;
+
+const SectionTitle = styled(Typography)`
+  color: ${colors.text};
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const PrimaryToggleBox = styled(Box)`
+  background: linear-gradient(135deg, ${colors.primaryLight}, ${colors.successLight});
+  border: 2px solid ${colors.primary}33;
+  border-radius: 12px;
+  padding: 20px;
+  transition: all 0.3s;
+  
+  &:hover {
+    border-color: ${colors.primary}66;
+    box-shadow: 0 4px 12px rgba(73, 69, 255, 0.1);
+  }
+`;
+
+// ============= COMPONENT =============
+const AddAccountModal = ({ isOpen, onClose, onAccountAdded, editAccount = null }) => {
+  const { post, get, put } = useFetchClient();
+  const { toggleNotification } = useNotification();
+  const [loading, setLoading] = useState(false);
+  const [currentStep, setCurrentStep] = useState(1);
+  const [provider, setProvider] = useState('');
+  const [oauthCode, setOauthCode] = useState(null);
+  const [oauthState, setOauthState] = useState(null);
+  const isEditMode = !!editAccount;
+  
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    fromEmail: '',
+    fromName: '',
+    replyTo: '',
+    isActive: true,
+    isPrimary: false,
+    priority: 5,
+    dailyLimit: 500,
+    hourlyLimit: 50,
+    host: '',
+    port: 587,
+    user: '',
+    pass: '',
+    secure: false,
+    apiKey: '',
+    oauthClientId: '',
+    oauthClientSecret: '',
+  });
+
+  const handleChange = (field, value) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
+  // Populate form when editing - fetch decrypted data
+  React.useEffect(() => {
+    const loadAccountData = async () => {
+      if (isEditMode && editAccount && isOpen) {
+        try {
+          // Fetch account with decrypted config
+          const { data } = await get(`/magic-mail/accounts/${editAccount.id}`);
+          const accountData = data.data;
+          
+          setProvider(accountData.provider);
+          setCurrentStep(2); // Skip provider selection in edit mode
+          setFormData({
+            name: accountData.name || '',
+            description: accountData.description || '',
+            fromEmail: accountData.fromEmail || '',
+            fromName: accountData.fromName || '',
+            replyTo: accountData.replyTo || '',
+            isActive: accountData.isActive !== undefined ? accountData.isActive : true,
+            isPrimary: accountData.isPrimary || false,
+            priority: accountData.priority || 5,
+            dailyLimit: accountData.dailyLimit || 500,
+            hourlyLimit: accountData.hourlyLimit || 50,
+            host: accountData.config?.host || '',
+            port: accountData.config?.port || 587,
+            user: accountData.config?.user || '',
+            pass: accountData.config?.pass || '', // Now populated from decrypted data
+            secure: accountData.config?.secure || false,
+            apiKey: accountData.config?.apiKey || '', // Now populated from decrypted data
+            mailgunDomain: accountData.config?.domain || '',
+            microsoftTenantId: accountData.config?.tenantId || '',
+            oauthClientId: accountData.config?.clientId || '',
+            oauthClientSecret: accountData.config?.clientSecret || '', // Now populated from decrypted data
+          });
+        } catch (err) {
+          console.error('[magic-mail] Error loading account:', err);
+          toggleNotification({
+            type: 'danger',
+            message: 'Failed to load account data',
+          });
+        }
+      } else if (!isEditMode) {
+        setCurrentStep(1);
+        setProvider('');
+        setFormData({
+          name: '',
+          description: '',
+          fromEmail: '',
+          fromName: '',
+          replyTo: '',
+          isActive: true,
+          isPrimary: false,
+          priority: 5,
+          dailyLimit: 500,
+          hourlyLimit: 50,
+          host: '',
+          port: 587,
+          user: '',
+          pass: '',
+          secure: false,
+          apiKey: '',
+          mailgunDomain: '',
+          microsoftTenantId: '',
+          oauthClientId: '',
+          oauthClientSecret: '',
+        });
+      }
+    };
+    
+    loadAccountData();
+  }, [isEditMode, editAccount, isOpen]);
+
+  // Check for OAuth callback parameters (from URL or postMessage)
+  React.useEffect(() => {
+    // Check URL params (fallback)
+    const urlParams = new URLSearchParams(window.location.search);
+    const code = urlParams.get('oauth_code');
+    const state = urlParams.get('oauth_state');
+    
+    if (code && state) {
+      setOauthCode(code);
+      setOauthState(state);
+      
+      // Clean URL
+      window.history.replaceState({}, document.title, window.location.pathname);
+      
+      toggleNotification({
+        type: 'success',
+        message: '✅ Gmail OAuth authorized! Please complete the account setup.',
+      });
+    }
+
+    // Listen for postMessage from OAuth popup
+    const handleMessage = (event) => {
+      if (event.origin !== window.location.origin) return;
+      
+      if (event.data.type === 'gmail-oauth-success') {
+        setOauthCode(event.data.code);
+        setOauthState(event.data.state);
+        
+        toggleNotification({
+          type: 'success',
+          message: '✅ Gmail OAuth authorized! Please complete the account setup.',
+        });
+      }
+      
+      if (event.data.type === 'microsoft-oauth-success') {
+        setOauthCode(event.data.code);
+        setOauthState(event.data.state);
+        
+        toggleNotification({
+          type: 'success',
+          message: '✅ Microsoft OAuth authorized! Please complete the account setup.',
+        });
+      }
+      
+      if (event.data.type === 'yahoo-oauth-success') {
+        setOauthCode(event.data.code);
+        setOauthState(event.data.state);
+        
+        toggleNotification({
+          type: 'success',
+          message: '✅ Yahoo Mail OAuth authorized! Please complete the account setup.',
+        });
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, []);
+
+  const startGmailOAuth = async () => {
+    if (!formData.oauthClientId) {
+      toggleNotification({
+        type: 'warning',
+        message: 'Please enter your OAuth Client ID first',
+      });
+      return;
+    }
+
+    try {
+      const { data } = await get(`/magic-mail/oauth/gmail/auth?clientId=${encodeURIComponent(formData.oauthClientId)}`);
+      
+      if (data.authUrl) {
+        // Open OAuth in popup window
+        const width = 600;
+        const height = 700;
+        const left = (window.screen.width - width) / 2;
+        const top = (window.screen.height - height) / 2;
+        
+        const popup = window.open(
+          data.authUrl,
+          'gmail-oauth',
+          `width=${width},height=${height},left=${left},top=${top},toolbar=no,menubar=no,location=no,status=no`
+        );
+
+        // Listen for OAuth callback
+        const checkPopup = setInterval(() => {
+          try {
+            if (popup.closed) {
+              clearInterval(checkPopup);
+              
+              // Check if we got OAuth code from URL
+              const urlParams = new URLSearchParams(window.location.search);
+              const code = urlParams.get('oauth_code');
+              
+              if (!code) {
+                toggleNotification({
+                  type: 'info',
+                  message: 'OAuth window closed. Please try again if not completed.',
+                });
+              }
+            }
+          } catch (err) {
+            // Cross-origin error is expected
+          }
+        }, 500);
+
+        toggleNotification({
+          type: 'info',
+          message: '🔐 Please authorize in the popup window...',
+        });
+      }
+    } catch (err) {
+      toggleNotification({
+        type: 'danger',
+        message: 'Failed to start OAuth flow',
+      });
+    }
+  };
+
+  const startMicrosoftOAuth = async () => {
+    if (!formData.microsoftTenantId) {
+      toggleNotification({
+        type: 'warning',
+        message: 'Please enter your Tenant (Directory) ID first',
+      });
+      return;
+    }
+    
+    if (!formData.oauthClientId) {
+      toggleNotification({
+        type: 'warning',
+        message: 'Please enter your Application (Client) ID',
+      });
+      return;
+    }
+
+    try {
+      const { data } = await get(`/magic-mail/oauth/microsoft/auth?clientId=${encodeURIComponent(formData.oauthClientId)}&tenantId=${encodeURIComponent(formData.microsoftTenantId)}`);
+      
+      if (data.authUrl) {
+        // Open OAuth in popup window
+        const width = 600;
+        const height = 700;
+        const left = (window.screen.width - width) / 2;
+        const top = (window.screen.height - height) / 2;
+        
+        const popup = window.open(
+          data.authUrl,
+          'microsoft-oauth',
+          `width=${width},height=${height},left=${left},top=${top},toolbar=no,menubar=no,location=no,status=no`
+        );
+
+        // Listen for OAuth callback
+        const checkPopup = setInterval(() => {
+          try {
+            if (popup.closed) {
+              clearInterval(checkPopup);
+              
+              // Check if we got OAuth code from URL
+              const urlParams = new URLSearchParams(window.location.search);
+              const code = urlParams.get('oauth_code');
+              
+              if (!code) {
+                toggleNotification({
+                  type: 'info',
+                  message: 'OAuth window closed. Please try again if not completed.',
+                });
+              }
+            }
+          } catch (err) {
+            // Cross-origin error is expected
+          }
+        }, 500);
+
+        toggleNotification({
+          type: 'info',
+          message: '🔐 Please authorize in the popup window...',
+        });
+      }
+    } catch (err) {
+      toggleNotification({
+        type: 'danger',
+        message: 'Failed to start Microsoft OAuth flow',
+      });
+    }
+  };
+
+  const startYahooOAuth = async () => {
+    if (!formData.oauthClientId) {
+      toggleNotification({
+        type: 'warning',
+        message: 'Please enter your Yahoo Client ID first',
+      });
+      return;
+    }
+
+    try {
+      const { data } = await get(`/magic-mail/oauth/yahoo/auth?clientId=${encodeURIComponent(formData.oauthClientId)}`);
+      
+      if (data.authUrl) {
+        // Open OAuth in popup window
+        const width = 600;
+        const height = 700;
+        const left = (window.screen.width - width) / 2;
+        const top = (window.screen.height - height) / 2;
+        
+        const popup = window.open(
+          data.authUrl,
+          'yahoo-oauth',
+          `width=${width},height=${height},left=${left},top=${top},toolbar=no,menubar=no,location=no,status=no`
+        );
+
+        // Listen for OAuth callback
+        const checkPopup = setInterval(() => {
+          try {
+            if (popup.closed) {
+              clearInterval(checkPopup);
+              
+              // Check if we got OAuth code from URL
+              const urlParams = new URLSearchParams(window.location.search);
+              const code = urlParams.get('oauth_code');
+              
+              if (!code) {
+                toggleNotification({
+                  type: 'info',
+                  message: 'OAuth window closed. Please try again if not completed.',
+                });
+              }
+            }
+          } catch (err) {
+            // Cross-origin error is expected
+          }
+        }, 500);
+
+        toggleNotification({
+          type: 'info',
+          message: '🔐 Please authorize in the popup window...',
+        });
+      }
+    } catch (err) {
+      toggleNotification({
+        type: 'danger',
+        message: 'Failed to start Yahoo OAuth flow',
+      });
+    }
+  };
+
+  const canProceed = () => {
+    if (currentStep === 1) return provider !== '';
+    if (currentStep === 2) {
+      // For OAuth providers, fromEmail comes from provider, so only name is required
+      if (provider === 'gmail-oauth' || provider === 'microsoft-oauth' || provider === 'yahoo-oauth') return formData.name;
+      return formData.name && formData.fromEmail;
+    }
+    if (currentStep === 3) {
+      if (provider === 'smtp') {
+        // Password is required (we show the decrypted one in edit mode)
+        return formData.host && formData.user && formData.pass;
+      }
+      if (provider === 'gmail-oauth' || provider === 'yahoo-oauth') {
+        // In edit mode with existing credentials, they're pre-filled
+        if (isEditMode && formData.oauthClientId && formData.oauthClientSecret) {
+          return true;
+        }
+        // Only allow proceed if successfully connected (has oauthCode)
+        return !!oauthCode;
+      }
+      if (provider === 'microsoft-oauth') {
+        // In edit mode with existing credentials, they're pre-filled
+        if (isEditMode && formData.oauthClientId && formData.oauthClientSecret && formData.microsoftTenantId) {
+          return true;
+        }
+        // Only allow proceed if successfully connected (has oauthCode)
+        return !!oauthCode;
+      }
+      if (provider === 'sendgrid') {
+        // API key is required
+        return !!formData.apiKey;
+      }
+      if (provider === 'mailgun') {
+        // API key AND domain are required
+        return !!formData.apiKey && !!formData.mailgunDomain;
+      }
+    }
+    return true;
+  };
+
+  const handleSubmit = async () => {
+    setLoading(true);
+    try {
+      let config = {};
+
+      // OAuth providers with full OAuth flow (only for creation, not edit)
+      if (!isEditMode && (provider === 'gmail-oauth' || provider === 'microsoft-oauth' || provider === 'yahoo-oauth') && oauthCode && oauthState) {
+        // Use OAuth endpoint to exchange code for tokens and create account
+        const accountDetails = {
+          name: formData.name,
+          description: formData.description,
+          fromEmail: 'oauth@placeholder.com', // Will be replaced by provider email
+          fromName: formData.fromName,
+          replyTo: formData.replyTo,
+          isPrimary: formData.isPrimary,
+          priority: formData.priority,
+          dailyLimit: formData.dailyLimit,
+          hourlyLimit: formData.hourlyLimit,
+          config: provider === 'microsoft-oauth' ? {
+            clientId: formData.oauthClientId,
+            clientSecret: formData.oauthClientSecret,
+            tenantId: formData.microsoftTenantId,
+          } : {
+            clientId: formData.oauthClientId,
+            clientSecret: formData.oauthClientSecret,
+          },
+        };
+
+        const providerMap = {
+          'gmail-oauth': 'gmail',
+          'microsoft-oauth': 'microsoft',
+          'yahoo-oauth': 'yahoo',
+        };
+
+        await post('/magic-mail/oauth/create-account', {
+          provider: providerMap[provider],
+          code: oauthCode,
+          state: oauthState,
+          accountDetails,
+        });
+
+        const providerNames = {
+          'gmail-oauth': 'Gmail',
+          'microsoft-oauth': 'Microsoft',
+          'yahoo-oauth': 'Yahoo Mail',
+        };
+
+        toggleNotification({
+          type: 'success',
+          message: `✅ ${formData.name} created successfully with ${providerNames[provider]} OAuth!`,
+        });
+
+        onAccountAdded();
+        onClose();
+        setCurrentStep(1);
+        setOauthCode(null);
+        setOauthState(null);
+        return;
+      }
+
+      // Prepare config based on provider
+      if (provider === 'smtp') {
+        config = {
+          host: formData.host,
+          port: formData.port,
+          user: formData.user,
+          pass: formData.pass, // Now always available (decrypted in edit mode)
+          secure: formData.secure,
+        };
+      } else if (provider === 'sendgrid') {
+        config = { 
+          apiKey: formData.apiKey // Now always available (decrypted in edit mode)
+        };
+      } else if (provider === 'mailgun') {
+        config = { 
+          apiKey: formData.apiKey, // Now always available (decrypted in edit mode)
+          domain: formData.mailgunDomain,
+        };
+      } else if (provider === 'gmail-oauth' || provider === 'yahoo-oauth') {
+        config = {
+          clientId: formData.oauthClientId,
+          clientSecret: formData.oauthClientSecret, // Now always available (decrypted in edit mode)
+        };
+      } else if (provider === 'microsoft-oauth') {
+        config = {
+          clientId: formData.oauthClientId,
+          clientSecret: formData.oauthClientSecret, // Now always available (decrypted in edit mode)
+          tenantId: formData.microsoftTenantId,
+        };
+      }
+
+      const payload = {
+        name: formData.name,
+        description: formData.description,
+        provider,
+        config,
+        fromEmail: formData.fromEmail,
+        fromName: formData.fromName,
+        replyTo: formData.replyTo,
+        isActive: formData.isActive,
+        isPrimary: formData.isPrimary,
+        priority: formData.priority,
+        dailyLimit: formData.dailyLimit,
+        hourlyLimit: formData.hourlyLimit,
+      };
+
+      if (isEditMode) {
+        // Update existing account
+        await put(`/magic-mail/accounts/${editAccount.id}`, payload);
+        toggleNotification({
+          type: 'success',
+          message: `✅ ${formData.name} updated successfully!`,
+        });
+      } else {
+        // Create new account
+        await post('/magic-mail/accounts', payload);
+        toggleNotification({
+          type: 'success',
+          message: `✅ ${formData.name} created successfully!`,
+        });
+      }
+
+      onAccountAdded();
+      onClose();
+      setCurrentStep(1);
+    } catch (err) {
+      toggleNotification({
+        type: 'danger',
+        message: err.response?.data?.error?.message || `Failed to ${isEditMode ? 'update' : 'create'} account`,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getProviderLabel = () => {
+    switch(provider) {
+      case 'gmail-oauth': return 'Gmail OAuth';
+      case 'microsoft-oauth': return 'Microsoft OAuth';
+      case 'yahoo-oauth': return 'Yahoo Mail OAuth';
+      case 'smtp': return 'SMTP';
+      case 'sendgrid': return 'SendGrid';
+      case 'mailgun': return 'Mailgun';
+      default: return '';
+    }
+  };
+
+  const stepTitles = ['Provider', 'Details', 'Credentials', 'Settings'];
+
+  return (
+    <Modal.Root open={isOpen} onOpenChange={onClose}>
+      <Modal.Content size="XL">
+        <Modal.Header>
+          <Typography variant="beta">
+            <Star style={{ marginRight: 8 }} />
+            {isEditMode ? 'Edit Email Account' : 'Add Email Account'}
+          </Typography>
+        </Modal.Header>
+
+        <Modal.Body>
+          <Flex direction="column" gap={0}>
+            
+            {/* Header */}
+            <StepHeader>
+              <StepTitle>
+                {currentStep === 1 && <Mail />}
+                {currentStep === 2 && <Server />}
+                {currentStep === 3 && <Lock />}
+                {currentStep === 4 && <Cog />}
+                {currentStep === 1 && 'Choose Email Provider'}
+                {currentStep === 2 && 'Account Details'}
+                {currentStep === 3 && 'Authentication'}
+                {currentStep === 4 && 'Configuration'}
+              </StepTitle>
+              <StepSubtitle>
+                {currentStep === 1 && 'Select your preferred email service provider'}
+                {currentStep === 2 && 'Configure how emails will appear to recipients'}
+                {currentStep === 3 && `Enter your ${getProviderLabel()} credentials securely`}
+                {currentStep === 4 && 'Set rate limits and priority for this account'}
+              </StepSubtitle>
+            </StepHeader>
+
+            {/* Stepper */}
+            <StepperContainer>
+              {[1, 2, 3, 4].map((step) => (
+                <StepWrapper 
+                  key={step} 
+                  $completed={currentStep > step}
+                >
+                  <StepDot 
+                    $active={currentStep === step} 
+                    $completed={currentStep > step}
+                    onClick={() => currentStep > step && setCurrentStep(step)}
+                  >
+                    {currentStep > step ? <Check /> : step}
+                  </StepDot>
+                  <StepLabel 
+                    $active={currentStep === step}
+                    $completed={currentStep > step}
+                  >
+                    {stepTitles[step - 1]}
+                  </StepLabel>
+                </StepWrapper>
+              ))}
+            </StepperContainer>
+
+            {/* Step 1: Choose Provider */}
+            {currentStep === 1 && (
+              <Box>
+                <ProvidersGrid>
+                  <ProviderCard 
+                    $selected={provider === 'gmail-oauth'}
+                    onClick={() => setProvider('gmail-oauth')}
+                  >
+                    <ProviderIcon 
+                      $round 
+                      $bgColor="#4285F433" 
+                      $color="#4285F4"
+                      $shadowColor="rgba(66, 133, 244, 0.2)"
+                    >
+                      G
+                    </ProviderIcon>
+                    <ProviderName>Gmail OAuth</ProviderName>
+                  </ProviderCard>
+
+                  <ProviderCard 
+                    $selected={provider === 'microsoft-oauth'}
+                    onClick={() => setProvider('microsoft-oauth')}
+                  >
+                    <ProviderIcon 
+                      $round 
+                      $bgColor="#00A4EF33" 
+                      $color="#00A4EF"
+                      $shadowColor="rgba(0, 164, 239, 0.2)"
+                    >
+                      M
+                    </ProviderIcon>
+                    <ProviderName>Microsoft OAuth</ProviderName>
+                  </ProviderCard>
+
+                  <ProviderCard 
+                    $selected={provider === 'yahoo-oauth'}
+                    onClick={() => setProvider('yahoo-oauth')}
+                  >
+                    <ProviderIcon 
+                      $round 
+                      $bgColor="#6001D233" 
+                      $color="#6001D2"
+                      $shadowColor="rgba(96, 1, 210, 0.2)"
+                    >
+                      Y
+                    </ProviderIcon>
+                    <ProviderName>Yahoo Mail OAuth</ProviderName>
+                  </ProviderCard>
+
+                  <ProviderCard 
+                    $selected={provider === 'smtp'}
+                    onClick={() => setProvider('smtp')}
+                  >
+                    <ProviderIcon>
+                      <Server style={{ width: 28, height: 28 }} />
+                    </ProviderIcon>
+                    <ProviderName>SMTP</ProviderName>
+                  </ProviderCard>
+
+                  <ProviderCard 
+                    $selected={provider === 'sendgrid'}
+                    onClick={() => setProvider('sendgrid')}
+                  >
+                    <ProviderIcon $bgColor="#1E90FF22" $color="#1E90FF" $shadowColor="rgba(30, 144, 255, 0.2)">
+                      <Cloud style={{ width: 28, height: 28 }} />
+                    </ProviderIcon>
+                    <ProviderName>SendGrid</ProviderName>
+                  </ProviderCard>
+
+                  <ProviderCard 
+                    $selected={provider === 'mailgun'}
+                    onClick={() => setProvider('mailgun')}
+                  >
+                    <ProviderIcon $bgColor="#FF6B6B22" $color="#FF6B6B" $shadowColor="rgba(255, 107, 107, 0.2)">
+                      <Mail style={{ width: 28, height: 28 }} />
+                    </ProviderIcon>
+                    <ProviderName>Mailgun</ProviderName>
+                  </ProviderCard>
+                </ProvidersGrid>
+              </Box>
+            )}
+
+            {/* Step 2: Name Your Account */}
+            {currentStep === 2 && (
+              <FormSection>
+                <Flex direction="column" gap={4} style={{ width: '100%' }}>
+                  <FullWidthField>
+                    <Field.Root required>
+                      <Field.Label>Account Name</Field.Label>
+                      <TextInput
+                        placeholder="e.g., Company Gmail, Marketing SendGrid, Transactional Emails"
+                        value={formData.name}
+                        onChange={(e) => handleChange('name', e.target.value)}
+                      />
+                      <Field.Hint>Give this email account a unique, descriptive name so you can easily identify it later</Field.Hint>
+                    </Field.Root>
+                  </FullWidthField>
+                  
+                  {provider === 'gmail-oauth' ? (
+                    <Alert variant="default" title="📧 Email Address">
+                      <Typography variant="pi">
+                        Your Gmail address will be automatically retrieved from Google after OAuth authorization.
+                        You don't need to enter it manually.
+                      </Typography>
+                    </Alert>
+                  ) : (
+                    <FullWidthField>
+                      <Field.Root required>
+                        <Field.Label>From Email Address</Field.Label>
+                        <TextInput
+                          placeholder="noreply@company.com"
+                          type="email"
+                          value={formData.fromEmail}
+                          onChange={(e) => handleChange('fromEmail', e.target.value)}
+                        />
+                        <Field.Hint>The email address that will appear as the sender. Recipients will see this in their inbox</Field.Hint>
+                      </Field.Root>
+                    </FullWidthField>
+                  )}
+                  
+                  <FullWidthField>
+                    <Field.Root>
+                      <Field.Label>From Display Name</Field.Label>
+                      <TextInput
+                        placeholder="Company Name"
+                        value={formData.fromName}
+                        onChange={(e) => handleChange('fromName', e.target.value)}
+                      />
+                      <Field.Hint>The friendly name shown next to the email address (e.g., 'ACME Corp' instead of just 'noreply@acme.com')</Field.Hint>
+                    </Field.Root>
+                  </FullWidthField>
+                  
+                  <FullWidthField>
+                    <Field.Root>
+                      <Field.Label>Reply-To Email Address</Field.Label>
+                      <TextInput
+                        placeholder="support@company.com"
+                        type="email"
+                        value={formData.replyTo}
+                        onChange={(e) => handleChange('replyTo', e.target.value)}
+                      />
+                      <Field.Hint>When recipients hit 'Reply', their response will go to this address. Leave empty to use the From Email</Field.Hint>
+                    </Field.Root>
+                  </FullWidthField>
+                  
+                  <FullWidthField>
+                    <Field.Root>
+                      <Field.Label>Account Description</Field.Label>
+                      <Textarea
+                        placeholder="What is this account used for? (e.g., 'Marketing campaigns', 'Order confirmations', 'Password resets')"
+                        value={formData.description}
+                        onChange={(e) => handleChange('description', e.target.value)}
+                      />
+                      <Field.Hint>Add notes about this account's purpose, usage limits, or any special configuration. Only visible to admins</Field.Hint>
+                    </Field.Root>
+                  </FullWidthField>
+                </Flex>
+              </FormSection>
+            )}
+
+            {/* Step 3: Credentials */}
+            {currentStep === 3 && (
+              <FormSection>
+                {provider === 'smtp' && (
+                  <>
+                    <InfoAlert variant="success" title="🔒 Secure Storage" marginBottom={4}>
+                      All credentials are encrypted with AES-256-GCM before storage. No plain text passwords in the database.
+                    </InfoAlert>
+                    
+                    <Flex direction="column" gap={4} style={{ width: '100%' }}>
+                      <SectionTitle>
+                        <Server />
+                        Server Connection
+                      </SectionTitle>
+                      
+                      <FullWidthField>
+                        <Field.Root required>
+                          <Field.Label>SMTP Host Server</Field.Label>
+                          <TextInput
+                            placeholder="smtp.gmail.com"
+                            value={formData.host}
+                            onChange={(e) => handleChange('host', e.target.value)}
+                          />
+                          <Field.Hint>The address of your email server. Common examples: smtp.gmail.com (Gmail), smtp-mail.outlook.com (Outlook), smtp.sendgrid.net (SendGrid)</Field.Hint>
+                        </Field.Root>
+                      </FullWidthField>
+                      
+                      <FullWidthField>
+                        <Field.Root required>
+                          <Field.Label>Port Number</Field.Label>
+                          <NumberInput
+                            value={formData.port}
+                            onValueChange={(value) => handleChange('port', value)}
+                          />
+                          <Field.Hint>Standard ports: 587 (recommended - STARTTLS), 465 (SSL/TLS), or 25 (unencrypted - not recommended)</Field.Hint>
+                        </Field.Root>
+                      </FullWidthField>
+                      
+                      <Divider />
+                      
+                      <SectionTitle>
+                        <Lock />
+                        Authentication Credentials
+                      </SectionTitle>
+                      
+                      <FullWidthField>
+                        <Field.Root required>
+                          <Field.Label>Username / Email</Field.Label>
+                          <TextInput
+                            placeholder="your-email@gmail.com"
+                            value={formData.user}
+                            onChange={(e) => handleChange('user', e.target.value)}
+                          />
+                          <Field.Hint>Usually your full email address. Some providers may use just the username part before the @</Field.Hint>
+                        </Field.Root>
+                      </FullWidthField>
+                      
+                      <FullWidthField>
+                        <Field.Root required>
+                          <Field.Label>Password / App Password</Field.Label>
+                          <TextInput
+                            type="password"
+                            placeholder="Enter your password"
+                            value={formData.pass}
+                            onChange={(e) => handleChange('pass', e.target.value)}
+                          />
+                          <Field.Hint>For Gmail: Create an App Password in Google Account → Security → 2-Step Verification → App passwords. Regular passwords won't work with 2FA enabled</Field.Hint>
+                        </Field.Root>
+                      </FullWidthField>
+                      
+                      <Box
+                        padding={4}
+                        background={formData.secure ? '#DCFCE7' : '#FEF3C7'}
+                        hasRadius
+                        style={{
+                          border: formData.secure ? '2px solid #22C55E' : '2px solid #F59E0B',
+                          borderRadius: '8px',
+                          transition: 'all 0.2s ease',
+                        }}
+                      >
+                        <Flex gap={3} alignItems="center">
+                          <Toggle
+                            checked={formData.secure}
+                            onChange={() => handleChange('secure', !formData.secure)}
+                          />
+                          <Flex direction="column" gap={1} style={{ flex: 1 }}>
+                            <Flex alignItems="center" gap={2}>
+                              <Typography fontWeight="semiBold" style={{ fontSize: '14px' }}>
+                                {formData.secure ? '🔒' : '⚠️'} Use SSL/TLS Encryption
+                              </Typography>
+                              <Badge 
+                                backgroundColor={formData.secure ? 'success600' : 'warning600'} 
+                                textColor="neutral0" 
+                                size="S"
+                              >
+                                {formData.secure ? 'ENABLED' : 'DISABLED'}
+                              </Badge>
+                            </Flex>
+                            <Typography variant="pi" textColor="neutral600" style={{ fontSize: '13px', lineHeight: '1.5' }}>
+                              {formData.secure 
+                                ? 'SSL/TLS enabled - Use this for port 465' 
+                                : 'SSL/TLS disabled - Port 587 will use STARTTLS instead'
+                              }
+                            </Typography>
+                          </Flex>
+                        </Flex>
+                      </Box>
+                    </Flex>
+                  </>
+                )}
+
+                {provider === 'gmail-oauth' && (
+                  <>
+                    <InfoAlert variant="success" title="🔒 OAuth 2.0 Security" marginBottom={4}>
+                      No passwords stored. Users authenticate directly with Google for maximum security.
+                    </InfoAlert>
+                    
+                    <Flex direction="column" gap={4} style={{ width: '100%' }}>
+                      <SectionTitle>
+                        <Lock />
+                        Google OAuth Application
+                      </SectionTitle>
+                      
+                      <FullWidthField>
+                        <Field.Root required>
+                          <Field.Label>OAuth Client ID</Field.Label>
+                          <TextInput
+                            placeholder="123456789-abc123xyz.apps.googleusercontent.com"
+                            value={formData.oauthClientId}
+                            onChange={(e) => handleChange('oauthClientId', e.target.value)}
+                          />
+                          <Field.Hint>Found in Google Cloud Console → APIs & Services → Credentials. Looks like a long string ending in .apps.googleusercontent.com</Field.Hint>
+                        </Field.Root>
+                      </FullWidthField>
+                      
+                      <FullWidthField>
+                        <Field.Root required>
+                          <Field.Label>OAuth Client Secret</Field.Label>
+                          <TextInput
+                            type="password"
+                            placeholder="GOCSPX-abcdefghijklmnop"
+                            value={formData.oauthClientSecret}
+                            onChange={(e) => handleChange('oauthClientSecret', e.target.value)}
+                          />
+                          <Field.Hint>Keep this secret! Found in the same OAuth 2.0 Client ID settings. Never share or commit to git</Field.Hint>
+                        </Field.Root>
+                      </FullWidthField>
+
+                      <Divider />
+
+                      {oauthCode ? (
+                        <Alert variant="success" title="✅ OAuth Authorized!">
+                          <Typography variant="pi">
+                            You've successfully authorized with Google! Click "Continue" to proceed to settings.
+                          </Typography>
+                        </Alert>
+                      ) : (
+                        <Box>
+                          <Typography variant="omega" textColor="neutral600" marginBottom={3}>
+                            After entering your credentials above, click the button below to connect with Gmail:
+                          </Typography>
+                          <Button 
+                            onClick={startGmailOAuth}
+                            variant="secondary"
+                            size="L"
+                            disabled={!formData.oauthClientId}
+                            style={{
+                              width: '100%',
+                              background: '#4285F4',
+                              color: 'white',
+                              fontWeight: 600,
+                            }}
+                          >
+                            🔐 Connect with Google
+                          </Button>
+                        </Box>
+                      )}
+                      
+                      <Box 
+                        padding={4} 
+                        background="neutral100" 
+                        hasRadius
+                        style={{ 
+                          border: `1px solid ${colors.border}`,
+                          borderRadius: '8px'
+                        }}
+                      >
+                        <Typography 
+                          fontWeight="semiBold" 
+                          marginBottom={3}
+                          style={{ fontSize: '15px' }}
+                        >
+                          📋 Setup Guide
+                        </Typography>
+                        
+                        <Flex direction="column" gap={2} style={{ fontSize: '14px', lineHeight: '1.6' }}>
+                          <Box>
+                            <strong>1.</strong> Go to <a href="https://console.cloud.google.com" target="_blank" rel="noopener noreferrer" style={{ color: colors.primary, textDecoration: 'underline' }}>console.cloud.google.com</a>
+                          </Box>
+                          
+                          <Box>
+                            <strong>2.</strong> Enable Gmail API (search and click Enable)
+                          </Box>
+                          
+                          <Box>
+                            <strong>3.</strong> Create Credentials → OAuth Client ID
+                          </Box>
+                          
+                          <Box>
+                            <strong>4.</strong> Add this redirect URI:
+                          </Box>
+                          
+                          <Flex gap={2} alignItems="center">
+                            <Box
+                              padding={2}
+                              background="neutral0"
+                              hasRadius
+                              style={{ 
+                                flex: 1,
+                                fontFamily: 'monospace',
+                                fontSize: '13px',
+                                wordBreak: 'break-all',
+                                border: `1px solid ${colors.border}`
+                              }}
+                            >
+                              {window.location.origin}/magic-mail/oauth/gmail/callback
+                            </Box>
+                            <Button
+                              variant="secondary"
+                              size="S"
+                              onClick={() => {
+                                navigator.clipboard.writeText(`${window.location.origin}/magic-mail/oauth/gmail/callback`);
+                                toggleNotification({
+                                  type: 'success',
+                                  message: 'Redirect URI copied to clipboard!',
+                                });
+                              }}
+                            >
+                              Copy
+                            </Button>
+                          </Flex>
+                        </Flex>
+                      </Box>
+                    </Flex>
+                  </>
+                )}
+
+                {provider === 'microsoft-oauth' && (
+                  <>
+                    <InfoAlert variant="success" title="🔒 OAuth 2.0 Security" marginBottom={4}>
+                      No passwords stored. Users authenticate directly with Microsoft for maximum security.
+                    </InfoAlert>
+                    
+                    <Flex direction="column" gap={4} style={{ width: '100%' }}>
+                      <SectionTitle>
+                        <Lock />
+                        Microsoft Azure Application
+                      </SectionTitle>
+                      
+                      <FullWidthField>
+                        <Field.Root required>
+                          <Field.Label>Tenant (Directory) ID</Field.Label>
+                          <TextInput
+                            placeholder="87654321-4321-4321-4321-987654321abc"
+                            value={formData.microsoftTenantId}
+                            onChange={(e) => handleChange('microsoftTenantId', e.target.value)}
+                          />
+                          <Field.Hint>Found in Azure Portal → App Registrations → Your App → Overview (next to Application ID). Also a GUID format. Required for OAuth!</Field.Hint>
+                        </Field.Root>
+                      </FullWidthField>
+
+                      <FullWidthField>
+                        <Field.Root required>
+                          <Field.Label>Application (Client) ID</Field.Label>
+                          <TextInput
+                            placeholder="12345678-1234-1234-1234-123456789abc"
+                            value={formData.oauthClientId}
+                            onChange={(e) => handleChange('oauthClientId', e.target.value)}
+                          />
+                          <Field.Hint>Found in Azure Portal → App Registrations → Your App → Overview. It's a GUID format.</Field.Hint>
+                        </Field.Root>
+                      </FullWidthField>
+                      
+                      <FullWidthField>
+                        <Field.Root required>
+                          <Field.Label>Client Secret Value</Field.Label>
+                          <TextInput
+                            type="password"
+                            placeholder="abc~123XYZ..."
+                            value={formData.oauthClientSecret}
+                            onChange={(e) => handleChange('oauthClientSecret', e.target.value)}
+                          />
+                          <Field.Hint>From Azure Portal → Certificates & secrets → Client secrets. Copy the VALUE, not the Secret ID. Keep this secret!</Field.Hint>
+                        </Field.Root>
+                      </FullWidthField>
+
+                      <Divider />
+
+                      {oauthCode ? (
+                        <Alert variant="success" title="✅ OAuth Authorized!">
+                          <Typography variant="pi">
+                            You've successfully authorized with Microsoft! Click "Continue" to proceed to settings.
+                          </Typography>
+                        </Alert>
+                      ) : (
+                        <Box>
+                          <Typography variant="omega" textColor="neutral600" marginBottom={3}>
+                            After entering your credentials above, click the button below to connect with Microsoft:
+                          </Typography>
+                          <Button 
+                            onClick={startMicrosoftOAuth}
+                            variant="secondary"
+                            size="L"
+                            disabled={!formData.oauthClientId}
+                            style={{
+                              width: '100%',
+                              background: '#00A4EF',
+                              color: 'white',
+                              fontWeight: 600,
+                            }}
+                          >
+                            🔐 Connect with Microsoft
+                          </Button>
+                        </Box>
+                      )}
+                      
+                      <Box 
+                        padding={4} 
+                        background="neutral100" 
+                        hasRadius
+                        style={{ 
+                          border: `1px solid ${colors.border}`,
+                          borderRadius: '8px'
+                        }}
+                      >
+                        <Typography 
+                          fontWeight="semiBold" 
+                          marginBottom={3}
+                          style={{ fontSize: '15px' }}
+                        >
+                          📋 Setup Guide
+                        </Typography>
+                        
+                        <Flex direction="column" gap={2} style={{ fontSize: '14px', lineHeight: '1.6' }}>
+                          <Box>
+                            <strong>1.</strong> Go to <a href="https://portal.azure.com" target="_blank" rel="noopener noreferrer" style={{ color: colors.primary, textDecoration: 'underline' }}>portal.azure.com</a>
+                          </Box>
+                          
+                          <Box>
+                            <strong>2.</strong> Navigate to Azure Active Directory → App registrations → New registration
+                          </Box>
+                          
+                          <Box>
+                            <strong>3.</strong> Name your app (e.g., "MagicMail") and select "Accounts in this organizational directory only"
+                          </Box>
+                          
+                          <Box>
+                            <strong>Important:</strong> Copy both <strong>Application (client) ID</strong> AND <strong>Directory (tenant) ID</strong> from the Overview page!
+                          </Box>
+                          
+                          <Box>
+                            <strong>4.</strong> Add this redirect URI:
+                          </Box>
+                          
+                          <Flex gap={2} alignItems="center">
+                            <Box
+                              padding={2}
+                              background="neutral0"
+                              hasRadius
+                              style={{ 
+                                flex: 1,
+                                fontFamily: 'monospace',
+                                fontSize: '13px',
+                                wordBreak: 'break-all',
+                                color: colors.textSecondary,
+                                border: `1px solid ${colors.border}`,
+                              }}
+                            >
+                              {`${window.location.origin}/magic-mail/oauth/microsoft/callback`}
+                            </Box>
+                            <Button
+                              variant="secondary"
+                              size="S"
+                              onClick={() => {
+                                navigator.clipboard.writeText(`${window.location.origin}/magic-mail/oauth/microsoft/callback`);
+                                toggleNotification({
+                                  type: 'success',
+                                  message: 'Redirect URI copied to clipboard!',
+                                });
+                              }}
+                            >
+                              Copy
+                            </Button>
+                          </Flex>
+
+                          <Box>
+                            <strong>5.</strong> Under API permissions → Add a permission → Microsoft Graph → Delegated permissions:
+                          </Box>
+                          
+                          <Box style={{ marginLeft: '20px', marginTop: '8px' }}>
+                            • <code>Mail.Send</code> - Send emails as the signed-in user<br/>
+                            • <code>User.Read</code> - Read user profile (email address)<br/>
+                            • <code>offline_access</code> - Maintain access to data (refresh tokens)<br/>
+                            • <code>openid</code> - Sign users in<br/>
+                            • <code>email</code> - View users' email address
+                          </Box>
+
+                          <Box>
+                            <strong>6.</strong> Click "Grant admin consent" for your organization (Required!)
+                          </Box>
+
+                          <Box>
+                            <strong>7.</strong> Under Certificates & secrets → Client secrets → New client secret
+                          </Box>
+                          
+                          <Box>
+                            <strong>8.</strong> Copy the <strong>Value</strong> (not Secret ID) immediately - it won't be shown again
+                          </Box>
+                        </Flex>
+                      </Box>
+                    </Flex>
+                  </>
+                )}
+
+                {provider === 'yahoo-oauth' && (
+                  <>
+                    <InfoAlert variant="success" title="🔒 OAuth 2.0 Security" marginBottom={4}>
+                      No passwords stored. Users authenticate directly with Yahoo for maximum security.
+                    </InfoAlert>
+                    
+                    <Flex direction="column" gap={4} style={{ width: '100%' }}>
+                      <SectionTitle>
+                        <Lock />
+                        Yahoo Developer Application
+                      </SectionTitle>
+                      
+                      <FullWidthField>
+                        <Field.Root required>
+                          <Field.Label>Yahoo Client ID</Field.Label>
+                          <TextInput
+                            placeholder="dj0yJmk9..."
+                            value={formData.oauthClientId}
+                            onChange={(e) => handleChange('oauthClientId', e.target.value)}
+                          />
+                          <Field.Hint>Found in Yahoo Developer Console → Your App → App Information. Starts with "dj0y..."</Field.Hint>
+                        </Field.Root>
+                      </FullWidthField>
+                      
+                      <FullWidthField>
+                        <Field.Root required>
+                          <Field.Label>Yahoo Client Secret</Field.Label>
+                          <TextInput
+                            type="password"
+                            placeholder="abc123def456..."
+                            value={formData.oauthClientSecret}
+                            onChange={(e) => handleChange('oauthClientSecret', e.target.value)}
+                          />
+                          <Field.Hint>Keep this secret! Found in the same App Information section. Never share or commit to git.</Field.Hint>
+                        </Field.Root>
+                      </FullWidthField>
+
+                      <Divider />
+
+                      {oauthCode ? (
+                        <Alert variant="success" title="✅ OAuth Authorized!">
+                          <Typography variant="pi">
+                            You've successfully authorized with Yahoo Mail! Click "Continue" to proceed to settings.
+                          </Typography>
+                        </Alert>
+                      ) : (
+                        <Box>
+                          <Typography variant="omega" textColor="neutral600" marginBottom={3}>
+                            After entering your credentials above, click the button below to connect with Yahoo:
+                          </Typography>
+                          <Button 
+                            onClick={startYahooOAuth}
+                            variant="secondary"
+                            size="L"
+                            disabled={!formData.oauthClientId}
+                            style={{
+                              width: '100%',
+                              background: '#6001D2',
+                              color: 'white',
+                              fontWeight: 600,
+                            }}
+                          >
+                            🔐 Connect with Yahoo
+                          </Button>
+                        </Box>
+                      )}
+                      
+                      <Box 
+                        padding={4} 
+                        background="neutral100" 
+                        hasRadius
+                        style={{ 
+                          border: `1px solid ${colors.border}`,
+                          borderRadius: '8px'
+                        }}
+                      >
+                        <Typography 
+                          fontWeight="semiBold" 
+                          marginBottom={3}
+                          style={{ fontSize: '15px' }}
+                        >
+                          📋 Setup Guide
+                        </Typography>
+                        
+                        <Flex direction="column" gap={2} style={{ fontSize: '14px', lineHeight: '1.6' }}>
+                          <Box>
+                            <strong>1.</strong> Go to <a href="https://developer.yahoo.com/apps/" target="_blank" rel="noopener noreferrer" style={{ color: colors.primary, textDecoration: 'underline' }}>developer.yahoo.com/apps</a>
+                          </Box>
+                          
+                          <Box>
+                            <strong>2.</strong> Click "Create an App"
+                          </Box>
+                          
+                          <Box>
+                            <strong>3.</strong> Fill in app details (name, description)
+                          </Box>
+                          
+                          <Box>
+                            <strong>4.</strong> Add this redirect URI:
+                          </Box>
+                          
+                          <Flex gap={2} alignItems="center">
+                            <Box
+                              padding={2}
+                              background="neutral0"
+                              hasRadius
+                              style={{ 
+                                flex: 1,
+                                fontFamily: 'monospace',
+                                fontSize: '13px',
+                                wordBreak: 'break-all',
+                                color: colors.textSecondary,
+                                border: `1px solid ${colors.border}`,
+                              }}
+                            >
+                              {`${window.location.origin}/magic-mail/oauth/yahoo/callback`}
+                            </Box>
+                            <Button
+                              variant="secondary"
+                              size="S"
+                              onClick={() => {
+                                navigator.clipboard.writeText(`${window.location.origin}/magic-mail/oauth/yahoo/callback`);
+                                toggleNotification({
+                                  type: 'success',
+                                  message: 'Redirect URI copied to clipboard!',
+                                });
+                              }}
+                            >
+                              Copy
+                            </Button>
+                          </Flex>
+
+                          <Box>
+                            <strong>5.</strong> Under API Permissions, enable:
+                          </Box>
+                          
+                          <Box style={{ marginLeft: '20px' }}>
+                            • <code>Mail</code> - Send and manage emails<br/>
+                            • <code>OpenID Connect</code> - User authentication
+                          </Box>
+
+                          <Box>
+                            <strong>6.</strong> Note your Client ID and Client Secret from the app settings
+                          </Box>
+                        </Flex>
+                      </Box>
+                    </Flex>
+                  </>
+                )}
+
+                {provider === 'sendgrid' && (
+                  <>
+                    <InfoAlert variant="success" title="🔒 API Key Security" marginBottom={4}>
+                      Your API key will be encrypted with AES-256-GCM before storage.
+                    </InfoAlert>
+                    
+                    <Flex direction="column" gap={4} style={{ width: '100%' }}>
+                      <SectionTitle>
+                        <Key />
+                        SendGrid API Configuration
+                      </SectionTitle>
+                      
+                      <FullWidthField>
+                        <Field.Root required>
+                          <Field.Label>SendGrid API Key</Field.Label>
+                          <TextInput
+                            type="password"
+                            placeholder="SG.xxxxxxxxxxxxxxxxxxxxxx"
+                            value={formData.apiKey}
+                            onChange={(e) => handleChange('apiKey', e.target.value)}
+                          />
+                          <Field.Hint>
+                            Found in SendGrid Dashboard → Settings → API Keys. Create a new key with "Mail Send" permission
+                          </Field.Hint>
+                        </Field.Root>
+                      </FullWidthField>
+                      
+                      <Alert variant="default" title="📖 SendGrid Resources">
+                        <Typography variant="pi">
+                          <strong>Dashboard:</strong> <a href="https://app.sendgrid.com" target="_blank" rel="noopener noreferrer" style={{color: '#0284c7'}}>app.sendgrid.com</a><br/>
+                          <strong>API Keys:</strong> Settings → API Keys → Create API Key<br/>
+                          <strong>Required Scope:</strong> Mail Send (Full Access)<br/>
+                          <strong>Docs:</strong> <a href="https://docs.sendgrid.com" target="_blank" rel="noopener noreferrer" style={{color: '#0284c7'}}>docs.sendgrid.com</a>
+                        </Typography>
+                      </Alert>
+                    </Flex>
+                  </>
+                )}
+
+                {provider === 'mailgun' && (
+                  <>
+                    <InfoAlert variant="success" title="🔒 API Key Security" marginBottom={4}>
+                      Your API key will be encrypted with AES-256-GCM before storage.
+                    </InfoAlert>
+                    
+                    <Flex direction="column" gap={4} style={{ width: '100%' }}>
+                      <SectionTitle>
+                        <Key />
+                        Mailgun API Configuration
+                      </SectionTitle>
+                      
+                      <FullWidthField>
+                        <Field.Root required>
+                          <Field.Label>Mailgun Domain</Field.Label>
+                          <TextInput
+                            placeholder="mg.yourdomain.com or sandbox-xxx.mailgun.org"
+                            value={formData.mailgunDomain}
+                            onChange={(e) => handleChange('mailgunDomain', e.target.value)}
+                          />
+                          <Field.Hint>
+                            Your verified Mailgun domain (e.g., mg.yourdomain.com) or sandbox domain for testing
+                          </Field.Hint>
+                        </Field.Root>
+                      </FullWidthField>
+                      
+                      <FullWidthField>
+                        <Field.Root required>
+                          <Field.Label>Mailgun API Key</Field.Label>
+                          <TextInput
+                            type="password"
+                            placeholder="key-xxxxxxxxxxxxxxxxxxxxxxxx"
+                            value={formData.apiKey}
+                            onChange={(e) => handleChange('apiKey', e.target.value)}
+                          />
+                          <Field.Hint>
+                            Found in Mailgun Dashboard → Settings → API Keys. Use your Private API key, not the Public Validation key
+                          </Field.Hint>
+                        </Field.Root>
+                      </FullWidthField>
+                      
+                      <Alert variant="default" title="📖 Mailgun Resources">
+                        <Typography variant="pi">
+                          <strong>Dashboard:</strong> <a href="https://app.mailgun.com" target="_blank" rel="noopener noreferrer" style={{color: '#0284c7'}}>app.mailgun.com</a><br/>
+                          <strong>API Keys:</strong> Settings → API Security → Private API Key<br/>
+                          <strong>Domains:</strong> Sending → Domains (verify your domain or use sandbox)<br/>
+                          <strong>Docs:</strong> <a href="https://documentation.mailgun.com" target="_blank" rel="noopener noreferrer" style={{color: '#0284c7'}}>documentation.mailgun.com</a>
+                        </Typography>
+                      </Alert>
+                    </Flex>
+                  </>
+                )}
+              </FormSection>
+            )}
+
+            {/* Step 4: Limits & Finalize */}
+            {currentStep === 4 && (
+              <FormSection>
+                <Flex direction="column" gap={5} style={{ width: '100%' }}>
+                  
+                  {/* Daily Limit */}
+                  <Box>
+                    <Typography fontWeight="semiBold" marginBottom={2} style={{ fontSize: '15px' }}>
+                      Daily Email Limit
+                    </Typography>
+                    <NumberInput
+                      value={formData.dailyLimit}
+                      onValueChange={(value) => handleChange('dailyLimit', value)}
+                    />
+                    <Typography variant="pi" textColor="neutral600" marginTop={2} style={{ fontSize: '13px', lineHeight: '1.5' }}>
+                      Maximum number of emails this account can send per day. Set to 0 for unlimited.
+                    </Typography>
+                  </Box>
+
+                  {/* Hourly Limit */}
+                  <Box>
+                    <Typography fontWeight="semiBold" marginBottom={2} style={{ fontSize: '15px' }}>
+                      Hourly Email Limit
+                    </Typography>
+                    <NumberInput
+                      value={formData.hourlyLimit}
+                      onValueChange={(value) => handleChange('hourlyLimit', value)}
+                    />
+                    <Typography variant="pi" textColor="neutral600" marginTop={2} style={{ fontSize: '13px', lineHeight: '1.5' }}>
+                      Maximum number of emails this account can send per hour. Set to 0 for unlimited.
+                    </Typography>
+                  </Box>
+
+                  {/* Priority */}
+                  <Box>
+                    <Typography fontWeight="semiBold" marginBottom={2} style={{ fontSize: '15px' }}>
+                      Account Priority
+                    </Typography>
+                    <NumberInput
+                      value={formData.priority}
+                      onValueChange={(value) => handleChange('priority', value)}
+                      min={1}
+                      max={10}
+                    />
+                    <Typography variant="pi" textColor="neutral600" marginTop={2} style={{ fontSize: '13px', lineHeight: '1.5' }}>
+                      When routing emails, accounts with higher priority (1-10) are preferred. Use 10 for your most reliable account.
+                    </Typography>
+                  </Box>
+                  
+                  <Divider />
+                  
+                  {/* Account Active Toggle */}
+                  <Box 
+                    padding={4} 
+                    background={formData.isActive ? '#DCFCE7' : '#FEE2E2'}
+                    hasRadius
+                    style={{ 
+                      border: formData.isActive ? `2px solid #22C55E` : `2px solid #EF4444`,
+                      borderRadius: '8px',
+                      transition: 'all 0.2s ease'
+                    }}
+                  >
+                    <Flex gap={3} alignItems="flex-start">
+                      <Box style={{ paddingTop: '2px' }}>
+                        <Toggle
+                          checked={formData.isActive}
+                          onChange={() => handleChange('isActive', !formData.isActive)}
+                        />
+                      </Box>
+                      <Box style={{ flex: 1 }}>
+                        <Flex alignItems="center" gap={2} marginBottom={1}>
+                          <Typography fontWeight="semiBold" style={{ fontSize: '15px' }}>
+                            {formData.isActive ? '✅' : '❌'} Account Active
+                          </Typography>
+                          {formData.isActive ? (
+                            <Badge backgroundColor="success600" textColor="neutral0" size="S">
+                              ENABLED
+                            </Badge>
+                          ) : (
+                            <Badge backgroundColor="danger600" textColor="neutral0" size="S">
+                              DISABLED
+                            </Badge>
+                          )}
+                        </Flex>
+                        <Typography variant="pi" textColor="neutral600" style={{ lineHeight: '1.6' }}>
+                          {formData.isActive 
+                            ? 'This account is enabled and can send emails. Disable it to prevent sending without deleting the account.'
+                            : 'This account is disabled and will not send any emails. Enable it to start sending again.'
+                          }
+                        </Typography>
+                      </Box>
+                    </Flex>
+                  </Box>
+
+                  {/* Primary Account Toggle */}
+                  <Box 
+                    padding={4} 
+                    background={formData.isPrimary ? '#FEF3C7' : 'neutral100'}
+                    hasRadius
+                    style={{ 
+                      border: formData.isPrimary ? `2px solid #F59E0B` : `1px solid ${colors.border}`,
+                      borderRadius: '8px',
+                      transition: 'all 0.2s ease'
+                    }}
+                  >
+                    <Flex gap={3} alignItems="flex-start">
+                      <Box style={{ paddingTop: '2px' }}>
+                        <Toggle
+                          checked={formData.isPrimary}
+                          onChange={() => handleChange('isPrimary', !formData.isPrimary)}
+                        />
+                      </Box>
+                      <Box style={{ flex: 1 }}>
+                        <Flex alignItems="center" gap={2} marginBottom={1}>
+                          <Typography fontWeight="semiBold" style={{ fontSize: '15px' }}>
+                            ⭐ Set as Primary Account
+                          </Typography>
+                          {formData.isPrimary && (
+                            <Badge backgroundColor="warning600" textColor="neutral0" size="S">
+                              PRIMARY
+                            </Badge>
+                          )}
+                        </Flex>
+                        <Typography variant="pi" textColor="neutral600" style={{ lineHeight: '1.6' }}>
+                          This account will be used by default when sending emails if no specific account is selected. Only one account can be primary at a time.
+                        </Typography>
+                      </Box>
+                    </Flex>
+                  </Box>
+                  
+                </Flex>
+              </FormSection>
+            )}
+
+          </Flex>
+        </Modal.Body>
+
+        <Modal.Footer>
+          <Flex justifyContent="space-between" style={{ width: '100%' }}>
+            <div>
+              {currentStep > 1 && (
+                <Button 
+                  variant="tertiary" 
+                  startIcon={<ArrowLeft />}
+                  onClick={() => setCurrentStep(currentStep - 1)}
+                >
+                  Back
+                </Button>
+              )}
+            </div>
+            <Flex gap={2}>
+              <Button onClick={onClose} variant="tertiary">
+                Cancel
+              </Button>
+              {currentStep < 4 ? (
+                <Button 
+                  endIcon={<ArrowRight />}
+                  onClick={() => setCurrentStep(currentStep + 1)}
+                  disabled={!canProceed()}
+                >
+                  Continue
+                </Button>
+              ) : (
+                <Button 
+                  onClick={handleSubmit} 
+                  loading={loading}
+                  disabled={!canProceed()}
+                  startIcon={<Check />}
+                >
+                  {isEditMode ? 'Update Account' : 'Create Account'}
+                </Button>
+              )}
+            </Flex>
+          </Flex>
+        </Modal.Footer>
+      </Modal.Content>
+    </Modal.Root>
+  );
+};
+
+export default AddAccountModal;