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,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">