Configuration SMTP et 2FA par code PIN e-mail
Paramètres du site : - Nouvelle section "Serveur SMTP" avec host, port, chiffrement, identifiant, mot de passe, adresse/nom d'expéditeur - Bouton "Envoyer un e-mail de test" (AJAX via Symfony EsmtpTransport) : tente la connexion + envoie un message réel à l'admin - Badge "Configuré — 2FA actif" quand SMTP est en place - Suppression de la configuration possible Authentification 2FA : - Si SMTP configuré : après validation identifiant/mot de passe, l'utilisateur est déconnecté, un PIN à 6 chiffres est généré, haché (bcrypt) et stocké en session, envoyé par e-mail (10 min) - Page /2fa : saisie du PIN, bouton "Renvoyer le code", retour login - Si l'envoi e-mail échoue : fallback sans 2FA (logue l'erreur) - Si SMTP non configuré : login standard inchangé Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -48,6 +48,168 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{-- SMTP --}}
|
||||
@php $smtp = \App\Services\SiteSettingsService::smtpConfig(); @endphp
|
||||
<div class="bg-white shadow rounded-lg p-6 space-y-5"
|
||||
x-data="{
|
||||
host: '{{ $smtp['host'] ?? '' }}',
|
||||
port: '{{ $smtp['port'] ?? 587 }}',
|
||||
encryption: '{{ $smtp['encryption'] ?? 'tls' }}',
|
||||
username: '{{ $smtp['username'] ?? '' }}',
|
||||
password: '{{ $smtp['password'] ?? '' }}',
|
||||
fromAddress: '{{ $smtp['from_address'] ?? '' }}',
|
||||
fromName: '{{ $smtp['from_name'] ?? $siteName }}',
|
||||
testing: false,
|
||||
tested: false,
|
||||
testOk: false,
|
||||
testMsg: '',
|
||||
|
||||
async testSmtp() {
|
||||
this.testing = true;
|
||||
this.tested = false;
|
||||
try {
|
||||
const resp = await fetch('{{ route('admin.parametres.smtp.test') }}', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
smtp_host: this.host,
|
||||
smtp_port: parseInt(this.port),
|
||||
smtp_encryption: this.encryption,
|
||||
smtp_username: this.username,
|
||||
smtp_password: this.password,
|
||||
smtp_from_address: this.fromAddress,
|
||||
smtp_from_name: this.fromName,
|
||||
}),
|
||||
});
|
||||
const data = await resp.json();
|
||||
this.testOk = data.ok;
|
||||
this.testMsg = data.message;
|
||||
} catch (e) {
|
||||
this.testOk = false;
|
||||
this.testMsg = 'Erreur réseau : ' + e.message;
|
||||
}
|
||||
this.testing = false;
|
||||
this.tested = true;
|
||||
}
|
||||
}">
|
||||
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Serveur SMTP</h3>
|
||||
<p class="text-xs text-gray-400 mt-0.5">
|
||||
Quand configuré, la connexion nécessitera un code PIN envoyé par e-mail (2FA).
|
||||
</p>
|
||||
</div>
|
||||
@if(\App\Services\SiteSettingsService::smtpConfigured())
|
||||
<span class="inline-flex items-center gap-1.5 text-xs text-green-700 bg-green-50 border border-green-200 px-2.5 py-1 rounded-full">
|
||||
<svg class="w-3 h-3 fill-current" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Configuré — 2FA actif
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ route('admin.parametres.smtp.update') }}" class="space-y-4">
|
||||
@csrf
|
||||
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div class="col-span-2">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Hôte SMTP</label>
|
||||
<input type="text" name="smtp_host" x-model="host"
|
||||
placeholder="smtp.exemple.fr"
|
||||
class="w-full rounded-md border-gray-300 shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500">
|
||||
@error('smtp_host') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Port</label>
|
||||
<input type="number" name="smtp_port" x-model="port"
|
||||
class="w-full rounded-md border-gray-300 shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500">
|
||||
@error('smtp_port') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Chiffrement</label>
|
||||
<select name="smtp_encryption" x-model="encryption"
|
||||
class="w-full rounded-md border-gray-300 shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500">
|
||||
<option value="tls">TLS / STARTTLS (port 587 recommandé)</option>
|
||||
<option value="ssl">SSL (port 465)</option>
|
||||
<option value="">Aucun (déconseillé)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Identifiant</label>
|
||||
<input type="text" name="smtp_username" x-model="username"
|
||||
autocomplete="off"
|
||||
class="w-full rounded-md border-gray-300 shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label>
|
||||
<input type="password" name="smtp_password" x-model="password"
|
||||
autocomplete="new-password"
|
||||
class="w-full rounded-md border-gray-300 shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500"
|
||||
placeholder="{{ \App\Services\SiteSettingsService::smtpConfigured() ? '(inchangé si vide)' : '' }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 pt-2 border-t border-gray-100">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Adresse d'expéditeur</label>
|
||||
<input type="email" name="smtp_from_address" x-model="fromAddress"
|
||||
placeholder="noreply@exemple.fr"
|
||||
class="w-full rounded-md border-gray-300 shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500">
|
||||
@error('smtp_from_address') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Nom d'expéditeur</label>
|
||||
<input type="text" name="smtp_from_name" x-model="fromName"
|
||||
class="w-full rounded-md border-gray-300 shadow-sm text-sm focus:border-indigo-500 focus:ring-indigo-500">
|
||||
@error('smtp_from_name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Résultat test --}}
|
||||
<div x-show="tested" x-cloak class="p-3 rounded-lg text-sm flex items-start gap-2"
|
||||
:class="testOk ? 'bg-green-50 border border-green-200 text-green-800' : 'bg-red-50 border border-red-200 text-red-800'">
|
||||
<span x-text="testOk ? '✓' : '✗'" class="font-bold shrink-0"></span>
|
||||
<span x-text="testMsg" class="break-all"></span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3 flex-wrap">
|
||||
<button type="button" @click="testSmtp()" :disabled="testing"
|
||||
class="flex items-center gap-1.5 px-4 py-2 border border-slate-300 bg-slate-50 text-slate-700
|
||||
text-sm font-medium rounded-md hover:bg-slate-100 transition disabled:opacity-50">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<span x-text="testing ? 'Envoi en cours…' : 'Envoyer un e-mail de test'"></span>
|
||||
</button>
|
||||
|
||||
<button type="submit"
|
||||
class="px-5 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700">
|
||||
Enregistrer
|
||||
</button>
|
||||
|
||||
@if(\App\Services\SiteSettingsService::smtpConfigured())
|
||||
<form method="POST" action="{{ route('admin.parametres.smtp.delete') }}" class="ml-auto"
|
||||
x-data @submit.prevent="if(confirm('Supprimer la configuration SMTP et désactiver le 2FA ?')) $el.submit()">
|
||||
@csrf @method('DELETE')
|
||||
<button type="submit" class="text-sm text-red-500 hover:text-red-700">
|
||||
Supprimer la configuration
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{-- Version --}}
|
||||
<div class="bg-white shadow rounded-lg p-6 space-y-4">
|
||||
<h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Version du logiciel</h3>
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
<x-guest-layout>
|
||||
<div class="mb-6 text-center">
|
||||
<div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-indigo-100 mb-3">
|
||||
<svg class="w-7 h-7 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-lg font-semibold text-gray-900">Vérification en deux étapes</h2>
|
||||
<p class="text-sm text-gray-500 mt-1">
|
||||
Un code à 6 chiffres a été envoyé à<br>
|
||||
<span class="font-medium text-gray-700">{{ $maskedEmail }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@if(session('resent'))
|
||||
<div class="mb-4 p-3 bg-green-50 border border-green-200 text-green-800 text-sm rounded-md text-center">
|
||||
Un nouveau code a été envoyé.
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form method="POST" action="{{ route('2fa.verify') }}">
|
||||
@csrf
|
||||
|
||||
<div class="mb-5">
|
||||
<x-input-label for="pin" value="Code PIN"/>
|
||||
<input type="text" id="pin" name="pin"
|
||||
inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code"
|
||||
autofocus required
|
||||
class="mt-1 block w-full text-center text-3xl tracking-[.5em] font-mono
|
||||
border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
placeholder="——————">
|
||||
<x-input-error :messages="$errors->get('pin')" class="mt-2"/>
|
||||
</div>
|
||||
|
||||
<x-primary-button class="w-full justify-center py-3">
|
||||
Valider le code
|
||||
</x-primary-button>
|
||||
</form>
|
||||
|
||||
<div class="mt-5 flex flex-col items-center gap-2">
|
||||
<form method="POST" action="{{ route('2fa.resend') }}">
|
||||
@csrf
|
||||
<button type="submit" class="text-sm text-indigo-600 hover:underline">
|
||||
Renvoyer le code
|
||||
</button>
|
||||
</form>
|
||||
<a href="{{ route('login') }}" class="text-sm text-gray-400 hover:text-gray-600">
|
||||
← Retour à la connexion
|
||||
</a>
|
||||
</div>
|
||||
</x-guest-layout>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Code de connexion</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; background: #f4f4f4; margin: 0; padding: 0; }
|
||||
.wrapper { max-width: 480px; margin: 40px auto; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
|
||||
.header { background: #4f46e5; padding: 28px 32px; text-align: center; }
|
||||
.header h1 { color: #fff; margin: 0; font-size: 20px; font-weight: 600; }
|
||||
.body { padding: 32px; }
|
||||
.body p { color: #374151; font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
|
||||
.pin-box { text-align: center; margin: 28px 0; }
|
||||
.pin { display: inline-block; font-size: 40px; font-weight: 700; letter-spacing: 10px; color: #4f46e5;
|
||||
background: #eef2ff; border: 2px dashed #a5b4fc; border-radius: 8px;
|
||||
padding: 16px 32px; font-family: monospace; }
|
||||
.expiry { font-size: 13px; color: #9ca3af; text-align: center; margin-top: 8px; }
|
||||
.footer { background: #f9fafb; padding: 20px 32px; border-top: 1px solid #e5e7eb;
|
||||
font-size: 12px; color: #9ca3af; text-align: center; }
|
||||
.footer a { color: #6366f1; text-decoration: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="header">
|
||||
<h1>{{ config('app.name') }}</h1>
|
||||
</div>
|
||||
<div class="body">
|
||||
<p>Bonjour {{ $userName }},</p>
|
||||
<p>Voici votre code de connexion à usage unique :</p>
|
||||
|
||||
<div class="pin-box">
|
||||
<div class="pin">{{ $pin }}</div>
|
||||
<p class="expiry">Ce code expire dans 10 minutes.</p>
|
||||
</div>
|
||||
|
||||
<p>Si vous n'avez pas essayé de vous connecter, ignorez cet e-mail et votre compte restera sécurisé.</p>
|
||||
</div>
|
||||
<div class="footer">
|
||||
Cet e-mail a été envoyé automatiquement par <a href="{{ config('app.url') }}">{{ config('app.name') }}</a>.<br>
|
||||
Ne transmettez jamais ce code à quelqu'un d'autre.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user