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>
This commit is contained in:
Sunil Mohan Adapa 2026-02-04 16:31:24 -08:00
parent 7d3d930137
commit ff7c3a53a5
No known key found for this signature in database
GPG Key ID: 43EA1CFF0AA7C5F2

View File

@ -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">
<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 }}
@ -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 %}
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>
{% 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">