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>

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,15 +46,17 @@
     </div>
 
     <div class="form-group{% if form.ssh_auth_type.errors %}
-                has-error{% endif %} border border-primary rounded p-3">
+                has-error{% endif %}">
-      <h4 class="control-label">{{ form.ssh_auth_type.label }}</h4>
+      <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 }}
@@ -65,23 +67,17 @@
       <div>
         <p>
           {% blocktrans trimmed %}
-              {{ box_name }} service has the following SSH client public key:
+            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>
-          <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.tag }}
           {{ form.ssh_auth_type.1.choice_label }}
         </label>
       </div>
@@ -95,29 +91,15 @@
         {% endblocktrans %}
       </p>
 
-        <div class="form-group{% if form.ssh_password.errors %}
+      {% with _=form.ssh_password|add_input_classes %}
-                    has-error{% endif %}">
+        {% include "bootstrapform/field.html" with field=form.ssh_password %}
-          <label class="control-label" for="id_ssh_password">
+      {% endwith %}
-            {{ 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>
 
-    <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 %}
+      {% with _=form.encryption_passphrase|add_input_classes %}
-                  has-error{% endif %}">
+        {% include "bootstrapform/field.html" with field=form.encryption_passphrase %}
-        <label class="control-label" for="id_encryption_passphrase">
+      {% endwith %}
-          {{ 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>
 
-      <div class="form-group{% if form.confirm_encryption_passphrase.errors %}
+      {% with _=form.confirm_encryption_passphrase|add_input_classes %}
-                  has-error{% endif %}">
+        {% include "bootstrapform/field.html" with field=form.confirm_encryption_passphrase %}
-        <label class="control-label" for="id_confirm_encryption_passphrase">
+      {% endwith %}
-          {{ 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>
     </div>
 
     <div class="alert alert-warning d-flex align-items-center" role="alert">