1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2026-11-08 19:26:48 +00:00
webvirtcloud/interfaces/templates/create_iface_block.html
catborise ca74c02c4f fix(templates): the fields of the create modals are named by their labels
An accessibility scan with every modal opened found 49 fields without a
name: the labels of the instance create forms (custom, template and each
flavor's modal), the interface, network, secret and storage pool modals
did not point at their fields. Each label now has a for= and its field an
id, prefixed per form (and per flavor), so a click on the label focuses
the field too. The "Advanced" collapse buttons and the memory and
processing bars are named.

The VCPU config select had id="vcpu_mode" in each of these forms, nine
times on the create page; the unique-ID test did not see it as the test
driver reports no CPU modes. The id goes (nothing used it), and the test
now renders that branch.
2026-10-19 20:01:36 +03:00

150 lines
No EOL
9.8 KiB
HTML

{% load i18n %}
{% load bootstrap_icons %}
{% if request.user.is_superuser %}
<a href="#AddInterface" type="button" class="btn btn-success float-end" title="{% trans "Create New Interface" %}" data-bs-toggle="modal">
<span aria-hidden="true">{% bs_icon 'plus' %} </span>
</a>
<!-- Modal Secret -->
<div class="modal fade" id="AddInterface" tabindex="-1" role="dialog" aria-labelledby="AddInterface" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{% trans "Create New Interface" %}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form method="post" action="" role="form" aria-label="Create New Interface form">{% csrf_token %}
<div class="modal-body">
<div class="row">
<label for="iface_name" class="col-sm-3 col-form-label">{% trans "Name" %}</label>
<div class="col-sm-6">
<input id="iface_name" type="text" name="name" class="form-control" placeholder="br0" maxlength="15" required pattern="[A-Za-z0-9_.\-]+"/>
</div>
</div>
<div class="row">
<label for="iface_start_mode" class="col-sm-3 col-form-label">{% trans "Start mode" %}</label>
<div class="col-sm-6">
<select id="iface_start_mode" name="start_mode" class="form-select">
<option value="none">{% trans "none" %}</option>
<option value="onboot">{% trans "onboot" %}</option>
<option value="hotplug">{% trans "hotplug" %}</option>
</select>
</div>
</div>
<div class="row">
<label for="iface_netdev" class="col-sm-3 col-form-label">{% trans "Device" %}</label>
<div class="col-sm-6">
<select id="iface_netdev" name="netdev" class="form-select">
{% for dev in netdevs %}
<option value="{{ dev }}">{{ dev }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="row">
<label for="itype" class="col-sm-3 col-form-label">{% trans "Type" %}</label>
<div class="col-sm-6">
<select name="itype" class="form-select" id="itype">
<option value="bridge">{% trans "bridge" %}</option>
<option value="ethernet">{% trans "ethernet" %}</option>
</select>
</div>
</div>
<div class="row bridge_name_form_group">
<label for="iface_stp" class="col-sm-3 col-form-label">{% trans "STP" %}</label>
<div class="col-sm-6">
<select id="iface_stp" name="stp" class="form-select">
<option value="on">{% trans "on" %}</option>
<option value="off">{% trans "off" %}</option>
</select>
</div>
</div>
<div class="row bridge_name_form_group">
<label for="iface_delay" class="col-sm-3 col-form-label">{% trans "Delay" %}</label>
<div class="col-sm-6">
<input id="iface_delay" type="text" name="delay" class="form-control" value="0" maxlength="3" required pattern="[0-9]+"/>
</div>
</div>
<div class="tabbable">
<ul class="nav nav-tabs" aria-label="IP types">
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#ipv4tab" type="button" role="tab" aria-controls="ipv4tab" aria-selected="true">
{% trans "IPv4" %}
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#ipv6tab" type="button" role="tab" aria-controls="ipv6tab" aria-selected="false">
{% trans "IPv6" %}
</button>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="ipv4tab">
<div class="modal-body">
<div class="row">
<label for="ipv4" class="col-sm-3 col-form-label">{% trans "IPv4 Mode" %}</label>
<div class="col-sm-6">
<select name="ipv4_type" class="form-select" id="ipv4">
<option value="dhcp">{% trans "DHCP" %}</option>
<option value="static">{% trans "Static" %}</option>
<option value="none">{% trans "No configuration" %}</option>
</select>
</div>
</div>
<div class="row static_ipv4_form_group">
<label for="iface_ipv4_addr" class="col-sm-3 col-form-label">{% trans "IPv4 Address" %}</label>
<div class="col-sm-6">
<input id="iface_ipv4_addr" type="text" class="form-control" name="ipv4_addr" maxlength="31" pattern="[0-9\.\/]+|^$">
</div>
</div>
<div class="row static_ipv4_form_group">
<label for="iface_ipv4_gw" class="col-sm-3 col-form-label">{% trans "IPv4 Gateway" %}</label>
<div class="col-sm-6">
<input id="iface_ipv4_gw" type="text" class="form-control" name="ipv4_gw" maxlength="16" pattern="[0-9\.]+|^$">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="ipv6tab">
<div class="modal-body">
<div class="row">
<label for="ipv6" class="col-sm-3 col-form-label">{% trans "IPv6 Mode" %}</label>
<div class="col-sm-6">
<select name="ipv6_type" class="form-select" id="ipv6">
<option value="none">{% trans "No configuration" %}</option>
<option value="dhcp">{% trans "DHCP" %}</option>
<option value="static">{% trans "Static" %}</option>
</select>
</div>
</div>
<div class="row static_ipv6_form_group">
<label for="iface_ipv6_addr" class="col-sm-3 col-form-label">{% trans "IPv6 Address" %}</label>
<div class="col-sm-6">
<input id="iface_ipv6_addr" type="text" class="form-control" name="ipv6_addr" maxlength="100" pattern="[0-9a-fA-F\:\/]+|^$">
</div>
</div>
<div class="row static_ipv6_form_group">
<label for="iface_ipv6_gw" class="col-sm-3 col-form-label">{% trans "IPv6 Gateway" %}</label>
<div class="col-sm-6">
<input id="iface_ipv6_gw" type="text" class="form-control" name="ipv6_gw" maxlength="100" pattern="[0-9a-fA-F\:]+|^$">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
{% trans "Close" %}
</button>
<button type="submit" class="btn btn-primary" name="create">
{% trans "Create" %}
</button>
</div>
</form>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div><!-- /.modal -->
{% endif %}