110 lines
6.0 KiB
PHP
110 lines
6.0 KiB
PHP
@props([
|
||
// Die fertige Befehlszeile, sobald der Host angelegt ist — sonst null.
|
||
'command' => null,
|
||
'archiveUrl' => '',
|
||
'hostUuid' => null,
|
||
])
|
||
|
||
{{-- Die Anleitung für eine Host-Übernahme, an EINER Stelle geschrieben.
|
||
|
||
Sie steht bewusst dort, wo jemand sie braucht, bevor er anfängt: die
|
||
Schritte 1 und 2 passieren beim Anbieter, und wer sie erst nach dem Anlegen
|
||
liest, hat den Einmal-Code schon in der Zwischenablage und dessen Frist
|
||
schon laufen. Die erste Fassung dieser Seite zeigte die Anleitung erst
|
||
hinterher — das war genau dieser Fehler.
|
||
|
||
Deshalb sind IMMER alle sechs Schritte zu sehen, auch die erledigten und
|
||
die kommenden. Eine Anleitung, die nur den aktuellen Schritt zeigt,
|
||
beantwortet die Frage „wie lange dauert das noch" nicht. --}}
|
||
|
||
@php
|
||
$done = $command !== null;
|
||
// Schritt 3 ist das Formular auf dieser Seite; ist die Zeile da, sind 1–3
|
||
// vorbei und 4 ist dran.
|
||
$current = $done ? 4 : 3;
|
||
|
||
$steps = [
|
||
1 => ['title' => __('hosts.takeover.s1_title'), 'body' => __('hosts.takeover.s1_body')],
|
||
2 => ['title' => __('hosts.takeover.s2_title'), 'body' => __('hosts.takeover.s2_body')],
|
||
3 => ['title' => __('hosts.takeover.s3_title'), 'body' => __('hosts.takeover.s3_body')],
|
||
4 => ['title' => __('hosts.takeover.s4_title'), 'body' => __('hosts.takeover.s4_body')],
|
||
5 => ['title' => __('hosts.takeover.s5_title'), 'body' => __('hosts.takeover.s5_body')],
|
||
6 => ['title' => __('hosts.takeover.s6_title'), 'body' => __('hosts.takeover.s6_body')],
|
||
];
|
||
@endphp
|
||
|
||
<div {{ $attributes->merge(['class' => 'rounded-lg border border-line bg-surface shadow-xs']) }}>
|
||
<div class="border-b border-line px-6 py-4">
|
||
<h2 class="text-sm font-semibold text-ink">{{ __('hosts.takeover.how_title') }}</h2>
|
||
<p class="mt-1 text-sm text-muted">{{ __('hosts.takeover.how_sub') }}</p>
|
||
</div>
|
||
|
||
<ol class="divide-y divide-line">
|
||
@foreach ($steps as $number => $step)
|
||
@php
|
||
$isCurrent = $number === $current;
|
||
$isPast = $number < $current;
|
||
@endphp
|
||
<li class="flex gap-3 px-6 py-4 {{ $isCurrent ? 'bg-info-bg' : '' }}">
|
||
{{-- Die Nummer trägt den Zustand, nicht ein Icon daneben: eine
|
||
Ziffer, die man mit dem Blick abzählen kann, ist an dieser
|
||
Stelle mehr wert als ein Häkchen. --}}
|
||
<span class="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border text-xs font-bold
|
||
{{ $isPast ? 'border-success-border bg-success-bg text-success' : ($isCurrent ? 'border-info-border bg-surface text-info' : 'border-line text-muted') }}">
|
||
{{ $number }}
|
||
</span>
|
||
|
||
<div class="min-w-0 flex-1">
|
||
<div class="flex flex-wrap items-center gap-2">
|
||
<h3 class="text-sm font-semibold {{ $isCurrent ? 'text-ink' : 'text-body' }}">{{ $step['title'] }}</h3>
|
||
@if ($number <= 2 && ! $done)
|
||
<x-ui.badge status="warning">{{ __('hosts.takeover.badge_before') }}</x-ui.badge>
|
||
@elseif ($isCurrent)
|
||
<x-ui.badge status="info">{{ __('hosts.takeover.badge_now') }}</x-ui.badge>
|
||
@endif
|
||
</div>
|
||
<p class="mt-1 text-sm text-muted">{{ $step['body'] }}</p>
|
||
|
||
@if ($number === 4 && $done)
|
||
<div x-data="{ copied: false }" class="mt-3">
|
||
<div class="relative">
|
||
{{-- Umbrechen statt waagerecht rollen: aus einem
|
||
Kasten mit Rollbalken markiert jemand die
|
||
Hälfte und merkt es erst auf der Maschine. --}}
|
||
<pre class="max-h-56 overflow-y-auto rounded border border-line bg-canvas p-3 pr-24 font-mono text-xs leading-relaxed text-ink break-all whitespace-pre-wrap"
|
||
x-ref="command">{{ $command }}</pre>
|
||
<button type="button"
|
||
class="absolute right-2 top-2 inline-flex items-center gap-1 rounded border border-line bg-surface px-2 py-1 text-xs font-medium text-body hover:text-ink"
|
||
x-on:click="navigator.clipboard.writeText($refs.command.textContent); copied = true; setTimeout(() => copied = false, 2000)">
|
||
<x-ui.icon name="copy" class="size-4" x-show="!copied" />
|
||
<x-ui.icon name="check" class="size-4" x-show="copied" x-cloak />
|
||
<span x-text="copied ? @js(__('hosts.takeover.copied')) : @js(__('hosts.takeover.copy'))">{{ __('hosts.takeover.copy') }}</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
@if ($number === 5)
|
||
<p class="mt-2 text-xs text-muted">{{ __('hosts.takeover.s5_hint', ['url' => $archiveUrl]) }}</p>
|
||
@endif
|
||
|
||
@if ($number === 6 && $hostUuid)
|
||
<div class="mt-3">
|
||
<a href="{{ route('admin.hosts.show', ['host' => $hostUuid]) }}" wire:navigate>
|
||
<x-ui.button variant="primary" size="sm">
|
||
<x-slot:icon><x-ui.icon name="activity" class="size-4" /></x-slot:icon>
|
||
{{ __('hosts.takeover.watch') }}
|
||
</x-ui.button>
|
||
</a>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</li>
|
||
@endforeach
|
||
</ol>
|
||
|
||
<div class="border-t border-line px-6 py-3">
|
||
<p class="text-xs text-muted">{{ __('hosts.takeover.footnote') }}</p>
|
||
</div>
|
||
</div>
|