termanager2/resources/views/livewire/settings/users-index.blade.php

<div class="space-y-6">
    <div>
        <h1 class="text-2xl font-bold text-gray-900">Utenti</h1>
        <p class="text-sm text-gray-500 mt-1">
            Crea utenti e assegna un ruolo applicativo. Ogni nuovo utente riceve un'email per confermare il suo
            indirizzo: finché non lo conferma, l'account non funziona.
            <a href="{{ route('posta.edit') }}" class="text-indigo-700 underline">Server di posta</a>
        </p>
    </div>


    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">Nuovo utente</h2>

        <form wire:submit="createUser" class="space-y-5">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700">Nome *</label>
                    <input wire:model="name" id="name" type="text" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                    @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700">Email *</label>
                    <input wire:model="email" id="email" type="email" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                    @error('email') <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" id="password" type="password" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                    @error('password') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label for="password_confirmation" class="block text-sm font-medium text-gray-700">Conferma Password *</label>
                    <input wire:model="password_confirmation" id="password_confirmation" type="password" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                </div>
            </div>

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

            <div>
                <x-btn variante="primary" type="submit">Crea utente</x-btn>
            </div>
        </form>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-4">Utenti esistenti</h2>

        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 text-sm table-cards">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-2 text-left font-medium text-gray-600">Nome</th>
                        <th class="px-4 py-2 text-left font-medium text-gray-600">Email</th>
                        <th class="px-4 py-2 text-left font-medium text-gray-600">Ruoli</th>
                        <th class="px-4 py-2 text-left font-medium text-gray-600">Azioni</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($users as $user)
                        <tr>
                            @if($editingUserId === $user->id)
                                <td class="px-4 py-2 align-top" colspan="4">
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                        <div>
                                            <label class="block text-xs font-medium text-gray-600">Nome</label>
                                            <input wire:model="editName" type="text" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                                            @error('editName') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                                        </div>
                                        <div>
                                            <label class="block text-xs font-medium text-gray-600">Email</label>
                                            <input wire:model="editEmail" type="email" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                                            @error('editEmail') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                                        </div>
                                        <div>
                                            <label class="block text-xs font-medium text-gray-600">Nuova password (opzionale)</label>
                                            <input wire:model="editPassword" type="password" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                                            @error('editPassword') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                                        </div>
                                        <div>
                                            <label class="block text-xs font-medium text-gray-600">Conferma password</label>
                                            <input wire:model="editPassword_confirmation" type="password" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                                        </div>
                                        <div>
                                            <label class="block text-xs font-medium text-gray-600">Ruolo</label>
                                            <select wire:model="editSelectedRole" class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                                                @foreach($availableRoles as $role)
                                                    <option value="{{ $role }}">{{ ucfirst($role) }}</option>
                                                @endforeach
                                            </select>
                                            @error('editSelectedRole') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                                        </div>
                                    </div>

                                    <div class="mt-3 flex gap-2">
                                        <x-btn variante="primary" dimensione="sm" wire:click="updateUser">Salva</x-btn>
                                        <x-btn variante="ghost" dimensione="sm" wire:click="cancelEdit">Annulla</x-btn>
                                    </div>
                                </td>
                            @else
                                <td data-label="Nome" class="px-4 py-2 text-gray-900">{{ $user->name }}</td>
                                <td data-label="Email" class="px-4 py-2 text-gray-700">
                                    {{ $user->email }}
                                    @if($user->hasVerifiedEmail())
                                        <span class="ml-1 inline-flex items-center rounded-full bg-green-50 px-2 py-0.5 text-xs font-medium text-green-700">confermata</span>
                                    @else
                                        <span class="ml-1 inline-flex items-center rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-800"
                                              title="L'account non funziona finché la persona non apre il link nell'email">da confermare</span>
                                    @endif
                                </td>
                                <td data-label="Ruoli" class="px-4 py-2">
                                    <div class="flex flex-wrap gap-1">
                                        @forelse($user->roles as $role)
                                            <span class="inline-flex items-center rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-medium text-indigo-700">{{ $role->name }}</span>
                                        @empty
                                            <span class="text-xs text-gray-400">-</span>
                                        @endforelse
                                    </div>
                                </td>
                                <td class="px-4 py-2 cell-actions">
                                    <div class="flex gap-2">
                                        <x-btn variante="secondary" tono="tenue" dimensione="sm" wire:click="startEdit({{ $user->id }})">Modifica</x-btn>
                                        @unless($user->hasVerifiedEmail())
                                            <x-btn variante="secondary" tono="tenue" dimensione="sm" wire:click="reinviaConferma({{ $user->id }})"
                                                   wire:loading.attr="disabled" wire:target="reinviaConferma({{ $user->id }})">
                                                Reinvia conferma
                                            </x-btn>
                                        @endunless
                                        {{-- wire:confirm come nel resto dell'app, al posto di un onclick
                                             che fermava la propagazione a mano. --}}
                                        <x-btn variante="danger" tono="tenue" dimensione="sm"
                                               wire:click="deleteUser({{ $user->id }})"
                                               wire:confirm="Confermi la cancellazione dell'utente? I log verranno preservati.">
                                            Elimina
                                        </x-btn>
                                    </div>
                                </td>
                            @endif
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="px-4 py-6 text-center text-gray-400">Nessun utente trovato</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>