(js) Allow edition of IMAP flags/labels

NEWS

@@ -12,6 +12,7 @@ Enhancements
  - [web] follow requested URL after user authentication
  - [web] added Simplified Chinese (zh_CN) translation - thanks to Thomas Kuiper
  - [web] now also give modify permission when selecting all calendar rights
+ - [web] allow edition of IMAP flags associated to mail labels
 
 Bug fixes
  - [core] yearly repeating events are not shown in web calendar (#4237)

UI/PreferencesUI/English.lproj/Localizable.strings

@@ -147,6 +147,10 @@
 /* Mailer */
 "Labels" = "Labels";
 "Label" = "Label";
+"IMAP Label" = "IMAP Label";
+"Invalid label" = "Don't use space, nor ( ) { } % * \" \\";
+"Duplicate label" = "Duplicate label";
+"IMAP labels must have unique names." = "IMAP labels must have unique names.";
 "New label" = "New label";
 "Show subscribed mailboxes only" = "Show subscribed mailboxes only";
 "Synchronize only default mail folders (EAS)" = "Synchronize only default mail folders (EAS)";

UI/Templates/PreferencesUI/UIxPreferences.wox

@@ -771,18 +771,35 @@
                       id="mailLabelsView-content" class="md-padding">
             <md-list layout="row" layout-xs="column" layout-wrap="layout-wrap">
               <md-list-item flex="50" flex-xs="100"
-                            ng-repeat="(key, value) in app.preferences.defaults.SOGoMailLabelsColors">
+                            ng-repeat="key in app.preferences.defaults.SOGoMailLabelsColorsKeys
-                <sg-color-picker ng-model="value[1]"><!-- color picker--></sg-color-picker>
+                                       track by $index">
-                <md-input-container class="md-block md-flex">
+                <sg-color-picker ng-model="app.preferences.defaults.SOGoMailLabelsColorsValues[$index][1]"><!-- color picker--></sg-color-picker>
-	          <input type="text"
+                <div layout="row" class="md-flex">
-                         label:aria-label="Label"
+                  <md-input-container class="md-block md-flex">
-                         ng-model="value[0]"
+                    <label><var:string label:value="Label"/></label>
-                         sg-focus-on="mailLabel_{{$index}}"/>
+	            <input type="text"
-                </md-input-container>
+                           label:aria-label="Label"
+                           ng-model="app.preferences.defaults.SOGoMailLabelsColorsValues[$index][0]"
+                           sg-focus-on="mailLabel_{{$index}}"/>
+                  </md-input-container>
+                  <md-input-container class="md-block md-flex">
+                    <label><var:string label:value="IMAP Label"/></label>
+	            <input type="text"
+                           name="mailIMAPLabel_{{$index}}"
+                           label:aria-label="IMAP Label"
+                           ng-model="app.preferences.defaults.SOGoMailLabelsColorsKeys[$index]"
+                           ng-change="app.resetMailLabelValidity($index, preferencesForm)"
+                           ng-pattern="app.mailLabelKeyRE" />
+                    <div ng-messages="preferencesForm['mailIMAPLabel_' + $index].$error">
+                      <div ng-message="pattern"><var:string label:value="Invalid label"/></div>
+                      <div ng-message="duplicate"><var:string label:value="Duplicate label"/></div>
+                    </div>
+                  </md-input-container>
+                </div>
                 <md-button class="md-icon-button" type="button"
                            layout="row" layout-align="end center"
                            label:aria-label="Delete Label"
-                           ng-click="app.removeMailLabel(key, preferencesForm)">
+                           ng-click="app.removeMailLabel($index, preferencesForm)">
                   <md-icon>remove_circle</md-icon>
                 </md-button>
               </md-list-item>

UI/WebServerResources/js/Preferences/Preferences.service.js

@@ -22,13 +22,13 @@
         data = {};
       }
 
-      // We swap $key -> _$key to avoid an Angular bug (https://github.com/angular/angular.js/issues/6266)
+      // Split mail labels keys and values
-      var labels = _.fromPairs(_.map(data.SOGoMailLabelsColors, function(value, key) {
+      data.SOGoMailLabelsColorsKeys = [];
-        if (key.charAt(0) == '$')
+      data.SOGoMailLabelsColorsValues = [];
-          return ['_' + key, value];
+      _.forEach(data.SOGoMailLabelsColors, function (value, key) {
-        return [key, value];
+        data.SOGoMailLabelsColorsKeys.push(key);
-      }));
+        data.SOGoMailLabelsColorsValues.push(value);
-      data.SOGoMailLabelsColors = labels;
+      });
 
       _.forEach(data.SOGoSieveFilters, function(filter) {
         _.forEach(filter.actions, function(action) {
@@ -268,18 +268,13 @@
       }
     });
 
-    // We swap _$key -> $key to avoid an Angular bug (https://github.com/angular/angular.js/issues/6266)
+    // Merge back mail labels keys and values
-    labels = _.fromPairs(_.map(preferences.defaults.SOGoMailLabelsColors, function(value, key) {
+    preferences.defaults.SOGoMailLabelsColors = {};
-      if (key.charAt(0) == '_' && key.charAt(1) == '$') {
+    _.forEach(preferences.defaults.SOGoMailLabelsColorsKeys, function(key, i) {
-        // New key, let's take the value and flatten it
+      preferences.defaults.SOGoMailLabelsColors[key] = preferences.defaults.SOGoMailLabelsColorsValues[i];
-        if (key.length > 2 && key.charAt(2) == '$') {
+    });
-          return [value[0].toLowerCase().replace(/[ \(\)\/\{%\*<>\\\"]/g, "_"), value];
+    delete preferences.defaults.SOGoMailLabelsColorsKeys;
-        }
+    delete preferences.defaults.SOGoMailLabelsColorsValues;
-        return [key.substring(1), value];
-      }
-      return [key, value];
-    }));
-    preferences.defaults.SOGoMailLabelsColors = labels;
 
     _.forEach(preferences.defaults.SOGoSieveFilters, function(filter) {
       _.forEach(filter.actions, function(action) {

UI/WebServerResources/js/Preferences/PreferencesController.js

@@ -17,6 +17,7 @@
       this.timeZonesList = $window.timeZonesList;
       this.timeZonesSearchText = '';
       this.sieveVariablesCapability = ($window.sieveCapabilities.indexOf('variables') >= 0);
+      this.mailLabelKeyRE = new RegExp("^[^(){} %*\"\\\\]*$");
 
 
       if (sgSettings.activeUser('path').mail) {
@@ -154,17 +155,23 @@
       this.preferences.defaults.AuxiliaryMailAccounts.splice(index, 1);
       form.$setDirty();
     };
-    
+
+    this.resetMailLabelValidity = function(index, form) {
+      form['mailIMAPLabel_' + index].$setValidity('duplicate', true);
+    };
+
     this.addMailLabel = function(form) {
       // See $omit() in the Preferences services for real key generation
       var key = '_$$' + guid();
-      this.preferences.defaults.SOGoMailLabelsColors[key] =  ["New label", "#aaa"];
+      this.preferences.defaults.SOGoMailLabelsColorsKeys.push("label");
-      focus('mailLabel_' + (_.size(this.preferences.defaults.SOGoMailLabelsColors) - 1));
+      this.preferences.defaults.SOGoMailLabelsColorsValues.push(["New label", "#aaa"]);
+      focus('mailLabel_' + (_.size(this.preferences.defaults.SOGoMailLabelsColorsKeys) - 1));
       form.$setDirty();
     };
 
-    this.removeMailLabel = function(key, form) {
+    this.removeMailLabel = function(index, form) {
-      delete this.preferences.defaults.SOGoMailLabelsColors[key];
+      this.preferences.defaults.SOGoMailLabelsColorsKeys.splice(index, 1);
+      this.preferences.defaults.SOGoMailLabelsColorsValues.splice(index, 1);
       form.$setDirty();
     };
 
@@ -310,6 +317,21 @@
         }
       }
 
+      if (this.preferences.defaults.SOGoMailLabelsColorsKeys.length !=
+          this.preferences.defaults.SOGoMailLabelsColorsValues.length ||
+          this.preferences.defaults.SOGoMailLabelsColorsKeys.length !=
+          _.uniq(this.preferences.defaults.SOGoMailLabelsColorsKeys).length) {
+        Dialog.alert(l('Error'), l("IMAP labels must have unique names."));
+        _.forEach(this.preferences.defaults.SOGoMailLabelsColorsKeys, function (value, i, keys) {
+          if (form['mailIMAPLabel_' + i].$dirty &&
+              (keys.indexOf(value) != i ||
+               keys.indexOf(value, i+1) > -1)) {
+            form['mailIMAPLabel_' + i].$setValidity('duplicate', false);
+            sendForm = false;
+          }
+        });
+      }
+
       if (sendForm)
         return this.preferences.$save().then(function(data) {
           if (!options || !options.quick) {