Shiloh/lasthourcloud
Shiloh/lasthourcloud
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

updates

Browse Source
This commit is contained in:
Andras Bacsai 2023-06-16 10:32:29 +02:00
parent ca9ac9f92b
commit 05c9126184
11 changed files with 118 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/View/Components/Forms/Input.php Normal file
View File

@ -0,0 +1,37 @@
<?php
namespace App\View\Components\Forms;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
use Visus\Cuid2\Cuid2;
use Illuminate\Support\Str;
class Input extends Component
{
public function __construct(
public string|null $id = null,
public string|null $name = null,
public string|null $type = 'text',
public string|null $value = null,
public string|null $label = null,
public string|null $placeholder = null,
public bool $required = false,
public bool $disabled = false,
public bool $readonly = false,
public string|null $helper = null,
public bool $noDirty = false,
public bool $cannotPeakPassword = false,
) {
}
public function render(): View|Closure|string
{
if (is_null($this->id)) $this->id = new Cuid2(7);
if (is_null($this->name)) $this->name = $this->id;
$this->label = Str::title($this->label);
return view('components.forms.input');
}
}

30
resources/css/app.css
View File

@ -5,41 +5,39 @@
.scrollbar {
@apply scrollbar-thumb-coollabs-100 scrollbar-track-coolgray-200 scrollbar-w-1;
}
html {
@apply min-h-screen h-full bg-coolgray-100;
@apply text-neutral-400;
}
body {
@apply scrollbar min-h-screen bg-coolgray-100 text-neutral-400 antialiased;
@apply scrollbar antialiased;
}
main {
.main {
@apply pl-24 pr-10 mx-auto max-w-screen-xl pt-4;
}
input {
@apply input input-sm h-7 outline-none placeholder:text-neutral-700 text-white rounded bg-coolgray-200 w-full;
}
input[type="checkbox"] {
@apply toggle toggle-warning toggle-xs rounded;
}
input {
@apply input input-sm h-7 outline-none placeholder:text-neutral-700 text-white rounded;
}
input[type="text"],
[type="number"],
[type="email"],
[type="password"] {
@apply read-only:bg-coolgray-200/50 read-only:text-opacity-25;
@apply read-only:bg-coolgray-200/50 read-only:text-opacity-25 border-none;
}
textarea {
@apply textarea placeholder:text-neutral-700 text-white rounded scrollbar bg-coolgray-200;
}
select {
@apply h-7 select select-xs text-sm disabled:bg-coolgray-200 border-none disabled:opacity-50 font-normal placeholder:text-neutral-700 text-white rounded bg-coolgray-200;
}
.label-text,
label {
@apply text-neutral-400 text-sm;
}
textarea {
@apply textarea placeholder:text-neutral-700 text-white rounded scrollbar;
}
select {
@apply h-7 select select-xs text-sm disabled:bg-coolgray-200 border-none disabled:opacity-50 font-normal placeholder:text-neutral-700 text-white rounded;
}
.loading {
@apply w-4 text-warning;
}

20
resources/views/auth/login.blade.php
View File

@ -1,5 +1,5 @@
<x-layout-simple>
<div class="flex items-center justify-center h-screen">
<div class="min-h-screen hero">
<div class="w-96 min-w-fit">
<div class="flex flex-col items-center pb-8">
<div class="text-5xl font-extrabold tracking-tight text-center text-white">Coolify</div>
@ -7,14 +7,19 @@
</div>
<div class="flex items-center gap-2">
<h1>{{ __('auth.login') }}</h1>
@if ($is_registration_enabled)
<a href="/register"
class="text-xs text-center text-white normal-case bg-transparent border-none rounded no-animation hover:no-underline btn btn-sm bg-coollabs-gradient">
{{ __('auth.register_now') }}
</a>
@endif
</div>
<div>
<form action="/login" method="POST" class="flex flex-col gap-2">
@csrf
@env('local')
<x-forms.input value="test@example.com" type="email" name="email" label="{{ __('input.email') }}"
autofocus />
<x-forms.input value="test@example.com" type="email" name="email"
label="{{ __('input.email') }}" autofocus />
<x-forms.input value="password" type="password" name="password"
label="{{ __('input.password') }}" />
@ -27,12 +32,7 @@
@endenv
<x-forms.button type="submit">{{ __('auth.login') }}</x-forms.button>
@if ($is_registration_enabled)
<a href="/register"
class="text-xs text-center text-white normal-case bg-transparent border-none rounded no-animation hover:no-underline btn btn-sm bg-coollabs-gradient">
{{ __('auth.register_now') }}
</a>
@else
@if (!$is_registration_enabled)
<div class="text-sm text-center">{{ __('auth.registration_disabled') }}</div>
@endif
@if ($errors->any())

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

@ -1,15 +1,4 @@
@props([
'id' => $attributes->has('id'),
'type' => $attributes->get('type') ?? 'text',
'label' => $attributes->has('label'),
'readonly' => null,
'required' => null,
'disabled' => null,
'helper' => $attributes->has('helper'),
'noDirty' => $attributes->has('noDirty'),
'cannotPeak' => $attributes->has('cannotPeak'),
])
<div {{ $attributes->merge(['class' => 'w-full form-control']) }}>
<div class="w-full">
@if ($label)
<label class="label">
<span class="flex gap-1 label-text">
@ -18,52 +7,28 @@
<span class="text-warning">*</span>
@endif
@if ($helper)
<div class="group">
<div class="cursor-pointer text-warning">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
class="w-4 h-4 stroke-current">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="absolute hidden text-xs group-hover:block border-coolgray-400 bg-coolgray-500">
<div class="p-4 card-body">
{!! $helper !!}
</div>
</div>
</div>
<x-helper :helper="$helper" />
@endif
</span>
</label>
@endif
@if ($type === 'password')
<div class="join" x-data>
<input class="w-full join-item" type={{ $type }} @class([
'border-r-0 rounded-l' => $cannotPeak,
]) @if ($id) id={{ $id }} name={{ $id }}
wire:model.defer={{ $id }} @endisset
@if ($disabled !== null) disabled @endif
@if ($required !== null) required @endif @if ($readonly !== null) readonly @endif
@if (!$noDirty && $id) wire:dirty.class="input-warning"
@endif {{ $attributes }} />
@if (!$cannotPeak)
@if (!$disabled)
<div class="w-full">
@if ($type === 'password')
<div class="w-full join" x-data>
<input class="join-item" @readonly($readonly) @disabled($disabled || $errors->isNotEmpty()) type={{ $type }}
id={{ $id }} name={{ $name }} value={{ $value }}
placeholder={{ $placeholder }}>
@if ($cannotPeakPassword)
<span x-on:click="changePasswordFieldType('{{ $id }}')" x-cloak
class="border-l-0 border-none rounded-r hover:bg-coolgray-200 no-animation h-7 btn join-item btn-xs bg-coolgray-200 "><svg
xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
<path
d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
</svg></span>
@else
<span x-on:click="changePasswordFieldType('{{ $id }}')" x-cloak
class="text-opacity-25 border-l-0 rounded-r bg-coolgray-200/50 hover:bg-coolgray-200/50 no-animation h-7 btn join-item btn-xs"><svg
xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
@class([
'border-l-0 border-none rounded-r no-animation h-7 btn join-item btn-xs',
'bg-coolgray-200/50 hover:bg-coolgray-200/50 text-opacity-25' =>
$disabled || $readonly,
'bg-coolgray-200 hover:bg-coolgray-200' => !$disabled || !$readonly,
])><svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 icon"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
<path
@ -71,19 +36,15 @@
</svg>
</span>
@endif
@endif
</div>
@else
<input id={{ $id }} name={{ $name }} wire:model.defer={{ $id }}
wire:dirty.class="input-warning" @readonly($readonly) @disabled($disabled || $errors->isNotEmpty())
@isset($value) value={{ $value }} @endisset
@isset($placeholder) placeholder={{ $placeholder }} @endisset>
@endif
@if (!$label && $helper)
<x-helper :helper="$helper" />
@endif
</div>
@else
<input type={{ $type }}
@if ($id) name={{ $id }} wire:model.defer={{ $id }} @endisset
@if ($disabled !== null) disabled @endif
@if ($required !== null) required @endif @if ($readonly !== null) readonly @endif
@if (!$noDirty && $id) wire:dirty.class="input-warning" @endif {{ $attributes }} />
@endif
@error($id)
<label class="label">
<span class="text-red-500 label-text-alt">{{ $message }}</span>
</label>
@enderror
</div>

5
resources/views/components/helper.blade.php
View File

@ -1,6 +1,3 @@
@props([
'helper' => $attributes->has('helper'),
])
<div class="group">
<div class="cursor-pointer text-warning">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current">
@ -8,7 +5,7 @@
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="absolute hidden text-xs group-hover:block border-coolgray-400 bg-coolgray-500">
<div class="absolute hidden text-xs rounded group-hover:block border-coolgray-400 bg-coolgray-500">
<div class="p-4 card-body">
{!! $helper !!}
</div>

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

@ -26,6 +26,17 @@
{{ $slot }}
</main>
<x-version class="fixed left-2 bottom-1" />
<script>
function changePasswordFieldType(id) {
console.log(id)
const input = document.getElementById(id);
if (input.type === 'password') {
input.type = 'text';
} else {
input.type = 'password';
}
}
</script>
</body>
</html>

31
resources/views/components/layout.blade.php
View File

@ -26,18 +26,16 @@
<body>
@livewireScripts
<x-toaster-hub />
@auth
<x-toaster-hub />
<x-navbar />
@endauth
<div class="fixed top-3 left-4" id="vue">
<magic-bar></magic-bar>
</div>
<main>
{{ $slot }}
</main>
<x-version class="fixed left-2 bottom-1" />
@auth
<div class="fixed top-3 left-4" id="vue">
<magic-bar></magic-bar>
</div>
<main class="main">
{{ $slot }}
</main>
<x-version class="fixed left-2 bottom-1" />
<script>
let checkHealthInterval = null;
let checkIfIamDeadInterval = null;
@ -100,16 +98,9 @@
})
</script>
@endauth
<script>
function changePasswordFieldType(id) {
const input = document.getElementById(id);
if (input.type === 'password') {
input.type = 'text';
} else {
input.type = 'password';
}
}
</script>
@guest
{{ $slot }}
@endguest
</body>
</html>

2
resources/views/livewire/private-key/change.blade.php
View File

@ -10,7 +10,7 @@
Delete
</x-forms.button>
</div>
<div class="pt-2 pb-8 text-sm">Private Key used for SSH connection</div>
<div class="pb-8 text-sm">Private Key used for SSH connection</div>
<x-forms.input id="private_key.name" label="Name" required />
<x-forms.input id="private_key.description" label="Description" />
<div>

4
resources/views/livewire/project/application/environment-variable/show.blade.php
View File

@ -1,7 +1,7 @@
<div x-data="{ deleteEnvironment: false }">
<form wire:submit.prevent='submit' class="flex flex-col gap-2 xl:items-end xl:flex-row">
<x-forms.input label="Name" id="env.key" />
<x-forms.input label="Value" id="env.value" />
<x-forms.input id="env.key" label="Name" />
<x-forms.input id="env.value" label="Value" />
<x-forms.checkbox disabled id="env.is_build_time" label="Build Variable?" />
<div class="flex gap-2">
<x-forms.button type="submit">

4
resources/views/livewire/project/application/general.blade.php
View File

@ -9,8 +9,8 @@
<div class="text-sm">General configuration for your application.</div>
<div class="flex flex-col gap-2 py-4">
<div class="flex flex-col items-end gap-2 xl:flex-row">
<x-forms.input class="w-full" id="application.name" label="Name" required />
<x-forms.input placeholder="https://coolify.io" class="w-full" id="application.fqdn" label="Domains"
<x-forms.input id="application.name" label="Name" required />
<x-forms.input placeholder="https://coolify.io" id="application.fqdn" label="Domains"
helper="You can specify one domain with path or more with comma.<br><span class='text-helper'>Example</span>- http://app.coolify.io, https://cloud.coolify.io/dashboard<br>- http://app.coolify.io/api/v3" />
</div>

2
tailwind.config.js
View File

@ -42,7 +42,7 @@ module.exports = {
secondary: "#4338ca",
accent: "#4338ca",
neutral: "#1B1D1D",
"base-100": "#212121",
"base-100": "#181818",
info: "#2563EB",
success: "#16A34A",
warning: "#FCD34D",