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>