refactor(proxy): streamline proxy configuration form layout and improve button placements
This commit is contained in:
Andras Bacsai
@@ -4,25 +4,25 @@
|
|||||||
<div x-init="$wire.loadProxyConfiguration">
|
<div x-init="$wire.loadProxyConfiguration">
|
||||||
@if ($selectedProxy !== 'NONE')
|
@if ($selectedProxy !== 'NONE')
|
||||||
<form wire:submit='submit'>
|
<form wire:submit='submit'>
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2">
|
||||||
<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
|
||||||
wire:click="$dispatch('error', 'Currently running proxy must be stopped before switching proxy')">Switch Proxy</x-forms.button>
|
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>
|
||||||
<div class="subtitle">Configure your proxy settings and advanced options.</div>
|
<div class="subtitle">Configure your proxy settings and advanced options.</div>
|
||||||
<h3>Advanced</h3>
|
<h3>Advanced</h3>
|
||||||
<div class="pb-6 w-96">
|
<div class="pb-6 w-96">
|
||||||
<x-forms.checkbox canGate="update" :canResource="$server"
|
<x-forms.checkbox canGate="update" :canResource="$server"
|
||||||
helper="If set, all resources will only have docker container labels for {{ str($server->proxyType())->title() }}.<br>For applications, labels needs to be regenerated manually. <br>Resources needs to be restarted."
|
helper="If set, all resources will only have docker container labels for {{ str($server->proxyType())->title() }}.<br>For applications, labels needs to be regenerated manually. <br>Resources needs to be restarted."
|
||||||
@@ -36,30 +36,32 @@
|
|||||||
id="redirectUrl" label="Redirect to (optional)" />
|
id="redirectUrl" label="Redirect to (optional)" />
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
@php
|
@php
|
||||||
$proxyTitle = $server->proxyType() === ProxyTypes::TRAEFIK->value ? 'Traefik (Coolify Proxy)' : 'Caddy (Coolify Proxy)';
|
$proxyTitle =
|
||||||
@endphp
|
$server->proxyType() === ProxyTypes::TRAEFIK->value
|
||||||
@if ($server->proxyType() === ProxyTypes::TRAEFIK->value || $server->proxyType() === 'CADDY')
|
? 'Traefik (Coolify Proxy)'
|
||||||
<div class="flex items-center gap-2">
|
: 'Caddy (Coolify Proxy)';
|
||||||
<h3>{{ $proxyTitle }}</h3>
|
@endphp
|
||||||
@if($proxySettings)
|
@if ($server->proxyType() === ProxyTypes::TRAEFIK->value || $server->proxyType() === 'CADDY')
|
||||||
@can('update', $server)
|
<div class="flex items-center gap-2">
|
||||||
<x-modal-confirmation title="Reset Proxy Configuration?"
|
<h3>{{ $proxyTitle }}</h3>
|
||||||
buttonTitle="Reset Configuration"
|
@if ($proxySettings)
|
||||||
submitAction="resetProxyConfiguration" :actions="[
|
@can('update', $server)
|
||||||
'Reset proxy configuration to default settings',
|
<x-modal-confirmation title="Reset Proxy Configuration?"
|
||||||
'All custom configurations will be lost',
|
buttonTitle="Reset Configuration" submitAction="resetProxyConfiguration"
|
||||||
'Custom ports and entrypoints will be removed',
|
:actions="[
|
||||||
]"
|
'Reset proxy configuration to default settings',
|
||||||
confirmationText="{{ $server->name }}"
|
'All custom configurations will be lost',
|
||||||
confirmationLabel="Please confirm by entering the server name below"
|
'Custom ports and entrypoints will be removed',
|
||||||
shortConfirmationLabel="Server Name" step2ButtonText="Reset Configuration"
|
]" confirmationText="{{ $server->name }}"
|
||||||
:confirmWithPassword="false" :confirmWithText="true">
|
confirmationLabel="Please confirm by entering the server name below"
|
||||||
</x-modal-confirmation>
|
shortConfirmationLabel="Server Name" step2ButtonText="Reset Configuration"
|
||||||
@endcan
|
:confirmWithPassword="false" :confirmWithText="true">
|
||||||
@endif
|
</x-modal-confirmation>
|
||||||
</div>
|
@endcan
|
||||||
@endif
|
@endif
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
@if (
|
@if (
|
||||||
$server->proxy->last_applied_settings &&
|
$server->proxy->last_applied_settings &&
|
||||||
$server->proxy->last_saved_settings !== $server->proxy->last_applied_settings)
|
$server->proxy->last_saved_settings !== $server->proxy->last_applied_settings)
|
||||||
@@ -75,29 +77,9 @@
|
|||||||
<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>
|
||||||
<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>
|
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
Reference in New Issue
Block a user