Skip to content

Commit

Permalink
Update UI elements and text content
Browse files Browse the repository at this point in the history
  • Loading branch information
@andrasbacsai
andrasbacsai committed Mar 20, 2024
1 parent 6b49d32 commit fafc4fb
Show file tree
Hide file tree
Showing 20 changed files with 575 additions and 538 deletions.
71 changes: 51 additions & 20 deletions app/Livewire/Boarding/Index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,27 @@

namespace App\Livewire\Boarding;

use App\Actions\Server\InstallDocker;
use App\Enums\ProxyTypes;
use App\Models\PrivateKey;
use App\Models\Project;
use App\Models\Server;
use App\Models\Team;
use Illuminate\Support\Collection;
use Livewire\Attributes\Url;
use Livewire\Component;

class Index extends Component
{
protected $listeners = ['serverInstalled' => 'validateServer'];
public string $currentState = 'welcome';

#[Url()]
public string $state = 'welcome';

#[Url()]
public ?string $selectedServerType = null;
public ?Collection $privateKeys = null;

#[Url()]
public ?int $selectedExistingPrivateKey = null;
public ?string $privateKeyType = null;
public ?string $privateKey = null;
Expand All @@ -27,6 +32,8 @@ class Index extends Component
public ?PrivateKey $createdPrivateKey = null;

public ?Collection $servers = null;

#[Url()]
public ?int $selectedExistingServer = null;
public ?string $remoteServerName = null;
public ?string $remoteServerDescription = null;
Expand All @@ -38,7 +45,9 @@ class Index extends Component
public ?Server $createdServer = null;

public Collection $projects;
public ?int $selectedExistingProject = null;

#[Url()]
public ?int $selectedProject = null;
public ?Project $createdProject = null;

public bool $dockerInstallationStarted = false;
Expand All @@ -62,13 +71,33 @@ public function mount()
$this->remoteServerDescription = 'Created by Coolify';
$this->remoteServerHost = 'coolify-testing-host';
}
if ($this->state === 'create-project') {
$this->getProjects();
}
if ($this->state === 'create-resource') {
$this->selectExistingServer();
$this->selectExistingProject();
}
if ($this->state === 'private-key') {
$this->setServerType('remote');
}
if ($this->state === 'create-server') {
$this->selectExistingPrivateKey();
}
if ($this->state === 'validate-server') {
$this->selectExistingServer();
}
if ($this->state === 'select-existing-server') {
$this->selectExistingServer();
}

}
public function explanation()
{
if (isCloud()) {
return $this->setServerType('remote');
}
$this->currentState = 'select-server-type';
$this->state = 'select-server-type';
}

public function restartBoarding()
Expand All @@ -89,6 +118,7 @@ public function setServerType(string $type)
$this->selectedServerType = $type;
if ($this->selectedServerType === 'localhost') {
$this->createdServer = Server::find(0);
$this->selectedExistingServer = 0;
if (!$this->createdServer) {
return $this->dispatch('error', 'Localhost server is not found. Something went wrong during installation. Please try to reinstall or contact support.');
}
Expand All @@ -106,31 +136,31 @@ public function setServerType(string $type)
$this->servers = Server::ownedByCurrentTeam(['name'])->where('id', '!=', 0)->get();
if ($this->servers->count() > 0) {
$this->selectedExistingServer = $this->servers->first()->id;
$this->currentState = 'select-existing-server';
$this->state = 'select-existing-server';
return;
}
$this->currentState = 'private-key';
$this->state = 'private-key';
}
}
public function selectExistingServer()
{
$this->createdServer = Server::find($this->selectedExistingServer);
if (!$this->createdServer) {
$this->dispatch('error', 'Server is not found.');
$this->currentState = 'private-key';
$this->state = 'private-key';
return;
}
$this->selectedExistingPrivateKey = $this->createdServer->privateKey->id;
$this->serverPublicKey = $this->createdServer->privateKey->publicKey();
$this->currentState = 'validate-server';
$this->state = 'validate-server';
}
public function getProxyType()
{
// Set Default Proxy Type
$this->selectProxy(ProxyTypes::TRAEFIK_V2->value);
// $proxyTypeSet = $this->createdServer->proxy->type;
// if (!$proxyTypeSet) {
// $this->currentState = 'select-proxy';
// $this->state = 'select-proxy';
// return;
// }
$this->getProjects();
Expand All @@ -139,12 +169,12 @@ public function selectExistingPrivateKey()
{
$this->createdPrivateKey = PrivateKey::find($this->selectedExistingPrivateKey);
$this->privateKey = $this->createdPrivateKey->private_key;
$this->currentState = 'create-server';
$this->state = 'create-server';
}
public function createNewServer()
{
$this->selectedExistingServer = null;
$this->currentState = 'private-key';
$this->state = 'private-key';
}
public function setPrivateKey(string $type)
{
Expand All @@ -153,7 +183,7 @@ public function setPrivateKey(string $type)
if ($type === 'create') {
$this->createNewPrivateKey();
}
$this->currentState = 'create-private-key';
$this->state = 'create-private-key';
}
public function savePrivateKey()
{
Expand All @@ -168,7 +198,7 @@ public function savePrivateKey()
'team_id' => currentTeam()->id
]);
$this->createdPrivateKey->save();
$this->currentState = 'create-server';
$this->state = 'create-server';
}
public function saveServer()
{
Expand Down Expand Up @@ -196,7 +226,8 @@ public function saveServer()
$this->createdServer->settings->is_cloudflare_tunnel = $this->isCloudflareTunnel;
$this->createdServer->settings->save();
$this->createdServer->addInitialNetwork();
$this->currentState = 'validate-server';
$this->selectedExistingServer = $this->createdServer->id;
$this->state = 'validate-server';
}
public function installServer()
{
Expand All @@ -223,7 +254,7 @@ public function validateServer()
$dockerVersion = instant_remote_process(["docker version|head -2|grep -i version| awk '{print $2}'"], $this->createdServer, true);
$dockerVersion = checkMinimumDockerEngineVersion($dockerVersion);
if (is_null($dockerVersion)) {
$this->currentState = 'validate-server';
$this->state = 'validate-server';
throw new \Exception('Docker not found or old version is installed.');
}
$this->createdServer->settings()->update([
Expand All @@ -249,22 +280,22 @@ public function getProjects()
{
$this->projects = Project::ownedByCurrentTeam(['name'])->get();
if ($this->projects->count() > 0) {
$this->selectedExistingProject = $this->projects->first()->id;
$this->selectedProject = $this->projects->first()->id;
}
$this->currentState = 'create-project';
$this->state = 'create-project';
}
public function selectExistingProject()
{
$this->createdProject = Project::find($this->selectedExistingProject);
$this->currentState = 'create-resource';
$this->createdProject = Project::find($this->selectedProject);
$this->state = 'create-resource';
}
public function createNewProject()
{
$this->createdProject = Project::create([
'name' => "My first project",
'team_id' => currentTeam()->id
]);
$this->currentState = 'create-resource';
$this->state = 'create-resource';
}
public function showNewResource()
{
Expand Down
2 changes: 1 addition & 1 deletion app/Livewire/Settings/Auth.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ protected function rules() {
}

public function mount() {
$this->oauth_settings_map = OauthSetting::all()->reduce(function($carry, $setting) {
$this->oauth_settings_map = OauthSetting::all()->sortBy('provider')->reduce(function($carry, $setting) {
$carry[$setting->provider] = $setting;
return $carry;
}, []);
Expand Down
2 changes: 1 addition & 1 deletion lang/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"auth.confirm_password": "Confirm password",
"auth.forgot_password": "Forgot password",
"auth.forgot_password_send_email": "Send password reset email",
"auth.register_now": "Register a new account",
"auth.register_now": "Register",
"auth.logout": "Logout",
"auth.register": "Register",
"auth.registration_disabled": "Registration is disabled. Please contact the administrator.",
Expand Down
33 changes: 21 additions & 12 deletions resources/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ body {
@apply text-sm antialiased scrollbar;
}

.button {
@apply px-3 py-1.5 text-sm font-normal normal-case rounded bg-neutral-200 hover:bg-neutral-300 dark:bg-coolgray-200 dark:text-white dark:hover:bg-coolgray-100 dark:disabled:bg-coolgray-100/40 dark:disabled:text-neutral-800 min-w-fit flex items-center justify-center;
}
button[isError]:not(:disabled) {
@apply bg-red-600 hover:bg-red-700;
}
Expand All @@ -19,9 +22,7 @@ button[isHighlighted]:not(:disabled) {
@apply bg-coollabs hover:bg-coollabs-100;
}

.button {
@apply px-3 py-1.5 text-sm font-normal normal-case rounded dark:bg-coolgray-200 dark:text-white dark:hover:bg-coolgray-100 dark:disabled:bg-coolgray-100/40 dark:disabled:text-neutral-800 min-w-fit flex items-center justify-center;
}


h1 {
@apply text-2xl font-bold dark:text-white text-neutral-800;
Expand Down Expand Up @@ -82,19 +83,23 @@ tr td:first-child {
input {
@apply pr-10;
}

.input {
@apply block w-full py-1.5 rounded border-0 text-sm ring-inset ring-1 dark:bg-coolgray-100 dark:text-white text-black focus:ring-2 dark:focus:ring-coolgray-300 dark:ring-coolgray-300 dark:read-only:text-neutral-500 dark:read-only:ring-0 dark:read-only:bg-coolgray-100/40 dark:placeholder:text-neutral-700;
}

option {
@apply text-white;
}

.alert-success {
@apply flex items-center gap-2 text-success;
}

.alert-error {
@apply flex items-center gap-2 text-error;
}

.dropdown-item {
@apply relative flex cursor-pointer select-none dark:hover:text-white dark:hover:bg-coollabs items-center px-2 py-1.5 text-xs justify-center outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 gap-2
}
Expand All @@ -115,8 +120,6 @@ option {
@apply bg-error;
}



[type='checkbox']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
Expand All @@ -126,11 +129,11 @@ option {
}

.menu-item {
@apply flex items-center w-full gap-2 px-4 py-1 min-w-48 hover:bg-coolgray-100 dark:hover:text-white;
@apply flex items-center w-full gap-2 py-1 pl-2 dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300;
}

.menu-item-active {
@apply rounded-none dark:bg-coolgray-200 dark:text-warning;
@apply text-black rounded-none dark:bg-coolgray-200 dark:text-warning bg-neutral-200;
}

.icon {
Expand Down Expand Up @@ -170,15 +173,21 @@ option {
}

.box {
@apply flex p-2 transition-colors cursor-pointer min-h-[4rem] bg-coolgray-100 hover:bg-coollabs-100 hover:text-white hover:no-underline;
@apply flex p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 bg-neutral-50 hover:bg-neutral-200 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
}

.box-without-bg {
@apply flex p-2 transition-colors hover:text-white hover:no-underline min-h-[4rem];
@apply flex p-2 transition-colors dark:hover:text-white hover:no-underline min-h-[4rem];
}

.box-title {
@apply font-bold text-black dark:text-white group-hover:dark:text-white;
}
.box-description {
@apply text-xs font-bold text-neutral-500 group-hover:dark:text-white group-hover:text-black;
}
.description {
@apply text-xs font-bold text-neutral-500 group-hover:text-white;
@apply text-xs font-bold text-neutral-500 group-hover:dark:text-white group-hover:text-black;
}

.lds-heart {
Expand Down Expand Up @@ -224,8 +233,9 @@ option {
}

.title {
@apply hidden pb-0 lg:block lg:pb-8 ;
@apply hidden pb-0 lg:block lg:pb-8;
}

.subtitle {
@apply pt-2 pb-10;
}
Expand All @@ -237,4 +247,3 @@ option {
.toast {
z-index: 1;
}

Loading

0 comments on commit fafc4fb

Please sign in to comment.