2023-08-29 14:31:46 +00:00
@ php use App\Enums\ProxyTypes ; @ endphp
2024-06-07 09:01:10 +00:00
< x - slot : title >
2024-07-25 20:50:18 +00:00
Onboarding | Last Hour Cloud
2024-07-25 20:14:23 +00:00
</ x - slot >
< section class = " flex flex-col h-full lg:items-center lg:justify-center " >
< div class = " flex flex-col items-center justify-center p-10 mx-2 mt-10 bg-white border rounded-lg shadow lg:p-20 dark:bg-transparent dark:border-none max-w-7xl " >
@ 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 >
2023-08-30 09:06:44 +00:00
< div class = " flex justify-center " >
2024-07-25 20:14:23 +00:00
< x - forms . button class = " justify-center w-64 box " wire : click = " $set ('currentState','explanation') " > Let ' s Start
2023-08-30 12:46:51 +00:00
</ x - forms . button >
2023-08-30 09:06:44 +00:00
</ div >
2024-07-25 20:14:23 +00:00
@ endif
</ div >
2024-07-25 20:57:03 +00:00
< 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 >
2024-07-25 20:50:18 +00:00
@ endif
</ div >
2024-07-25 20:14:23 +00:00
< div >
@ if ( $currentState === 'explanation' )
< x - boarding - step title = " What is this? " >
2024-03-25 13:44:31 +00:00
< x - slot : question >
2024-07-25 20:50:18 +00:00
Last Hour Cloud is an all - in - one application to automate tasks on your servers , deploy applications with Git
2024-07-25 20:14:23 +00:00
integrations , deploy databases and services , monitor these resources with notifications and alerts
2024-03-25 13:44:31 +00:00
without vendor lock - in
2024-07-25 20:14:23 +00:00
and < a href = " https://lasthourhosting.org/cloud.html " class = " text-white hover:underline " > much much more </ a >.
2024-03-25 13:44:31 +00:00
< br >< br >
< span class = " text-xl " >
2024-07-25 20:50:18 +00:00
< x - highlighted text = " Self-hosting for the Last Hour Cloud. " /></ span >
2024-03-25 13:44:31 +00:00
</ x - slot : question >
< x - slot : explanation >
2024-07-25 20:14:23 +00:00
< p >< x - highlighted text = " Task automation: " /> You do not to manage your servers too much . This does
2024-03-25 13:44:31 +00:00
it for you .</ p >
2024-07-25 20:14:23 +00:00
< 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 >
2024-03-25 13:44:31 +00:00
</ x - slot : explanation >
< x - slot : actions >
2024-07-25 20:14:23 +00:00
< x - forms . button class = " justify-center w-64 box " wire : click = " explanation " > Next
2024-03-25 13:44:31 +00:00
</ x - forms . button >
</ x - slot : actions >
</ x - boarding - step >
2024-07-25 20:14:23 +00:00
@ endif
@ if ( $currentState === 'select-server-type' )
2024-03-25 13:44:31 +00:00
< x - boarding - step title = " Server " >
< x - slot : question >
2024-07-25 20:14:23 +00:00
Do you want to deploy your resources on your < x - highlighted text = " Localhost " />
or on a < x - highlighted text = " Remote Server " /> ?
2024-03-25 13:44:31 +00:00
</ x - slot : question >
< x - slot : actions >
2024-07-25 20:14:23 +00:00
< x - forms . button class = " justify-center w-64 box " wire : target = " setServerType('localhost') " wire : click = " setServerType('localhost') " > Localhost
2024-03-25 13:44:31 +00:00
</ x - forms . button >
2023-09-18 11:01:01 +00:00
2024-07-25 20:14:23 +00:00
< x - forms . button class = " justify-center w-64 box " wire : target = " setServerType('remote') " wire : click = " setServerType('remote') " > Remote Server
2024-03-25 13:44:31 +00:00
</ x - forms . button >
2024-07-25 20:50:18 +00:00
@ 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 >
@ endif
</ div >
< div >
@ if ( $currentState === 'private-key' )
< 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
</ div >
< div >
@ if ( $currentState === 'select-existing-server' )
< 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
</ div >
< div >
@ if ( $currentState === 'create-private-key' )
< 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
</ div >
< div >
@ if ( $currentState === 'create-server' )
< 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
</ div >
< div >
@ 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 ?
</ 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 - slot : actions >
</ x - boarding - step >
@ endif
@ 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 " /> ?
</ 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 >
2024-03-25 13:44:31 +00:00
@ if ( ! $serverReachable )
2024-07-25 20:14:23 +00:00
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 >
2024-03-25 13:44:31 +00:00
@ 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 >
2024-07-25 20:14:23 +00:00
< p > Localhost is the server where Last Hour Cloud is running on . It is not recommended to use one server
2024-03-25 13:44:31 +00:00
for everything .</ p >
2024-07-25 20:14:23 +00:00
< p > Remote Server is a server reachable through SSH . It can be hosted at home , or from any cloud
2024-03-25 13:44:31 +00:00
provider .</ p >
</ x - slot : explanation >
</ x - boarding - step >
2024-07-25 20:14:23 +00:00
@ endif
</ div >
< div >
@ if ( $currentState === 'private-key' )
2024-03-25 13:44:31 +00:00
< x - boarding - step title = " SSH Key " >
< x - slot : question >
Do you have your own SSH Private Key ?
</ x - slot : question >
< x - slot : actions >
2024-07-25 20:14:23 +00:00
< x - forms . button class = " justify-center w-64 box " wire : target = " setPrivateKey('own') " wire : click = " setPrivateKey('own') " > Yes
2024-03-25 13:44:31 +00:00
</ x - forms . button >
2024-07-25 20:14:23 +00:00
< x - forms . button class = " justify-center w-64 box " wire : target = " setPrivateKey('create') " wire : click = " setPrivateKey('create') " > No ( create one for me )
2024-03-25 13:44:31 +00:00
</ x - forms . button >
@ if ( count ( $privateKeys ) > 0 )
2024-07-25 20:14:23 +00:00
< 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 >
2024-03-25 13:44:31 +00:00
@ 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 >
2024-07-25 20:14:23 +00:00
< p > You can use your own ssh private key , or you can allow Last Hour Cloud to create one for you .</ p >
2024-03-25 13:44:31 +00:00
< p > In both ways , you need to add the public version of your ssh private key to the remote
server ' s
2024-07-25 20:14:23 +00:00
< code class = " text-warning " >~/. ssh / authorized_keys </ code > file .
2024-03-25 13:44:31 +00:00
</ p >
</ x - slot : explanation >
</ x - boarding - step >
2024-07-25 20:14:23 +00:00
@ endif
</ div >
< div >
@ if ( $currentState === 'select-existing-server' )
2024-03-25 13:44:31 +00:00
< 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 >
2024-07-25 20:14:23 +00:00
< x - forms . button class = " justify-center w-64 box " wire : click = " createNewServer " > No ( create one
2024-03-25 13:44:31 +00:00
for
me )
2024-02-12 10:46:36 +00:00
</ x - forms . button >
2024-03-25 13:44:31 +00:00
</ 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 )
2024-07-25 20:14:23 +00:00
< option wire : key = " { { $loop->index }} " value = " { { $server->id }} " >
{{ $server -> name }}
</ option >
2024-02-12 10:46:36 +00:00
@ endforeach
</ x - forms . select >
2024-03-25 13:44:31 +00:00
< x - forms . button type = " submit " > Use this Server </ x - forms . button >
2024-02-12 10:46:36 +00:00
</ form >
</ div >
2024-03-25 13:44:31 +00:00
</ div >
@ if ( ! $serverReachable )
2024-07-25 20:14:23 +00:00
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 >
2024-03-25 13:44:31 +00:00
@ 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 >
2024-07-25 20:14:23 +00:00
< p > You can use your own private key , or you can let Last Hour Cloud create one for you .</ p >
2024-03-25 13:44:31 +00:00
< 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 >
2024-07-25 20:14:23 +00:00
@ endif
</ div >
< div >
@ if ( $currentState === 'create-private-key' )
2024-03-25 13:44:31 +00:00
< x - boarding - step title = " Create Private Key " >
< x - slot : question >
Please let me know your key details .
</ x - slot : question >
< x - slot : actions >
2024-07-25 20:14:23 +00:00
< 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 " />
2024-03-25 13:44:31 +00:00
@ if ( $privateKeyType === 'create' )
2024-07-25 20:14:23 +00:00
< 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 >
2023-08-30 09:06:44 +00:00
@ endif
2024-03-25 13:44:31 +00:00
< 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 >
2024-07-25 20:14:23 +00:00
< p > You can use your own private key , or you can let Last Hour Cloud create one for you .</ p >
2024-03-25 13:44:31 +00:00
< 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 >
2024-07-25 20:14:23 +00:00
@ endif
</ div >
< div >
@ if ( $currentState === 'create-server' )
< x - boarding - step title = " Create a Server " >
2024-03-25 13:44:31 +00:00
< x - slot : question >
2024-07-25 20:14:23 +00:00
Please let us know your server details .
2024-03-25 13:44:31 +00:00
</ x - slot : question >
< x - slot : actions >
2024-07-25 20:14:23 +00:00
< 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 " />
2024-03-25 13:44:31 +00:00
</ div >
2024-07-25 20:14:23 +00:00
< div class = " flex gap-2 " >
2024-03-25 13:44:31 +00:00
< x - forms . input required placeholder = " 127.0.0.1 " label = " IP Address " id = " remoteServerHost " />
2024-07-25 20:14:23 +00:00
< 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 " />
2024-03-25 13:44:31 +00:00
</ div >
2024-07-25 20:14:23 +00:00
< 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 " />
2024-03-25 13:44:31 +00:00
</ div >
< x - forms . button type = " submit " > Continue </ x - forms . button >
</ form >
</ x - slot : actions >
2024-07-25 20:14:23 +00:00
< 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 >
2024-03-25 13:44:31 +00:00
</ x - boarding - step >
2024-07-25 20:14:23 +00:00
@ endif
</ div >
< div >
@ if ( $currentState === 'validate-server' )
2024-03-25 13:44:31 +00:00
< x - boarding - step title = " Validate & Configure Server " >
< x - slot : question >
2024-07-25 20:14:23 +00:00
we need to validate your server ( connection , Docker Engine , etc ) and configure to see if something is
missing . Are you okay with this ?
2024-03-25 13:44:31 +00:00
</ 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 >
2024-07-25 20:14:23 +00:00
< x - forms . button @ click = " slideOverOpen=true " class = " font-bold box w-96 " wire : click . prevent = 'installServer' isHighlighted >
Send it !
2024-03-25 13:44:31 +00:00
</ 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
2024-07-25 20:14:23 +00:00
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
2024-03-25 13:44:31 +00:00
documentation </ a >.</ p >
</ x - slot : explanation >
</ x - boarding - step >
2024-07-25 20:14:23 +00:00
@ endif
</ div >
{{ -- < div >
@ if ( $currentState === 'select-proxy' )
< x - boarding - step title = " Select a Proxy " >
< x - slot : question >
If you would like to attach any kind of domain to your resources , you need a proxy .
</ x - slot : question >
< x - slot : actions >
< x - forms . button wire : click = " selectProxy " class = " w-64 box " >
Decide later
</ x - forms . button >
< x - forms . button class = " w-32 box " wire : click = " selectProxy(' { { ProxyTypes::TRAEFIK_V2 }}') " >
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' )
2024-03-25 13:44:31 +00:00
< x - boarding - step title = " Project " >
< x - slot : question >
@ if ( count ( $projects ) > 0 )
2024-07-25 20:14:23 +00:00
You already have some projects . Do you want to use one of them or should we create a new one for
you ?
2024-03-25 13:44:31 +00:00
@ else
2024-07-25 20:14:23 +00:00
We will create an initial project for you . You can change it later on .
2024-03-25 13:44:31 +00:00
@ endif
</ x - slot : question >
< x - slot : actions >
2024-07-25 20:14:23 +00:00
< x - forms . button class = " justify-center w-64 box " wire : click = " createNewProject " > Create New Project </ x - forms . button >
2024-03-25 13:44:31 +00:00
< div >
2023-08-30 09:06:44 +00:00
@ if ( count ( $projects ) > 0 )
2024-07-25 20:14:23 +00:00
< 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 >
2023-08-30 09:06:44 +00:00
@ endif
2024-03-25 13:34:11 +00:00
</ div >
2024-03-25 13:44:31 +00:00
</ x - slot : actions >
< x - slot : explanation >
2024-07-25 20:14:23 +00:00
< 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 &
2024-03-25 13:44:31 +00:00
staging version of the same application , but grouped separately .</ p >
</ x - slot : explanation >
</ x - boarding - step >
2024-07-25 20:14:23 +00:00
@ endif
</ div >
< div >
@ if ( $currentState === 'create-resource' )
2024-03-25 13:44:31 +00:00
< x - boarding - step title = " Resources " >
< x - slot : question >
2024-07-25 20:14:23 +00:00
Next we will redirect you to the resource page , where you can create your first resource .
2024-03-25 13:44:31 +00:00
</ x - slot : question >
< x - slot : actions >
2024-07-25 20:14:23 +00:00
< div class = " items-center justify-center w-64 box " wire : click = " showNewResource " > Let ' s do
2024-03-25 13:44:31 +00:00
it !</ div >
</ x - slot : actions >
< x - slot : explanation >
2024-07-25 20:14:23 +00:00
< p > A resource is an application , a database or a service ( like WordPress ) .</ p >
2024-03-25 13:44:31 +00:00
</ x - slot : explanation >
</ x - boarding - step >
2024-07-25 20:14:23 +00:00
@ 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 >
2024-03-20 14:46:59 +00:00
</ div >
2024-07-25 20:14:23 +00:00
</ div >
