From 9310af0301a62a99c441837d77a28428f6d9238a Mon Sep 17 00:00:00 2001
From: peaklabs-dev <122374094+peaklabs-dev@users.noreply.github.com>
Date: Thu, 12 Sep 2024 15:50:22 +0200
Subject: [PATCH] Feat: New cf tunnel install flow

---
 app/Livewire/Server/Form.php                  |  8 ++
 .../configure-cloudflare-tunnels.blade.php    |  4 +-
 .../views/livewire/server/form.blade.php      | 96 +++++++++----------
 3 files changed, 55 insertions(+), 53 deletions(-)

diff --git a/app/Livewire/Server/Form.php b/app/Livewire/Server/Form.php
index 3b3747a81..ddf2b6ccb 100644
--- a/app/Livewire/Server/Form.php
+++ b/app/Livewire/Server/Form.php
@@ -238,4 +238,12 @@ class Form extends Component
         $this->server->settings->save();
         $this->dispatch('success', 'Server timezone updated.');
     }
+
+    public function manualCloudflareConfig()
+    {
+        $this->server->settings->is_cloudflare_tunnel = true;
+        $this->server->settings->save();
+        $this->server->refresh();
+        $this->dispatch('success', 'Cloudflare Tunnels enabled.');
+    }
 }
diff --git a/resources/views/livewire/server/configure-cloudflare-tunnels.blade.php b/resources/views/livewire/server/configure-cloudflare-tunnels.blade.php
index 4aaf9203f..509d57d1f 100644
--- a/resources/views/livewire/server/configure-cloudflare-tunnels.blade.php
+++ b/resources/views/livewire/server/configure-cloudflare-tunnels.blade.php
@@ -2,7 +2,5 @@
     <x-forms.input id="cloudflare_token" required label="Cloudflare Token" />
     <x-forms.input id="ssh_domain" label="Configured SSH Domain" required
         helper="The SSH Domain you configured in Cloudflare" />
-    <x-forms.button type="submit" isHighlighted @click="modalOpen=false">Automated Configuration (experimental)</x-forms.button>
-    <h3 class="text-center">Or</h3>
-    <x-forms.button  wire:click.prevent='alreadyConfigured' @click="modalOpen=false">I have already set up the tunnel manually on the server.</x-forms.button>
+    <x-forms.button type="submit" isHighlighted @click="modalOpen=false">Automated Configuration</x-forms.button>
 </form>
diff --git a/resources/views/livewire/server/form.blade.php b/resources/views/livewire/server/form.blade.php
index d2c60f701..e939e6541 100644
--- a/resources/views/livewire/server/form.blade.php
+++ b/resources/views/livewire/server/form.blade.php
@@ -117,65 +117,61 @@
                     </div>
                 </div>
             </div>
-            <div class="w-64">
-                @if ($server->isFunctional())
-                    @if (!$server->isLocalhost())
-                        <x-forms.checkbox instantSave id="server.settings.is_build_server"
-                            label="Use it as a build server?" />
-                        <div class="flex items-center gap-1 pt-6">
-                            <h3 class="">Cloudflare Tunnels
-                            </h3>
+            <div class="w-96">
+                @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">
+                            <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><span class='dark:text-warning'>Coolify does not install or set up Cloudflare (cloudflared) on your server.</span>" />
+                                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" />
-                        @else
-                            <x-modal-input buttonTitle="Configure" title="Cloudflare Tunnels">
+                        @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 validate the server first. The SSH port needs to be open in the firewall on your hosting provider that coolify can validate the server and automatically configure cloudflare tunnels.</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>
+                        @endif
+                        @if (!$server->settings->is_cloudflare_tunnel && $server->isFunctional())
+                            <x-modal-input buttonTitle="Automatic Configuration" title="Cloudflare Tunnels" class="w-full">
                                 <livewire:server.configure-cloudflare-tunnels :server_id="$server->id" />
                             </x-modal-input>
                         @endif
-                        @if (!$server->isBuildServer())
-                            <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>.
-                            </div>
-                            @if ($server->settings->is_swarm_worker)
-                                <x-forms.checkbox disabled instantSave type="checkbox"
-                                    id="server.settings.is_swarm_manager"
-                                    helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
-                                    label="Is it a Swarm Manager?" />
-                            @else
-                                <x-forms.checkbox instantSave type="checkbox" id="server.settings.is_swarm_manager"
-                                    helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
-                                    label="Is it a Swarm Manager?" />
-                            @endif
-
-                            @if ($server->settings->is_swarm_manager)
-                                <x-forms.checkbox disabled instantSave type="checkbox"
-                                    id="server.settings.is_swarm_worker"
-                                    helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
-                                    label="Is it a Swarm Worker?" />
-                            @else
-                                <x-forms.checkbox instantSave type="checkbox" id="server.settings.is_swarm_worker"
-                                    helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
-                                    label="Is it a Swarm Worker?" />
-                            @endif
+                        @if (!$server->settings->is_cloudflare_tunnel)
+                            <x-forms.button wire:click="manualCloudflareConfig" class="w-full">
+                                I have configured Cloudflare Tunnels manually
+                            </x-forms.button>
                         @endif
-                    @endif
-                @else
-                    <div class="flex items-center gap-1 pt-6">
-                        <h3 class="">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><span class='dark:text-warning'>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" />
-                    @else
-                        <x-modal-input buttonTitle="Configure" title="Cloudflare Tunnels">
-                            <livewire:server.configure-cloudflare-tunnels :server_id="$server->id" />
-                        </x-modal-input>
+                    @if (!$server->isBuildServer())
+                        <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>.
+                        </div>
+                        @if ($server->settings->is_swarm_worker)
+                            <x-forms.checkbox disabled instantSave type="checkbox"
+                                id="server.settings.is_swarm_manager"
+                                helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
+                                label="Is it a Swarm Manager?" />
+                        @else
+                            <x-forms.checkbox instantSave type="checkbox" id="server.settings.is_swarm_manager"
+                                helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
+                                label="Is it a Swarm Manager?" />
+                        @endif
+
+                        @if ($server->settings->is_swarm_manager)
+                            <x-forms.checkbox disabled instantSave type="checkbox"
+                                id="server.settings.is_swarm_worker"
+                                helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
+                                label="Is it a Swarm Worker?" />
+                        @else
+                            <x-forms.checkbox instantSave type="checkbox" id="server.settings.is_swarm_worker"
+                                helper="For more information, please read the documentation <a class='dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/swarm' target='_blank'>here</a>."
+                                label="Is it a Swarm Worker?" />
+                        @endif
                     @endif
                 @endif
             </div>