lasthourcloud/resources/views/livewire/boarding/index.blade.php

@php use App\Enums\ProxyTypes; @endphp
<x-slot:title>
    Onboarding | Last Hour Cloud
    </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-3xl font-bold lg:text-5xl">Welcome to Last Hour Cloud</h1>
            <div class="py-6 text-center lg:text-xl">Let's help you get set up.</div>
            <div class="flex justify-center ">
                <x-forms.button class="justify-center w-64 box-boarding"
                    wire:click="$set('currentState','explanation')">Get
                    Started
                </x-forms.button>
            </div>
            @elseif ($currentState === 'explanation')
            <x-boarding-step title="What is Last Hour Cloud?">
                <x-slot:question>
                    Last Hour Cloud is an all-in-one application to automate tasks on your servers, deploy application with
                    Git
                    integrations, deploy databases and services, monitor these resources with notifications and
                    alerts
                    without vendor lock-in
                    and <a href="https://lasthourhosting.org/cloud-apps.html" class="dark:text-white hover:underline">more</a>.
                    <br><br>
                    <span class="text-xl">
                        <x-highlighted text="Cloud apps for the last hour" /></span>
                </x-slot:question>
                <x-slot:explanation>
                    <p>
                        <x-highlighted text="Task automation:" /> You don't need to manage your servers anymore.
                        Last Hour Cloud does
                        it for you.
                    </p>
                    <p>
                        <x-highlighted text="No vendor lock-in:" /> All configurations are stored on your servers, so
                        everything works without a connection to Last Hour Cloud (except integrations and automations).
                    </p>
                    <p>
                        <x-highlighted text="Monitoring:" />You can get notified on your favourite platforms
                        (Discord,
                        Telegram, Email, etc.) when something goes wrong, or an action is needed from your side.
                    </p>
                </x-slot:explanation>
                <x-slot:actions>
                    <x-forms.button class="justify-center w-64 box-boarding" wire:click="explanation">Next
                    </x-forms.button>
                </x-slot:actions>
            </x-boarding-step>
            @elseif ($currentState === 'select-server-type')
            <x-boarding-step title="Server">
                <x-slot:question>
                    Do you want to deploy your resources to your
                    <x-highlighted text="Localhost" />
                    or to a
                    <x-highlighted text="Remote Server" />?
                </x-slot:question>
                <x-slot:actions>
                    <x-forms.button class="justify-center w-64 box-boarding" wire:target="setServerType('localhost')"
                        wire:click="setServerType('localhost')">Localhost
                    </x-forms.button>

                    <x-forms.button class="justify-center w-64 box-boarding " wire:target="setServerType('remote')"
                        wire:click="setServerType('remote')">Remote Server
                    </x-forms.button>

                    @if (!$serverReachable)
                    <div class="mt-6 p-4 border border-error rounded-lg text-gray-800 dark:text-gray-200">
                        <h2 class="text-lg font-bold mb-2">Server is not reachable</h2>
                        <p class="mb-4">Please check the connection details below and correct them if they are
                            incorrect.</p>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            <x-forms.input placeholder="Default is 22" label="Port" id="remoteServerPort"
                                wire:model="remoteServerPort" :value="$remoteServerPort" />
                            <div>
                                <x-forms.input placeholder="Default is root" label="User" id="remoteServerUser"
                                    wire:model="remoteServerUser" :value="$remoteServerUser" />
                                <p class="text-xs mt-1">
                                    Non-root user is experimental:
                                    <a class="font-bold underline" target="_blank"
                                        href="https://coolify.io/docs/knowledge-base/server/non-root-user">See upstream docs</a>
                                </p>
                            </div>
                        </div>

                        <div class="mb-4">
                            <p class="mb-2">If the connection details are correct, please ensure:</p>
                            <ul class="list-disc list-inside">
                                <li>The correct public key is in your <code
                                        class="bg-red-200 dark:bg-red-900 px-1 rounded">~/.ssh/authorized_keys</code>
                                    file for the specified user</li>
                                <li>Or skip the boarding process and manually add a new private key to Last Hour Cloud and
                                    the server</li>
                            </ul>
                        </div>

                        <p class="mb-4">
                            For more help, check this <a target="_blank" class="underline font-semibold"
                                href="https://coolify.io/docs/knowledge-base/server/openssh">upstream documentation</a>.
                        </p>

                        <x-forms.input readonly id="serverPublicKey" class="mb-4"
                            label="Current Public Key"></x-forms.input>

                        <x-forms.button class="w-full box-boarding" wire:click="saveAndValidateServer">
                            Check Again
                        </x-forms.button>
                    </div>
                    @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>
                        <x-highlighted text="Localhost" /> is the server where Last Hour Cloud is running on. It is not
                        recommended to use one server
                        for everything.
                    </p>
                    <p>
                        <x-highlighted text="A 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>
            @elseif ($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 lg:w-64 box-boarding" wire:target="setPrivateKey('own')"
                        wire:click="setPrivateKey('own')">Yes
                    </x-forms.button>
                    <x-forms.button class="justify-center lg:w-64 box-boarding" 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 lg: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 let Last Hour Cloud to create one for you.</p>
                    <p>In both ways, you need to add the public version of your ssh private key to the remote
                        server's
                        <code class="dark:text-warning">~/.ssh/authorized_keys</code> file.
                    </p>
                </x-slot:explanation>
            </x-boarding-step>
            @elseif ($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-boarding" 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)
                    <div class="mt-6 p-4 bg-red-100 dark:bg-red-950 rounded-lg text-gray-800 dark:text-gray-200">
                        <h2 class="text-lg font-bold mb-2">Server is not reachable</h2>
                        <p class="mb-4">Please check the connection details below and correct them if they are
                            incorrect.</p>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            <x-forms.input placeholder="Default is 22" label="Port" id="remoteServerPort"
                                wire:model="remoteServerPort" :value="$remoteServerPort" />
                            <div>
                                <x-forms.input placeholder="Default is root" label="User" id="remoteServerUser"
                                    wire:model="remoteServerUser" :value="$remoteServerUser" />
                                <p class="text-xs mt-1">
                                    Non-root user is experimental:
                                    <a class="font-bold underline" target="_blank"
                                        href="https://coolify.io/docs/knowledge-base/server/non-root-user">upstream docs</a>
                                </p>
                            </div>
                        </div>

                        <div class="mb-4">
                            <p class="mb-2">If the connection details are correct, please ensure:</p>
                            <ul class="list-disc list-inside">
                                <li>The correct public key is in your <code
                                        class="bg-red-200 dark:bg-red-900 px-1 rounded">~/.ssh/authorized_keys</code>
                                    file for the specified user</li>
                                <li>Or skip the boarding process and manually add a new private key to Last Hour Cloud and
                                    the server</li>
                            </ul>
                        </div>

                        <p class="mb-4">
                            For more help, check this <a target="_blank" class="underline font-semibold"
                                href="https://coolify.io/docs/knowledge-base/server/openssh">upstream documentation</a>.
                        </p>

                        <x-forms.input readonly id="serverPublicKey" class="mb-4"
                            label="Current Public Key"></x-forms.input>

                        <x-forms.button class="w-full md:w-auto box-boarding" wire:click="saveAndValidateServer">
                            Check again
                        </x-forms.button>
                    </div>
                    @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 to create one for you.</p>
                    <p>In both ways, you need to add the public version of your private key to the remote server's
                        <code>~/.ssh/authorized_keys</code> file.
                    </p>
                </x-slot:explanation>
            </x-boarding-step>
            @elseif ($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 lg: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 dark: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 to create one for you.</p>
                    <p>In both ways, you need to add the public version of your private key to the remote server's
                        <code>~/.ssh/authorized_keys</code> file.
                    </p>
                </x-slot:explanation>
            </x-boarding-step>
            @elseif ($currentState === 'create-server')
            <x-boarding-step title="Create Server">
                <x-slot:question>
                    Please let me know your server details.
                </x-slot:question>
                <x-slot:actions>
                    <form wire:submit='saveServer' class="flex flex-col w-full gap-4 lg:pr-10">
                        <div class="flex flex-col gap-2 lg:flex-row">
                            <x-forms.input required placeholder="Choose a name for your Server. Could be anything."
                                label="Name" id="remoteServerName" wire:model="remoteServerName" />
                            <x-forms.input placeholder="Description, so others will know more about this."
                                label="Description" id="remoteServerDescription"
                                wire:model="remoteServerDescription" />
                        </div>
                        <div class="flex flex-col gap-2 lg:flex-row ">
                            <x-forms.input required placeholder="127.0.0.1" label="IP Address" id="remoteServerHost"
                                wire:model="remoteServerHost" />
                        </div>
                        <div x-data="{ showAdvanced: false }" class="flex flex-col gap-2">
                            <button @click="showAdvanced = !showAdvanced" type="button"
                                class="text-left text-sm text-gray-600 dark:text-gray-300 hover:underline">
                                Advanced Settings
                            </button>
                            <div x-show="showAdvanced" class="flex flex-col gap-2 lg:flex-row">
                                <x-forms.input placeholder="Port number of your server. Default is 22." label="Port"
                                    id="remoteServerPort" wire:model="remoteServerPort" />
                                <div class="w-full">
                                    <x-forms.input placeholder="Default is root." label="User"
                                        id="remoteServerUser" wire:model="remoteServerUser" />
                                    <div class="text-xs text-gray-600 dark:text-gray-300">Non-root user is
                                        experimental: <a class="font-bold underline" target="_blank"
                                            href="https://coolify.io/docs/knowledge-base/server/non-root-user">upstream docs</a>.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="lg: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='dark:text-warning'>Coolify does not install/setup Cloudflare (cloudflared) on your server.</span>"
                                id="isCloudflareTunnel" label="Cloudflare Tunnel" wire:model="isCloudflareTunnel" />
                        </div>
                        <x-forms.button type="submit">Continue</x-forms.button>
                    </form>
                </x-slot:actions>
            </x-boarding-step>
            @elseif ($currentState === 'validate-server')
            <x-boarding-step title="Validate & Configure Server">
                <x-slot:question>
                    I need to validate your server (connection, Docker Engine, etc) and configure if something is
                    missing for me. Are you okay with this?
                </x-slot:question>
                <x-slot:actions>
                    <x-slide-over closeWithX fullScreen>
                        <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="w-full font-bold box-boarding lg:w-96"
                            wire:click.prevent='installServer' isHighlighted>
                            Let's do 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 dark:text-warning"
                            href="https://docs.docker.com/engine/install/#server">this
                            documentation</a>.</p>
                </x-slot:explanation>
            </x-boarding-step>
            @elseif ($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 I create a new one
                    for
                    you?
                    @else
                    Let's create an initial project for you. You can change all the details later on.
                    @endif
                </x-slot:question>
                <x-slot:actions>
                    <x-forms.button class="justify-center w-64 box-boarding" 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='selectedProject'>
                                @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 contain several resources combined into one virtual group. There are no
                        limitations on the number of projects you can add.</p>
                    <p>Each project should have at least one environment, this allows you to create a production &
                        staging version of the same application, but grouped separately.</p>
                </x-slot:explanation>
            </x-boarding-step>
            @elseif ($currentState === 'create-resource')
            <x-boarding-step title="Resources">
                <x-slot:question>
                    Let's go to the new resource page, where you can create your first resource.
                </x-slot:question>
                <x-slot:actions>
                    <div class="items-center justify-center w-64 box-boarding" wire:click="showNewResource">Let's do
                        it!</div>
                </x-slot:actions>
                <x-slot:explanation>
                    <p>A resource could be an application, a database or a service (like WordPress).</p>
                </x-slot:explanation>
            </x-boarding-step>
            @endif
        </div>
        <div class="flex flex-col justify-center gap-4 pt-4 lg:gap-2 lg:flex">
            <div class="flex justify-center w-full gap-2">
                <div class="cursor-pointer hover:underline dark:hover:text-white" wire:click='skipBoarding'>Skip
                    onboarding</div>
                <div class="cursor-pointer hover:underline dark:hover:text-white" wire:click='restartBoarding'>Restart
                    onboarding</div>
            </div>
            <x-modal-input title="How can we help?">
                <x-slot:content>
                    <div class="w-full text-center cursor-pointer hover:underline dark:hover:text-white"
                        title="Send us feedback or get help!">
                        Feedback
                    </div>
                </x-slot:content>
                <livewire:help />
            </x-modal-input>
        </div>
    </section>