Add Domain and Mailbox tagging (#4569)

* [Web] define tag tables * [Web] add mailbox tag functions * [Web] add domain/mailbox tagging * [Web] add domain/mailbox tagging * [Web] add domain/mailbox tagging * [Web] add domain/mailbox tagging * [Web] add domain/mailbox tagging * [Web] add domain/mailbox tagging * [Web] add domain/mailbox tagging * [Web] add domain/mailbox tagging * Include new tags lang in language.en.json * [Web] add domain/mailbox tagging * [Web] add domain/mailbox tagging * [Web] add domain/mailbox tagging * [Web] add domain/mailbox tagging * [Web] add domain/mailbox tagging Co-authored-by: Niklas Meyer <62480600+DerLinkman@users.noreply.github.com>
2022-05-05 08:25:01 +02:00
parent 456b528785
commit 549ff7d100
15 changed files with 731 additions and 81 deletions
--- a/data/web/js/build/012-api.js
+++ b/data/web/js/build/012-api.js
@@ -156,6 +156,12 @@ $(document).ready(function() {
      });
      if (!invalid) {
        var attr_to_merge = $(this).closest("form").serializeObject();
+        // parse possible JSON Strings
+        for (var [key, value] of Object.entries(attr_to_merge)) {
+          try {
+            attr_to_merge[key] = JSON.parse(attr_to_merge[key]);
+          } catch {}
+        }
        var api_attr = $.extend(api_attr, attr_to_merge)
      } else {
        return false;
@@ -263,6 +269,12 @@ $(document).ready(function() {
      });
      if (!invalid) {
        var attr_to_merge = $(this).closest("form").serializeObject();
+        // parse possible JSON Strings
+        for (var [key, value] of Object.entries(attr_to_merge)) {
+          try {
+            attr_to_merge[key] = JSON.parse(attr_to_merge[key]);
+          } catch {}
+        }
        var api_attr = $.extend(api_attr, attr_to_merge)
      } else {
        return false;
@@ -329,6 +341,7 @@ $(document).ready(function() {
      multi_data[id].splice($.inArray($(this).data('item'), multi_data[id]), 1);
      multi_data[id].push($(this).data('item'));
    }
+
    if (typeof $(this).data('text') !== 'undefined') {
      $("#DeleteText").empty();
      $("#DeleteText").text($(this).data('text'));
@@ -340,9 +353,9 @@ $(document).ready(function() {
      $("#ItemsToDelete").empty();
      for (var i in data_array) {
        data_array[i] = decodeURIComponent(data_array[i]);
-        $("#ItemsToDelete").append("<li>" + data_array[i] + "</li>");
+        $("#ItemsToDelete").append("<li>" + escapeHtml(data_array[i]) + "</li>");
      }
-    })
+    });
    $('#ConfirmDeleteModal').modal({
        backdrop: 'static',
        keyboard: false
--- a/data/web/js/build/014-mailcow.js
+++ b/data/web/js/build/014-mailcow.js
@@ -48,7 +48,7 @@ $(document).ready(function() {
      $(div).animate({ left: ((iter%2==0 ? distance : distance*-1))}, interval);
    }
    $(div).animate({ left: 0},interval);
-  }
+  } 

  // form cache
  $('[data-cached-form="true"]').formcache({key: $(this).data('id')});
@@ -273,4 +273,50 @@ $(document).ready(function() {
        }
      }
  });
+
+  // tag boxes
+  $('.tag-box .tag-add').click(function(){
+    addTag(this);
+  });
+  $(".tag-box .tag-input").keydown(function (e) {
+    if (e.which == 13){
+      e.preventDefault();
+      addTag(this);
+    } 
+  });
+  function addTag(tagAddElem){
+    var tagboxElem = $(tagAddElem).parent();
+    var tagInputElem = $(tagboxElem).find(".tag-input")[0];
+    var tagValuesElem = $(tagboxElem).find(".tag-values")[0];
+
+    var tag = escapeHtml($(tagInputElem).val());
+    var value_tags = [];
+    try {
+      value_tags = JSON.parse($(tagValuesElem).val());
+    } catch {}
+    if (!Array.isArray(value_tags)) value_tags = [];
+    if (value_tags.includes(tag)) return;
+
+    $('<span class="badge badge-primary tag-badge btn-badge"><i class="bi bi-tag-fill"></i> ' + tag + '</span>').insertBefore('.tag-input').click(function(){
+      var del_tag = unescapeHtml($(this).text());
+      var del_tags = [];
+      try {
+        del_tags = JSON.parse($(tagValuesElem).val());
+      } catch {}
+      if (Array.isArray(del_tags)){
+        del_tags.splice(del_tags.indexOf(del_tag), 1);
+        $(tagValuesElem).val(JSON.stringify(del_tags));
+      }
+      $(this).remove();
+    });
+
+    value_tags.push($(tagInputElem).val());
+    $(tagValuesElem).val(JSON.stringify(value_tags));
+    $(tagInputElem).val('');
+  }
 });
+
+
+// http://stackoverflow.com/questions/24816/escaping-html-strings-with-jquery
+function escapeHtml(n){var entityMap={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","/":"&#x2F;","`":"&#x60;","=":"&#x3D;"}; return String(n).replace(/[&<>"'`=\/]/g,function(n){return entityMap[n]})}
+function unescapeHtml(t){var n={"&amp;":"&","&lt;":"<","&gt;":">","&quot;":'"',"&#39;":"'","&#x2F;":"/","&#x60;":"`","&#x3D;":"="};return String(t).replace(/&amp;|&lt;|&gt;|&quot;|&#39;|&#x2F|&#x60|&#x3D;/g,function(t){return n[t]})}
--- a/data/web/js/site/mailbox.js
+++ b/data/web/js/site/mailbox.js
@@ -236,9 +236,6 @@ $(document).ready(function() {

 });
 jQuery(function($){
-  // http://stackoverflow.com/questions/24816/escaping-html-strings-with-jquery
-  var entityMap={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;","/":"&#x2F;","`":"&#x60;","=":"&#x3D;"};
-  function escapeHtml(n){return String(n).replace(/[&<>"'`=\/]/g,function(n){return entityMap[n]})}
  // http://stackoverflow.com/questions/46155/validate-email-address-in-javascript
  function humanFileSize(i){if(Math.abs(i)<1024)return i+" B";var B=["KiB","MiB","GiB","TiB","PiB","EiB","ZiB","YiB"],e=-1;do{i/=1024,++e}while(Math.abs(i)>=1024&&e<B.length-1);return i.toFixed(1)+" "+B[e]}
  function unix_time_format(i){return""==i?'<i class="bi bi-x-lg"></i>':new Date(i?1e3*i:0).toLocaleDateString(void 0,{year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"})}
@@ -293,6 +290,7 @@ jQuery(function($){
        {"name":"rl","title":"RL","breakpoints":"xs sm md lg","style":{"min-width":"100px","width":"100px"}},
        {"name":"backupmx","filterable": false,"style":{"min-width":"120px","width":"120px"},"title":lang.backup_mx,"breakpoints":"xs sm md lg","formatter": function(value){return 1==value?'<i class="bi bi-check-lg"></i>':0==value&&'<i class="bi bi-x-lg"></i>';}},
        {"name":"domain_admins","title":lang.domain_admins,"style":{"word-break":"break-all","min-width":"200px"},"breakpoints":"xs sm md lg","filterable":(role == "admin"),"visible":(role == "admin")},
+        {"name":"tags","title":"Tags","style":{},"breakpoints":"xs sm md lg"},
        {"name":"active","filterable": false,"style":{"min-width":"80px","width":"80px"},"title":lang.active,"formatter": function(value){return 1==value?'<i class="bi bi-check-lg"></i>':0==value&&'<i class="bi bi-x-lg"></i>';}},
        {"name":"action","filterable": false,"sortable": false,"style":{"text-align":"right","min-width":"240px","width":"240px"},"type":"html","title":lang.action,"breakpoints":"xs sm md"}
      ],
@@ -330,6 +328,13 @@ jQuery(function($){
              '<a href="#dnsInfoModal" class="btn btn-xs btn-xs-half btn-info" data-toggle="modal" data-domain="' + encodeURIComponent(item.domain_name) + '"><i class="bi bi-globe2"></i> DNS</a></div>';
            }

+            if (Array.isArray(item.tags)){
+              var tags = '';
+              for (var i = 0; i < item.tags.length; i++)
+                tags += '<span class="badge badge-primary tag-badge"><i class="bi bi-tag-fill"></i> ' + escapeHtml(item.tags[i]) + '</span>';
+              item.tags = tags;
+            }
+
            if (item.backupmx == 1) {
              if (item.relay_unknown_only == 1) {
                item.domain_name = '<div class="label label-info">Relay Non-Local</div> ' + item.domain_name;
@@ -418,6 +423,7 @@ jQuery(function($){
        },
        {"name":"messages","filterable": false,"title":lang.msg_num,"breakpoints":"xs sm md"},
        /* {"name":"rl","title":"RL","breakpoints":"all","style":{"width":"125px"}}, */
+        {"name":"tags","title":"Tags","style":{},"breakpoints":"xs sm md lg"},
        {"name":"active","filterable": false,"style":{"min-width":"80px","width":"80px"},"title":lang.active,"formatter": function(value){return 1==value?'<i class="bi bi-check-lg"></i>':(0==value?'<i class="bi bi-x-lg"></i>':2==value&&'&#8212;');}},
        {"name":"action","filterable": false,"sortable": false,"style":{"min-width":"290px","text-align":"right"},"type":"html","title":lang.action,"breakpoints":"xs sm md"}
      ],
@@ -497,6 +503,13 @@ jQuery(function($){
              '<div class="progress-bar-mailbox progress-bar progress-bar-' + item.percent_class + '" role="progressbar" aria-valuenow="' + item.percent_in_use + '" aria-valuemin="0" aria-valuemax="100" ' +
              'style="min-width:2em;width:' + item.percent_in_use + '%">' + item.percent_in_use + '%' + '</div></div>';
            item.username = escapeHtml(item.username);
+            
+            if (Array.isArray(item.tags)){
+              var tags = '';
+              for (var i = 0; i < item.tags.length; i++)
+                tags += '<span class="badge badge-primary tag-badge"><i class="bi bi-tag-fill"></i> ' + escapeHtml(item.tags[i]) + '</span>';
+              item.tags = tags;
+            }
          });
        }
      }),