From 3f467103094006dcbbf9c76d2725d62ebcb09211 Mon Sep 17 00:00:00 2001
From: Cornelis Terblanche <corry@nibbleabit.com>
Date: Mon, 8 Jun 2026 18:25:42 +0200
Subject: [PATCH] Refine cloud provider token form

---
 .../cloud-provider-token-form.blade.php       | 95 +++++++++++--------
 .../security/cloud-provider-tokens.blade.php  |  2 +-
 tests/Unit/CloudProviderTokenFormViewTest.php | 16 ++++
 3 files changed, 71 insertions(+), 42 deletions(-)
 create mode 100644 tests/Unit/CloudProviderTokenFormViewTest.php

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 d5b1b4727..56c53d869 100644
--- a/resources/views/livewire/security/cloud-provider-token-form.blade.php
+++ b/resources/views/livewire/security/cloud-provider-token-form.blade.php
@@ -3,28 +3,67 @@
         @if ($modal_mode)
             {{-- Modal layout: vertical, compact --}}
             @if (!isset($provider) || empty($provider) || $provider === '')
-                <x-forms.select required id="provider" label="Provider">
+                <x-forms.select required id="provider" label="Provider" wire:model.live="provider">
                     <option value="hetzner">Hetzner</option>
-                    <option value="digitalocean">DigitalOcean</option>
+                    <option disabled value="digitalocean">DigitalOcean</option>
                     <option value="vultr">Vultr</option>
                 </x-forms.select>
             @else
                 <input type="hidden" wire:model="provider" />
             @endif
 
-            <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 id="name" label="Token Name" placeholder="e.g., Production cloud token" />
 
             <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">
+            <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' : ($provider === 'vultr' ? 'https://console.vultr.com/user/apiaccess/' : '#') }}'
+                    target='_blank' class='underline dark:text-white'>{{ ucfirst($provider) }} Console</a>.
+                @if ($provider === 'hetzner')
+                    Choose Project → Security → API Tokens.
+                    <br><br>
+                    Don't have a Hetzner account? <a href='https://coolify.io/hetzner' target='_blank'
+                        class='underline dark:text-white'>Sign up here</a>
+                    <br>
+                    <span class="text-xs">(Coolify's affiliate link, only new accounts - supports us (€10)
+                        and gives you €20)</span>
+                @endif
+                @if ($provider === 'vultr')
+                    Open Account → API Access.
+                    <br><br>
+                    Don't have a Vultr account? <a href='https://www.vultr.com/register-steps/' target='_blank'
+                        class='underline dark:text-white'>Sign up here</a>
+                    <br>
+                    <span class="text-xs">Coolify's affiliate link, only new accounts - supports us</span>
+                @endif
+            </div>
+
+            <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">
+                <div class="w-64">
+                    <x-forms.select required id="provider" label="Provider" wire:model.live="provider">
+                        <option value="hetzner">Hetzner</option>
+                        <option disabled value="digitalocean">DigitalOcean</option>
+                        <option value="vultr">Vultr</option>
+                    </x-forms.select>
+                </div>
+                <div class="flex-1 min-w-64">
+                    <x-forms.input required id="name" label="Token Name" placeholder="e.g., Production cloud token" />
+                </div>
+            </div>
+            <div class="flex-1 min-w-64">
+                <x-forms.input required type="password" id="token" label="API Token"
+                    placeholder="Enter your API token" />
+                <div class="text-sm text-neutral-500 dark:text-neutral-400 mt-2">
                     Create an API token in the <a
-                        href='{{ $provider === 'hetzner' ? 'https://console.hetzner.com/projects' : ($provider === 'vultr' ? 'https://my.vultr.com/settings/#settingsapi' : '#') }}'
-                        target='_blank' class='underline dark:text-white'>{{ ucfirst($provider) }} Console</a> → choose
-                    Project → Security → API Tokens.
+                        href='{{ $provider === 'hetzner' ? 'https://console.hetzner.com/projects' : ($provider === 'vultr' ? 'https://console.vultr.com/user/apiaccess/' : '#') }}'
+                        target='_blank' class='underline dark:text-white'>{{ ucfirst($provider) }} Console</a>.
                     @if ($provider === 'hetzner')
+                        Choose Project → Security → API Tokens.
                         <br><br>
                         Don't have a Hetzner account? <a href='https://coolify.io/hetzner' target='_blank'
                             class='underline dark:text-white'>Sign up here</a>
@@ -32,41 +71,15 @@ class='underline dark:text-white'>Sign up here</a>
                         <span class="text-xs">(Coolify's affiliate link, only new accounts - supports us (€10)
                             and gives you €20)</span>
                     @endif
-                </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">
-                <div class="w-64">
-                    <x-forms.select required id="provider" label="Provider" disabled>
-                        <option value="hetzner" selected>Hetzner</option>
-                        <option value="digitalocean">DigitalOcean</option>
-                        <option value="vultr">Vultr</option>
-                    </x-forms.select>
-                </div>
-                <div class="flex-1 min-w-64">
-                    <x-forms.input required id="name" label="Token Name"
-                        placeholder="e.g., Production Hetzner. tip: add Hetzner project name to identify easier" />
-                </div>
-            </div>
-            <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.
+                    @if ($provider === 'vultr')
+                        Open Account → API Access.
                         <br><br>
-                        Don't have a Hetzner account? <a href='https://coolify.io/hetzner' target='_blank'
+                        Don't have a Vultr account? <a href='https://www.vultr.com/register-steps/' target='_blank'
                             class='underline dark:text-white'>Sign up here</a>
                         <br>
-                        <span class="text-xs">(Coolify's affiliate link, only new accounts - supports us (€10)
-                            and gives you €20)</span>
-                    </div>
-                @endif
+                        <span class="text-xs">Coolify's affiliate link, only new accounts - supports us</span>
+                    @endif
+                </div>
             </div>
             <x-forms.button type="submit">Validate & Add Token</x-forms.button>
         @endif
diff --git a/resources/views/livewire/security/cloud-provider-tokens.blade.php b/resources/views/livewire/security/cloud-provider-tokens.blade.php
index 6369134a8..ec7bc976f 100644
--- a/resources/views/livewire/security/cloud-provider-tokens.blade.php
+++ b/resources/views/livewire/security/cloud-provider-tokens.blade.php
@@ -1,6 +1,6 @@
 <div>
     <h2>Cloud Provider Tokens</h2>
-    <div class="pb-4">Manage API tokens for cloud providers (Hetzner, DigitalOcean, etc.).</div>
+    <div class="pb-4">Manage API tokens for cloud providers (Hetzner, Vultr, etc.).</div>
 
     <h3>New Token</h3>
     @can('create', App\Models\CloudProviderToken::class)
diff --git a/tests/Unit/CloudProviderTokenFormViewTest.php b/tests/Unit/CloudProviderTokenFormViewTest.php
new file mode 100644
index 000000000..ae6be05c0
--- /dev/null
+++ b/tests/Unit/CloudProviderTokenFormViewTest.php
@@ -0,0 +1,16 @@
+<?php
+
+it('allows selecting Vultr in cloud provider token forms', function () {
+    $view = file_get_contents(__DIR__.'/../../resources/views/livewire/security/cloud-provider-token-form.blade.php');
+    $component = file_get_contents(__DIR__.'/../../app/Livewire/Security/CloudProviderTokenForm.php');
+
+    expect($view)->toContain('<x-forms.select required id="provider" label="Provider" wire:model.live="provider">')
+        ->and($view)->toContain('<option value="vultr">Vultr</option>')
+        ->and($view)->toContain('<option disabled value="digitalocean">DigitalOcean</option>')
+        ->and(substr_count($view, 'Open Account → API Access.'))->toBe(2)
+        ->and(substr_count($view, 'https://console.vultr.com/user/apiaccess/'))->toBe(2)
+        ->and($view)->not->toContain('<option value="digitalocean">DigitalOcean</option>')
+        ->and($view)->not->toContain('cloudProviderTokens->where(\'provider\', $provider)->isEmpty()')
+        ->and($view)->not->toContain('<x-forms.select required id="provider" label="Provider" disabled>')
+        ->and($component)->toContain("'provider' => 'required|string|in:hetzner,digitalocean,vultr'");
+});