From 6e747f281e1d44ec9b2cd8011629a101e298a415 Mon Sep 17 00:00:00 2001 From: Fioddor Superconcentrado Date: Tue, 22 Dec 2020 23:45:51 +0100 Subject: [PATCH] networks: Use radio buttons for network modes Closes: #1974 BTW: Javascript IPV4/6 hide/show arrangements triggered on page load. Otherwise page loads form fields inconsistently. Signed-off-by: Fioddor Superconcentrado [sunil: Fix the use of RadioSelect widget] [sunil: Alter the wording of what each type means] [sunil: Drop the help text for radio group as it is mostly repetitive] [sunil: js: Make the entire jQuery code run on document ready] [sunil: js: Revert unneeded double call to change methods, change() is enough] Signed-off-by: Sunil Mohan Adapa Reviewed-by: Sunil Mohan Adapa --- plinth/modules/networks/forms.py | 42 +++++++++++++--------- plinth/modules/networks/static/networks.js | 20 ++++++----- 2 files changed, 37 insertions(+), 25 deletions(-) diff --git a/plinth/modules/networks/forms.py b/plinth/modules/networks/forms.py index e34ef62b5..d9dca0516 100644 --- a/plinth/modules/networks/forms.py +++ b/plinth/modules/networks/forms.py @@ -37,15 +37,20 @@ class ConnectionForm(forms.Form): 'available over this interfaces. Select Internal only ' 'for trusted networks.'), choices=network.ZONES) ipv4_method = forms.ChoiceField( - label=_('IPv4 Addressing Method'), help_text=format_lazy( - _('"Automatic" method will make {box_name} acquire ' - 'configuration from this network making it a client. "Shared" ' - 'method will make {box_name} act as a router, configure ' - 'clients on this network and share its Internet connection.'), - box_name=_(cfg.box_name)), - choices=[('auto', _('Automatic (DHCP)')), ('shared', _('Shared')), - ('manual', pgettext_lazy('Not automatically', 'Manual')), - ('disabled', _('Disabled'))]) + label=_('IPv4 Addressing Method'), widget=forms.RadioSelect, choices=[ + ('auto', + _('Automatic (DHCP): Configure automatically, use Internet ' + 'connection from this network')), + ('shared', + _('Shared: Act as a router, provide Internet connection to other ' + 'devices on this network')), + ('manual', + _('Manual: Use manually specified parameters, use Internet ' + 'connection from this network')), + ('disabled', + _('Disabled: Do not configure this addressing method')), + ], initial='auto') + ipv4_address = forms.CharField( label=_('Address'), validators=[validators.validate_ipv4_address], required=False) @@ -70,13 +75,18 @@ class ConnectionForm(forms.Form): 'provided by a DHCP server will be ignored.'), validators=[validators.validate_ipv4_address], required=False) ipv6_method = forms.ChoiceField( - label=_('IPv6 Addressing Method'), help_text=format_lazy( - _('"Automatic" methods will make {box_name} acquire ' - 'configuration from this network making it a client.'), - box_name=_(cfg.box_name)), - choices=[('auto', _('Automatic')), ('dhcp', _('Automatic, DHCP only')), - ('manual', pgettext_lazy('Not automatically', 'Manual')), - ('ignore', _('Ignore'))]) + label=_('IPv6 Addressing Method'), widget=forms.RadioSelect, choices=[ + ('auto', + _('Automatic: Configure automatically, use Internet connection ' + 'from this network')), + ('dhcp', + _('Automatic (DHCP only): Configure automatically, use Internet ' + 'connection from this network')), + ('manual', + _('Manual: Use manually specified parameters, use Internet ' + 'connection from this network')), + ('ignore', _('Ignore: Ignore this addressing method')), + ]) ipv6_address = forms.CharField( label=_('Address'), validators=[validators.validate_ipv6_address], required=False) diff --git a/plinth/modules/networks/static/networks.js b/plinth/modules/networks/static/networks.js index 42744fb9e..a4b1d36af 100644 --- a/plinth/modules/networks/static/networks.js +++ b/plinth/modules/networks/static/networks.js @@ -22,7 +22,7 @@ * in this page. */ -(function($) { +jQuery(function($) { function ip_required(required, ip_version, fields) { var prefix = '#id_' + ip_version + '_'; @@ -43,16 +43,17 @@ } function on_ipv4_method_change() { - if ($("#id_ipv4_method").prop("value") == "manual") { + var selected = $("input[name=ipv4_method]:checked"); + if (selected.prop("value") == "manual") { ip_required(true, 'ipv4', ['address']); ip_readonly(false, 'ipv4', ['address', 'netmask', 'gateway', 'dns', 'second_dns' ]); - } else if ($("#id_ipv4_method").prop("value") == "shared") { + } else if (selected.prop("value") == "shared") { ip_required(false, 'ipv4', ['address']); ip_readonly(false, 'ipv4', ['address', 'netmask']); ip_readonly(true, 'ipv4', ['gateway', 'dns', 'second_dns']); - } else if ($("#id_ipv4_method").prop("value") == "auto") { + } else if (selected.prop("value") == "auto") { ip_readonly(true, 'ipv4', ['address', 'netmask', 'gateway']); ip_readonly(false, 'ipv4', ['dns', 'second_dns']); } else { @@ -63,12 +64,13 @@ } function on_ipv6_method_change() { - if ($("#id_ipv6_method").prop("value") == "manual") { + var selected = $("input[name=ipv6_method]:checked"); + if (selected.prop("value") == "manual") { ip_required(true, 'ipv6', ['address', 'prefix']); ip_readonly(false, 'ipv6', ['address', 'prefix', 'gateway', 'dns', 'second_dns' ]); - } else if ($("#id_ipv6_method").prop("value") == "auto" || + } else if (selected.prop("value") == "auto" || $("#id_ipv6_method").prop("value") == "dhcp") { ip_readonly(true, 'ipv6', ['address', 'prefix', 'gateway']); ip_readonly(false, 'ipv6', ['dns', 'second_dns']); @@ -81,8 +83,8 @@ $("#id_name").focus(); - $("#id_ipv4_method").change(on_ipv4_method_change).change(); - $("#id_ipv6_method").change(on_ipv6_method_change).change(); + $("input[name=ipv4_method]").change(on_ipv4_method_change).change(); + $("input[name=ipv6_method]").change(on_ipv6_method_change).change(); $('#id_show_password').change(function() { // Changing type attribute from password to text is prevented by @@ -95,4 +97,4 @@ $('#id_password').clone().attr('type', new_type)); }); -})(jQuery); +});