back to normal mode' + p1 + '
' + - '' + p2 + '
'); - } - } - else { - vpn_specific.hide(); - if ($('.autovpn').length > 0) { - $('.jsoneditor-wrapper').show(); - $('.autovpn').hide(); - } - } - }; - type_select.on('change', function () { - toggle_vpn_specific(true); - }); - toggle_vpn_specific(); + var type_select = $("#id_type"), + vpn_specific = $(".field-vpn, .field-auto_cert"), + gettext = + window.gettext || + function (v) { + return v; + }, + toggle_vpn_specific = function (changed) { + if (type_select.val() == "vpn") { + vpn_specific.show(); + if ( + changed === true && + $(".autovpn").length < 1 && + $("#id_config").val() === "{}" + ) { + var p1 = gettext( + "Click on Save to automatically generate the " + + "VPN client configuration (will be based on " + + "the configuration of the server).", + ), + p2 = gettext( + "You can then tweak the VPN client " + + "configuration in the next step.", + ); + $(".jsoneditor-wrapper") + .hide() + .after(''); + $(".autovpn").html( + "" + + p1 + + "
" + + "" + + p2 + + "
", + ); + } + } else { + vpn_specific.hide(); + if ($(".autovpn").length > 0) { + $(".jsoneditor-wrapper").show(); + $(".autovpn").hide(); + } + } + }; + type_select.on("change", function () { + toggle_vpn_specific(true); + }); + toggle_vpn_specific(); }); diff --git a/openwisp_controller/config/static/config/js/tabs.js b/openwisp_controller/config/static/config/js/tabs.js index 4dd381429..bc5f44945 100644 --- a/openwisp_controller/config/static/config/js/tabs.js +++ b/openwisp_controller/config/static/config/js/tabs.js @@ -1,61 +1,68 @@ -'use strict'; +"use strict"; django.jQuery(function ($) { - - if ($('.add-form').length || !$('#device_form').length) { + if ($(".add-form").length || !$("#device_form").length) { return; } // trigger window resize event // workaround that fixes problems with leafelet maps var triggerResize = function () { - var resizeEvent = window.document.createEvent('UIEvents'); - resizeEvent.initUIEvent('resize', true, false, window, 0); - window.dispatchEvent(resizeEvent); - }, + var resizeEvent = window.document.createEvent("UIEvents"); + resizeEvent.initUIEvent("resize", true, false, window, 0); + window.dispatchEvent(resizeEvent); + }, showTab = function (menuLink) { - var tabId = menuLink.attr('href'); - $('ul.tabs a').removeClass('current'); - $('.tab-content').removeClass('current'); - menuLink.addClass('current'); - $(tabId).addClass('current'); + var tabId = menuLink.attr("href"); + $("ul.tabs a").removeClass("current"); + $(".tab-content").removeClass("current"); + menuLink.addClass("current"); + $(tabId).addClass("current"); triggerResize(); $.event.trigger({ - type: 'tabshown', + type: "tabshown", tabId: tabId, }); return tabId; }, showFragment = function (fragment) { - if (!fragment) { return; } + if (!fragment) { + return; + } showTab($('ul.tabs a[href="' + fragment + '"]')); }; - $('ul.tabs a').click(function (e) { + $("ul.tabs a").click(function (e) { var tabId = showTab($(this)); e.preventDefault(); - history.pushState(tabId, '', tabId); + history.pushState(tabId, "", tabId); }); - var overview = $('#device_form > div > fieldset.module.aligned') - .addClass('tab-content') - .attr('id', 'overview-group'), - tabs = $('#device_form > div > div.inline-group') - .addClass('tab-content'), - tabsContainer = $('#tabs-container ul'); + var overview = $("#device_form > div > fieldset.module.aligned") + .addClass("tab-content") + .attr("id", "overview-group"), + tabs = $("#device_form > div > div.inline-group").addClass("tab-content"), + tabsContainer = $("#tabs-container ul"); tabs.each(function (i, el) { var $el = $(el), - tabId = $el.attr('id'), - label = $el.find('> fieldset.module > h2, ' + - '> .tabular > fieldset.module > h2').text(); + tabId = $el.attr("id"), + label = $el + .find("> fieldset.module > h2, " + "> .tabular > fieldset.module > h2") + .text(); tabsContainer.append( - ''); - loading.find('p').hide().text(message).fadeIn(250); - }); - }); - }; - - $('#vpn_form').submit(function () { - showOverlay(); + if ($(".add-form").length) { + var showOverlay = function () { + var loading = $("#loading-overlay"); + if (!loading.length) { + $("body").append( + '
', + ); + loading = $("#loading-overlay"); + } + loading.fadeIn(100, function () { + loading.css("display", "flex"); + var spinner = loading.find(".spinner"); + spinner.fadeOut(100, function () { + var message = gettext( + "Please be patient, we are creating all the necessary " + + "cyrptographic keys which may take some time", + ); + spinner.remove(); + loading.append(""); + loading.find("p").hide().text(message).fadeIn(250); }); - } - - var getParentRow = function (el) { - return el.parents('.form-row').eq(0); + }); }; - var toggleRelatedFields = function () { - // Show IP and Subnet field only for WireGuard backend - var backendValue = $('#id_backend').val() === undefined ? '' : $('#id_backend').val().toLocaleLowerCase().toLocaleLowerCase(), - op; - if (backendValue.includes('wireguard') || backendValue.includes('vxlan')) { - op = 'show'; - } else { - op = 'hide'; - } - getParentRow($('label[for="id_webhook_endpoint"]'))[op](); - getParentRow($('label[for="id_auth_token"]'))[op](); + $("#vpn_form").submit(function () { + showOverlay(); + }); + } - if (backendValue.includes('openvpn')) { - op = 'show'; - } else { - op = 'hide'; - } - getParentRow($('label[for="id_ca"]'))[op](); - getParentRow($('label[for="id_cert"]'))[op](); - // For Zerotier VPN backend - if(backendValue.includes('zerotier')){ - getParentRow($('label[for="id_auth_token"]')).show(); - } - }; + var getParentRow = function (el) { + return el.parents(".form-row").eq(0); + }; - // clean config when VPN backend is changed - $('#id_backend').change(function () { - $('#id_config').val('{}'); - toggleRelatedFields(); - }); + var toggleRelatedFields = function () { + // Show IP and Subnet field only for WireGuard backend + var backendValue = + $("#id_backend").val() === undefined + ? "" + : $("#id_backend").val().toLocaleLowerCase().toLocaleLowerCase(), + op; + if (backendValue.includes("wireguard") || backendValue.includes("vxlan")) { + op = "show"; + } else { + op = "hide"; + } + getParentRow($('label[for="id_webhook_endpoint"]'))[op](); + getParentRow($('label[for="id_auth_token"]'))[op](); + if (backendValue.includes("openvpn")) { + op = "show"; + } else { + op = "hide"; + } + getParentRow($('label[for="id_ca"]'))[op](); + getParentRow($('label[for="id_cert"]'))[op](); + // For Zerotier VPN backend + if (backendValue.includes("zerotier")) { + getParentRow($('label[for="id_auth_token"]')).show(); + } + }; + + // clean config when VPN backend is changed + $("#id_backend").change(function () { + $("#id_config").val("{}"); toggleRelatedFields(); + }); + + toggleRelatedFields(); }); diff --git a/openwisp_controller/config/static/config/js/widget.js b/openwisp_controller/config/static/config/js/widget.js index 65a92e3bd..9bcbe457a 100644 --- a/openwisp_controller/config/static/config/js/widget.js +++ b/openwisp_controller/config/static/config/js/widget.js @@ -1,885 +1,975 @@ -'use strict'; +"use strict"; (function ($) { - django._schemas = new Map(); - django._jsonEditors = new Map(); - var inFullScreenMode = false, - prevDefaultValues = {}, - defaultValuesUrl = window.location.origin + '/admin/config/device/get-default-values/', - removeDefaultValues = function(contextValue, defaultValues) { - // remove default values when template is removed. - Object.keys(prevDefaultValues).forEach(function (key) { - if (!defaultValues.hasOwnProperty(key) && contextValue.hasOwnProperty(key)) { - delete contextValue[key]; - } - }); - return contextValue; + django._schemas = new Map(); + django._jsonEditors = new Map(); + var inFullScreenMode = false, + prevDefaultValues = {}, + defaultValuesUrl = + window.location.origin + "/admin/config/device/get-default-values/", + removeDefaultValues = function (contextValue, defaultValues) { + // remove default values when template is removed. + Object.keys(prevDefaultValues).forEach(function (key) { + if ( + !defaultValues.hasOwnProperty(key) && + contextValue.hasOwnProperty(key) + ) { + delete contextValue[key]; + } + }); + return contextValue; }, - removeUnchangedDefaultValues = function(contextValue) { - // This method is called on the submit event to remove any template default - // value which was not customized which allows to avoid saving redundant data - Object.keys(prevDefaultValues).forEach(function (key) { - if (prevDefaultValues[key] == contextValue[key]) { - delete contextValue[key]; - } - }); - return contextValue; + removeUnchangedDefaultValues = function (contextValue) { + // This method is called on the submit event to remove any template default + // value which was not customized which allows to avoid saving redundant data + Object.keys(prevDefaultValues).forEach(function (key) { + if (prevDefaultValues[key] == contextValue[key]) { + delete contextValue[key]; + } + }); + return contextValue; }, - updateContext = function (isLoading, defaultValues={}) { - var contextField = $('#id_config-0-context'), - systemContextField = $('#system_context'); - if (contextField.length && systemContextField.length) { - var contextValue = JSON.parse(contextField.val()), - systemContextValue = JSON.parse(systemContextField.text()); - // add default values to contextValue - Object.keys(defaultValues).forEach(function (key) { - if ( - // Handles the case when different templates and group contains the keys. - // If the contextValue was set by a template or group, then - // override the value. - (prevDefaultValues.hasOwnProperty(key) && prevDefaultValues[key] !== defaultValues[key]) || - // Gives precedence to device's context (saved in database) - (!contextValue.hasOwnProperty(key) && - // Gives precedence to systemContextValue. - // But if the default value is equal to the system context value, - // then add the variable in the contextValue. This allows users - // to override the value. - (!systemContextValue.hasOwnProperty(key) || systemContextValue[key] === defaultValues[key]) - ) - ) { - contextValue[key] = defaultValues[key]; - } - }); - - if (isLoading && django._owcInitialValues) { - django._owcInitialValues['config-0-context'] = removeDefaultValues( - contextValue, - defaultValues - ); - } + updateContext = function (isLoading, defaultValues = {}) { + var contextField = $("#id_config-0-context"), + systemContextField = $("#system_context"); + if (contextField.length && systemContextField.length) { + var contextValue = JSON.parse(contextField.val()), + systemContextValue = JSON.parse(systemContextField.text()); + // add default values to contextValue + Object.keys(defaultValues).forEach(function (key) { + if ( + // Handles the case when different templates and group contains the keys. + // If the contextValue was set by a template or group, then + // override the value. + (prevDefaultValues.hasOwnProperty(key) && + prevDefaultValues[key] !== defaultValues[key]) || + // Gives precedence to device's context (saved in database) + (!contextValue.hasOwnProperty(key) && + // Gives precedence to systemContextValue. + // But if the default value is equal to the system context value, + // then add the variable in the contextValue. This allows users + // to override the value. + (!systemContextValue.hasOwnProperty(key) || + systemContextValue[key] === defaultValues[key])) + ) { + contextValue[key] = defaultValues[key]; + } + }); - contextField.val(JSON.stringify( - removeDefaultValues(contextValue, defaultValues), - null, - 4 - )); - prevDefaultValues = JSON.parse(JSON.stringify(defaultValues)); - $('.flat-json-toggle-textarea').trigger('click'); - $('.flat-json-toggle-textarea').trigger('click'); + if (isLoading && django._owcInitialValues) { + django._owcInitialValues["config-0-context"] = removeDefaultValues( + contextValue, + defaultValues, + ); } + + contextField.val( + JSON.stringify( + removeDefaultValues(contextValue, defaultValues), + null, + 4, + ), + ); + prevDefaultValues = JSON.parse(JSON.stringify(defaultValues)); + $(".flat-json-toggle-textarea").trigger("click"); + $(".flat-json-toggle-textarea").trigger("click"); + } }, - getDefaultValues = function (isLoading=false) { - var templatePks = $('input[name="config-0-templates"]').attr('value'), - groupPk = $('#id_group').val(), - orgPk = $('#id_organization').val(); - if (templatePks) { - var payload = {pks: templatePks}; - if (groupPk) { - payload.group = groupPk; - } - if (orgPk) { - payload.organization = orgPk; - } - $.get(defaultValuesUrl, payload) - .done( function (data) { - updateContext(isLoading, data.default_values); - }) - .fail(function (data) { - window.console.error(data.responseText); - }); - } else { - // remove existing default values if no template is selected - updateContext(isLoading, {}); + getDefaultValues = function (isLoading = false) { + var templatePks = $('input[name="config-0-templates"]').attr("value"), + groupPk = $("#id_group").val(), + orgPk = $("#id_organization").val(); + if (templatePks) { + var payload = { pks: templatePks }; + if (groupPk) { + payload.group = groupPk; + } + if (orgPk) { + payload.organization = orgPk; } + $.get(defaultValuesUrl, payload) + .done(function (data) { + updateContext(isLoading, data.default_values); + }) + .fail(function (data) { + window.console.error(data.responseText); + }); + } else { + // remove existing default values if no template is selected + updateContext(isLoading, {}); + } }, toggleFullScreen = function () { - var advanced = $('.advanced_editor:visible'); - if (!inFullScreenMode) { - advanced.addClass('full-screen'); - $('html').addClass('editor-full'); - inFullScreenMode = true; - advanced.find('.jsoneditor-menu a').show(); - advanced.find('.jsoneditor-menu label').show(); - } - else { - advanced.removeClass('full-screen'); - $('html').removeClass('editor-full'); - inFullScreenMode = false; - advanced.find('.jsoneditor-menu a').hide(); - advanced.find('.jsoneditor-menu label').hide(); - } + var advanced = $(".advanced_editor:visible"); + if (!inFullScreenMode) { + advanced.addClass("full-screen"); + $("html").addClass("editor-full"); + inFullScreenMode = true; + advanced.find(".jsoneditor-menu a").show(); + advanced.find(".jsoneditor-menu label").show(); + } else { + advanced.removeClass("full-screen"); + $("html").removeClass("editor-full"); + inFullScreenMode = false; + advanced.find(".jsoneditor-menu a").hide(); + advanced.find(".jsoneditor-menu label").hide(); + } }; - var initAdvancedEditor = function (target, data, schema, disableSchema) { - var advanced = $(target).prev('.advanced_editor'); - if (advanced.length === 0){ - advanced = $('
'); - $(advanced).insertBefore($(target)); - } else { - advanced.empty(); - } - $(target).hide(); - // if disableSchema is true, do not validate againsts schema, default is false - schema = disableSchema ? {} : schema; - var options = { - mode: 'code', - theme: 'ace/theme/tomorrow_night_bright', - indentation: 4, - onEditable: function () { - return true; - }, - onChange: function () { - $(target).val(editor.getText()); - }, - schema: schema - }; - - var editor = new advancedJSONEditor(advanced.get(0), options, data); - editor.aceEditor.setOptions({ - fontSize: 14, - showInvisibles: true - }); - // remove powered by ace link - advanced.find('.jsoneditor-menu a').remove(); - // add listener to .screen-mode button for toggleScreenMode - advanced.parents('.field-config').find('.screen-mode').click(toggleFullScreen); - // add controls to the editor header - advanced.find('.jsoneditor-menu') - .append($(` back to normal mode`))
- .append(advanced.parents('.field-config').find('#netjsonconfig-hint')
- .clone(true)
- .attr('id', 'netjsonconfig-hint-advancedmode'));
- // hide on esc button
- $('html').on('keydown', function (e) {
- if (inFullScreenMode && e.keyCode === 27) { // ESC
- $('.advanced_editor:visible').find('.jsoneditor-exit').click();
- }
- });
- return editor;
+ var initAdvancedEditor = function (target, data, schema, disableSchema) {
+ var advanced = $(target).prev(".advanced_editor");
+ if (advanced.length === 0) {
+ advanced = $('');
+ $(advanced).insertBefore($(target));
+ } else {
+ advanced.empty();
+ }
+ $(target).hide();
+ // if disableSchema is true, do not validate againsts schema, default is false
+ schema = disableSchema ? {} : schema;
+ var options = {
+ mode: "code",
+ theme: "ace/theme/tomorrow_night_bright",
+ indentation: 4,
+ onEditable: function () {
+ return true;
+ },
+ onChange: function () {
+ $(target).val(editor.getText());
+ },
+ schema: schema,
};
- // returns true if JSON is well formed
- // and valid according to its schema
- var isValidJson = function (advanced) {
- var valid,
- cleanedData;
- try {
- cleanedData = window.cleanData(advanced.get());
- valid = advanced.validateSchema(cleanedData);
- } catch (e) {
- valid = false;
- }
- return valid;
- };
+ var editor = new advancedJSONEditor(advanced.get(0), options, data);
+ editor.aceEditor.setOptions({
+ fontSize: 14,
+ showInvisibles: true,
+ });
+ // remove powered by ace link
+ advanced.find(".jsoneditor-menu a").remove();
+ // add listener to .screen-mode button for toggleScreenMode
+ advanced
+ .parents(".field-config")
+ .find(".screen-mode")
+ .click(toggleFullScreen);
+ // add controls to the editor header
+ advanced
+ .find(".jsoneditor-menu")
+ .append(
+ $(
+ ` back to normal mode`,
+ ),
+ )
+ .append(
+ advanced
+ .parents(".field-config")
+ .find("#netjsonconfig-hint")
+ .clone(true)
+ .attr("id", "netjsonconfig-hint-advancedmode"),
+ );
+ // hide on esc button
+ $("html").on("keydown", function (e) {
+ if (inFullScreenMode && e.keyCode === 27) {
+ // ESC
+ $(".advanced_editor:visible").find(".jsoneditor-exit").click();
+ }
+ });
+ return editor;
+ };
- var alertInvalidJson = function () {
- alert("The JSON entered is not valid");
- };
+ // returns true if JSON is well formed
+ // and valid according to its schema
+ var isValidJson = function (advanced) {
+ var valid, cleanedData;
+ try {
+ cleanedData = window.cleanData(advanced.get());
+ valid = advanced.validateSchema(cleanedData);
+ } catch (e) {
+ valid = false;
+ }
+ return valid;
+ };
- var getEditorErrors = function (editor) {
- var value = JSON.parse(JSON.stringify(editor.getValue()));
- var cleanedData = window.cleanData(value),
- error = editor.validate(cleanedData);
- return error;
- };
+ var alertInvalidJson = function () {
+ alert("The JSON entered is not valid");
+ };
- var handleMaxLengthAttr = function() {
- $('.jsoneditor input[maxlength]:not(.has-max-length)').map((i, field) => {
- $(field).attr('data-maxlength', $(field).attr('maxLength'));
- });
- $('.jsoneditor input[maxlength]:not(.has-max-length)').addClass('has-max-length');
- };
+ var getEditorErrors = function (editor) {
+ var value = JSON.parse(JSON.stringify(editor.getValue()));
+ var cleanedData = window.cleanData(value),
+ error = editor.validate(cleanedData);
+ return error;
+ };
- var validateOnDefaultValuesChange = function (editor, advancedEditor) {
- window.isContextValid();
- if (inFullScreenMode) {
- advancedEditor.validate();
- } else {
- editor.onChange();
- }
+ var handleMaxLengthAttr = function () {
+ $(".jsoneditor input[maxlength]:not(.has-max-length)").map((i, field) => {
+ $(field).attr("data-maxlength", $(field).attr("maxLength"));
+ });
+ $(".jsoneditor input[maxlength]:not(.has-max-length)").addClass(
+ "has-max-length",
+ );
+ };
+
+ var validateOnDefaultValuesChange = function (editor, advancedEditor) {
+ window.isContextValid();
+ if (inFullScreenMode) {
+ advancedEditor.validate();
+ } else {
+ editor.onChange();
+ }
+ };
+
+ var loadUi = function (el, backend, schemas, setInitialValue) {
+ var field = $(el),
+ form = field.parents("form").eq(0),
+ value = JSON.parse(field.val()),
+ id = field.attr("id") + "_jsoneditor",
+ initialField = $("#initial-" + field.attr("id")),
+ container = field.parents(".form-row").eq(0),
+ labelText = container.find("label:not(#netjsonconfig-hint)").text(),
+ startval = $.isEmptyObject(value) ? null : value,
+ editorContainer = $("#" + id),
+ html,
+ editor,
+ options,
+ wrapper,
+ header,
+ getEditorValue,
+ updateRaw,
+ advancedEditor,
+ $advancedEl,
+ contextField,
+ flatJsonField;
+ // inject editor unless already present
+ if (!editorContainer.length) {
+ html = '