Sunil Mohan Adapa 01968d7d7e
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>
2024-09-07 12:22:02 +03:00

121 lines
4.6 KiB
JavaScript

// SPDX-License-Identifier: AGPL-3.0-or-later
/**
* @licstart The following is the entire license notice for the JavaScript
* code in this page.
*
* This file is part of FreedomBox.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
* @licend The above is the entire license notice for the JavaScript code
* in this page.
*/
jQuery(function($) {
function ip_required(required, ip_version, fields) {
var prefix = '#id_' + ip_version + '_';
for (var i = 0; i < fields.length; i++) {
$(prefix + fields[i]).prop("required", required);
}
}
function ip_readonly(readonly, ip_version, fields) {
var prefix = '#id_' + ip_version + '_';
for (var i = 0; i < fields.length; i++) {
$(prefix + fields[i]).prop("readOnly", readonly);
if (readonly) {
$(prefix + fields[i]).val("");
$(prefix + fields[i]).prop("required", false);
}
}
}
function on_ipv4_method_change() {
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 (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 (selected.prop("value") == "auto") {
ip_readonly(true, 'ipv4', ['address', 'netmask', 'gateway']);
ip_readonly(false, 'ipv4', ['dns', 'second_dns']);
} else {
ip_readonly(true, 'ipv4', ['address', 'netmask', 'gateway',
'dns', 'second_dns'
]);
}
}
function on_ipv6_method_change() {
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 (selected.prop("value") == "auto" ||
$("#id_ipv6_method").prop("value") == "dhcp") {
ip_readonly(true, 'ipv6', ['address', 'prefix', 'gateway']);
ip_readonly(false, 'ipv6', ['dns', 'second_dns']);
} else {
ip_readonly(true, 'ipv6', ['address', 'prefix', 'gateway',
'dns', 'second_dns'
]);
}
}
$("#id_name").focus();
$("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
// most browsers. Making a new form field works.
new_type = 'password';
if ($('#id_show_password').prop('checked'))
new_type = 'text';
$('#id_password').replaceWith(
$('#id_password').clone().attr('type', new_type));
});
});
// 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');
}