Allow to configure more than one alternate domain

src/theme.scss

@@ -413,6 +413,14 @@ multiselect {
     }
 }
 
+.alternate-domains .col-lg-11 {
+    padding-right: 5px;
+}
+
+.alternate-domains .col-lg-1 {
+    padding-left: 0px;
+    padding-right: 0px;
+}
 
 // ----------------------------
 // Appstore view

src/views/apps.html

@@ -155,28 +155,6 @@
                                     </div>
                                 </div>
 
-                                <div class="form-group" ng-class="{ 'has-error': (appConfigureForm.alternateSubdomain.$dirty && appConfigureForm.alternateSubdomain.$invalid) || (!appConfigureForm.alternateSubdomain.$dirty && appConfigure.error.alternateDomains)  }">
-                                  <input type="checkbox" id="appConfigureAlternateDomainEnabled" ng-model="appConfigure.alternateDomainEnabled">
-                                  <label class="control-label" for="appConfigureAlternateDomainEnabled">Redirect the following domain to this app</label>
-                                  <div class="has-error" ng-show="appConfigure.error.alternateDomains">{{ appConfigure.error.alternateDomains }}</div>
-
-                                  <div class="input-group form-inline">
-                                    <input type="text" class="form-control" ng-model="appConfigure.alternateSubdomain" id="appConfigureAlternateSubdomainInput" name="alternateSubdomain" placeholder="Leave empty to use bare domain" ng-disabled="!appConfigure.alternateDomainEnabled">
-
-                                    <div class="input-group-btn">
-                                      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" ng-disabled="!appConfigure.alternateDomainEnabled">
-                                        <span>{{ (!appConfigure.alternateSubdomain ? '' : (appConfigure.alternateDomain.config.hyphenatedSubdomains ? '-' : '.')) + appConfigure.alternateDomain.domain }}</span>
-                                        <span class="caret"></span>
-                                      </button>
-                                      <ul class="dropdown-menu dropdown-menu-right" role="menu">
-                                        <li ng-repeat="domain in domains">
-                                          <a href="" ng-click="appConfigure.alternateDomain = domain">{{ domain.domain }}</a>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </div>
-                                </div>
-
                                 <div ng-hide="true" class="form-group" ng-class="{ 'has-error': !appConfigureForm.dataDir.$dirty && appConfigure.error.dataDir }">
                                     <input type="checkbox" id="appConfigureEnableDataDir" ng-model="appConfigure.dataDirEnabled">
                                     <label class="control-label" for="appConfigureEnableDataDir">Custom Data Directory</label>
@@ -199,6 +177,42 @@
                                     <label class="control-label" for="appConfigureEnableAutomaticUpdate">Enable automatic updates</label>
                                 </div>
 
+                                <div class="form-group alternate-domains" ng-class="{ 'has-error': appConfigure.error.alternateDomains  }">
+                                  <label class="control-label">Redirect the following domains to this app</label>
+                                  <div class="has-error" ng-show="appConfigure.error.alternateDomains">{{ appConfigure.error.alternateDomains }}</div>
+
+                                  <div class="row" ng-repeat="alternateDomain in appConfigure.alternateDomains">
+                                    <div class="col col-lg-11">
+                                      <div class="input-group">
+                                        <input type="text" class="form-control" ng-model="alternateDomain.subdomain" placeholder="Leave empty to use bare domain">
+
+                                        <div class="input-group-btn">
+                                          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                                            <span>{{ (!alternateDomain.subdomain ? '' : (alternateDomain.domain.config.hyphenatedSubdomains ? '-' : '.')) + alternateDomain.domain.domain }}</span>
+                                            <span class="caret"></span>
+                                          </button>
+                                          <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                                            <li ng-repeat="domain in domains">
+                                              <a href="" ng-click="alternateDomain.domain = domain">{{ domain.domain }}</a>
+                                            </li>
+                                          </ul>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div class="col col-lg-1">
+                                      <button class="btn btn-danger btn-sm" ng-click="appConfigure.delAlternateDomain($event, $index)"><i class="far fa-trash-alt"></i></button>
+                                    </div>
+                                  </div>
+                                  <div class="row">
+                                    <div class="col col-lg-11">
+                                      <p ng-show="appConfigure.alternateDomains.length === 0">No alternate domains are configured</p>
+                                    </div>
+                                    <div class="col col-lg-1">
+                                      <button class="btn btn-primary btn-sm" ng-click="appConfigure.addAlternateDomain($event)"><i class="fas fa-plus"></i></button>
+                                    </div>
+                                  </div>
+                                </div>
+
                                 <div class="hide">
                                     <label class="control-label" for="appConfigureCertificateInput" ng-show="appConfigure.domain.provider !== 'caas'">Certificate (optional)</label>
                                     <div class="has-error text-center" ng-show="appConfigure.error.cert && appConfigure.domain.provider !== 'caas'">{{ appConfigure.error.cert }}</div>

src/views/apps.js

@@ -42,11 +42,9 @@ angular.module('Application').controller('AppsController', ['$scope', '$location
         accessRestrictionOption: 'any',
         accessRestriction: { users: [], groups: [] },
         dataDir: null,
-        alternateDomainEnabled: false,
+        alternateDomains: [],
         mailboxNameEnabled: false,
         dataDirEnabled: false,
-        alternateSubdomain: '',
-        alternateDomain: null,
         ssoAuth: false,
         ftp: false,
         tags: '',
@@ -60,6 +58,19 @@ angular.module('Application').controller('AppsController', ['$scope', '$location
             return !!(tmp.users.length || tmp.groups.length);
         },
 
+        addAlternateDomain: function (event) {
+            event.preventDefault();
+            $scope.appConfigure.alternateDomains.push({
+                domain: $scope.domains[0],
+                subdomain: ''
+            });
+        },
+
+        delAlternateDomain: function (event, index) {
+            event.preventDefault();
+            $scope.appConfigure.alternateDomains.splice(index, 1);
+        },
+
         show: function (app) {
             $scope.reset();
 
@@ -71,9 +82,7 @@ angular.module('Application').controller('AppsController', ['$scope', '$location
             $scope.appConfigure.memoryLimit = app.memoryLimit || app.manifest.memoryLimit || (256 * 1024 * 1024);
             $scope.appConfigure.dataDirEnabled = !!app.dataDir;
             $scope.appConfigure.dataDir = app.dataDir;
-            $scope.appConfigure.alternateDomainEnabled = !!app.alternateDomains[0];
+            $scope.appConfigure.alternateDomains = app.alternateDomains.map(function (a) { return { subdomain: a.subdomain, domain: $scope.domains.filter(function (d) { return d.domain === a.domain; })[0] }});
-            $scope.appConfigure.alternateSubdomain = app.alternateDomains[0] ? app.alternateDomains[0].subdomain : '';
-            $scope.appConfigure.alternateDomain = app.alternateDomains[0] ? $scope.domains.filter(function (d) { return d.domain === app.alternateDomains[0].domain; })[0] : $scope.appConfigure.domain;
             $scope.appConfigure.robotsTxt = app.robotsTxt;
             $scope.appConfigure.enableBackup = app.enableBackup;
             $scope.appConfigure.enableAutomaticUpdate = app.enableAutomaticUpdate;
@@ -176,15 +185,12 @@ angular.module('Application').controller('AppsController', ['$scope', '$location
                 robotsTxt: $scope.appConfigure.robotsTxt,
                 enableBackup: $scope.appConfigure.enableBackup,
                 enableAutomaticUpdate: $scope.appConfigure.enableAutomaticUpdate,
-                alternateDomains: [],
+                alternateDomains: $scope.appConfigure.alternateDomains.map(function (a) { return { subdomain: a.subdomain, domain: a.domain.domain }}),
                 label: $scope.appConfigure.label,
                 tags: $scope.appConfigure.tags.split(',').map(function (t) { return t.trim(); }).filter(function (t) { return !!t; }),
                 dataDir: $scope.appConfigure.dataDirEnabled ? $scope.appConfigure.dataDir : ''
             };
 
-            // The backend supports multiple alternateDomains, however we only have ui for one
-            if ($scope.appConfigure.alternateDomainEnabled) data.alternateDomains = [{ domain: $scope.appConfigure.alternateDomain.domain, subdomain: $scope.appConfigure.alternateSubdomain }];
-
             if ($scope.appConfigure.mailboxNameEnabled) {
                 data.mailboxName = $scope.appConfigure.mailboxName;
 
@@ -230,8 +236,6 @@ angular.module('Application').controller('AppsController', ['$scope', '$location
                         $scope.appConfigure.keyFile = null;
                     } else if (error.statusCode === 400 && error.message.indexOf('alternateDomains') !== -1 ) {
                         $scope.appConfigure.error.alternateDomains = error.message;
-                        $scope.appConfigureForm.alternateDomains.$setPristine();
-                        $('#appConfigureAlternateSubdomainInput').focus();
                     } else if (error.message.indexOf('dataDir') !== -1 ) { // can be 400 or 409
                         $scope.appConfigure.error.dataDir = error.message;
                         $scope.appConfigureForm.dataDir.$setPristine();