mirror of
https://github.com/tiennm99/coolify.git
synced 2026-08-20 06:23:23 +00:00
Andras Bacsai
5b517f21be
Add full-width and centered layout preferences across the app shell and workspaces. Replace page-size selects with dropdowns and add searchable breadcrumb switching.
120 lines
6.9 KiB
PHP
120 lines
6.9 KiB
PHP
<div>
|
|
<x-slot:title>
|
|
{{ data_get_str($server, 'name')->limit(10) }} > Cloudflare Tunnel | Coolify
|
|
</x-slot>
|
|
|
|
<livewire:server.navbar :server="$server" />
|
|
|
|
<div
|
|
class="server-settings-workspace application-settings-workspace mt-4 grid w-full max-w-none min-w-0 gap-8 lg:mt-0 xl:grid-cols-[210px_minmax(0,1fr)] xl:gap-8">
|
|
<x-server.sidebar :server="$server" activeMenu="cloudflare-tunnel" />
|
|
|
|
<div class="application-settings-form flex w-full flex-col gap-6">
|
|
<x-application.settings-section id="server-cloudflare-overview-section" title="Cloudflare Tunnel"
|
|
helper="Proxy SSH traffic through Cloudflare so the server SSH port can remain closed.">
|
|
<x-slot:actions>
|
|
<x-status-badge :status="$isCloudflareTunnelsEnabled ? 'Enabled' : 'Disabled'"
|
|
:type="$isCloudflareTunnelsEnabled ? 'success' : 'neutral'" />
|
|
</x-slot:actions>
|
|
|
|
@if ($isCloudflareTunnelsEnabled)
|
|
<x-callout type="warning" title="Disabling the tunnel can interrupt server access">
|
|
The server IP must be restored to its direct address after disabling the tunnel.
|
|
</x-callout>
|
|
<div class="mt-4">
|
|
<x-modal-confirmation title="Disable Cloudflare Tunnel?"
|
|
buttonTitle="Disable Cloudflare Tunnel" isErrorButton
|
|
submitAction="toggleCloudflareTunnels" :actions="$server->ip_previous
|
|
? [
|
|
'Cloudflare Tunnel will be disabled for this server.',
|
|
'The server IP address will be restored to its previous value.',
|
|
]
|
|
: [
|
|
'Cloudflare Tunnel will be disabled for this server.',
|
|
'You must manually restore the direct server IP address.',
|
|
'The server may become inaccessible until the IP is corrected.',
|
|
]"
|
|
confirmationText="DISABLE CLOUDFLARE TUNNEL"
|
|
confirmationLabel="Type the confirmation text to disable Cloudflare Tunnel."
|
|
shortConfirmationLabel="Confirmation text" />
|
|
</div>
|
|
@elseif (!$server->isFunctional())
|
|
<x-callout type="info" title="Validate the server for automated setup">
|
|
Automated configuration requires a validated server, a Cloudflare token, and an SSH domain.
|
|
You can also
|
|
<button type="button" wire:click="manualCloudflareConfig" class="font-medium underline">
|
|
mark a manual configuration as complete
|
|
</button>.
|
|
</x-callout>
|
|
@else
|
|
<p class="text-sm leading-6 text-neutral-600 dark:text-fg-dim">
|
|
Choose automated setup to install and configure cloudflared, or confirm that you already
|
|
configured the tunnel manually.
|
|
</p>
|
|
@endif
|
|
</x-application.settings-section>
|
|
|
|
@if (!$isCloudflareTunnelsEnabled && $server->isFunctional())
|
|
<x-application.settings-section id="server-cloudflare-automated-section" title="Automated setup"
|
|
helper="Let Coolify configure the Cloudflare SSH tunnel on this server.">
|
|
<x-slot:actions>
|
|
<a class="button"
|
|
href="https://coolify.io/docs/knowledge-base/cloudflare/tunnels/server-ssh"
|
|
target="_blank">
|
|
Documentation
|
|
<x-external-link />
|
|
</a>
|
|
</x-slot:actions>
|
|
|
|
@cannot('update', $server)
|
|
<x-callout type="danger" title="Insufficient permissions">
|
|
You do not have permission to configure Cloudflare Tunnel for this server.
|
|
</x-callout>
|
|
@else
|
|
<x-process-dialog @automated.window="processDialogOpen = true" closeWithX size="xl">
|
|
<x-slot:title>Cloudflare Tunnel Configuration</x-slot:title>
|
|
<x-slot:content>
|
|
<livewire:activity-monitor header="Logs" fullHeight />
|
|
</x-slot:content>
|
|
</x-process-dialog>
|
|
<form @submit.prevent="$wire.dispatch('automatedCloudflareConfig')">
|
|
<div class="grid gap-4 lg:grid-cols-2">
|
|
<x-forms.input id="cloudflare_token" required label="Cloudflare token"
|
|
type="password" />
|
|
<x-forms.input id="ssh_domain" label="SSH domain" required
|
|
helper="Enter the hostname configured in Cloudflare without a protocol." />
|
|
</div>
|
|
<div class="mt-4 flex justify-end">
|
|
<x-forms.button type="submit" isHighlighted>Configure tunnel</x-forms.button>
|
|
</div>
|
|
</form>
|
|
@endcannot
|
|
</x-application.settings-section>
|
|
|
|
<x-application.settings-section id="server-cloudflare-manual-section" title="Manual setup"
|
|
helper="Use this only after cloudflared and the Cloudflare tunnel are already configured.">
|
|
@can('update', $server)
|
|
<x-modal-confirmation title="Confirm manual Cloudflare Tunnel configuration"
|
|
buttonTitle="I configured the tunnel manually"
|
|
submitAction="manualCloudflareConfig" :actions="[
|
|
'Cloudflare and cloudflared have already been configured.',
|
|
'An incomplete setup can make the server unreachable.',
|
|
]" confirmationText="I manually configured Cloudflare Tunnel"
|
|
confirmationLabel="Type the confirmation text to continue."
|
|
shortConfirmationLabel="Confirmation text" />
|
|
@endcan
|
|
</x-application.settings-section>
|
|
|
|
@script
|
|
<script>
|
|
$wire.$on('automatedCloudflareConfig', () => {
|
|
window.dispatchEvent(new CustomEvent('automated'));
|
|
$wire.$call('automatedCloudflareConfig');
|
|
});
|
|
</script>
|
|
@endscript
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|