networks: Groups fields in create/edit connection form

Closes: #322.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>

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(

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');
+}

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 @@
   <form class="form form-connection-create" method="post">
     {% csrf_token %}
 
-    {{ form|bootstrap }}
+    {% include "connections_fields.html" %}
 
     <input type="submit" class="btn btn-primary"
            value="{% trans "Create Connection" %}"/>

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 @@
   <form class="form form-connection-edit" method="post">
     {% csrf_token %}
 
-    {{ form|bootstrap }}
+    {% include "connections_fields.html" %}
 
     <input type="submit" class="btn btn-primary"
            value="{% trans "Edit Connection" %}"/>

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 %}
+  <div class="alert alert-danger">
+    <a class="close" data-dismiss="alert">&times;</a>
+      {% for non_field_error in form.non_field_errors %}
+        {{ non_field_error }}
+      {% endfor %}
+  </div>
+{% endif %}
+
+<div class="accordion" id="accordion-connections-fields">
+  <div class='field-group'>
+    <div class="card-header" id="header-general">
+      <h4>
+        <button class="btn btn-block text-left dropdown-toggle" type="button"
+                data-toggle="collapse" data-target="#collapse-general"
+                aria-expanded="true" aria-controls="collapse-general">
+          {% trans "General" %}
+        </button>
+      </h4>
+    </div>
+
+    <div id="collapse-general" class="collapse show"
+         aria-labelledby="header-general"
+         data-parent="#accordion-connections-fields">
+      <div class="card-body">
+        {{ form.name|bootstrap }}
+        {{ form.interface|bootstrap }}
+        {{ form.zone|bootstrap }}
+      </div>
+    </div>
+  </div>
+
+  {% if form.ssid %}
+    {% include "connections_fields_wifi.html" %}
+  {% endif %}
+
+  {% if form.username %}
+    {% include "connections_fields_pppoe.html" %}
+  {% endif %}
+
+  {% if form.ipv4_method %}
+    <div class="field-group">
+      <div class="card-header" id="header-ipv4">
+        <h4>
+          <button class="btn btn-block text-left dropdown-toggle {{ form.errors|yesno:",collapsed" }}"
+                  type="button" data-toggle="collapse"
+                  data-target="#collapse-ipv4"
+                  aria-expanded="{{ form.errors|yesno:"true,false" }}"
+                  aria-controls="collapse-ipv4">
+            {% trans "IPv4" %}
+          </button>
+        </h4>
+      </div>
+
+      <div id="collapse-ipv4" class="collapse {{ form.errors|yesno:"show," }}"
+           aria-labelledby="header-ipv4"
+           data-parent="#accordion-connections-fields">
+        <div class="card-body">
+          {{ 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 }}
+        </div>
+      </div>
+    </div>
+  {% endif %}
+
+  {% if form.ipv6_method %}
+    <div class="field-group">
+      <div class="card-header" id="header-ipv6">
+        <h4>
+          <button class="btn btn-block text-left dropdown-toggle {{ form.errors|yesno:",collapsed" }}"
+                  type="button" data-toggle="collapse"
+                  data-target="#collapse-ipv6"
+                  aria-expanded="{{ form.errors|yesno:"true,false" }}"
+                  aria-controls="collapse-ipv6">
+            {% trans "IPv6" %}
+          </button>
+        </h4>
+      </div>
+
+      <div id="collapse-ipv6" class="collapse {{ form.errors|yesno:"show," }}"
+           aria-labelledby="header-ipv6"
+           data-parent="#accordion-connections-fields">
+        <div class="card-body">
+          {{ 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 }}
+        </div>
+      </div>
+    </div>
+  {% endif %}
+</div>

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 %}
+
+<div class="field-group">
+  <div class="card-header" id="header-pppoe">
+    <h4>
+      <button class="btn btn-block text-left dropdown-toggle {{ form.errors|yesno:",collapsed" }}"
+              type="button" data-toggle="collapse"
+              data-target="#collapse-pppoe"
+              aria-expanded="{{ form.errors|yesno:"true,false" }}"
+              aria-controls="collapse-pppoe">
+        {% trans "PPPoE" %}
+      </button>
+    </h4>
+  </div>
+
+  <div id="collapse-pppoe" class="collapse  {{ form.errors|yesno:"show," }}"
+       aria-labelledby="header-pppoe"
+       data-parent="#accordion-connections-fields">
+    <div class="card-body">
+      {{ form.username|bootstrap }}
+      {{ form.password|bootstrap }}
+      {{ form.show_password|bootstrap }}
+    </div>
+  </div>
+</div>

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 %}
+
+<div class="field-group">
+  <div class="card-header" id="header-wifi">
+    <h4>
+      <button class="btn btn-block text-left dropdown-toggle {{ form.errors|yesno:",collapsed" }}"
+              type="button" data-toggle="collapse"
+              data-target="#collapse-wifi"
+              aria-expanded="{{ form.errors|yesno:"true,false" }}"
+              aria-controls="collapse-wifi">
+        {% trans "Wi-Fi" %}
+      </button>
+    </h4>
+  </div>
+
+  <div id="collapse-wifi" class="collapse  {{ form.errors|yesno:"show," }}"
+       aria-labelledby="header-wifi"
+       data-parent="#accordion-connections-fields">
+    <div class="card-body">
+      {{ form.ssid|bootstrap }}
+      {{ form.mode|bootstrap }}
+      {{ form.band|bootstrap }}
+      {{ form.channel|bootstrap }}
+      {{ form.bssid|bootstrap }}
+      {{ form.auth_mode|bootstrap }}
+      {{ form.passphrase|bootstrap }}
+    </div>
+  </div>
+</div>

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;
+}