[BETA] Meshcentral Bootstrap 5 User Interface (#6450)

Co-authored-by: Bruno Kambere <brunokambere@gmail.com>
Co-authored-by: snyk-bot <snyk-bot@snyk.io>
Co-authored-by: Simon Smith <simonsmith5521@gmail.com>

package-lock.json

@@ -2056,4 +2056,4 @@
       }
     }
   }
-}
+}

package.json

@@ -62,4 +62,4 @@
     "url": "https://github.com/Ylianst/MeshCentral.git"
   },
   "readme": "readme.md"
-}
+}

public/scripts/themes/theme-switcher.js

@@ -0,0 +1,29 @@
+document.addEventListener('DOMContentLoaded', function () {
+
+  const themeSwitcher = document.getElementById('theme-switcher');
+  const themeStylesheet = document.getElementById('theme-stylesheet');
+
+  // Load saved theme from local storage
+  const savedTheme = localStorage.getItem('theme');
+  if (savedTheme) {
+    const safeTheme = encodeURIComponent(savedTheme);
+    themeStylesheet.href = `styles/themes/${safeTheme}/bootstrap.min.css`;
+    themeSwitcher.value = savedTheme;
+  }
+
+  // Change theme on selection
+  themeSwitcher.addEventListener('change', function () {
+    const selectedTheme = themeSwitcher.value;
+    const safeTheme = encodeURIComponent(selectedTheme);
+    themeStylesheet.href = `styles/themes/${safeTheme}/bootstrap.min.css`;
+    // Save selected theme to local storage
+    localStorage.setItem('theme', selectedTheme);
+  });
+
+  // Initialize Select2 on all select elements with the 'select2' class
+  $('.select2').select2({
+    theme: 'bootstrap-5',
+    width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
+    placeholder: $( this ).data( 'placeholder' ),
+  });
+});

views/default.handlebars

@@ -19223,4 +19223,4 @@
     
     </script>
 </body>
-</html>
+</html>

webserver.js

@@ -3133,7 +3133,7 @@ module.exports.CreateWebServer = function (parent, db, args, certificates, doneF
                 else if (args.webrtcconfig && (typeof args.webrtcconfig == 'object')) { webRtcConfig = encodeURIComponent(JSON.stringify(args.webrtcconfig)).replace(/'/g, '%27'); }                
 
                 // Refresh the session
-                render(dbGetFunc.req, dbGetFunc.res, getRenderPage('default', dbGetFunc.req, domain), getRenderArgs({
+                render(dbGetFunc.req, dbGetFunc.res, getRenderPage((domain.sitestyle == 3 ? 'default3' : 'default'), dbGetFunc.req, domain), getRenderArgs({
                     authCookie: authCookie,
                     authRelayCookie: authRelayCookie,
                     viewmode: viewmode,