refactor(proxy): streamline proxy configuration form layout and improve button placements

This commit is contained in:
Andras Bacsai
2025-09-22 09:54:29 +02:00
parent 26f22243b9
commit e2c5caf78c

View File

@@ -8,16 +8,16 @@
<h2>Configuration</h2> <h2>Configuration</h2>
@if ($server->proxy->status === 'exited' || $server->proxy->status === 'removing') @if ($server->proxy->status === 'exited' || $server->proxy->status === 'removing')
@can('update', $server) @can('update', $server)
<x-modal-confirmation title="Confirm Proxy Switching?" <x-modal-confirmation title="Confirm Proxy Switching?" buttonTitle="Switch Proxy"
buttonTitle="Switch Proxy" submitAction="changeProxy" :actions="['Custom proxy configurations may be reset to their default settings.']"
submitAction="changeProxy" :actions="[ warningMessage="This operation may cause issues. Please refer to the guide <a href='https://coolify.io/docs/knowledge-base/server/proxies#switch-between-proxies' target='_blank' class='underline text-white'>switching between proxies</a> before proceeding!"
'Custom proxy configurations may be reset to their default settings.' step2ButtonText="Switch Proxy" :confirmWithText="false" :confirmWithPassword="false">
]" warningMessage="This operation may cause issues. Please refer to the guide <a href='https://coolify.io/docs/knowledge-base/server/proxies#switch-between-proxies' target='_blank' class='underline text-white'>switching between proxies</a> before proceeding!" step2ButtonText="Switch Proxy" :confirmWithText="false" :confirmWithPassword="false">
</x-modal-confirmation> </x-modal-confirmation>
@endcan @endcan
@else @else
<x-forms.button canGate="update" :canResource="$server" <x-forms.button canGate="update" :canResource="$server"
wire:click="$dispatch('error', 'Currently running proxy must be stopped before switching proxy')">Switch Proxy</x-forms.button> wire:click="$dispatch('error', 'Currently running proxy must be stopped before switching proxy')">Switch
Proxy</x-forms.button>
@endif @endif
<x-forms.button canGate="update" :canResource="$server" type="submit">Save</x-forms.button> <x-forms.button canGate="update" :canResource="$server" type="submit">Save</x-forms.button>
</div> </div>
@@ -37,7 +37,10 @@
@endif @endif
</div> </div>
@php @php
$proxyTitle = $server->proxyType() === ProxyTypes::TRAEFIK->value ? 'Traefik (Coolify Proxy)' : 'Caddy (Coolify Proxy)'; $proxyTitle =
$server->proxyType() === ProxyTypes::TRAEFIK->value
? 'Traefik (Coolify Proxy)'
: 'Caddy (Coolify Proxy)';
@endphp @endphp
@if ($server->proxyType() === ProxyTypes::TRAEFIK->value || $server->proxyType() === 'CADDY') @if ($server->proxyType() === ProxyTypes::TRAEFIK->value || $server->proxyType() === 'CADDY')
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
@@ -45,13 +48,12 @@
@if ($proxySettings) @if ($proxySettings)
@can('update', $server) @can('update', $server)
<x-modal-confirmation title="Reset Proxy Configuration?" <x-modal-confirmation title="Reset Proxy Configuration?"
buttonTitle="Reset Configuration" buttonTitle="Reset Configuration" submitAction="resetProxyConfiguration"
submitAction="resetProxyConfiguration" :actions="[ :actions="[
'Reset proxy configuration to default settings', 'Reset proxy configuration to default settings',
'All custom configurations will be lost', 'All custom configurations will be lost',
'Custom ports and entrypoints will be removed', 'Custom ports and entrypoints will be removed',
]" ]" confirmationText="{{ $server->name }}"
confirmationText="{{ $server->name }}"
confirmationLabel="Please confirm by entering the server name below" confirmationLabel="Please confirm by entering the server name below"
shortConfirmationLabel="Server Name" step2ButtonText="Reset Configuration" shortConfirmationLabel="Server Name" step2ButtonText="Reset Configuration"
:confirmWithPassword="false" :confirmWithText="true"> :confirmWithPassword="false" :confirmWithText="true">
@@ -75,28 +77,8 @@
<div class="flex flex-col gap-2 pt-4"> <div class="flex flex-col gap-2 pt-4">
<x-forms.textarea canGate="update" :canResource="$server" useMonacoEditor <x-forms.textarea canGate="update" :canResource="$server" useMonacoEditor
monacoEditorLanguage="yaml" monacoEditorLanguage="yaml"
label="Configuration file ( {{ $this->configurationFilePath }} )" name="proxySettings" label="Configuration file ( {{ $this->configurationFilePath }} )"
id="proxySettings" rows="30" /> name="proxySettings" id="proxySettings" rows="30" />
@can('update', $server)
<x-modal-confirmation title="Reset Proxy Configuration?"
buttonTitle="Reset configuration to default" isErrorButton
submitAction="resetProxyConfiguration" :actions="[
'Reset proxy configuration to default settings',
'All custom configurations will be lost',
'Custom ports and entrypoints will be removed',
]"
confirmationText="{{ $server->name }}"
confirmationLabel="Please confirm by entering the server name below"
shortConfirmationLabel="Server Name" step2ButtonText="Reset Configuration"
:confirmWithPassword="false" :confirmWithText="true">
</x-modal-confirmation>
@endcan
</div>
<div class="flex flex-col gap-2 pt-2">
<x-forms.textarea canGate="update" :canResource="$server" useMonacoEditor
monacoEditorLanguage="yaml"
label="Configuration file ({{ $this->configurationFilePath }})" name="proxySettings"
id="proxySettings" rows="30" />
</div> </div>
@endif @endif
</div> </div>