main: fix url and typo
This commit is contained in:
Gary
parent
0c14c1652b
commit
e83d377bda
@ -158,10 +158,10 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li title="Get help!" onclick="help.showModal()">
|
<li title="Get help!">
|
||||||
<a href="https://lasthourhosting.org/contact.html" target="_blank">
|
<a href="https://lasthourhosting.org/contact.html" target="_blank">
|
||||||
<div class="justify-center hover:text-white hover:bg-transparent">
|
<div class="justify-center hover:text-white hover:bg-transparent">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-dots-fill" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||||
<path d="M16 8c0 3.866-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7M5 8a1 1 0 1 0-2 0 1 1 0 0 0 2 0m4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0m3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2" />
|
<path d="M16 8c0 3.866-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7M5 8a1 1 0 1 0-2 0 1 1 0 0 0 2 0m4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0m3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -8,19 +8,25 @@
|
|||||||
<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')">Let's Start
|
||||||
</x-forms.button>
|
</x-forms.button>
|
||||||
</div>
|
</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>
|
||||||
|
</div>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@if ($currentState === 'explanation')
|
@if ($currentState === 'explanation')
|
||||||
<x-boarding-step title="What is this?">
|
<x-boarding-step title="What is this?">
|
||||||
<x-slot:question>
|
<x-slot:question>
|
||||||
Last Hour Cloud is an all-in-one application to automate tasks on your servers, deploy applications with Git
|
Last Hour Cloud is an all-in-one application to automate tasks on your servers, deploy application with Git
|
||||||
integrations, deploy databases and services, monitor these resources with notifications and alerts
|
integrations, deploy databases and services, monitor these resources with notifications and alerts
|
||||||
without vendor lock-in
|
without vendor lock-in
|
||||||
and <a href="https://lasthourhosting.org/cloud.html" class="text-white hover:underline">much much more</a>.
|
and <a href="https://lasthourhosting.org/cloud.html" class="text-white hover:underline">much much more</a>.
|
||||||
<br><br>
|
<br><br>
|
||||||
<span class="text-xl">
|
<span class="text-xl">
|
||||||
<x-highlighted text="Self-hosting for the Last Hour Cloud." /></span>
|
<x-highlighted text="Self-hosting for the Last Hour." /></span>
|
||||||
</x-slot:question>
|
</x-slot:question>
|
||||||
<x-slot:explanation>
|
<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 do not to manage your servers too much. This does
|
||||||
@ -45,7 +51,40 @@
|
|||||||
<x-slot:actions>
|
<x-slot:actions>
|
||||||
<x-forms.button class="justify-center w-64 box" wire:target="setServerType('localhost')" wire:click="setServerType('localhost')">Localhost
|
<x-forms.button class="justify-center w-64 box" wire:target="setServerType('localhost')" wire:click="setServerType('localhost')">Localhost
|
||||||
</x-forms.button>
|
</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 class="justify-center w-64 box " wire:target="setServerType('remote')" wire:click="setServerType('remote')">Remote Server
|
||||||
</x-forms.button>
|
</x-forms.button>
|
||||||
@if (!$serverReachable)
|
@if (!$serverReachable)
|
||||||
@ -106,6 +145,37 @@
|
|||||||
</p>
|
</p>
|
||||||
</x-slot:explanation>
|
</x-slot:explanation>
|
||||||
</x-boarding-step>
|
</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>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>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@ -155,6 +225,51 @@
|
|||||||
</p>
|
</p>
|
||||||
</x-slot:explanation>
|
</x-slot:explanation>
|
||||||
</x-boarding-step>
|
</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>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>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@ -185,6 +300,32 @@
|
|||||||
</p>
|
</p>
|
||||||
</x-slot:explanation>
|
</x-slot:explanation>
|
||||||
</x-boarding-step>
|
</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>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>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@ -215,6 +356,32 @@
|
|||||||
non-root users.</p>
|
non-root users.</p>
|
||||||
</x-slot:explanation>
|
</x-slot:explanation>
|
||||||
</x-boarding-step>
|
</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
|
||||||
|
non-root users.</p>
|
||||||
|
</x-slot:explanation>
|
||||||
|
</x-boarding-step>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@ -242,6 +409,29 @@
|
|||||||
documentation</a>.</p>
|
documentation</a>.</p>
|
||||||
</x-slot:explanation>
|
</x-slot:explanation>
|
||||||
</x-boarding-step>
|
</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!
|
||||||
|
</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>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
{{-- <div>
|
{{-- <div>
|
||||||
@ -329,4 +519,78 @@
|
|||||||
<a wire:click='skipBoarding'>Skip Guided Tour</a>
|
<a wire:click='skipBoarding'>Skip Guided Tour</a>
|
||||||
<a wire:click='restartBoarding'>Restart Guided Tour</a>
|
<a wire:click='restartBoarding'>Restart Guided Tour</a>
|
||||||
</div>
|
</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>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
Loading…
Reference in New Issue
Block a user