main: fix url and typo

This commit is contained in:
Gary 2024-03-06 12:30:24 -08:00
parent 9cf6925652
commit 10ac40a295
2 changed files with 289 additions and 305 deletions

View File

@ -151,10 +151,10 @@
</svg> </svg>
</a> </a>
</li> </li>
<li title="Get help!" onclick="help.showModal()"> <li title="Get help!">
<a href="https://www.example.com/" 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>

View File

@ -2,262 +2,246 @@
<div> <div>
<div> <div>
@if ($currentState === 'welcome') @if ($currentState === 'welcome')
<h1 class="text-5xl font-bold">Welcome to your Last Hour Cloud</h1> <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> <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')">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>
@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 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://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
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 this (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 if an action is 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
</x-forms.button> </x-forms.button>
</x-slot:actions> </x-slot:actions>
</x-boarding-step> </x-boarding-step>
@endif @endif
@if ($currentState === 'select-server-type') @if ($currentState === 'select-server-type')
<x-boarding-step title="Server"> <x-boarding-step title="Server">
<x-slot:question> <x-slot:question>
Do you want to deploy your resources on your <x-highlighted text="Localhost" /> Do you want to deploy your resources on your <x-highlighted text="Localhost" />
or on a <x-highlighted text="Remote Server" />? or on a <x-highlighted text="Remote Server" />?
</x-slot:question> </x-slot:question>
<x-slot:actions> <x-slot:actions>
<x-forms.button class="justify-center w-64 box" wire:target="setServerType('localhost')" <x-forms.button class="justify-center w-64 box" wire:target="setServerType('localhost')" wire:click="setServerType('localhost')">Localhost
wire:click="setServerType('localhost')">Localhost </x-forms.button>
</x-forms.button>
<x-forms.button class="justify-center w-64 box " wire:target="setServerType('remote')" <x-forms.button class="justify-center w-64 box " wire:target="setServerType('remote')" wire:click="setServerType('remote')">Remote Server
wire:click="setServerType('remote')">Remote Server </x-forms.button>
</x-forms.button> @if (!$serverReachable)
@if (!$serverReachable) 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 guided tour and add a new private key manually to Last Hour Cloud 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 the upstream <a target="_blank" class="underline" href="https://coolify.io/docs/server/openssh">documentation</a> for further help.
Check the upstream <a target="_blank" class="underline" <x-forms.input readonly id="serverPublicKey"></x-forms.input>
href="https://coolify.io/docs/server/openssh">documentation</a> for further help. <x-forms.button class="w-64 box" wire:target="setServerType('localhost')" wire:click="setServerType('localhost')">Check again
<x-forms.input readonly id="serverPublicKey"></x-forms.input> </x-forms.button>
<x-forms.button class="w-64 box" wire:target="setServerType('localhost')" @endif
wire:click="setServerType('localhost')">Check again </x-slot:actions>
</x-forms.button> <x-slot:explanation>
@endif <p>Servers are the main building blocks, as they will host your applications, databases,
</x-slot:actions> services, called resources. Any CPU intensive process will use the server's CPU where you
<x-slot:explanation> are deploying your resources.</p>
<p>Servers are the main building blocks, as they will host your applications, databases, <p>Localhost is the server where Last Hour Cloud is running on. It is not recommended to use one server
services, called resources. Any CPU intensive process will use the server's CPU where you for everything.</p>
are deploying your resources.</p> <p>Remote Server is a server reachable through SSH. It can be hosted at home, or from any cloud
<p>Localhost is the server where Last Hour Cloud is running on. It is not recommended to use one server provider.</p>
for everything.</p> </x-slot:explanation>
<p>Remote Server is a server reachable through SSH. It can be hosted at home, or from any cloud </x-boarding-step>
provider.</p>
</x-slot:explanation>
</x-boarding-step>
@endif @endif
</div> </div>
<div> <div>
@if ($currentState === 'private-key') @if ($currentState === 'private-key')
<x-boarding-step title="SSH Key"> <x-boarding-step title="SSH Key">
<x-slot:question> <x-slot:question>
Do you have your own SSH Private Key? Do you have your own SSH Private Key?
</x-slot:question> </x-slot:question>
<x-slot:actions> <x-slot:actions>
<x-forms.button class="justify-center w-64 box" wire:target="setPrivateKey('own')" <x-forms.button class="justify-center w-64 box" wire:target="setPrivateKey('own')" wire:click="setPrivateKey('own')">Yes
wire:click="setPrivateKey('own')">Yes </x-forms.button>
</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 class="justify-center w-64 box" wire:target="setPrivateKey('create')" </x-forms.button>
wire:click="setPrivateKey('create')">No (create one for me) @if (count($privateKeys) > 0)
</x-forms.button> <form wire:submit='selectExistingPrivateKey' class="flex flex-col w-full gap-4 pr-10">
@if (count($privateKeys) > 0) <x-forms.select label="Existing SSH Keys" id='selectedExistingPrivateKey'>
<form wire:submit='selectExistingPrivateKey' class="flex flex-col w-full gap-4 pr-10"> @foreach ($privateKeys as $privateKey)
<x-forms.select label="Existing SSH Keys" id='selectedExistingPrivateKey'> <option wire:key="{{ $loop->index }}" value="{{ $privateKey->id }}">
@foreach ($privateKeys as $privateKey) {{ $privateKey->name }}
<option wire:key="{{ $loop->index }}" value="{{ $privateKey->id }}"> </option>
{{ $privateKey->name }}</option> @endforeach
@endforeach </x-forms.select>
</x-forms.select> <x-forms.button type="submit">Use this SSH Key</x-forms.button>
<x-forms.button type="submit">Use this SSH Key</x-forms.button> </form>
</form> @endif
@endif </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 allow Last Hour Cloud 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. </p>
</p> </x-slot:explanation>
</x-slot:explanation> </x-boarding-step>
</x-boarding-step>
@endif @endif
</div> </div>
<div> <div>
@if ($currentState === 'select-existing-server') @if ($currentState === 'select-existing-server')
<x-boarding-step title="Select a server"> <x-boarding-step title="Select a server">
<x-slot:question> <x-slot:question>
There are already servers available for your Team. Do you want to use one of them? There are already servers available for your Team. Do you want to use one of them?
</x-slot:question> </x-slot:question>
<x-slot:actions> <x-slot:actions>
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div> <div>
<x-forms.button class="justify-center w-64 box" wire:click="createNewServer">No (create one <x-forms.button class="justify-center w-64 box" wire:click="createNewServer">No (create one
for for
me) 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> </x-forms.button>
@endif </div>
</x-slot:actions> <div>
<x-slot:explanation> <form wire:submit='selectExistingServer' class="flex flex-col w-full gap-4 lg:w-96">
<p>Private Keys are used to connect to a remote server through a secure shell, called SSH.</p> <x-forms.select label="Existing servers" class="w-96" id='selectedExistingServer'>
<p>You can use your own private key, or you can let Last Hour Cloud create one for you.</p> @foreach ($servers as $server)
<p>In both ways, you need to add the public version of your private key to the remote server's <option wire:key="{{ $loop->index }}" value="{{ $server->id }}">
<code>~/.ssh/authorized_keys</code> file. {{ $server->name }}
</p> </option>
</x-slot:explanation> @endforeach
</x-boarding-step> </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>
@if ($currentState === 'create-private-key') @if ($currentState === 'create-private-key')
<x-boarding-step title="Create Private Key"> <x-boarding-step title="Create Private Key">
<x-slot:question> <x-slot:question>
Please let me know your key details. Please let me know your key details.
</x-slot:question> </x-slot:question>
<x-slot:actions> <x-slot:actions>
<form wire:submit='savePrivateKey' class="flex flex-col w-full gap-4 pr-10"> <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." <x-forms.input required placeholder="Choose a name for your Private Key. Could be anything." label="Name" id="privateKeyName" />
label="Name" id="privateKeyName" /> <x-forms.input placeholder="Description, so others will know more about this." label="Description" id="privateKeyDescription" />
<x-forms.input placeholder="Description, so others will know more about this." <x-forms.textarea required placeholder="-----BEGIN OPENSSH PRIVATE KEY-----" label="Private Key" id="privateKey" />
label="Description" id="privateKeyDescription" /> @if ($privateKeyType === 'create')
<x-forms.textarea required placeholder="-----BEGIN OPENSSH PRIVATE KEY-----" label="Private Key" <x-forms.textarea rows="7" readonly label="Public Key" id="publicKey" />
id="privateKey" /> <span class="font-bold text-warning">ACTION REQUIRED: Copy the 'Public Key' to your server's
@if ($privateKeyType === 'create') ~/.ssh/authorized_keys
<x-forms.textarea rows="7" readonly label="Public Key" id="publicKey" /> file.</span>
<span class="font-bold text-warning">ACTION REQUIRED: Copy the 'Public Key' to your server's @endif
~/.ssh/authorized_keys <x-forms.button type="submit">Save</x-forms.button>
file.</span> </form>
@endif </x-slot:actions>
<x-forms.button type="submit">Save</x-forms.button> <x-slot:explanation>
</form> <p>Private Keys are used to connect to a remote server through a secure shell, called SSH.</p>
</x-slot:actions> <p>You can use your own private key, or you can let Last Hour Cloud create one for you.</p>
<x-slot:explanation> <p>In both ways, you need to add the public version of your private key to the remote server's
<p>Private Keys are used to connect to a remote server through a secure shell, called SSH.</p> <code>~/.ssh/authorized_keys</code> file.
<p>You can use your own private key, or you can let Last Hour Cloud create one for you.</p> </p>
<p>In both ways, you need to add the public version of your private key to the remote server's </x-slot:explanation>
<code>~/.ssh/authorized_keys</code> file. </x-boarding-step>
</p>
</x-slot:explanation>
</x-boarding-step>
@endif @endif
</div> </div>
<div> <div>
@if ($currentState === 'create-server') @if ($currentState === 'create-server')
<x-boarding-step title="Create a Server"> <x-boarding-step title="Create a Server">
<x-slot:question> <x-slot:question>
Please let us 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. It 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 it." label="Description" id="remoteServerDescription" />
<x-forms.input placeholder="Description, so others will know more about it." </div>
label="Description" id="remoteServerDescription" /> <div class="flex gap-2">
</div> <x-forms.input required placeholder="127.0.0.1" label="IP Address" id="remoteServerHost" />
<div class="flex gap-2"> <x-forms.input required placeholder="Port number of your server. Default is 22." label="Port" id="remoteServerPort" />
<x-forms.input required placeholder="127.0.0.1" label="IP Address" id="remoteServerHost" /> <x-forms.input required readonly placeholder="Username to connect to your server. Default is root." label="Username" id="remoteServerUser" />
<x-forms.input required placeholder="Port number of your server. Default is 22." </div>
label="Port" id="remoteServerPort" /> <div class="w-64">
<x-forms.input required readonly <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" />
placeholder="Username to connect to your server. Default is root." label="Username" </div>
id="remoteServerUser" /> <x-forms.button type="submit">Continue</x-forms.button>
</div> </form>
<div class="w-64"> </x-slot:actions>
<x-forms.checkbox <x-slot:explanation>
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>" <p>Username should be <x-highlighted text="root" /> for now. We are working on using
id="isCloudflareTunnel" label="Cloudflare Tunnel" /> non-root users.</p>
</div> </x-slot:explanation>
<x-forms.button type="submit">Continue</x-forms.button> </x-boarding-step>
</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>
@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>
we need to validate your server (connection, Docker Engine, etc) and configure to see if something is we need to validate your server (connection, Docker Engine, etc) and configure to see if something is
missing. 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>
<x-slot:title>Validate & configure</x-slot:title> <x-slot:title>Validate & configure</x-slot:title>
<x-slot:content> <x-slot:content>
<livewire:server.validate-and-install :server="$this->createdServer" /> <livewire:server.validate-and-install :server="$this->createdServer" />
</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> Send it!
Send it! </x-forms.button>
</x-forms.button> </x-slide-over>
</x-slide-over> </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, configure a few things to be able to run optimal.<br><br>Minimum Docker Engine version is: 22<br><br>To manually install Docker
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
Engine, check <a target="_blank" class="underline text-warning" documentation</a>.</p>
href="https://docs.docker.com/engine/install/#server">this </x-slot:explanation>
documentation</a>.</p> </x-boarding-step>
</x-slot:explanation>
</x-boarding-step>
@endif @endif
</div> </div>
{{-- <div> {{-- <div>
@ -271,78 +255,78 @@
Decide later Decide later
</x-forms.button> </x-forms.button>
<x-forms.button class="w-32 box" wire:click="selectProxy('{{ ProxyTypes::TRAEFIK_V2 }}')"> <x-forms.button class="w-32 box" wire:click="selectProxy('{{ ProxyTypes::TRAEFIK_V2 }}')">
Traefik Traefik
v2 v2
</x-forms.button> </x-forms.button>
<x-forms.button disabled class="w-32 box"> <x-forms.button disabled class="w-32 box">
Nginx Nginx
</x-forms.button> </x-forms.button>
<x-forms.button disabled class="w-32 box"> <x-forms.button disabled class="w-32 box">
Caddy Caddy
</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 and configure a few items to be able <p>This will install the latest Docker Engine on your server and configure a few items to be able
to run optimally.</p> to run optimally.</p>
</x-slot:explanation> </x-slot:explanation>
</x-boarding-step> </x-boarding-step>
@endif @endif
</div> --}} </div> --}}
<div> <div>
@if ($currentState === 'create-project') @if ($currentState === 'create-project')
<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 we 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
We will create an initial project for you. You can change it 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">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> <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">
<x-forms.select label="Existing projects" class="w-96" <x-forms.select label="Existing projects" class="w-96" id='selectedExistingProject'>
id='selectedExistingProject'> @foreach ($projects as $project)
@foreach ($projects as $project) <option wire:key="{{ $loop->index }}" value="{{ $project->id }}">
<option wire:key="{{ $loop->index }}" value="{{ $project->id }}"> {{ $project->name }}
{{ $project->name }}</option> </option>
@endforeach @endforeach
</x-forms.select> </x-forms.select>
<x-forms.button type="submit">Use this Project</x-forms.button> <x-forms.button type="submit">Use this Project</x-forms.button>
</form> </form>
@endif @endif
</div> </div>
</x-slot:actions> </x-slot:actions>
<x-slot:explanation> <x-slot:explanation>
<p>Projects put 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 can have here.</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>
</x-boarding-step> </x-boarding-step>
@endif @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>
<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>