refactored to comply with new CSP

Ticket: SEC-1051 Changelog: None Signed-off-by: Mikita Pilinka <mikita.pilinka@northern.tech>
cfengine · Jun 27, 2024 · a995b3a · a995b3a
1 parent 8d1fc1c
commit a995b3a
Show file tree

Hide file tree

Showing 10 changed files with 260 additions and 153 deletions.
diff --git a/static/js/cookie-consent-listener.js b/static/js/cookie-consent-listener.js
@@ -1,6 +1,5 @@
 let gaInitialized = false;
 document.addEventListener('cookieconsent_allowed', () => {
-    console.log('allowed');
     if (gaInitialized === true) return;
     const script = document.createElement('script');
     script.src = 'https://www.googletagmanager.com/gtag/js?id=G-TW89K2P8L4';

diff --git a/static/js/cookie-consent.js b/static/js/cookie-consent.js
@@ -31,10 +31,10 @@ const cookieConsent = (function () {
                     View our <a target="_blank" href="https://northern.tech/legal/cookies">cookie policy</a>
                 </div>
                 <div class="cookie-consent-buttons">
-                    <a class="btn btn-default" onclick="cookieConsent.deny()" href="javascript:void(0)">
+                    <a class="btn btn-default" id="cookie-decline" href="javascript:void(0)">
                         Decline
                     </a>
-                    <a class="btn btn-primary" onclick="cookieConsent.allow()" href="javascript:void(0)">
+                    <a class="btn btn-primary" id="cookie-allow" href="javascript:void(0)">
                         Allow
                     </a>
                 </div>
@@ -49,6 +49,8 @@ const cookieConsent = (function () {
         const wrapper = document.createElement("div");
         wrapper.innerHTML = modalHTML;
         document.body.appendChild(wrapper)
+        document.getElementById('cookie-decline').addEventListener('click', cookieConsent.deny);
+        document.getElementById('cookie-allow').addEventListener('click', cookieConsent.allow);
     }
 
 

diff --git a/static/js/main.js b/static/js/main.js
@@ -1,5 +1,5 @@
 document.querySelectorAll('[data-modal]').forEach(item => {
-    item.onclick = () => {
+    item.addEventListener('click', () => {
         const modal = document.getElementById(item.dataset.modal);
         modal.style.display = 'block';
         modal.querySelector('.btn-primary').focus();
@@ -8,22 +8,23 @@ document.querySelectorAll('[data-modal]').forEach(item => {
             dc.classList.add('close');
             setTimeout(() => dc.classList.remove('close'), 100);
         }
-    }
+    })
 })
 
-window.onclick = e => {
-    if (e.target.classList.contains('modal')) {
-        e.target.style.display = "none";
+window.addEventListener('click', (e)=>{
+    const {target} = e;
+    if (target.classList.contains('modal')) {
+        target.style.display = "none";
     }
 
-    if (!e.target.closest('.dropdown-select') || e.target.parentElement.classList.contains('dropdown-select_options')) {
+    if (!target.closest('.dropdown-select') || target.parentElement.classList.contains('dropdown-select_options')) {
         document.querySelectorAll('.dropdown-select').forEach(item => item.classList.remove('opened'))
     }
-}
+})
 
-document.querySelectorAll('.dropdown-select span').forEach(item => item.onclick = () => {
+document.querySelectorAll('.dropdown-select span').forEach(item => item.addEventListener('click', () => {
     item.closest('.dropdown-select').classList.toggle('opened')
-});
+}));
 
 const versionsDropdown = document.querySelector('.dropdown-select.versions');
 if (versionsDropdown) {
@@ -39,40 +40,41 @@ document.onkeyup = e => {
     }
 }
 
-const closeModal = (el) => el.closest('.modal').style.display = 'none';
 
 const fakeLogin = (el) => {
     el.style.display = 'none';
     el.closest('li').querySelector('.logged').style.display = 'block';
 }
 
 document.querySelectorAll('.tabs div[data-tab]').forEach(item => {
-    item.onclick = function () {
+    item.addEventListener('click', () => {
         document.querySelector('div[data-tab].active').classList.remove('active');
         item.classList.add('active');
         document.querySelector('.tabs-content.opened').classList.remove('opened');
         document.getElementById(`tab${item.dataset.tab}`).classList.add('opened');
-    }
+    })
 })
 
 
 const collapse = document.querySelector('.collapse');
 
 const dropDownHandler = function (element) {
-    const openedClass = "opened";
-    document.querySelector('li.dropdown.opened').classList.remove('opened');
-    const li = element.closest('li');
-    if (li.className.indexOf(openedClass) == -1) {
-        li.className += ` ${openedClass}`;
-    } else {
-        li.className = li.className.replace(` ${openedClass}`, "");
+    document.querySelectorAll('.dropdown-item-onclick.opened').forEach((el)=> el !== element &&  el.classList.toggle('opened') );
+
+    if(window.matchMedia("(pointer: coarse)").matches) {
+        element.classList.toggle('opened');
     }
 }
+document.querySelectorAll('.dropdown-item-onclick').forEach(element=>{
+    element.addEventListener('click', (e)=>dropDownHandler(e.target));
+})
 
-const openMenuHandler = function (collapseMenu) {
+const openMenuHandler = function () {
+    const collapseMenu = document.getElementById('openMenuToggle');
     const menu = document.querySelector('.main-menu .links');
 
     const openedClass = "opened";
+    document.querySelectorAll('.dropdown-item-onclick.opened').forEach((element)=>element.classList.toggle('opened'));
     if (collapseMenu.className.indexOf(openedClass) == -1) {
         collapseMenu.className += ` ${openedClass}`;
         menu.className += ` d-b`;
@@ -81,6 +83,7 @@ const openMenuHandler = function (collapseMenu) {
         menu.className = menu.className.replace(` d-b`, "");
     }
 }
+document.getElementById('openMenuToggle').addEventListener('click', () => openMenuHandler());
 
 const allTags = el => {
     const tags = document.querySelector('.modules-right-tags_list');
@@ -92,6 +95,10 @@ const allTags = el => {
         tags.classList.add('opened');
     }
 }
+const allTagsElement = document.getElementById('all-tags');
+allTagsElement?.addEventListener('click',(e)=>{
+    allTags(e.target);
+})
 
 let tm;
 const cl = document.querySelector('.copy-link.bi-link-45deg');
@@ -126,3 +133,15 @@ String.prototype.capitalize = function() {
 // remove all chars except alphanumeric, spaces and . , _ -
 const sanitizeString = str => str !== null ? str.replace(/[^a-z0-9\.\s,_-]/gim,"") : null;
 
+const publishModalElement = document.querySelector('[data-modal="publishModal"]');
+publishModalElement.addEventListener('click', ()=>{
+    const closeModal = (el) => el.closest('.modal').style.display = 'none';
+    document.querySelectorAll('.close-modal-click').forEach(element => {
+        element.addEventListener('click', e=> closeModal(e.target));
+    })
+    document.querySelectorAll('.opened').forEach(element=>element.classList.toggle('opened'))
+    const menu = document.querySelector('.links.d-b');
+    if (menu){
+        menu.classList.toggle('d-b');
+    }
+})