strapi-plugin-magic-sessionmanager 3.7.0 → 4.0.1

package/README.md

@@ -300,6 +300,96 @@ Add to `config/plugins.ts`:
 
 ---
 
+## 📧 Email Alerts Setup (Premium)
+
+The Session Manager uses **Strapi's Email Plugin** to send notifications. You need to configure an email provider first.
+
+### Step 1: Install Email Provider
+
+Choose one of these providers:
+
+**Option A: Nodemailer (Recommended)**
+```bash
+npm install @strapi/provider-email-nodemailer
+```
+
+**Option B: SendGrid**
+```bash
+npm install @strapi/provider-email-sendgrid
+```
+
+**Option C: Mailgun**
+```bash
+npm install @strapi/provider-email-mailgun
+```
+
+### Step 2: Configure Email Plugin
+
+Add to `config/plugins.ts`:
+
+```typescript
+export default () => ({
+  // Email configuration
+  email: {
+    config: {
+      provider: 'nodemailer',
+      providerOptions: {
+        host: process.env.SMTP_HOST || 'smtp.gmail.com',
+        port: process.env.SMTP_PORT || 587,
+        auth: {
+          user: process.env.SMTP_USER,
+          pass: process.env.SMTP_PASSWORD,
+        },
+      },
+      settings: {
+        defaultFrom: process.env.SMTP_DEFAULT_FROM || 'noreply@yourapp.com',
+        defaultReplyTo: process.env.SMTP_DEFAULT_REPLY_TO || 'support@yourapp.com',
+      },
+    },
+  },
+  
+  // Session Manager configuration
+  'magic-sessionmanager': {
+    enabled: true,
+  },
+});
+```
+
+### Step 3: Add Environment Variables
+
+Add to your `.env` file:
+
+```env
+SMTP_HOST=smtp.gmail.com
+SMTP_PORT=587
+SMTP_USER=your-email@gmail.com
+SMTP_PASSWORD=your-app-password
+SMTP_DEFAULT_FROM=noreply@yourapp.com
+SMTP_DEFAULT_REPLY_TO=support@yourapp.com
+```
+
+**For Gmail:**
+- Use an [App Password](https://support.google.com/accounts/answer/185833), not your regular password!
+
+### Step 4: Enable in Admin Panel
+
+1. Go to **Sessions → Settings**
+2. Scroll to **"Email Notifications"**
+3. Toggle **"Enable Email Alerts"** to ON
+4. Customize email templates (optional)
+5. Click **Save**
+
+### Step 5: Test It
+
+Trigger a suspicious login (e.g., use a VPN) and check if the email arrives!
+
+**Troubleshooting:**
+- Check Strapi logs for email errors
+- Verify SMTP credentials are correct
+- Test SMTP connection with a tool like [smtp-tester](https://www.npmjs.com/package/smtp-tester)
+
+---
+
 ## 📋 Simple API Guide
 
 ### Get Sessions

package/admin/src/components/LicenseGuard.jsx

@@ -407,12 +407,12 @@ const LicenseGuard = ({ children }) => {
               >
                 <Typography variant="omega" style={{ fontSize: '13px', lineHeight: '1.6' }}>
                   {useExistingKey 
-                    ? '🔑 Enter your email and license key to activate.'
+                    ? 'Enter your email and license key to activate.'
                     : useAutoCreate && adminUser && adminUser.email
-                    ? `✨ Click "Activate" to auto-create a license with your account (${adminUser.email})`
+                    ? `Click "Activate" to auto-create a license with your account (${adminUser.email})`
                     : useAutoCreate
-                    ? '✨ Click "Activate" to auto-create a license with your admin account'
-                    : '💡 A license will be created with the details below.'
+                    ? 'Click "Activate" to auto-create a license with your admin account'
+                    : 'A license will be created with the details below.'
                   }
                 </Typography>
               </Box>
@@ -476,10 +476,10 @@ const LicenseGuard = ({ children }) => {
                     Ready to activate with your account:
                   </Typography>
                   <Typography variant="pi" style={{ marginBottom: '4px', display: 'block' }}>
-                    👤 {adminUser.firstname || 'Admin'} {adminUser.lastname || 'User'}
+                    {adminUser.firstname || 'Admin'} {adminUser.lastname || 'User'}
                   </Typography>
                   <Typography variant="pi" textColor="neutral600">
-                    📧 {adminUser.email || 'Loading...'}
+                    {adminUser.email || 'Loading...'}
                   </Typography>
                 </Box>
               ) : (

package/admin/src/components/SessionDetailModal.jsx

@@ -82,7 +82,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
       console.error('[SessionDetailModal] Error fetching geolocation:', err);
       // Fallback to mock data if API fails
       setGeoData({
-        country_flag: '🌍',
+        country_flag: '',
         country: 'Unknown',
         city: 'Unknown',
         timezone: 'Unknown',
@@ -98,7 +98,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
   
   // Use real data if available, otherwise fallback
   const premiumData = geoData || {
-    country_flag: '🌍',
+    country_flag: '',
     country: 'Loading...',
     city: 'Loading...',
     timezone: 'Loading...',
@@ -207,7 +207,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
                 size="M"
                 style={{ fontSize: '14px', padding: '8px 20px', fontWeight: '600' }}
               >
-                {isOnline ? '🟢 ONLINE' : '⚫ OFFLINE'}
+                {isOnline ? 'ONLINE' : 'OFFLINE'}
               </Badge>
             </Flex>
 
@@ -220,7 +220,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
                 {/* User Information */}
                 <Section>
                   <SectionTitle>
-                    👤 User
+                    User
                   </SectionTitle>
                   
                   <DetailRow compact icon={Check} label="Username" value={session.user?.username || 'N/A'} />
@@ -231,7 +231,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
                 {/* Device Information */}
                 <Section>
                   <SectionTitle>
-                    💻 Device
+                    Device
                   </SectionTitle>
                   
                   <DetailRow compact icon={DeviceIcon} label="Device" value={deviceInfo.device} />
@@ -245,7 +245,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
               <Box>
                 <Section>
                   <SectionTitle>
-                    ⏱️ Timeline
+                    Timeline
                   </SectionTitle>
                 
                 <DetailRow 
@@ -297,7 +297,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
             {isPremium ? (
               <Section>
                 <SectionTitle>
-                  🌍 Location & Security
+                  Location and Security
                 </SectionTitle>
                 
                 {geoLoading ? (
@@ -313,7 +313,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
                         compact 
                         icon={Earth} 
                         label="Country" 
-                        value={`${premiumData.country_flag || '🌍'} ${premiumData.country}`} 
+                        value={`${premiumData.country_flag || ''} ${premiumData.country}`.trim()} 
                       />
                       <DetailRow compact icon={Earth} label="City" value={premiumData.city} />
                       <DetailRow compact icon={Clock} label="Timezone" value={premiumData.timezone} />
@@ -329,13 +329,13 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
                         compact 
                         icon={Shield} 
                         label="VPN" 
-                        value={premiumData.isVpn ? '⚠️ Yes' : '✅ No'} 
+                        value={premiumData.isVpn ? '[WARNING] Yes' : 'No'} 
                       />
                       <DetailRow 
                         compact 
                         icon={Shield} 
                         label="Proxy" 
-                        value={premiumData.isProxy ? '⚠️ Yes' : '✅ No'} 
+                        value={premiumData.isProxy ? '[WARNING] Yes' : 'No'} 
                       />
                     </Box>
                   </TwoColumnGrid>
@@ -355,7 +355,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
                   <Flex direction="column" alignItems="center" gap={3}>
                     <Crown style={{ width: '40px', height: '40px', color: '#d97706' }} />
                     <Typography variant="beta" style={{ color: '#92400e', fontWeight: '700' }}>
-                      🌍 Location & Security Analysis
+                      Location and Security Analysis
                     </Typography>
                     <Typography variant="omega" style={{ color: '#78350f', fontSize: '14px', lineHeight: '1.6' }}>
                       Unlock premium features to get IP geolocation, security scoring, and VPN/Proxy detection for every session
@@ -384,7 +384,7 @@ const SessionDetailModal = ({ session, onClose, onSessionTerminated }) => {
             <Section>
               <Flex justifyContent="space-between" alignItems="center" style={{ marginBottom: '12px' }}>
                 <SectionTitle style={{ marginBottom: 0, paddingBottom: 0, border: 'none' }}>
-                  🔧 Technical Details
+                  Technical Details
                 </SectionTitle>
                 <Button
                   variant="tertiary"

package/admin/src/components/SessionInfoCard.jsx

@@ -76,11 +76,11 @@ const SessionInfoCard = ({ id, model }) => {
           </Typography>
           {isOnline ? (
             <Badge active backgroundColor="success500">
-              🟢 Online
+              Online
             </Badge>
           ) : (
             <Badge backgroundColor="neutral150">
-              ⚫ Offline
+              Offline
             </Badge>
           )}
         </Flex>
@@ -110,7 +110,7 @@ const SessionInfoCard = ({ id, model }) => {
                 marginBottom={2}
               >
                 <Typography variant="pi" textColor="neutral800">
-                  📱 {session.ipAddress}
+                  IP: {session.ipAddress}
                 </Typography>
                 <Typography variant="pi" textColor="neutral600" fontSize="11px">
                   {new Date(session.loginTime).toLocaleString()}

package/admin/src/components/SessionInfoPanel.jsx

@@ -16,7 +16,8 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
   const { get, post: postRequest } = useFetchClient();
   const { toggleNotification } = useNotification();
 
-  const userId = document?.id || documentId;
+  // Strapi v5: Use documentId (string UUID) instead of numeric id
+  const userId = document?.documentId || documentId;
 
   useEffect(() => {
     if (model !== 'plugin::users-permissions.user' || !userId) {
@@ -144,7 +145,7 @@ const SessionInfoPanel = ({ documentId, model, document }) => {
               size="M"
               style={{ fontSize: '14px', padding: '6px 12px' }}
             >
-              {isOnline ? '🟢 ACTIVE' : '⚫ OFFLINE'}
+              {isOnline ? 'ACTIVE' : 'OFFLINE'}
             </Badge>
             <Typography variant="omega" fontWeight="semiBold" textColor={isOnline ? 'success700' : 'neutral700'}>
               {sessions.length} active session{sessions.length !== 1 ? 's' : ''}

package/admin/src/hooks/useLicense.js

@@ -60,7 +60,7 @@ export const useLicense = () => {
       if ((newIsPremium !== isPremium || !silent) && !silent) {
         console.log(`[magic-sessionmanager/useLicense] Premium Status: ${newIsPremium} (valid: ${isValid}, featurePremium: ${hasPremiumFeature})`);
         if (!newIsPremium && isValid) {
-          console.warn('[magic-sessionmanager/useLicense] ⚠️ License is valid but Premium feature is not enabled!');
+          console.warn('[magic-sessionmanager/useLicense] [WARN] License is valid but Premium feature is not enabled!');
         }
       }
       

package/admin/src/index.js

@@ -86,7 +86,7 @@ export default {
         id: 'online-users-widget',
         pluginId: pluginId,
       });
-      console.log(`[${pluginId}] ✅ Online Users Widget registered`);
+      console.log(`[${pluginId}] [SUCCESS] Online Users Widget registered`);
     }
   },
 
@@ -99,7 +99,7 @@ export default {
       if (contentManagerPlugin && contentManagerPlugin.apis) {
         console.log(`[${pluginId}] Injecting SessionInfoPanel into edit view sidebar...`);
         contentManagerPlugin.apis.addEditViewSidePanel([SessionInfoPanel]);
-        console.log(`[${pluginId}] ✅ SessionInfoPanel injected successfully`);
+        console.log(`[${pluginId}] [SUCCESS] SessionInfoPanel injected successfully`);
       } else {
         console.warn(`[${pluginId}] Content Manager plugin or APIs not available`);
       }

package/admin/src/pages/Analytics.jsx

@@ -506,7 +506,7 @@ const AnalyticsPage = () => {
                   textShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
                 }}
               >
-                📊 Analytics Dashboard
+                Analytics Dashboard
               </Typography>
               
               <Typography 
@@ -547,7 +547,7 @@ const AnalyticsPage = () => {
                   e.currentTarget.style.boxShadow = '0 6px 16px rgba(245, 158, 11, 0.4)';
                 }}
               >
-                ✨ Upgrade to Premium
+                Upgrade to Premium
               </button>
             </div>
           </Box>

package/admin/src/pages/HomePage.jsx

@@ -531,7 +531,7 @@ const HomePage = () => {
   };
 
   const handleDeleteSession = async (sessionId) => {
-    if (!confirm('⚠️ WARNING: This will PERMANENTLY delete this session from the database!\n\nThis action cannot be undone.\n\nAre you sure?')) {
+    if (!confirm('[WARNING] This will PERMANENTLY delete this session from the database!\n\nThis action cannot be undone.\n\nAre you sure?')) {
       return;
     }
 
@@ -838,7 +838,7 @@ const HomePage = () => {
         <Box>
           <Box style={{ marginBottom: theme.spacing.md }}>
             <Typography variant="delta" style={{ marginBottom: theme.spacing.md, color: theme.colors.neutral[700] }}>
-              📊 All Sessions
+              All Sessions
             </Typography>
           </Box>
           
@@ -864,10 +864,10 @@ const HomePage = () => {
                 size="S"
               >
                 <SingleSelectOption value="all">All Sessions</SingleSelectOption>
-                <SingleSelectOption value="active">🟢 Active (&lt; 15 min)</SingleSelectOption>
-                <SingleSelectOption value="idle">🟡 Idle (&gt; 15 min)</SingleSelectOption>
-                <SingleSelectOption value="loggedout">🔴 Logged Out</SingleSelectOption>
-                <SingleSelectOption value="terminated">⚫ Terminated</SingleSelectOption>
+                <SingleSelectOption value="active">Active (less than 15 min)</SingleSelectOption>
+                <SingleSelectOption value="idle">Idle (more than 15 min)</SingleSelectOption>
+                <SingleSelectOption value="loggedout">Logged Out</SingleSelectOption>
+                <SingleSelectOption value="terminated">Terminated</SingleSelectOption>
               </SingleSelect>
             </Box>
             
@@ -921,26 +921,26 @@ const HomePage = () => {
                     active: { 
                       bg: theme.colors.success[50], 
                       badgeColor: 'success600', 
-                      label: '🟢 Active',
+                      label: 'Active',
                       indicator: true 
                     },
                     idle: { 
                       bg: theme.colors.warning[50], 
                       badgeColor: 'warning600', 
-                      label: '🟡 Idle',
+                      label: 'Idle',
                       indicator: false 
                     },
                     loggedout: { 
                       bg: theme.colors.danger[50], 
                       badgeColor: 'danger600', 
-                      label: '🔴 Logged Out',
+                      label: 'Logged Out',
                       indicator: false,
                       opacity: 0.7 
                     },
                     terminated: { 
                       bg: theme.colors.neutral[100], 
                       badgeColor: 'neutral600', 
-                      label: '⚫ Terminated',
+                      label: 'Terminated',
                       indicator: false,
                       opacity: 0.6 
                     },
@@ -1185,10 +1185,7 @@ const HomePage = () => {
             }}
           />
           
-          {/* Floating Emoji */}
-          <FloatingEmoji>
-            💻
-          </FloatingEmoji>
+          {/* Floating Icon (removed emoji) */}
           
           <Flex direction="column" alignItems="center" gap={6} style={{ position: 'relative', zIndex: 1 }}>
             <Box

package/admin/src/pages/License.jsx

@@ -465,7 +465,7 @@ Generated:   ${new Date().toLocaleString()}
                   {data.features?.premium && (
                     <Box marginBottom={5} padding={5} background="success50" hasRadius style={{ border: '2px solid #dcfce7' }}>
                       <Typography variant="delta" fontWeight="bold" textColor="success700" style={{ marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px' }}>
-                        ✨ Premium Features Active
+                        Premium Features Active
                       </Typography>
                       <Flex direction="column" gap={2}>
                         <Typography variant="omega" textColor="success700" style={{ fontSize: '14px', display: 'flex', alignItems: 'center', gap: '8px' }}>
@@ -494,7 +494,7 @@ Generated:   ${new Date().toLocaleString()}
                   {data.features?.advanced && (
                     <Box marginBottom={5} padding={5} background="primary50" hasRadius style={{ border: '2px solid #bae6fd' }}>
                       <Typography variant="delta" fontWeight="bold" textColor="primary700" style={{ marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px' }}>
-                        🚀 Advanced Features Active
+                        Advanced Features Active
                       </Typography>
                       <Flex direction="column" gap={2}>
                         <Typography variant="omega" textColor="primary700" style={{ fontSize: '14px', display: 'flex', alignItems: 'center', gap: '8px' }}>

package/admin/src/pages/Settings.jsx

@@ -10,7 +10,6 @@ import {
   Checkbox,
   Alert,
   TextInput,
-  Textarea,
   Tabs,
   Divider,
   Badge,
@@ -224,12 +223,12 @@ const validateTemplate = (template, templateType) => {
 // Get default email templates
 const getDefaultTemplates = () => ({
   suspiciousLogin: {
-    subject: '🚨 Suspicious Login Alert - Session Manager',
+    subject: '[ALERT] Suspicious Login Alert - Session Manager',
     html: `
 <html>
 <body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
   <div style="max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f9fafb; border-radius: 10px;">
-    <h2 style="color: #dc2626;">🚨 Suspicious Login Detected</h2>
+    <h2 style="color: #dc2626;">[ALERT] Suspicious Login Detected</h2>
     <p>A potentially suspicious login was detected for your account.</p>
     
     <div style="background: white; padding: 15px; border-radius: 8px; margin: 20px 0;">
@@ -264,7 +263,7 @@ const getDefaultTemplates = () => ({
   </div>
 </body>
 </html>`,
-    text: `🚨 Suspicious Login Detected
+    text: `[ALERT] Suspicious Login Detected
 
 A potentially suspicious login was detected for your account.
 
@@ -279,12 +278,12 @@ Login Details:
 Security: VPN={{reason.isVpn}}, Proxy={{reason.isProxy}}, Threat={{reason.isThreat}}, Score={{reason.securityScore}}/100`,
   },
   newLocation: {
-    subject: '📍 New Location Login Detected',
+    subject: '[LOCATION] New Location Login Detected',
     html: `
 <html>
 <body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
   <div style="max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f0f9ff; border-radius: 10px;">
-    <h2 style="color: #0284c7;">📍 Login from New Location</h2>
+    <h2 style="color: #0284c7;">[LOCATION] Login from New Location</h2>
     <p>Your account was accessed from a new location.</p>
     
     <div style="background: white; padding: 15px; border-radius: 8px; margin: 20px 0;">
@@ -307,7 +306,7 @@ Security: VPN={{reason.isVpn}}, Proxy={{reason.isProxy}}, Threat={{reason.isThre
   </div>
 </body>
 </html>`,
-    text: `📍 Login from New Location
+    text: `[LOCATION] Login from New Location
 
 Your account was accessed from a new location.
 
@@ -322,12 +321,12 @@ New Location Details:
 If this was you, no action is needed.`,
   },
   vpnProxy: {
-    subject: '⚠️ VPN/Proxy Login Detected',
+    subject: '[WARNING] VPN/Proxy Login Detected',
     html: `
 <html>
 <body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
   <div style="max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fffbeb; border-radius: 10px;">
-    <h2 style="color: #d97706;">⚠️ VPN/Proxy Detected</h2>
+    <h2 style="color: #d97706;">[WARNING] VPN/Proxy Detected</h2>
     <p>A login from a VPN or proxy service was detected on your account.</p>
     
     <div style="background: white; padding: 15px; border-radius: 8px; margin: 20px 0;">
@@ -352,7 +351,7 @@ If this was you, no action is needed.`,
   </div>
 </body>
 </html>`,
-    text: `⚠️ VPN/Proxy Detected
+    text: `[WARNING] VPN/Proxy Detected
 
 A login from a VPN or proxy service was detected on your account.
 
@@ -518,7 +517,7 @@ const SettingsPage = () => {
   };
 
   const handleCleanInactive = async () => {
-    if (!confirm('⚠️ WARNING: This will permanently delete ALL inactive sessions.\n\nContinue?')) {
+    if (!confirm('[WARNING] This will permanently delete ALL inactive sessions.\n\nContinue?')) {
       return;
     }
 
@@ -645,7 +644,7 @@ const SettingsPage = () => {
                 
                 {/* Session Timeout */}
                 <Typography variant="sigma" fontWeight="bold" style={{ marginBottom: '16px', display: 'block', color: theme.colors.neutral[700] }}>
-                  ⏱️ SESSION TIMEOUT
+                  SESSION TIMEOUT
                 </Typography>
                 <Grid.Root gap={6} style={{ marginBottom: '32px' }}>
                   <Grid.Item col={6} s={12}>
@@ -786,7 +785,7 @@ const SettingsPage = () => {
               <Box padding={6}>
                 
                 <Typography variant="sigma" fontWeight="bold" style={{ marginBottom: '16px', display: 'block', color: theme.colors.neutral[700] }}>
-                  🔒 SECURITY OPTIONS
+                  SECURITY OPTIONS
                 </Typography>
 
                 {/* Encryption Key Generator */}
@@ -1119,7 +1118,7 @@ const SettingsPage = () => {
                               onChange={() => handleChange('alertOnSuspiciousLogin', !settings.alertOnSuspiciousLogin)}
                             >
                               <Typography variant="omega" fontWeight="semiBold" style={{ fontSize: '14px' }}>
-                                🚨 Suspicious Login
+                                Suspicious Login
                               </Typography>
                             </Checkbox>
                           </Box>
@@ -1141,7 +1140,7 @@ const SettingsPage = () => {
                               onChange={() => handleChange('alertOnNewLocation', !settings.alertOnNewLocation)}
                             >
                               <Typography variant="omega" fontWeight="semiBold" style={{ fontSize: '14px' }}>
-                                📍 New Location
+                                New Location
                               </Typography>
                             </Checkbox>
                           </Box>
@@ -1163,7 +1162,7 @@ const SettingsPage = () => {
                               onChange={() => handleChange('alertOnVpnProxy', !settings.alertOnVpnProxy)}
                             >
                               <Typography variant="omega" fontWeight="semiBold" style={{ fontSize: '14px' }}>
-                                ⚠️ VPN/Proxy
+                                VPN/Proxy
                               </Typography>
                             </Checkbox>
                           </Box>
@@ -1173,7 +1172,7 @@ const SettingsPage = () => {
                       {/* Email Templates */}
                       <Divider style={{ marginBottom: '24px' }} />
                       <Typography variant="sigma" fontWeight="bold" style={{ marginBottom: '8px', display: 'block', color: theme.colors.neutral[700] }}>
-                        📝 EMAIL TEMPLATES
+                        EMAIL TEMPLATES
                       </Typography>
                       <Typography variant="pi" textColor="neutral600" style={{ marginBottom: '20px', display: 'block', fontSize: '12px' }}>
                         Customize email notification templates with dynamic variables
@@ -1182,9 +1181,9 @@ const SettingsPage = () => {
                       {/* Template Tabs */}
                       <Tabs.Root value={activeTemplateTab} onValueChange={setActiveTemplateTab}>
                         <Tabs.List aria-label="Email Templates">
-                          <Tabs.Trigger value="suspiciousLogin">🚨 Suspicious Login</Tabs.Trigger>
-                          <Tabs.Trigger value="newLocation">📍 New Location</Tabs.Trigger>
-                          <Tabs.Trigger value="vpnProxy">⚠️ VPN/Proxy</Tabs.Trigger>
+                          <Tabs.Trigger value="suspiciousLogin">Suspicious Login</Tabs.Trigger>
+                          <Tabs.Trigger value="newLocation">New Location</Tabs.Trigger>
+                          <Tabs.Trigger value="vpnProxy">VPN/Proxy</Tabs.Trigger>
                         </Tabs.List>
                         
                         {Object.keys(settings.emailTemplates).map((templateKey) => (
@@ -1193,7 +1192,7 @@ const SettingsPage = () => {
                               {/* Subject */}
                               <Box style={{ marginBottom: '24px' }}>
                                 <Typography variant="pi" fontWeight="bold" style={{ marginBottom: '8px', display: 'block' }}>
-                                  ✉️ Email Subject
+                                  Email Subject
                                 </Typography>
                                 <TextInput
                                   value={settings.emailTemplates[templateKey].subject}
@@ -1340,7 +1339,7 @@ const SettingsPage = () => {
                                         type: validation.isValid ? 'success' : 'warning',
                                         message: validation.isValid 
                                           ? `✓ Template valid! Found ${validation.foundVars.length}/${validation.totalAvailable} variables.`
-                                          : '⚠️ No variables found. Add at least one variable.',
+                                          : '[WARNING] No variables found. Add at least one variable.',
                                       });
                                     }}
                                   >
@@ -1551,7 +1550,7 @@ const SettingsPage = () => {
                           </Box>
                           <Flex justifyContent="space-between" alignItems="center" style={{ marginTop: '10px' }}>
                             <Typography variant="pi" textColor="neutral600" style={{ fontSize: '12px' }}>
-                              💡 Optional: Post session alerts to your Discord channel
+                              Optional: Post session alerts to your Discord channel
                             </Typography>
                             {settings.discordWebhookUrl && (
                               <Typography variant="pi" textColor="primary600" style={{ fontSize: '11px', fontFamily: 'monospace' }}>
@@ -1597,7 +1596,7 @@ const SettingsPage = () => {
                           </Box>
                           <Flex justifyContent="space-between" alignItems="center" style={{ marginTop: '10px' }}>
                             <Typography variant="pi" textColor="neutral600" style={{ fontSize: '12px' }}>
-                              💡 Optional: Post session alerts to your Slack workspace
+                              Optional: Post session alerts to your Slack workspace
                             </Typography>
                             {settings.slackWebhookUrl && (
                               <Typography variant="pi" textColor="primary600" style={{ fontSize: '11px', fontFamily: 'monospace' }}>
@@ -1623,7 +1622,7 @@ const SettingsPage = () => {
              <Check style={{ width: '20px', height: '20px', color: theme.colors.success[600], flexShrink: 0, marginTop: '2px' }} />
              <Box style={{ flex: 1 }}>
                <Typography variant="omega" fontWeight="bold" style={{ marginBottom: '8px', display: 'block', color: theme.colors.primary[700] }}>
-                 ✨ Database-Backed Settings
+                 Database-Backed Settings
                </Typography>
                <Typography variant="pi" textColor="primary700" style={{ fontSize: '13px', lineHeight: '1.8' }}>
                  All settings are stored in your Strapi database and shared across all admin users.