feat(security): add integration token editing and rotation

This commit is contained in:
Andras Bacsai
2026-08-18 16:24:53 +02:00
parent 85e0821dd4
commit da8665330b
5 changed files with 329 additions and 27 deletions
@@ -0,0 +1,52 @@
<div class="w-full">
<form class="application-settings-form flex w-full flex-col gap-4" wire:submit="save">
<div class="grid gap-4 lg:grid-cols-2">
<x-forms.input required id="name" label="Token name" />
<x-forms.input readonly label="Provider" value="Cloudflare" />
<div class="lg:col-span-2">
<x-forms.input type="password" id="newToken" label="New API token"
placeholder="Leave blank to keep the current token"
helper="Paste a replacement token to rotate this credential." />
</div>
</div>
<fieldset>
<legend class="text-sm font-medium text-black dark:text-fg">Capabilities</legend>
<div class="mt-3 rounded-lg border border-neutral-200 p-1 dark:border-white/[0.08]">
<x-forms.checkbox id="edit-dns-capability" label="DNS" domValue="dns" fullWidth
wire:model.live="capabilities" />
<p class="px-2.5 pb-2 text-[11px] text-neutral-500 dark:text-fg-dim">
Manage Cloudflare DNS records.
</p>
</div>
@error('capabilities')
<span class="text-xs text-red-500">{{ $message }}</span>
@enderror
</fieldset>
@if (in_array('dns', $capabilities, true))
<div class="rounded-lg border border-neutral-200 bg-neutral-50 p-3 text-[11px] leading-5 text-neutral-600 dark:border-white/[0.08] dark:bg-white/[0.025] dark:text-fg-dim">
<div class="font-medium text-black dark:text-fg">Required Cloudflare permissions</div>
<ul class="list-inside list-disc">
<li>Zone - DNS - Edit</li>
<li>Zone - Zone - Read</li>
</ul>
<a href="https://dash.cloudflare.com/profile/api-tokens?permissionGroupKeys=%5B%7B%22key%22%3A%22dns%22%2C%22type%22%3A%22edit%22%7D%5D&amp;accountId=%2A&amp;zoneId=all&amp;name=Coolify%20DNS%20Management"
target="_blank" rel="noopener noreferrer"
class="font-medium text-coollabs hover:underline dark:text-warning">
Create a replacement token in Cloudflare
</a>
</div>
@endif
<div class="flex items-center justify-between gap-2 border-t border-neutral-200 pt-4 dark:border-white/[0.08]">
<x-modal-confirmation title="Delete integration token?" isErrorButton buttonTitle="Delete"
submitAction="delete" :actions="['This integration token will be permanently deleted.']"
confirmationText="{{ $integrationToken->name }}" :confirmWithPassword="false"
step2ButtonText="Delete token" />
<x-forms.button type="submit" wire:target="save" isHighlighted>
Validate and save
</x-forms.button>
</div>
</form>
</div>
@@ -30,34 +30,50 @@
<div class="divide-y divide-neutral-200 dark:divide-white/[0.07]">
@foreach ($tokens as $savedToken)
<div wire:key="integration-token-{{ $savedToken->id }}"
class="grid min-h-14 grid-cols-[minmax(0,1fr)_8rem_minmax(0,1fr)_2rem] items-center gap-3 px-4 py-2.5">
<div class="min-w-0">
<h3 class="truncate text-[13px]! font-semibold! text-black dark:text-fg">
{{ $savedToken->name }}
</h3>
</div>
<div class="text-center text-[12px] text-neutral-500 dark:text-fg-dim">
{{ ucfirst($savedToken->provider) }}
</div>
<div class="flex flex-wrap gap-1">
@foreach ($savedToken->capabilities ?? [] as $capability)
<span class="rounded-full bg-neutral-100 px-2 py-0.5 text-[10px] font-medium uppercase text-neutral-600 dark:bg-white/[0.06] dark:text-fg-dim">
{{ $capability }}
</span>
@endforeach
</div>
<x-modal-confirmation title="Delete integration token?" isErrorButton
submitAction="deleteToken({{ $savedToken->id }})"
confirmationText="{{ $savedToken->name }}"
confirmationLabel="Enter the token name to confirm"
shortConfirmationLabel="Token name" :confirmWithPassword="false"
step2ButtonText="Delete token">
<x-slot:trigger>
<button type="button" class="icon-button" title="Delete token">
<x-reicon name="trash" class="size-3.5" />
x-data="{
visible: true,
tokenName: @js($savedToken->name),
tokenCapabilities: @js($savedToken->capabilities),
}"
x-show="visible"
x-on:integration-token-updated.window="
if ($event.detail.uuid === @js($savedToken->uuid)) {
tokenName = $event.detail.name;
tokenCapabilities = $event.detail.capabilities;
}
"
x-on:integration-token-deleted.window="
if ($event.detail.uuid === @js($savedToken->uuid)) visible = false
">
<x-modal-input title="Edit Integration Token" isFullWidth :wireIgnore="false"
:contentClicks="false"
class="border-b border-neutral-200 last:border-b-0 dark:border-white/[0.07]">
<x-slot:content>
<div class="grid min-h-14 w-full grid-cols-[minmax(0,1fr)_8rem_minmax(0,1fr)_2rem] items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-neutral-50 dark:hover:bg-white/[0.025]">
<div class="min-w-0">
<h3 class="truncate text-[13px]! font-semibold! text-black dark:text-fg">
<span x-text="tokenName"></span>
</h3>
</div>
<div class="text-center text-[12px] text-neutral-500 dark:text-fg-dim">
{{ ucfirst($savedToken->provider) }}
</div>
<div class="flex flex-wrap gap-1">
<template x-for="capability in tokenCapabilities" :key="capability">
<span x-text="capability"
class="rounded-full bg-neutral-100 px-2 py-0.5 text-[10px] font-medium uppercase text-neutral-600 dark:bg-white/[0.06] dark:text-fg-dim"></span>
</template>
</div>
<button type="button" class="icon-button" title="Edit integration token"
:aria-label="`Edit ${tokenName}`" @click="modalOpen=true">
<x-reicon name="settings" class="size-3.5" />
</button>
</x-slot:trigger>
</x-modal-confirmation>
</div>
</x-slot:content>
<livewire:security.integration-token-editor
:integration_token_uuid="$savedToken->uuid"
:key="'integration-token-editor-'.$savedToken->uuid" />
</x-modal-input>
</div>
@endforeach
</div>