button components

app/Http/Livewire/PrivateKey/Create.php

@@ -16,12 +16,13 @@ public function createPrivateKey()
         if (!str_ends_with($this->private_key_value, "\n")) {
             $this->private_key_value .= "\n";
         }
-        PrivateKey::create([
+        $new_private_key = PrivateKey::create([
             'name' => $this->private_key_name,
             'description' => $this->private_key_description,
             'private_key' => $this->private_key_value,
             'team_id' => session('currentTeam')->id
         ]);
         session('currentTeam')->privateKeys = PrivateKey::where('team_id', session('currentTeam')->id)->get();
+        redirect()->route('private-key.show', $new_private_key->uuid);
     }
 }

resources/views/auth/login.blade.php

@@ -12,7 +12,7 @@
             <input type="text" name="email" placeholder="email" @env('local') value="[email protected]" @endenv
                 autofocus />
             <input type="password" name="password" placeho lder="Password" @env('local') value="password" @endenv />
-            <button type="submit">Login</button>
+            <x-inputs.button type="submit">Login</x-inputs.button>
         </form>
         @if ($errors->any())
             <div class="alert alert-danger">

resources/views/auth/register.blade.php

@@ -9,7 +9,7 @@
         <input type="password" name="password" placeholder="Password" @env('local') value="password" @endenv />
         <input type="password" name="password_confirmation" placeholder="Password"
             @env('local') value="password" @endenv />
-        <button type="submit">Register</button>
+        <x-inputs.button type="submit">Register</x-inputs.button>
     </form>
     @if ($errors->any())
         <div class="alert alert-danger">

resources/views/components/confirm-modal.blade.php

@@ -16,8 +16,8 @@
         <div class="flex flex-col items-center justify-center h-full">
             <div class="pb-5 text-white" x-text="message"></div>
             <div>
-                <button x-on:click="open = false">Cancel</button>
-                <button x-on:click="$dispatch('confirm')">Confirm</button>
+                <x-inputs.button x-on:click="$dispatch('confirm')">Confirm</x-inputs.button>
+                <x-inputs.button x-on:click="open = false">Cancel</x-inputs.button>
             </div>
         </div>
     </div>

resources/views/components/inputs/button.blade.php

@@ -0,0 +1,13 @@
+@props([
+    'defaultClass' => 'bg-indigo-500',
+    'confirm' => null,
+    'confirmAction' => null,
+])
+
+<button {{ $attributes }} {{ $attributes->merge(['class' => $defaultClass]) }}
+    @if ($attributes->whereStartsWith('wire:click')) wire:target="{{ $attributes->whereStartsWith('wire:click')->first() }}"
+    wire:loading.class="text-black bg-green-500" wire:loading.attr="disabled" wire:loading.class.remove="{{ $defaultClass }} {{ $attributes->whereStartsWith('class')->first() }}" @endif
+    @isset($confirm) x-on:click="toggleConfirmModal('{{ $confirm }}')" @endisset
+    @isset($confirmAction) @confirm.window="$wire.{{ $confirmAction }}()" @endisset>
+    {{ $slot }}
+</button>

resources/views/components/form-input.blade.php → resources/views/components/inputs/input.blade.php

@@ -1,3 +1,15 @@
+@props([
+    'id' => null,
+    'required' => false,
+    'readonly' => false,
+    'label' => null,
+    'type' => 'text',
+    'class' => '',
+    'instantSave' => false,
+    'disabled' => false,
+    'hidden' => false,
+])
+
 @if ($type === 'checkbox')
     <label for={{ $id }}>
         @if ($label)

resources/views/components/navbar.blade.php

@@ -11,7 +11,7 @@
         @endif
         <form action="/logout" method="POST">
             @csrf
-            <button type="submit">Logout</button>
+            <x-inputs.button type="submit">Logout</x-inputs.button>
         </form>
         <livewire:check-update />
         <livewire:force-upgrade />

resources/views/dashboard.blade.php

@@ -1,23 +1,31 @@
 <x-layout>
-    <h1>Projects <a href="{{ route('project.new') }}"><button>New</button></a></h1>
+    <h1>Projects <a href="{{ route('project.new') }}">
+            <x-inputs.button>New</x-inputs.button>
+        </a></h1>
     @forelse ($projects as $project)
         <a href="{{ route('project.environments', [$project->uuid]) }}">{{ data_get($project, 'name') }}</a>
     @empty
         <p>No projects found.</p>
     @endforelse
-    <h1>Servers <a href="{{ route('server.new') }}"><button>New</button></a></h1>
+    <h1>Servers <a href="{{ route('server.new') }}">
+            <x-inputs.button>New</x-inputs.button>
+        </a></h1>
     @forelse ($servers as $server)
         <a href="{{ route('server.show', [$server->uuid]) }}">{{ data_get($server, 'name') }}</a>
     @empty
         <p>No servers found.</p>
     @endforelse
-    <h1>Destinations <a href="{{ route('destination.new') }}"><button>New</button></a></h1>
+    <h1>Destinations <a href="{{ route('destination.new') }}">
+            <x-inputs.button>New</x-inputs.button>
+        </a></h1>
     @forelse ($destinations as $destination)
         <a href="{{ route('destination.show', [$destination->uuid]) }}">{{ data_get($destination, 'name') }}</a>
     @empty
         <p>No destinations found.</p>
     @endforelse
-    <h1>Private Keys <a href="{{ route('private-key.new') }}"><button>New</button></a></h1>
+    <h1>Private Keys <a href="{{ route('private-key.new') }}">
+            <x-inputs.button>New</x-inputs.button>
+        </a></h1>
     @forelse ($private_keys as $private_key)
         <a href="{{ route('private-key.show', [$private_key->uuid]) }}">{{ data_get($private_key, 'name') }}</a>
     @empty

resources/views/livewire/check-update.blade.php

@@ -1,6 +1,5 @@
 <div>
-    <button wire:loading.class="text-black bg-green-500" wire:loading.attr="disabled" wire:click='checkUpdate'>Check for
-        updates</button>
+    <x-inputs.button wire:click='checkUpdate' type="submit">Check for updates</x-inputs.button>
     @if ($updateAvailable)
         Update available
     @endif

resources/views/livewire/destination/new/standalone-docker.blade.php

@@ -1,15 +1,21 @@
 <div>
     <form class="flex flex-col" wire:submit.prevent='submit'>
-        <x-form-input id="name" label="Name" required />
-        <x-form-input id="network" label="Network" required />
-        <x-form-input id="server_id" label="Server ID" required />
+        <x-inputs.input id="name" label="Name" required />
+        <x-inputs.input id="network" label="Network" required />
+        <x-inputs.input id="server_id" label="Server ID" required />
         @foreach ($servers as $key)
-            <button @if ($server_id == $key->id) class="bg-green-500" @endif
-                wire:click.prevent="setServerId('{{ $key->id }}')">{{ $key->name }}</button>
+            @if ($server_id == $key->id)
+                <x-inputs.button class="bg-green-500" wire:click.prevent="setServerId('{{ $key->id }}')">
+                    {{ $key->name }}
+                </x-inputs.button>
+            @else
+                <x-inputs.button wire:click.prevent="setServerId('{{ $key->id }}')">{{ $key->name }}
+                </x-inputs.button>
+            @endif
         @endforeach
-        <button class="mt-4" type="submit">
+        <x-inputs.button class="mt-4" type="submit">
             Submit
-        </button>
+        </x-inputs.button>
     </form>
 
 </div>

resources/views/livewire/force-upgrade.blade.php

@@ -1,6 +1,5 @@
 <div>
     @if (auth()->user()->teams->contains(0))
-        <button wire:loading.class="text-black bg-green-500" wire:loading.attr="disabled" wire:click='upgrade'>Force
-            Upgrade</button>
+        <x-inputs.button wire:click='upgrade'>Force Upgrade</x-inputs.button>
     @endif
 </div>

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

@@ -1,14 +1,14 @@
 <div>
     <form class="flex flex-col gap-2 w-96" wire:submit.prevent='changePrivateKey'>
-        <x-form-input id="private_key_name" label="Name" required />
-        <x-form-input id="private_key_description" label="Longer Description" />
-        <x-form-input type="textarea" id="private_key_value" label="Private Key" required />
-        <button type="submit">
+        <x-inputs.input id="private_key_name" label="Name" required />
+        <x-inputs.input id="private_key_description" label="Longer Description" />
+        <x-inputs.input type="textarea" id="private_key_value" label="Private Key" required />
+        <x-inputs.button type="submit">
             Submit
-        </button>
-        <button class="bg-red-500" @confirm.window="$wire.delete('{{ $private_key_uuid }}')"
-            x-on:click="toggleConfirmModal('Are you sure you would like to delete this application?')">
+        </x-inputs.button>
+        <x-inputs.button class="bg-red-500" confirm='Are you sure you would like to delete this private key?'
+            confirmAction="delete('{{ $private_key_uuid }}')">
             Delete
-        </button>
+        </x-inputs.button>
     </form>
 </div>

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

@@ -1,10 +1,10 @@
 <div>
     <form class="flex flex-col gap-2 w-96" wire:submit.prevent='createPrivateKey'>
-        <x-form-input id="private_key_name" label="Name" required />
-        <x-form-input id="private_key_description" label="Longer Description" />
-        <x-form-input type="textarea" id="private_key_value" label="Private Key" required />
-        <button type="submit">
+        <x-inputs.input id="private_key_name" label="Name" required />
+        <x-inputs.input id="private_key_description" label="Longer Description" />
+        <x-inputs.input type="textarea" id="private_key_value" label="Private Key" required />
+        <x-inputs.button type="submit">
             Submit
-        </button>
+        </x-inputs.button>
     </form>
 </div>

resources/views/livewire/project/application/deploy.blade.php

@@ -1,15 +1,16 @@
 <div>
-    <button class="bg-red-500" @confirm.window="$wire.delete()"
-        x-on:click="toggleConfirmModal('Are you sure you would like to delete this application?')">
-        Delete</button>
+
     @if ($application->status === 'running')
-        <button wire:click='start'>Restart</button>
-        <button wire:click='forceRebuild'>Force Rebuild</button>
+        <x-inputs.button wire:click='start'>Restart</x-inputs.button>
+        <x-inputs.button wire:click='forceRebuild'>Force Rebuild</x-inputs.button>
+        <x-inputs.button wire:click='stop'>Stop</x-inputs.button>
     @else
-        <button wire:click='start'>Start</button>
-        <button wire:click='forceRebuild'>Start (no cache)</button>
+        <x-inputs.button wire:click='start'>Start</x-inputs.button>
+        <x-inputs.button wire:click='forceRebuild'>Start (no cache)</x-inputs.button>
     @endif
-    <button wire:click='stop'>Stop</button>
+    <x-inputs.button class="bg-red-500" confirmAction="delete"
+        confirm='Are you sure you would like to delete this application?'>
+        Delete</x-inputs.button>
     <span wire:poll.5000ms='pollingStatus'>
         @if ($application->status === 'running')
             @if (data_get($application, 'fqdn'))

resources/views/livewire/project/application/general.blade.php

@@ -2,51 +2,51 @@
     <form wire:submit.prevent='submit' class="flex flex-col">
         <div class="flex flex-col gap-2 xl:flex-row">
             <div class="flex flex-col w-96">
-                <x-form-input id="application.name" label="Name" required />
-                <x-form-input id="application.fqdn" label="FQDN" />
+                <x-inputs.input id="application.name" label="Name" required />
+                <x-inputs.input id="application.fqdn" label="FQDN" />
             </div>
             <div class="flex flex-col w-96">
-                <x-form-input id="application.install_command" label="Install Command" />
-                <x-form-input id="application.build_command" label="Build Command" />
-                <x-form-input id="application.start_command" label="Start Command" />
-                <x-form-input id="application.build_pack" label="Build Pack" />
+                <x-inputs.input id="application.install_command" label="Install Command" />
+                <x-inputs.input id="application.build_command" label="Build Command" />
+                <x-inputs.input id="application.start_command" label="Start Command" />
+                <x-inputs.input id="application.build_pack" label="Build Pack" />
                 @if ($application->settings->is_static)
-                    <x-form-input id="application.static_image" label="Static Image" required />
+                    <x-inputs.input id="application.static_image" label="Static Image" required />
                 @endif
             </div>
             <div class="flex flex-col w-96">
 
-                <x-form-input id="application.base_directory" label="Base Directory" />
+                <x-inputs.input id="application.base_directory" label="Base Directory" />
                 @if ($application->settings->is_static)
-                    <x-form-input id="application.publish_directory" label="Publish Directory" required />
+                    <x-inputs.input id="application.publish_directory" label="Publish Directory" required />
                 @else
-                    <x-form-input id="application.publish_directory" label="Publish Directory" />
+                    <x-inputs.input id="application.publish_directory" label="Publish Directory" />
                 @endif
 
             </div>
             <div class="flex flex-col w-96">
                 @if ($application->settings->is_static)
-                    <x-form-input id="application.ports_exposes" label="Ports Exposes" disabled />
+                    <x-inputs.input id="application.ports_exposes" label="Ports Exposes" disabled />
                 @else
-                    <x-form-input id="application.ports_exposes" label="Ports Exposes" required />
+                    <x-inputs.input id="application.ports_exposes" label="Ports Exposes" required />
                 @endif
 
-                <x-form-input id="application.ports_mappings" label="Ports Mappings" />
+                <x-inputs.input id="application.ports_mappings" label="Ports Mappings" />
             </div>
         </div>
-        <button class="flex mx-auto mt-4" type="submit">
+        <x-inputs.button class="flex mx-auto mt-4" type="submit">
             Submit
-        </button>
+        </x-inputs.button>
     </form>
     <div class="flex flex-col pt-4 text-right w-52">
-        <x-form-input instantSave type="checkbox" id="is_static" label="Static website?" />
-        <x-form-input instantSave type="checkbox" id="is_auto_deploy" label="Auto Deploy?" />
-        <x-form-input instantSave type="checkbox" id="is_dual_cert" label="Dual Certs?" />
-        <x-form-input instantSave type="checkbox" id="is_previews" label="Previews?" />
-        <x-form-input instantSave type="checkbox" id="is_custom_ssl" label="Is Custom SSL?" />
-        <x-form-input instantSave type="checkbox" id="is_http2" label="Is Http2?" />
-        <x-form-input instantSave type="checkbox" id="is_git_submodules_allowed" label="Git Submodules Allowed?" />
-        <x-form-input instantSave type="checkbox" id="is_git_lfs_allowed" label="Git LFS Allowed?" />
-        <x-form-input instantSave type="checkbox" id="is_debug" label="Debug" />
+        <x-inputs.input instantSave type="checkbox" id="is_static" label="Static website?" />
+        <x-inputs.input instantSave type="checkbox" id="is_auto_deploy" label="Auto Deploy?" />
+        <x-inputs.input instantSave type="checkbox" id="is_dual_cert" label="Dual Certs?" />
+        <x-inputs.input instantSave type="checkbox" id="is_previews" label="Previews?" />
+        <x-inputs.input instantSave type="checkbox" id="is_custom_ssl" label="Is Custom SSL?" />
+        <x-inputs.input instantSave type="checkbox" id="is_http2" label="Is Http2?" />
+        <x-inputs.input instantSave type="checkbox" id="is_git_submodules_allowed" label="Git Submodules Allowed?" />
+        <x-inputs.input instantSave type="checkbox" id="is_git_lfs_allowed" label="Git LFS Allowed?" />
+        <x-inputs.input instantSave type="checkbox" id="is_debug" label="Debug" />
     </div>
 </div>

resources/views/livewire/project/application/source.blade.php

@@ -1,9 +1,9 @@
 <div>
-    <p>Source Name: {{ data_get($application,'source.name') }}</p>
-    <p>Is Public Source: {{ data_get($application,'source.is_public') }}</p>
+    <p>Source Name: {{ data_get($application, 'source.name') }}</p>
+    <p>Is Public Source: {{ data_get($application, 'source.is_public') }}</p>
     <div class="flex flex-col w-96">
-        <x-form-input id="application.git_repository" label="Git Repository" readonly />
-        <x-form-input id="application.git_branch" label="Git Branch" readonly />
-        <x-form-input id="application.git_commit_sha" label="Git Commit SHA" readonly />
+        <x-inputs.input id="application.git_repository" label="Git Repository" readonly />
+        <x-inputs.input id="application.git_branch" label="Git Branch" readonly />
+        <x-inputs.input id="application.git_commit_sha" label="Git Commit SHA" readonly />
     </div>
 </div>

resources/views/livewire/project/new/empty-project.blade.php

@@ -1 +1 @@
-<button wire:click='createEmptyProject'>Empty Project</button>
+<x-inputs.button wire:click='createEmptyProject'>Empty Project</x-inputs.button>