CABM-IT/resources/views/components/passwords/⚡index.blade.php

<?php

use App\Models\Organization;
use App\Models\Password;
use Livewire\Attributes\Url;
use Livewire\Component;
use Livewire\WithPagination;

new class extends Component
{
    use WithPagination;

    public Organization $organization;

    #[Url]
    public string $search = '';

    public array $revealed = [];

    public function reveal(int $passwordId): void
    {
        $password = $this->organization->passwords()->findOrFail($passwordId);

        $password->logAction('revealed');

        $this->revealed[$passwordId] = $password->password_ciphertext;
    }

    public function hide(int $passwordId): void
    {
        unset($this->revealed[$passwordId]);
    }

    public function copy(int $passwordId): void
    {
        $password = $this->organization->passwords()->findOrFail($passwordId);

        $password->logAction('copied');

        $this->dispatch('password-copy', value: $password->password_ciphertext);
    }

    public function delete(int $passwordId): void
    {
        $password = $this->organization->passwords()->findOrFail($passwordId);
        $password->logAction('deleted');
        $password->delete();

        unset($this->revealed[$passwordId]);

        session()->flash('status', "Mot de passe « {$password->name} » supprimé.");
    }

    public function with(): array
    {
        return [
            'passwords' => $this->organization->passwords()
                ->when($this->search, fn ($query) => $query->where(function ($q) {
                    $q->where('name', 'like', "%{$this->search}%")
                        ->orWhere('username', 'like', "%{$this->search}%")
                        ->orWhere('url', 'like', "%{$this->search}%");
                }))
                ->orderBy('name')
                ->paginate(15),
        ];
    }
};
?>

<div x-data x-on:password-copy.window="navigator.clipboard.writeText($event.detail.value)">
    <div class="mb-6 flex items-center justify-between">
        <div>
            <p class="text-sm text-slate-500">{{ $organization->name }}</p>
            <h1 class="text-2xl font-semibold text-slate-900">Mots de passe</h1>
        </div>
        <a href="{{ route('organizations.passwords.create', $organization) }}"
           class="rounded bg-slate-900 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">
            + Nouveau mot de passe
        </a>
    </div>

    <input type="text" wire:model.live.debounce.300ms="search" placeholder="Filtrer par nom, nom d'utilisateur, url..."
           class="mb-4 w-full max-w-sm rounded border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-500">

    <div class="overflow-x-auto rounded border border-slate-200 bg-white">
        <table class="min-w-full divide-y divide-slate-200 text-sm">
            <thead class="bg-slate-50 text-left text-xs uppercase tracking-wide text-slate-500">
                <tr>
                    <th class="px-4 py-3">Nom</th>
                    <th class="px-4 py-3">Nom d'utilisateur</th>
                    <th class="px-4 py-3">Mot de passe</th>
                    <th class="px-4 py-3">URL</th>
                    <th class="px-4 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse ($passwords as $password)
                    <tr wire:key="pw-{{ $password->id }}">
                        <td class="px-4 py-3">
                            <a href="{{ route('organizations.passwords.edit', [$organization, $password]) }}"
                               class="font-medium text-slate-900 hover:underline">
                                {{ $password->name }}
                            </a>
                        </td>
                        <td class="px-4 py-3 text-slate-600">{{ $password->username ?? '—' }}</td>
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-2 font-mono">
                                @if (isset($revealed[$password->id]))
                                    <span class="text-slate-900">{{ $revealed[$password->id] }}</span>
                                    <button type="button" wire:click="hide({{ $password->id }})"
                                            class="text-xs text-slate-400 hover:text-slate-700">masquer</button>
                                @else
                                    <span class="tracking-widest text-slate-400">••••••••</span>
                                    <button type="button" wire:click="reveal({{ $password->id }})"
                                            class="text-xs text-slate-500 hover:text-slate-900">afficher</button>
                                @endif
                                <button type="button" wire:click="copy({{ $password->id }})"
                                        class="text-xs text-slate-500 hover:text-slate-900">copier</button>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-slate-600">{{ $password->url ?? '—' }}</td>
                        <td class="px-4 py-3 text-right whitespace-nowrap">
                            <a href="{{ route('organizations.passwords.edit', [$organization, $password]) }}" class="text-slate-500 hover:text-slate-900">Modifier</a>
                            <button type="button"
                                    wire:click="delete({{ $password->id }})"
                                    wire:confirm="Supprimer ce mot de passe ? Cette action est irréversible."
                                    class="ml-3 text-red-500 hover:text-red-700">
                                Supprimer
                            </button>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-4 py-6 text-center text-slate-400">Aucun mot de passe pour le moment.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-4">
        {{ $passwords->links() }}
    </div>
</div>