Cleaned up sidebar nav links

Moved JS api structure to api.*.get(), etc. Working on /groups now
2024-11-14 16:27:23 +00:00 · 2015-06-16 23:09:27 -05:00 · 2015-06-16 23:09:27 -05:00 · cf8c8c4534
commit cf8c8c4534
parent 22a4d3f923
9 changed files with 293 additions and 156 deletions
--- a/static/js/app/campaigns.js
+++ b/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!")
-        console.log(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.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 = {}
-    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()
-    })
+    load()
 })
--- a/static/js/app/users.js
+++ b/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()
+})
--- a/static/js/gophish.js
+++ b/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 campaigns = {
-    // get() - Queries the API for GET /campaigns
-    get: function(){
-        return api("/campaigns/", "GET", {})
+var api = {
+    // campaigns contains the endpoints for /campaigns
+    campaigns : {
+        // get() - Queries the API for GET /campaigns
+        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
-    post: function(data){
-        return api("/campaigns/", "POST", data)
+    // campaignId contains the endpoints for /campaigns/:id
+    campaignId : {
+        // 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)
-    }
 }
--- a/templates/campaign_results.html
+++ b/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>
--- a/templates/campaigns.html
+++ b/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">
--- a/templates/dashboard.html
+++ b/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>
--- a/templates/landing_pages.html
+++ b/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>
--- a/templates/templates.html
+++ b/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>
--- a/templates/users.html
+++ b/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}}">
-            <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>
+        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#groupModal"><i class="fa fa-plus"></i> New Campaign</button>
    </div>
    &nbsp;
-    <div ng-show="!groups.length">
-        <div class="row">
-            <div class="alert alert-info">
-                No groups created yet. Let's create one!
-            </div>
+    <div id="emptyMessage" class="row">
+        <div class="alert alert-info">
+            No groups created yet. Let's create one!
        </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}}