fix(templates): Allow to inject HTML code to the <head> tag of the pu…

…blic pages like authentication form or 404 error page
postalsys · Oct 6, 2024 · bd97a7c · bd97a7c
1 parent fca13ac
commit bd97a7c
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 7 deletions.
diff --git a/lib/routes-ui.js b/lib/routes-ui.js
@@ -1261,6 +1261,7 @@ function applyRoutes(server, call) {
                 queueKeep: (await settings.get('queueKeep')) || 0,
                 deliveryAttempts: await settings.get('deliveryAttempts'),
                 templateHeader: (await settings.get('templateHeader')) || '',
+                templateHtmlHead: (await settings.get('templateHtmlHead')) || '',
                 scriptEnv: (await settings.get('scriptEnv')) || '',
                 enableTokens: !(await settings.get('disableTokens')),
                 enableApiProxy: (await settings.get('enableApiProxy')) || false,
@@ -1324,6 +1325,7 @@ function applyRoutes(server, call) {
                     serviceSecret: request.payload.serviceSecret,
                     queueKeep: request.payload.queueKeep,
                     templateHeader: request.payload.templateHeader,
+                    templateHtmlHead: request.payload.templateHtmlHead,
                     scriptEnv: request.payload.scriptEnv,
                     disableTokens: !request.payload.enableTokens,
                     enableApiProxy: request.payload.enableApiProxy,
@@ -1431,6 +1433,7 @@ function applyRoutes(server, call) {
                     queueKeep: settingsSchema.queueKeep.default(0),
                     deliveryAttempts: settingsSchema.deliveryAttempts.default(DEFAULT_DELIVERY_ATTEMPTS),
                     templateHeader: settingsSchema.templateHeader.default(''),
+                    templateHtmlHead: settingsSchema.templateHtmlHead.default(''),
                     scriptEnv: settingsSchema.scriptEnv.default(''),
                     enableApiProxy: settingsSchema.enableApiProxy.default(false),
                     trackOpens: settingsSchema.trackOpens.default(false),
@@ -1844,7 +1847,8 @@ return true;`
             return h.view(
                 'config/service-preview',
                 {
-                    embeddedTemplateHeader: request.payload.templateHeader
+                    embeddedTemplateHeader: request.payload.templateHeader,
+                    embeddedTemplateHtmlHeadr: request.payload.templateHtmlHead
                 },
                 {
                     layout: 'public'
@@ -1865,7 +1869,8 @@ return true;`
                 },
 
                 payload: Joi.object({
-                    templateHeader: settingsSchema.templateHeader.default('')
+                    templateHeader: settingsSchema.templateHeader.default(''),
+                    templateHtmlHead: settingsSchema.templateHtmlHead.default('')
                 })
             }
         }

diff --git a/lib/schemas.js b/lib/schemas.js
@@ -332,6 +332,12 @@ const settingsSchema = {
         .max(1024 * 1024)
         .description('HTML code displayed on the top of public pages like the hosted authentication form'),
 
+    templateHtmlHead: Joi.string()
+        .empty('')
+        .trim()
+        .max(1024 * 1024)
+        .description('HTML code to the HEAD tag of public pages like the hosted authentication form'),
+
     scriptEnv: Joi.string()
         .empty('')
         .trim()

diff --git a/views/config/service.hbs b/views/config/service.hbs
@@ -304,15 +304,18 @@
         </div>
         <div class="card-body">
 
+            <p>These settings apply to all publicly accessible pages, such as 404 error pages, the hosted authentication
+                form, and the virtual mailing list unsubscribe page.</p>
+
             <div class="form-group">
 
                 <div class="text-muted float-right code-link">[<a href="/admin/iframe/docs#/Settings/postV1Settings"
                         target="_blank" rel="noopener noreferrer">templateHeader</a>]</div>
 
-                <label>Template header for public pages (HTML code)</label>
+                <label>Header HTML for Public Pages</label>
 
-                <input type="hidden" class="{{#if errors.templateHeaderElement}}is-invalid{{/if}}"
-                    id="templateHeaderElement" name="templateHeader" value="{{values.templateHeader}}">
+                <input type="hidden" class="{{#if errors.templateHeader}}is-invalid{{/if}}" id="templateHeaderElement"
+                    name="templateHeader" value="{{values.templateHeader}}">
 
                 <div id="editor-html" class="code-editor"></div>
                 <div class="editor-embed-block">
@@ -328,10 +331,38 @@
                 <span class="invalid-feedback">{{errors.templateHeader}}</span>
                 {{/if}}
 
-                <small class="form-text text-muted">Insert here the HTML code you want to display <u
+                <small class="form-text text-muted">Enter the HTML code you want to display at the <u
                         data-toggle="popover" data-trigger="hover" data-html="true"
                         data-content="&#x3C;img src=&#x22;/static/preview/header-template.png&#x22;&#x3E;"
-                        style="cursor: default;">on top of public pages</u> like the hosted authentication form.</small>
+                        style="cursor: default;">top of public pages</u> (e.g., the hosted authentication form).</small>
+            </div>
+
+            <div class="form-group">
+
+                <div class="text-muted float-right code-link">[<a href="/admin/iframe/docs#/Settings/postV1Settings"
+                        target="_blank" rel="noopener noreferrer">templateHtmlHead</a>]</div>
+
+                <label>HTML Code for the &lt;head&gt; Section of Public Pages</label>
+
+                <input type="hidden" class="{{#if errors.templateHtmlHead}}is-invalid{{/if}}"
+                    id="templateHtmlHeadElement" name="templateHtmlHead" value="{{values.templateHtmlHead}}">
+
+                <div id="editor-html-head" class="code-editor"></div>
+                <div class="editor-embed-block">
+                    <div class="editor-embed-content editor-embed-content-left">
+                        HTML content
+                    </div>
+                    <div class="editor-embed-content editor-embed-content-right">
+                        <a href="#" class="toggle-fullscreen" data-target="editor-html-head">Toggle fullscreen</a>
+                    </div>
+                </div>
+
+                {{#if errors.templateHtmlHead}}
+                <span class="invalid-feedback">{{errors.templateHtmlHead}}</span>
+                {{/if}}
+
+                <small class="form-text text-muted">Enter the HTML code you want to include within the &lt;head&gt;
+                    section of public pages (e.g., the hosted authentication form).</small>
             </div>
 
         </div>
@@ -572,9 +603,22 @@
         editorEnv.session.setMode("ace/mode/json");
         editorEnv.session.setValue(document.getElementById('scriptEnvElement').value);
 
+        const editorHtmlHead = ace.edit("editor-html-head", {
+            enableBasicAutocompletion: true,
+            enableSnippets: false,
+            enableLiveAutocompletion: false,
+            useWorker: true
+        });
+        editors.set("editor-html-head", editorHtmlHead);
+
+        editorHtmlHead.setTheme("ace/theme/xcode");
+        editorHtmlHead.session.setMode("ace/mode/handlebars");
+        editorHtmlHead.session.setValue(document.getElementById('templateHtmlHeadElement').value);
+
         document.getElementById('settings-form').addEventListener('submit', () => {
             document.getElementById('templateHeaderElement').value = editorHtml.getValue();
             document.getElementById('scriptEnvElement').value = editorEnv.getValue();
+            document.getElementById('templateHtmlHeadElement').value = editorHtmlHead.getValue();
         });
 
         for (let toggleElm of document.querySelectorAll('.toggle-fullscreen')) {

diff --git a/views/layout/public.hbs b/views/layout/public.hbs
@@ -29,6 +29,10 @@
     <meta http-equiv="refresh" content="0;URL='{{httpRedirectUrl}}'" />
     {{/if}}
 
+    {{#if embeddedTemplateHtmlHead}}
+    {{{embeddedTemplateHtmlHead}}}
+    {{/if}}
+
 </head>
 
 <body class="bg-gradient-primary">

diff --git a/workers/api.js b/workers/api.js
@@ -8455,6 +8455,7 @@ ${now}`,
                 disableTokens,
                 tract,
                 templateHeader: embeddedTemplateHeader,
+                templateHtmlHead: embeddedTemplateHtmlHead,
                 documentStoreEnabled: showDocumentStore,
                 serviceUrl,
                 language,
@@ -8471,6 +8472,7 @@ ${now}`,
                 'disableTokens',
                 'tract',
                 'templateHeader',
+                'templateHtmlHead',
                 'documentStoreEnabled',
                 'serviceUrl',
                 'language',
@@ -8629,6 +8631,7 @@ ${now}`,
                 packageData,
                 systemAlerts,
                 embeddedTemplateHeader,
+                embeddedTemplateHtmlHead,
                 currentYear: new Date().getFullYear(),
                 showDocumentStore,
                 updateBrowserInfo: !serviceUrl || !language || !timezone,