48 lines
3.3 KiB
PHP
48 lines
3.3 KiB
PHP
<div>
|
|
@can('operate')
|
|
{{-- Terminal island (self-contained; Livewire never touches it after the first render) --}}
|
|
<div wire:ignore x-data="terminalView()" x-on:terminal-open.window="open($event.detail)"
|
|
class="flex min-h-[28rem] flex-col overflow-hidden rounded-xl border border-line bg-void shadow-panel">
|
|
{{-- Toolbar --}}
|
|
<div class="flex items-center gap-3 border-b border-line-soft bg-surface px-4 py-2.5">
|
|
<span class="flex gap-1.5">
|
|
<span class="h-2.5 w-2.5 rounded-full bg-offline/70"></span>
|
|
<span class="h-2.5 w-2.5 rounded-full bg-warning/70"></span>
|
|
<span class="h-2.5 w-2.5 rounded-full bg-online/70"></span>
|
|
</span>
|
|
{{-- Server name via a data-attr, NEVER interpolated into the Alpine expression: Blade
|
|
escaping does not protect an x-text JS sink (the browser entity-decodes before
|
|
Alpine evals), so a name like x'+alert(1)+' would execute. dataset = plain string. --}}
|
|
<span class="truncate font-mono text-[12px] text-ink-2" data-fallback="{{ $server->name }}" x-text="title || $el.dataset.fallback"></span>
|
|
<span class="ml-auto flex items-center gap-2 font-mono text-[10px] uppercase tracking-[0.14em]">
|
|
<span class="h-1.5 w-1.5 rounded-full"
|
|
:class="{ 'bg-ink-4': status==='idle', 'bg-warning': status==='connecting', 'bg-online': status==='connected', 'bg-offline': status==='error'||status==='closed' }"></span>
|
|
<span class="text-ink-3"
|
|
x-text="({idle:'{{ __('terminal.status_idle') }}',connecting:'{{ __('terminal.status_connecting') }}',connected:'{{ __('terminal.status_connected') }}',closed:'{{ __('terminal.status_closed') }}',error:'{{ __('terminal.status_error') }}'})[status]"></span>
|
|
</span>
|
|
<button type="button" x-on:click="clear()" class="rounded-md border border-line px-2.5 py-1 font-mono text-[11px] text-ink-3 transition-colors hover:border-accent/40 hover:text-accent-text">{{ __('terminal.clear') }}</button>
|
|
</div>
|
|
|
|
{{-- Screen --}}
|
|
<div class="relative flex-1">
|
|
<div x-ref="screen" class="absolute inset-0 p-2"></div>
|
|
{{-- Idle placeholder + connect action --}}
|
|
<div x-show="status==='idle'" class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-3 text-center">
|
|
<x-icon name="terminal" class="h-7 w-7 text-ink-4" />
|
|
<button type="button" wire:click="open" wire:loading.attr="disabled"
|
|
class="pointer-events-auto rounded-md border border-accent/40 bg-accent/10 px-4 py-1.5 font-mono text-[12px] text-accent-text transition-colors hover:bg-accent/20">
|
|
{{ __('terminal.connect') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<x-panel>
|
|
<div class="px-4 py-10 text-center sm:px-5">
|
|
<p class="text-sm text-ink-2">{{ __('terminal.no_permission_title') }}</p>
|
|
<p class="mt-1 font-mono text-[11px] text-ink-4">{{ __('terminal.no_permission_hint') }}</p>
|
|
</div>
|
|
</x-panel>
|
|
@endcan
|
|
</div>
|