ivooskamp/backupchecks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reorganize Autotask settings with separate save buttons and validation

Browse Source 
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>
This commit is contained in:
Ivo Oskamp 2026-02-06 16:59:02 +01:00
parent 17b64d1f66
commit 95b78157ad
1 changed files with 37 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
containers/backupchecks/src/templates/main/settings.html
View File

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