fix: move s3 storages to separate view

resources/views/livewire/storage/create.blade.php

@@ -0,0 +1,22 @@
+<div>
+    <div class="subtitle">S3 Storage used to save backups / files.</div>
+    <form class="flex flex-col gap-2" wire:submit='submit'>
+        <div class="flex gap-2">
+            <x-forms.input label="Name" id="name" />
+            <x-forms.input label="Description" id="description" />
+        </div>
+        <div class="flex gap-2">
+            <x-forms.input type="url" label="Endpoint" id="endpoint" />
+            <x-forms.input required label="Bucket" id="bucket" />
+            <x-forms.input required label="Region" id="region" />
+        </div>
+        <div class="flex gap-2">
+            <x-forms.input required type="password" label="Access Key" id="key" />
+            <x-forms.input required type="password" label="Secret Key" id="secret" />
+        </div>
+
+        <x-forms.button type="submit">
+            Validate Connection & Continue
+        </x-forms.button>
+    </form>
+</div>

resources/views/livewire/storage/form.blade.php

@@ -0,0 +1,37 @@
+<div>
+    <form class="flex flex-col gap-2 pb-6" wire:submit='submit'>
+        <div class="flex items-start gap-2">
+            <div class="pb-4">
+                <h1>Storage Details</h1>
+                <div class="subtitle">{{ $storage->name }}</div>
+                @if ($storage->is_usable)
+                    <div>Usable</div>
+                @else
+                    <div class="text-red-500">Not Usable</div>
+                @endif
+            </div>
+            <x-forms.button type="submit">
+                Save
+            </x-forms.button>
+            <x-forms.button wire:click="test_s3_connection">
+                Validate Connection
+            </x-forms.button>
+            <x-modal-confirmation isErrorButton buttonTitle="Delete">
+                This storage will be deleted. It is not reversible. Your data won't be touched!<br>Please think again.
+            </x-modal-confirmation>
+        </div>
+        <div class="flex gap-2">
+            <x-forms.input label="Name" id="storage.name" />
+            <x-forms.input label="Description" id="storage.description" />
+        </div>
+        <div class="flex gap-2">
+            <x-forms.input required label="Endpoint" id="storage.endpoint" />
+            <x-forms.input required label="Bucket" id="storage.bucket" />
+            <x-forms.input required label="Region" id="storage.region" />
+        </div>
+        <div class="flex gap-2">
+            <x-forms.input required type="password" label="Access Key" id="storage.key" />
+            <x-forms.input required type="password" label="Secret Key" id="storage.secret" />
+        </div>
+    </form>
+</div>

resources/views/livewire/storage/index.blade.php

@@ -0,0 +1,31 @@
+<div>
+    <div class="flex items-start gap-2">
+        <h1>S3 Storages</h1>
+        <x-modal-input buttonTitle="+ Add" title="New S3 Storage">
+            <livewire:storage.create />
+        </x-modal-input>
+    </div>
+    <div class="subtitle">S3 storages for backups.</div>
+    <div class="grid gap-2 lg:grid-cols-2">
+        @forelse ($s3 as $storage)
+            <div x-data x-on:click="goto('{{ $storage->uuid }}')" @class(['gap-2 border cursor-pointer box group border-transparent'])>
+                <div class="flex flex-col mx-6">
+                    <div class="box-title">
+                        {{ $storage->name }}
+                    </div>
+                    <div class="box-description">
+                        {{ $storage->description }}</div>
+                </div>
+            </div>
+        @empty
+            <div>
+                <div>No storage found.</div>
+            </div>
+        @endforelse
+    </div>
+    <script>
+        function goto(uuid) {
+            window.location.href = '/storages/' + uuid;
+        }
+    </script>
+</div>

resources/views/livewire/storage/show.blade.php

@@ -0,0 +1,3 @@
+<div>
+    <livewire:storage.form :storage="$storage" />
+</div>