Add user listing to mail view to manage per user mailboxes

dashboard/src/js/client.js

@@ -1256,7 +1256,7 @@ angular.module('Application').service('Client', ['$http', '$interval', 'md5', 'N
     Client.prototype.getMailboxes = function (domain, callback) {
         get('/api/v1/mail/' + domain + '/mailboxes').success(function(data, status) {
             if (status !== 200) return callback(new ClientError(status, data));
-            callback(null, data);
+            callback(null, data.mailboxes);
         }).error(defaultErrorHandler(callback));
     };
 

dashboard/src/views/email.html

@@ -186,6 +186,44 @@
     </div>
   </div>
 
+  <div class="text-left" ng-show="selectedDomain.mailConfig.enabled">
+    <h3>Mailboxes</h3>
+  </div>
+
+  <div class="card" style="margin-bottom: 15px;" ng-show="selectedDomain.mailConfig.enabled">
+    <div class="row">
+      <div class="col-md-12">
+        Manage mailboxes for users on this domain. Each user will get an email address of <b>username@{{ selectedDomain.domain }}</b>
+
+        <br/><br/>
+
+        <table class="table table-hover">
+          <thead>
+            <tr>
+              <th>User</th>
+              <th class="text-left"></th>
+              <th class="text-right">Action</th>
+            </tr>
+          </thead>
+          <tbody>
+              <tr ng-repeat="user in mailboxes.users">
+                  <td class="text-left elide-table-cell">
+                    {{ user.username }}
+                  </td>
+                  <td class="text-left elide-table-cell">
+                      &nbsp;
+                  </td>
+                  <td class="text-right no-wrap" style="vertical-align: bottom">
+                      <button ng-show="user.mailboxEnabled" class="btn btn-xs btn-danger" ng-disabled="user.busy" ng-click="mailboxes.disable(user)" title="Disalbe Mailbox for this User"><i class="fa fa-circle-o-notch fa-spin" ng-show="user.busy"></i> Disable</button>
+                      <button ng-hide="user.mailboxEnabled" class="btn btn-xs btn-primary" ng-disabled="user.busy" ng-click="mailboxes.enable(user)" title="Enable Mailbox for this User"><i class="fa fa-circle-o-notch fa-spin" ng-show="user.busy"></i> Enable</button>
+                  </td>
+              </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
   <div class="text-left" ng-show="selectedDomain.mailConfig.enabled">
     <h3>Catch-all</h3>
   </div>

dashboard/src/views/email.js

@@ -85,6 +85,32 @@ angular.module('Application').controller('EmailController', ['$scope', '$locatio
         });
     };
 
+    $scope.mailboxes = {
+        users: [],
+
+        enable: function (user) {
+            user.busy = true;
+
+            Client.enableUserMailbox($scope.selectedDomain.domain, user.id, function (error) {
+                if (error) console.error(error);
+
+                user.busy = false;
+                user.mailboxEnabled = error ? false : true;
+            });
+        },
+
+        disable: function (user) {
+            user.busy = true;
+
+            Client.disableUserMailbox($scope.selectedDomain.domain, user.id, function (error) {
+                if (error) console.error(error);
+
+                user.busy = false;
+                user.mailboxEnabled = error ? true : false;
+            });
+        }
+    };
+
     $scope.mailRelayPresets = [
         { provider: 'cloudron-smtp', name: 'Built-in SMTP server' },
         { provider: 'external-smtp', name: 'External SMTP server', host: '', port: 587 },
@@ -281,6 +307,17 @@ angular.module('Application').controller('EmailController', ['$scope', '$locatio
             $scope.selectedDomain.mailConfig = mailConfig;
             $scope.selectedDomain.mailStatus = {};
 
+            // mailboxes
+            Client.getMailboxes($scope.selectedDomain.domain, function (error, mailboxes) {
+                if (error) return console.error(error);
+
+                var enabledUsers = mailboxes.map(function (m) { return m.name; });
+                $scope.mailboxes.users = $scope.users.filter(function (u) { return !!u.username; }).map(function (u) {
+                    u.mailboxEnabled = (enabledUsers.indexOf(u.username) !== -1);
+                    return u;
+                });
+            });
+
             // we will fetch the status without blocking the ui
             Client.getMailStatusForDomain($scope.selectedDomain.domain, function (error, mailStatus) {
                 $scope.refreshBusy = false;