From 5c944617d0efdc03a72a677e9f60922cb3ab90bd Mon Sep 17 00:00:00 2001
From: Leon Klingele <leon.klingele@helsinki-systems.de>
Date: Tue, 29 Nov 2022 11:48:03 +0100
Subject: [PATCH] fix(calendar(js)): escape CSS selector names

SOGo uses the name of calendar categories verbatim to construct a CSS
selector without escaping characters such as "/". This patch ensures
those selector names are properly escaped so calendar categories
applied to a calendar event match the according selector and appear
in the correct color.

This patch makes use of the CSS escape API which is supported by all
major browsers. See https://caniuse.com/mdn-api_css_escape.

Also see https://mathiasbynens.be/notes/css-escapes.
---
 .../js/Common/cssescape.filter.js             | 19 +++++++++++++++++++
 .../sgCategoryStylesheet.directive.js         |  4 ++--
 2 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 UI/WebServerResources/js/Common/cssescape.filter.js

diff --git a/UI/WebServerResources/js/Common/cssescape.filter.js b/UI/WebServerResources/js/Common/cssescape.filter.js
new file mode 100644
index 000000000..388e61ffc
--- /dev/null
+++ b/UI/WebServerResources/js/Common/cssescape.filter.js
@@ -0,0 +1,19 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+/**
+ * @type {angular.Module}
+ */
+ (function () {
+  'use strict';
+
+  /**
+   * @ngInject
+   */
+  cssEscape.$inject = ['$window'];
+  function cssEscape($window) {
+    return $window.CSS.escape;
+  }
+
+  angular.module('SOGo.Common')
+    .filter('cssEscape', cssEscape);
+})();
diff --git a/UI/WebServerResources/js/Scheduler/sgCategoryStylesheet.directive.js b/UI/WebServerResources/js/Scheduler/sgCategoryStylesheet.directive.js
index 1e652dfb0..75dbcee95 100644
--- a/UI/WebServerResources/js/Scheduler/sgCategoryStylesheet.directive.js
+++ b/UI/WebServerResources/js/Scheduler/sgCategoryStylesheet.directive.js
@@ -26,11 +26,11 @@
       template: [
         '<style type="text/css">',
         /* Background color */
-        '  .bg-category{{ ngModel.id }} {',
+        '  .bg-category{{ ngModel.id | cssEscape }} {',
         '    background-color: {{ ngModel.color }} !important;',
         '  }',
         /* Border color */
-        '  .bdr-category{{ ngModel.id }} {',
+        '  .bdr-category{{ ngModel.id | cssEscape }} {',
         '    border-color: {{ ngModel.color }} !important;',
         '  }',
         '</style>'