Merge pull request #6855 from coollabsio/andrasbacsai/onboarding-redesign

feat(onboarding): redesign user onboarding flow with modern UI/UX

app/Livewire/Boarding/Index.php

@@ -16,14 +16,18 @@ class Index extends Component
 {
     protected $listeners = ['refreshBoardingIndex' => 'validateServer'];
 
+    #[\Livewire\Attributes\Url(as: 'step', history: true)]
     public string $currentState = 'welcome';
 
+    #[\Livewire\Attributes\Url(keep: true)]
     public ?string $selectedServerType = null;
 
     public ?Collection $privateKeys = null;
 
+    #[\Livewire\Attributes\Url(keep: true)]
     public ?int $selectedExistingPrivateKey = null;
 
+    #[\Livewire\Attributes\Url(keep: true)]
     public ?string $privateKeyType = null;
 
     public ?string $privateKey = null;
@@ -38,6 +42,7 @@ class Index extends Component
 
     public ?Collection $servers = null;
 
+    #[\Livewire\Attributes\Url(keep: true)]
     public ?int $selectedExistingServer = null;
 
     public ?string $remoteServerName = null;
@@ -58,6 +63,7 @@ class Index extends Component
 
     public Collection $projects;
 
+    #[\Livewire\Attributes\Url(keep: true)]
     public ?int $selectedProject = null;
 
     public ?Project $createdProject = null;
@@ -79,17 +85,68 @@ public function mount()
         $this->minDockerVersion = str(config('constants.docker.minimum_required_version'))->before('.');
         $this->privateKeyName = generate_random_name();
         $this->remoteServerName = generate_random_name();
-        if (isDev()) {
-            $this->privateKey = '-----BEGIN OPENSSH PRIVATE KEY-----
-b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAAAMwAAAAtzc2gtZW
-QyNTUxOQAAACBbhpqHhqv6aI67Mj9abM3DVbmcfYhZAhC7ca4d9UCevAAAAJi/QySHv0Mk
-hwAAAAtzc2gtZWQyNTUxOQAAACBbhpqHhqv6aI67Mj9abM3DVbmcfYhZAhC7ca4d9UCevA
-AAAECBQw4jg1WRT2IGHMncCiZhURCts2s24HoDS0thHnnRKVuGmoeGq/pojrsyP1pszcNV
-uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
------END OPENSSH PRIVATE KEY-----';
-            $this->privateKeyDescription = 'Created by Coolify';
-            $this->remoteServerDescription = 'Created by Coolify';
-            $this->remoteServerHost = 'coolify-testing-host';
+
+        // Initialize collections to avoid null errors
+        if ($this->privateKeys === null) {
+            $this->privateKeys = collect();
+        }
+        if ($this->servers === null) {
+            $this->servers = collect();
+        }
+        if (! isset($this->projects)) {
+            $this->projects = collect();
+        }
+
+        // Restore state when coming from URL with query params
+        if ($this->selectedServerType === 'localhost' && $this->selectedExistingServer === 0) {
+            $this->createdServer = Server::find(0);
+            if ($this->createdServer) {
+                $this->serverPublicKey = $this->createdServer->privateKey->getPublicKey();
+            }
+        }
+
+        if ($this->selectedServerType === 'remote') {
+            if ($this->privateKeys->isEmpty()) {
+                $this->privateKeys = PrivateKey::ownedByCurrentTeam(['name'])->where('id', '!=', 0)->get();
+            }
+            if ($this->servers->isEmpty()) {
+                $this->servers = Server::ownedByCurrentTeam(['name'])->where('id', '!=', 0)->get();
+            }
+
+            if ($this->selectedExistingServer) {
+                $this->createdServer = Server::find($this->selectedExistingServer);
+                if ($this->createdServer) {
+                    $this->serverPublicKey = $this->createdServer->privateKey->getPublicKey();
+                    $this->updateServerDetails();
+                }
+            }
+
+            if ($this->selectedExistingPrivateKey) {
+                $this->createdPrivateKey = PrivateKey::where('team_id', currentTeam()->id)
+                    ->where('id', $this->selectedExistingPrivateKey)
+                    ->first();
+                if ($this->createdPrivateKey) {
+                    $this->privateKey = $this->createdPrivateKey->private_key;
+                    $this->publicKey = $this->createdPrivateKey->getPublicKey();
+                }
+            }
+
+            // Auto-regenerate key pair for "Generate with Coolify" mode on page refresh
+            if ($this->privateKeyType === 'create' && empty($this->privateKey)) {
+                $this->createNewPrivateKey();
+            }
+        }
+
+        if ($this->selectedProject) {
+            $this->createdProject = Project::find($this->selectedProject);
+            if (! $this->createdProject) {
+                $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();
         }
     }
 
@@ -129,41 +186,16 @@ public function setServerType(string $type)
 
             return $this->validateServer('localhost');
         } elseif ($this->selectedServerType === 'remote') {
-            if (isDev()) {
-                $this->privateKeys = PrivateKey::ownedByCurrentTeam(['name'])->get();
-            } else {
-                $this->privateKeys = PrivateKey::ownedByCurrentTeam(['name'])->where('id', '!=', 0)->get();
-            }
+            $this->privateKeys = PrivateKey::ownedByCurrentTeam(['name'])->where('id', '!=', 0)->get();
+            // Auto-select first key if available for better UX
             if ($this->privateKeys->count() > 0) {
                 $this->selectedExistingPrivateKey = $this->privateKeys->first()->id;
             }
-            $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;
-            }
+            // Onboarding always creates new servers, skip existing server selection
             $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()
     {
         if ($this->createdServer) {
@@ -181,7 +213,7 @@ public function getProxyType()
     public function selectExistingPrivateKey()
     {
         if (is_null($this->selectedExistingPrivateKey)) {
-            $this->restartBoarding();
+            $this->dispatch('error', 'Please select a private key.');
 
             return;
         }
@@ -202,6 +234,9 @@ public function setPrivateKey(string $type)
         $this->privateKeyType = $type;
         if ($type === 'create') {
             $this->createNewPrivateKey();
+        } else {
+            $this->privateKey = null;
+            $this->publicKey = null;
         }
         $this->currentState = 'create-private-key';
     }

resources/views/components/boarding-progress.blade.php

@@ -0,0 +1,47 @@
+@props(['currentStep' => 1, 'totalSteps' => 3])
+
+<div class="w-full max-w-2xl mx-auto mb-8">
+    <div class="flex items-center justify-between">
+        @for ($i = 1; $i <= $totalSteps; $i++)
+            <div class="flex items-center {{ $i < $totalSteps ? 'flex-1' : '' }}">
+                <div class="flex flex-col items-center">
+                    <div
+                        class="flex items-center justify-center size-10 rounded-full border-2 transition-all duration-300
+                        {{ $i < $currentStep ? 'bg-success border-success' : 'border-neutral-200 dark:border-coolgray-300' }}
+                        {{ $i === $currentStep ? 'bg-white dark:bg-coolgray-500' : '' }}
+                       ">
+                        @if ($i < $currentStep)
+                            <svg class="size-5 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+                                fill="currentColor">
+                                <path fill-rule="evenodd"
+                                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                        @else
+                            <span
+                                class="text-sm font-bold text-black dark:text-white">
+                                {{ $i }}
+                            </span>
+                        @endif
+                    </div>
+                    <span
+                        class="mt-2 text-xs font-medium text-black dark:text-white">
+                        @if ($i === 1)
+                            Server
+                        @elseif ($i === 2)
+                            Connection
+                        @elseif ($i === 3)
+                            Complete
+                        @endif
+                    </span>
+                </div>
+                @if ($i < $totalSteps)
+                    <div
+                        class="flex-1 h-0.5 mx-4 transition-all duration-300
+                        {{ $i < $currentStep ? 'bg-success' : 'bg-neutral-200 dark:bg-coolgray-300' }}">
+                    </div>
+                @endif
+            </div>
+        @endfor
+    </div>
+</div>

resources/views/components/boarding-step.blade.php

@@ -1,25 +1,29 @@
-<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
-    <div class="box-border col-span-2 lg:min-w-[24rem] lg:min-h-[21rem]">
-        <h1 class="text-2xl font-bold lg:text-5xl">{{ $title }}</h1>
-        <div class="py-6">
+<div class="w-full max-w-4xl">
+    <div class=" rounded-lg shadow-sm border border-neutral-200 dark:border-coolgray-300 overflow-hidden">
+        <div class="p-8 lg:p-12">
+            <h1 class="text-3xl font-bold lg:text-4xl mb-4">{{ $title }}</h1>
             @isset($question)
-                <p class="dark:text-neutral-400">
+                <div class="text-base lg:text-lg dark:text-neutral-400 mb-8">
                     {{ $question }}
-                </p>
+                </div>
             @endisset
+
+            @if ($actions)
+                <div class="flex flex-col gap-4">
+                    {{ $actions }}
+                </div>
+            @endif
         </div>
-        @if ($actions)
-            <div class="flex flex-col flex-wrap gap-4 lg:items-center md:flex-row">
-                {{ $actions }}
+
+        @isset($explanation)
+            <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">
+                    Technical Details
+                </h3>
+                <div class="space-y-3 text-sm dark:text-neutral-400">
+                    {{ $explanation }}
+                </div>
             </div>
-        @endif
+        @endisset
     </div>
-    @isset($explanation)
-        <div class="col-span-1">
-            <h3 class="pb-8 font-bold">Explanation</h3>
-            <div class="space-y-4">
-                {{ $explanation }}
-            </div>
-        </div>
-    @endisset
 </div>

resources/views/layouts/boarding.blade.php

@@ -1,6 +1,6 @@
 @extends('layouts.base')
 @section('body')
-    <main class="h-full">
+    <main class="min-h-screen flex items-center justify-center p-4">
         {{ $slot }}
     </main>
     @parent