Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

main: modify copy on guided tour blade.

Browse Source
This commit is contained in:
Gary 2024-03-01 16:46:04 -08:00
parent f335adaaed
commit 24cac5feba
1 changed files with 37 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
resources/views/livewire/boarding/index.blade.php
View File

@ -2,34 +2,33 @@
<div> <div>
<div> <div>
@if ($currentState === 'welcome') @if ($currentState === 'welcome')
<h1 class="text-5xl font-bold">Welcome to Coolify</h1> <h1 class="text-5xl font-bold">Welcome to your Last Hour Cloud</h1>
<p class="py-6 text-xl text-center">Let me help you to set the basics.</p> <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 "> <div class="flex justify-center ">
<x-forms.button class="justify-center w-64 box" wire:click="$set('currentState','explanation')">Get <x-forms.button class="justify-center w-64 box" wire:click="$set('currentState','explanation')">Let's Start
Started
</x-forms.button> </x-forms.button>
</div> </div>
@endif @endif
</div> </div>
<div> <div>
@if ($currentState === 'explanation') @if ($currentState === 'explanation')
<x-boarding-step title="What is Coolify?"> <x-boarding-step title="What is this?">
<x-slot:question> <x-slot:question>
Coolify 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 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://coolify.io" 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 with superpowers!" /></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. Coolify do <p><x-highlighted text="Task automation:" /> You do not to manage your servers too much. This does
it for you.</p> it for you.</p>
<p><x-highlighted text="No vendor lock-in:" /> All configurations are stored on your server, so <p><x-highlighted text="No vendor lock-in:" /> All configurations are stored on your server, so
everything works without Coolify (except integrations and automations).</p> everything works without this (except integrations and automations).</p>
<p><x-highlighted text="Monitoring:" />You will get notified on your favourite platform (Discord, <p><x-highlighted text="Monitoring:" />You will get notified on your favourite platform (Discord,
Telegram, Email, etc.) when something goes wrong, or an action needed from your side.</p> Telegram, Email, etc.) when something goes wrong, or if an action is needed from your side.</p>
</x-slot:explanation> </x-slot:explanation>
<x-slot:actions> <x-slot:actions>
<x-forms.button class="justify-center w-64 box" wire:click="explanation">Next <x-forms.button class="justify-center w-64 box" wire:click="explanation">Next
@ -55,10 +54,10 @@
Localhost is not reachable with the following public key. Localhost is not reachable with the following public key.
<br /> <br /> <br /> <br />
Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for user 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 Coolify and to the 'root' or skip the guided tour and add a new private key manually to Last Hour Cloud and to the
server. server.
<br /> <br />
Check this <a target="_blank" class="underline" Check the upstream <a target="_blank" class="underline"
href="https://coolify.io/docs/server/openssh">documentation</a> for further help. href="https://coolify.io/docs/server/openssh">documentation</a> for further help.
<x-forms.input readonly id="serverPublicKey"></x-forms.input> <x-forms.input readonly id="serverPublicKey"></x-forms.input>
<x-forms.button class="w-64 box" wire:target="setServerType('localhost')" <x-forms.button class="w-64 box" wire:target="setServerType('localhost')"
@ -70,7 +69,7 @@
<p>Servers are the main building blocks, as they will host your applications, databases, <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 services, called resources. Any CPU intensive process will use the server's CPU where you
are deploying your resources.</p> are deploying your resources.</p>
<p>Localhost is the server where Coolify is running on. It is not recommended to use one server <p>Localhost is the server where Last Hour Cloud is running on. It is not recommended to use one server
for everything.</p> for everything.</p>
<p>Remote Server is a server reachable through SSH. It can be hosted at home, or from any cloud <p>Remote Server is a server reachable through SSH. It can be hosted at home, or from any cloud
provider.</p> provider.</p>
@ -105,7 +104,7 @@
</x-slot:actions> </x-slot:actions>
<x-slot:explanation> <x-slot:explanation>
<p>SSH Keys are used to connect to a remote server through a secure shell, called SSH.</p> <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 let Coolify to create one for you.</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 <p>In both ways, you need to add the public version of your ssh private key to the remote
server's server's
<code class="text-warning">~/.ssh/authorized_keys</code> file. <code class="text-warning">~/.ssh/authorized_keys</code> file.
@ -144,7 +143,7 @@
This server is not reachable with the following public key. This server is not reachable with the following public key.
<br /> <br /> <br /> <br />
Please make sure you have the correct public key in your ~/.ssh/authorized_keys file for user 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 Coolify and to the 'root' or skip the boarding process and add a new private key manually to Last Hour Cloud and to the
server. server.
<x-forms.input readonly id="serverPublicKey"></x-forms.input> <x-forms.input readonly id="serverPublicKey"></x-forms.input>
<x-forms.button class="w-64 box" wire:target="validateServer" wire:click="validateServer">Check <x-forms.button class="w-64 box" wire:target="validateServer" wire:click="validateServer">Check
@ -154,7 +153,7 @@
</x-slot:actions> </x-slot:actions>
<x-slot:explanation> <x-slot:explanation>
<p>Private Keys are used to connect to a remote server through a secure shell, called SSH.</p> <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>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 <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. <code>~/.ssh/authorized_keys</code> file.
</p> </p>
@ -187,7 +186,7 @@
</x-slot:actions> </x-slot:actions>
<x-slot:explanation> <x-slot:explanation>
<p>Private Keys are used to connect to a remote server through a secure shell, called SSH.</p> <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>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 <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. <code>~/.ssh/authorized_keys</code> file.
</p> </p>
@ -197,16 +196,16 @@
</div> </div>
<div> <div>
@if ($currentState === 'create-server') @if ($currentState === 'create-server')
<x-boarding-step title="Create Server"> <x-boarding-step title="Create a Server">
<x-slot:question> <x-slot:question>
Please let me know your server details. Please let us know your server details.
</x-slot:question> </x-slot:question>
<x-slot:actions> <x-slot:actions>
<form wire:submit='saveServer' class="flex flex-col w-full gap-4 pr-10"> <form wire:submit='saveServer' class="flex flex-col w-full gap-4 pr-10">
<div class="flex gap-2"> <div class="flex gap-2">
<x-forms.input required placeholder="Choose a name for your Server. Could be anything." <x-forms.input required placeholder="Choose a name for your Server. It could be anything."
label="Name" id="remoteServerName" /> label="Name" id="remoteServerName" />
<x-forms.input placeholder="Description, so others will know more about this." <x-forms.input placeholder="Description, so others will know more about it."
label="Description" id="remoteServerDescription" /> label="Description" id="remoteServerDescription" />
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
@ -219,14 +218,14 @@
</div> </div>
<div class="w-64"> <div class="w-64">
<x-forms.checkbox <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'>Coolify does not install/setup Cloudflare (cloudflared) on your server.</span>" 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" /> id="isCloudflareTunnel" label="Cloudflare Tunnel" />
</div> </div>
<x-forms.button type="submit">Continue</x-forms.button> <x-forms.button type="submit">Continue</x-forms.button>
</form> </form>
</x-slot:actions> </x-slot:actions>
<x-slot:explanation> <x-slot:explanation>
<p>Username should be <x-highlighted text="root" /> for now. We are working on to use <p>Username should be <x-highlighted text="root" /> for now. We are working on using
non-root users.</p> non-root users.</p>
</x-slot:explanation> </x-slot:explanation>
</x-boarding-step> </x-boarding-step>
@ -236,8 +235,8 @@
@if ($currentState === 'validate-server') @if ($currentState === 'validate-server')
<x-boarding-step title="Validate & Configure Server"> <x-boarding-step title="Validate & Configure Server">
<x-slot:question> <x-slot:question>
I need to validate your server (connection, Docker Engine, etc) and configure if something is we need to validate your server (connection, Docker Engine, etc) and configure to see if something is
missing for me. Are you okay with this? missing. Are you okay with this?
</x-slot:question> </x-slot:question>
<x-slot:actions> <x-slot:actions>
<x-slide-over closeWithX fullScreen> <x-slide-over closeWithX fullScreen>
@ -247,7 +246,7 @@
</x-slot:content> </x-slot:content>
<x-forms.button @click="slideOverOpen=true" class="font-bold box w-96" <x-forms.button @click="slideOverOpen=true" class="font-bold box w-96"
wire:click.prevent='installServer' isHighlighted> wire:click.prevent='installServer' isHighlighted>
Let's do it! Send it!
</x-forms.button> </x-forms.button>
</x-slide-over> </x-slide-over>
</x-slot:actions> </x-slot:actions>
@ -283,8 +282,8 @@
</x-forms.button> </x-forms.button>
</x-slot:actions> </x-slot:actions>
<x-slot:explanation> <x-slot:explanation>
<p>This will install the latest Docker Engine on your server, configure a few things to be able <p>This will install the latest Docker Engine on your server and configure a few items to be able
to run optimal.</p> to run optimally.</p>
</x-slot:explanation> </x-slot:explanation>
</x-boarding-step> </x-boarding-step>
@endif @endif
@ -294,15 +293,14 @@
<x-boarding-step title="Project"> <x-boarding-step title="Project">
<x-slot:question> <x-slot:question>
@if (count($projects) > 0) @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 already have some projects. Do you want to use one of them or should we create a new one for
you? you?
@else @else
I will create an initial project for you. You can change all the details later on. We will create an initial project for you. You can change it later on.
@endif @endif
</x-slot:question> </x-slot:question>
<x-slot:actions> <x-slot:actions>
<x-forms.button class="justify-center w-64 box" wire:click="createNewProject">Let's create a new <x-forms.button class="justify-center w-64 box" wire:click="createNewProject">Create New Project</x-forms.button>
one!</x-forms.button>
<div> <div>
@if (count($projects) > 0) @if (count($projects) > 0)
<form wire:submit='selectExistingProject' class="flex flex-col w-full gap-4 lg:w-96"> <form wire:submit='selectExistingProject' class="flex flex-col w-full gap-4 lg:w-96">
@ -319,8 +317,8 @@
</div> </div>
</x-slot:actions> </x-slot:actions>
<x-slot:explanation> <x-slot:explanation>
<p>Projects are bound together several resources into one virtual group. There are no <p>Projects put together several resources into one virtual group. There are no
limitations on the number of projects you could have.</p> 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>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> staging version of the same application, but grouped separately.</p>
</x-slot:explanation> </x-slot:explanation>
@ -331,20 +329,20 @@
@if ($currentState === 'create-resource') @if ($currentState === 'create-resource')
<x-boarding-step title="Resources"> <x-boarding-step title="Resources">
<x-slot:question> <x-slot:question>
I will redirect you to the new resource page, where you can create your first resource. Next we will redirect you to the resource page, where you can create your first resource.
</x-slot:question> </x-slot:question>
<x-slot:actions> <x-slot:actions>
<div class="items-center justify-center w-64 box" wire:click="showNewResource">Let's do <div class="items-center justify-center w-64 box" wire:click="showNewResource">Let's do
it!</div> it!</div>
</x-slot:actions> </x-slot:actions>
<x-slot:explanation> <x-slot:explanation>
<p>A resource could be an application, a database or a service (like WordPress).</p> <p>A resource is an application, a database or a service (like WordPress).</p>
</x-slot:explanation> </x-slot:explanation>
</x-boarding-step> </x-boarding-step>
@endif @endif
</div> </div>
<div class="flex justify-center gap-2 pt-4"> <div class="flex justify-center gap-2 pt-4">
<a wire:click='skipBoarding'>Skip boarding process</a> <a wire:click='skipBoarding'>Skip Guided Tour</a>
<a wire:click='restartBoarding'>Restart boarding process</a> <a wire:click='restartBoarding'>Restart Guided Tour</a>
</div> </div>
</div> </div>