feat(ui): Add ssl settings to Postgres ui

app/Livewire/Project/Database/Postgresql/General.php

@@ -48,6 +48,8 @@ class General extends Component
         'database.public_port' => 'nullable|integer',
         'database.is_log_drain_enabled' => 'nullable|boolean',
         'database.custom_docker_run_options' => 'nullable',
+        'database.enable_ssl' => 'boolean',
+        'database.ssl_mode' => 'nullable|string|in:allow,prefer,require,verify-ca,verify-full',
     ];
 
     protected $validationAttributes = [
@@ -65,6 +67,8 @@ class General extends Component
         'database.is_public' => 'Is Public',
         'database.public_port' => 'Public Port',
         'database.custom_docker_run_options' => 'Custom Docker Run Options',
+        'database.enable_ssl' => 'Enable SSL',
+        'database.ssl_mode' => 'SSL Mode',
     ];
 
     public function mount()
@@ -91,6 +95,18 @@ class General extends Component
         }
     }
 
+    public function instantSaveSSL()
+    {
+        try {
+            $this->database->enable_ssl = $this->database->enable_ssl;
+            $this->database->ssl_mode = $this->database->ssl_mode;
+            $this->database->save();
+            $this->dispatch('success', 'SSL configuration updated.');
+        } catch (Exception $e) {
+            return handleError($e, $this);
+        }
+    }
+
     public function instantSave()
     {
         try {

resources/views/livewire/project/database/postgresql/general.blade.php

@@ -73,10 +73,26 @@
                     type="password" readonly wire:model="db_url_public" />
             @endif
         </div>
-        <div>
+        <div class="flex flex-col gap-2">
-            <div class="flex flex-col py-2 w-64">
+            <h3 class="py-2">SSL Configuration</h3>
-                <div class="flex items-center gap-2 pb-2">
+            <div class="flex flex-col gap-2">
-                    <div class="flex items-center">
+                <x-forms.checkbox id="database.enable_ssl" label="Enable SSL" wire:model.live="database.enable_ssl" instantSave="instantSaveSSL" />
+                @if($database->enable_ssl)
+                    <x-forms.select id="database.ssl_mode" label="SSL Mode" wire:model.live="database.ssl_mode" instantSave="instantSaveSSL"
+                        helper="Choose the SSL verification mode for PostgreSQL connections">
+                        <option value="allow">allow</option>
+                        <option value="prefer">prefer</option>
+                        <option value="require">require</option>
+                        <option value="verify-ca">verify-ca</option>
+                        <option value="verify-full">verify-full</option>
+                    </x-forms.select>
+                @endif
+            </div>
+        </div>
+
+        <div class="flex flex-col gap-2">
+            <div class="flex items-center justify-between py-2">
+                <div class="flex items-center gap-2">
                     <h3>Proxy</h3>
                     <x-loading wire:loading wire:target="instantSave" />
                 </div>
@@ -92,20 +108,27 @@
                     </x-slide-over>
                 @endif
             </div>
+            <div class="flex flex-col gap-2">
                 <x-forms.checkbox instantSave id="database.is_public" label="Make it publicly available" />
-            </div>
                 <x-forms.input placeholder="5432" disabled="{{ data_get($database, 'is_public') }}"
                     id="database.public_port" label="Public Port" />
             </div>
+        </div>
+
+        <div class="flex flex-col gap-2">
             <x-forms.textarea label="Custom PostgreSQL Configuration" rows="10" id="database.postgres_conf" />
+        </div>
     </form>
-    <h3 class="pt-4">Advanced</h3>
+
+    <div class="flex flex-col gap-4 pt-4">
+        <h3>Advanced</h3>
         <div class="flex flex-col">
             <x-forms.checkbox helper="Drain logs to your configured log drain endpoint in your Server settings."
                 instantSave="instantSaveAdvanced" id="database.is_log_drain_enabled" label="Drain Logs" />
         </div>
+
         <div class="pb-16">
-        <div class="flex gap-2 pt-4 pb-2">
+            <div class="flex items-center gap-2 pb-2">
                 <h3>Initialization scripts</h3>
                 <x-modal-input buttonTitle="+ Add" title="New Init Script">
                     <form class="flex flex-col w-full gap-2 rounded" wire:submit='save_new_init_script'>
@@ -126,5 +149,5 @@
                 @endforelse
             </div>
         </div>
-
+    </div>
 </div>