From 0d3d5f40fdd640a70e379ad83430663d42f6f227 Mon Sep 17 00:00:00 2001
From: peaklabs-dev <122374094+peaklabs-dev@users.noreply.github.com>
Date: Thu, 12 Sep 2024 14:58:52 +0200
Subject: [PATCH 1/3] Fix: Css issue with advanced settings and remove cf
 tunnel in onboarding

---
 .../views/livewire/boarding/index.blade.php   | 29 +++++++------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/resources/views/livewire/boarding/index.blade.php b/resources/views/livewire/boarding/index.blade.php
index 7b7ef8c12..e5b2a5b06 100644
--- a/resources/views/livewire/boarding/index.blade.php
+++ b/resources/views/livewire/boarding/index.blade.php
@@ -273,27 +273,23 @@
                     Please let me know your server details.
                 </x-slot:question>
                 <x-slot:actions>
-                    <form wire:submit='saveServer' class="flex flex-col w-full gap-4 lg:pr-10">
-                        <div class="flex flex-col gap-2 lg:flex-row">
-                            <x-forms.input required placeholder="Choose a name for your Server. Could be anything."
-                                label="Name" id="remoteServerName" wire:model="remoteServerName" />
-                            <x-forms.input placeholder="Description, so others will know more about this."
-                                label="Description" id="remoteServerDescription"
-                                wire:model="remoteServerDescription" />
-                        </div>
-                        <div class="flex flex-col gap-2 lg:flex-row ">
-                            <x-forms.input required placeholder="127.0.0.1" label="IP Address" id="remoteServerHost"
-                                wire:model="remoteServerHost" />
-                        </div>
+                    <form wire:submit='saveServer' class="flex flex-col w-full gap-4 lg:w-96">
+                        <x-forms.input required placeholder="Choose a name for your Server. Could be anything."
+                            label="Name" id="remoteServerName" wire:model="remoteServerName" />
+                        <x-forms.input placeholder="Description, so others will know more about this."
+                            label="Description" id="remoteServerDescription"
+                            wire:model="remoteServerDescription" />
+                        <x-forms.input required placeholder="127.0.0.1" label="IP Address" id="remoteServerHost"
+                            wire:model="remoteServerHost" />
                         <div x-data="{ showAdvanced: false }" class="flex flex-col gap-2">
                             <button @click="showAdvanced = !showAdvanced" type="button"
                                 class="text-left text-sm text-gray-600 dark:text-gray-300 hover:underline">
                                 Advanced Settings
                             </button>
-                            <div x-show="showAdvanced" class="flex flex-col gap-2 lg:flex-row">
+                            <div x-show="showAdvanced" class="flex flex-col gap-2">
                                 <x-forms.input placeholder="Port number of your server. Default is 22." label="Port"
                                     id="remoteServerPort" wire:model="remoteServerPort" />
-                                <div class="w-full">
+                                <div>
                                     <x-forms.input placeholder="Default is root." label="User"
                                         id="remoteServerUser" wire:model="remoteServerUser" />
                                     <div class="text-xs text-gray-600 dark:text-gray-300">Non-root user is
@@ -303,11 +299,6 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="lg:w-64">
-                            <x-forms.checkbox
-                                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/setup Cloudflare (cloudflared) on your server.</span>"
-                                id="isCloudflareTunnel" label="Cloudflare Tunnel" wire:model="isCloudflareTunnel" />
-                        </div>
                         <x-forms.button type="submit">Continue</x-forms.button>
                     </form>
                 </x-slot:actions>

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 2/3] 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>

From b9b33c831c767434ef4664b56db0a988b61fd7ff Mon Sep 17 00:00:00 2001
From: peaklabs-dev <122374094+peaklabs-dev@users.noreply.github.com>
Date: Thu, 12 Sep 2024 17:17:19 +0200
Subject: [PATCH 3/3] Fix: Made help text more clear

---
 resources/views/livewire/server/form.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/livewire/server/form.blade.php b/resources/views/livewire/server/form.blade.php
index e939e6541..ce33c7524 100644
--- a/resources/views/livewire/server/form.blade.php
+++ b/resources/views/livewire/server/form.blade.php
@@ -131,7 +131,7 @@
                             <x-forms.checkbox instantSave id="server.settings.is_cloudflare_tunnel" label="Enabled" />
                         @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>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>
                         @endif