Implementation du mail

2026-06-14 20:34:52 +02:00
parent 96b1741cd1
commit 53b1ad2063
8 changed files with 858 additions and 25 deletions
@@ -5,6 +5,7 @@ import UsersSection    from './admin/UsersSection.jsx';
 import CreateUserSection from './admin/CreateUserSection.jsx';
 import JobLogsSection  from './admin/JobLogsSection.jsx';
 import IconsSection    from './admin/IconsSection.jsx';
+import SmtpSection     from './admin/SmtpSection.jsx';

 /* ── Icônes nav ───────────────────────────────────────────────── */
 function IconUsers()    { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>; }
@@ -13,6 +14,7 @@ function IconActivity() { return <svg width="15" height="15" viewBox="0 0 24 24"
 function IconImage()    { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>; }
 function IconTax()      { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>; }
 function IconDatabase() { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>; }
+function IconMail()     { return <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>; }

 const NAV = [
  {
@@ -31,6 +33,12 @@ const NAV = [
      { id: 'fiscalite',   label: 'Fiscalité',   icon: <IconTax />,      href: '/admin/fiscalite' },
    ],
  },
+  {
+    group: 'Notifications',
+    items: [
+      { id: 'smtp', label: 'SMTP', icon: <IconMail /> },
+    ],
+  },
 ];

 export default function Admin() {
@@ -68,6 +76,7 @@ export default function Admin() {
        {section === 'create'   && <CreateUserSection onCreated={() => setRefreshKey(k => k + 1)} />}
        {section === 'job-logs' && <JobLogsSection />}
        {section === 'icons'    && <IconsSection />}
+        {section === 'smtp'     && <SmtpSection />}
      </div>
    </div>
  );
@@ -0,0 +1,416 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { api } from '../../api.js';
+import { useAuth } from '../../context/AuthContext.jsx';
+
+/* ── Icône œil (show/hide password) ───────────────────────────────────── */
+function IconEye({ open }) {
+  return open
+    ? <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+    : <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>;
+}
+
+/* ── Toggle switch ─────────────────────────────────────────────────────── */
+function Toggle({ checked, onChange, id }) {
+  return (
+    <label htmlFor={id} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
+      <input
+        id={id}
+        type="checkbox"
+        checked={checked}
+        onChange={e => onChange(e.target.checked)}
+        style={{ display: 'none' }}
+      />
+      <span style={{
+        display: 'inline-block',
+        width: 44,
+        height: 24,
+        borderRadius: 12,
+        background: checked ? 'var(--primary)' : 'var(--border)',
+        position: 'relative',
+        transition: 'background 0.2s',
+        flexShrink: 0,
+      }}>
+        <span style={{
+          position: 'absolute',
+          top: 3,
+          left: checked ? 23 : 3,
+          width: 18,
+          height: 18,
+          borderRadius: '50%',
+          background: '#fff',
+          transition: 'left 0.2s',
+          boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
+        }} />
+      </span>
+    </label>
+  );
+}
+
+/* ── Ligne de paramètre ────────────────────────────────────────────────── */
+function SettingRow({ label, description, children }) {
+  return (
+    <div style={{
+      display: 'grid',
+      gridTemplateColumns: '1fr 1fr',
+      gap: '12px 24px',
+      alignItems: 'center',
+      padding: '18px 0',
+      borderBottom: '1px solid var(--border)',
+    }}>
+      <div>
+        <div style={{ fontWeight: 600, color: 'var(--text)', marginBottom: description ? 4 : 0 }}>{label}</div>
+        {description && <div style={{ fontSize: '0.85rem', color: 'var(--text-muted)', lineHeight: 1.4 }}>{description}</div>}
+      </div>
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+const DEFAULT_STATE = {
+  enabled:     false,
+  host:        '',
+  port:        587,
+  secure:      false,
+  email:       '',
+  username:    '',
+  password:    '',
+  allowUnauth: false,
+  appName:     'Crowdlending',
+  appUrl:      '',
+};
+
+export default function SmtpSection() {
+  const { user } = useAuth();
+  const [form, setForm]             = useState(DEFAULT_STATE);
+  const [hasPassword, setHasPassword] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const passwordTyped = useRef(false); // true uniquement si l'utilisateur a tapé manuellement
+  const [testEmail, setTestEmail]   = useState(user?.email || '');
+  const [result, setResult]     = useState(null); // { ok, msg }
+  const [testResult, setTestResult] = useState(null);
+  const [loading, setLoading]       = useState(false);
+  const [testing, setTesting]       = useState(false);
+  const [loadingEnv, setLoadingEnv] = useState(false);
+  const [saveStatus, setSaveStatus] = useState(null); // 'saving' | 'saved' | 'error'
+  const debounceRef  = useRef(null);
+  const isFirstLoad  = useRef(true);
+  const hasPasswordRef = useRef(false);
+
+  useEffect(() => {
+    api.get('/admin/smtp').then(data => {
+      setForm({
+        enabled:     !!data.enabled,
+        host:        data.host        || '',
+        port:        data.port        || 587,
+        secure:      !!data.secure,
+        email:       data.email       || '',
+        username:    data.username    || '',
+        password:    '',
+        allowUnauth: !!data.allowUnauth,
+        appName:     data.appName     || 'Crowdlending',
+        appUrl:      data.appUrl      || '',
+      });
+      setHasPassword(!!data.hasPassword);
+      hasPasswordRef.current = !!data.hasPassword;
+    });
+  }, []);
+
+  const doSave = useCallback(async (currentForm) => {
+    setSaveStatus('saving');
+    try {
+      const payload = { ...currentForm };
+      // N'envoyer le mot de passe que si l'utilisateur l'a tapé manuellement
+      if (!payload.password || !passwordTyped.current) delete payload.password;
+      await api.put('/admin/smtp', payload);
+      if (payload.password) {
+        setHasPassword(true);
+        hasPasswordRef.current = true;
+      }
+      setSaveStatus('saved');
+      setTimeout(() => setSaveStatus(null), 2500);
+    } catch (e) {
+      setSaveStatus('error');
+      setResult({ ok: false, msg: e.message || 'Erreur lors de la sauvegarde.' });
+    }
+  }, []);
+
+  const set = (key, value) => {
+    setForm(f => {
+      const next = { ...f, [key]: value };
+      // Ne pas déclencher l'auto-save au chargement initial
+      if (isFirstLoad.current) { isFirstLoad.current = false; return next; }
+      clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => doSave(next), 1500);
+      return next;
+    });
+  };
+
+  // Nettoyage du timer au démontage
+  useEffect(() => () => clearTimeout(debounceRef.current), []);
+
+  const handleTest = async () => {
+    if (!testEmail) return;
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const data = await api.post('/admin/smtp/test', { to: testEmail });
+      setTestResult({ ok: data.ok, msg: data.msg });
+    } catch (e) {
+      setTestResult({ ok: false, msg: e.message || 'Erreur lors du test.' });
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  const handleLoadEnv = async () => {
+    setLoadingEnv(true);
+    try {
+      const data = await api.get('/admin/smtp/env');
+      setForm(f => {
+        const next = {
+          ...f,
+          host:     data.host     || f.host,
+          port:     data.port     || f.port,
+          email:    data.email    || f.email,
+          username: data.username || f.username,
+          password: '',
+        };
+        clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => doSave(next), 1500);
+        return next;
+      });
+      if (data.hasPassword) { setHasPassword(true); hasPasswordRef.current = true; }
+    } catch (e) {
+      setResult({ ok: false, msg: 'Impossible de charger les valeurs .env.' });
+    } finally {
+      setLoadingEnv(false);
+    }
+  };
+
+  return (
+    <div className="account-section">
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
+        <h2 style={{ margin: 0 }}>SMTP</h2>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          {saveStatus === 'saving' && (
+            <span style={{ fontSize: '0.82rem', color: 'var(--text-muted)' }}>Sauvegarde…</span>
+          )}
+          {saveStatus === 'saved' && (
+            <span style={{ fontSize: '0.82rem', color: 'var(--success, #15803d)' }}>✓ Sauvegardé</span>
+          )}
+          {saveStatus === 'error' && (
+            <span style={{ fontSize: '0.82rem', color: 'var(--danger, #dc2626)' }}>Erreur</span>
+          )}
+          <button
+            className="btn btn-secondary"
+            onClick={() => handleLoadEnv()}
+            disabled={loadingEnv}
+            style={{ fontSize: '0.82rem' }}
+          >
+            {loadingEnv ? 'Chargement…' : 'Charger depuis .env'}
+          </button>
+        </div>
+      </div>
+      <p style={{ color: 'var(--text-muted)', marginBottom: 24 }}>
+        Configuration du serveur de messagerie sortant. Utilisée pour les alertes, rapports et réinitialisation de mot de passe.
+      </p>
+
+      {result && (
+        <div
+          className={result.ok ? 'alert-success' : 'alert-error'}
+          style={{
+            padding: '10px 14px',
+            borderRadius: 6,
+            marginBottom: 16,
+            background: result.ok ? 'var(--success-bg, #ecfdf5)' : 'var(--danger-bg, #fef2f2)',
+            color: result.ok ? 'var(--success, #15803d)' : 'var(--danger, #dc2626)',
+            border: `1px solid ${result.ok ? 'var(--success, #86efac)' : 'var(--danger, #fca5a5)'}`,
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <span>{result.msg}</span>
+          <button onClick={() => setResult(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', fontSize: 16 }}>×</button>
+        </div>
+      )}
+
+      <div className="card" style={{ padding: '0 24px' }}>
+
+        {/* Nom de la plateforme */}
+        <SettingRow label="Nom de la plateforme" description="Affiché dans l'en-tête et le pied de page des emails envoyés.">
+          <input
+            className="form-input"
+            type="text"
+            value={form.appName}
+            onChange={e => set('appName', e.target.value)}
+            placeholder="Crowdlending"
+            style={{ width: 280 }}
+          />
+        </SettingRow>
+
+        {/* URL de la plateforme */}
+        <SettingRow label="URL de la plateforme" description="Utilisée pour le bouton de redirection dans les emails. Inclure le protocole (https://).">
+          <input
+            className="form-input"
+            type="url"
+            value={form.appUrl}
+            onChange={e => set('appUrl', e.target.value)}
+            placeholder="https://monapp.example.com"
+            style={{ width: 280 }}
+          />
+        </SettingRow>
+
+        {/* Séparateur */}
+        <div style={{ borderBottom: '1px solid var(--border)', margin: '4px 0' }} />
+
+        {/* Activer */}
+        <SettingRow
+          label="Activer"
+          description="Active SMTP. Activez ceci uniquement si vous avez saisi l'hôte, le port, le courriel, l'utilisateur et son mot de passe."
+        >
+          <Toggle id="smtp-enabled" checked={form.enabled} onChange={v => set('enabled', v)} />
+        </SettingRow>
+
+        {/* Hôte */}
+        <SettingRow label="Hôte" description="Nom du serveur SMTP">
+          <input
+            className="form-input"
+            type="text"
+            value={form.host}
+            onChange={e => set('host', e.target.value)}
+            placeholder="smtp.example.com"
+            style={{ width: 280 }}
+          />
+        </SettingRow>
+
+        {/* Port */}
+        <SettingRow label="Port" description="Port du serveur SMTP">
+          <input
+            className="form-input"
+            type="number"
+            value={form.port}
+            onChange={e => set('port', parseInt(e.target.value, 10) || 587)}
+            min={1}
+            max={65535}
+            style={{ width: 120 }}
+          />
+        </SettingRow>
+
+        {/* Connexion sécurisée (TLS) */}
+        <SettingRow label="Connexion sécurisée (TLS)" description="Utiliser TLS dès la connexion (port 465). Désactivez pour STARTTLS (port 587).">
+          <Toggle id="smtp-secure" checked={form.secure} onChange={v => set('secure', v)} />
+        </SettingRow>
+
+        {/* Courriel */}
+        <SettingRow label="Courriel" description="Adresse email à partir de laquelle les courriels sont envoyés">
+          <input
+            className="form-input"
+            type="email"
+            value={form.email}
+            onChange={e => set('email', e.target.value)}
+            placeholder="no-reply@example.com"
+            style={{ width: 280 }}
+          />
+        </SettingRow>
+
+        {/* Nom d'utilisateur */}
+        <SettingRow label="Nom d'utilisateur" description="Nom d'utilisateur du serveur SMTP">
+          <input
+            className="form-input"
+            type="text"
+            value={form.username}
+            onChange={e => set('username', e.target.value)}
+            placeholder="user@example.com"
+            autoComplete="off"
+            style={{ width: 280 }}
+          />
+        </SettingRow>
+
+        {/* Mot de passe */}
+        <SettingRow
+          label="Mot de passe"
+          description={hasPassword && !form.password ? 'Un mot de passe est déjà enregistré. Laissez vide pour le conserver.' : 'Mot de passe du serveur SMTP'}
+        >
+          <div style={{ position: 'relative', width: 280 }}>
+            <input
+              className="form-input"
+              type={showPassword ? 'text' : 'password'}
+              value={form.password}
+              onChange={e => { passwordTyped.current = true; set('password', e.target.value); }}
+              placeholder={hasPassword ? '••••••••' : 'Mot de passe'}
+              autoComplete="new-password"
+              style={{ width: '100%', paddingRight: 36 }}
+            />
+            <button
+              type="button"
+              onClick={() => setShowPassword(s => !s)}
+              style={{
+                position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)',
+                background: 'none', border: 'none', cursor: 'pointer',
+                color: 'var(--text-muted)', padding: 0, display: 'flex',
+              }}
+              tabIndex={-1}
+            >
+              <IconEye open={showPassword} />
+            </button>
+          </div>
+        </SettingRow>
+
+        {/* Certificats non autorisés */}
+        <SettingRow
+          label="Faire confiance aux certificats de serveurs SMTP non autorisés"
+          description="Ne permettez ceci que si vous avez besoin de faire confiance aux certificats autosignés."
+        >
+          <Toggle id="smtp-allowUnauth" checked={form.allowUnauth} onChange={v => set('allowUnauth', v)} />
+        </SettingRow>
+
+      </div>
+
+
+      {/* Section email de test */}
+      <div className="card" style={{ marginTop: 24, padding: '20px 24px' }}>
+        <h3 style={{ margin: '0 0 12px' }}>Envoyer un email de test</h3>
+        <p style={{ color: 'var(--text-muted)', marginBottom: 16, fontSize: '0.9rem' }}>
+          Vérifiez que votre configuration SMTP fonctionne en envoyant un email de test. Sauvegardez d'abord vos paramètres.
+        </p>
+        {testResult && (
+          <div style={{
+            padding: '10px 14px',
+            borderRadius: 6,
+            marginBottom: 14,
+            background: testResult.ok ? 'var(--success-bg, #ecfdf5)' : 'var(--danger-bg, #fef2f2)',
+            color: testResult.ok ? 'var(--success, #15803d)' : 'var(--danger, #dc2626)',
+            border: `1px solid ${testResult.ok ? 'var(--success, #86efac)' : 'var(--danger, #fca5a5)'}`,
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}>
+            <span>{testResult.msg}</span>
+            <button onClick={() => setTestResult(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', fontSize: 16 }}>×</button>
+          </div>
+        )}
+        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+          <input
+            className="form-input"
+            type="email"
+            value={testEmail}
+            onChange={e => setTestEmail(e.target.value)}
+            placeholder="destinataire@example.com"
+            style={{ flex: 1, maxWidth: 320 }}
+            onKeyDown={e => e.key === 'Enter' && handleTest()}
+          />
+          <button
+            className="btn btn-secondary"
+            onClick={() => handleTest()}
+            disabled={testing || !testEmail}
+          >
+            {testing ? 'Envoi…' : 'Envoyer un courriel de test'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}