#696 - made macro and javascript more generic

BudgetMasterServer/src/main/resources/static/js/settingsContainers.js

+function initSettingsContainer(formName, containerId)
+{
+    $("[name='" + formName + "']").submit(function(event)
+    {
+        let form = document.getElementsByName(formName)[0];
+
+        $.ajax({
+            type: 'POST',
+            url: form.action.formAction,
+            data: new FormData(form),
+            processData: false,
+            contentType: false,
+            success: function(response)
+            {
+                $('#' + containerId).html(response);
+                $('.tooltipped').tooltip();
+
+                let toastContent = document.querySelector('#' + containerId + ' .securityContainerToastContent').innerHTML.trim();
+                if(toastContent)
+                {
+                    let data = JSON.parse(toastContent);
+                    M.toast({
+                        html: data['localizedMessage'],
+                        classes: data['classes']
+                    });
+                }
+            },
+            error: function(response)
+            {
+                M.toast({
+                    html: "Error saving settings",
+                    classes: 'red'
+                });
+                console.error(response);
+            }
+        });
+
+        event.preventDefault();
+    });
+}

BudgetMasterServer/src/main/resources/static/js/settingsContainers/settingsSecurity.js

-$("[name='SecuritySettingsContainer']").submit(function(event)
-{
-    let form = document.getElementsByName('SecuritySettingsContainer')[0];
-
-    $.ajax({
-        type: 'POST',
-        url: form.action.formAction,
-        data: new FormData(form),
-        processData: false,
-        contentType: false,
-        success: function(response)
-        {
-            $('#securitySettingsContainer').html(response);
-            $('.tooltipped').tooltip();
-
-            let toastContent = document.querySelector('#securitySettingsContainer .securityContainerToastContent').innerHTML.trim();
-            if(toastContent)
-            {
-                let data = JSON.parse(toastContent);
-                M.toast({
-                    html: data['localizedMessage'],
-                    classes: data['classes']
-                });
-            }
-        },
-        error: function(response)
-        {
-            M.toast({
-                html: "Error saving security settings",
-                classes: 'red'
-            });
-            console.error(response);
-        }
-    });
-
-    event.preventDefault();
-});

BudgetMasterServer/src/main/resources/templates/settings/containers/settingsContainer.ftl

+<#import "/spring.ftl" as s>
+
+<#macro settingsContainer formName containerId>
+    <form name="${formName}" method="post">
+        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" id="token"/>
+
+        <#nested>
+    </form>
+
+    <div class="hidden securityContainerToastContent">
+        <#if toastContent??>${toastContent}</#if>
+    </div>
+
+    <script src="<@s.url '/webjars/jquery/3.6.0/jquery.min.js'/>"></script>
+    <script src="<@s.url '/webjars/materializecss/1.0.0/js/materialize.min.js'/>"></script>
+    <script>
+        // function initSettingsContainer() is not defined on first page load since the javascript file is loaded at the end
+        if(typeof initSettingsContainer === "function")
+        {
+            initSettingsContainer('${formName}', '${containerId}');
+        }
+    </script>
+</#macro>

BudgetMasterServer/src/main/resources/templates/settings/containers/settingsSecurity.ftl

@@ -3,10 +3,10 @@
 <#import "../../helpers/header.ftl" as header>
 <@header.globals/>
 
-<#macro securitySettingsContainer>
-    <form name="SecuritySettingsContainer" method="post">
-        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" id="token"/>
+<#import "settingsContainer.ftl" as settingsContainerMacros>
 
+<#macro securitySettingsContainer>
+    <@settingsContainerMacros.settingsContainer 'SecuritySettingsContainer' 'securitySettingsContainer'>
         <#-- password -->
         <div class="row">
             <div class="input-field col s12 m12 l8 offset-l2">
@@ -30,15 +30,7 @@
                 <@header.buttonSubmit name='action' icon='save' localizationKey='save' color='background-green' formaction='/settings/save/security'/>
             </div>
         </div>
-    </form>
-
-    <div class="hidden securityContainerToastContent">
-        <#if toastContent??>${toastContent}</#if>
-    </div>
-
-    <script src="<@s.url '/webjars/jquery/3.6.0/jquery.min.js'/>"></script>
-    <script src="<@s.url '/webjars/materializecss/1.0.0/js/materialize.min.js'/>"></script>
-    <script src="<@s.url '/js/settingsContainers/settingsSecurity.js'/>"></script>
+    </@settingsContainerMacros.settingsContainer>
 </#macro>
 
 <@securitySettingsContainer/>
\ No newline at end of file

BudgetMasterServer/src/main/resources/templates/settings/settings.ftl

@@ -286,5 +286,10 @@
         <@scripts.scripts/>
         <script src="<@s.url '/js/helpers.js'/>"></script>
         <script src="<@s.url '/js/settings.js'/>"></script>
+        <script src="<@s.url '/js/settingsContainers.js'/>"></script>
+
+        <script>
+            initSettingsContainer('SecuritySettingsContainer', 'securitySettingsContainer');
+        </script>
     </@header.body>
 </html>