From 95b78157ad7e483edaa6a44ac0d1e73ebe9e6ae3 Mon Sep 17 00:00:00 2001
From: Ivo Oskamp <ivooskamp@oskamp.info>
Date: Fri, 6 Feb 2026 16:59:02 +0100
Subject: [PATCH] Reorganize Autotask settings with separate save buttons and
 validation

Split Autotask settings into two separate forms with dedicated save
buttons and field validation:

1. Autotask Settings form:
   - Save button inside card for better UX
   - Required fields: Environment, Username, Password (if not set),
     Tracking Identifier, Base URL
   - Red asterisks indicate required fields

2. Ticket Defaults form:
   - Separate save button inside card
   - Required fields: Queue, Ticket Source, Status, Priority Warning,
     Priority Error
   - Prevents saving incomplete configurations

Benefits:
- Clear visual separation of concerns
- Prevents accidental saving of empty values
- HTML5 validation ensures all required fields are filled
- Better user experience with focused save actions

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../src/templates/main/settings.html          | 67 ++++++++++---------
 1 file changed, 37 insertions(+), 30 deletions(-)

diff --git a/containers/backupchecks/src/templates/main/settings.html b/containers/backupchecks/src/templates/main/settings.html
index 39121e0..98b10e7 100644
--- a/containers/backupchecks/src/templates/main/settings.html
+++ b/containers/backupchecks/src/templates/main/settings.html
@@ -342,7 +342,7 @@
 
 
 {% if section == 'integrations' %}
-<form method="post" class="mb-4">
+<form method="post" class="mb-4" id="autotask-settings-form">
   <div class="card mb-3">
     <div class="card-header">Autotask</div>
     <div class="card-body">
@@ -353,9 +353,9 @@
 
       <div class="row g-3">
         <div class="col-md-4">
-          <label for="autotask_environment" class="form-label">Environment</label>
-          <select class="form-select" id="autotask_environment" name="autotask_environment">
-            <option value="" {% if not settings.autotask_environment %}selected{% endif %}>Select...</option>
+          <label for="autotask_environment" class="form-label">Environment <span class="text-danger">*</span></label>
+          <select class="form-select" id="autotask_environment" name="autotask_environment" required>
+            <option value="">Select...</option>
             <option value="sandbox" {% if settings.autotask_environment == 'sandbox' %}selected{% endif %}>Sandbox</option>
             <option value="production" {% if settings.autotask_environment == 'production' %}selected{% endif %}>Production</option>
           </select>
@@ -363,44 +363,51 @@
         </div>
 
         <div class="col-md-4">
-          <label for="autotask_api_username" class="form-label">API Username</label>
-          <input type="text" class="form-control" id="autotask_api_username" name="autotask_api_username" value="{{ settings.autotask_api_username or '' }}" />
+          <label for="autotask_api_username" class="form-label">API Username <span class="text-danger">*</span></label>
+          <input type="text" class="form-control" id="autotask_api_username" name="autotask_api_username" value="{{ settings.autotask_api_username or '' }}" required />
         </div>
 
         <div class="col-md-4">
-          <label for="autotask_api_password" class="form-label">API Password</label>
+          <label for="autotask_api_password" class="form-label">API Password {% if not has_autotask_password %}<span class="text-danger">*</span>{% endif %}</label>
           <input
             type="password"
             class="form-control"
             id="autotask_api_password"
             name="autotask_api_password"
             placeholder="{% if has_autotask_password %}******** (stored){% else %}enter password{% endif %}"
+            {% if not has_autotask_password %}required{% endif %}
           />
           <div class="form-text">Leave empty to keep the existing password.</div>
         </div>
 
         <div class="col-md-6">
-          <label for="autotask_tracking_identifier" class="form-label">Tracking Identifier (Integration Code)</label>
-          <input type="text" class="form-control" id="autotask_tracking_identifier" name="autotask_tracking_identifier" value="{{ settings.autotask_tracking_identifier or '' }}" />
+          <label for="autotask_tracking_identifier" class="form-label">Tracking Identifier (Integration Code) <span class="text-danger">*</span></label>
+          <input type="text" class="form-control" id="autotask_tracking_identifier" name="autotask_tracking_identifier" value="{{ settings.autotask_tracking_identifier or '' }}" required />
         </div>
 
         <div class="col-md-6">
-          <label for="autotask_base_url" class="form-label">Backupchecks Base URL</label>
-          <input type="text" class="form-control" id="autotask_base_url" name="autotask_base_url" value="{{ settings.autotask_base_url or '' }}" placeholder="https://backupchecks.example.com" />
+          <label for="autotask_base_url" class="form-label">Backupchecks Base URL <span class="text-danger">*</span></label>
+          <input type="url" class="form-control" id="autotask_base_url" name="autotask_base_url" value="{{ settings.autotask_base_url or '' }}" placeholder="https://backupchecks.example.com" required />
           <div class="form-text">Required later for creating stable links to Job Details pages.</div>
         </div>
       </div>
+
+      <div class="d-flex justify-content-end mt-3">
+        <button type="submit" class="btn btn-primary">Save Autotask Settings</button>
+      </div>
     </div>
   </div>
+</form>
 
+<form method="post" class="mb-4" id="ticket-defaults-form">
   <div class="card mb-3">
     <div class="card-header">Ticket defaults</div>
     <div class="card-body">
       <div class="row g-3">
         <div class="col-md-6">
-          <label for="autotask_default_queue_id" class="form-label">Default Queue</label>
-          <select class="form-select" id="autotask_default_queue_id" name="autotask_default_queue_id">
-            <option value="" {% if not settings.autotask_default_queue_id %}selected{% endif %}>Select...</option>
+          <label for="autotask_default_queue_id" class="form-label">Default Queue <span class="text-danger">*</span></label>
+          <select class="form-select" id="autotask_default_queue_id" name="autotask_default_queue_id" required>
+            <option value="">Select...</option>
             {% for q in autotask_queues %}
               <option value="{{ q.id }}" {% if settings.autotask_default_queue_id == q.id %}selected{% endif %}>{{ q.name }}</option>
             {% endfor %}
@@ -409,9 +416,9 @@
         </div>
 
         <div class="col-md-6">
-          <label for="autotask_default_ticket_source_id" class="form-label">Ticket Source</label>
-          <select class="form-select" id="autotask_default_ticket_source_id" name="autotask_default_ticket_source_id">
-            <option value="" {% if not settings.autotask_default_ticket_source_id %}selected{% endif %}>Select...</option>
+          <label for="autotask_default_ticket_source_id" class="form-label">Ticket Source <span class="text-danger">*</span></label>
+          <select class="form-select" id="autotask_default_ticket_source_id" name="autotask_default_ticket_source_id" required>
+            <option value="">Select...</option>
             {% for s in autotask_ticket_sources %}
               <option value="{{ s.id }}" {% if settings.autotask_default_ticket_source_id == s.id %}selected{% endif %}>{{ s.name }}</option>
             {% endfor %}
@@ -420,9 +427,9 @@
         </div>
 
         <div class="col-md-6">
-          <label for="autotask_default_ticket_status" class="form-label">Default Ticket Status</label>
-          <select class="form-select" id="autotask_default_ticket_status" name="autotask_default_ticket_status">
-            <option value="" {% if not settings.autotask_default_ticket_status %}selected{% endif %}>Select...</option>
+          <label for="autotask_default_ticket_status" class="form-label">Default Ticket Status <span class="text-danger">*</span></label>
+          <select class="form-select" id="autotask_default_ticket_status" name="autotask_default_ticket_status" required>
+            <option value="">Select...</option>
             {% for st in autotask_ticket_statuses %}
               <option value="{{ st.id }}" {% if settings.autotask_default_ticket_status == st.id %}selected{% endif %}>{{ st.name }}</option>
             {% endfor %}
@@ -431,9 +438,9 @@
         </div>
 
         <div class="col-md-6">
-          <label for="autotask_priority_warning" class="form-label">Priority for Warning</label>
-          <select class="form-select" id="autotask_priority_warning" name="autotask_priority_warning">
-            <option value="" {% if not settings.autotask_priority_warning %}selected{% endif %}>Select...</option>
+          <label for="autotask_priority_warning" class="form-label">Priority for Warning <span class="text-danger">*</span></label>
+          <select class="form-select" id="autotask_priority_warning" name="autotask_priority_warning" required>
+            <option value="">Select...</option>
             {% for p in autotask_priorities %}
               <option value="{{ p.id }}" {% if settings.autotask_priority_warning == p.id %}selected{% endif %}>{{ p.name }}</option>
             {% endfor %}
@@ -442,9 +449,9 @@
         </div>
 
         <div class="col-md-6">
-          <label for="autotask_priority_error" class="form-label">Priority for Error</label>
-          <select class="form-select" id="autotask_priority_error" name="autotask_priority_error">
-            <option value="" {% if not settings.autotask_priority_error %}selected{% endif %}>Select...</option>
+          <label for="autotask_priority_error" class="form-label">Priority for Error <span class="text-danger">*</span></label>
+          <select class="form-select" id="autotask_priority_error" name="autotask_priority_error" required>
+            <option value="">Select...</option>
             {% for p in autotask_priorities %}
               <option value="{{ p.id }}" {% if settings.autotask_priority_error == p.id %}selected{% endif %}>{{ p.name }}</option>
             {% endfor %}
@@ -453,11 +460,11 @@
         </div>
       </div>
       <div class="form-text mt-2">Priorities are loaded from Autotask to avoid manual ID mistakes.</div>
-    </div>
-  </div>
 
-  <div class="d-flex justify-content-end mt-3">
-    <button type="submit" class="btn btn-primary">Save settings</button>
+      <div class="d-flex justify-content-end mt-3">
+        <button type="submit" class="btn btn-primary">Save Ticket Defaults</button>
+      </div>
+    </div>
   </div>
 </form>