From 295afbc82d1d39551cec58447801bea5f9192a98 Mon Sep 17 00:00:00 2001
From: Sammy Ndabo <ndabosam084@gmail.com>
Date: Sat, 21 Dec 2024 20:33:19 +0200
Subject: [PATCH] ENH: implement the themes switcher logic

---
 views/default3.handlebars | 89 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 85 insertions(+), 4 deletions(-)

diff --git a/views/default3.handlebars b/views/default3.handlebars
index 1ab401da..ea8233d3 100644
--- a/views/default3.handlebars
+++ b/views/default3.handlebars
@@ -597,6 +597,7 @@
                                 <a href=# onclick="return account_showDeleteAccount()">Delete account</a><br />
                             </span>
                             <span id="accountCreateLoginTokenSpan" style="display:none"><a href=# onclick="return account_createLoginToken()">Create login token</a><br /></span>
+                            <a href=# onclick="return account_showThemesSwitcher()">Switch theme</a><br />
                         </p>
                         <br style=clear:both />
                     </div>
@@ -1065,7 +1066,7 @@
                                             <li class="ass"><a class="dropdown-item" onclick="cmtermaction(9,0,event)">User PowerShell</a></li>
                                             <li class="lin"><a class="dropdown-item" onclick="cmtermaction(1,0,event)"><b>Root Shell</b></a></li>
                                             <li class="lin"><a class="dropdown-item" onclick="cmtermaction(8,0,event)">User Shell</a></li>
-                                            <li class="lin"><a class="dropdown-item" onclick="cmtermaction(100,0,event)">Login Shell</a></li>                                          
+                                            <li class="lin"><a class="dropdown-item" onclick="cmtermaction(100,0,event)">Login Shell</a></li>
                                         </ul>
                                     </div>
                                     <div class="btn-group dropdown-center me-1" id=connectbutton2sspan>
@@ -1111,7 +1112,7 @@
                             <td class="areaFoot d-flex flex-wrap">
                                 <div class="d-flex align-items-center">
                                     <input type=button onkeypress="return false" onkeydown="return false"
-                                        class="btn btn-primary btn-sm me-1" id="ctrlcbutton" 
+                                        class="btn btn-primary btn-sm me-1" id="ctrlcbutton"
                                         value="Ctl-C" onclick="termSendKey(3,'ctrlcbutton')" />
                                     <input type=button onkeypress="return false" onkeydown="return false"
                                         class="btn btn-primary btn-sm me-1" id="ctrlxbutton"
@@ -1148,7 +1149,7 @@
                                     </span>
                                     <select id="specialkeylist" class="form-select-sm me-1" onkeypress="return false"></select>
                                     <input id="specialkeylistinput" type="button" onkeypress="return false"
-                                        class="btn btn-primary btn-sm me-1" value="Send" 
+                                        class="btn btn-primary btn-sm me-1" value="Send"
                                         title="Send the selected special key" onclick="sendSpecialKey()" />
                                 </div>
                             </td>
@@ -14183,6 +14184,86 @@
             }
         }
 
+        function account_showThemesSwitcher() {
+            if (xxdialogMode) return false;
+            var themes = [
+                { value: "default", label: "Default" },
+                { value: "cerulean", label: "Cerulean" },
+                { value: "cosmo", label: "Cosmo" },
+                { value: "cyborg", label: "Cyborg" },
+                { value: "darkly", label: "Darkly" },
+                { value: "flatly", label: "Flatly" },
+                { value: "journal", label: "Journal" },
+                { value: "litera", label: "Litera" },
+                { value: "lumen", label: "Lumen" },
+                { value: "lux", label: "Lux" },
+                { value: "materia", label: "Materia" },
+                { value: "minty", label: "Minty" },
+                { value: "morph", label: "Morph" },
+                { value: "pulse", label: "Pulse" },
+                { value: "sandstone", label: "Sandstone" },
+                { value: "simplex", label: "Simplex" },
+                { value: "sketchy", label: "Sketchy" },
+                { value: "solar", label: "Solar" },
+                { value: "spacelab", label: "Spacelab" },
+                { value: "united", label: "United" },
+                { value: "vapor", label: "Vapor" },
+                { value: "yeti", label: "Yeti" },
+                { value: "zephyr", label: "Zephyr" }
+            ];
+            var currentTheme = getstore('theme') || 'default';
+            var lastThemes = JSON.parse(getstore('lastThemes') || '[]');
+
+            var x = '<div class="form-group"><label for="theme-switcher">Select a theme:</label>';
+            x += '<select id="theme-switcher" class="form-select" onchange="account_switchThemeEx()">';
+            // Add last 4 themes to the top of the select box
+            if (lastThemes.length > 0) {
+                x += '<optgroup label="Recent Themes">';
+                lastThemes.forEach(function (theme) {
+                    var selected = theme === currentTheme ? ' selected' : '';
+                    x += '<option value="' + theme + '"' + selected + '>' + theme.charAt(0).toUpperCase() + theme.slice(1) + '</option>';
+                });
+                x += '</optgroup>';
+            }
+            // Add all themes
+            x += '<optgroup label="All Themes">';
+            themes.forEach(function (theme) {
+                var selected = theme.value === currentTheme ? ' selected' : '';
+                x += '<option value="' + theme.value + '"' + selected + '>' + theme.label + '</option>';
+            });
+            x += '</optgroup>';
+            x += '</select></div>';
+
+            setModalContent('xxAddAgent', 'Switch Theme', x);
+            showModal('xxAddAgentModal', 'idx_dlgOkButton');
+            return false;
+        }
+
+        function account_switchThemeEx() {
+            var themeSwitcher = document.getElementById("theme-switcher");
+            const selectedTheme = themeSwitcher.value;
+            const safeTheme = encodeURIComponent(selectedTheme);
+            var themeStylesheet = document.getElementById("theme-stylesheet");
+            var newThemeStylesheet = `styles/themes/${safeTheme}/bootstrap.min.css`;
+            themeStylesheet.href = newThemeStylesheet;
+
+            // Save selected theme
+            putstore('theme', selectedTheme);
+
+            // Update last 4 themes selected
+            var lastThemes = JSON.parse(getstore('lastThemes') || '[]');
+            if (!lastThemes.includes(selectedTheme)) {
+                if (lastThemes.length >= 4) {
+                    lastThemes.pop();
+                }
+                lastThemes.unshift(selectedTheme);
+            } else {
+                lastThemes = lastThemes.filter(theme => theme !== selectedTheme);
+                lastThemes.unshift(selectedTheme);
+            }
+            putstore('lastThemes', JSON.stringify(lastThemes));
+        }
+
         function account_createMesh() {
             // Check if we are disallowed from creating a device group
             if ((userinfo.siteadmin != 0xFFFFFFFF) && ((userinfo.siteadmin & 64) != 0)) {
@@ -20600,4 +20681,4 @@
     </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file