termanager2/resources/views/livewire/settings/posta-elettronica.blade.php

<div>
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900">Server di posta</h1>
        <p class="text-sm text-gray-500 mt-1 max-w-2xl">
            Da qui partono le email per confermare l'indirizzo degli utenti: finché non lo confermano, il loro
            account non funziona. Serve un account di posta che permetta l'invio via SMTP.
        </p>
    </div>

    @if($nonConfermato)
        <div class="mb-6 max-w-2xl rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-800">
            Il tuo indirizzo non è ancora confermato: il resto dell'applicazione è bloccato finché non lo fai.
            Configura qui la posta, poi <a href="{{ route('verification.notice') }}" class="font-semibold underline">richiedi l'email di conferma</a>.
        </div>
    @endif

    <div class="mb-6 max-w-2xl rounded-lg border px-4 py-3 text-sm
        {{ $funzionante ? 'border-green-200 bg-green-50 text-green-800' : 'border-red-200 bg-red-50 text-red-800' }}">
        @if($configurataNellApp)
            In uso il server configurato qui sotto.
        @elseif($funzionante)
            In uso il server indicato nelle impostazioni del server (.env). Compilando questa pagina lo sostituisci.
        @else
            <strong>Nessun server di posta:</strong> le email non partono e nessun utente può confermare il proprio indirizzo.
        @endif
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 max-w-2xl">
        <form wire:submit="salva" class="space-y-5">
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div class="sm:col-span-2">
                    <label for="host" class="block text-sm font-medium text-gray-700">Server SMTP *</label>
                    <input wire:model="host" type="text" id="host" placeholder="smtp.gmail.com" autocomplete="off"
                           class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                    @error('host') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label for="porta" class="block text-sm font-medium text-gray-700">Porta</label>
                    <input wire:model="porta" type="number" id="porta" min="1" max="65535" placeholder="587"
                           class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                    @error('porta') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>

            <div>
                <label for="cifratura" class="block text-sm font-medium text-gray-700">Cifratura</label>
                <select wire:model="cifratura" id="cifratura"
                        class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                    @foreach($cifrature as $valore => $etichetta)
                        <option value="{{ $valore }}">{{ $etichetta }}</option>
                    @endforeach
                </select>
                @error('cifratura') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label for="utente" class="block text-sm font-medium text-gray-700">Utente</label>
                    <input wire:model="utente" type="text" id="utente" autocomplete="off"
                           class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                    @error('utente') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
                    <input wire:model="password" type="password" id="password" autocomplete="new-password"
                           placeholder="{{ $passwordSalvata ? 'Salvata — lascia vuoto per non cambiarla' : '' }}"
                           class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                    <p class="text-xs text-gray-500 mt-1">Conservata cifrata. Con Gmail serve una "password per le app".</p>
                    @error('password') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label for="mittente" class="block text-sm font-medium text-gray-700">Indirizzo del mittente *</label>
                    <input wire:model="mittente" type="email" id="mittente" placeholder="territori@esempio.it"
                           class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                    @error('mittente') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label for="nomeMittente" class="block text-sm font-medium text-gray-700">Nome del mittente</label>
                    <input wire:model="nomeMittente" type="text" id="nomeMittente" placeholder="Il nome della congregazione"
                           class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                    @error('nomeMittente') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="flex flex-wrap items-center gap-2 pt-2 border-t border-gray-100">
                <x-btn variante="primary" type="submit" wire:loading.attr="disabled" wire:target="salva">Salva</x-btn>
                <x-btn variante="secondary" wire:click="inviaProva" wire:loading.attr="disabled" wire:target="inviaProva"
                       :disabled="! $configurataNellApp">
                    <span wire:loading.remove wire:target="inviaProva">Invia email di prova</span>
                    <span wire:loading wire:target="inviaProva">Invio…</span>
                </x-btn>
                @if($configurataNellApp)
                    <x-btn variante="ghost" wire:click="rimuovi"
                           wire:confirm="Rimuovere il server configurato qui? Varranno di nuovo le impostazioni del server (.env).">
                        Rimuovi
                    </x-btn>
                @endif
            </div>
            <p class="text-xs text-gray-500">L'email di prova arriva al tuo indirizzo, {{ auth()->user()->email }}.</p>
        </form>
    </div>
</div>