refactor(ui): replace warning and error divs with callout components for improved consistency and readability
This commit is contained in:
Andras Bacsai
parent
b5d50d4ae4
commit
facba28e0a
17 changed files with 75 additions and 134 deletions
|
|
@ -30,14 +30,12 @@ class="flex absolute top-2 right-2 justify-center items-center w-8 h-8 rounded-f
|
|||
</button>
|
||||
</div>
|
||||
<div class="relative w-auto">
|
||||
<div class="p-4 mb-4 text-white border-l-4 border-red-500 bg-red-600" role="alert">
|
||||
<p class="font-bold">Warning: Domain Conflict Detected</p>
|
||||
<p>{{ $slot ?? 'The following domain(s) are already in use by other resources. Using the same domain for multiple resources can cause routing conflicts and unpredictable behavior.' }}
|
||||
</p>
|
||||
</div>
|
||||
<x-callout type="danger" title="Domain Conflict Detected" class="mb-4">
|
||||
The following domain(s) are already in use by other resources. Using the same domain for
|
||||
multiple resources can cause routing conflicts and unpredictable behavior.
|
||||
</x-callout>
|
||||
|
||||
<div class="mb-4">
|
||||
<h4 class="mb-2 font-semibold">Conflicting Resources:</h4>
|
||||
<ul class="space-y-2">
|
||||
@foreach ($conflicts as $conflict)
|
||||
<li class="flex items-start text-red-500">
|
||||
|
|
@ -58,9 +56,7 @@ class="underline hover:text-red-400">
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="p-4 mb-4 text-yellow-800 dark:text-yellow-200 border-l-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg"
|
||||
role="alert">
|
||||
<p class="font-bold">What will happen if you continue?</p>
|
||||
<x-callout type="warning" title="What will happen if you continue?" class="mb-4">
|
||||
@if (isset($consequences))
|
||||
{{ $consequences }}
|
||||
@else
|
||||
|
|
@ -71,7 +67,7 @@ class="underline hover:text-red-400">
|
|||
<li>SSL certificates might not work correctly</li>
|
||||
</ul>
|
||||
@endif
|
||||
</div>
|
||||
</x-callout>
|
||||
|
||||
<div class="flex flex-wrap gap-2 justify-between mt-4">
|
||||
<x-forms.button @click="modalOpen = false; $wire.set('showDomainConflictModal', false)"
|
||||
|
|
|
|||
|
|
@ -201,9 +201,6 @@ class="flex absolute top-2 right-2 justify-center items-center w-8 h-8 rounded-f
|
|||
@if (!empty($checkboxes))
|
||||
<!-- Step 1: Select actions -->
|
||||
<div x-show="step === 1">
|
||||
<div class="flex justify-between items-center">
|
||||
<h4>Actions</h4>
|
||||
</div>
|
||||
@foreach ($checkboxes as $index => $checkbox)
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<x-forms.checkbox fullWidth :label="$checkbox['label']" :id="$checkbox['id']"
|
||||
|
|
@ -227,11 +224,9 @@ class="w-24 dark:bg-coolgray-200 dark:hover:bg-coolgray-300">
|
|||
|
||||
<!-- Step 2: Confirm deletion -->
|
||||
<div x-show="step === 2">
|
||||
<div class="p-4 mb-4 text-white border-l-4 border-red-500 bg-error" role="alert">
|
||||
<p class="font-bold">Warning</p>
|
||||
<p>{!! $warningMessage ?: 'This operation is permanent and cannot be undone. Please think again before proceeding!' !!}
|
||||
</p>
|
||||
</div>
|
||||
<x-callout type="danger" title="Warning" class="mb-4">
|
||||
{!! $warningMessage ?: 'This operation is permanent and cannot be undone. Please think again before proceeding!' !!}
|
||||
</x-callout>
|
||||
<div class="mb-4">The following actions will be performed:</div>
|
||||
<ul class="mb-4 space-y-2">
|
||||
@foreach ($actions as $action)
|
||||
|
|
@ -325,10 +320,9 @@ class="w-auto" isError
|
|||
<!-- Step 3: Password confirmation -->
|
||||
@if (!$disableTwoStepConfirmation)
|
||||
<div x-show="step === 3 && confirmWithPassword">
|
||||
<div class="p-4 mb-4 text-white border-l-4 border-red-500 bg-error" role="alert">
|
||||
<p class="font-bold">Final Confirmation</p>
|
||||
<p>Please enter your password to confirm this destructive action.</p>
|
||||
</div>
|
||||
<x-callout type="danger" title="Final Confirmation" class="mb-4">
|
||||
Please enter your password to confirm this destructive action.
|
||||
</x-callout>
|
||||
<div class="flex flex-col gap-2 mb-4">
|
||||
@php
|
||||
$passwordConfirm = Str::uuid();
|
||||
|
|
|
|||
|
|
@ -18,8 +18,7 @@
|
|||
</form>
|
||||
</div>
|
||||
@else
|
||||
<div class="text-gray-500 p-4 text-center">
|
||||
<p>You don't have permission to create new destinations.</p>
|
||||
<p class="text-sm">Please contact your team administrator for access.</p>
|
||||
</div>
|
||||
<x-callout type="warning" title="Permission Required">
|
||||
You don't have permission to create new destinations. Please contact your team administrator for access.
|
||||
</x-callout>
|
||||
@endcan
|
||||
|
|
|
|||
|
|
@ -11,17 +11,8 @@
|
|||
confirmationLabel="Please confirm the execution of the actions by entering the Resource Name below"
|
||||
shortConfirmationLabel="Resource Name" />
|
||||
@else
|
||||
<div class="flex items-center gap-2 p-4 border border-red-500 rounded-lg bg-red-50 dark:bg-red-900/20">
|
||||
<svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="font-semibold text-red-700 dark:text-red-300">Insufficient Permissions</div>
|
||||
<div class="text-sm text-red-600 dark:text-red-400">You don't have permission to delete this resource.
|
||||
Contact your team administrator for access.</div>
|
||||
</div>
|
||||
</div>
|
||||
<x-callout type="danger" title="Insufficient Permissions">
|
||||
You don't have permission to delete this resource. Contact your team administrator for access.
|
||||
</x-callout>
|
||||
@endif
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -80,21 +80,11 @@ class="absolute bg-error -top-1 -left-1 badge "></div>
|
|||
<div class="flex flex-col gap-2">
|
||||
@if ($resource->persistentStorages()->count() > 0)
|
||||
<h3>Add another server</h3>
|
||||
<div
|
||||
class="p-4 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800">
|
||||
<div class="flex items-center">
|
||||
|
||||
<div>
|
||||
<h4 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Cannot add additional
|
||||
servers</h4>
|
||||
<p class="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
|
||||
This application has persistent storage volumes configured. Applications with persistent
|
||||
storage cannot be deployed to multiple servers as the storage would not be accessible
|
||||
across different servers.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<x-callout type="warning" title="Cannot add additional servers">
|
||||
This application has persistent storage volumes configured. Applications with persistent
|
||||
storage cannot be deployed to multiple servers as the storage would not be accessible
|
||||
across different servers.
|
||||
</x-callout>
|
||||
@elseif (count($networks) > 0)
|
||||
<h3>Add another server</h3>
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
|
|
|
|||
|
|
@ -28,13 +28,9 @@
|
|||
@endforeach
|
||||
@endforeach
|
||||
@else
|
||||
<div
|
||||
class="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg">
|
||||
<div class="text-yellow-800 dark:text-yellow-200">
|
||||
<strong>Access Restricted:</strong> You don't have permission to clone resources. Contact your team
|
||||
administrator to request access.
|
||||
</div>
|
||||
</div>
|
||||
<x-callout type="warning" title="Access Restricted">
|
||||
You don't have permission to clone resources. Contact your team administrator to request access.
|
||||
</x-callout>
|
||||
@endcan
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -71,13 +67,9 @@ class="font-bold dark:text-warning">{{ $resource->environment->project->name }}
|
|||
<div>No projects found to move to</div>
|
||||
@endforelse
|
||||
@else
|
||||
<div
|
||||
class="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg">
|
||||
<div class="text-yellow-800 dark:text-yellow-200">
|
||||
<strong>Access Restricted:</strong> You don't have permission to move resources between projects or
|
||||
environments. Contact your team administrator to request access.
|
||||
</div>
|
||||
</div>
|
||||
<x-callout type="warning" title="Access Restricted">
|
||||
You don't have permission to move resources between projects or environments. Contact your team administrator to request access.
|
||||
</x-callout>
|
||||
@endcan
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,12 +10,9 @@
|
|||
<x-forms.button type="submit">Add</x-forms.button>
|
||||
</form>
|
||||
@else
|
||||
<div class="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg mt-4">
|
||||
<div class="text-yellow-800 dark:text-yellow-200">
|
||||
<strong>Access Restricted:</strong> You don't have permission to manage tags. Contact your team
|
||||
administrator to request access.
|
||||
</div>
|
||||
</div>
|
||||
<x-callout type="warning" title="Access Restricted" class="mt-4">
|
||||
You don't have permission to manage tags. Contact your team administrator to request access.
|
||||
</x-callout>
|
||||
@endcan
|
||||
@if (data_get($this->resource, 'tags') && count(data_get($this->resource, 'tags')) > 0)
|
||||
<h3 class="pt-4">Assigned Tags</h3>
|
||||
|
|
|
|||
|
|
@ -73,7 +73,9 @@
|
|||
@endcan
|
||||
</form>
|
||||
@else
|
||||
You are using an official Git App. You do not need manual webhooks.
|
||||
<x-callout type="info" title="Information">
|
||||
You are using an official Git App. You do not need manual webhooks.
|
||||
</x-callout>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
|
|
|||
|
|
@ -23,15 +23,11 @@ class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded dark:
|
|||
<div class="flex flex-col gap-2 pt-6">
|
||||
@if ($isCloudflareTunnelsEnabled)
|
||||
<div class="flex flex-col gap-4">
|
||||
<div
|
||||
class="w-full px-4 py-2 text-yellow-800 rounded-xs border-l-4 border-yellow-500 bg-yellow-50 dark:bg-yellow-900/30 dark:text-yellow-300 dark:border-yellow-600">
|
||||
<p class="font-bold">Warning!</p>
|
||||
<p>If you disable Cloudflare Tunnel, you will need to update the server's IP address back
|
||||
to
|
||||
its real IP address in the server "General" settings. The server may become inaccessible
|
||||
if the IP
|
||||
address is not updated correctly.</p>
|
||||
</div>
|
||||
<x-callout type="warning" title="Warning!">
|
||||
If you disable Cloudflare Tunnel, you will need to update the server's IP address back
|
||||
to its real IP address in the server "General" settings. The server may become inaccessible
|
||||
if the IP address is not updated correctly.
|
||||
</x-callout>
|
||||
<div class="w-64">
|
||||
@if ($server->ip_previous)
|
||||
<x-modal-confirmation title="Disable Cloudflare Tunnel?"
|
||||
|
|
@ -60,10 +56,9 @@ class="w-full px-4 py-2 text-yellow-800 rounded-xs border-l-4 border-yellow-500
|
|||
</div>
|
||||
</div>
|
||||
@elseif (!$server->isFunctional())
|
||||
<div
|
||||
class="p-4 mb-4 w-full text-sm text-yellow-800 bg-yellow-100 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">
|
||||
<x-callout type="info" title="Configuration Options" class="mb-4">
|
||||
To <span class="font-semibold">automatically</span> configure Cloudflare Tunnel, please
|
||||
validate your server first.</span> Then you will need a Cloudflare token and an SSH
|
||||
validate your server first. Then you will need a Cloudflare token and an SSH
|
||||
domain configured.
|
||||
<br />
|
||||
To <span class="font-semibold">manually</span> configure Cloudflare Tunnel, please
|
||||
|
|
@ -72,8 +67,8 @@ class="p-4 mb-4 w-full text-sm text-yellow-800 bg-yellow-100 rounded-sm dark:bg-
|
|||
<br /><br />
|
||||
For more information, please read our <a
|
||||
href="https://coolify.io/docs/knowledge-base/cloudflare/tunnels/server-ssh" target="_blank"
|
||||
class="underline ">documentation</a>.
|
||||
</div>
|
||||
class="underline">documentation</a>.
|
||||
</x-callout>
|
||||
@endif
|
||||
@if (!$isCloudflareTunnelsEnabled && $server->isFunctional())
|
||||
<div class="flex flex-col pb-2">
|
||||
|
|
@ -97,10 +92,9 @@ class="flex flex-col gap-2 w-full">
|
|||
<x-forms.button type="submit" isHighlighted>Continue</x-forms.button>
|
||||
</form>
|
||||
@else
|
||||
<div
|
||||
class="p-4 mb-4 text-sm text-yellow-800 bg-yellow-100 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">
|
||||
<x-callout type="warning" title="Permission Required" class="mb-4">
|
||||
You don't have permission to configure Cloudflare Tunnel for this server.
|
||||
</div>
|
||||
</x-callout>
|
||||
@endcan
|
||||
</div>
|
||||
@script
|
||||
|
|
@ -128,10 +122,9 @@ class="p-4 mb-4 text-sm text-yellow-800 bg-yellow-100 rounded-sm dark:bg-yellow-
|
|||
confirmationLabel="Please type the confirmation text to confirm that you manually configured Cloudflare Tunnel."
|
||||
shortConfirmationLabel="Confirmation text" />
|
||||
@else
|
||||
<div
|
||||
class="p-4 mb-4 text-sm text-yellow-800 bg-yellow-100 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">
|
||||
<x-callout type="warning" title="Permission Required" class="mb-4">
|
||||
You don't have permission to configure Cloudflare Tunnel for this server.
|
||||
</div>
|
||||
</x-callout>
|
||||
@endcan
|
||||
</div>
|
||||
@endif
|
||||
|
|
|
|||
|
|
@ -119,10 +119,9 @@
|
|||
</x-forms.button> --}}
|
||||
</div>
|
||||
@else
|
||||
<div
|
||||
class="p-4 mb-4 text-sm text-yellow-800 bg-yellow-100 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">
|
||||
<x-callout type="warning" title="Permission Required" class="mb-4">
|
||||
You don't have permission to configure proxy settings for this server.
|
||||
</div>
|
||||
</x-callout>
|
||||
@endcan
|
||||
</div>
|
||||
@endif
|
||||
|
|
|
|||
|
|
@ -62,9 +62,10 @@ class="mt-8 mb-4 w-full font-bold box-without-bg bg-coollabs hover:bg-coollabs-1
|
|||
</x-forms.button>
|
||||
@endif
|
||||
@if ($server->isForceDisabled() && isCloud())
|
||||
<div class="pt-4 font-bold text-red-500">The system has disabled the server because you have
|
||||
exceeded the
|
||||
number of servers for which you have paid.</div>
|
||||
<x-callout type="danger" title="Server Disabled" class="mt-4">
|
||||
The system has disabled the server because you have exceeded the
|
||||
number of servers for which you have paid.
|
||||
</x-callout>
|
||||
@endif
|
||||
<div class="flex flex-col gap-2 pt-4">
|
||||
<div class="flex flex-col gap-2 w-full lg:flex-row">
|
||||
|
|
|
|||
|
|
@ -66,12 +66,10 @@
|
|||
confirmationLabel="Please type the confirmation text to disable two step confirmation."
|
||||
shortConfirmationLabel="Confirmation text" />
|
||||
</div>
|
||||
<div class="w-full px-4 py-2 mb-4 text-white rounded-xs border-l-4 border-red-500 bg-error">
|
||||
<p class="font-bold">Warning!</p>
|
||||
<p>Disabling two step confirmation reduces security (as anyone can easily delete anything) and
|
||||
increases
|
||||
the risk of accidental actions. This is not recommended for production servers.</p>
|
||||
</div>
|
||||
<x-callout type="danger" title="Warning!" class="mb-4">
|
||||
Disabling two step confirmation reduces security (as anyone can easily delete anything) and
|
||||
increases the risk of accidental actions. This is not recommended for production servers.
|
||||
</x-callout>
|
||||
@endif
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -269,19 +269,9 @@ class=""
|
|||
helper="Necessary for adding Github Runners to repositories.<br><br>Administration: read & write" /> --}}
|
||||
</div>
|
||||
@else
|
||||
<div
|
||||
class="flex items-center gap-2 p-4 border border-red-500 rounded-lg bg-red-50 dark:bg-red-900/20">
|
||||
<svg class="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="font-semibold text-red-700 dark:text-red-300">Insufficient Permissions</div>
|
||||
<div class="text-sm text-red-600 dark:text-red-400">You don't have permission to create
|
||||
new GitHub Apps. Please contact your team administrator.</div>
|
||||
</div>
|
||||
</div>
|
||||
<x-callout type="danger" title="Insufficient Permissions">
|
||||
You don't have permission to create new GitHub Apps. Please contact your team administrator.
|
||||
</x-callout>
|
||||
@endcan
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -52,8 +52,7 @@ class="flex items-center justify-between w-full px-1 py-2 text-left select-none
|
|||
</x-forms.button>
|
||||
</form>
|
||||
@else
|
||||
<div class="text-gray-500 p-4 text-center">
|
||||
<p>You don't have permission to create new GitHub Apps.</p>
|
||||
<p class="text-sm">Please contact your team administrator for access.</p>
|
||||
</div>
|
||||
<x-callout type="warning" title="Permission Required">
|
||||
You don't have permission to create new GitHub Apps. Please contact your team administrator for access.
|
||||
</x-callout>
|
||||
@endcan
|
||||
|
|
|
|||
|
|
@ -24,8 +24,7 @@
|
|||
</form>
|
||||
</div>
|
||||
@else
|
||||
<div class="text-gray-500 p-4 text-center">
|
||||
<p>You don't have permission to create new S3 storage configurations.</p>
|
||||
<p class="text-sm">Please contact your team administrator for access.</p>
|
||||
</div>
|
||||
<x-callout type="warning" title="Permission Required">
|
||||
You don't have permission to create new S3 storage configurations. Please contact your team administrator for access.
|
||||
</x-callout>
|
||||
@endcan
|
||||
|
|
|
|||
|
|
@ -26,10 +26,11 @@
|
|||
<div class="text-xl font-bold dark:text-white">{{ currentTeam()->servers->count() }}</div>
|
||||
</div>
|
||||
@if (currentTeam()->serverOverflow())
|
||||
<div class="py-4"><span class="font-bold text-red-500">WARNING:</span> You must delete
|
||||
{{ currentTeam()->servers->count() - $server_limits }} servers,
|
||||
<x-callout type="danger" title="WARNING" class="my-4">
|
||||
You must delete {{ currentTeam()->servers->count() - $server_limits }} servers,
|
||||
or upgrade your subscription. {{ currentTeam()->servers->count() - $server_limits }} servers will be
|
||||
deactivated.</div>
|
||||
deactivated.
|
||||
</x-callout>
|
||||
@endif
|
||||
<x-forms.button class="gap-2" wire:click='stripeCustomerPortal'>Change Server Quantity
|
||||
</x-forms.button>
|
||||
|
|
|
|||
|
|
@ -55,10 +55,10 @@
|
|||
<div class="flex gap-2">
|
||||
<h1>Subscription</h1>
|
||||
</div>
|
||||
<div>You are not an admin so you cannot manage your Team's subscription. If this does not make sense, please
|
||||
<span class="underline cursor-pointer dark:text-white" wire:click="help">contact
|
||||
us</span>.
|
||||
</div>
|
||||
<x-callout type="warning" title="Permission Required">
|
||||
You are not an admin so you cannot manage your Team's subscription. If this does not make sense, please
|
||||
<span class="underline cursor-pointer dark:text-white" wire:click="help">contact us</span>.
|
||||
</x-callout>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue