Add firewall UI

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();