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