ui fixes

app/Http/Livewire/PrivateKey/Create.php

@@ -3,7 +3,6 @@
 namespace App\Http\Livewire\PrivateKey;
 
 use App\Models\PrivateKey;
-use Illuminate\Support\Facades\Route;
 use Livewire\Component;
 
 class Create extends Component
@@ -12,9 +11,18 @@ class Create extends Component
     public string $name;
     public string|null $description = null;
     public string $value;
-
+    protected $rules = [
+        'name' => 'required|string',
+        'value' => 'required|string',
+    ];
+    protected $validationAttributes = [
+        'name' => 'Name',
+        'value' => 'Private Key',
+    ];
     public function createPrivateKey()
     {
+        $this->validate();
+        try {
             $this->value = trim($this->value);
             if (!str_ends_with($this->value, "\n")) {
                 $this->value .= "\n";
@@ -29,5 +37,8 @@ public function createPrivateKey()
                 return redirect()->route('server.create');
             }
             return redirect()->route('private-key.show', ['private_key_uuid' => $private_key->uuid]);
+        } catch (\Exception $e) {
+            return general_error_handler($e, $this);
+        }
     }
 }

resources/js/components/MagicBar.vue

@@ -213,25 +213,25 @@ const uuidSelector = ['project', 'destination']
 const nameSelector = ['environment']
 const possibleSequences = {
     server: {
-        newTitle: 'Add a new server',
+        newTitle: 'Create a Server',
         title: 'Select a server'
     },
     destination: {
-        newTitle: 'Add a new destination',
+        newTitle: 'Create a Destination',
         title: 'Select a destination'
     },
     project: {
-        newTitle: 'Add a new project',
+        newTitle: 'Create a Project',
         title: 'Select a project'
     },
     environment: {
-        newTitle: 'Add a new environment',
+        newTitle: 'Create an Environment',
         title: 'Select an environment'
     },
 }
 const magicActions = [{
     id: 0,
-    name: 'Deploy a Public Repository',
+    name: 'Deploy: Public Repository',
     tags: 'git,github,public',
     icon: 'git',
     new: true,
@@ -239,7 +239,7 @@ const magicActions = [{
 },
 {
     id: 1,
-    name: 'Deploy a Private Repository (with GitHub Apps)',
+    name: 'Deploy: Private Repository (with GitHub Apps)',
     tags: 'git,github,private',
     icon: 'git',
     new: true,
@@ -247,7 +247,7 @@ const magicActions = [{
 },
 {
     id: 2,
-    name: 'Deploy a Private Repository (with Deploy Key)',
+    name: 'Deploy: Private Repository (with Deploy Key)',
     tags: 'git,github,private,deploy,key',
     icon: 'git',
     new: true,
@@ -255,7 +255,7 @@ const magicActions = [{
 },
 {
     id: 3,
-    name: 'Add a Private Key',
+    name: 'Create: Private Key',
     tags: 'key,private,ssh',
     icon: 'key',
     new: true,
@@ -263,7 +263,7 @@ const magicActions = [{
 },
 {
     id: 4,
-    name: 'Add a Server',
+    name: 'Create: Server',
     tags: 'server,ssh,new,create',
     icon: 'server',
     new: true,
@@ -271,7 +271,7 @@ const magicActions = [{
 },
 {
     id: 5,
-    name: 'Add a Destination',
+    name: 'Create: Destination',
     tags: 'destination,docker,network,new,create',
     icon: 'destination',
     new: true,
@@ -279,31 +279,31 @@ const magicActions = [{
 },
 {
     id: 6,
-    name: 'Goto Dashboard',
+    name: 'Goto: Dashboard',
     icon: 'goto',
     sequence: ['main', 'redirect']
 },
 {
     id: 7,
-    name: 'Goto Servers',
+    name: 'Goto: Servers',
     icon: 'goto',
     sequence: ['main', 'redirect']
 },
 {
     id: 8,
-    name: 'Goto Projects',
+    name: 'Goto: Projects',
     icon: 'goto',
     sequence: ['main', 'redirect']
 },
 {
     id: 9,
-    name: 'Goto Settings',
+    name: 'Goto: Settings',
     icon: 'goto',
     sequence: ['main', 'redirect']
 },
 {
     id: 10,
-    name: 'Goto Command Center',
+    name: 'Goto: Command Center',
     icon: 'goto',
     sequence: ['main', 'redirect']
 }
@@ -475,13 +475,13 @@ async function redirect() {
             targetUrl.searchParams.append('destination', destination)
             break;
         case 3:
-            targetUrl.pathname = `/private-key/new/`
+            targetUrl.pathname = `/private-key/new`
             break;
         case 4:
-            targetUrl.pathname = `/server/new/`
+            targetUrl.pathname = `/server/new`
             break;
         case 5:
-            targetUrl.pathname = `/destination/new/`
+            targetUrl.pathname = `/destination/new`
             targetUrl.searchParams.append('server', server)
             break;
         case 6:

resources/views/components/forms/textarea.blade.php

@@ -1,9 +1,9 @@
 @props([
-    'id' => $attributes->has('id') || $attributes->has('label'),
-    'required' => $attributes->has('required'),
+    'id' => $attributes->has('id'),
     'label' => $attributes->has('label'),
+    'required' => null,
+    'disabled' => null,
     'helper' => $attributes->has('helper'),
-    'instantSave' => $attributes->has('instantSave'),
     'noDirty' => $attributes->has('noDirty'),
 ])
 
@@ -39,7 +39,10 @@ class="w-64 border-2 shadow border-coolgray-500 card compact dropdown-content bg
             </span>
         </label>
     @endif
-    <textarea {{ $attributes }} name={{ $id }} wire:model.defer={{ $value ?? $id }}
+    <textarea {{ $attributes }}
+        @if ($id) name={{ $id }} wire:model.defer={{ $id }} @endisset
+        @if ($disabled !== null) disabled @endif
+        @if ($required !== null) required @endif name={{ $id }} wire:model.defer={{ $value ?? $id }}
         @if (!$noDirty) wire:dirty.class="input-warning" @endif></textarea>
     @error($id)
         <label class="label">

resources/views/livewire/private-key/create.blade.php

@@ -1,11 +1,13 @@
 <div>
     <form class="flex flex-col gap-2" wire:submit.prevent='createPrivateKey'>
+        <div class="flex gap-2">
             <x-forms.input id="name" label="Name" required />
             <x-forms.input id="description" label="Description" />
+        </div>
         <x-forms.textarea id="value" rows="10" placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
             label="Private Key" required />
         <x-forms.button type="submit" wire.click.prevent>
-            Save
+            Save Private Key
         </x-forms.button>
     </form>
 </div>

resources/views/livewire/server/new/by-ip.blade.php

@@ -1,14 +1,24 @@
 <div>
-    <form class="flex flex-col gap-1" wire:submit.prevent='submit'>
-        <h1>New Server</h1>
+    <form class="flex flex-col gap-2" wire:submit.prevent='submit'>
+        <h1>Create a new Server</h1>
+        <div class="pb-5 text-sm breadcrumbs">
+            <ul>
+                <li>
+                    Servers are the main blocks of your infrastructure.
+                </li>
+            </ul>
+        </div>
+        <div class="flex gap-2">
             <x-forms.input id="name" label="Name" required />
             <x-forms.input id="description" label="Description" />
+        </div>
+        <div class="flex gap-2">
             <x-forms.input id="ip" label="IP Address" required
                 helper="Could be IP Address (127.0.0.1) or Domain Name (duckduckgo.com)." />
             <x-forms.input id="user" label="User" required />
             <x-forms.input type="number" id="port" label="Port" required />
-        <label>Private Key</label>
-        <x-forms.select wire:model.defer="private_key_id">
+        </div>
+        <x-forms.select label="Private Key" wire:model.defer="private_key_id">
             <option disabled>Select a private key</option>
             @foreach ($private_keys as $key)
                 @if ($loop->first)
@@ -18,9 +28,10 @@
                 @endif
             @endforeach
         </x-forms.select>
-        <x-forms.checkbox instantSave noDirty id="is_part_of_swarm" label="Is it part of a Swarm cluster?" />
+        <x-forms.checkbox class="pb-8" disabled instantSave noDirty id="is_part_of_swarm"
+            label="Is it part of a Swarm cluster?" />
         <x-forms.button type="submit">
-            Save
+            Save Server
         </x-forms.button>
     </form>
 </div>

resources/views/private-key/new.blade.php

@@ -1,4 +1,11 @@
 <x-layout>
-    <h1>Add Private Key</h1>
+    <h1>Create a new Private Key</h1>
+    <div class="pb-5 text-sm breadcrumbs">
+        <ul>
+            <li>
+                Private Keys are used for connection to servers.
+            </li>
+        </ul>
+    </div>
     <livewire:private-key.create />
 </x-layout>