mirror of
https://github.com/ershisan99/coolify.git
synced 2026-01-26 05:02:13 +00:00
wip: boarding
This commit is contained in:
Andras Bacsai
146
resources/views/livewire/boarding.blade.php
Normal file
146
resources/views/livewire/boarding.blade.php
Normal file
@@ -0,0 +1,146 @@
|
||||
<div class="min-h-screen hero">
|
||||
<div class="hero-content">
|
||||
<div>
|
||||
@if ($currentState === 'welcome')
|
||||
<h1 class="text-5xl font-bold">Welcome to Coolify</h1>
|
||||
<p class="py-6 text-xl text-center">Let me help you to set the basics.</p>
|
||||
<div class="flex justify-center ">
|
||||
<div class="w-72 box" wire:click="$set('currentState', 'select-server')">Get Started
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@if ($currentState === 'select-server')
|
||||
<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>
|
||||
<div class="md:w-72 box" wire:click="setServer('localhost')">Localhost
|
||||
</div>
|
||||
<div class="md:w-72 box" wire:click="setServer('remote')">Remote Server
|
||||
</div>
|
||||
</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 Coolify is running on. It is not recommended to use one server
|
||||
for everyting.</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
|
||||
@if ($currentState === 'private-key')
|
||||
<x-boarding-step title="Private Key">
|
||||
<x-slot:question>
|
||||
Do you have your own Private Key?
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<div class="md:w-72 box" wire:click="setPrivateKey('own')">Yes
|
||||
</div>
|
||||
<div class="md:w-72 box" wire:click="setPrivateKey('create')">No (create one for me)
|
||||
</div>
|
||||
</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 Coolify 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>
|
||||
@endif
|
||||
@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.prevent='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" />
|
||||
<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 Coolify 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>
|
||||
@endif
|
||||
@if ($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.prevent='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. Could be anything."
|
||||
label="Name" id="remoteServerName" />
|
||||
<x-forms.input placeholder="Description, so others will know more about this."
|
||||
label="Description" id="remoteServerDescription" />
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<x-forms.input required placeholder="Hostname or IP address"
|
||||
label="Hostname or 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>
|
||||
<x-forms.button type="submit">Save</x-forms.button>
|
||||
</form>
|
||||
</x-slot:actions>
|
||||
<x-slot:explanation>
|
||||
<p>Username should be <x-highlighted text="root" /> for now. We are working on to use
|
||||
non-root users.</p>
|
||||
</x-slot:explanation>
|
||||
</x-boarding-step>
|
||||
@endif
|
||||
@if ($currentState === 'install-docker')
|
||||
<x-boarding-step title="Install Docker">
|
||||
<x-slot:question>
|
||||
Could not find Docker Engine on your server. Do you want me to install it for you?
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<div class="w-72 box" wire:click="installDocker">Let's do it!</div>
|
||||
</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.</p>
|
||||
</x-slot:explanation>
|
||||
</x-boarding-step>
|
||||
@endif
|
||||
@if ($currentState === 'create-project')
|
||||
<x-boarding-step title="Project">
|
||||
<x-slot:question>
|
||||
I will create an initial project for you. You can change all the details later on.
|
||||
</x-slot:question>
|
||||
<x-slot:actions>
|
||||
<div class="w-72 box" wire:click="createNewProject">Let's do it!</div>
|
||||
</x-slot:actions>
|
||||
<x-slot:explanation>
|
||||
<p>Projects are bound together several resources into one virtual group. There are no
|
||||
limitations on the number of projects you could have.</p>
|
||||
<p>Each project should have at least one environment. This helps you to create a production &
|
||||
staging version of the same application, but grouped separately.</p>
|
||||
</x-slot:explanation>
|
||||
</x-boarding-step>
|
||||
@endif
|
||||
<div class="flex justify-center gap-2 pt-4">
|
||||
<a wire:click='skipBoarding'>Skip boarding process</a>
|
||||
<a wire:click='restartBoarding'>Restart boarding process</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -25,7 +25,7 @@
|
||||
@foreach ($networks as $network)
|
||||
<a
|
||||
href="{{ route('destination.new', ['server_id' => $server->id, 'network_name' => data_get($network, 'Name')]) }}">
|
||||
<x-forms.button>Add<span class="text-warning">{{ data_get($network, 'Name') }}</span>
|
||||
<x-forms.button>+<x-highlighted text="{{ data_get($network, 'Name') }}" />
|
||||
</x-forms.button>
|
||||
</a>
|
||||
@endforeach
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<x-forms.button type="submit">
|
||||
Save
|
||||
</x-forms.button>
|
||||
@if (is_instance_admin())
|
||||
@if (isInstanceAdmin())
|
||||
<x-forms.button wire:click='copyFromInstanceSettings'>
|
||||
Copy from Instance Settings
|
||||
</x-forms.button>
|
||||
|
||||
@@ -9,9 +9,8 @@
|
||||
</x-modal>
|
||||
<x-modal yesOrNo modalId="startProxy" modalTitle="Start Proxy" action="start_proxy">
|
||||
<x-slot:modalBody>
|
||||
<p>This will start the proxy on this server and <span class="text-warning">stop any running process that is
|
||||
using port 80 and
|
||||
443</span>.
|
||||
<p>This will start the proxy on this server and
|
||||
<x-highlighted text="stop any running process that is using port 80 and 443" />.
|
||||
<br>Please think
|
||||
again.
|
||||
</p>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<div>
|
||||
<div>Status: {{ auth()->user()->currentTeam()->subscription->lemon_status }}</div>
|
||||
<div>Type: {{ auth()->user()->currentTeam()->subscription->lemon_variant_name }}</div>
|
||||
@if (auth()->user()->currentTeam()->subscription->lemon_status === 'cancelled')
|
||||
<div>Status: {{ currentTeam()->subscription->lemon_status }}</div>
|
||||
<div>Type: {{ currentTeam()->subscription->lemon_variant_name }}</div>
|
||||
@if (currentTeam()->subscription->lemon_status === 'cancelled')
|
||||
<div class="pb-4">Subscriptions ends at: {{ getRenewDate() }}</div>
|
||||
<div class="py-4">If you would like to change the subscription to a lower/higher plan, <a
|
||||
class="text-white underline" href="https://docs.coollabs.io/contact" target="_blank">please
|
||||
@@ -12,7 +12,7 @@
|
||||
@endif
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex gap-2">
|
||||
@if (auth()->user()->currentTeam()->subscription->lemon_status === 'cancelled')
|
||||
@if (currentTeam()->subscription->lemon_status === 'cancelled')
|
||||
<x-forms.button class="bg-coollabs-gradient" wire:click='resume'>Resume Subscription
|
||||
</x-forms.button>
|
||||
@else
|
||||
|
||||
@@ -11,11 +11,11 @@
|
||||
<div>This is the default team. You can't delete it.</div>
|
||||
@elseif(auth()->user()->teams()->get()->count() === 1)
|
||||
<div>You can't delete your last team.</div>
|
||||
@elseif(auth()->user()->currentTeam()->subscription &&
|
||||
auth()->user()->currentTeam()->subscription?->lemon_status !== 'cancelled')
|
||||
@elseif(currentTeam()->subscription &&
|
||||
currentTeam()->subscription?->lemon_status !== 'cancelled')
|
||||
<div>Please cancel your subscription before delete this team (Manage My Subscription button).</div>
|
||||
@else
|
||||
@if (auth()->user()->currentTeam()->isEmpty())
|
||||
@if (currentTeam()->isEmpty())
|
||||
<div class="pb-4">This will delete your team. Beware! There is no coming back!</div>
|
||||
<x-forms.button isError isModal modalId="deleteTeam">
|
||||
Delete
|
||||
@@ -25,25 +25,25 @@
|
||||
<div class="pb-4">You need to delete the following resources to be able to delete the team:</div>
|
||||
<h4 class="pb-4">Projects:</h4>
|
||||
<ul class="pl-8 list-disc">
|
||||
@foreach (auth()->user()->currentTeam()->projects as $resource)
|
||||
@foreach (currentTeam()->projects as $resource)
|
||||
<li>{{ $resource->name }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
<h4 class="py-4">Servers:</h4>
|
||||
<ul class="pl-8 list-disc">
|
||||
@foreach (auth()->user()->currentTeam()->servers as $resource)
|
||||
@foreach (currentTeam()->servers as $resource)
|
||||
<li>{{ $resource->name }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
<h4 class="py-4">Private Keys:</h4>
|
||||
<ul class="pl-8 list-disc">
|
||||
@foreach (auth()->user()->currentTeam()->privateKeys as $resource)
|
||||
@foreach (currentTeam()->privateKeys as $resource)
|
||||
<li>{{ $resource->name }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
<h4 class="py-4">Sources:</h4>
|
||||
<ul class="pl-8 list-disc">
|
||||
@foreach (auth()->user()->currentTeam()->sources() as $resource)
|
||||
@foreach (currentTeam()->sources() as $resource)
|
||||
<li>{{ $resource->name }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user