fix: cloudflare tunnel configuration, ui, etc

This commit is contained in:
Andras Bacsai
2024-09-23 23:18:23 +02:00
parent 480ae3de8a
commit 688c27c901
10 changed files with 108 additions and 38 deletions

View File

@@ -5,7 +5,7 @@
<div class="pb-4">This will stop your containers, delete all related data, etc. Beware! There is no coming back!
</div>
<x-modal-confirmation title="Confirm Resource Deletion?" buttonTitle="Delete" isErrorButton submitAction="delete"
buttonTitle="Delete" :checkboxes="$checkboxes" :actions="['All containers of this resource will be stopped and permanently deleted.']" confirmationText="{{ $resourceName }}"
buttonTitle="Delete" :checkboxes="$checkboxes" :actions="['Permanently delete all containers of this resource.']" confirmationText="{{ $resourceName }}"
confirmationLabel="Please confirm the execution of the actions by entering the NAME of the resource below"
shortConfirmationLabel="Resource Name" step3ButtonText="Delete Permanently" />
shortConfirmationLabel="Resource Name" step3ButtonText="Permanently Delete" />
</div>

View File

@@ -1,6 +1,6 @@
<form wire:submit.prevent='submit' class="flex flex-col w-full gap-2">
<x-forms.input id="cloudflare_token" required label="Cloudflare Token" />
<form wire:submit.prevent='submit' class="flex flex-col gap-2 w-full">
<x-forms.input id="cloudflare_token" required label="Cloudflare Token" type="password" />
<x-forms.input id="ssh_domain" label="Configured SSH Domain" required
helper="The SSH Domain you configured in Cloudflare. Make sure there is no protocol like http(s):// so you provide a FQDN not a URL." />
<x-forms.button type="submit" isHighlighted @click="modalOpen=false">Automated Configuration</x-forms.button>
helper="The SSH domain you configured in Cloudflare. Make sure there is no protocol like http(s):// so you provide a FQDN not a URL. <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/cloudflare/tunnels/#automated' target='_blank'>Documentation</a>" />
<x-forms.button type="submit" isHighlighted @click="modalOpen=false">Continue</x-forms.button>
</form>

View File

@@ -117,37 +117,51 @@
</div>
</div>
<div class="w-96">
<div class="{{ $server->isFunctional() ? 'w-96' : 'w-full' }}">
@if (!$server->isLocalhost())
<x-forms.checkbox instantSave id="server.settings.is_build_server"
label="Use it as a build server?" />
<div class="flex flex-col gap-2 pt-6">
<div class="flex items-center gap-1">
<div class="flex gap-1 items-center">
<h3 class="text-lg font-semibold">Cloudflare Tunnels</h3>
<x-helper class="inline-flex"
helper="If you are using Cloudflare Tunnels, enable this. It will proxy all SSH requests to your server through Cloudflare.<br> You then can close your server's SSH port in the firewall of your hosting provider.<br><span class='dark:text-warning'>If you choose manual configuration, Coolify does not install or set up Cloudflare (cloudflared) on your server.</span>" />
</div>
@if ($server->settings->is_cloudflare_tunnel)
<x-forms.checkbox instantSave id="server.settings.is_cloudflare_tunnel" label="Enabled" />
<div class="w-64">
<x-forms.checkbox instantSave id="server.settings.is_cloudflare_tunnel" label="Enabled" />
</div>
@elseif (!$server->isFunctional())
<div class="p-4 mb-4 text-sm text-yellow-800 bg-yellow-100 rounded-lg dark:bg-yellow-900 dark:text-yellow-300">
<p>Please select manual cloudflare tunnel configuration (first then hit validate server) or validate the server first and then you can select automatic configuration.</p>
<p class="mt-2">For more information, please read our <a href="https://coolify.io/docs/knowledge-base/cloudflare/tunnels/" target="_blank" class="font-medium underline hover:text-yellow-600 dark:hover:text-yellow-200">Documentation</a>.</p>
<div class="p-4 mb-4 w-full text-sm text-yellow-800 bg-yellow-100 rounded dark:bg-yellow-900 dark:text-yellow-300">
<x-slide-over closeWithX fullScreen>
<x-slot:title>Validate & configure</x-slot:title>
<x-slot:content>
<livewire:server.validate-and-install :server="$server" />
</x-slot:content>
To <span class="font-semibold">automatically</span> configure Cloudflare Tunnels, please click
<span @click="slideOverOpen=true"
wire:click.prevent='validateServer' class="underline cursor-pointer">
here.</span> You will need a Cloudflare token and domain.
</x-slide-over>
<br/>
To <span class="font-semibold">manually</span> configure Cloudflare Tunnels, please click <span wire:click="manualCloudflareConfig" class="underline cursor-pointer">here</span>, then you should validate the server.
<br/><br/>
For more information, please read our <a href="https://coolify.io/docs/knowledge-base/cloudflare/tunnels/" target="_blank" class="font-medium underline hover:text-yellow-600 dark:hover:text-yellow-200">documentation</a>.
</div>
@endif
@if (!$server->settings->is_cloudflare_tunnel && $server->isFunctional())
<x-modal-input buttonTitle="Automatic Configuration" title="Cloudflare Tunnels" class="w-full">
<x-modal-input buttonTitle="Automated Configuration" title="Cloudflare Tunnels" class="w-full">
<livewire:server.configure-cloudflare-tunnels :server_id="$server->id" />
</x-modal-input>
@endif
@if (!$server->settings->is_cloudflare_tunnel)
<x-forms.button wire:click="manualCloudflareConfig" class="w-full">
@if ($server->isFunctional() &&!$server->settings->is_cloudflare_tunnel)
<div wire:click="manualCloudflareConfig" class="w-full underline cursor-pointer">
I have configured Cloudflare Tunnels manually
</x-forms.button>
</div>
@endif
</div>
@if (!$server->isBuildServer())
@if (!$server->isBuildServer() && !$server->settings->is_cloudflare_tunnel)
<h3 class="pt-6">Swarm <span class="text-xs text-neutral-500">(experimental)</span></h3>
<div class="pb-4">Read the docs <a class='underline dark:text-white'
href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>.