Merge pull request #594 from matematikk-mooc/aj/DIT-487

DIT-487: Added function to swtich between loading theme assets from localhost and server
matematikk-mooc · Dec 12, 2024 · 244f932 · 244f932
2 parents dc9e7fb + ec56f88
commit 244f932
Show file tree

Hide file tree

Showing 5 changed files with 290 additions and 123 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,27 @@
+Provide a short description about the changes.
+
+---
+
+Added
+
+-   List new features, functionality
+
+Changed
+
+-   List changes to existing functionality
+
+Removed
+
+-   List features or functionality removed
+
+Fixed
+
+-   List features or functionality that has been fixed
+
+---
+
+## Checklist
+
+-   [ ] Add a short description of the changes. (will be used for public changelog)
+-   [ ] Fill out Added, Changed, Removed, Fixed and remove any unused lists (will be used for public changelog)
+-   [ ] Make sure both security and lint tests have passed since continue-on-error is enabled.
diff --git a/src/js/account-theme.js b/src/js/account-theme.js
@@ -3,12 +3,34 @@ import { createApp } from 'vue';
 import utilRoot from './utilRoot';
 
 var udirDesignLoaded;
-
+var themeCookieName = 'use_localhost_theme';
 
 jQuery.extend({
+  getCookie: function (name) {
+    var value = '; ' + document.cookie;
+    var parts = value.split('; ' + name + '=');
+    if (parts.length === 2) return parts.pop().split(';').shift();
+    return null;
+  },
+
+  setCookie: function (name, value, days) {
+    var expires = '';
+    if (days) {
+      var date = new Date();
+      date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+      expires = '; expires=' + date.toUTCString();
+    }
+    document.cookie = name + '=' + value + expires + '; path=/';
+  },
+
+  deleteCookie: function (name) {
+    document.cookie =
+      name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+  },
+
   getScript: function (url, callback) {
-    var head = document.getElementsByTagName("head")[0];
-    var script = document.createElement("script");
+    var head = document.getElementsByTagName('head')[0];
+    var script = document.createElement('script');
     script.src = url;
 
     // Handle Script loading
@@ -20,8 +42,8 @@ jQuery.extend({
         if (
           !done &&
           (!this.readyState ||
-            this.readyState == "loaded" ||
-            this.readyState == "complete")
+            this.readyState == 'loaded' ||
+            this.readyState == 'complete')
         ) {
           done = true;
           if (callback) callback();
@@ -40,24 +62,103 @@ jQuery.extend({
 });
 
 jQuery(document).ready(function ($) {
-  console.log("START.");
+  console.log('START.');
 
   var redirected = false;
+  var themeSettings = {
+    url: SERVER,
+    js: DESIGNJS,
+    css: DESIGNCSS,
+  };
+
+  var useLocalhostTheme = $.getCookie(themeCookieName) === 'true';
+  if (useLocalhostTheme) {
+    themeSettings.url = 'http://localhost:9000/';
+    themeSettings.css = 'kompetanseportalen-localhost.css';
+    themeSettings.js = 'kompetanseportalen-localhost.js';
+    console.log('Using localhost theme:', themeSettings);
+  } else {
+    console.log('Using default theme:', themeSettings);
+  }
+
+  var isBrandConfigPage =
+    window.location.pathname === '/accounts/1/brand_configs';
+  if (isBrandConfigPage) {
+    try {
+      if (isBrandConfigPage) {
+        var intervalTime = 1000;
+        var checkInterval;
+
+        function runWhenTemaVisible() {
+          var isThemeHeadingVisible = $("h1:contains('Tema')").is(':visible');
+
+          if (isThemeHeadingVisible) {
+            var content = $('#content');
+            if (content.length) {
+              var buttonWrapper = $(
+                '<div id="theme-toggle-wrapper" style="margin-bottom: 20px;display: flex;justify-content: flex-end;"></div>',
+              );
+
+              function getButtonLabel() {
+                var cookieValue = $.getCookie(themeCookieName);
+                return cookieValue === 'true'
+                  ? 'Switch to default theme'
+                  : 'Switch to localhost theme';
+              }
+
+              var themeSwitchButton = $('<button>', {
+                class: 'Button Button--primary',
+                type: 'button',
+                text: getButtonLabel(),
+                click: function () {
+                  var currentCookie = $.getCookie(themeCookieName);
+                  if (currentCookie === 'true') {
+                    $.deleteCookie(themeCookieName);
+                  } else {
+                    $.setCookie(themeCookieName, 'true', 15);
+                  }
+
+                  window.location.reload();
+                  $(this).text(getButtonLabel());
+                },
+              });
+
+              buttonWrapper.append(themeSwitchButton);
+              content.prepend(buttonWrapper);
+            }
+
+            clearInterval(checkInterval);
+          } else {
+            console.log(
+              '<h1>Tema</h1> is still not visible. Checking again...',
+            );
+          }
+        }
+
+        checkInterval = setInterval(runWhenTemaVisible, intervalTime);
+      }
+    } catch (error) {
+      console.error('Error in brand config page', error);
+    }
+  }
 
   // Redirect if necessary
-  if (document.location.pathname == "/search/all_courses" && document.location.search.includes('?enroll_code')) {
+  if (
+    document.location.pathname == '/search/all_courses' &&
+    document.location.search.includes('?enroll_code')
+  ) {
     window.location.href = '/courses' + document.location.search;
     redirected = true;
-  } else if (document.location.pathname == "/login/canvas") {
-    if (document.referrer.includes("/logout")) {
+  } else if (document.location.pathname == '/login/canvas') {
+    if (document.referrer.includes('/logout')) {
       window.location.href = '/search/all_courses';
       redirected = true;
-    } else if (!document.referrer.includes("/login/canvas")) {
-      $(".ic-Login").hide();
-/*       $("#f1_container").hide(); // Small screens */
+    } else if (!document.referrer.includes('/login/canvas')) {
+      $('.ic-Login').hide();
+      /*       $("#f1_container").hide(); // Small screens */
       redirected = utilRoot.redirectFeideAuthIfEnrollReferrer();
       if (!redirected) {
-        if (!document.location.search.includes("normalLogin=1")) {
+        if (!document.location.search.includes('normalLogin=1')) {
           if (document.getElementById('wrapper')) {
             document.getElementById('wrapper').remove();
           }
@@ -68,52 +169,53 @@ jQuery(document).ready(function ($) {
           if (parent) {
             parent.appendChild(login);
           }
-          customLogin.mount("#login-component");
+          customLogin.mount('#login-component');
         } else {
-          $(".ic-Login").show();
-          $("#f1_container").show(); // Small screens
+          $('.ic-Login').show();
+          $('#f1_container').show(); // Small screens
         }
       }
     }
-  } else if (document.location.pathname == "/courses") {
+  } else if (document.location.pathname == '/courses') {
     redirected = utilRoot.redirectToEnrollIfCodeParamPassed();
   } else if (document.location.href.indexOf('?login_success=1') != -1) {
     window.location.href = '/search/all_courses';
-  } else if (document.location.pathname == "/") {
+  } else if (document.location.pathname == '/') {
     setTimeout(function () {
-      if (!$(".ic-DashboardCard__header_hero").length) {
+      if (!$('.ic-DashboardCard__header_hero').length) {
         let html = `
         <div class="card card-body">
         <h3>Er det tomt her?</h3>
           <p>Dersom du har valgt å logge inn med Feide og ikke finner innholdet ditt kan det hende det er fordi du
           vanligvis har logget på med en annen bruker ved å bruke epost og passord. Logg ut og inn igjen ved å benytte "Ikke Feide" - knappen.
           </p>
-          <img src="${SERVER}bitmaps/nyinnlogging.png" width="70%" alt="Ny innloggingsskjerm"/>
+          <img src="${themeSettings.url}bitmaps/nyinnlogging.png" width="70%" alt="Ny innloggingsskjerm"/>
         </div>
         `;
-        document.getElementById('dashboard-activity').insertAdjacentHTML('beforebegin', html);
+        document
+          .getElementById('dashboard-activity')
+          .insertAdjacentHTML('beforebegin', html);
       }
-    }, 1000)
+    }, 1000);
   }
 
   if (!redirected) {
     if (window.udirDesignLoaded === undefined) {
       window.udirDesignLoaded = true;
-      console.log("Loading udir design.");
+      console.log('Loading udir design.');
 
-      var filename = SERVER + DESIGNCSS;
+      var filename = `${themeSettings.url}${themeSettings.css}`;
 
-      var fileref = document.createElement("link")
-      fileref.setAttribute("rel", "stylesheet")
-      fileref.setAttribute("type", "text/css")
-      fileref.setAttribute("href", filename)
+      var fileref = document.createElement('link');
+      fileref.setAttribute('rel', 'stylesheet');
+      fileref.setAttribute('type', 'text/css');
+      fileref.setAttribute('href', filename);
       fileref.onload = (_) => {
-        $.getScript(SERVER + DESIGNJS);
-      }
-      document.getElementsByTagName("head")[0].appendChild(fileref)
+        $.getScript(`${themeSettings.url}${themeSettings.js}`);
+      };
+      document.getElementsByTagName('head')[0].appendChild(fileref);
     } else {
-      console.log("Udir design already loaded.");
+      console.log('Udir design already loaded.');
     }
   }
-
 });