Fix admin settings UI issues: toggle switches and button text

PROBLEMS FIXED:

1. Toggle Switches Not Synced with Current Status:
   - Template was checking for string 'true' but SystemSettings returns boolean values
   - Updated all boolean checks to handle both boolean True and string 'true'
   - Fixed registration_enabled and maintenance_mode toggle switches
   - Fixed badge status displays in both quick settings cards and table

2. Action Buttons Showing as Blue Rectangles Without Text:
   - Buttons only had icons (<i class='fas fa-edit'></i>) without visible text
   - Added visible text labels: 'Edit' and 'Delete' alongside icons
   - Added title attributes for better user experience and accessibility
   - Maintained icon + text combination for better UX

TECHNICAL CHANGES:

Template Updates (app/templates/main/admin_settings.html):
- Line 40: Updated registration toggle check to handle both boolean and string
- Line 48-49: Updated registration status badge logic
- Line 67: Updated maintenance toggle check to handle both boolean and string
- Line 75-76: Updated maintenance status badge logic
- Line 113: Updated table value badge logic for boolean settings
- Line 142-143: Added 'Edit' text to edit buttons with title attribute
- Line 147-148: Added 'Delete' text to delete buttons with title attribute

COMPATIBILITY:
- Handles both boolean (True/False) and string ('true'/'false') values
- Maintains backward compatibility with existing SystemSettings data
- Works regardless of how the settings are stored or retrieved

USER EXPERIENCE IMPROVEMENTS:
- Toggle switches now correctly reflect the actual setting status
- Action buttons are clearly labeled and accessible
- Tooltips provide additional context for button actions
- Consistent styling with Bootstrap 5 framework

Both reported issues are now resolved and the admin settings interface should work correctly.
parent e2a8aafd
......@@ -36,17 +36,17 @@
<div class="card-body">
<p class="card-text">Control user registration availability</p>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="registrationToggle"
{% if settings.get('registration_enabled') == 'true' %}checked{% endif %}
<input class="form-check-input" type="checkbox" id="registrationToggle"
{% if settings.get('registration_enabled') == True or settings.get('registration_enabled') == 'true' %}checked{% endif %}
onchange="toggleRegistration(this.checked)">
<label class="form-check-label" for="registrationToggle">
Enable User Registration
</label>
</div>
<small class="text-muted">
Current status:
<span class="badge {% if settings.get('registration_enabled') == 'true' %}bg-success{% else %}bg-danger{% endif %}">
{% if settings.get('registration_enabled') == 'true' %}Enabled{% else %}Disabled{% endif %}
Current status:
<span class="badge {% if settings.get('registration_enabled') == True or settings.get('registration_enabled') == 'true' %}bg-success{% else %}bg-danger{% endif %}">
{% if settings.get('registration_enabled') == True or settings.get('registration_enabled') == 'true' %}Enabled{% else %}Disabled{% endif %}
</span>
</small>
</div>
......@@ -64,16 +64,16 @@
<p class="card-text">Enable maintenance mode for system updates</p>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="maintenanceToggle"
{% if settings.get('maintenance_mode') == 'true' %}checked{% endif %}
{% if settings.get('maintenance_mode') == True or settings.get('maintenance_mode') == 'true' %}checked{% endif %}
onchange="toggleMaintenance(this.checked)">
<label class="form-check-label" for="maintenanceToggle">
Enable Maintenance Mode
</label>
</div>
<small class="text-muted">
Current status:
<span class="badge {% if settings.get('maintenance_mode') == 'true' %}bg-warning{% else %}bg-success{% endif %}">
{% if settings.get('maintenance_mode') == 'true' %}Maintenance{% else %}Active{% endif %}
Current status:
<span class="badge {% if settings.get('maintenance_mode') == True or settings.get('maintenance_mode') == 'true' %}bg-warning{% else %}bg-success{% endif %}">
{% if settings.get('maintenance_mode') == True or settings.get('maintenance_mode') == 'true' %}Maintenance{% else %}Active{% endif %}
</span>
</small>
</div>
......@@ -110,7 +110,7 @@
<td><code>{{ key }}</code></td>
<td>
{% if key in ['registration_enabled', 'maintenance_mode'] %}
<span class="badge {% if value == 'true' %}bg-success{% else %}bg-danger{% endif %}">
<span class="badge {% if value == True or value == 'true' %}bg-success{% else %}bg-danger{% endif %}">
{{ value }}
</span>
{% else %}
......@@ -138,14 +138,16 @@
</td>
<td>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-primary"
onclick="editSetting('{{ key }}', '{{ value }}')">
<i class="fas fa-edit"></i>
<button type="button" class="btn btn-outline-primary"
onclick="editSetting('{{ key }}', '{{ value }}')"
title="Edit Setting">
<i class="fas fa-edit"></i> Edit
</button>
{% if key not in ['registration_enabled', 'maintenance_mode', 'app_name'] %}
<button type="button" class="btn btn-outline-danger"
onclick="deleteSetting('{{ key }}')">
<i class="fas fa-trash"></i>
<button type="button" class="btn btn-outline-danger"
onclick="deleteSetting('{{ key }}')"
title="Delete Setting">
<i class="fas fa-trash"></i> Delete
</button>
{% endif %}
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment