Update conditional statements in app.blade.php and navbar.blade.php

This commit is contained in:
Andras Bacsai 2024-03-25 14:44:31 +01:00
parent 995c303f27
commit 2be2a2621e
4 changed files with 340 additions and 366 deletions

View File

@ -15,7 +15,7 @@ class Index extends Component
{ {
protected $listeners = ['serverInstalled' => 'validateServer']; protected $listeners = ['serverInstalled' => 'validateServer'];
public string $state = 'welcome'; public string $currentState = 'welcome';
public ?string $selectedServerType = null; public ?string $selectedServerType = null;
public ?Collection $privateKeys = null; public ?Collection $privateKeys = null;
@ -66,25 +66,25 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
$this->remoteServerDescription = 'Created by Coolify'; $this->remoteServerDescription = 'Created by Coolify';
$this->remoteServerHost = 'coolify-testing-host'; $this->remoteServerHost = 'coolify-testing-host';
} }
if ($this->state === 'create-project') { // if ($this->currentState === 'create-project') {
$this->getProjects(); // $this->getProjects();
} // }
if ($this->state === 'create-resource') { // if ($this->currentState === 'create-resource') {
$this->selectExistingServer(); // $this->selectExistingServer();
$this->selectExistingProject(); // $this->selectExistingProject();
} // }
if ($this->state === 'private-key') { // if ($this->currentState === 'private-key') {
$this->setServerType('remote'); // $this->setServerType('remote');
} // }
if ($this->state === 'create-server') { // if ($this->currentState === 'create-server') {
$this->selectExistingPrivateKey(); // $this->selectExistingPrivateKey();
} // }
if ($this->state === 'validate-server') { // if ($this->currentState === 'validate-server') {
$this->selectExistingServer(); // $this->selectExistingServer();
} // }
if ($this->state === 'select-existing-server') { // if ($this->currentState === 'select-existing-server') {
$this->selectExistingServer(); // $this->selectExistingServer();
} // }
} }
public function explanation() public function explanation()
@ -92,7 +92,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
if (isCloud()) { if (isCloud()) {
return $this->setServerType('remote'); return $this->setServerType('remote');
} }
$this->state = 'select-server-type'; $this->currentState = 'select-server-type';
} }
public function restartBoarding() public function restartBoarding()
@ -131,10 +131,10 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
$this->servers = Server::ownedByCurrentTeam(['name'])->where('id', '!=', 0)->get(); $this->servers = Server::ownedByCurrentTeam(['name'])->where('id', '!=', 0)->get();
if ($this->servers->count() > 0) { if ($this->servers->count() > 0) {
$this->selectedExistingServer = $this->servers->first()->id; $this->selectedExistingServer = $this->servers->first()->id;
$this->state = 'select-existing-server'; $this->currentState = 'select-existing-server';
return; return;
} }
$this->state = 'private-key'; $this->currentState = 'private-key';
} }
} }
public function selectExistingServer() public function selectExistingServer()
@ -142,12 +142,12 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
$this->createdServer = Server::find($this->selectedExistingServer); $this->createdServer = Server::find($this->selectedExistingServer);
if (!$this->createdServer) { if (!$this->createdServer) {
$this->dispatch('error', 'Server is not found.'); $this->dispatch('error', 'Server is not found.');
$this->state = 'private-key'; $this->currentState = 'private-key';
return; return;
} }
$this->selectedExistingPrivateKey = $this->createdServer->privateKey->id; $this->selectedExistingPrivateKey = $this->createdServer->privateKey->id;
$this->serverPublicKey = $this->createdServer->privateKey->publicKey(); $this->serverPublicKey = $this->createdServer->privateKey->publicKey();
$this->state = 'validate-server'; $this->currentState = 'validate-server';
} }
public function getProxyType() public function getProxyType()
{ {
@ -155,7 +155,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
$this->selectProxy(ProxyTypes::TRAEFIK_V2->value); $this->selectProxy(ProxyTypes::TRAEFIK_V2->value);
// $proxyTypeSet = $this->createdServer->proxy->type; // $proxyTypeSet = $this->createdServer->proxy->type;
// if (!$proxyTypeSet) { // if (!$proxyTypeSet) {
// $this->state = 'select-proxy'; // $this->currentState = 'select-proxy';
// return; // return;
// } // }
$this->getProjects(); $this->getProjects();
@ -168,12 +168,12 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
} }
$this->createdPrivateKey = PrivateKey::find($this->selectedExistingPrivateKey); $this->createdPrivateKey = PrivateKey::find($this->selectedExistingPrivateKey);
$this->privateKey = $this->createdPrivateKey->private_key; $this->privateKey = $this->createdPrivateKey->private_key;
$this->state = 'create-server'; $this->currentState = 'create-server';
} }
public function createNewServer() public function createNewServer()
{ {
$this->selectedExistingServer = null; $this->selectedExistingServer = null;
$this->state = 'private-key'; $this->currentState = 'private-key';
} }
public function setPrivateKey(string $type) public function setPrivateKey(string $type)
{ {
@ -182,7 +182,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
if ($type === 'create') { if ($type === 'create') {
$this->createNewPrivateKey(); $this->createNewPrivateKey();
} }
$this->state = 'create-private-key'; $this->currentState = 'create-private-key';
} }
public function savePrivateKey() public function savePrivateKey()
{ {
@ -197,7 +197,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
'team_id' => currentTeam()->id 'team_id' => currentTeam()->id
]); ]);
$this->createdPrivateKey->save(); $this->createdPrivateKey->save();
$this->state = 'create-server'; $this->currentState = 'create-server';
} }
public function saveServer() public function saveServer()
{ {
@ -226,7 +226,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
$this->createdServer->settings->save(); $this->createdServer->settings->save();
$this->createdServer->addInitialNetwork(); $this->createdServer->addInitialNetwork();
$this->selectedExistingServer = $this->createdServer->id; $this->selectedExistingServer = $this->createdServer->id;
$this->state = 'validate-server'; $this->currentState = 'validate-server';
} }
public function installServer() public function installServer()
{ {
@ -253,7 +253,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
$dockerVersion = instant_remote_process(["docker version|head -2|grep -i version| awk '{print $2}'"], $this->createdServer, true); $dockerVersion = instant_remote_process(["docker version|head -2|grep -i version| awk '{print $2}'"], $this->createdServer, true);
$dockerVersion = checkMinimumDockerEngineVersion($dockerVersion); $dockerVersion = checkMinimumDockerEngineVersion($dockerVersion);
if (is_null($dockerVersion)) { if (is_null($dockerVersion)) {
$this->state = 'validate-server'; $this->currentState = 'validate-server';
throw new \Exception('Docker not found or old version is installed.'); throw new \Exception('Docker not found or old version is installed.');
} }
$this->createdServer->settings()->update([ $this->createdServer->settings()->update([
@ -281,12 +281,12 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
if ($this->projects->count() > 0) { if ($this->projects->count() > 0) {
$this->selectedProject = $this->projects->first()->id; $this->selectedProject = $this->projects->first()->id;
} }
$this->state = 'create-project'; $this->currentState = 'create-project';
} }
public function selectExistingProject() public function selectExistingProject()
{ {
$this->createdProject = Project::find($this->selectedProject); $this->createdProject = Project::find($this->selectedProject);
$this->state = 'create-resource'; $this->currentState = 'create-resource';
} }
public function createNewProject() public function createNewProject()
{ {
@ -294,7 +294,7 @@ uZx9iFkCELtxrh31QJ68AAAAEXNhaWxANzZmZjY2ZDJlMmRkAQIDBA==
'name' => "My first project", 'name' => "My first project",
'team_id' => currentTeam()->id 'team_id' => currentTeam()->id
]); ]);
$this->state = 'create-resource'; $this->currentState = 'create-resource';
} }
public function showNewResource() public function showNewResource()
{ {

View File

@ -12,7 +12,7 @@
<ul role="list" class="flex flex-col flex-1 gap-y-7"> <ul role="list" class="flex flex-col flex-1 gap-y-7">
<li class="flex-1 "> <li class="flex-1 ">
<ul role="list" class="flex flex-col h-full space-y-1.5"> <ul role="list" class="flex flex-col h-full space-y-1.5">
@if (isSubscribed()) @if (isSubscribed() || !isCloud())
<li> <li>
<a title="Dashboard" href="/" <a title="Dashboard" href="/"
class="{{ request()->is('/') ? 'menu-item-active menu-item' : 'menu-item' }}"> class="{{ request()->is('/') ? 'menu-item-active menu-item' : 'menu-item' }}">
@ -263,7 +263,7 @@
<livewire:help /> <livewire:help />
</x-modal-input> </x-modal-input>
</li> </li>
<li > <li>
<form action="/logout" method="POST"> <form action="/logout" method="POST">
@csrf @csrf
<button title="Logout" type="submit" class="gap-2 mb-6 menu-item"> <button title="Logout" type="submit" class="gap-2 mb-6 menu-item">

View File

@ -1,7 +1,7 @@
@extends('layouts.base') @extends('layouts.base')
@section('body') @section('body')
@parent @parent
@if (isSubscribed()) @if (isSubscribed() || !isCloud())
<livewire:layout-popups /> <livewire:layout-popups />
@endif @endif
@auth @auth

View File

@ -1,17 +1,15 @@
@php use App\Enums\ProxyTypes; @endphp @php use App\Enums\ProxyTypes; @endphp
<section class="flex flex-col h-full lg:items-center lg:justify-center"> <section class="flex flex-col h-full lg:items-center lg:justify-center">
<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto max-w-7xl lg:py-0"> <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto max-w-7xl lg:py-0">
@if ($state === 'welcome') @if ($currentState === 'welcome')
<h1 class="text-3xl font-bold lg:text-5xl">Welcome to Coolify</h1> <h1 class="text-3xl font-bold lg:text-5xl">Welcome to Coolify</h1>
<p class="py-6 text-base text-center lg:text-xl">Let me help you set up the basics.</p> <p class="py-6 text-base text-center lg:text-xl">Let me help you set up the basics.</p>
<div class="flex justify-center "> <div class="flex justify-center ">
<x-forms.button class="justify-center w-64 box" wire:click="$set('state','explanation')">Get <x-forms.button class="justify-center w-64 box" wire:click="$set('currentState','explanation')">Get
Started Started
</x-forms.button> </x-forms.button>
</div> </div>
@endif @elseif ($currentState === 'explanation')
<div>
@if ($state === 'explanation')
<x-boarding-step title="What is Coolify?"> <x-boarding-step title="What is Coolify?">
<x-slot:question> <x-slot:question>
Coolify is an all-in-one application to automate tasks on your servers, deploy application with Coolify is an all-in-one application to automate tasks on your servers, deploy application with
@ -39,8 +37,7 @@
</x-forms.button> </x-forms.button>
</x-slot:actions> </x-slot:actions>
</x-boarding-step> </x-boarding-step>
@endif @elseif ($currentState === 'select-server-type')
@if ($state === '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 to your <x-highlighted text="Localhost" /> Do you want to deploy your resources to your <x-highlighted text="Localhost" />
@ -82,10 +79,7 @@
provider.</p> provider.</p>
</x-slot:explanation> </x-slot:explanation>
</x-boarding-step> </x-boarding-step>
@endif @elseif ($currentState === 'private-key')
</div>
<div>
@if ($state === '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?
@ -118,10 +112,7 @@
</p> </p>
</x-slot:explanation> </x-slot:explanation>
</x-boarding-step> </x-boarding-step>
@endif @elseif ($currentState === 'select-existing-server')
</div>
<div>
@if ($state === '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?
@ -155,8 +146,7 @@
'root' or skip the boarding process and add a new private key manually to Coolify and to the 'root' or skip the boarding process and add a new private key manually to Coolify and to the
server. server.
<x-forms.input readonly id="serverPublicKey"></x-forms.input> <x-forms.input readonly id="serverPublicKey"></x-forms.input>
<x-forms.button class="w-64 box" wire:target="validateServer" <x-forms.button class="w-64 box" wire:target="validateServer" wire:click="validateServer">Check
wire:click="validateServer">Check
again again
</x-forms.button> </x-forms.button>
@endif @endif
@ -169,10 +159,7 @@
</p> </p>
</x-slot:explanation> </x-slot:explanation>
</x-boarding-step> </x-boarding-step>
@endif @elseif ($currentState === 'create-private-key')
</div>
<div>
@if ($state === '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.
@ -183,8 +170,8 @@
label="Name" id="privateKeyName" /> label="Name" id="privateKeyName" />
<x-forms.input placeholder="Description, so others will know more about this." <x-forms.input placeholder="Description, so others will know more about this."
label="Description" id="privateKeyDescription" /> label="Description" id="privateKeyDescription" />
<x-forms.textarea required placeholder="-----BEGIN OPENSSH PRIVATE KEY-----" <x-forms.textarea required placeholder="-----BEGIN OPENSSH PRIVATE KEY-----" label="Private Key"
label="Private Key" id="privateKey" /> id="privateKey" />
@if ($privateKeyType === 'create') @if ($privateKeyType === 'create')
<x-forms.textarea rows="7" readonly label="Public Key" id="publicKey" /> <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 <span class="font-bold dark:text-warning">ACTION REQUIRED: Copy the 'Public Key' to your
@ -203,10 +190,7 @@
</p> </p>
</x-slot:explanation> </x-slot:explanation>
</x-boarding-step> </x-boarding-step>
@endif @elseif ($currentState === 'create-server')
</div>
<div>
@if ($state === 'create-server')
<x-boarding-step title="Create Server"> <x-boarding-step title="Create Server">
<x-slot:question> <x-slot:question>
Please let me know your server details. Please let me know your server details.
@ -220,13 +204,12 @@
label="Description" id="remoteServerDescription" /> label="Description" id="remoteServerDescription" />
</div> </div>
<div class="flex flex-col gap-2 lg:flex-row "> <div class="flex flex-col gap-2 lg:flex-row ">
<x-forms.input required placeholder="127.0.0.1" label="IP Address" <x-forms.input required placeholder="127.0.0.1" label="IP Address" id="remoteServerHost" />
id="remoteServerHost" />
<x-forms.input required placeholder="Port number of your server. Default is 22." <x-forms.input required placeholder="Port number of your server. Default is 22."
label="Port" id="remoteServerPort" /> label="Port" id="remoteServerPort" />
<x-forms.input required readonly <x-forms.input required readonly
placeholder="Username to connect to your server. Default is root." placeholder="Username to connect to your server. Default is root." label="Username"
label="Username" id="remoteServerUser" /> id="remoteServerUser" />
</div> </div>
<div class="lg:w-64"> <div class="lg:w-64">
<x-forms.checkbox <x-forms.checkbox
@ -241,10 +224,7 @@
non-root users.</p> non-root users.</p>
</x-slot:explanation> </x-slot:explanation>
</x-boarding-step> </x-boarding-step>
@endif @elseif ($currentState === 'validate-server')
</div>
<div>
@if ($state === 'validate-server')
<x-boarding-step title="Validate & Configure Server"> <x-boarding-step title="Validate & Configure Server">
<x-slot:question> <x-slot:question>
I need to validate your server (connection, Docker Engine, etc) and configure if something is I need to validate your server (connection, Docker Engine, etc) and configure if something is
@ -271,10 +251,7 @@
documentation</a>.</p> documentation</a>.</p>
</x-slot:explanation> </x-slot:explanation>
</x-boarding-step> </x-boarding-step>
@endif @elseif ($currentState === 'create-project')
</div>
<div>
@if ($state === '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)
@ -309,10 +286,7 @@
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 @elseif ($currentState === 'create-resource')
</div>
<div>
@if ($state === 'create-resource')
<x-boarding-step title="Resources"> <x-boarding-step title="Resources">
<x-slot:question> <x-slot:question>
Let's go to the new resource page, where you can create your first resource. Let's go to the new resource page, where you can create your first resource.