Able to backup Coolify itself

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

@@ -15,4 +15,9 @@
         @if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} @else wire:model.defer={{ $id }} @endif>
         {{ $slot }}
     </select>
+    @error($id)
+    <label class="label">
+        <span class="text-red-500 label-text-alt">{{ $message }}</span>
+    </label>
+    @enderror
 </div>

resources/views/components/settings/navbar.blade.php

@@ -1,15 +1,11 @@
-<div class="pb-6">
+<div class="pb-5">
     <h1>Settings</h1>
-    <div class="pt-2 pb-10 ">Instance wide settings for Coolify.</div>
+    <div class="pt-2 pb-10">Instance wide settings for Coolify.</div>
     <nav class="navbar-main">
         <a class="{{ request()->routeIs('settings.configuration') ? 'text-white' : '' }}"
            href="{{ route('settings.configuration') }}">
             <button>Configuration</button>
         </a>
-        <a class="{{ request()->routeIs('settings.emails') ? 'text-white' : '' }}"
-           href="{{ route('settings.emails') }}">
-            <button>SMTP</button>
-        </a>
         @if (is_cloud())
             <a class="{{ request()->routeIs('settings.license') ? 'text-white' : '' }}"
                href="{{ route('settings.license') }}">

resources/views/livewire/project/database/backup-edit.blade.php

@@ -4,12 +4,24 @@
         <x-forms.button type="submit">
             Save
         </x-forms.button>
-        <x-forms.button isError wire:click="delete">Delete</x-forms.button>
+        @if ($backup->database_id !== 0)
+            <x-forms.button isError wire:click="delete">Delete</x-forms.button>
+        @endif
     </div>
-    <div class="flex py-2 gap-10">
-        <x-forms.checkbox instantSave label="Enabled" id="backup.enabled"/>
-        <x-forms.checkbox instantSave label="Save to S3" id="backup.save_s3"/>
+    <div class="w-32 pb-2">
+        <x-forms.checkbox instantSave label="Backup Enabled" id="backup.enabled"/>
+        <x-forms.checkbox instantSave label="S3 Enabled" id="backup.save_s3"/>
     </div>
+    @if($backup->save_s3)
+        <div class="pb-6">
+            <x-forms.select id="backup.s3_storage_id" label="S3 Storage" required>
+                <option value="default" disabled>Select a S3 storage</option>
+                @foreach($s3s as $s3)
+                    <option value="{{ $s3->id }}">{{ $s3->name }}</option>
+                @endforeach
+            </x-forms.select>
+        </div>
+    @endif
     <div class="flex gap-2">
         <x-forms.input label="Frequency" id="backup.frequency"/>
         <x-forms.input label="Number of backups to keep (locally)" id="backup.number_of_backups_locally"/>

resources/views/livewire/project/database/create-scheduled-backup.blade.php

@@ -1,7 +1,14 @@
 <dialog id="createScheduledBackup" class="modal">
     <form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit.prevent='submit'>
+        <h3>Details</h3>
         <x-forms.input placeholder="1 * * * *" id="frequency" label="Frequency" required/>
-        <x-forms.checkbox id="save_s3" label="Save to preconfigured S3"/>
+        <h3>S3 Storage</h3>
+        <x-forms.checkbox id="save_s3" label="Save to S3"/>
+        <x-forms.select label="S3 Storages" id="selected_storage_id">
+            @foreach($s3s as $s3)
+                <option value="{{ $s3->id }}">{{ $s3->name }}</option>
+            @endforeach
+        </x-forms.select>
         <x-forms.button onclick="createScheduledBackup.close()" type="submit">
             Save
         </x-forms.button>

resources/views/livewire/settings/backup.blade.php

@@ -0,0 +1,34 @@
+<div>
+    <div class="flex flex-col">
+        <div class="flex items-center gap-2">
+            <h2>Backup</h2>
+            @if(isset($database))
+                <x-forms.button type="submit" wire:click="submit">
+                    Save
+                </x-forms.button>
+                <x-forms.button wire:click="backup_now">Backup Now</x-forms.button>
+            @endif
+        </div>
+        <div class="pb-4">Backup your Coolify instance settings</div>
+        <div>
+            @if(isset($database))
+                <div class="flex flex-col gap-3 pb-4">
+                    <div class="flex gap-2">
+                        <x-forms.input label="UUID" readonly id="database.uuid"/>
+                        <x-forms.input label="Name" readonly id="database.name"/>
+                        <x-forms.input label="Description" id="database.description"/>
+                    </div>
+                    <div class="flex gap-2">
+                        <x-forms.input label="User" readonly id="database.postgres_user"/>
+                        <x-forms.input type="password" label="Password" readonly id="database.postgres_password"/>
+                    </div>
+                </div>
+                <livewire:project.database.backup-edit :backup="$backup" :s3s="$s3s"/>
+            @else
+                To configure automatic backup for your Coolify instance, you first need to add as a database resource
+                into Coolify.
+                <x-forms.button wire:click="add_coolify_database">Add Database</x-forms.button>
+            @endif
+        </div>
+    </div>
+</div>

resources/views/livewire/settings/configuration.blade.php

@@ -1,11 +1,13 @@
 <div>
     <form wire:submit.prevent='submit' class="flex flex-col">
         <div class="flex items-center gap-2">
-            <h3>Configuration</h3>
+            <h2>Configuration</h2>
             <x-forms.button type="submit">
                 Save
             </x-forms.button>
         </div>
+        <div class="">General configuration for your Coolify instance.</div>
+
         <div class="flex flex-col gap-2 pt-4">
             <div class="flex gap-2 w-96">
                 <x-forms.input id="settings.fqdn" label="Instance's Domain" placeholder="https://coolify.io"/>

resources/views/livewire/settings/email.blade.php

@@ -12,7 +12,7 @@
     </dialog>
     <form wire:submit.prevent='submit' class="flex flex-col pb-10">
         <div class="flex items-center gap-2">
-            <h3>Transactional Emails</h3>
+            <h2>Transactional Emails</h2>
             <x-forms.button type="submit">
                 Save
             </x-forms.button>
@@ -23,7 +23,7 @@
                 </x-forms.button>
             @endif
         </div>
-        <div class="pt-2 pb-4 ">SMTP settings for password resets, invitations, etc.</div>
+        <div class="pb-4 ">SMTP settings for password resets, invitations, etc.</div>
         <div class="w-32 pb-4">
             <x-forms.checkbox instantSave id="settings.smtp_enabled" label="Enabled"/>
         </div>

resources/views/project/database/backups/all.blade.php

@@ -11,8 +11,7 @@
             </x-forms.button>
         </x-slot:modalSubmit>
     </x-modal>
-
-    <livewire:project.database.create-scheduled-backup :database="$database"/>
+    <livewire:project.database.create-scheduled-backup :database="$database" :s3s="$s3s"/>
     <div class="pt-6">
         <div class="flex gap-2 ">
             <h2 class="pb-4">Scheduled Backups</h2>

resources/views/project/database/backups/executions.blade.php

@@ -12,7 +12,7 @@
         </x-slot:modalSubmit>
     </x-modal>
     <div class="pt-6">
-        <livewire:project.database.backup-edit :backup="$backup"/>
+        <livewire:project.database.backup-edit :backup="$backup" :s3s="$s3s"/>
         <h3 class="py-4">Executions</h3>
         <livewire:project.database.backup-executions :backup="$backup" :executions="$executions"/>
     </div>

resources/views/project/service.blade.php

@@ -1,5 +0,0 @@
-<x-layout>
-    <h1>Service</h1>
-
-
-</x-layout>

resources/views/settings/configuration.blade.php

@@ -1,4 +1,25 @@
 <x-layout>
     <x-settings.navbar/>
-    <livewire:settings.configuration :settings="$settings"/>
+    <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'general' }"
+         class="flex h-full pt-1">
+        <div class="flex flex-col gap-4 min-w-fit">
+            <a :class="activeTab === 'general' && 'text-white'"
+               @click.prevent="activeTab = 'general'; window.location.hash = 'general'" href="#">General</a>
+            <a :class="activeTab === 'backup' && 'text-white'"
+               @click.prevent="activeTab = 'backup'; window.location.hash = 'backup'" href="#">Backup</a>
+            <a :class="activeTab === 'smtp' && 'text-white'"
+               @click.prevent="activeTab = 'smtp'; window.location.hash = 'smtp'" href="#">SMTP</a>
+        </div>
+        <div class="w-full pl-8">
+            <div x-cloak x-show="activeTab === 'general'" class="h-full">
+                <livewire:settings.configuration :settings="$settings"/>
+            </div>
+            <div x-cloak x-show="activeTab === 'backup'" class="h-full">
+                <livewire:settings.backup :settings="$settings" :database="$database" :backup="$backup" :s3s="$s3s"/>
+            </div>
+            <div x-cloak x-show="activeTab === 'smtp'" class="h-full">
+                <livewire:settings.email :settings="$settings"/>
+            </div>
+        </div>
+    </div>
 </x-layout>

resources/views/settings/emails.blade.php

@@ -1,4 +0,0 @@
-<x-layout>
-    <x-settings.navbar/>
-    <livewire:settings.email :settings="$settings"/>
-</x-layout>

resources/views/settings/license.blade.php

@@ -1,5 +1,5 @@
 <x-layout-subscription>
     <x-settings.navbar/>
-    <h3>Resale License</h3>
+    <h2>Resale License</h2>
     <livewire:check-license/>
 </x-layout-subscription>