[Fix]: Allow SMTP to be configured before Advanced Authentication is enabled (#700)

[Fix]: Allow SMTP to be configured before Advanced Authentication is enabled (#700)

frontend/src/components/EmailSettings.tsx

@@ -8,6 +8,7 @@ import { Card, CardContent, CardHeader } from './Card';
 import { Button } from './Button';
 import { useToast } from '../contexts/ToastContext';
 import { useEffect } from 'react';
+import { useAuth } from '../contexts/AuthContext';
 
 const SECURITY_PORT_MAP: Record<string, number> = {
   starttls: 587,
@@ -25,7 +26,7 @@ export function EmailSettings() {
   const { t } = useTranslation();
   const { showToast } = useToast();
   const queryClient = useQueryClient();
-
+  
   const [smtpSettings, setSMTPSettings] = useState<SMTPSettings>({
     smtp_host: '',
     smtp_port: 587,
@@ -44,6 +45,8 @@ export function EmailSettings() {
     queryFn: () => api.getSMTPSettings(),
   });
 
+  // Fetch global auth status
+  const { authEnabled } = useAuth();
   // Fetch advanced auth status
   const { data: advancedAuthStatus } = useQuery({
     queryKey: ['advancedAuthStatus'],
@@ -163,6 +166,10 @@ export function EmailSettings() {
   };
 
   const handleToggleAdvancedAuth = () => {
+    if (!authEnabled) {
+      showToast(t('settings.email.errors.enableAuthFirst'), 'error');
+      return;
+    }
     if (!advancedAuthStatus?.advanced_auth_enabled && !advancedAuthStatus?.smtp_configured) {
       showToast(t('settings.email.errors.configureSmtpFirst'), 'error');
       return;
@@ -251,8 +258,8 @@ export function EmailSettings() {
         </CardContent>
       </Card>
 
-      {/* SMTP Configuration - dimmed when advanced auth is disabled */}
-      <div className={!advancedEnabled ? 'opacity-50 pointer-events-none' : ''}>
+      {/* SMTP Configuration */}
+      <div>
         <Card>
           <CardHeader>
             <h2 className="text-lg font-semibold text-white">
@@ -399,8 +406,8 @@ export function EmailSettings() {
         </Card>
       </div>
 
-      {/* Test SMTP - dimmed when advanced auth is disabled */}
-      <div className={!advancedEnabled ? 'opacity-50 pointer-events-none' : ''}>
+      {/* Test SMTP */}
+      <div>
         <Card>
           <CardHeader>
             <h2 className="text-lg font-semibold text-white">

frontend/src/i18n/locales/de.ts

@@ -1240,6 +1240,7 @@ export default {
         smtpServerAndEmail: 'Bitte füllen Sie SMTP-Server und Absender-E-Mail aus, bevor Sie testen',
         usernamePasswordRequired: 'Benutzername und Passwort sind erforderlich, wenn Authentifizierung aktiviert ist',
         configureSmtpFirst: 'Bitte konfigurieren und testen Sie zuerst die SMTP-Einstellungen',
+        enableAuthFirst: 'Bitte aktivieren Sie zuerst die Authentifizierung, um E-Mail-basierte Funktionen nutzen zu können.',
       },
       // Success messages
       success: {

frontend/src/i18n/locales/en.ts

@@ -1240,6 +1240,7 @@ export default {
         smtpServerAndEmail: 'Please fill in SMTP Server and From Email before testing',
         usernamePasswordRequired: 'Username and Password are required when authentication is enabled',
         configureSmtpFirst: 'Please configure and test SMTP settings first',
+        enableAuthFirst: 'Please enable authentication first to use email-based features.',
       },
       // Success messages
       success: {

frontend/src/i18n/locales/fr.ts

@@ -1240,6 +1240,7 @@ export default {
         smtpServerAndEmail: 'Serveur et expéditeur requis pour le test',
         usernamePasswordRequired: 'Utilisateur et mot de passe requis pour l\'auth',
         configureSmtpFirst: 'Configurez et testez le SMTP d\'abord',
+        enableAuthFirst: 'Veuillez d\'abord activer l\'authentification pour utiliser les fonctionnalités basées sur le courrier électronique.',
       },
       // Success messages
       success: {

frontend/src/i18n/locales/it.ts

@@ -1240,6 +1240,7 @@ export default {
         smtpServerAndEmail: 'Compilare Server SMTP e Email mittente prima di testare',
         usernamePasswordRequired: 'Nome utente e password sono obbligatori quando l\'autenticazione è abilitata',
         configureSmtpFirst: 'Configurare e testare le impostazioni SMTP prima',
+        enableAuthFirst: 'Per utilizzare le funzionalità basate sulla posta elettronica, è necessario prima abilitare l\'autenticazione.',
       },
       // Success messages
       success: {

frontend/src/i18n/locales/ja.ts

@@ -1240,6 +1240,7 @@ export default {
         smtpServerAndEmail: 'テストする前にSMTPサーバーと送信元メールを入力してください',
         usernamePasswordRequired: '認証が有効な場合、ユーザー名とパスワードは必須です',
         configureSmtpFirst: '最初にSMTP設定を構成してテストしてください',
+        enableAuthFirst: 'メール関連機能をご利用いただくには、まず認証を有効にしてください。',
       },
       // Success messages
       success: {

frontend/src/i18n/locales/pt-BR.ts

@@ -1240,6 +1240,7 @@ export default {
         smtpServerAndEmail: 'Por favor, preencha o servidor SMTP e o email de remetente antes de testar',
         usernamePasswordRequired: 'Nome de usuário e senha são obrigatórios quando a autenticação está habilitada',
         configureSmtpFirst: 'Por favor, configure e teste as configurações SMTP primeiro',
+        enableAuthFirst: 'Por favor, habilite a autenticação primeiro para usar os recursos baseados em e-mail.',
       },
       // Success messages
       success: {

frontend/src/i18n/locales/zh-CN.ts

@@ -1240,6 +1240,7 @@ export default {
         smtpServerAndEmail: '测试前请填写 SMTP 服务器和发件邮箱',
         usernamePasswordRequired: '启用认证时需要用户名和密码',
         configureSmtpFirst: '请先配置并测试 SMTP 设置',
+        enableAuthFirst: '请先启用身份验证才能使用基于电子邮件的功能。',
       },
       // Success messages
       success: {