mirror of
https://github.com/coollabsio/coolify.git
synced 2026-08-24 10:05:47 -05:00
feat(security): add integration token editing and rotation
This commit is contained in:
@@ -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&accountId=%2A&zoneId=all&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>
|
||||
|
||||
Reference in New Issue
Block a user