From fafc4fb71e70c1e4b5ee961b8589a3d5f7064625 Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Wed, 20 Mar 2024 15:46:59 +0100 Subject: [PATCH] Update UI elements and text content --- app/Livewire/Boarding/Index.php | 71 +- app/Livewire/Settings/Auth.php | 2 +- lang/en.json | 2 +- resources/css/app.css | 33 +- resources/views/auth/login.blade.php | 115 ++-- resources/views/auth/register.blade.php | 93 +-- .../views/components/boarding-step.blade.php | 4 +- .../views/components/highlighted.blade.php | 2 +- resources/views/components/loading.blade.php | 2 +- resources/views/components/navbar.blade.php | 21 +- resources/views/components/version.blade.php | 2 +- resources/views/layouts/app.blade.php | 13 +- resources/views/layouts/base.blade.php | 3 +- .../views/livewire/boarding/index.blade.php | 647 +++++++++--------- resources/views/livewire/dashboard.blade.php | 39 +- .../views/livewire/project/index.blade.php | 2 +- .../livewire/project/resource/index.blade.php | 18 +- .../views/livewire/server/index.blade.php | 2 +- .../views/livewire/settings/email.blade.php | 42 +- .../views/livewire/settings/index.blade.php | 2 +- 20 files changed, 576 insertions(+), 539 deletions(-) diff --git a/app/Livewire/Boarding/Index.php b/app/Livewire/Boarding/Index.php index c77aa54ec..387d6cd0b 100644 --- a/app/Livewire/Boarding/Index.php +++ b/app/Livewire/Boarding/Index.php @@ -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; @@ -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; @@ -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; @@ -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() @@ -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.'); } @@ -106,10 +136,10 @@ 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() @@ -117,12 +147,12 @@ 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() { @@ -130,7 +160,7 @@ public function getProxyType() $this->selectProxy(ProxyTypes::TRAEFIK_V2->value); // $proxyTypeSet = $this->createdServer->proxy->type; // if (!$proxyTypeSet) { - // $this->currentState = 'select-proxy'; + // $this->state = 'select-proxy'; // return; // } $this->getProjects(); @@ -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) { @@ -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() { @@ -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() { @@ -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() { @@ -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([ @@ -249,14 +280,14 @@ 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() { @@ -264,7 +295,7 @@ public function createNewProject() 'name' => "My first project", 'team_id' => currentTeam()->id ]); - $this->currentState = 'create-resource'; + $this->state = 'create-resource'; } public function showNewResource() { diff --git a/app/Livewire/Settings/Auth.php b/app/Livewire/Settings/Auth.php index d8bda0569..100f99a73 100644 --- a/app/Livewire/Settings/Auth.php +++ b/app/Livewire/Settings/Auth.php @@ -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; }, []); diff --git a/lang/en.json b/lang/en.json index 368a01c0c..461a96e9a 100644 --- a/lang/en.json +++ b/lang/en.json @@ -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.", diff --git a/resources/css/app.css b/resources/css/app.css index 6ac74f8a3..ce97eebf7 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -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; } @@ -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; @@ -82,6 +83,7 @@ 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; } @@ -89,12 +91,15 @@ .input { 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 } @@ -115,8 +120,6 @@ .badge-error { @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"); } @@ -126,11 +129,11 @@ .menu { } .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 { @@ -170,15 +173,21 @@ .icon:hover { } .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 { @@ -224,8 +233,9 @@ .buyme { } .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; } @@ -237,4 +247,3 @@ .fullscreen { .toast { z-index: 1; } - diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php index 6a013b192..919765f6c 100644 --- a/resources/views/auth/login.blade.php +++ b/resources/views/auth/login.blade.php @@ -1,29 +1,15 @@ -
-
-
-
Coolify
-
-
-

{{ __('auth.login') }}

- @if ($is_registration_enabled) - @if (config('coolify.waitlist')) - - Join the waitlist - - @else - - {{ __('auth.register_now') }} - - @endif - @endif -
-
-
- @csrf - @env('local') +
+
+ + Coolify + +
+
+ + @csrf + @env('local') @@ -33,40 +19,59 @@ class="text-xs text-center text-white normal-case bg-transparent border-none rou {{ __('auth.forgot_password') }}? @else - + {{ __('auth.forgot_password') }}? - @endenv - {{ __('auth.login') }} - @foreach ($enabled_oauth_providers as $provider_setting) - - {{ __("auth.login.$provider_setting->provider") }} - - @endforeach - @if (!$is_registration_enabled) -
{{ __('auth.registration_disabled') }}
- @endif - @if ($errors->any()) -
- @foreach ($errors->all() as $error) -

{{ $error }}

- @endforeach -
- @endif - @if (session('status')) -
- {{ session('status') }} -
- @endif - @if (session('error')) -
- {{ session('error') }} -
- @endif - + @endenv + {{ __('auth.login') }} + @if ($is_registration_enabled) + + {{ __('auth.register_now') }} + + @endif + @if ($enabled_oauth_providers->isNotEmpty()) +
+ +
+ or +
+
+ @endif + @foreach ($enabled_oauth_providers as $provider_setting) + + {{ __("auth.login.$provider_setting->provider") }} + + @endforeach + @if (!$is_registration_enabled) +
{{ __('auth.registration_disabled') }}
+ @endif + @if ($errors->any()) +
+ @foreach ($errors->all() as $error) +

{{ $error }}

+ @endforeach +
+ @endif + @if (session('status')) +
+ {{ session('status') }} +
+ @endif + @if (session('error')) +
+ {{ session('error') }} +
+ @endif + +
-
+ diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php index ce632f31b..2f0b5c8b2 100644 --- a/resources/views/auth/register.blade.php +++ b/resources/views/auth/register.blade.php @@ -1,48 +1,53 @@ -
-
-
-
Coolify
- +
+
+ + Coolify + +
+
+

+ Create an account +

+
+ @csrf + @env('local') + + +
+ + +
+ @else + + +
+ + +
+ @endenv + Register + + {{ __('auth.already_registered') }} + + + @if ($errors->any()) +
+ @foreach ($errors->all() as $error) +

{{ $error }}

+ @endforeach +
+ @endif + +
-
-

{{ __('auth.register') }}

- - {{ __('auth.already_registered') }} - -
-
- @csrf - @env('local') - - -
- - -
- @else - - -
- - -
- @endenv - {{ __('auth.register') }} - - @if ($errors->any()) -
- @foreach ($errors->all() as $error) -

{{ $error }}

- @endforeach -
- @endif
-
+ diff --git a/resources/views/components/boarding-step.blade.php b/resources/views/components/boarding-step.blade.php index a8d47da37..3b1e5324e 100644 --- a/resources/views/components/boarding-step.blade.php +++ b/resources/views/components/boarding-step.blade.php @@ -1,9 +1,9 @@

{{ $title }}

-
+
@isset($question) -

+

{{ $question }}

@endisset diff --git a/resources/views/components/highlighted.blade.php b/resources/views/components/highlighted.blade.php index a088d8617..5a7b830d2 100644 --- a/resources/views/components/highlighted.blade.php +++ b/resources/views/components/highlighted.blade.php @@ -1 +1 @@ -{{ $text }} +{{ $text }} diff --git a/resources/views/components/loading.blade.php b/resources/views/components/loading.blade.php index ddf3ea2db..c836ed9c8 100644 --- a/resources/views/components/loading.blade.php +++ b/resources/views/components/loading.blade.php @@ -1,5 +1,6 @@ @props(['text' => null])
+
{{ $text }}
@@ -7,5 +8,4 @@ d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"> -
{{ $text }}
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php index 0271f41a0..f2f553b15 100644 --- a/resources/views/components/navbar.blade.php +++ b/resources/views/components/navbar.blade.php @@ -1,11 +1,14 @@ -
- -
-