CluPilotCloud/resources/views/livewire/users.blade.php

264 lines
19 KiB
PHP

<div class="space-y-6">
<div class="flex flex-wrap items-end justify-between gap-4 animate-rise">
<div>
<h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('users.title') }}</h1>
<p class="mt-1 text-sm text-muted">{{ __('users.subtitle') }}</p>
</div>
<div class="text-right">
<p class="font-mono text-lg font-semibold text-ink">{{ $used }} / {{ $limit }}</p>
<p class="text-xs text-muted">{{ __('users.seats_used') }}</p>
<p class="text-xs text-muted">{{ __('users.seats_note') }}</p>
</div>
</div>
{{-- Anlegen. Ausdrücklich NICHT einladen: hier entsteht nur die Zeile,
die Einladung verschickt der Knopf in der Tabelle. Ein Inhaber soll
sein Team vorbereiten können, ohne dass jemand eine Mail bekommt. --}}
{{-- Eine Zeile aus Feldern, und alles, was darunter wachsen kann, wächst
AUSSERHALB davon.
Vorher stand hier `sm:items-end`: Der Fehler unter der E-Mail und der
Hinweis unter der Rolle machten ihre Zelle höher, und weil unten
ausgerichtet wurde, schob das ihre Eingabefelder nach OBEN. Drei
Felder auf drei verschiedenen Höhen, und je nachdem, ob gerade ein
Fehler stand, sprang die Zeile.
`items-start` und gleich hohe Beschriftungen richten die Felder
aneinander aus. Fehler und Hinweis stehen unter der Zeile, wo sie
niemanden mehr verschieben. --}}
<form wire:submit="addSeat" class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:60ms]">
<div class="grid grid-cols-1 gap-3 sm:grid-cols-[1fr_1fr_auto_auto] sm:items-start">
<div>
<label class="block text-sm font-medium text-body" for="inviteEmail">{{ __('users.invite_email') }}</label>
<input id="inviteEmail" type="email" wire:model="inviteEmail"
@error('inviteEmail') aria-invalid="true" @enderror
class="mt-1.5 w-full rounded-md border bg-surface px-3 py-2 text-sm text-ink @error('inviteEmail') border-danger @else border-line-strong @enderror" />
</div>
<div>
<label class="block text-sm font-medium text-body" for="inviteName">{{ __('users.invite_name') }}</label>
<input id="inviteName" type="text" wire:model="inviteName" class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-ink" />
</div>
<div>
<label class="block text-sm font-medium text-body" for="inviteRole">{{ __('users.role') }}</label>
<select id="inviteRole" wire:model.live="inviteRole" class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-body sm:w-auto">
<option value="admin">{{ __('users.role_admin') }}</option>
<option value="member">{{ __('users.role_member') }}</option>
<option value="readonly">{{ __('users.role_readonly') }}</option>
</select>
</div>
{{-- Ein leerer Platzhalter in Beschriftungshöhe, damit der Knopf auf
der Linie der Felder sitzt und nicht über einen abgezählten
Abstand, der bei der nächsten Schriftgröße nicht mehr stimmt. --}}
<div>
<span class="block text-sm font-medium" aria-hidden="true">&nbsp;</span>
<x-ui.button variant="primary" type="submit" class="mt-1.5 w-full sm:w-auto" wire:loading.attr="disabled" wire:target="addSeat">
<x-ui.icon name="plus" class="size-4" />{{ __('users.add') }}
</x-ui.button>
</div>
</div>
@error('inviteEmail')<p class="mt-2 text-xs text-danger">{{ $message }}</p>@enderror
{{-- Nur zur Rolle, die wirklich gewählt ist. Der Satz stand vorher
immer da und beschrieb „Nur Lesen", während „Mitglied" ausgewählt
war eine Erklärung zu etwas, das gar nicht passiert. --}}
@if ($inviteRole === 'readonly')
<p class="mt-2 text-xs text-muted">{{ __('users.role_readonly_means') }}</p>
@endif
</form>
{{-- Der Mailversand fehlt: gesagt, bevor jemand drückt.
Der Einladen-Knopf bleibt trotzdem stehen. Ihn an jeder Zeile
verschwinden zu lassen liest sich nicht als „geht hier gerade nicht",
sondern als „das kann dieses Produkt nicht" genau die Beschwerde,
die schon einmal dazu geführt hat, dass die Aktionsspalte IMMER
gezeichnet wird (siehe Users::render()). Und der Zustand ist
vorübergehend: er endet, sobald der Betrieb das Versandkonto
ausfüllt, ohne dass sich an dieser Seite etwas ändert.
Einmal über der Tabelle statt einmal je Zeile: der Grund ist für
alle derselbe, und an jeder Zeile stünde derselbe Satz noch einmal.
Der Server weist die Einladung mit derselben Begründung ab der
Knopf verspricht also nichts, was der Hinweis nicht schon
zurücknimmt. --}}
@unless ($versandBereit)
<x-ui.alert variant="warning" class="animate-rise [animation-delay:90ms]">{{ __('users.mail_not_ready') }}</x-ui.alert>
@endunless
{{-- Seats --}}
<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-xs animate-rise [animation-delay:120ms]">
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-line bg-surface-2 text-left text-xs font-semibold text-muted">
<th class="px-4 py-3 font-semibold">{{ __('users.col_person') }}</th>
<th class="px-4 py-3 font-semibold">{{ __('users.role') }}</th>
<th class="px-4 py-3 font-semibold">{{ __('users.col_status') }}</th>
<th class="px-4 py-3 text-right font-semibold">{{ __('users.col_actions') }}</th>
</tr>
</thead>
<tbody>
@foreach ($seats as $seat)
<tr wire:key="seat-{{ $seat->uuid }}" class="border-b border-line last:border-0 hover:bg-surface-hover">
<td class="px-4 py-3">
<p class="font-medium text-ink">{{ $seat->name ?: $seat->email }}</p>
@if ($seat->name)<p class="text-xs text-muted">{{ $seat->email }}</p>@endif
</td>
<td class="px-4 py-3">
@if ($seat->role === 'owner')
<span class="inline-flex items-center gap-1.5 rounded-pill bg-accent-subtle px-2.5 py-0.5 text-xs font-semibold text-accent-text">{{ __('users.role_owner') }}</span>
@else
<select wire:change="setRole('{{ $seat->uuid }}', $event.target.value)" class="rounded-md border border-line-strong bg-surface px-2 py-1 text-xs text-body">
@foreach (['admin', 'member', 'readonly'] as $r)
<option value="{{ $r }}" @selected($seat->role === $r)>{{ __('users.role_'.$r) }}</option>
@endforeach
</select>
@endif
</td>
{{-- Was der Inhaber WILL (`status`) und was in der
Nextcloud WIRKLICH ist (`nc_state`) stehen in
einer Zelle, und der wahre Zustand geht vor:
solange der Auftrag läuft oder gescheitert
ist, wäre „Eingeladen" eine Behauptung über
etwas, das die Warteschlange noch gar nicht
erledigt hat. Ohne diese Spalte drückt der
Inhaber wieder und wieder, weil nichts
sichtbar geschieht. --}}
<td class="px-4 py-3">
@if ($seat->status === 'revoked')
{{-- Entzogen geht dem Zustand vor: ein
„wird eingerichtet …" an einer
geschlossenen Zeile las sich wie ein
Weg zurück, den es an DIESER Zeile
nicht gibt. --}}
<x-ui.badge status="suspended">{{ __('users.status_revoked') }}</x-ui.badge>
<p class="mt-1 text-xs text-muted">{{ __('users.revoked_closed') }}</p>
@elseif ($seat->nc_state === \App\Models\Seat::STATE_NONE)
<x-ui.badge status="info">{{ __('users.state_none') }}</x-ui.badge>
@elseif ($seat->nc_state === \App\Models\Seat::STATE_PENDING)
<x-ui.badge status="info">{{ __('users.state_pending') }}</x-ui.badge>
@elseif ($seat->nc_state !== \App\Models\Seat::STATE_FAILED)
@php $sb = ['active' => 'active', 'invited' => 'provisioning'][$seat->status] ?? 'info'; @endphp
<x-ui.badge :status="$sb">{{ __('users.status_'.$seat->status) }}</x-ui.badge>
@endif
{{-- Der Fehlschlag steht NEBEN dem Entzogen,
nicht dahinter. Sonst verschwände genau
dort die Rückfahrkarte, wo sie am
nötigsten ist: scheitert das `disable`,
ist das Konto im Gast weiter offen,
während die Zeile „entzogen" sagt — kein
Wiederholungslauf (tries = 1), kein
Abgleich im Zeitplan, und diese Seite ist
die einzige Stelle im Repo, die nc_state
überhaupt anzeigt. --}}
@if ($seat->nc_state === \App\Models\Seat::STATE_FAILED)
<div @class(['mt-1' => $seat->status === 'revoked'])>
<x-ui.badge status="failed">{{ __('users.state_failed') }}</x-ui.badge>
{{-- Der Grund im Klartext, nicht der
Code: 'guest_failed' sagt einem
Inhaber nichts, und ein Fehlschlag
ohne Grund ist eine Sackgasse. --}}
<p class="mt-1 text-xs text-muted">{{ __('users.error_'.($seat->nc_error ?: 'unexpected')) }}</p>
@php
// Dieselbe Bedingung wie in retry(): ein Knopf, der
// nur wieder rot zurückkommt, ist schlimmer als
// keiner. Eine entzogene oder gesperrte Zeile, die
// nie in der Nextcloud ankam, hat dort nichts zu
// sperren — da gäbe es nichts zu wiederholen.
$wiederholbar = $seat->role !== 'owner'
&& ($seat->nc_synced_at !== null
|| ! in_array($seat->status, ['revoked', 'suspended'], true));
@endphp
@if ($wiederholbar)
<button type="button" wire:click="retry('{{ $seat->uuid }}')" class="mt-1 text-xs underline">
{{ __('users.retry') }}
</button>
@endif
</div>
@endif
</td>
<td class="px-4 py-3">
<div class="flex items-center justify-end gap-1.5">
@if ($seat->status === 'revoked')
{{-- Kein Knopf an der Zeile. Der Weg
zurück geht durch die Vordertür: das
Anlegen-Formular oben, mit derselben
Adresse — und damit durch die
Platzprüfung, die es an der Zeile
nicht gäbe. Gesagt statt leer
gelassen, wie bei der Inhaber-Zeile —
eine leere Zelle liesse jemanden nach
einem Knopf suchen, der absichtlich
fehlt. --}}
<span class="cursor-help text-xs text-muted" title="{{ __('users.revoked_closed') }}">{{ __('users.revoked_final') }}</span>
@else
{{-- Einladen ist der zweite Vorgang und
hat deshalb seinen eigenen Knopf. Er
steht nur an einer Zeile, die noch
nichts in der Nextcloud hat; ist der
Auftrag unterwegs, gibt es nichts zu
drücken, und bei einem Fehlschlag
steht „Nochmal versuchen" schon in der
Zustandsspalte. Nie an der
Inhaber-Zeile: dieses Konto legt die
Bereitstellung an, nicht das Panel. --}}
@if ($seat->role !== 'owner' && $seat->nc_state === \App\Models\Seat::STATE_NONE)
<button type="button" wire:click="sendInvite('{{ $seat->uuid }}')"
wire:loading.attr="disabled" wire:target="sendInvite"
class="rounded-md border border-line px-2.5 py-1.5 text-xs font-semibold text-muted hover:bg-surface-hover">{{ __('users.invite') }}</button>
@elseif ($seat->role !== 'owner' && $seat->nc_state === \App\Models\Seat::STATE_SYNCED && $seat->status === 'invited')
<button type="button" wire:click="sendInvite('{{ $seat->uuid }}')"
wire:loading.attr="disabled" wire:target="sendInvite"
class="rounded-md border border-line px-2.5 py-1.5 text-xs font-semibold text-muted hover:bg-surface-hover">{{ __('users.resend') }}</button>
@endif
{{-- Rename is offered on every row, the owner
included: a row you can do nothing to reads
as a broken table, not as a protected one.
It opens a modal, never the row itself
see R20. --}}
<button type="button"
x-on:click="$dispatch('openModal', { component: 'edit-seat', arguments: { uuid: '{{ $seat->uuid }}' } })"
aria-label="{{ __('users.edit') }}" title="{{ __('users.edit') }}"
class="grid size-9 place-items-center rounded-md border border-line text-muted hover:border-ink hover:text-ink">
<x-ui.icon name="pencil" class="size-4" />
</button>
@if ($seat->role === 'owner')
{{-- Said, not hidden. The owner keeps their
own access; an empty cell would leave
somebody hunting for a button that is
deliberately absent. --}}
<span class="cursor-help text-xs text-muted" title="{{ __('users.owner_no_actions') }}">{{ __('users.owner_protected') }}</span>
@else
{{-- Pause first, remove second. Somebody
leaving needs their access stopped
today; deleting the seat also throws
away who held it, which is the half
an audit asks about. --}}
<button type="button" wire:click="suspend('{{ $seat->uuid }}')"
aria-label="{{ $seat->status === 'suspended' ? __('users.reactivate') : __('users.suspend') }}"
title="{{ $seat->status === 'suspended' ? __('users.reactivate') : __('users.suspend') }}"
class="grid size-9 place-items-center rounded-md border border-line text-muted hover:border-warning hover:text-warning">
<x-ui.icon :name="$seat->status === 'suspended' ? 'unlock' : 'lock'" class="size-4" />
</button>
<button type="button"
x-on:click="$dispatch('openModal', { component: 'confirm-revoke-seat', arguments: { uuid: '{{ $seat->uuid }}' } })"
aria-label="{{ __('users.revoke') }}" title="{{ __('users.revoke') }}"
class="grid size-9 place-items-center rounded-md border border-line text-muted hover:border-danger hover:text-danger">
<x-ui.icon name="trash-2" class="size-4" />
</button>
@endif
@endif
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>