From ff7c3a53a51b988a38fd071921282e269fc35545 Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Wed, 4 Feb 2026 16:31:24 -0800
Subject: [PATCH] backups: Tweak appearance of add remote location form

- Use bootstrapform templates where possible to reduce code.

- Fix incorrect tag for radio button for password authentication.

- Drop borders and instead:

  - Style each group as a section. This includes encryption section and
  repository path section.

  - Utilize the simplicity as passwords fields are not displayed.

- Retain <label> tag so that clicking on it works and it also easier for
accessibility tools.

Tests:

- The option for password authentication works are expected. The fields for
encryption passphrase, ssh password work as before.

- Clicking on form labels focuses the form element.

- Adding a repository with key and password authentication works with and
without encryption.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
---
 .../backups_add_remote_repository.html        | 132 ++++++------------
 1 file changed, 44 insertions(+), 88 deletions(-)

diff --git a/plinth/modules/backups/templates/backups_add_remote_repository.html b/plinth/modules/backups/templates/backups_add_remote_repository.html
index 79754d225..06eaff6cc 100644
--- a/plinth/modules/backups/templates/backups_add_remote_repository.html
+++ b/plinth/modules/backups/templates/backups_add_remote_repository.html
@@ -30,7 +30,7 @@
 
     <div class="form-group{% if form.repository.errors %}
                 has-error{% endif %}">
-      <label class="control-label" for="id_repository">
+      <label class="control-label fs-4 fw-medium" for="id_repository">
         {{ form.repository.label }}
       </label>
       <div>
@@ -46,78 +46,60 @@
     </div>
 
     <div class="form-group{% if form.ssh_auth_type.errors %}
-                has-error{% endif %} border border-primary rounded p-3">
-      <h4 class="control-label">{{ form.ssh_auth_type.label }}</h4>
+                has-error{% endif %}">
+      <label class="control-label fs-4 fw-medium">
+        {{ form.ssh_auth_type.label }}
+      </label>
       <p class="help-block">
         {{ form.ssh_auth_type.help_text|safe }}
       </p>
       {% for error in form.ssh_auth_type.errors %}
         <span class="help-block {{ form.error_css_class }}">{{ error }}</span>
       {% endfor %}
-      <fieldset class="form-group border border-secondary rounded p-3">
-        <div class="radio">
-          <label>
-            {{ form.ssh_auth_type.0.tag }}
-            {{ form.ssh_auth_type.0.choice_label }}
-          </label>
-        </div>
 
-        <div>
-          <p>
-            {% blocktrans trimmed %}
-              {{ box_name }} service has the following SSH client public key:
-            {% endblocktrans %}
-          </p>
-          <pre>{{ ssh_client_public_key }}</pre>
-          <p>
-            {% blocktrans trimmed %}
-              The public key must be added to the authorized keys list on the
-              remote machine.
-            {% endblocktrans %}
-          </p>
-        </div>
-      </fieldset>
-
-      <fieldset class="form-group border border-secondary rounded p-3">
-        <div class="radio">
-          <label>
-            {{ form.ssh_auth_type.0.tag }}
-            {{ form.ssh_auth_type.1.choice_label }}
-          </label>
-        </div>
+      <div class="radio">
+        <label>
+          {{ form.ssh_auth_type.0.tag }}
+          {{ form.ssh_auth_type.0.choice_label }}
+        </label>
+      </div>
 
+      <div>
         <p>
           {% blocktrans trimmed %}
-            {{ box_name }} service will attempt to connect using the provided
-            password. If successful, then the public key will be automatically
-            added to the authorized keys list, so that future connections do
-            not need the password.
+            The following SSH client public key must be added to the
+            authorized keys list on the remote machine for {{ box_name }} to
+            be able to connect to the remote machine:
           {% endblocktrans %}
         </p>
+        <pre>{{ ssh_client_public_key }}</pre>
+      </div>
 
-        <div class="form-group{% if form.ssh_password.errors %}
-                    has-error{% endif %}">
-          <label class="control-label" for="id_ssh_password">
-            {{ form.ssh_password.label }}
-          </label>
-          <div>
-            <input type="password" name="ssh_password" class="form-control"
-                   id="id_ssh_password">
-            {% for error in form.ssh_password.errors %}
-              <span class="help-block {{ form.error_css_class }}">{{ error }}</span>
-            {% endfor %}
-            <p class="help-block">
-              {{ form.ssh_password.help_text|safe }}
-            </p>
-          </div>
-        </div>
-      </fieldset>
+      <div class="radio">
+        <label>
+          {{ form.ssh_auth_type.1.tag }}
+          {{ form.ssh_auth_type.1.choice_label }}
+        </label>
+      </div>
+
+      <p>
+        {% blocktrans trimmed %}
+          {{ box_name }} service will attempt to connect using the provided
+          password. If successful, then the public key will be automatically
+          added to the authorized keys list, so that future connections do
+          not need the password.
+        {% endblocktrans %}
+      </p>
+
+      {% with _=form.ssh_password|add_input_classes %}
+        {% include "bootstrapform/field.html" with field=form.ssh_password %}
+      {% endwith %}
     </div>
 
-    <div class="form-group border border-primary rounded p-3">
+    <div class="form-group">
       <div class="form-group{% if form.encryption.errors %}
                   has-error{% endif %}">
-        <label class="control-label" for="id_encryption">
+        <label class="control-label fs-4 fw-medium" for="id_encryption">
           {{ form.encryption.label }}
         </label>
         <div>
@@ -134,39 +116,13 @@
         </div>
       </div>
 
-      <div class="form-group{% if form.encryption_passphrase.errors %}
-                  has-error{% endif %}">
-        <label class="control-label" for="id_encryption_passphrase">
-          {{ form.encryption_passphrase.label }}
-        </label>
-        <div>
-          <input type="password" name="encryption_passphrase"
-                class="form-control" id="id_encryption_passphrase">
-          {% for error in form.encryption_passphrase.errors %}
-            <span class="help-block {{ form.error_css_class }}">{{ error }}</span>
-          {% endfor %}
-          <p class="help-block">
-            {{ form.encryption_passphrase.help_text|safe }}
-          </p>
-        </div>
-      </div>
+      {% with _=form.encryption_passphrase|add_input_classes %}
+        {% include "bootstrapform/field.html" with field=form.encryption_passphrase %}
+      {% endwith %}
 
-      <div class="form-group{% if form.confirm_encryption_passphrase.errors %}
-                  has-error{% endif %}">
-        <label class="control-label" for="id_confirm_encryption_passphrase">
-          {{ form.confirm_encryption_passphrase.label }}
-        </label>
-        <div>
-          <input type="password" name="confirm_encryption_passphrase"
-                class="form-control" id="id_confirm_encryption_passphrase">
-          {% for error in form.confirm_encryption_passphrase.errors %}
-            <span class="help-block {{ form.error_css_class }}">{{ error }}</span>
-          {% endfor %}
-          <p class="help-block">
-            {{ form.confirm_encryption_passphrase.help_text|safe }}
-          </p>
-        </div>
-      </div>
+      {% with _=form.confirm_encryption_passphrase|add_input_classes %}
+        {% include "bootstrapform/field.html" with field=form.confirm_encryption_passphrase %}
+      {% endwith %}
     </div>
 
     <div class="alert alert-warning d-flex align-items-center" role="alert">