309 lines
26 KiB
PHP
309 lines
26 KiB
PHP
<div wire:poll.15s wire:keydown.escape="$set('showEndpointSettings', false)" data-xhr-redirect-endpoint="{{ $endpoint->id }}" class="space-y-6">
|
|
<div class="flex flex-col justify-between gap-6 lg:flex-row lg:items-end">
|
|
<div class="min-w-0">
|
|
<div class="flex flex-wrap items-center gap-3 text-sm text-slate-400">
|
|
<a href="{{ $endpoint->is_public ? route('home') : route('dashboard') }}" class="transition hover:text-cyan-300">{{ $endpoint->is_public ? 'Home' : 'Dashboard' }}</a>
|
|
<span class="text-slate-700">/</span>
|
|
<span class="text-slate-500">Inspector</span>
|
|
<span class="rounded-full border px-2.5 py-1 text-xs {{ $endpoint->is_public ? 'border-amber-300/25 bg-amber-300/10 text-amber-200' : 'border-cyan-300/25 bg-cyan-300/10 text-cyan-200' }}">{{ $endpoint->is_public ? 'Temporary' : 'Private' }}</span>
|
|
</div>
|
|
<h1 class="mt-3 truncate text-3xl font-semibold tracking-tight text-white">{{ $endpoint->name ?: 'Webhook endpoint' }}</h1>
|
|
<p class="mt-2 font-mono text-xs text-slate-500">{{ $endpoint->id }}</p>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<button type="button" wire:click="$toggle('showEndpointSettings')" class="cursor-pointer rounded-xl border border-cyan-300/25 bg-cyan-300/10 px-4 py-2.5 text-sm font-medium text-cyan-200 transition hover:border-cyan-300/50 hover:bg-cyan-300/15">
|
|
{{ $showEndpointSettings ? 'Close settings' : 'Endpoint settings' }}
|
|
</button>
|
|
@if ($endpoint->is_public)
|
|
<form action="{{ route('inspect.destroy', ['token' => $endpoint->token]) }}" method="POST">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="cursor-pointer rounded-xl border border-rose-300/20 px-4 py-2.5 text-sm font-medium text-rose-300 transition hover:bg-rose-400/10" onclick="return confirm('Delete this endpoint and all captured requests?')">Delete URL</button>
|
|
</form>
|
|
@else
|
|
<button type="button" wire:click="deleteEndpoint" wire:confirm="Delete this endpoint and all captured requests?" class="cursor-pointer rounded-xl border border-rose-300/20 px-4 py-2.5 text-sm font-medium text-rose-300 transition hover:bg-rose-400/10">Delete URL</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-4 lg:grid-cols-[22rem_minmax(0,1fr)] lg:items-start">
|
|
<section class="min-w-0 rounded-2xl border border-white/10 bg-white/[0.04] p-4 sm:p-5 lg:sticky lg:top-6 lg:flex lg:h-[calc(100vh-13rem)] lg:min-h-[32rem] lg:flex-col">
|
|
<div class="shrink-0 border-b border-white/10 pb-4">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<h2 class="font-medium text-white">Incoming requests</h2>
|
|
<p class="mt-1 text-sm text-slate-500">Live request history</p>
|
|
</div>
|
|
<span class="rounded-full border border-white/10 px-2 py-1 text-[11px] text-slate-500">{{ $webhookRequests->total() }} total</span>
|
|
</div>
|
|
<div class="mt-4 grid gap-2">
|
|
<label class="sr-only" for="request-search">Search requests</label>
|
|
<input id="request-search" type="search" wire:model.live.debounce.350ms="search" placeholder="Search URI, IP, agent" class="w-full rounded-lg border border-white/10 bg-slate-950/70 px-3 py-2 text-sm text-white outline-none placeholder:text-slate-600 focus:border-cyan-300/60">
|
|
<label class="sr-only" for="method-filter">Filter method</label>
|
|
<select id="method-filter" wire:model.live="methodFilter" class="w-full rounded-lg border border-white/10 bg-slate-950/70 px-3 py-2 text-sm text-white outline-none focus:border-cyan-300/60">
|
|
@foreach (['ALL', 'GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'] as $method)
|
|
<option value="{{ $method }}">{{ $method === 'ALL' ? 'All methods' : $method }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
@if ($webhookRequests->isEmpty())
|
|
<div class="flex min-h-[20rem] flex-1 flex-col items-center justify-center px-3 text-center">
|
|
<p class="font-mono text-sm text-slate-500">waiting for request...</p>
|
|
<p class="mt-2 text-sm leading-6 text-slate-600">Open endpoint settings to find the URL for the next request.</p>
|
|
</div>
|
|
@else
|
|
<div class="mt-4 min-h-0 flex-1 overflow-y-auto pr-1">
|
|
<div class="space-y-2">
|
|
@foreach ($webhookRequests as $webhookRequest)
|
|
<button
|
|
type="button"
|
|
wire:key="request-{{ $webhookRequest->id }}"
|
|
wire:click="selectRequest('{{ $webhookRequest->id }}')"
|
|
class="w-full cursor-pointer rounded-xl border px-3 py-3 text-left transition {{ $selectedRequestId === $webhookRequest->id ? 'border-cyan-300/50 bg-cyan-300/[0.08]' : 'border-white/10 bg-white/[0.02] hover:border-white/20 hover:bg-white/[0.04]' }}"
|
|
>
|
|
<div class="flex items-center justify-between gap-3">
|
|
<span class="rounded-md bg-cyan-300/10 px-2 py-1 font-mono text-[11px] font-medium text-cyan-200">{{ $webhookRequest->method }}</span>
|
|
<span class="shrink-0 text-[11px] text-slate-600">{{ $webhookRequest->received_at?->diffForHumans() }}</span>
|
|
</div>
|
|
<div class="mt-2 truncate font-mono text-xs text-slate-300">{{ $webhookRequest->request_uri }}</div>
|
|
<div class="mt-2 flex items-center justify-between gap-3 text-[11px] text-slate-600">
|
|
<span class="truncate">{{ $webhookRequest->content_type ?: 'No content type' }}</span>
|
|
<span class="shrink-0 font-mono">{{ $webhookRequest->body_size }} B</span>
|
|
</div>
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 shrink-0 overflow-x-auto border-t border-white/10 pt-4">{{ $webhookRequests->links() }}</div>
|
|
@endif
|
|
</section>
|
|
|
|
<section class="min-w-0 overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04] lg:h-[calc(100vh-13rem)] lg:overflow-y-auto">
|
|
@if ($selectedRequest)
|
|
<div class="flex flex-col justify-between gap-4 border-b border-white/10 p-5 sm:flex-row sm:items-start sm:p-6">
|
|
<div class="min-w-0">
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<span class="rounded-md bg-cyan-300/10 px-2 py-1 font-mono text-xs font-medium text-cyan-200">{{ $selectedRequest->method }}</span>
|
|
<span class="text-xs uppercase tracking-wider text-slate-600">Request analysis</span>
|
|
</div>
|
|
<h2 class="mt-3 break-all font-mono text-sm text-white">{{ $selectedRequest->request_uri }}</h2>
|
|
<p class="mt-2 font-mono text-xs text-slate-600">{{ $selectedRequest->id }}</p>
|
|
</div>
|
|
<div class="flex shrink-0 items-center gap-3">
|
|
<button
|
|
type="button"
|
|
data-xhr-redirect-open
|
|
data-xhr-request-method="{{ $selectedRequest->method }}"
|
|
data-xhr-request-uri="{{ $selectedRequest->request_uri }}"
|
|
data-xhr-request-headers="{{ base64_encode(json_encode($selectedRequest->headers ?? [], JSON_UNESCAPED_SLASHES | JSON_INVALID_UTF8_SUBSTITUTE) ?: '{}') }}"
|
|
data-xhr-request-body="{{ base64_encode((string) ($selectedRequest->body ?? '')) }}"
|
|
class="cursor-pointer rounded-lg border border-cyan-300/25 bg-cyan-300/10 px-3 py-2 text-sm text-cyan-200 transition hover:border-cyan-300/50 hover:bg-cyan-300/15"
|
|
>
|
|
Send via XHR
|
|
</button>
|
|
<button type="button" wire:click="deleteRequest('{{ $selectedRequest->id }}')" wire:confirm="Delete this request?" class="cursor-pointer text-sm text-rose-300 transition hover:text-rose-200">Delete request</button>
|
|
<button type="button" wire:click="clearSelectedRequest" class="cursor-pointer rounded-lg border border-white/10 px-3 py-2 text-sm text-slate-300 transition hover:border-white/25 hover:text-white">Close</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-6 p-5 sm:p-6">
|
|
<div class="grid gap-6 lg:grid-cols-2">
|
|
<div>
|
|
<h3 class="text-xs font-medium uppercase tracking-wider text-slate-500">Request metadata</h3>
|
|
<dl class="mt-3 divide-y divide-white/5 rounded-xl border border-white/10 bg-slate-950/40 px-4 text-sm">
|
|
<div class="flex justify-between gap-4 py-3"><dt class="text-slate-500">Received</dt><dd class="text-right text-slate-200">{{ $selectedRequest->received_at?->format('Y-m-d H:i:s T') }}</dd></div>
|
|
<div class="flex justify-between gap-4 py-3"><dt class="text-slate-500">Content-Type</dt><dd class="max-w-[65%] break-all text-right font-mono text-xs text-slate-200">{{ $selectedRequest->content_type ?: '—' }}</dd></div>
|
|
<div class="flex justify-between gap-4 py-3"><dt class="text-slate-500">Size</dt><dd class="text-right text-slate-200">{{ $selectedRequest->body_size }} bytes</dd></div>
|
|
<div class="flex justify-between gap-4 py-3"><dt class="text-slate-500">IP address</dt><dd class="text-right font-mono text-xs text-slate-200">{{ $selectedRequest->ip_address ?: '—' }}</dd></div>
|
|
<div class="flex justify-between gap-4 py-3"><dt class="text-slate-500">User-Agent</dt><dd class="max-w-[65%] break-all text-right text-xs text-slate-200">{{ $selectedRequest->user_agent ?: '—' }}</dd></div>
|
|
</dl>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xs font-medium uppercase tracking-wider text-slate-500">Query parameters</h3>
|
|
<pre class="mt-3 max-h-64 overflow-auto rounded-xl border border-white/10 bg-slate-950/70 p-4 font-mono text-xs leading-6 text-slate-300">{{ json_encode($selectedRequest->query_parameters ?? [], JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-6 lg:grid-cols-2">
|
|
<div>
|
|
<h3 class="text-xs font-medium uppercase tracking-wider text-slate-500">Headers</h3>
|
|
<div class="mt-3 max-h-80 overflow-auto rounded-xl border border-white/10 bg-slate-950/70 p-4 font-mono text-xs leading-6">
|
|
@forelse ($selectedRequest->headers ?? [] as $name => $values)
|
|
<div class="flex gap-3"><span class="shrink-0 text-cyan-300">{{ $name }}:</span><span class="break-all text-slate-300">{{ implode(', ', (array) $values) }}</span></div>
|
|
@empty
|
|
<span class="text-slate-600">No headers captured.</span>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xs font-medium uppercase tracking-wider text-slate-500">Body</h3>
|
|
<pre class="mt-3 max-h-80 overflow-auto whitespace-pre-wrap break-words rounded-xl border border-white/10 bg-slate-950/70 p-4 font-mono text-xs leading-6 text-emerald-200">{{ $selectedRequest->body ?? '' }}</pre>
|
|
</div>
|
|
</div>
|
|
|
|
@if ($selectedRequest->json_payload !== null)
|
|
<div>
|
|
<h3 class="text-xs font-medium uppercase tracking-wider text-slate-500">Parsed JSON</h3>
|
|
<pre class="mt-3 max-h-80 overflow-auto rounded-xl border border-white/10 bg-slate-950/70 p-4 font-mono text-xs leading-6 text-emerald-200">{{ json_encode($selectedRequest->json_payload, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</pre>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@else
|
|
<div class="flex min-h-[32rem] flex-col items-center justify-center p-8 text-center lg:min-h-[calc(100vh-13rem)]">
|
|
<div class="flex size-12 items-center justify-center rounded-2xl bg-cyan-300/10 font-mono text-sm text-cyan-300">//</div>
|
|
<p class="mt-5 text-xs font-medium uppercase tracking-[0.18em] text-cyan-300">Request analysis</p>
|
|
<h2 class="mt-3 text-xl font-medium text-white">Select an incoming request</h2>
|
|
<p class="mt-2 max-w-md text-sm leading-6 text-slate-500">Choose a request from the left to inspect its headers, query parameters, body, and parsed payload here.</p>
|
|
</div>
|
|
@endif
|
|
</section>
|
|
</div>
|
|
|
|
@if ($selectedRequest)
|
|
<div data-xhr-redirect-modal hidden class="fixed inset-0 z-50 overflow-y-auto p-4 sm:p-6" role="dialog" aria-modal="true" aria-labelledby="xhr-redirect-title">
|
|
<button type="button" data-xhr-redirect-close class="absolute inset-0 size-full cursor-pointer bg-slate-950/80 backdrop-blur-sm" aria-label="Close XHR redirect"></button>
|
|
|
|
<div class="relative z-10 mx-auto my-4 w-full max-w-2xl overflow-hidden rounded-2xl border border-white/15 bg-slate-900 shadow-2xl shadow-black/50 sm:my-8">
|
|
<div class="flex items-start justify-between gap-4 border-b border-white/10 p-5 sm:p-6">
|
|
<div>
|
|
<p class="text-xs font-medium uppercase tracking-[0.18em] text-cyan-300">Browser forwarding</p>
|
|
<h2 id="xhr-redirect-title" class="mt-2 text-xl font-semibold text-white">Send request via XHR</h2>
|
|
<p class="mt-2 text-sm leading-6 text-slate-500">The browser sends this request directly to the target. The target must allow CORS.</p>
|
|
</div>
|
|
<button type="button" data-xhr-redirect-close class="shrink-0 cursor-pointer rounded-lg border border-white/10 px-3 py-2 text-sm text-slate-300 transition hover:border-white/25 hover:text-white">Close</button>
|
|
</div>
|
|
|
|
<form data-xhr-redirect-send-form class="space-y-5 p-5 sm:p-6">
|
|
<div>
|
|
<label for="xhr-redirect-target" class="text-xs font-medium uppercase tracking-wider text-slate-500">Target URL</label>
|
|
<input id="xhr-redirect-target" type="url" data-xhr-redirect-target required autocomplete="off" placeholder="http://localhost:8080/webhook" class="mt-2 w-full rounded-lg border border-white/10 bg-slate-950/70 px-3 py-2.5 font-mono text-sm text-white outline-none placeholder:text-slate-600 focus:border-cyan-300/60">
|
|
<p class="mt-2 text-xs leading-5 text-slate-600">Use an http:// or https:// URL. Query parameters from the captured request are appended to the target.</p>
|
|
</div>
|
|
|
|
<div data-xhr-redirect-status role="status" class="rounded-lg border border-white/10 bg-slate-950/50 px-3 py-2.5 text-sm text-slate-400">Ready to send.</div>
|
|
|
|
<div data-xhr-redirect-response hidden class="space-y-3 rounded-xl border border-white/10 bg-slate-950/50 p-4">
|
|
<div class="flex items-center justify-between gap-3 text-sm">
|
|
<span class="text-slate-500">Response</span>
|
|
<span data-xhr-response-status class="font-mono text-slate-200"></span>
|
|
</div>
|
|
<div>
|
|
<p class="text-[11px] uppercase tracking-wider text-slate-600">Headers</p>
|
|
<pre data-xhr-response-headers class="mt-2 max-h-32 overflow-auto whitespace-pre-wrap break-words font-mono text-xs leading-5 text-slate-400"></pre>
|
|
</div>
|
|
<div>
|
|
<p class="text-[11px] uppercase tracking-wider text-slate-600">Body</p>
|
|
<pre data-xhr-response-body class="mt-2 max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-xs leading-5 text-emerald-200"></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3">
|
|
<button type="button" data-xhr-redirect-close class="cursor-pointer rounded-lg border border-white/10 px-3 py-2.5 text-sm text-slate-300 transition hover:border-white/25 hover:text-white">Cancel</button>
|
|
<button type="submit" data-xhr-redirect-send class="cursor-pointer rounded-lg bg-white px-4 py-2.5 text-sm font-semibold text-slate-950 transition hover:bg-cyan-50 disabled:cursor-not-allowed disabled:opacity-50">Send via XHR</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if ($showEndpointSettings)
|
|
<div class="fixed inset-0 z-50 overflow-y-auto p-4 sm:p-6" role="dialog" aria-modal="true" aria-labelledby="endpoint-settings-title">
|
|
<button type="button" wire:click="$set('showEndpointSettings', false)" class="absolute inset-0 size-full cursor-pointer bg-slate-950/80 backdrop-blur-sm" aria-label="Close endpoint settings"></button>
|
|
|
|
<div class="relative z-10 mx-auto my-4 w-full max-w-5xl overflow-hidden rounded-2xl border border-white/15 bg-slate-900 shadow-2xl shadow-black/50 sm:my-8">
|
|
<div class="flex items-start justify-between gap-4 border-b border-white/10 p-5 sm:p-6">
|
|
<div>
|
|
<p class="text-xs font-medium uppercase tracking-[0.18em] text-cyan-300">Endpoint configuration</p>
|
|
<h2 id="endpoint-settings-title" class="mt-2 text-xl font-semibold text-white">Endpoint settings</h2>
|
|
<p class="mt-2 text-sm text-slate-500">Manage the URL for incoming calls and the response sent back to private endpoints.</p>
|
|
</div>
|
|
<button type="button" wire:click="$set('showEndpointSettings', false)" class="shrink-0 cursor-pointer rounded-lg border border-white/10 px-3 py-2 text-sm text-slate-300 transition hover:border-white/25 hover:text-white">Close</button>
|
|
</div>
|
|
|
|
<div class="grid gap-6 p-5 sm:p-6 xl:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
|
|
<section data-xhr-redirect-settings class="rounded-xl border border-cyan-300/15 bg-cyan-300/[0.04] p-5 xl:col-span-2">
|
|
<div class="flex flex-col justify-between gap-4 sm:flex-row sm:items-start">
|
|
<div>
|
|
<h3 class="font-medium text-white">XHR redirect</h3>
|
|
<p class="mt-1 max-w-2xl text-sm leading-6 text-slate-500">Forward new incoming requests from this browser tab to a local or remote endpoint. Forwarding runs in the browser and stops when this tab is closed.</p>
|
|
</div>
|
|
<span data-xhr-redirect-active hidden class="shrink-0 rounded-full border border-emerald-300/20 bg-emerald-300/10 px-2.5 py-1 text-xs text-emerald-200">Active</span>
|
|
</div>
|
|
|
|
<form data-xhr-redirect-config-form class="mt-5 grid gap-4 lg:grid-cols-[minmax(0,1fr)_auto_auto] lg:items-end">
|
|
<div>
|
|
<label for="xhr-redirect-config-target" class="text-xs font-medium uppercase tracking-wider text-slate-500">Target URL</label>
|
|
<input id="xhr-redirect-config-target" type="url" data-xhr-redirect-target autocomplete="off" placeholder="http://localhost:8080/webhook" class="mt-2 w-full rounded-lg border border-white/10 bg-slate-950/70 px-3 py-2.5 font-mono text-sm text-white outline-none placeholder:text-slate-600 focus:border-cyan-300/60">
|
|
</div>
|
|
<label class="flex cursor-pointer items-center gap-2 pb-2.5 text-sm text-slate-300">
|
|
<input type="checkbox" data-xhr-redirect-enabled class="size-4 rounded border-white/20 bg-slate-950 text-cyan-300 focus:ring-cyan-300/40">
|
|
Enable forwarding
|
|
</label>
|
|
<button type="submit" class="cursor-pointer rounded-lg bg-cyan-300 px-4 py-2.5 text-sm font-semibold text-slate-950 transition hover:bg-cyan-200">Save XHR settings</button>
|
|
</form>
|
|
|
|
<p data-xhr-redirect-feedback role="status" class="mt-3 min-h-5 text-xs text-slate-500"></p>
|
|
<p class="mt-3 text-xs leading-5 text-slate-600">The target should answer preflight requests and include <code class="font-mono text-slate-400">Access-Control-Allow-Origin</code>, <code class="font-mono text-slate-400">Access-Control-Allow-Methods</code>, and <code class="font-mono text-slate-400">Access-Control-Allow-Headers</code>.</p>
|
|
</section>
|
|
|
|
<section class="rounded-xl border border-white/10 bg-slate-950/40 p-5">
|
|
<h3 class="font-medium text-white">Send requests here</h3>
|
|
<p class="mt-1 text-sm text-slate-500">Any HTTP method is accepted.</p>
|
|
<div class="mt-5 space-y-4">
|
|
<div>
|
|
<div class="mb-1 text-[11px] uppercase tracking-wider text-slate-600">Webhook URL</div>
|
|
<code class="block break-all rounded-lg bg-slate-950/80 p-3 text-xs leading-5 text-cyan-200">{{ $endpoint->webhookUrl() }}</code>
|
|
</div>
|
|
<div>
|
|
<div class="mb-1 text-[11px] uppercase tracking-wider text-slate-600">Example</div>
|
|
<code class="block break-all rounded-lg bg-slate-950/80 p-3 text-xs leading-5 text-slate-400">curl -X POST -d '{"event":"test"}' {{ $endpoint->webhookUrl() }}</code>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
@if (! $endpoint->is_public)
|
|
<section class="rounded-xl border border-white/10 bg-slate-950/40 p-5">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<h3 class="font-medium text-white">Response</h3>
|
|
<p class="mt-1 text-sm text-slate-500">Configure what the sender receives.</p>
|
|
</div>
|
|
@if ($responseSaved)
|
|
<span class="text-xs text-emerald-300">Saved</span>
|
|
@endif
|
|
</div>
|
|
<form wire:submit="saveResponse" class="mt-5 space-y-4">
|
|
<div>
|
|
<label for="response-status" class="text-xs font-medium uppercase tracking-wider text-slate-500">Status</label>
|
|
<input id="response-status" type="number" wire:model="responseStatus" min="100" max="599" class="mt-2 w-full rounded-lg border border-white/10 bg-slate-950/70 px-3 py-2 text-sm text-white outline-none focus:border-cyan-300/60">
|
|
@error('responseStatus') <p class="mt-1 text-xs text-rose-300">{{ $message }}</p> @enderror
|
|
</div>
|
|
<div>
|
|
<label for="response-headers" class="text-xs font-medium uppercase tracking-wider text-slate-500">Headers (JSON)</label>
|
|
<textarea id="response-headers" wire:model="responseHeadersJson" rows="5" spellcheck="false" class="mt-2 w-full rounded-lg border border-white/10 bg-slate-950/70 px-3 py-2 font-mono text-xs text-white outline-none focus:border-cyan-300/60">{{ $responseHeadersJson }}</textarea>
|
|
@error('responseHeadersJson') <p class="mt-1 text-xs text-rose-300">{{ $message }}</p> @enderror
|
|
</div>
|
|
<div>
|
|
<label for="response-body" class="text-xs font-medium uppercase tracking-wider text-slate-500">Body</label>
|
|
<textarea id="response-body" wire:model="responseBody" rows="7" spellcheck="false" class="mt-2 w-full rounded-lg border border-white/10 bg-slate-950/70 px-3 py-2 font-mono text-xs text-white outline-none focus:border-cyan-300/60">{{ $responseBody }}</textarea>
|
|
@error('responseBody') <p class="mt-1 text-xs text-rose-300">{{ $message }}</p> @enderror
|
|
</div>
|
|
<button type="submit" class="w-full cursor-pointer rounded-lg bg-white px-3 py-2.5 text-sm font-semibold text-slate-950 transition hover:bg-cyan-50">Save response</button>
|
|
</form>
|
|
</section>
|
|
@else
|
|
<section class="rounded-xl border border-amber-300/15 bg-amber-300/[0.05] p-5 text-sm leading-6 text-amber-100/80">
|
|
<h3 class="font-medium text-amber-100">Response</h3>
|
|
<p class="mt-2">This temporary endpoint expires after {{ $endpoint->expires_at?->diffForHumans(null, true) }}. The default response is <code class="font-mono text-amber-200">200 {}</code>.</p>
|
|
</section>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|