Fix tree-view for mail failing to load with non-default configuration

extensions/mail/folders.cgi

@@ -29,9 +29,9 @@ foreach my $folder (@folders_data) {
     my ($fid) = $id =~ m#([^/]+)$#;
     my ($parent, $child) = $fid =~ m|^ (.+) \. ([^\.]+) \z|x;
     my $name   = $folder->{'name'};
-    my $key    = replace(' ', '_', $id);
+    my $key    = folders_escape_key($id);
     my $title  = folders_title_unseen(html_escape($child ? $child : $name), $unread);
-    my $active = ($in{'key'} eq $key ? 1 : 0);
+    my $active = (folders_escape_key($in{'key'}) eq $key ? 1 : 0);
     my $data = $temporary{$fid} = { key    => $key,
                                     title  => $title,
                                     active => $active,

extensions/mail/mail-lib.pm

@@ -72,6 +72,11 @@ sub get_json
     }
 }
 
+sub folders_escape_key
+{
+    return quote_escape(replace(' ', '_', $_[0]));
+}
+
 sub folders_title_unseen
 {
     my ($folder, $count) = @_;

extensions/mail/mail.src.js

@@ -15,23 +15,26 @@ const mail = (function() {
     _g = {
       load: load,
       load_content: get_pjax_content,
-      link: v___location_prefix + '/mailbox/index.cgi?id=',
+      link: v___location_origin + v___location_prefix + '/mailbox/index.cgi?id=',
+      lang: {
+        noRecords: theme_language('theme_xhred_datatable_szerorecords')
+      },
       path: {
         extensions: v___server_extensions_path,
         css: v___server_css_path,
         js: v___server_js_path
       },
-      lang: {
-        noRecords: theme_language('theme_xhred_datatable_szerorecords')
+      var: {
+        mail: $t_uri_webmail
       }
     };
 
   // Folders sub-module ;;
   const folders = (function() {
     let
 
-      // Define strings
-      strings = {
+      // Define data
+      data = {
         files: {
           fancytree: 'jquery.fancytree'
         },
@@ -43,18 +46,21 @@ const mail = (function() {
 
     // Load dependencies
     (() => {
-      _g.load.bundle(_g.path.js + "/" + strings.files.fancytree, _g.path.css + "/" + strings.files.fancytree, [get], 1);
+      _g.load.bundle(_g.path.js + "/" + data.files.fancytree,
+        _g.path.css + "/" + data.files.fancytree,
+        (_g.var.mail ? [get] : 0), 1
+      );
     })();
 
     // Get folders data
     function get(key) {
       key = key ? ('?key=' + key) : String();
 
-      $.post(_g.path.extensions + "/mail/folders.cgi" + key + "", function(data) {
+      $.post(_g.path.extensions + "/mail/folders.cgi" + key + "", function(source) {
         if (!!key) {
-          tree.reload(data)
+          tree.reload(source)
         } else {
-          tree.init(data)
+          tree.init(source)
         }
       });
     }
@@ -66,15 +72,19 @@ const mail = (function() {
 
     // Tree object literal
     let tree = {
-      container: '[' + strings.selectors.folders + ']',
-      init: function(data) {
+      container: '[' + data.selectors.folders + ']',
+      init: function(source) {
 
         // Insert tree container
-        $(strings.selectors.navigation).prepend('<div ' + strings.selectors.folders + '></div>');
+        if ($(data.selectors.navigation + ' ' + this.container).length === 0) {
+          $(data.selectors.navigation).prepend('<div ' + data.selectors.folders + '></div>');
+        } else {
+          return;
+        }
 
         // Instantiate tree
         $(this.container).fancytree({
-          source: data,
+          source: source,
           escapeTitles: false,
           autoActivate: false,
           autoScroll: true,
@@ -84,7 +94,7 @@ const mail = (function() {
           activate: (e, d) => {
             this.adjust();
             this.expand(d.node);
-            _g.load_content(_g.link + d.node.key);
+            _g.load_content(_g.link + encodeURIComponent(d.node.key));
           }
         });
 
@@ -102,10 +112,10 @@ const mail = (function() {
         let expanded = node.isExpanded();
         !expanded && node.toggleExpanded();
       },
-      reload: function(data) {
+      reload: function(source) {
         let tree = $(this.container).fancytree("getTree");
         tree.$container.empty();
-        tree.reload(data);
+        tree.reload(source);
         setTimeout(() => {
           this.adjust();
           this.expand(this.get_active_node());
@@ -115,7 +125,6 @@ const mail = (function() {
         let $_ = this.get_active_node();
         if ($_ && $_.li && $($_.li).length) {
           $(this.container).mCustomScrollbar("scrollTo", $($_.li), {
-            // scrollInertia: 100,
             scrollOffset: [$(this.container), 3, 4]
           })
         }

theme.info

@@ -1,7 +1,7 @@
 desc=Authentic Theme
 longdesc=Webmin/Usermin/Virtualmin/Cloudmin theme based on Bootstrap and Font Awesome (https://github.com/qooob/authentic-theme)
 version=19.17
-mversion=1
+mversion=2
 depends=1.880 1.740
 webmin=1
 usermin=1