Working on front-end integration for adding/editing campaigns

static/js/app/gophish.js

@@ -1,7 +1,9 @@
-var app = angular.module('gophish', ['ngTable', 'ngResource']);
+var app = angular.module('gophish', ['ngTable', 'ngResource', 'ui.bootstrap']);
 
 app.factory('CampaignService', function($resource) {
-    return $resource('/api/campaigns/:id?api_key=' + API_KEY, {id: "@id"}, {
+    return $resource('/api/campaigns/:id?api_key=' + API_KEY, {
+        id: "@id"
+    }, {
         update: {
             method: 'PUT'
         }
@@ -9,7 +11,9 @@ app.factory('CampaignService', function($resource) {
 });
 
 app.factory('GroupService', function($resource) {
-    return $resource('/api/groups/:id?api_key=' + API_KEY, {id: "@id"}, {
+    return $resource('/api/groups/:id?api_key=' + API_KEY, {
+        id: "@id"
+    }, {
         update: {
             method: 'PUT'
         }
@@ -33,6 +37,69 @@ app.controller('CampaignCtrl', function($scope, CampaignService, ngTableParams)
             })
         }
     });
+
+    $scope.addGroup = function() {
+        if ($scope.group.name != "") {
+            $scope.campaign.groups.push({
+                name: $scope.group.name
+            });
+            $scope.group.name = ""
+            $scope.editGroupTableParams.reload()
+        }
+    };
+
+    $scope.removeGroup = function(group) {
+        $scope.campaign.groups.splice($scope.campaign.groups.indexOf(group), 1);
+        $scope.editGroupTableParams.reload()
+    };
+
+    $scope.newCampaign = function() {
+        $scope.campaign = {
+            name: '',
+            groups: []
+        };
+    };
+
+    $scope.editGroupTableParams = new ngTableParams({
+        page: 1, // show first page
+        count: 10, // count per page
+        sorting: {
+            name: 'asc' // initial sorting
+        }
+    }, {
+        total: 0, // length of data
+        getData: function($defer, params) {
+            params.total($scope.campaign.groups.length)
+            $defer.resolve($scope.campaign.groups.slice((params.page() - 1) * params.count(), params.page() * params.count()));
+        }
+    });
+
+    $scope.getGroups = function(val) {
+        return $http.get('/api/groups/lookup/', {
+            params: {
+                q: val
+            }
+        }).then(function(res) {
+            var groups = [];
+            angular.forEach(res.data.groups, function(item) {
+                addresses.push(item.group);
+            });
+            return groups;
+        });
+    };
+
+    $scope.saveCampaign = function(campaign) {
+        var newCampaign = new CampaignService(campaign);
+        newCampaign.$save({}, function() {
+            $scope.campaigns.push(newCampaign);
+            $scope.mainTableParams.reload()
+        });
+        $scope.group = {
+            name: '',
+            targets: [],
+        };
+        $scope.editGroupTableParams.reload()
+    }
 });
 
 app.controller('GroupCtrl', function($scope, GroupService, ngTableParams) {
@@ -103,7 +170,9 @@ app.controller('GroupCtrl', function($scope, GroupService, ngTableParams) {
                 $scope.mainTableParams.reload()
             });
         } else {
-            newGroup.$update({id : newGroup.id})
+            newGroup.$update({
+                id: newGroup.id
+            })
         }
         $scope.group = {
             name: '',
@@ -113,7 +182,9 @@ app.controller('GroupCtrl', function($scope, GroupService, ngTableParams) {
     }
     $scope.deleteGroup = function(group) {
         var deleteGroup = new GroupService(group);
-        deleteGroup.$delete({id : deleteGroup.id}, function() {
+        deleteGroup.$delete({
+            id: deleteGroup.id
+        }, function() {
             $scope.mainTableParams.reload();
         });
     }

templates/base.html

@@ -37,6 +37,7 @@
     <script src="/js/jquery.js"></script>
     <script src="/js/bootstrap.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
+    <script src="/js/ui-bootstrap-0.10.0.min.js"></script>
     <script src="/js/ng-resource.min.js"></script>
     <script src="/js/ng-table.min.js"></script>
     <script src="/js/app/gophish.js"></script>

templates/dashboard.html

@@ -21,7 +21,7 @@
     </div>
     <div class="col-md-9" ng-controller="CampaignCtrl">
         <div class="row">
-            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newCampaignModal"><i class="fa fa-plus"></i> New Campaign</button>
+            <button type="button" class="btn btn-primary" ng-click="newCampaign()" data-toggle="modal" data-target="#newCampaignModal"><i class="fa fa-plus"></i> New Campaign</button>
         </div>
         &nbsp;
         <div class="row">
@@ -59,21 +59,37 @@
                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                         <h4 class="modal-title" id="campaignModalLabel">New Campaign</h4>
                     </div>
-                    <form action="/">
                     <div class="modal-body">
                         <div class="form-group">
                             <label for="name">Name:</label>
-                                <input type="text" class="form-control" id="name" placeholder="Campaign name">
+                            <input type="text" class="form-control" ng-model="campaign.name" id="name" placeholder="Campaign name">
                             <br />
-                                <label for="users">Users &amp; Groups:</label>
-                                <input type="text" class="form-control" placeholder="Group Name or email address" id="users">
+                            <label class="control-label" for="users">Groups:</label>
+                            <form ng:submit="addGroup()">
+                                <div class="input-group">
+                                    <input type="text" class="form-control" placeholder="Group Name" id="users" ng-model="group.name" />
+                                    <span class="input-group-btn">
+                                        <button class="btn btn-primary"><i class="fa fa-plus"></i> Add</button>
+                                    </span>
+                                </div>
+                            </form>
+                            <br />
+                            <table ng-table="editGroupTableParams" class="table table-hover table-striped table-condensed">
+                                <tbody>
+                                    <tr ng-repeat="group in $data" class="editable-row">
+                                        <td>{{group.name}}
+                                            <span ng-click="removeGroup(group)" class="remove-row"><i class="fa fa-trash-o"></i>
+                                            </span>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
                         </div>
                     </div>
                     <div class="modal-footer">
                         <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-                            <button type="button" class="btn btn-primary" type="submit">Launch Campaign</button>
+                        <button type="button" class="btn btn-primary" ng-click="saveCampaign(campaign)" type="submit">Launch Campaign</button>
                     </div>
-                    </form>
                 </div>
             </div>
         </div>

templates/users.html

@@ -39,8 +39,6 @@
                                     <span class="sr-only">Toggle Dropdown</span>
                                 </button>
                                 <ul class="dropdown-menu" style="left:auto; right:0;" role="menu">
-                                    <li><a ng-href="/groups/{{group.id}}">View</a>
-                                    </li>
                                     <li><a ng-click="editGroup(group)" data-toggle="modal" ng-href="#" data-target="#newGroupModal">Edit</a>
                                     </li>
                                     <li class="divider"></li>