fix: hardcode cookie-name and update expiry to 90days

overhangio · Oct 8, 2024 · c177f70 · c177f70
1 parent 7aa78b9
commit c177f70
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 47 deletions.
diff --git a/tutorindigo/plugin.py b/tutorindigo/plugin.py
@@ -21,7 +21,7 @@
         "VERSION": __version__,
         "WELCOME_MESSAGE": "The place for all your online learning",
         "PRIMARY_COLOR": "#15376D",  # Indigo
-        "THEME_COOKIE_NAME": "indigo-theme-cookie",
+        "ENABLE_DARK_TOGGLE": True,
         # Footer links are dictionaries with a "title" and "url"
         # To remove all links, run:
         # tutor config save --set INDIGO_FOOTER_NAV_LINKS=[]
@@ -193,16 +193,16 @@ def _override_openedx_docker_image(
     if filename in PIPELINE['JAVASCRIPT']:
         PIPELINE['JAVASCRIPT'][filename]['source_filenames'] += dark_theme_filepath
 
-{% if INDIGO_THEME_COOKIE_NAME %}
-MFE_CONFIG['THEME_COOKIE_NAME'] = '{{ INDIGO_THEME_COOKIE_NAME }}'
+{% if INDIGO_ENABLE_DARK_TOGGLE %}
+MFE_CONFIG['INDIGO_ENABLE_DARK_TOGGLE'] = True
 {% endif %}
 """,
         ),
         (
             "openedx-lms-production-settings",
             """
-{% if INDIGO_THEME_COOKIE_NAME %}
-MFE_CONFIG['THEME_COOKIE_NAME'] = '{{ INDIGO_THEME_COOKIE_NAME }}'
+{% if INDIGO_ENABLE_DARK_TOGGLE %}
+MFE_CONFIG['INDIGO_ENABLE_DARK_TOGGLE'] = True
 {% endif %}
 """,
         ),

diff --git a/tutorindigo/templates/indigo/env.config.jsx b/tutorindigo/templates/indigo/env.config.jsx
@@ -5,14 +5,29 @@ import Footer from '@edly-io/indigo-frontend-component-footer';
 import { getConfig } from '@edx/frontend-platform';
 import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
 
+let themeCookie = 'indigo-toggle-dark';
+let themeCookieExpiry = 90; // days
 
 const AddDarkTheme = () => {
   const cookies = new Cookies();
-  const themeCookieName = getConfig().THEME_COOKIE_NAME;
+  const isThemeToggleEnabled = getConfig().INDIGO_ENABLE_DARK_TOGGLE;
+
+  const getCookieExpiry = () => {
+    const today = new Date();
+    return new Date(today.getFullYear(), today.getMonth(), today.getDate() + themeCookieExpiry);
+  };
+
+  const getCookieOptions = () => {
+    const serverURL = new URL(getConfig().LMS_BASE_URL);
+    const options = { domain: serverURL.hostname, path: '/', expires: getCookieExpiry() };
+    return options;
+  };
 
   useEffect(() => {
-    if (themeCookieName && cookies.get(themeCookieName) === 'dark') {
+    const theme =  cookies.get(themeCookie);
+    if (isThemeToggleEnabled && theme === 'dark') {
       document.body.classList.add('indigo-dark-theme');
+      cookies.set(themeCookie, theme, getCookieOptions());      //  on page load, update expiry
     }
   }, []);
 

diff --git a/tutorindigo/templates/indigo/lms/static/js/dark-theme.js b/tutorindigo/templates/indigo/lms/static/js/dark-theme.js
@@ -1,20 +1,25 @@
 $(document).ready(function() {
     'use strict';
 
-    {% if INDIGO_THEME_COOKIE_NAME %}
+    let themeCookie = 'indigo-toggle-dark';
+
     function applyThemeOnPage(){
-      const theme = $.cookie("{{ INDIGO_THEME_COOKIE_NAME }}");
-      $('body').toggleClass("indigo-dark-theme", theme === 'dark');
+      const theme = $.cookie(themeCookie);
+      {% if INDIGO_ENABLE_DARK_TOGGLE %}
+      $('body').toggleClass("indigo-dark-theme", theme === 'dark');       // append or remove dark-class based on cookie-value
+      // update expiry
+      $.cookie(themeCookie, theme, { domain: window.location.hostname, expires: 90, path: '/' });
+      {% endif %}
     }
 
     function setThemeToggleBtnState(){
-      const theme = $.cookie("{{ INDIGO_THEME_COOKIE_NAME }}");
+      const theme = $.cookie(themeCookie);
       $("#toggle-switch-input").prop("checked", theme === 'dark');
     }
 
     function toggleTheme(){
-      const themeValue = $.cookie("{{ INDIGO_THEME_COOKIE_NAME }}") === 'dark' ? 'light' : 'dark';
-      $.cookie("{{ INDIGO_THEME_COOKIE_NAME }}", themeValue, { domain: window.location.hostname, expires: 7, path: '/' });
+      const themeValue = $.cookie(themeCookie) === 'dark' ? 'light' : 'dark';
+      $.cookie(themeCookie, themeValue, { domain: window.location.hostname, expires: 90, path: '/' });
 
       applyThemeOnPage();
     }
@@ -30,5 +35,4 @@ $(document).ready(function() {
     setThemeToggleBtnState(); // check/uncheck toggle btn based on theme
 
     $('#toggle-switch').on('change', toggleTheme);
-    {% endif %}
 });
diff --git a/tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss b/tutorindigo/templates/indigo/lms/static/sass/extra/_header.scss
@@ -172,7 +172,7 @@ header.global-header {
 
 .theme-toggle-button{
     position: relative;
-    display: flex;
+    display: {% if INDIGO_ENABLE_DARK_TOGGLE %}flex{% else %}none{% endif %};
     align-items: center;
     margin-right: 0 !important;
 

diff --git a/tutorindigo/templates/indigo/lms/templates/header/navbar-authenticated.html b/tutorindigo/templates/indigo/lms/templates/header/navbar-authenticated.html
@@ -54,22 +54,7 @@
     % endif
   </div>
   <div class="secondary d-flex align-items-center">
-    {% if INDIGO_THEME_COOKIE_NAME %}
-      <div class="theme-toggle-button mr-4">
-        <div class="light-theme-icon">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" focusable="false" aria-hidden="true"><path d="m6.76 4.84-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7 1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91 1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z" fill="currentColor"></path></svg>
-        </div>
-        <div id="toggle-switch">
-          <label class="switch">
-            <input id="toggle-switch-input" type="checkbox">
-            <span class="slider round"></span>
-          </label>
-        </div>
-        <div class="dark-theme-icon">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" focusable="false" aria-hidden="true"><path d="M14 2c1.82 0 3.53.5 5 1.35-2.99 1.73-5 4.95-5 8.65s2.01 6.92 5 8.65A9.973 9.973 0 0 1 14 22C8.48 22 4 17.52 4 12S8.48 2 14 2z" fill="currentColor"></path></svg>
-        </div> 
-      </div>
-    {% endif %}
+    <%include file="./theme-toggle-button.html" />
     <%include file="user_dropdown.html"/>
   </div>
 </div>
diff --git a/tutorindigo/templates/indigo/lms/templates/header/navbar-not-authenticated.html b/tutorindigo/templates/indigo/lms/templates/header/navbar-not-authenticated.html
@@ -43,22 +43,7 @@
   % endif
   </div>
   <div class="secondary d-flex align-items-center">
-    {% if INDIGO_THEME_COOKIE_NAME %}
-    <div class="theme-toggle-button mr-4">
-      <div class="light-theme-icon">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" focusable="false" aria-hidden="true"><path d="m6.76 4.84-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7 1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91 1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z" fill="currentColor"></path></svg>
-      </div>
-      <div id="toggle-switch">
-        <label class="switch">
-          <input id="toggle-switch-input" type="checkbox">
-          <span class="slider round"></span>
-        </label>
-      </div>
-      <div class="dark-theme-icon">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" focusable="false" aria-hidden="true"><path d="M14 2c1.82 0 3.53.5 5 1.35-2.99 1.73-5 4.95-5 8.65s2.01 6.92 5 8.65A9.973 9.973 0 0 1 14 22C8.48 22 4 17.52 4 12S8.48 2 14 2z" fill="currentColor"></path></svg>
-      </div> 
-    </div>
-    {% endif %}
+    <%include file="./theme-toggle-button.html" />
     <div class="btn-holder">
       % if allows_login:
         % if allow_public_account_creation and not disable_register_button:

diff --git a/tutorindigo/templates/indigo/lms/templates/header/theme-toggle-button.html b/tutorindigo/templates/indigo/lms/templates/header/theme-toggle-button.html
@@ -0,0 +1,14 @@
+<div class="theme-toggle-button mr-4">
+    <div class="light-theme-icon">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" focusable="false" aria-hidden="true"><path d="m6.76 4.84-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7 1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91 1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z" fill="currentColor"></path></svg>
+    </div>
+    <div id="toggle-switch">
+      <label class="switch">
+        <input id="toggle-switch-input" type="checkbox">
+        <span class="slider round"></span>
+      </label>
+    </div>
+    <div class="dark-theme-icon">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" focusable="false" aria-hidden="true"><path d="M14 2c1.82 0 3.53.5 5 1.35-2.99 1.73-5 4.95-5 8.65s2.01 6.92 5 8.65A9.973 9.973 0 0 1 14 22C8.48 22 4 17.52 4 12S8.48 2 14 2z" fill="currentColor"></path></svg>
+    </div> 
+</div>