From 1fdd357278277889090a7fa632dba57c0b657dd1 Mon Sep 17 00:00:00 2001
From: Gary <pgx7aiqs@anonaddy.me>
Date: Thu, 14 Mar 2024 13:04:43 -0700
Subject: [PATCH] fix boarding error after merge with v4.0.0-beta.238

---
 .../views/livewire/boarding/index.blade.php   | 342 ++----------------
 1 file changed, 40 insertions(+), 302 deletions(-)

diff --git a/resources/views/livewire/boarding/index.blade.php b/resources/views/livewire/boarding/index.blade.php
index 42a45f927..f8018c0fb 100644
--- a/resources/views/livewire/boarding/index.blade.php
+++ b/resources/views/livewire/boarding/index.blade.php
@@ -2,39 +2,34 @@
 <div>
     <div>
         @if ($currentState === 'welcome')
-        <h1 class="text-5xl font-bold">Welcome to your Last Hour Cloud</h1>
-        <p class="py-6 text-xl text-center">Let's help you to set up the basics and show you around.</p>
+        <h1 class="text-5xl font-bold">Welcome to Last Hour Cloud</h1>
+        <p class="py-6 text-xl text-center">Let me help you set up the basics.</p>
         <div class="flex justify-center ">
-            <x-forms.button class="justify-center w-64 box" wire:click="$set('currentState','explanation')">Let's Start
-            </x-forms.button>
-        </div>
-        <h1 class="text-5xl font-bold">Welcome to your Last Hour Cloud</h1>
-        <p class="py-6 text-xl text-center">Let's help you to set up the basics and show you around.</p>
-        <div class="flex justify-center ">
-            <x-forms.button class="justify-center w-64 box" wire:click="$set('currentState','explanation')">Let's Start
+            <x-forms.button class="justify-center w-64 box" wire:click="$set('currentState','explanation')">Get
+                Started
             </x-forms.button>
         </div>
         @endif
     </div>
     <div>
         @if ($currentState === 'explanation')
-        <x-boarding-step title="What is this?">
+        <x-boarding-step title="What is Last Hour Cloud?">
             <x-slot:question>
-                Last Hour Cloud is an all-in-one application to automate tasks on your servers, deploy application with Git
+                Last Hour Cloud is an all-in-one application to automate tasks on your servers, deploy applications with Git
                 integrations, deploy databases and services, monitor these resources with notifications and alerts
                 without vendor lock-in
                 and <a href="https://lasthourhosting.org/cloud.html" class="text-white hover:underline">much much more</a>.
                 <br><br>
                 <span class="text-xl">
-                    <x-highlighted text="Self-hosting for the Last Hour." /></span>
+                    <x-highlighted text="Self-hosting with superpowers!" /></span>
             </x-slot:question>
             <x-slot:explanation>
-                <p><x-highlighted text="Task automation:" /> You do not to manage your servers too much. This does
+                <p><x-highlighted text="Task automation:" /> You don't need to manage your servers anymore. Last Hour Cloud does
                     it for you.</p>
-                <p><x-highlighted text="No vendor lock-in:" /> All configurations are stored on your server, so
-                    everything works without this (except integrations and automations).</p>
-                <p><x-highlighted text="Monitoring:" />You will get notified on your favourite platform (Discord,
-                    Telegram, Email, etc.) when something goes wrong, or if an action is needed from your side.</p>
+                <p><x-highlighted text="No vendor lock-in:" /> All configurations are stored on your servers, so
+                    everything works without a connection to Last Hour Cloud (except integrations and automations).</p>
+                <p><x-highlighted text="Monitoring:" />You can get notified on your favourite platforms (Discord,
+                    Telegram, Email, etc.) when something goes wrong, or an action is needed from your side.</p>
             </x-slot:explanation>
             <x-slot:actions>
                 <x-forms.button class="justify-center w-64 box" wire:click="explanation">Next
@@ -45,56 +40,23 @@
         @if ($currentState === 'select-server-type')
         <x-boarding-step title="Server">
             <x-slot:question>
-                Do you want to deploy your resources on your <x-highlighted text="Localhost" />
-                or on a <x-highlighted text="Remote Server" />?
+                Do you want to deploy your resources to your <x-highlighted text="Localhost" />
+                or to a <x-highlighted text="Remote Server" />?
             </x-slot:question>
             <x-slot:actions>
                 <x-forms.button class="justify-center w-64 box" wire:target="setServerType('localhost')" wire:click="setServerType('localhost')">Localhost
                 </x-forms.button>
-                <x-boarding-step title="Server">
-                    <x-slot:question>
-                        Do you want to deploy your resources on your <x-highlighted text="Localhost" />
-                        or on a <x-highlighted text="Remote Server" />?
-                    </x-slot:question>
-                    <x-slot:actions>
-                        <x-forms.button class="justify-center w-64 box" wire:target="setServerType('localhost')" wire:click="setServerType('localhost')">Localhost
-                        </x-forms.button>
 
-                        <x-forms.button class="justify-center w-64 box " wire:target="setServerType('remote')" wire:click="setServerType('remote')">Remote Server
-                        </x-forms.button>
-                        @if (!$serverReachable)
-                        Localhost is not reachable with the following public key.
-                        <br /> <br />
-                        Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for user
-                        'root' or skip the guided tour and add a new private key manually to Last Hour Cloud and to the
-                        server.
-                        <br />
-                        Check the upstream <a target="_blank" class="underline" href="https://coolify.io/docs/server/openssh">documentation</a> for further help.
-                        <x-forms.input readonly id="serverPublicKey"></x-forms.input>
-                        <x-forms.button class="w-64 box" wire:target="setServerType('localhost')" wire:click="setServerType('localhost')">Check again
-                        </x-forms.button>
-                        @endif
-                    </x-slot:actions>
-                    <x-slot:explanation>
-                        <p>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.</p>
-                        <p>Localhost is the server where Last Hour Cloud is running on. It is not recommended to use one server
-                            for everything.</p>
-                        <p>Remote Server is a server reachable through SSH. It can be hosted at home, or from any cloud
-                            provider.</p>
-                    </x-slot:explanation>
-                </x-boarding-step>
                 <x-forms.button class="justify-center w-64 box " wire:target="setServerType('remote')" wire:click="setServerType('remote')">Remote Server
                 </x-forms.button>
                 @if (!$serverReachable)
                 Localhost is not reachable with the following public key.
                 <br /> <br />
                 Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for user
-                'root' or skip the guided tour and add a new private key manually to Last Hour Cloud and to the
+                'root' or skip the boarding process and add a new private key manually to Last Hour Cloud and to the
                 server.
                 <br />
-                Check the upstream <a target="_blank" class="underline" href="https://coolify.io/docs/server/openssh">documentation</a> for further help.
+                Check this upstream <a target="_blank" class="underline" href="https://coolify.io/docs/server/openssh">documentation</a> for further help.
                 <x-forms.input readonly id="serverPublicKey"></x-forms.input>
                 <x-forms.button class="w-64 box" wire:target="setServerType('localhost')" wire:click="setServerType('localhost')">Check again
                 </x-forms.button>
@@ -138,38 +100,7 @@
             </x-slot:actions>
             <x-slot:explanation>
                 <p>SSH Keys are used to connect to a remote server through a secure shell, called SSH.</p>
-                <p>You can use your own ssh private key, or you can allow Last Hour Cloud to create one for you.</p>
-                <p>In both ways, you need to add the public version of your ssh private key to the remote
-                    server's
-                    <code class="text-warning">~/.ssh/authorized_keys</code> file.
-                </p>
-            </x-slot:explanation>
-        </x-boarding-step>
-        <x-boarding-step title="SSH Key">
-            <x-slot:question>
-                Do you have your own SSH Private Key?
-            </x-slot:question>
-            <x-slot:actions>
-                <x-forms.button class="justify-center w-64 box" wire:target="setPrivateKey('own')" wire:click="setPrivateKey('own')">Yes
-                </x-forms.button>
-                <x-forms.button class="justify-center w-64 box" wire:target="setPrivateKey('create')" wire:click="setPrivateKey('create')">No (create one for me)
-                </x-forms.button>
-                @if (count($privateKeys) > 0)
-                <form wire:submit='selectExistingPrivateKey' class="flex flex-col w-full gap-4 pr-10">
-                    <x-forms.select label="Existing SSH Keys" id='selectedExistingPrivateKey'>
-                        @foreach ($privateKeys as $privateKey)
-                        <option wire:key="{{ $loop->index }}" value="{{ $privateKey->id }}">
-                            {{ $privateKey->name }}
-                        </option>
-                        @endforeach
-                    </x-forms.select>
-                    <x-forms.button type="submit">Use this SSH Key</x-forms.button>
-                </form>
-                @endif
-            </x-slot:actions>
-            <x-slot:explanation>
-                <p>SSH Keys are used to connect to a remote server through a secure shell, called SSH.</p>
-                <p>You can use your own ssh private key, or you can allow Last Hour Cloud to create one for you.</p>
+                <p>You can use your own ssh private key, or you can let Last Hour Cloud to create one for you.</p>
                 <p>In both ways, you need to add the public version of your ssh private key to the remote
                     server's
                     <code class="text-warning">~/.ssh/authorized_keys</code> file.
@@ -219,52 +150,7 @@
             </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 Last Hour Cloud 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>
-        <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" 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)
-                This server is not reachable with the following public key.
-                <br /> <br />
-                Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for user
-                'root' or skip the boarding process and add a new private key manually to Last Hour Cloud and to the
-                server.
-                <x-forms.input readonly id="serverPublicKey"></x-forms.input>
-                <x-forms.button class="w-64 box" wire:target="validateServer" wire:click="validateServer">Check
-                    again
-                </x-forms.button>
-                @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 Last Hour Cloud create one for you.</p>
+                <p>You can use your own private key, or you can let Last Hour Cloud 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>
@@ -294,33 +180,7 @@
             </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 Last Hour Cloud 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>
-        <x-boarding-step title="Create Private Key">
-            <x-slot:question>
-                Please let me know your key details.
-            </x-slot:question>
-            <x-slot:actions>
-                <form wire:submit='savePrivateKey' class="flex flex-col w-full gap-4 pr-10">
-                    <x-forms.input required placeholder="Choose a name for your Private Key. Could be anything." label="Name" id="privateKeyName" />
-                    <x-forms.input placeholder="Description, so others will know more about this." label="Description" id="privateKeyDescription" />
-                    <x-forms.textarea required placeholder="-----BEGIN OPENSSH PRIVATE KEY-----" label="Private Key" id="privateKey" />
-                    @if ($privateKeyType === 'create')
-                    <x-forms.textarea rows="7" readonly label="Public Key" id="publicKey" />
-                    <span class="font-bold text-warning">ACTION REQUIRED: Copy the 'Public Key' to your server's
-                        ~/.ssh/authorized_keys
-                        file.</span>
-                    @endif
-                    <x-forms.button type="submit">Save</x-forms.button>
-                </form>
-            </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 Last Hour Cloud create one for you.</p>
+                <p>You can use your own private key, or you can let Last Hour Cloud 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>
@@ -330,15 +190,15 @@
     </div>
     <div>
         @if ($currentState === 'create-server')
-        <x-boarding-step title="Create a Server">
+        <x-boarding-step title="Create Server">
             <x-slot:question>
-                Please let us know your server details.
+                Please let me know your server details.
             </x-slot:question>
             <x-slot:actions>
                 <form wire:submit='saveServer' class="flex flex-col w-full gap-4 pr-10">
                     <div class="flex gap-2">
-                        <x-forms.input required placeholder="Choose a name for your Server. It could be anything." label="Name" id="remoteServerName" />
-                        <x-forms.input placeholder="Description, so others will know more about it." label="Description" id="remoteServerDescription" />
+                        <x-forms.input required placeholder="Choose a name for your Server. Could be anything." label="Name" id="remoteServerName" />
+                        <x-forms.input placeholder="Description, so others will know more about this." label="Description" id="remoteServerDescription" />
                     </div>
                     <div class="flex gap-2">
                         <x-forms.input required placeholder="127.0.0.1" label="IP Address" id="remoteServerHost" />
@@ -352,33 +212,7 @@
                 </form>
             </x-slot:actions>
             <x-slot:explanation>
-                <p>Username should be <x-highlighted text="root" /> for now. We are working on using
-                    non-root users.</p>
-            </x-slot:explanation>
-        </x-boarding-step>
-        <x-boarding-step title="Create a Server">
-            <x-slot:question>
-                Please let us know your server details.
-            </x-slot:question>
-            <x-slot:actions>
-                <form wire:submit='saveServer' class="flex flex-col w-full gap-4 pr-10">
-                    <div class="flex gap-2">
-                        <x-forms.input required placeholder="Choose a name for your Server. It could be anything." label="Name" id="remoteServerName" />
-                        <x-forms.input placeholder="Description, so others will know more about it." label="Description" id="remoteServerDescription" />
-                    </div>
-                    <div class="flex gap-2">
-                        <x-forms.input required placeholder="127.0.0.1" label="IP Address" id="remoteServerHost" />
-                        <x-forms.input required placeholder="Port number of your server. Default is 22." label="Port" id="remoteServerPort" />
-                        <x-forms.input required readonly placeholder="Username to connect to your server. Default is root." label="Username" id="remoteServerUser" />
-                    </div>
-                    <div class="w-64">
-                        <x-forms.checkbox helper="If you are using Cloudflare Tunnels, enable this. It will proxy all ssh requests to your server through Cloudflare.<br><span class='text-warning'>Last Hour Cloud does not install/setup Cloudflare (cloudflared) on your server.</span>" id="isCloudflareTunnel" label="Cloudflare Tunnel" />
-                    </div>
-                    <x-forms.button type="submit">Continue</x-forms.button>
-                </form>
-            </x-slot:actions>
-            <x-slot:explanation>
-                <p>Username should be <x-highlighted text="root" /> for now. We are working on using
+                <p>Username should be <x-highlighted text="root" /> for now. We are working on to use
                     non-root users.</p>
             </x-slot:explanation>
         </x-boarding-step>
@@ -388,8 +222,8 @@
         @if ($currentState === 'validate-server')
         <x-boarding-step title="Validate & Configure Server">
             <x-slot:question>
-                we need to validate your server (connection, Docker Engine, etc) and configure to see if something is
-                missing. Are you okay with this?
+                I need to validate your server (connection, Docker Engine, etc) and configure if something is
+                missing for me. Are you okay with this?
             </x-slot:question>
             <x-slot:actions>
                 <x-slide-over closeWithX fullScreen>
@@ -398,30 +232,7 @@
                         <livewire:server.validate-and-install :server="$this->createdServer" />
                     </x-slot:content>
                     <x-forms.button @click="slideOverOpen=true" class="font-bold box w-96" wire:click.prevent='installServer' isHighlighted>
-                        Send it!
-                    </x-forms.button>
-                </x-slide-over>
-            </x-slot:actions>
-            <x-slot:explanation>
-                <p>This will install the latest Docker Engine on your server, configure a few things to be able
-                    to run optimal.<br><br>Minimum Docker Engine version is: 22<br><br>To manually install Docker
-                    Engine, check <a target="_blank" class="underline text-warning" href="https://docs.docker.com/engine/install/#server">this
-                        documentation</a>.</p>
-            </x-slot:explanation>
-        </x-boarding-step>
-        <x-boarding-step title="Validate & Configure Server">
-            <x-slot:question>
-                we need to validate your server (connection, Docker Engine, etc) and configure to see if something is
-                missing. Are you okay with this?
-            </x-slot:question>
-            <x-slot:actions>
-                <x-slide-over closeWithX fullScreen>
-                    <x-slot:title>Validate & configure</x-slot:title>
-                    <x-slot:content>
-                        <livewire:server.validate-and-install :server="$this->createdServer" />
-                    </x-slot:content>
-                    <x-forms.button @click="slideOverOpen=true" class="font-bold box w-96" wire:click.prevent='installServer' isHighlighted>
-                        Send it!
+                        Let's do it!
                     </x-forms.button>
                 </x-slide-over>
             </x-slot:actions>
@@ -456,8 +267,8 @@
     </x-forms.button>
     </x-slot:actions>
     <x-slot:explanation>
-        <p>This will install the latest Docker Engine on your server and configure a few items to be able
-            to run optimally.</p>
+        <p>This will install the latest Docker Engine on your server, configure a few things to be able
+            to run optimal.</p>
     </x-slot:explanation>
     </x-boarding-step>
     @endif
@@ -467,14 +278,15 @@
     <x-boarding-step title="Project">
         <x-slot:question>
             @if (count($projects) > 0)
-            You already have some projects. Do you want to use one of them or should we create a new one for
+            You already have some projects. Do you want to use one of them or should I create a new one for
             you?
             @else
-            We will create an initial project for you. You can change it later on.
+            Let's create an initial project for you. You can change all the details later on.
             @endif
         </x-slot:question>
         <x-slot:actions>
-            <x-forms.button class="justify-center w-64 box" wire:click="createNewProject">Create New Project</x-forms.button>
+            <x-forms.button class="justify-center w-64 box" wire:click="createNewProject">Create new
+                project!</x-forms.button>
             <div>
                 @if (count($projects) > 0)
                 <form wire:submit='selectExistingProject' class="flex flex-col w-full gap-4 lg:w-96">
@@ -491,9 +303,9 @@
             </div>
         </x-slot:actions>
         <x-slot:explanation>
-            <p>Projects put together several resources into one virtual group. There are no
-                limitations on the number of projects you can have here.</p>
-            <p>Each project should have at least one environment. This helps you to create a production &
+            <p>Projects contain several resources combined into one virtual group. There are no
+                limitations on the number of projects you can add.</p>
+            <p>Each project should have at least one environment, this allows you to create a production &
                 staging version of the same application, but grouped separately.</p>
         </x-slot:explanation>
     </x-boarding-step>
@@ -503,94 +315,20 @@
     @if ($currentState === 'create-resource')
     <x-boarding-step title="Resources">
         <x-slot:question>
-            Next we will redirect you to the resource page, where you can create your first resource.
+            Let's go to the new resource page, where you can create your first resource.
         </x-slot:question>
         <x-slot:actions>
             <div class="items-center justify-center w-64 box" wire:click="showNewResource">Let's do
                 it!</div>
         </x-slot:actions>
         <x-slot:explanation>
-            <p>A resource is an application, a database or a service (like WordPress).</p>
+            <p>A resource could be an application, a database or a service (like WordPress).</p>
         </x-slot:explanation>
     </x-boarding-step>
     @endif
 </div>
 <div class="flex justify-center gap-2 pt-4">
-    <a wire:click='skipBoarding'>Skip Guided Tour</a>
-    <a wire:click='restartBoarding'>Restart Guided Tour</a>
-</div>
-Traefik
-v2
-</x-forms.button>
-<x-forms.button disabled class="w-32 box">
-    Nginx
-</x-forms.button>
-<x-forms.button disabled class="w-32 box">
-    Caddy
-</x-forms.button>
-</x-slot:actions>
-<x-slot:explanation>
-    <p>This will install the latest Docker Engine on your server and configure a few items to be able
-        to run optimally.</p>
-</x-slot:explanation>
-</x-boarding-step>
-@endif
-</div> --}}
-<div>
-    @if ($currentState === 'create-project')
-    <x-boarding-step title="Project">
-        <x-slot:question>
-            @if (count($projects) > 0)
-            You already have some projects. Do you want to use one of them or should we create a new one for
-            you?
-            @else
-            We will create an initial project for you. You can change it later on.
-            @endif
-        </x-slot:question>
-        <x-slot:actions>
-            <x-forms.button class="justify-center w-64 box" wire:click="createNewProject">Create New Project</x-forms.button>
-            <div>
-                @if (count($projects) > 0)
-                <form wire:submit='selectExistingProject' class="flex flex-col w-full gap-4 lg:w-96">
-                    <x-forms.select label="Existing projects" class="w-96" id='selectedExistingProject'>
-                        @foreach ($projects as $project)
-                        <option wire:key="{{ $loop->index }}" value="{{ $project->id }}">
-                            {{ $project->name }}
-                        </option>
-                        @endforeach
-                    </x-forms.select>
-                    <x-forms.button type="submit">Use this Project</x-forms.button>
-                </form>
-                @endif
-            </div>
-        </x-slot:actions>
-        <x-slot:explanation>
-            <p>Projects put together several resources into one virtual group. There are no
-                limitations on the number of projects you can have here.</p>
-            <p>Each project should have at least one environment. This helps you to create a production &
-                staging version of the same application, but grouped separately.</p>
-        </x-slot:explanation>
-    </x-boarding-step>
-    @endif
-</div>
-<div>
-    @if ($currentState === 'create-resource')
-    <x-boarding-step title="Resources">
-        <x-slot:question>
-            Next we will redirect you to the resource page, where you can create your first resource.
-        </x-slot:question>
-        <x-slot:actions>
-            <div class="items-center justify-center w-64 box" wire:click="showNewResource">Let's do
-                it!</div>
-        </x-slot:actions>
-        <x-slot:explanation>
-            <p>A resource is an application, a database or a service (like WordPress).</p>
-        </x-slot:explanation>
-    </x-boarding-step>
-    @endif
-</div>
-<div class="flex justify-center gap-2 pt-4">
-    <a wire:click='skipBoarding'>Skip Guided Tour</a>
-    <a wire:click='restartBoarding'>Restart Guided Tour</a>
+    <a wire:click='skipBoarding'>Skip boarding process</a>
+    <a wire:click='restartBoarding'>Restart boarding process</a>
 </div>
 </div>
\ No newline at end of file