Changed look of donut chart legend

Fixed deleteCampaign tooltip
Moved Result Status styles to an object
Dashboard, Users,  now has fancy loading gif
Now only loading ckeditor from templates and landing pages templates
Starting to add maps (coming soon!)

static/css/main.css

@@ -255,11 +255,10 @@
 }
 .chartist-legend li {
   display: block;
-  padding-left: 30px;
   position: relative;
   margin-bottom: 4px;
   border-radius: 5px;
-  padding: 2px 8px 2px 28px;
+  padding: 2px 8px 2px 8px;
   font-size: 14px;
   cursor: default;
   -webkit-transition: background-color 200ms ease-in-out;
@@ -268,13 +267,12 @@
   transition: background-color 200ms ease-in-out;
 }
 .chartist-legend li span {
-  display: block;
+  display: inline-block;
-  position: absolute;
+  vertical-align:middle;
-  left: 0;
-  top: 0;
   width: 20px;
-  height: 100%;
+  height: 20px;
-  border-radius: 5px;
+  margin-right:10px;
+  border-radius: 50%;
 }
 
 .ct-series-a .ct-slice-donut {
@@ -285,16 +283,32 @@
     stroke:#6c7a89 !important;
 }
 
+.ct-slice-donut.ct-slice-donut-sent{
+    stroke:#1abc9c !important
+}
+
+.ct-slice-donut.ct-slice-donut-opened{
+    stroke:#eb9532 !important;
+}
+
 .ct-slice-donut.ct-slice-donut-success{
     stroke:#f05b4f !important;
 }
 
+.ct-slice-donut.ct-slice-donut-clicked{
+    stroke:#f05b4f !important;
+}
+
+.ct-legend-error {
+    background-color: #6c7a89 !important;
+}
+
 .ct-legend-sent {
     background-color: #1abc9c !important;
 }
 
-.ct-legend-error {
+.ct-legend-opened {
-    background-color: #6c7a89 !important;
+    background-color: #eb9532 !important;
 }
 
 .ct-legend-success {
@@ -302,5 +316,5 @@
 }
 
 .ct-legend-clicked {
-    background-color: #eb9532 !important;
+    background-color: #f05b4f !important;
 }

static/js/app/campaign_results.js

@@ -1,29 +1,31 @@
-// labels is a map of campaign statuses to
+var map = null
-// CSS classes
-var labels = {
-    "Email Sent" : "label-primary",
-    "Email Opened" : "label-info",
-    "Clicked Link" : "label-success",
-	"Error" : "label-danger"
-}
 
-//
+// statuses is a helper map to point result statuses to ui classes
-var classes = {
+var statuses = {
     "Email Sent" : {
         slice: "ct-slice-donut-sent",
-        legend: "ct-legend-sent"
+        legend: "ct-legend-sent",
+        label: "label-success"
     },
     "Email Opened" : {
         slice: "ct-slice-donut-opened",
-        legend: "ct-legend-opened"
+        legend: "ct-legend-opened",
+        label: "label-warning"
     },
     "Clicked Link" : {
         slice: "ct-slice-donut-clicked",
-        legend: "ct-legend-clicked"
+        legend: "ct-legend-clicked",
+        label: "label-danger"
+    },
+    "Success" : {
+        slice: "ct-slice-donut-clicked",
+        legend: "ct-legend-clicked",
+        label: "label-danger"
     },
     "Error" : {
         slice: "ct-slice-donut-error",
-        legend: "ct-legend-error"
+        legend: "ct-legend-error",
+        label: "label-default"
     }
 }
 
@@ -57,6 +59,8 @@ $(document).ready(function(){
         if (campaign){
             // Set the title
             $("#page-title").text("Results for " + c.name)
+            // Setup tooltips
+            $('[data-toggle="tooltip"]').tooltip()
             // Setup our graphs
             var timeline_data = {series:[{
                 name: "Events",
@@ -92,7 +96,7 @@ $(document).ready(function(){
             // Setup the results table
             resultsTable = $("#resultsTable").DataTable();
             $.each(campaign.results, function(i, result){
-                label = labels[result.status] || "label-default";
+                label = statuses[result.status].label || "label-default";
                 resultsTable.row.add([
                     result.first_name || "",
                     result.last_name || "",
@@ -108,10 +112,8 @@ $(document).ready(function(){
             })
             // Setup the graphs
             $.each(campaign.timeline, function(i, event){
-                console.log(moment(event.time).format('MMMM Do YYYY h:mm'))
                 timeline_data.series[0].data.push({meta : i, x: new Date(event.time), y:1})
             })
-            console.log(timeline_data)
             $.each(email_series_data, function(status, count){
                 email_data.series.push({meta: status, value: count})
             })
@@ -146,10 +148,10 @@ $(document).ready(function(){
                 // We don't want to create the legend twice
                 if (!email_legend[data.meta]) {
                     console.log(data.meta)
-                    $("#email_chart_legend").append('<li><span class="' + classes[data.meta].legend + '"></span>' + data.meta + '</li>')
+                    $("#email_chart_legend").append('<li><span class="' + statuses[data.meta].legend + '"></span>' + data.meta + '</li>')
                     email_legend[data.meta] = true
                 }
-                data.element.addClass(classes[data.meta].slice)
+                data.element.addClass(statuses[data.meta].slice)
             })
             // Setup the average chart listeners
             $piechart = $("#email_chart")
@@ -177,6 +179,24 @@ $(document).ready(function(){
             $("#loading").hide()
             $("#campaignResults").show()
         }
+        // Load up the map data (only once!)
+        // Slated for 0.2 release - coming soon! :)
+        // $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+        //     if ($(e.target).attr('href') == "#plugins"){
+        //         if (!map){
+        //             map = new Datamap({
+        //                 element: document.getElementById("resultsMap"),
+        //                 responsive: true,
+        //                 fills: {
+        //                     defaultFill: "#34495e"
+        //                 },
+        //                 geographyConfig: {
+        //                     highlightFillColor : "#1abc9c"
+        //                 }
+        //             });
+        //         }
+        //     }
+        // })
     })
     .error(function(){
         errorFlash(" Campaign not found!")

static/js/app/dashboard.js

@@ -3,8 +3,10 @@ var campaigns = []
 $(document).ready(function(){
     api.campaigns.get()
     .success(function(cs){
+        $("#loading").hide()
         campaigns = cs
         if (campaigns.length > 0){
+            $("#dashboard").show()
             // Create the overview chart data
             var overview_data = {labels:[],series:[[]]}
             var average_data = {series:[]}
@@ -22,8 +24,6 @@ $(document).ready(function(){
                 showLabel: false
             }
             var average = 0
-            $("#emptyMessage").hide()
-            $("#campaignTable").show()
             campaignTable = $("#campaignTable").DataTable();
             $.each(campaigns, function(i, campaign){
                 var campaign_date = moment(campaign.created_date).format('MMMM Do YYYY h:mm')
@@ -31,7 +31,13 @@ $(document).ready(function(){
                 campaignTable.row.add([
                     campaign.name,
                     campaign_date,
-                    campaign.status
+                    campaign.status,
+                    "<div class='pull-right'><a class='btn btn-primary' href='/campaigns/" + campaign.id + "'>\
+                    <i class='fa fa-bar-chart'></i>\
+                    </a>\
+                    <button class='btn btn-danger' onclick='deleteCampaign(" + i + ")'>\
+                    <i class='fa fa-trash-o'></i>\
+                    </button></div>"
                 ]).draw()
                 // Add it to the chart data
                 campaign.y = 0
@@ -103,6 +109,8 @@ $(document).ready(function(){
                 var $cidx = $(this).attr('ct:meta');
                 window.location.href = "/campaigns/" + campaigns[cidx].id
             });
+        } else {
+            $("#emptyMessage").show()
         }
     })
     .error(function(){

static/js/app/users.js

@@ -109,10 +109,14 @@ function deleteGroup(idx){
 }
 
 function load(){
+    $("#groupTable").hide()
+    $("#emptyMessage").hide()
+    $("#loading").show()
     api.groups.get()
     .success(function(gs){
         if (gs.length > 0){
             groups = gs
+            $("#emptyMessage").hide()
             $("#loading").hide()
             $("#groupTable").show()
             groupTable = $("#groupTable").DataTable();
@@ -138,6 +142,9 @@ function load(){
                     </button></div>"
                 ]).draw()
             })
+        } else {
+            $("#loading").hide()
+            $("#emptyMessage").show()
         }
     })
     .error(function(){

templates/base.html

@@ -91,8 +91,6 @@
     <script src="/js/dataTables.bootstrap.js"></script>
     <script src="/js/chartist.min.js"></script>
     <script src="/js/moment.min.js"></script>
-    <script src="/js/ckeditor/ckeditor.js"></script>
-    <script src="/js/ckeditor/adapters/jquery.js"></script>
     <script src="/js/gophish.js"></script>
     {{template "scripts" .}}
 </body>

templates/campaign_results.html

@@ -50,8 +50,8 @@
         <div class="row">
             <ul class="nav nav-tabs" role="tablist">
                 <li class="active"><a href="#overview" aria-controls="home" role="tab" data-toggle="tab">Overview</a></li>
-                <li><a href="#plugins" aria-controls="profile" role="tab" data-toggle="tab">Plugins</a></li>
+                <!-- <li><a href="#plugins" aria-controls="profile" role="tab" data-toggle="tab">Plugins</a></li>
-                <li><a href="#demographics" aria-controls="settings" role="tab" data-toggle="tab">Demographics</a></li>
+                <li><a href="#demographics" aria-controls="settings" role="tab" data-toggle="tab">Demographics</a></li> -->
             </ul>
             <div class="tab-content">
                 <div role="tabpanel" class="tab-pane active" id="overview">
@@ -72,12 +72,16 @@
                         </div>
                     </div>
                 </div>
-                <div role="tabpanel" class="tab-pane" id="plugins">
+                <!-- <div role="tabpanel" class="tab-pane" id="plugins">
-                    Plugins here
+                    <div class="row">
+                        <div class="col-md-8">
+                            <div id="resultsMap"></div>
+                        </div>
+                    </div>
                 </div>
                 <div role="tabpanel" class="tab-pane" id="demographics">
                     Demographics here
-                </div>
+                </div> -->
             </div>
         </div>
         <div class="row">
@@ -102,5 +106,9 @@
 {{end}}
 {{define "scripts"}}
 <script src="/js/jquery.ui.widget.js"></script>
+<!-- d3, topojson, and datamaps for mapping -->
+<script src="/js/d3.min.js"></script>
+<script src="/js/topojson.min.js"></script>
+<script src="/js/datamaps.min.js"></script>
 <script src="/js/app/campaign_results.js"></script>
 {{end}}

templates/dashboard.html

@@ -25,12 +25,15 @@
     <h1 class="page-header">
         Dashboard
     </h1>
-    <div id="emptyMessage" class="row">
+    <div id="loading">
+        <i class="fa fa-spinner fa-spin fa-4x"></i>
+    </div>
+    <div id="emptyMessage" class="row" style="display:none;">
         <div class="alert alert-info">
             No campaigns created yet. Let's create one!
         </div>
     </div>
-    <div>
+    <div id="dashboard" style="display:none;">
         <div class="row">
             <div id="overview_chart" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                 <p style="text-align:center;">Phishing Success Overview</p>
@@ -58,37 +61,13 @@
         </div>
         &nbsp;&nbsp;
         <div class="row">
-            <!-- <table ng-table="mainTableParams" class="table table-hover table-striped table-bordered">
+            <table id="campaignTable" class="table">
-                <tbody>
-                    <tr ng-repeat="campaign in $data" class="editable-row">
-                        <td data-title="'Created Date'" class="col-sm-1">campaign.created_date | date:'medium'</td>
-                        <td data-title="'Name'" class="col-sm-2">campaign.name
-                            <div class="btn-group" style="float: right;">
-                                <button type="button" class="btn btn-primary dropdown-toggle edit-button" data-toggle="dropdown">
-                                    <span class="caret" style="border-top-color:#FFFFFF"></span>
-                                    <span class="sr-only">Toggle Dropdown</span>
-                                </button>
-                                <ul class="dropdown-menu" style="left:auto; right:0;" role="menu">
-                                    <li><a ng-href="#/campaigns/campaign.id">View</a>
-                                    </li>
-                                    <li><a href="/campaigns/campaign.id/relaunch">Relaunch</a>
-                                    </li>
-                                    <li class="divider"></li>
-                                    <li><a ng-click="deleteCampaign(campaign)" ng-href="#">Delete</a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </td>
-                        <td data-title="'Status'" class="col-sm-1">campaign.status</td>
-                    </tr>
-                </tbody>
-            </table> -->
-            <table id="campaignTable" class="table" style="display:none;">
                 <thead>
                     <tr>
                         <th>Name</th>
                         <th>Created Date</th>
                         <th>Status</th>
+                        <th class="col-md-2 col-sm-2"></th>
                     </tr>
                 </thead>
                 <tbody>

templates/landing_pages.html

@@ -1,3 +1,4 @@
+{{define "body"}}
 <div class="container-fluid">
     <div class="row">
         <div class="col-sm-3 col-md-2 sidebar">
@@ -20,48 +21,41 @@
         </div>
     </div>
 </div>
-<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" ng-controller="LandingPageCtrl">
+<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
     <h1 class="page-header">
         Landing Pages
     </h1>
-    <div class="row">
+    <div id="flashes" class="row"></div>
-        <div ng-repeat="flash in flashes" 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="editPage('new')" data-toggle="modal" data-target="#newLandingPageModal"><i class="fa fa-plus"></i> New Page</button>
     </div>
     &nbsp;
-    <div ng-show="!pages.length">
+    <div id="loading">
+        <i class="fa fa-spinner fa-spin fa-4x"></i>
+    </div>
+    <div style="display:none;">
         <div class="row">
             <div class="alert alert-info">
                 No pages created yet. Let's create one!
             </div>
         </div>
     </div>
-    <div ng-show="pages.length" class="row">
+    <div class="row">
-        <table ng-table="mainTableParams" class="table table-hover table-striped table-bordered">
+        <table id="pagesTable" class="table" style="display:none;">
-            <tbody>
+            <thead>
-                <tr ng-repeat="page in $data | orderBy: '-modified_date'" class="editable-row">
+                <tr>
-                    <td data-title="'Name'" sortable="'name'" class="col-sm-2">{{page.name}}
+                    <th>Name</th>
-                      <div class="btn-group" style="float: right;">
+                    <th>Last Modified Date</th>
-                          <button type="button" class="btn btn-primary dropdown-toggle edit-button" data-toggle="dropdown">
+                    <th class="col-md-2"></th>
-                              <span class="caret" style="border-top-color:#FFFFFF"></span>
-                              <span class="sr-only">Toggle Dropdown</span>
-                          </button>
-                          <ul class="dropdown-menu" style="left:auto; right:0;" role="menu">
-                              <li><a ng-click="editPage(page)">Edit</a>
-                              </li>
-                              <li class="divider"></li>
-                              <li><a ng-click="deletePage(page)" ng-href="#">Delete</a>
-                              </li>
-                          </ul>
-                      </div>
-                    </td>
-                    <td data-title="'Modified Date'" class="col-sm-1">{{page.modified_date | date:'medium'}}</td>
                 </tr>
+            </thead>
+            <tbody>
             </tbody>
         </table>
     </div>
 </div>
+{{end}}
+{{define "scripts"}}
+<script src="/js/ckeditor/ckeditor.js"></script>
+<script src="/js/ckeditor/adapters/jquery.js"></script>
+{{end}}

templates/templates.html

@@ -139,5 +139,7 @@
 </div>
 {{end}}
 {{define "scripts"}}
+<script src="/js/ckeditor/ckeditor.js"></script>
+<script src="/js/ckeditor/adapters/jquery.js"></script>
 <script src="/js/app/templates.js"></script>
 {{end}}

templates/users.html

@@ -54,34 +54,6 @@
             </tbody>
         </table>
     </div>
-    <!-- <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="'Members'" class="col-sm-2">
-                        <span ng-repeat="target in group.targets | cut:5 track by $index ">
-                            target$last ? '' : ', '
-                        </span>
-                        <div class="btn-group" style="float: right;">
-                            <button type="button" class="btn btn-primary dropdown-toggle edit-button" data-toggle="dropdown">
-                                <span class="caret" style="border-top-color:#FFFFFF"></span>
-                                <span class="sr-only">Toggle Dropdown</span>
-                            </button>
-                            <ul class="dropdown-menu" style="left:auto; right:0;" role="menu">
-                                <li><a ng-click="editGroup(group)">Edit</a>
-                                </li>
-                                <li class="divider"></li>
-                                <li><a ng-click="deleteGroup(group)">Delete</a>
-                                </li>
-                            </ul>
-                        </div>
-                    </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="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">