diff --git a/plinth/modules/networks/forms.py b/plinth/modules/networks/forms.py index 784a5b5e7..86c085ff1 100644 --- a/plinth/modules/networks/forms.py +++ b/plinth/modules/networks/forms.py @@ -231,14 +231,6 @@ class PPPoEForm(EthernetForm): class WifiForm(ConnectionForm): """Form to create/edit a Wi-Fi connection.""" - field_order = [ - 'name', 'interface', 'zone', 'ssid', 'mode', 'band', 'channel', - 'bssid', 'auth_mode', 'passphrase', 'ipv4_method', 'ipv4_address', - 'ipv4_netmask', 'ipv4_gateway', 'ipv4_dns', 'ipv4_second_dns', - 'ipv6_method', 'ipv6_address', 'ipv6_prefix', 'ipv6_gateway', - 'ipv6_dns', 'ipv6_second_dns' - ] - ssid = forms.CharField(label=_('SSID'), help_text=_('The visible name of the network.')) mode = forms.ChoiceField( diff --git a/plinth/modules/networks/static/networks.js b/plinth/modules/networks/static/networks.js index a4b1d36af..14e7e1800 100644 --- a/plinth/modules/networks/static/networks.js +++ b/plinth/modules/networks/static/networks.js @@ -98,3 +98,23 @@ jQuery(function($) { }); }); + +// When there are validation errors on form elements, expand their parent +// collapsible so that the form element can be highlighted and an error tooltip +// can be show by the browser. +document.addEventListener('DOMContentLoaded', event => { + const selector = '.form-connection-edit input, .form-connection-create input'; + const input_elements = document.querySelectorAll(selector); + input_elements.forEach(input => + input.addEventListener('invalid', on_invalid_event) + ); +}); + +function on_invalid_event(event) { + const element = event.target; + console.log('Invalid event on element', element); + const parent = element.closest('.collapse'); + console.log('Invalid event with parent', parent); + // Don't use .collapse(). Instead, expand all the sections with errors. + parent.classList.add('show'); +} diff --git a/plinth/modules/networks/templates/connections_create.html b/plinth/modules/networks/templates/connections_create.html index 84d7b81be..d444340ad 100644 --- a/plinth/modules/networks/templates/connections_create.html +++ b/plinth/modules/networks/templates/connections_create.html @@ -3,7 +3,6 @@ # SPDX-License-Identifier: AGPL-3.0-or-later {% endcomment %} -{% load bootstrap %} {% load i18n %} {% block content %} @@ -13,7 +12,7 @@
{% csrf_token %} - {{ form|bootstrap }} + {% include "connections_fields.html" %} diff --git a/plinth/modules/networks/templates/connections_edit.html b/plinth/modules/networks/templates/connections_edit.html index 3cecdd54a..8f95772a5 100644 --- a/plinth/modules/networks/templates/connections_edit.html +++ b/plinth/modules/networks/templates/connections_edit.html @@ -3,7 +3,6 @@ # SPDX-License-Identifier: AGPL-3.0-or-later {% endcomment %} -{% load bootstrap %} {% load i18n %} {% load static %} @@ -14,7 +13,7 @@ {% csrf_token %} - {{ form|bootstrap }} + {% include "connections_fields.html" %} diff --git a/plinth/modules/networks/templates/connections_fields.html b/plinth/modules/networks/templates/connections_fields.html new file mode 100644 index 000000000..4e4c38f92 --- /dev/null +++ b/plinth/modules/networks/templates/connections_fields.html @@ -0,0 +1,105 @@ +{% comment %} +# SPDX-License-Identifier: AGPL-3.0-or-later +{% endcomment %} + +{% load bootstrap %} +{% load i18n %} + +{% if form.non_field_errors %} +
+ × + {% for non_field_error in form.non_field_errors %} + {{ non_field_error }} + {% endfor %} +
+{% endif %} + +
+
+
+

+ +

+
+ +
+
+ {{ form.name|bootstrap }} + {{ form.interface|bootstrap }} + {{ form.zone|bootstrap }} +
+
+
+ + {% if form.ssid %} + {% include "connections_fields_wifi.html" %} + {% endif %} + + {% if form.username %} + {% include "connections_fields_pppoe.html" %} + {% endif %} + + {% if form.ipv4_method %} +
+
+

+ +

+
+ +
+
+ {{ form.ipv4_method|bootstrap }} + {{ form.ipv4_address|bootstrap }} + {{ form.ipv4_netmask|bootstrap }} + {{ form.ipv4_gateway|bootstrap }} + {{ form.ipv4_dns|bootstrap }} + {{ form.ipv4_second_dns|bootstrap }} +
+
+
+ {% endif %} + + {% if form.ipv6_method %} +
+
+

+ +

+
+ +
+
+ {{ form.ipv6_method|bootstrap }} + {{ form.ipv6_address|bootstrap }} + {{ form.ipv6_prefix|bootstrap }} + {{ form.ipv6_gateway|bootstrap }} + {{ form.ipv6_dns|bootstrap }} + {{ form.ipv6_second_dns|bootstrap }} +
+
+
+ {% endif %} +
diff --git a/plinth/modules/networks/templates/connections_fields_pppoe.html b/plinth/modules/networks/templates/connections_fields_pppoe.html new file mode 100644 index 000000000..f210d5faa --- /dev/null +++ b/plinth/modules/networks/templates/connections_fields_pppoe.html @@ -0,0 +1,30 @@ +{% comment %} +# SPDX-License-Identifier: AGPL-3.0-or-later +{% endcomment %} + +{% load bootstrap %} +{% load i18n %} + +
+
+

+ +

+
+ +
+
+ {{ form.username|bootstrap }} + {{ form.password|bootstrap }} + {{ form.show_password|bootstrap }} +
+
+
diff --git a/plinth/modules/networks/templates/connections_fields_wifi.html b/plinth/modules/networks/templates/connections_fields_wifi.html new file mode 100644 index 000000000..cadea7b98 --- /dev/null +++ b/plinth/modules/networks/templates/connections_fields_wifi.html @@ -0,0 +1,34 @@ +{% comment %} +# SPDX-License-Identifier: AGPL-3.0-or-later +{% endcomment %} + +{% load bootstrap %} +{% load i18n %} + +
+
+

+ +

+
+ +
+
+ {{ form.ssid|bootstrap }} + {{ form.mode|bootstrap }} + {{ form.band|bootstrap }} + {{ form.channel|bootstrap }} + {{ form.bssid|bootstrap }} + {{ form.auth_mode|bootstrap }} + {{ form.passphrase|bootstrap }} +
+
+
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css index 63c650658..5492689f8 100644 --- a/static/themes/default/css/main.css +++ b/static/themes/default/css/main.css @@ -926,3 +926,12 @@ img.notification-icon { display: none; } } + +/* Accordion */ +.accordion { + margin-bottom: 1.25rem; +} + +.accordion .card-header h4 { + margin: 0; +}