From b28875c6123cc4e513cd1d2d7fa43d4708b40a3b Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Fri, 10 Oct 2025 15:40:20 +0200
Subject: [PATCH] fix: update cloud provider token form with improved
 placeholder and guidance for API token creation

---
 .../cloud-provider-token-form.blade.php       | 32 +++++++++++++------
 .../livewire/server/new/by-hetzner.blade.php  | 30 ++++++++---------
 2 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/resources/views/livewire/security/cloud-provider-token-form.blade.php b/resources/views/livewire/security/cloud-provider-token-form.blade.php
index b82fff35a..ae25ba995 100644
--- a/resources/views/livewire/security/cloud-provider-token-form.blade.php
+++ b/resources/views/livewire/security/cloud-provider-token-form.blade.php
@@ -14,10 +14,19 @@
             <x-forms.input required id="name" label="Token Name"
                 placeholder="e.g., Production Hetzner. tip: add Hetzner project name to identify easier" />
 
-            <x-forms.input required type="password" id="token" label="API Token" placeholder="Enter your API token"
-                helper="Your {{ ucfirst($provider) }} Cloud API token. You can create one in your <a href='{{ $provider === 'hetzner' ? 'https://console.hetzner.cloud/' : '#' }}' target='_blank' class='underline dark:text-white'>{{ ucfirst($provider) }} Console</a>." />
+            <x-forms.input required type="password" id="token" label="API Token"
+                placeholder="Enter your API token" />
 
-            <x-forms.button type="submit">Add Token</x-forms.button>
+            @if (auth()->user()->currentTeam()->cloudProviderTokens->where('provider', $provider)->isEmpty())
+                <div class="text-sm text-neutral-500 dark:text-neutral-400">
+                    Create an API token in the <a
+                        href='{{ $provider === 'hetzner' ? 'https://console.hetzner.com/projects' : '#' }}'
+                        target='_blank' class='underline dark:text-white'>{{ ucfirst($provider) }} Console</a> → choose
+                    Project → Security → API Tokens.
+                </div>
+            @endif
+
+            <x-forms.button type="submit">Validate & Add Token</x-forms.button>
         @else
             {{-- Full page layout: horizontal, spacious --}}
             <div class="flex gap-2 items-end flex-wrap">
@@ -32,13 +41,18 @@
                         placeholder="e.g., Production Hetzner. tip: add Hetzner project name to identify easier" />
                 </div>
             </div>
-            <div class="flex gap-2 items-end flex-wrap">
-                <div class="flex-1 min-w-64">
-                    <x-forms.input required type="password" id="token" label="API Token"
-                        placeholder="Enter your API token" />
-                </div>
-                <x-forms.button type="submit">Add Token</x-forms.button>
+            <div class="flex-1 min-w-64">
+                <x-forms.input required type="password" id="token" label="API Token"
+                    placeholder="Enter your API token" />
+                @if (auth()->user()->currentTeam()->cloudProviderTokens->where('provider', $provider)->isEmpty())
+                    <div class="text-sm text-neutral-500 dark:text-neutral-400 mt-2">
+                        Create an API token in the <a href='https://console.hetzner.com/projects' target='_blank'
+                            class='underline dark:text-white'>Hetzner Console</a> → choose Project → Security → API
+                        Tokens.
+                    </div>
+                @endif
             </div>
+            <x-forms.button type="submit">Validate & Add Token</x-forms.button>
         @endif
     </form>
 </div>
diff --git a/resources/views/livewire/server/new/by-hetzner.blade.php b/resources/views/livewire/server/new/by-hetzner.blade.php
index b8191593d..c0067c945 100644
--- a/resources/views/livewire/server/new/by-hetzner.blade.php
+++ b/resources/views/livewire/server/new/by-hetzner.blade.php
@@ -99,22 +99,6 @@
                         </x-forms.select>
                     </div>
 
-                    <div>
-                        <x-forms.datalist
-                            label="Additional SSH Keys (from Hetzner)"
-                            id="selectedHetznerSshKeyIds"
-                            helper="Select existing SSH keys from your Hetzner account to add to this server. The Coolify SSH key will be automatically added."
-                            :multiple="true"
-                            :disabled="count($hetznerSshKeys) === 0"
-                            :placeholder="count($hetznerSshKeys) > 0 ? 'Search and select SSH keys...' : 'No SSH keys found in Hetzner account'">
-                            @foreach ($hetznerSshKeys as $sshKey)
-                                <option value="{{ $sshKey['id'] }}">
-                                    {{ $sshKey['name'] }} - {{ substr($sshKey['fingerprint'], 0, 20) }}...
-                                </option>
-                            @endforeach
-                        </x-forms.datalist>
-                    </div>
-
                     <div>
                         <x-forms.select label="Private Key" id="private_key_id" required>
                             <option value="">Select a private key...</option>
@@ -125,7 +109,19 @@
                             @endforeach
                         </x-forms.select>
                     </div>
-
+                    <div>
+                        <x-forms.datalist label="Additional SSH Keys (from Hetzner)" id="selectedHetznerSshKeyIds"
+                            helper="Select existing SSH keys from your Hetzner account to add to this server. The Coolify SSH key will be automatically added."
+                            :multiple="true" :disabled="count($hetznerSshKeys) === 0" :placeholder="count($hetznerSshKeys) > 0
+                                ? 'Search and select SSH keys...'
+                                : 'No SSH keys found in Hetzner account'">
+                            @foreach ($hetznerSshKeys as $sshKey)
+                                <option value="{{ $sshKey['id'] }}">
+                                    {{ $sshKey['name'] }} - {{ substr($sshKey['fingerprint'], 0, 20) }}...
+                                </option>
+                            @endforeach
+                        </x-forms.datalist>
+                    </div>
                     <div class="flex gap-2 justify-between">
                         <x-forms.button type="button" wire:click="previousStep">
                             Back