From f3845ce30aaf6234c5daef0823ad389236efa0c7 Mon Sep 17 00:00:00 2001 From: peaklabs-dev <122374094+peaklabs-dev@users.noreply.github.com> Date: Tue, 10 Sep 2024 13:55:58 +0200 Subject: [PATCH] New onboarding error UI and advanced menu --- .../views/livewire/boarding/index.blade.php | 275 +++++++++--------- 1 file changed, 144 insertions(+), 131 deletions(-) diff --git a/resources/views/livewire/boarding/index.blade.php b/resources/views/livewire/boarding/index.blade.php index 2e5fa41c9..cd7ef4c86 100644 --- a/resources/views/livewire/boarding/index.blade.php +++ b/resources/views/livewire/boarding/index.blade.php @@ -1,20 +1,18 @@ @php use App\Enums\ProxyTypes; @endphp Onboarding | Coolify - -
-
- @if ($currentState === 'welcome') + +
+
+ @if ($currentState === 'welcome')

Welcome to Coolify

Let me help you set up the basics.
- Get + Get Started
- @elseif ($currentState === 'explanation') + @elseif ($currentState === 'explanation') Coolify is an all-in-one application to automate tasks on your servers, deploy application with @@ -28,12 +26,15 @@ class="flex flex-col items-center justify-center p-10 mx-2 mt-10 bg-white border -

You don't need to manage your servers anymore. +

+ You don't need to manage your servers anymore. Coolify does it for you.

-

All configurations are stored on your servers, so +

+ All configurations are stored on your servers, so everything works without a connection to Coolify (except integrations and automations).

-

You can get notified on your favourite platforms +

+ You can get notified on your favourite platforms (Discord, Telegram, Email, etc.) when something goes wrong, or an action is needed from your side.

 @@ -42,70 +43,91 @@ class="flex flex-col items-center justify-center p-10 mx-2 mt-10 bg-white border - @elseif ($currentState === 'select-server-type') + @elseif ($currentState === 'select-server-type') - Do you want to deploy your resources to your - or to a ? + Do you want to deploy your resources to your + + or to a + ? - Localhost + Localhost - Remote Server + Remote Server + @if (!$serverReachable) - Localhost is not reachable with the following public key. -

- Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for - user or skip the boarding process and add a new private key manually to Coolify and to the - server. -
- Check this documentation for further - help. - - Check again +
+

Server is not reachable

+

Please check the connection details below and correct them if they are incorrect.

+ +
+ +
+ +

+ Non-root user is experimental: + docs +

+
+
+ +
+

If the connection details are correct, please ensure:

+
    +
  • The correct public key is in your ~/.ssh/authorized_keys file for the specified user
    • +
  • Or skip the boarding process and manually add a new private key to Coolify and the server
    • +
+
+ +

+ For more help, check this documentation. +

+ + + + + Check again +
@endif

Servers are the main building blocks, as they will host your applications, databases, services, called resources. Any CPU intensive process will use the server's CPU where you are deploying your resources.

-

is the server where Coolify is running on. It is not +

+ is the server where Coolify is running on. It is not recommended to use one server for everything.

-

is a server reachable through SSH. It can be hosted +

+ is a server reachable through SSH. It can be hosted at home, or from any cloud provider.

 - @elseif ($currentState === 'private-key') + @elseif ($currentState === 'private-key') Do you have your own SSH Private Key? - Yes + Yes - No (create one for me) + No (create one for me) @if (count($privateKeys) > 0) -
- - @foreach ($privateKeys as $privateKey) - - @endforeach - - Use this SSH Key -
+
+ + @foreach ($privateKeys as $privateKey) + + @endforeach + + Use this SSH Key +
@endif @@ -117,7 +139,7 @@ class="flex flex-col items-center justify-center p-10 mx-2 mt-10 bg-white border

- @elseif ($currentState === 'select-existing-server') + @elseif ($currentState === 'select-existing-server') There are already servers available for your Team. Do you want to use one of them? @@ -136,8 +158,8 @@ class="flex flex-col items-center justify-center p-10 mx-2 mt-10 bg-white border
@foreach ($servers as $server) - + @endforeach Use this Server @@ -145,20 +167,18 @@ class="flex flex-col items-center justify-center p-10 mx-2 mt-10 bg-white border
@if (!$serverReachable) - This server is not reachable with the following public key. -

- Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for - user or skip the boarding process and add a new private key manually to Coolify and to the - server. -
- Check this documentation for further - help. - - Check - again - + This server is not reachable with the following public key. +

+ Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for + user or skip the boarding process and add a new private key manually to Coolify and to the + server. +
+ Check this documentation for further + help. + + Check + again + @endif @@ -169,25 +189,22 @@ class="flex flex-col items-center justify-center p-10 mx-2 mt-10 bg-white border

- @elseif ($currentState === 'create-private-key') + @elseif ($currentState === 'create-private-key') Please let me know your key details. - - - + + + @if ($privateKeyType === 'create') - - ACTION REQUIRED: Copy the 'Public Key' to your - server's - ~/.ssh/authorized_keys - file. + + ACTION REQUIRED: Copy the 'Public Key' to your + server's + ~/.ssh/authorized_keys + file. @endif Save @@ -200,7 +217,7 @@ class="flex flex-col items-center justify-center p-10 mx-2 mt-10 bg-white border

- @elseif ($currentState === 'create-server') + @elseif ($currentState === 'create-server') Please let me know your server details. @@ -208,34 +225,33 @@ class="flex flex-col items-center justify-center p-10 mx-2 mt-10 bg-white border
- - + +
- -
- -
Non-root user is experimental: docs. +
+
+ +
+ +
+ +
Non-root user is experimental: docs. +
- +
Continue - @elseif ($currentState === 'validate-server') + @elseif ($currentState === 'validate-server') I need to validate your server (connection, Docker Engine, etc) and configure if something is @@ -247,8 +263,7 @@ class="font-bold underline" target="_blank" - + Let's do it! @@ -257,20 +272,19 @@ class="font-bold underline" target="_blank"

This will install the latest Docker Engine on your server, configure a few things to be able to run optimal.

Minimum Docker Engine version is: 22

To manually install Docker - Engine, check this + Engine, check this documentation.

 - @elseif ($currentState === 'create-project') + @elseif ($currentState === 'create-project') @if (count($projects) > 0) - You already have some projects. Do you want to use one of them or should I create a new one - for - you? + You already have some projects. Do you want to use one of them or should I create a new one + for + you? @else - Let's create an initial project for you. You can change all the details later on. + Let's create an initial project for you. You can change all the details later on. @endif @@ -278,15 +292,15 @@ class="font-bold underline" target="_blank" project!
@if (count($projects) > 0) -
- - @foreach ($projects as $project) - - @endforeach - - Use this Project -
+
+ + @foreach ($projects as $project) + + @endforeach + + Use this Project +
@endif
@@ -297,7 +311,7 @@ class="font-bold underline" target="_blank" staging version of the same application, but grouped separately.

 - @elseif ($currentState === 'create-resource') + @elseif ($currentState === 'create-resource') Let's go to the new resource page, where you can create your first resource. @@ -310,24 +324,23 @@ class="font-bold underline" target="_blank"

A resource could be an application, a database or a service (like WordPress).

 - @endif -
-
-
-
Skip - onboarding
-
Restart - onboarding
+ @endif
- - -
- Feedback -
- - - -
-
-
+
+
+
Skip + onboarding
+
Restart + onboarding
+
+ + +
+ Feedback +
+ + + +
+ +