rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(onboarding): add Hetzner integration and fix navigation issues

Browse source 
- Add Hetzner Cloud server creation option to onboarding flow
- Change grid from 2 to 3 columns to accommodate all server options
- Mark both Hetzner and Remote Server as "Recommended"
- Fix Hetzner card height to match other cards
- Remove "select existing server" phase - onboarding always creates new servers
- Fix project loading on page refresh in Project Setup phase
- Fix browser back button navigation - remove aggressive restartBoarding() call
- Fix SSH key dropdown to not auto-select first key - require explicit selection
- Make checkpoint titles more prominent across all phases

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andras Bacsai 2025-10-12 18:52:45 +02:00
parent 1902ef886d
commit 04625591ea
4 changed files with 718 additions and 758 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
app/Livewire/Boarding/Index.php
View file

@ -143,6 +143,11 @@ public function mount()
$this->projects = Project::ownedByCurrentTeam(['name'])->get(); $this->projects = Project::ownedByCurrentTeam(['name'])->get();
} }
} }
// Load projects when on create-project state (for page refresh)
if ($this->currentState === 'create-project' && $this->projects->isEmpty()) {
$this->projects = Project::ownedByCurrentTeam(['name'])->get();
}
} }
public function explanation() public function explanation()
@ -182,36 +187,12 @@ public function setServerType(string $type)
return $this->validateServer('localhost'); return $this->validateServer('localhost');
} elseif ($this->selectedServerType === 'remote') { } elseif ($this->selectedServerType === 'remote') {
$this->privateKeys = PrivateKey::ownedByCurrentTeam(['name'])->where('id', '!=', 0)->get(); $this->privateKeys = PrivateKey::ownedByCurrentTeam(['name'])->where('id', '!=', 0)->get();
if ($this->privateKeys->count() > 0) { // Don't auto-select - let user explicitly choose from dropdown
$this->selectedExistingPrivateKey = $this->privateKeys->first()->id; // Onboarding always creates new servers, skip existing server selection
}
$this->servers = Server::ownedByCurrentTeam(['name'])->where('id', '!=', 0)->get();
if ($this->servers->count() > 0) {
$this->selectedExistingServer = $this->servers->first()->id;
$this->updateServerDetails();
$this->currentState = 'select-existing-server';
return;
}
$this->currentState = 'private-key'; $this->currentState = 'private-key';
} }
} }
public function selectExistingServer()
{
$this->createdServer = Server::find($this->selectedExistingServer);
if (! $this->createdServer) {
$this->dispatch('error', 'Server is not found.');
$this->currentState = 'private-key';
return;
}
$this->selectedExistingPrivateKey = $this->createdServer->privateKey->id;
$this->serverPublicKey = $this->createdServer->privateKey->getPublicKey();
$this->updateServerDetails();
$this->currentState = 'validate-server';
}
private function updateServerDetails() private function updateServerDetails()
{ {
if ($this->createdServer) { if ($this->createdServer) {
@ -229,7 +210,7 @@ public function getProxyType()
public function selectExistingPrivateKey() public function selectExistingPrivateKey()
{ {
if (is_null($this->selectedExistingPrivateKey)) { if (is_null($this->selectedExistingPrivateKey)) {
$this->restartBoarding(); $this->dispatch('error', 'Please select a private key.');
return; return;
} }

6
resources/views/components/boarding-progress.blade.php
View file

@ -7,8 +7,8 @@
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<div <div
class="flex items-center justify-center size-10 rounded-full border-2 transition-all duration-300 class="flex items-center justify-center size-10 rounded-full border-2 transition-all duration-300
{{ $i < $currentStep ? 'bg-success border-success' : '' }} {{ $i < $currentStep ? 'bg-success border-success' : 'border-neutral-200 dark:border-coolgray-300' }}
{{ $i === $currentStep ? 'bg-white dark:bg-coolgray-100' : '' }} {{ $i === $currentStep ? 'bg-white dark:bg-coolgray-500' : '' }}
"> ">
@if ($i < $currentStep) @if ($i < $currentStep)
<svg class="size-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" <svg class="size-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
@ -38,7 +38,7 @@ class="mt-2 text-xs font-medium text-black dark:text-white">
@if ($i < $totalSteps) @if ($i < $totalSteps)
<div <div
class="flex-1 h-0.5 mx-4 transition-all duration-300 class="flex-1 h-0.5 mx-4 transition-all duration-300
{{ $i < $currentStep ? 'bg-success' : 'bg-coolgray-200 dark:bg-coolgray-600' }}"> {{ $i < $currentStep ? 'bg-success' : 'bg-neutral-200 dark:bg-coolgray-300' }}">
</div> </div>
@endif @endif
</div> </div>

4
resources/views/components/boarding-step.blade.php
View file

@ -1,5 +1,5 @@
<div class="w-full max-w-4xl"> <div class="w-full max-w-4xl">
<div class="bg-white dark:bg-coolgray-100 rounded-lg shadow-sm border border-neutral-200 dark:border-coolgray-300 overflow-hidden"> <div class=" rounded-lg shadow-sm border border-neutral-200 dark:border-coolgray-300 overflow-hidden">
<div class="p-8 lg:p-12"> <div class="p-8 lg:p-12">
<h1 class="text-3xl font-bold lg:text-4xl mb-4">{{ $title }}</h1> <h1 class="text-3xl font-bold lg:text-4xl mb-4">{{ $title }}</h1>
@isset($question) @isset($question)
@ -16,7 +16,7 @@
</div> </div>
@isset($explanation) @isset($explanation)
<div class="dark:bg-coolgray-200 border-t border-neutral-200 dark:border-coolgray-300 p-8 lg:p-12 bg-neutral-50"> <div class=" border-t border-neutral-200 dark:border-coolgray-300 p-8 lg:p-12 ">
<h3 class="text-sm font-bold uppercase tracking-wide mb-4 dark:text-neutral-400"> <h3 class="text-sm font-bold uppercase tracking-wide mb-4 dark:text-neutral-400">
Technical Details Technical Details
</h3> </h3>

245
resources/views/livewire/boarding/index.blade.php
View file

@ -1,8 +1,8 @@
@php use App\Enums\ProxyTypes; @endphp @php use App\Enums\ProxyTypes; @endphp
<x-slot:title> <x-slot:title>
Onboarding | Coolify Onboarding | Coolify
</x-slot> </x-slot>
<section class="w-full"> <section class="w-full">
<div class="flex flex-col items-center w-full space-y-8"> <div class="flex flex-col items-center w-full space-y-8">
@if ($currentState === 'welcome') @if ($currentState === 'welcome')
<div class="w-full max-w-2xl text-center space-y-8"> <div class="w-full max-w-2xl text-center space-y-8">
@ -30,7 +30,8 @@ class="bg-white dark:bg-coolgray-100 rounded-lg shadow-sm border border-neutral-
</div> </div>
<div> <div>
<div class="font-semibold text-base dark:text-white">Server Connection</div> <div class="font-semibold text-base dark:text-white">Server Connection</div>
<div class="text-sm dark:text-neutral-400">Connect via SSH to deploy your resources</div> <div class="text-sm dark:text-neutral-400">Connect via SSH to deploy your resources
</div>
</div> </div>
</div> </div>
<div class="flex items-start gap-3"> <div class="flex items-start gap-3">
@ -44,7 +45,8 @@ class="bg-white dark:bg-coolgray-100 rounded-lg shadow-sm border border-neutral-
</div> </div>
<div> <div>
<div class="font-semibold text-base dark:text-white">Docker Environment</div> <div class="font-semibold text-base dark:text-white">Docker Environment</div>
<div class="text-sm dark:text-neutral-400">Automated installation and configuration</div> <div class="text-sm dark:text-neutral-400">Automated installation and configuration
</div>
</div> </div>
</div> </div>
<div class="flex items-start gap-3"> <div class="flex items-start gap-3">
@ -58,7 +60,8 @@ class="bg-white dark:bg-coolgray-100 rounded-lg shadow-sm border border-neutral-
</div> </div>
<div> <div>
<div class="font-semibold text-base dark:text-white">Project Structure</div> <div class="font-semibold text-base dark:text-white">Project Structure</div>
<div class="text-sm dark:text-neutral-400">Organize your applications and resources</div> <div class="text-sm dark:text-neutral-400">Organize your applications and resources
</div>
</div> </div>
</div> </div>
</div> </div>
@ -80,7 +83,8 @@ class="bg-white dark:bg-coolgray-100 rounded-lg shadow-sm border border-neutral-
</x-slot:question> </x-slot:question>
<x-slot:explanation> <x-slot:explanation>
<p> <p>
<x-highlighted text="Automation:" /> Coolify handles server configuration, Docker management, and <x-highlighted text="Automation:" /> Coolify handles server configuration, Docker management,
and
deployments automatically. deployments automatically.
</p> </p>
<p> <p>
@ -106,15 +110,14 @@ class="bg-white dark:bg-coolgray-100 rounded-lg shadow-sm border border-neutral-
Select where to deploy your applications and databases. You can add more servers later. Select where to deploy your applications and databases. You can add more servers later.
</x-slot:question> </x-slot:question>
<x-slot:actions> <x-slot:actions>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 w-full"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 w-full">
<button <button
class="group relative box-without-bg cursor-pointer hover:border-coollabs transition-all duration-200 p-6" class="group relative box-without-bg cursor-pointer hover:border-coollabs transition-all duration-200 p-6"
wire:target="setServerType('localhost')" wire:click="setServerType('localhost')"> wire:target="setServerType('localhost')" wire:click="setServerType('localhost')">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4 text-left">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<svg class="size-10" <svg class="size-10" xmlns="http://www.w3.org/2000/svg" fill="none"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" <path stroke-linecap="round" stroke-linejoin="round"
d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" /> d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" />
</svg> </svg>
@ -132,10 +135,12 @@ class="px-2 py-1 text-xs font-bold uppercase tracking-wide bg-neutral-100 dark:b
</div> </div>
</button> </button>
<button <button
class="group relative box-without-bg cursor-pointer hover:border-coollabs transition-all duration-200 p-6" class="group relative box-without-bg cursor-pointer hover:border-coollabs transition-all duration-200 p-6"
wire:target="setServerType('remote')" wire:click="setServerType('remote')"> wire:target="setServerType('remote')" wire:click="setServerType('remote')">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4 text-left">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<svg class="size-10 " xmlns="http://www.w3.org/2000/svg" fill="none" <svg class="size-10 " xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
@ -143,7 +148,7 @@ class="group relative box-without-bg cursor-pointer hover:border-coollabs transi
d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z" /> d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z" />
</svg> </svg>
<span <span
class="px-2 py-1 text-xs font-bold uppercase tracking-wide bg-warning/10 dark:bg-warning/20 text-warning rounded"> class="px-2 py-1 text-xs font-bold uppercase tracking-wide bg-coollabs/10 dark:bg-warning/20 text-coollabs dark:text-warning rounded">
Recommended Recommended
</span> </span>
</div> </div>
@ -155,6 +160,36 @@ class="px-2 py-1 text-xs font-bold uppercase tracking-wide bg-warning/10 dark:bg
</div> </div>
</div> </div>
</button> </button>
@can('viewAny', App\Models\CloudProviderToken::class)
<x-modal-input title="Connect a Hetzner Server" isFullWidth>
<x-slot:content>
<div
class="group relative box-without-bg cursor-pointer hover:border-coollabs transition-all duration-200 p-6 h-full min-h-[210px]">
<div class="flex flex-col gap-4 text-left">
<div class="flex items-center justify-between">
<svg class="size-10" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg">
<rect width="200" height="200" fill="#D50C2D" rx="8" />
<path d="M40 40 H60 V90 H140 V40 H160 V160 H140 V110 H60 V160 H40 Z"
fill="white" />
</svg>
<span
class="px-2 py-1 text-xs font-bold uppercase tracking-wide bg-coollabs/10 dark:bg-warning/20 text-coollabs dark:text-warning rounded">
Recommended
</span>
</div>
<div>
<h3 class="text-xl font-bold mb-2">Hetzner Cloud</h3>
<p class="text-sm dark:text-neutral-400">
Deploy servers directly from your Hetzner Cloud account.
</p>
</div>
</div>
</div>
</x-slot:content>
<livewire:server.new.by-hetzner :private_keys="$this->privateKeys" :limit_reached="false" />
</x-modal-input>
@endcan
</div> </div>
@if (!$serverReachable) @if (!$serverReachable)
@ -229,9 +264,11 @@ class="bg-red-200 dark:bg-red-900 px-1 rounded-sm">~/.ssh/authorized_keys</code>
<div class="p-4 rounded-lg border border-neutral-200 dark:border-coolgray-400"> <div class="p-4 rounded-lg border border-neutral-200 dark:border-coolgray-400">
<form wire:submit='selectExistingPrivateKey' class="flex flex-col gap-4"> <form wire:submit='selectExistingPrivateKey' class="flex flex-col gap-4">
<x-forms.select label="Existing SSH Keys" id='selectedExistingPrivateKey'> <x-forms.select label="Existing SSH Keys" id='selectedExistingPrivateKey'>
<option disabled selected value="">-- Select a Private Key --</option>
@foreach ($privateKeys as $privateKey) @foreach ($privateKeys as $privateKey)
<option wire:key="{{ $loop->index }}" value="{{ $privateKey->id }}"> <option wire:key="{{ $loop->index }}" value="{{ $privateKey->id }}">
{{ $privateKey->name }}</option> {{ $privateKey->name }}
</option>
@endforeach @endforeach
</x-forms.select> </x-forms.select>
<x-forms.button type="submit" class="w-full lg:w-auto">Use Selected Key</x-forms.button> <x-forms.button type="submit" class="w-full lg:w-auto">Use Selected Key</x-forms.button>
@ -251,8 +288,9 @@ class="px-2 py-1 bg-white dark:bg-coolgray-100 border border-neutral-300 dark:bo
</div> </div>
@endif @endif
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 w-full"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 w-full">
<x-forms.button class="justify-center h-auto py-6 box-without-bg hover:border-coollabs transition-all duration-200" wire:target="setPrivateKey('own')" <x-forms.button
wire:click="setPrivateKey('own')"> class="justify-center h-auto py-6 box-without-bg hover:border-coollabs transition-all duration-200"
wire:target="setPrivateKey('own')" wire:click="setPrivateKey('own')">
<div class="flex flex-col items-center gap-2"> <div class="flex flex-col items-center gap-2">
<svg class="size-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" <svg class="size-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor"> stroke-width="1.5" stroke="currentColor">
@ -265,8 +303,9 @@ class="px-2 py-1 bg-white dark:bg-coolgray-100 border border-neutral-300 dark:bo
</div> </div>
</div> </div>
</x-forms.button> </x-forms.button>
<x-forms.button class="justify-center h-auto py-6 box-without-bg hover:border-coollabs transition-all duration-200" wire:target="setPrivateKey('create')" <x-forms.button
wire:click="setPrivateKey('create')"> class="justify-center h-auto py-6 box-without-bg hover:border-coollabs transition-all duration-200"
wire:target="setPrivateKey('create')" wire:click="setPrivateKey('create')">
<div class="flex flex-col items-center gap-2"> <div class="flex flex-col items-center gap-2">
<svg class="size-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" <svg class="size-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor"> stroke-width="1.5" stroke="currentColor">
@ -288,7 +327,8 @@ class="px-2 py-1 bg-white dark:bg-coolgray-100 border border-neutral-300 dark:bo
</p> </p>
<p> <p>
<x-highlighted text="Public Key Deployment:" /> Add the public key to your server's <x-highlighted text="Public Key Deployment:" /> Add the public key to your server's
<code class="text-xs bg-coolgray-300 dark:bg-coolgray-400 px-1 py-0.5 rounded">~/.ssh/authorized_keys</code> <code
class="text-xs bg-coolgray-300 dark:bg-coolgray-400 px-1 py-0.5 rounded">~/.ssh/authorized_keys</code>
file. file.
</p> </p>
<p> <p>
@ -297,83 +337,6 @@ class="px-2 py-1 bg-white dark:bg-coolgray-100 border border-neutral-300 dark:bo
</p> </p>
</x-slot:explanation> </x-slot:explanation>
</x-boarding-step> </x-boarding-step>
@elseif ($currentState === 'select-existing-server')
<x-boarding-step title="Select a server">
<x-slot:question>
There are already servers available for your Team. Do you want to use one of them?
</x-slot:question>
<x-slot:actions>
<div class="flex flex-col gap-4">
<div>
<x-forms.button class="justify-center w-64 box-boarding" wire:click="createNewServer">No
(create one for me)
</x-forms.button>
</div>
<div>
<form wire:submit='selectExistingServer' class="flex flex-col w-full gap-4 lg:w-96">
<x-forms.select label="Existing servers" class="w-96" id='selectedExistingServer'>
@foreach ($servers as $server)
<option wire:key="{{ $loop->index }}" value="{{ $server->id }}">
{{ $server->name }}</option>
@endforeach
</x-forms.select>
<x-forms.button type="submit">Use this Server</x-forms.button>
</form>
</div>
</div>
@if (!$serverReachable)
<div class="mt-6 p-4 bg-red-100 dark:bg-red-950 rounded-lg text-gray-800 dark:text-gray-200">
<h2 class="text-lg font-bold mb-2">Server is not reachable</h2>
<p class="mb-4">Please check the connection details below and correct them if they are
incorrect.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<x-forms.input placeholder="Default is 22" label="Port" id="remoteServerPort"
wire:model="remoteServerPort" :value="$remoteServerPort" />
<div>
<x-forms.input placeholder="Default is root" label="User" id="remoteServerUser"
wire:model="remoteServerUser" :value="$remoteServerUser" />
<p class="text-xs mt-1">
Non-root user is experimental:
<a class="font-bold underline" target="_blank"
href="https://coolify.io/docs/knowledge-base/server/non-root-user">docs</a>
</p>
</div>
</div>
<div class="mb-4">
<p class="mb-2">If the connection details are correct, please ensure:</p>
<ul class="list-disc list-inside">
<li>The correct public key is in your <code
class="bg-red-200 dark:bg-red-900 px-1 rounded-sm">~/.ssh/authorized_keys</code>
file for the specified user</li>
<li>Or skip the boarding process and manually add a new private key to Coolify and
the server</li>
</ul>
</div>
<p class="mb-4">
For more help, check this <a target="_blank" class="underline font-semibold"
href="https://coolify.io/docs/knowledge-base/server/openssh">documentation</a>.
</p>
<x-forms.input readonly id="serverPublicKey" class="mb-4"
label="Current Public Key"></x-forms.input>
<x-forms.button class="w-full md:w-auto box-boarding" wire:click="saveAndValidateServer">
Check again
</x-forms.button>
</div>
@endif
</x-slot:actions>
<x-slot:explanation>
<p>Private Keys are used to connect to a remote server through a secure shell, called SSH.</p>
<p>You can use your own private key, or you can let Coolify to create one for you.</p>
<p>In both ways, you need to add the public version of your private key to the remote server's
<code>~/.ssh/authorized_keys</code> file.
</p>
</x-slot:explanation>
</x-boarding-step>
@elseif ($currentState === 'create-private-key') @elseif ($currentState === 'create-private-key')
<x-boarding-progress :currentStep="2" /> <x-boarding-progress :currentStep="2" />
<x-boarding-step title="SSH Key Configuration"> <x-boarding-step title="SSH Key Configuration">
@ -382,16 +345,16 @@ class="bg-red-200 dark:bg-red-900 px-1 rounded-sm">~/.ssh/authorized_keys</code>
</x-slot:question> </x-slot:question>
<x-slot:actions> <x-slot:actions>
<form wire:submit='savePrivateKey' class="flex flex-col w-full gap-4"> <form wire:submit='savePrivateKey' class="flex flex-col w-full gap-4">
<x-forms.input required placeholder="e.g., production-server-key" <x-forms.input required placeholder="e.g., production-server-key" label="Key Name"
label="Key Name" id="privateKeyName" /> id="privateKeyName" />
<x-forms.input placeholder="Optional: Note what this key is used for" <x-forms.input placeholder="Optional: Note what this key is used for" label="Description"
label="Description" id="privateKeyDescription" /> id="privateKeyDescription" />
@if ($privateKeyType === 'create') @if ($privateKeyType === 'create')
<x-forms.textarea required readonly label="Private Key" id="privateKey" rows="8" /> <x-forms.textarea required readonly label="Private Key" id="privateKey" rows="8" />
<x-forms.textarea rows="7" readonly label="Public Key" id="publicKey" /> <x-forms.textarea rows="7" readonly label="Public Key" id="publicKey" />
@else @else
<x-forms.textarea required placeholder="-----BEGIN OPENSSH PRIVATE KEY-----" <x-forms.textarea required placeholder="-----BEGIN OPENSSH PRIVATE KEY-----" label="Private Key"
label="Private Key" id="privateKey" rows="8" /> id="privateKey" rows="8" />
@endif @endif
@if ($privateKeyType === 'create') @if ($privateKeyType === 'create')
<div class="p-4 bg-warning/10 border border-warning rounded-lg"> <div class="p-4 bg-warning/10 border border-warning rounded-lg">
@ -423,7 +386,8 @@ class="text-xs bg-coolgray-300 dark:bg-coolgray-400 px-1 py-0.5 rounded">~/.ssh/
</p> </p>
<p> <p>
<x-highlighted text="Public Key Distribution:" /> Deploy the public key to <x-highlighted text="Public Key Distribution:" /> Deploy the public key to
<code class="text-xs bg-coolgray-300 dark:bg-coolgray-400 px-1 py-0.5 rounded">~/.ssh/authorized_keys</code> <code
class="text-xs bg-coolgray-300 dark:bg-coolgray-400 px-1 py-0.5 rounded">~/.ssh/authorized_keys</code>
on your target server for the specified user. on your target server for the specified user.
</p> </p>
<p> <p>
@ -441,13 +405,13 @@ class="text-xs bg-coolgray-300 dark:bg-coolgray-400 px-1 py-0.5 rounded">~/.ssh/
<x-slot:actions> <x-slot:actions>
<form wire:submit='saveServer' class="flex flex-col w-full gap-4"> <form wire:submit='saveServer' class="flex flex-col w-full gap-4">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<x-forms.input required placeholder="e.g., production-app-server" <x-forms.input required placeholder="e.g., production-app-server" label="Server Name"
label="Server Name" id="remoteServerName" wire:model="remoteServerName" /> id="remoteServerName" wire:model="remoteServerName" />
<x-forms.input required placeholder="IP address or hostname" label="IP Address/Hostname" <x-forms.input required placeholder="IP address or hostname" label="IP Address/Hostname"
id="remoteServerHost" wire:model="remoteServerHost" /> id="remoteServerHost" wire:model="remoteServerHost" />
</div> </div>
<x-forms.input placeholder="Optional: Note what this server hosts" <x-forms.input placeholder="Optional: Note what this server hosts" label="Description"
label="Description" id="remoteServerDescription" wire:model="remoteServerDescription" /> id="remoteServerDescription" wire:model="remoteServerDescription" />
<div x-data="{ showAdvanced: false }" class="flex flex-col gap-4"> <div x-data="{ showAdvanced: false }" class="flex flex-col gap-4">
<button @click="showAdvanced = !showAdvanced" type="button" <button @click="showAdvanced = !showAdvanced" type="button"
@ -466,16 +430,18 @@ class="flex items-center gap-2 text-left text-sm font-medium hover:underline">
</svg> </svg>
Advanced Connection Settings Advanced Connection Settings
</button> </button>
<div x-show="showAdvanced" x-cloak class="grid grid-cols-1 lg:grid-cols-2 gap-4 p-4 rounded-lg border border-neutral-200 dark:border-coolgray-400"> <div x-show="showAdvanced" x-cloak
class="grid grid-cols-1 lg:grid-cols-2 gap-4 p-4 rounded-lg border border-neutral-200 dark:border-coolgray-400">
<x-forms.input placeholder="Default: 22" label="SSH Port" type="number" <x-forms.input placeholder="Default: 22" label="SSH Port" type="number"
id="remoteServerPort" wire:model="remoteServerPort" /> id="remoteServerPort" wire:model="remoteServerPort" />
<div> <div>
<x-forms.input placeholder="Default: root" label="SSH User" <x-forms.input placeholder="Default: root" label="SSH User" id="remoteServerUser"
id="remoteServerUser" wire:model="remoteServerUser" /> wire:model="remoteServerUser" />
<p class="mt-1 text-xs dark:text-white text-black"> <p class="mt-1 text-xs dark:text-white text-black">
Non-root user support is experimental. Non-root user support is experimental.
<a class="font-bold underline hover:text-coollabs" target="_blank" <a class="font-bold underline hover:text-coollabs" target="_blank"
href="https://coolify.io/docs/knowledge-base/server/non-root-user">Learn more</a> href="https://coolify.io/docs/knowledge-base/server/non-root-user">Learn
more</a>
</p> </p>
</div> </div>
</div> </div>
@ -493,7 +459,8 @@ class="flex items-center gap-2 text-left text-sm font-medium hover:underline">
DNS resolution is configured. DNS resolution is configured.
</p> </p>
<p> <p>
<x-highlighted text="User Permissions:" /> Root or sudo-enabled users recommended for full Docker <x-highlighted text="User Permissions:" /> Root or sudo-enabled users recommended for full
Docker
management capabilities. management capabilities.
</p> </p>
</x-slot:explanation> </x-slot:explanation>
@ -506,13 +473,14 @@ class="flex items-center gap-2 text-left text-sm font-medium hover:underline">
</x-slot:question> </x-slot:question>
<x-slot:actions> <x-slot:actions>
<div class="w-full space-y-6"> <div class="w-full space-y-6">
<div class="p-6 bg-neutral-50 dark:bg-coolgray-200 rounded-lg border border-neutral-200 dark:border-coolgray-400"> <div
class="p-6 bg-neutral-50 dark:bg-coolgray-200 rounded-lg border border-neutral-200 dark:border-coolgray-400">
<h3 class="font-bold text-black dark:text-white mb-4">Validation Steps</h3> <h3 class="font-bold text-black dark:text-white mb-4">Validation Steps</h3>
<div class="space-y-3"> <div class="space-y-3">
<div class="flex items-start gap-3"> <div class="flex items-start gap-3">
<div class="flex-shrink-0 mt-0.5"> <div class="flex-shrink-0 mt-0.5">
<svg class="size-5 text-success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" <svg class="size-5 text-success" xmlns="http://www.w3.org/2000/svg"
fill="currentColor"> viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" <path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" /> clip-rule="evenodd" />
@ -525,22 +493,24 @@ class="flex items-center gap-2 text-left text-sm font-medium hover:underline">
</div> </div>
<div class="flex items-start gap-3"> <div class="flex items-start gap-3">
<div class="flex-shrink-0 mt-0.5"> <div class="flex-shrink-0 mt-0.5">
<svg class="size-5 text-success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" <svg class="size-5 text-success" xmlns="http://www.w3.org/2000/svg"
fill="currentColor"> viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" <path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" /> clip-rule="evenodd" />
</svg> </svg>
</div> </div>
<div> <div>
<div class="font-semibold text-base dark:text-white">Check OS Compatibility</div> <div class="font-semibold text-base dark:text-white">Check OS Compatibility
<div class="text-sm dark:text-neutral-400">Verify supported Linux distribution</div> </div>
<div class="text-sm dark:text-neutral-400">Verify supported Linux distribution
</div>
</div> </div>
</div> </div>
<div class="flex items-start gap-3"> <div class="flex items-start gap-3">
<div class="flex-shrink-0 mt-0.5"> <div class="flex-shrink-0 mt-0.5">
<svg class="size-5 text-success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" <svg class="size-5 text-success" xmlns="http://www.w3.org/2000/svg"
fill="currentColor"> viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" <path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" /> clip-rule="evenodd" />
@ -548,14 +518,16 @@ class="flex items-center gap-2 text-left text-sm font-medium hover:underline">
</div> </div>
<div> <div>
<div class="font-semibold text-base dark:text-white">Install Docker Engine</div> <div class="font-semibold text-base dark:text-white">Install Docker Engine</div>
<div class="text-sm dark:text-neutral-400">Auto-install if version {{ $minDockerVersion }}+ not <div class="text-sm dark:text-neutral-400">Auto-install if version
found</div> {{ $minDockerVersion }}+ not
found
</div>
</div> </div>
</div> </div>
<div class="flex items-start gap-3"> <div class="flex items-start gap-3">
<div class="flex-shrink-0 mt-0.5"> <div class="flex-shrink-0 mt-0.5">
<svg class="size-5 text-success" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" <svg class="size-5 text-success" xmlns="http://www.w3.org/2000/svg"
fill="currentColor"> viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" <path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" /> clip-rule="evenodd" />
@ -563,7 +535,8 @@ class="flex items-center gap-2 text-left text-sm font-medium hover:underline">
</div> </div>
<div> <div>
<div class="font-semibold text-base dark:text-white">Configure Network</div> <div class="font-semibold text-base dark:text-white">Configure Network</div>
<div class="text-sm dark:text-neutral-400">Set up Docker networks and proxy</div> <div class="text-sm dark:text-neutral-400">Set up Docker networks and proxy
</div>
</div> </div>
</div> </div>
</div> </div>
@ -621,14 +594,15 @@ class="flex items-center gap-2 text-left text-sm font-medium hover:underline">
<div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div> <div class="w-full border-t border-neutral-300 dark:border-coolgray-400"></div>
</div> </div>
<div class="relative flex justify-center text-sm"> <div class="relative flex justify-center text-sm">
<span class="px-2 bg-white dark:bg-coolgray-100 text-coolgray-400">Or use existing</span> <span class="px-2 text-neutral-500 dark:text-neutral-400">Or use existing</span>
</div> </div>
</div> </div>
<form wire:submit='selectExistingProject' class="flex flex-col gap-4"> <form wire:submit='selectExistingProject' class="flex flex-col gap-4">
<x-forms.select label="Existing Projects" id='selectedProject'> <x-forms.select label="Existing Projects" id='selectedProject'>
@foreach ($projects as $project) @foreach ($projects as $project)
<option wire:key="{{ $loop->index }}" value="{{ $project->id }}"> <option wire:key="{{ $loop->index }}" value="{{ $project->id }}">
{{ $project->name }}</option> {{ $project->name }}
</option>
@endforeach @endforeach
</x-forms.select> </x-forms.select>
<x-forms.button type="submit" class="w-full lg:w-auto">Use Selected Project</x-forms.button> <x-forms.button type="submit" class="w-full lg:w-auto">Use Selected Project</x-forms.button>
@ -638,11 +612,13 @@ class="flex items-center gap-2 text-left text-sm font-medium hover:underline">
</x-slot:actions> </x-slot:actions>
<x-slot:explanation> <x-slot:explanation>
<p> <p>
<x-highlighted text="Project Organization:" /> Group related resources (apps, databases, services) <x-highlighted text="Project Organization:" /> Group related resources (apps, databases,
services)
into logical projects. into logical projects.
</p> </p>
<p> <p>
<x-highlighted text="Environments:" /> Each project includes a production environment by default. <x-highlighted text="Environments:" /> Each project includes a production environment by
default.
Add staging, development, or custom environments as needed. Add staging, development, or custom environments as needed.
</p> </p>
<p> <p>
@ -684,7 +660,8 @@ class="bg-white dark:bg-coolgray-100 rounded-lg shadow-sm border border-neutral-
</svg> </svg>
</div> </div>
<div> <div>
<div class="font-semibold text-base dark:text-white">Server: {{ $createdServer->name }}</div> <div class="font-semibold text-base dark:text-white">Server: {{ $createdServer->name }}
</div>
<div class="text-sm dark:text-neutral-400">{{ $createdServer->ip }}</div> <div class="text-sm dark:text-neutral-400">{{ $createdServer->ip }}</div>
</div> </div>
</div> </div>
@ -698,7 +675,9 @@ class="bg-white dark:bg-coolgray-100 rounded-lg shadow-sm border border-neutral-
</svg> </svg>
</div> </div>
<div> <div>
<div class="font-semibold text-base dark:text-white">Project: {{ $createdProject->name }}</div> <div class="font-semibold text-base dark:text-white">Project:
{{ $createdProject->name }}
</div>
<div class="text-sm dark:text-neutral-400">Production environment ready</div> <div class="text-sm dark:text-neutral-400">Production environment ready</div>
</div> </div>
</div> </div>
@ -756,4 +735,4 @@ class="text-sm dark:text-neutral-400 hover:text-coollabs dark:hover:text-warning
</x-modal-input> </x-modal-input>
</div> </div>
@endif @endif
</section> </section>