Cleaned up sidebar nav links

Moved JS api structure to api.*.get(), etc.
Working on /groups now

static/js/app/campaigns.js

@@ -1,3 +1,4 @@
+// Save attempts to POST to /campaigns/
 function save(){
     var campaign = {
         name: $("#name").val(),
@@ -13,32 +14,44 @@ function save(){
         groups: [{name : "Morning catch employees"}]
     }
     // Submit the campaign
-    campaigns.post(campaign)
+    api.campaigns.post(campaign)
     .success(function(data){
-        successFlash("submitted!")
+        successFlash("Campaign successfully launched!")
-        console.log(data)
+        load()
     })
     .error(function(data){
         $("#modal\\.flashes").empty().append("<div style=\"text-align:center\" class=\"alert alert-danger\">\
             <i class=\"fa fa-exclamation-circle\"></i> " + data.responseJSON.message + "</div>")
     })
 }
+
+function groupAdd(name){
+    groups.append({
+        name: name
+    })
+}
+
+function load(){
+    api.campaigns.get()
+    .success(function(campaigns){
+        if (campaigns.length > 0){
+            $("#emptyMessage").hide()
+            $("#campaignTable").show()
+            campaignTable = $("#campaignTable").DataTable();
+            $.each(campaigns, function(i, campaign){
+                campaignTable.row.add([
+                    campaign.created_date,
+                    campaign.name,
+                    campaign.status
+                ]).draw()
+            })
+        }
+    })
+    .error(function(){
+        errorFlash("Error fetching campaigns")
+    })
+}
+
 $(document).ready(function(){
-    var campaignData = {}
+    load()
-    campaigns.get()
-    .success(function(data){
-        successFlash("worked!")
-        campaignData = data
-    })
-    .error(function(data){
-        errorFlash("No work")
-    })
-    campaignTable = $("#campaignTable").DataTable();
-    $.each(campaignData, function(i, campaign){
-        campaignTable.row.add([
-            campaign.created_date,
-            campaign.name,
-            campaign.status
-        ]).draw()
-    })
 })

static/js/app/users.js

@@ -0,0 +1,49 @@
+// Save attempts to POST to /campaigns/
+function save(){
+    var targets = {}
+    var group = {
+        name: $("#name").val(),
+        targets: targets
+    }
+    // Submit the campaign
+    api.groups.post(group)
+    .success(function(data){
+        successFlash("Campaign successfully launched!")
+        load()
+    })
+    .error(function(data){
+        $("#modal\\.flashes").empty().append("<div style=\"text-align:center\" class=\"alert alert-danger\">\
+            <i class=\"fa fa-exclamation-circle\"></i> " + data.responseJSON.message + "</div>")
+    })
+}
+
+function groupAdd(name){
+    groups.append({
+        name: name
+    })
+}
+
+function load(){
+    api.groups.get()
+    .success(function(groups){
+        if (groups.length > 0){
+            $("#emptyMessage").hide()
+            $("#groupTable").show()
+            groupTable = $("#groupTable").DataTable();
+            $.each(groups, function(i, group){
+                groupTable.row.add([
+                    group.Name,
+                    group.targets,
+                    group.modified_date
+                ]).draw()
+            })
+        }
+    })
+    .error(function(){
+        errorFlash("Error fetching groups")
+    })
+}
+
+$(document).ready(function(){
+    load()
+})

static/js/gophish.js

@@ -10,7 +10,7 @@ function successFlash(message) {
     )
 }
 
-function api(endpoint, method, data) {
+function query(endpoint, method, data) {
     return $.ajax({
         url: "/api" + endpoint + "?api_key=" + user.api_key,
         async: false,
@@ -24,98 +24,96 @@ function api(endpoint, method, data) {
 /*
 Define our API Endpoints
 */
-// campaigns contains the endpoints for /campaigns
+var api = {
-var campaigns = {
+    // campaigns contains the endpoints for /campaigns
-    // get() - Queries the API for GET /campaigns
+    campaigns : {
-    get: function(){
+        // get() - Queries the API for GET /campaigns
-        return api("/campaigns/", "GET", {})
+        get: function(){
+            return query("/campaigns/", "GET", {})
+        },
+        // post() - Posts a campaign to POST /campaigns
+        post: function(data){
+            return query("/campaigns/", "POST", data)
+        }
     },
-    // post() - Posts a campaign to POST /campaigns
+    // campaignId contains the endpoints for /campaigns/:id
-    post: function(data){
+    campaignId : {
-        return api("/campaigns/", "POST", data)
+        // get() - Queries the API for GET /campaigns/:id
+        get: function(id){
+            return query("/campaigns/" + id, "GET", {})
+        },
+        // post() - Posts a campaign to POST /campaigns/:id
+        post: function(campaign){
+            return query("/campaigns/" + campaign.id, "POST", data)
+        },
+        // put() - Puts a campaign to PUT /campaigns/:id
+        put: function (campaign){
+            return query("/campaigns/" + campaign.id, "PUT", data)
+        },
+        // delete() - Deletes a campaign at DELETE /campaigns/:id
+        delete: function(id){
+            return query("/campaigns/" + id, "DELETE", data)
+        }
+    },
+    // groups contains the endpoints for /groups
+    groups : {
+        // get() - Queries the API for GET /groups
+        get: function(){
+            return query("/groups/", "GET", {})
+        },
+        // post() - Posts a campaign to POST /groups
+        post: function(group){
+            return query("/groups/", "POST", group)
+        }
+    },
+    // groupId contains the endpoints for /groups/:id
+    groupId : {
+        // get() - Queries the API for GET /groups/:id
+        get: function(id){
+            return query("/groups/" + id, "GET", {})
+        },
+        // post() - Posts a campaign to POST /groups/:id
+        post: function(group){
+            return query("/groups/" + group.id, "POST", data)
+        },
+        // put() - Puts a campaign to PUT /groups/:id
+        put: function (group){
+            return query("/groups/" + group.id, "PUT", data)
+        },
+        // delete() - Deletes a campaign at DELETE /groups/:id
+        delete: function(id){
+            return query("/groups/" + id, "DELETE", data)
+        }
+    },
+    // templates contains the endpoints for /templates
+    templates : {
+        // get() - Queries the API for GET /templates
+        get: function(){
+            return query("/templates/", "GET", {})
+        },
+        // post() - Posts a campaign to POST /templates
+        post: function(template){
+            return query("/templates/", "POST", template)
+        }
+    },
+    // templateId contains the endpoints for /templates/:id
+    templateId : {
+        // get() - Queries the API for GET /templates/:id
+        get: function(id){
+            return query("/templates/" + id, "GET", {})
+        },
+        // post() - Posts a campaign to POST /templates/:id
+        post: function(template){
+            return query("/templates/" + template.id, "POST", data)
+        },
+        // put() - Puts a campaign to PUT /templates/:id
+        put: function (template){
+            return query("/templates/" + template.id, "PUT", data)
+        },
+        // delete() - Deletes a campaign at DELETE /templates/:id
+        delete: function(id){
+            return query("/templates/" + id, "DELETE", data)
+        }
     }
-}
 
-// campaignId contains the endpoints for /campaigns/:id
-var campaignId = {
-    // get() - Queries the API for GET /campaigns/:id
-    get: function(id){
-        return api("/campaigns/" + id, "GET", {})
-    },
-    // post() - Posts a campaign to POST /campaigns/:id
-    post: function(campaign){
-        return api("/campaigns/" + campaign.id, "POST", data)
-    },
-    // put() - Puts a campaign to PUT /campaigns/:id
-    put: function (campaign){
-        return api("/campaigns/" + campaign.id, "PUT", data)
-    },
-    // delete() - Deletes a campaign at DELETE /campaigns/:id
-    delete: function(id){
-        return api("/campaigns/" + id, "DELETE", data)
-    }
-}
-
-// groups contains the endpoints for /groups
-var groups = {
-    // get() - Queries the API for GET /groups
-    get: function(){
-        return api("/groups/", "GET", {})
-    },
-    // post() - Posts a campaign to POST /groups
-    post: function(group){
-        return api("/groups/", "POST", group)
-    }
-}
-
-// groupId contains the endpoints for /groups/:id
-var groupId = {
-    // get() - Queries the API for GET /groups/:id
-    get: function(id){
-        return api("/groups/" + id, "GET", {})
-    },
-    // post() - Posts a campaign to POST /groups/:id
-    post: function(group){
-        return api("/groups/" + group.id, "POST", data)
-    },
-    // put() - Puts a campaign to PUT /groups/:id
-    put: function (group){
-        return api("/groups/" + group.id, "PUT", data)
-    },
-    // delete() - Deletes a campaign at DELETE /groups/:id
-    delete: function(id){
-        return api("/groups/" + id, "DELETE", data)
-    }
-}
-
-// templates contains the endpoints for /templates
-var templates = {
-    // get() - Queries the API for GET /templates
-    get: function(){
-        return api("/templates/", "GET", {})
-    },
-    // post() - Posts a campaign to POST /templates
-    post: function(template){
-        return api("/templates/", "POST", template)
-    }
-}
-
-// templateId contains the endpoints for /templates/:id
-var templateId = {
-    // get() - Queries the API for GET /templates/:id
-    get: function(id){
-        return api("/templates/" + id, "GET", {})
-    },
-    // post() - Posts a campaign to POST /templates/:id
-    post: function(template){
-        return api("/templates/" + template.id, "POST", data)
-    },
-    // put() - Puts a campaign to PUT /templates/:id
-    put: function (template){
-        return api("/templates/" + template.id, "PUT", data)
-    },
-    // delete() - Deletes a campaign at DELETE /templates/:id
-    delete: function(id){
-        return api("/templates/" + id, "DELETE", data)
-    }
 }

templates/campaign_results.html

@@ -7,13 +7,13 @@
                 </li>
                 <li class="active"><a href="#/campaigns">Campaigns</a>
                 </li>
-                <li><a href="#/users">Users &amp; Groups</a>
+                <li><a href="/users">Users &amp; Groups</a>
                 </li>
-                <li><a href="#/templates">Email Templates</a>
+                <li><a href="/templates">Email Templates</a>
                 </li>
-                <li><a href="#/landing_pages">Landing Pages</a>
+                <li><a href="/landing_pages">Landing Pages</a>
                 </li>
-                <li><a href="#/settings">Settings</a>
+                <li><a href="/settings">Settings</a>
                 </li>
                 <li><a href="/api/">API Documentation</a>
                 </li>

templates/campaigns.html

@@ -7,13 +7,13 @@
                 </li>
                 <li class="active"><a href="#/campaigns">Campaigns</a>
                 </li>
-                <li><a href="#/users">Users &amp; Groups</a>
+                <li><a href="/users">Users &amp; Groups</a>
                 </li>
-                <li><a href="#/templates">Email Templates</a>
+                <li><a href="/templates">Email Templates</a>
                 </li>
-                <li><a href="#/landing_pages">Landing Pages</a>
+                <li><a href="/landing_pages">Landing Pages</a>
                 </li>
-                <li><a href="#/settings">Settings</a>
+                <li><a href="/settings">Settings</a>
                 </li>
                 <li><a href="/api/">API Documentation</a>
                 </li>
@@ -27,15 +27,15 @@
     </h1>
     <div id="flashes" class="row"></div>
     <div class="row">
-        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"><i class="fa fa-plus"></i> New Campaign</button>
+        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#campaignModal"><i class="fa fa-plus"></i> New Campaign</button>
     </div>
     &nbsp;
-    <div class="row">
+    <div id="emptyMessage" class="row">
         <div class="alert alert-info">
             No campaigns created yet. Let's create one!
         </div>
     </div>
-    <table id="campaignTable" class="table">
+    <table id="campaignTable" class="table" style="display:none;">
         <thead>
             <tr>
                 <th>Created Date</th>
@@ -74,7 +74,7 @@
     </div>
 </div>
 <!-- Modal -->
-<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+<div class="modal fade" id="campaignModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">

templates/dashboard.html

@@ -5,15 +5,15 @@
             <ul class="nav nav-sidebar">
                 <li class="active"><a href="#">Dashboard</a>
                 </li>
-                <li><a href="#/campaigns">Campaigns</a>
+                <li><a href="/campaigns">Campaigns</a>
                 </li>
-                <li><a href="#/users">Users &amp; Groups</a>
+                <li><a href="/users">Users &amp; Groups</a>
                 </li>
-                <li><a href="#/templates">Email Templates</a>
+                <li><a href="/templates">Email Templates</a>
                 </li>
-                <li><a href="#/landing_pages">Landing Pages</a>
+                <li><a href="/landing_pages">Landing Pages</a>
                 </li>
-                <li><a href="#/settings">Settings</a>
+                <li><a href="/settings">Settings</a>
                 </li>
                 <li><a href="/api/">API Documentation</a>
                 </li>

templates/landing_pages.html

@@ -4,15 +4,15 @@
             <ul class="nav nav-sidebar">
                 <li><a href="#">Dashboard</a>
                 </li>
-                <li><a href="#/campaigns">Campaigns</a>
+                <li><a href="/campaigns">Campaigns</a>
                 </li>
-                <li><a href="#/users">Users &amp; Groups</a>
+                <li><a href="/users">Users &amp; Groups</a>
                 </li>
-                <li><a href="#/templates">Email Templates</a>
+                <li><a href="/templates">Email Templates</a>
                 </li>
                 <li class="active"><a href="#/landing_pages">Landing Pages</a>
                 </li>
-                <li><a href="#/settings">Settings</a>
+                <li><a href="/settings">Settings</a>
                 </li>
                 <li><a href="/api/">API Documentation</a>
                 </li>

templates/templates.html

@@ -5,15 +5,15 @@
             <ul class="nav nav-sidebar">
                 <li><a href="#">Dashboard</a>
                 </li>
-                <li><a href="#/campaigns">Campaigns</a>
+                <li><a href="/campaigns">Campaigns</a>
                 </li>
-                <li><a href="#/users">Users &amp; Groups</a>
+                <li><a href="/users">Users &amp; Groups</a>
                 </li>
                 <li class="active"><a href="#/templates">Email Templates</a>
                 </li>
-                <li><a href="#/landing_pages">Landing Pages</a>
+                <li><a href="/landing_pages">Landing Pages</a>
                 </li>
-                <li><a href="#/settings">Settings</a>
+                <li><a href="/settings">Settings</a>
                 </li>
                 <li><a href="/api/">API Documentation</a>
                 </li>

templates/users.html

@@ -5,15 +5,15 @@
             <ul class="nav nav-sidebar">
                 <li><a href="#">Dashboard</a>
                 </li>
-                <li><a href="#/campaigns">Campaigns</a>
+                <li><a href="/campaigns">Campaigns</a>
                 </li>
                 <li class="active"><a href="#/users">Users &amp; Groups</a>
                 </li>
-                <li><a href="#/templates">Email Templates</a>
+                <li><a href="/templates">Email Templates</a>
                 </li>
-                <li><a href="#/landing_pages">Landing Pages</a>
+                <li><a href="/landing_pages">Landing Pages</a>
                 </li>
-                <li><a href="#/settings">Settings</a>
+                <li><a href="/settings">Settings</a>
                 </li>
                 <li><a href="/api/">API Documentation</a>
                 </li>
@@ -25,30 +25,35 @@
     <h1 class="page-header">
         Users &amp; Groups
     </h1>
+    <div id="flashes" class="row"></div>
     <div class="row">
-        <div ng-repeat="flash in flashes.main" style="text-align:center" class="alert alert-{{flash.type}}">
+        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#groupModal"><i class="fa fa-plus"></i> New Campaign</button>
-            <i class="fa {{flash.icon}}"></i> {{flash.message}}
-        </div>
-    </div>
-    <div class="row">
-        <button type="button" class="btn btn-primary" ng-click="editGroup('new')" data-toggle="modal" data-target="#newGroupModal"><i class="fa fa-plus"></i> New Group</button>
     </div>
     &nbsp;
-    <div ng-show="!groups.length">
+    <div id="emptyMessage" class="row">
-        <div class="row">
+        <div class="alert alert-info">
-            <div class="alert alert-info">
+            No groups created yet. Let's create one!
-                No groups created yet. Let's create one!
-            </div>
         </div>
     </div>
-    <div ng-show="groups.length" class="row">
+    <table id="groupTable" class="table" style="display:none;">
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Members</th>
+                <th>Modified Date</th>
+            </tr>
+        </thead>
+        <tbody>
+        </tbody>
+    </table>
+    <!-- <div ng-show="groups.length" class="row">
         <table ng-table="mainTableParams" class="table table-hover table-striped table-bordered">
             <tbody>
                 <tr ng-repeat="group in $data | orderBy: '-modified_date'" class="editable-row">
-                    <td data-title="'Name'" sortable="'name'" class="col-sm-1">{{group.name}}</td>
+                    <td data-title="'Name'" sortable="'name'" class="col-sm-1">group.name</td>
                     <td data-title="'Members'" class="col-sm-2">
                         <span ng-repeat="target in group.targets | cut:5 track by $index ">
-                            {{target}}{{$last ? '' : ', '}}
+                            target$last ? '' : ', '
                         </span>
                         <div class="btn-group" style="float: right;">
                             <button type="button" class="btn btn-primary dropdown-toggle edit-button" data-toggle="dropdown">
@@ -64,10 +69,82 @@
                             </ul>
                         </div>
                     </td>
-                    <td data-title="'Modified Date'" class="col-sm-1">{{group.modified_date | date:'medium'}}</td>
+                    <td data-title="'Modified Date'" class="col-sm-1">group.modified_date | date:'medium'</td>
                 </tr>
             </tbody>
         </table>
+    </div> -->
+</div>
+<!-- Modal -->
+<div class="modal fade" id="groupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="groupModalLabel">New Group</h4>
+      </div>
+      <div class="modal-body">
+          <div class="row" id="modal.flashes"></div>
+          <div class="form-group">
+              <label for="name">Name:</label>
+              <input type="text" class="form-control" id="name" placeholder="Campaign name" autofocus>
+              <br />
+              <label class="control-label" for="template">Template:</label>
+              <input type="text" class="form-control" placeholder="Template Name" id="template" typeahead="template.name for template in templates | filter:{name:$viewValue}" typeahead-editable="false" ng-model="campaign.template.name" />
+              <br />
+              <div class="panel panel-default">
+                  <div class="panel-heading" role="tab">
+                      <a role="button" class="collapsed" data-toggle="collapse" href="#smtpPanel" aria-expanded="false" aria-controls="#smtpPanel">
+                          SMTP Options <i class="pull-right glyphicon"></i>
+                      </a>
+                  </div>
+                  <div class="panel-collapse collapse" id="smtpPanel" role="tabpanel">
+                      <div class="panel-body">
+                          <label class="control-label" for="from">From:</label>
+                          <input type="text" class="form-control" placeholder="First Last <test@example.com>" value="" name="from">
+                          <br />
+                          <label class="control-label" for="smtp_server">Host:</label>
+                          <input type="text" class="form-control" placeholder="smtp.example.com:25" value="" name="host">
+                          <br />
+                          <label class="control-label" for="smtp_server">Username:</label>
+                          <input type="text" class="form-control" placeholder="Username" value="" name="username">
+                          <br />
+                          <label class="control-label" for="smtp_server">Password:</label>
+                          <input type="password" class="form-control" placeholder="Password" value="" name="password">
+                          <br />
+                      </div>
+                 </div>
+              </div>
+              <label class="control-label" for="users">Groups:</label>
+              <form>
+                  <div class="input-group">
+                      <input type="text" class="form-control" placeholder="Group Name" id="users" typeahead="group.name for group in groups | filter:{name:$viewValue}" typeahead-editable="false" 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">Close</button>
+        <button type="button" class="btn btn-primary" onclick="save()">Save changes</button>
+      </div>
     </div>
+  </div>
 </div>
 {{end}}
+{{define "scripts"}}
+<script src="/js/app/users.js"></script>
+{{end}}