Improved usability/implementation of adding/editing groups and campaigns.

static/css/main.css

@@ -100,3 +100,8 @@
     padding: 3px 6px;
     font-size:9px;
   }
+
+  .remove-row {
+    float:right;
+    cursor:pointer;
+  }

static/js/app/gophish.js

@@ -1,11 +1,23 @@
 var app = angular.module('gophish', ['ngTable', 'ngResource']);
 
 app.factory('CampaignService', function($resource) {
-    return $resource('/api/campaigns/:id?api_key=' + API_KEY);
+    return $resource('/api/campaigns/:id?api_key=' + API_KEY, {
+        id: "@id"
+    }, {
+        update: {
+            method: 'PUT'
+        }
+    });
 });
 
 app.factory('GroupService', function($resource) {
-    return $resource('/api/groups/:id?api_key=' + API_KEY);
+    return $resource('/api/groups/:id?api_key=' + API_KEY, {
+        id: "@id"
+    }, {
+        update: {
+            method: 'PUT'
+        }
+    });
 });
 
 app.controller('CampaignCtrl', function($scope, CampaignService) {
@@ -24,9 +36,7 @@ app.controller('GroupCtrl', function($scope, GroupService) {
             $scope.newGroup = true;
             $scope.group = {
                 name: '',
-                targets: [{
+                targets: [],
-                    email: ''
-                }],
                 id: 0
             };
 
@@ -35,4 +45,16 @@ app.controller('GroupCtrl', function($scope, GroupService) {
             $scope.group = group;
         }
     };
+
+    $scope.addTarget = function() {
+        if ($scope.newTarget.email != "") {
+            $scope.group.targets.push({
+                email: $scope.newTarget.email
+            });
+            $scope.newTarget.email = ""
+        }
+    };
+    $scope.removeTarget = function(target) {
+        $scope.group.targets.splice($scope.group.targets.indexOf(target), 1);
+    };
 })

templates/dashboard.html

@@ -58,8 +58,6 @@
                 </tbody>
             </table>
         </div>
-    </div>
-</div>
         <!-- New Campaign Modal -->
         <div class="modal" id="newCampaignModal" tabindex="-1" role="dialog" aria-labelledby="campaignModalLabel" aria-hidden="true">
             <div class="modal-dialog">
@@ -72,9 +70,10 @@
                         <div class="modal-body">
                             <div class="form-group">
                                 <label for="name">Name:</label>
-                        <input type="text" class="form-control" id="name">
+                                <input type="text" class="form-control" id="name" placeholder="Campaign name">
+                                <br />
                                 <label for="users">Users &amp; Groups:</label>
-                        <input type="text" class="form-control" id="users">
+                                <input type="text" class="form-control" placeholder="Group Name or email address" id="users">
                             </div>
                         </div>
                         <div class="modal-footer">
@@ -85,4 +84,6 @@
                 </div>
             </div>
         </div>
+    </div>
+</div>
 {{% end %}}

templates/users.html

@@ -63,7 +63,7 @@
         </div>
     </div>
     <!-- New Campaign Modal -->
-    <div class="modal" id="newGroupModal" tabindex="-1" role="dialog" aria-labelledby="groupModalLabel" aria-hidden="true" ng-controller="GroupCtrl">
+    <div class="modal" id="newGroupModal" tabindex="-1" role="dialog" aria-labelledby="groupModalLabel" aria-hidden="true" >
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
@@ -71,28 +71,44 @@
                     <h4 class="modal-title" ng-hide="newGroup" id="groupModalLabel">Edit Group: {{group.name}}</h4>
                     <h4 class="modal-title" ng-show="newGroup" id="groupModalLabel">New Group</h4>
                 </div>
-                <form action="/">
                 <div class="modal-body">
                     <label class="control-label" for="name">Name:</label>
                     <div class="form-group">
-                            <input type="text" class="form-control" placeholder="Group name" id="name" value={{group.name}} />
+                        <input type="text" class="form-control" ng-model="group.name" placeholder="Group name" id="name" />
                     </div>
                     <div class="form-group">
                         <button class="btn btn-danger"><i class="fa fa-plus"></i> Bulk Import Users</button>
                     </div>
                     <label class="control-label" for="users">Users:</label>
+                    <form ng:submit="addTarget()">
                     <div class="input-group">
-                            <input type="email" class="form-control" placeholder="test@example.com" id="users" />
+                        <input type="email" class="form-control" placeholder="test@example.com" id="users" ng-model="newTarget.email" />
                         <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 class="table table-hover table-striped table-condensed">
+                        <thead>
+                            <tr>
+                                <th style="padding-left:0px; border:0;" class="col-sm-2">Members</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr ng-repeat="target in group.targets" class="editable-row">
+                                <td>{{target.email}}
+                                    <span ng-click="removeTarget(target)" class="remove-row"><i class="fa fa-trash-o"></i>
+                                    </span>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
                 </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">Save Group</button>
                 </div>
-                </form>
             </div>
         </div>
     </div>