Add firewall UI

src/js/client.js

@@ -750,6 +750,7 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         });
     };
 
+    // network
     Client.prototype.setSysinfoConfig = function (config, callback) {
         post('/api/v1/settings/sysinfo_config', config, null, function (error, data, status) {
             if (error) return callback(error);
@@ -777,6 +778,25 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         });
     };
 
+    Client.prototype.getBlocklist = function (callback) {
+        var config = {};
+
+        get('/api/v1/network/blocklist', config, function (error, data, status) {
+            if (error) return callback(error);
+            if (status !== 200) return callback(new ClientError(status, data));
+            callback(null, data.blocklist);
+        });
+    };
+
+    Client.prototype.setBlocklist = function (blocklist, callback) {
+        post('/api/v1/network/blocklist', { blocklist: blocklist }, null, function (error, data, status) {
+            if (error) return callback(error);
+            if (status !== 200) return callback(new ClientError(status, data));
+
+            callback(null);
+        });
+    };
+
     Client.prototype.setDynamicDnsConfig = function (enabled, callback) {
         post('/api/v1/settings/dynamic_dns', { enabled: enabled }, null, function (error, data, status) {
             if (error) return callback(error);
@@ -794,6 +814,7 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         });
     };
 
+    // branding
     Client.prototype.setFooter = function (footer, callback) {
         post('/api/v1/branding/footer', { footer: footer }, null, function (error, data, status) {
             if (error) return callback(error);

src/views/network.html

@@ -44,6 +44,32 @@
   </div>
 </div>
 
+<!-- Modal block list -->
+<div class="modal fade" id="blocklistModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title">Firewall Configuration</h4>
+      </div>
+      <div class="modal-body">
+        <form name="blocklistChangeForm" role="form" novalidate ng-submit="blocklist.submit()" autocomplete="off">
+          <div class="form-group">
+            <label class="control-label">Blocked IPs and Ranges</label>
+            <p class="small">Matched addresses will be unable to connect to the server including the mail server, the dashboard and all apps.</p>
+            <div class="has-error" ng-show="blocklist.error.blocklist">{{ blocklist.error.blocklist }}</div>
+            <textarea ng-model="blocklist.blocklist" placeholder="Line separated email address patterns" name="blocklist" class="form-control" ng-class="{ 'has-error': !blocklistChangeForm.blocklist.$dirty && blocklist.error.blocklist }" rows="4"></textarea>
+          </div>
+          <input class="ng-hide" type="submit"/>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-success" ng-click="blocklist.submit()"><i class="fa fa-circle-notch fa-spin" ng-show="blocklist.busy"></i> Save</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="content">
   <div class="text-left">
     <h1>Network</h1>
@@ -98,6 +124,21 @@
     </div>
   </div>
 
+  <div class="text-left">
+    <h3>Firewall</h3>
+  </div>
+
+  <div class="card">
+    <div class="row">
+      <div class="col-xs-6">
+        <span class="text-muted">Blocked IPs & Ranges</span>
+      </div>
+      <div class="col-xs-6 text-right">
+        <span>{{ blocklist.currentBlocklist.length }} IP(s) blocked <a href="" ng-click="blocklist.show()"><i class="fa fa-edit text-small"></i></a></span>
+      </div>
+    </div>
+  </div>
+
   <div class="text-left">
     <h3>Dynamic DNS</h3>
   </div>

src/views/network.js

@@ -55,6 +55,51 @@ angular.module('Application').controller('NetworkController', ['$scope', '$locat
         }
     };
 
+    $scope.blocklist  = {
+        busy: false,
+        error: {},
+        blocklist: '',
+        currentBlocklist: [],
+
+        refresh: function () {
+            Client.getBlocklist(function (error, result) {
+                if (error) return console.error(error);
+
+                $scope.blocklist.currentBlocklist = result;
+            });
+        },
+
+
+        show: function () {
+            $scope.blocklist.error = {};
+            $scope.blocklist.blocklist = $scope.blocklist.currentBlocklist.join('\n');
+
+            $('#blocklistModal').modal('show');
+        },
+
+        submit: function () {
+            $scope.blocklist.error = {};
+            $scope.blocklist.busy = true;
+
+            var blocklist = $scope.blocklist.blocklist.split('\n').filter(function (x) { return x !== ''; });
+
+            Client.setBlocklist(blocklist, function (error) {
+                $scope.blocklist.busy = false;
+                if (error) {
+                    $scope.blocklist.error.blocklist = error.message;
+                    $scope.blocklist.error.ip = error.message;
+                    $scope.blocklistForm.$setPristine();
+                    $scope.blocklistForm.$setUntouched();
+                    return;
+                }
+
+                $scope.blocklist.refresh();
+
+                $('#blocklistModal').modal('hide');
+            });
+        }
+    },
+
     $scope.sysinfo = {
         busy: false,
         error: {},
@@ -137,6 +182,7 @@ angular.module('Application').controller('NetworkController', ['$scope', '$locat
         $scope.sysinfo.refresh();
 
         $scope.dyndnsConfigure.refresh();
+        $scope.blocklist.refresh();
     });
 
     $('.modal-backdrop').remove();