dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

wip: boarding

Browse Source
This commit is contained in:
Andras Bacsai
2023-08-22 17:44:49 +02:00
parent 2414ddd360
commit b39ca51d41
71 changed files with 694 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/css/app.css
View File

@@ -53,7 +53,7 @@ a {
@apply text-white;
}
.box {
@apply flex items-center justify-center p-2 transition-colors rounded min-h-12 bg-coolgray-200 hover:bg-coollabs-100 hover:text-white hover:no-underline;
@apply flex items-center justify-center p-2 transition-colors rounded cursor-pointer min-h-12 bg-coolgray-200 hover:bg-coollabs-100 hover:text-white hover:no-underline;
}
.lds-heart {

6
resources/js/components/MagicBar.vue
View File

@@ -53,12 +53,12 @@
<span v-if="search"><span class="capitalize ">{{
sequenceState.sequence[sequenceState.currentActionIndex] }}</span> name
will be:
<span class="text-warning">{{ search
}}</span></span>
<x-highlighted text="{{ search }}" />
</span>
<span v-else><span class="capitalize ">{{
sequenceState.sequence[sequenceState.currentActionIndex] }}</span> name
will be:
<span class="text-warning">randomly generated (type to change)</span>
<x-highlighted text="randomly generated (type to change)" />
</span>
</span>
</li>

3
resources/views/boarding.blade.php Normal file
View File

@@ -0,0 +1,3 @@
<x-layout-simple>
<livewire:boarding />
</x-layout-simple>

25
resources/views/components/boarding-step.blade.php Normal file
View File

@@ -0,0 +1,25 @@
<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
<div class="box-border col-span-2 min-w-[24rem]">
<h1 class="text-5xl font-bold">{{$title}}</h1>
<div class="py-6 ">
@isset($question)
<p class="text-base">
{{$question}}
</p>
@endisset
</div>
@if($actions)
<div class="flex flex-col gap-4 md:flex-row">
{{$actions}}
</div>
@endif
</div>
@if($explanation)
<div class="col-span-1">
<h1 class="pb-8 font-bold">Explanation</h1>
<div class="space-y-4">
{{$explanation}}
</div>
</div>
@endif
</div>

2
resources/views/components/forms/input.blade.php
View File

@@ -2,7 +2,7 @@
@if ($label)
<label for="small-input" class="flex items-center gap-1 mb-1 text-sm font-medium">{{ $label }}
@if ($required)
<span class="text-warning">*</span>
<x-highlighted text="*" />
@endif
@if ($helper)
<x-helper :helper="$helper" />

2
resources/views/components/forms/select.blade.php
View File

@@ -2,7 +2,7 @@
@if ($label)
<label for="small-input" class="flex items-center gap-1 mb-1 text-sm font-medium">{{ $label }}
@if ($required)
<span class="text-warning">*</span>
<x-highlighted text="*" />
@endif
@if ($helper)
<x-helper :helper="$helper" />

6
resources/views/components/forms/textarea.blade.php
View File

@@ -1,14 +1,14 @@
<div class="form-control">
@if ($label)
<label class="label">
<span class="label-text">
<label class="flex items-center gap-1 mb-1 text-sm font-medium">
<span>
@if ($label)
{{ $label }}
@else
{{ $id }}
@endif
@if ($required)
<span class="text-warning">*</span>
<x-highlighted text="*" />
@endif
@if ($helper)
<div class="group">

1
resources/views/components/highlighted.blade.php Normal file
View File

@@ -0,0 +1 @@
<span class="inline-block text-warning">{{$text}}</span>

2
resources/views/components/layout-simple.blade.php
View File

@@ -26,7 +26,7 @@
<body>
@livewireScripts
<x-toaster-hub />
<main class="main max-w-screen-2xl">
<main>
{{ $slot }}
</main>
<x-version class="fixed left-2 bottom-1" />

2
resources/views/components/layout-subscription.blade.php
View File

@@ -26,7 +26,7 @@
<body>
@livewireScripts
<x-toaster-hub />
@if (is_instance_admin() || is_subscription_in_grace_period())
@if (isInstanceAdmin() || is_subscription_in_grace_period())
<div class="fixed top-3 left-4" id="vue">
<magic-bar></magic-bar>
</div>

4
resources/views/components/navbar.blade.php
View File

@@ -65,7 +65,7 @@
</a>
</li>
<div class="flex-1"></div>
@if (is_instance_admin())
@if (isInstanceAdmin())
<livewire:upgrade />
@endif
<li title="Profile">
@@ -80,7 +80,7 @@
</a>
</li>
@if (is_instance_admin())
@if (isInstanceAdmin())
<li title="Settings" class="mt-auto">
<a class="hover:bg-transparent" @if (!request()->is('settings')) href="/settings" @endif>
<svg xmlns="http://www.w3.org/2000/svg"

2
resources/views/dashboard.blade.php
View File

@@ -1,6 +1,6 @@
<x-layout>
<h1>Dashboard</h1>
<div class="subtitle">Something <span class="text-warning">(more)</span> useful will be here.</div>
<div class="subtitle">Something <x-highlighted text="(more)"/> useful will be here.</div>
<div class="w-full rounded stats stats-vertical lg:stats-horizontal">
<div class="stat">
<div class="stat-title">Servers</div>

146
resources/views/livewire/boarding.blade.php Normal file
View 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>

2
resources/views/livewire/destination/show.blade.php
View File

@@ -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

2
resources/views/livewire/notifications/email-settings.blade.php
View File

@@ -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>

5
resources/views/livewire/server/proxy/deploy.blade.php
View File

@@ -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>

8
resources/views/livewire/subscription/actions.blade.php
View File

@@ -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

14
resources/views/livewire/team/delete.blade.php
View File

@@ -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>

4
resources/views/team/members.blade.php
View File

@@ -14,7 +14,7 @@
</tr>
</thead>
<tbody>
@foreach (auth()->user()->currentTeam()->members->sortBy('name') as $member)
@foreach (currentTeam()->members->sortBy('name') as $member)
<livewire:team.member :member="$member" :wire:key="$member->id" />
@endforeach
</tbody>
@@ -26,7 +26,7 @@
<h3 class="pb-4">Invite a new member</h3>
@else
<h3>Invite a new member</h3>
@if (is_instance_admin())
@if (isInstanceAdmin())
<div class="pb-4 text-xs text-warning">You need to configure <a href="/settings/emails"
class="underline text-warning">Transactional
Emails</a>

2
resources/views/team/show.blade.php
View File

@@ -6,7 +6,7 @@
@if (is_cloud())
<div class="pb-8">
<h2>Subscription</h2>
@if (data_get(auth()->user()->currentTeam(),
@if (data_get(currentTeam(),
'subscription'))
<livewire:subscription.actions />
@else