UI fixes

Got submitting groups working
Fixed CKEditor integration on templates

static/css/flat-ui.css

@@ -1149,7 +1149,7 @@ label {
   color: #b2bcc5;
 }
 .form-control {
-  border: 2px solid #bdc3c7;
+  border: 1px solid #bdc3c7;
   color: #34495e;
   font-family: "Lato", Helvetica, Arial, sans-serif;
   font-size: 15px;

static/js/app/dashboard.js

@@ -0,0 +1,45 @@
+var overview_chart_options = {
+    animationEasing:"linear"
+}
+
+function load(){
+    api.campaigns.get()
+    .success(function(campaigns){
+        if (campaigns.length > 0){
+            var overview_ctx = $("#overview_chart").get(0).getContext("2d");
+            // Create the overview chart data
+            var overview_data = {labels:[],data:[]}
+            var average = 0
+            $("#emptyMessage").hide()
+            $("#campaignTable").show()
+            campaignTable = $("#campaignTable").DataTable();
+            $.each(campaigns, function(i, campaign){
+                // Add it to the table
+                campaignTable.row.add([
+                    campaign.created_date,
+                    campaign.name,
+                    campaign.status
+                ]).draw()
+                // Add it to the chart data
+                overview_data.labels.push(camaign.created_date)
+                $.each(campaign.results, function(j, result){
+                    if (result.status == "Success"){
+                        campaign.y++;
+                    }
+                })
+                campaign.y = Math.floor((campaign.y / campaign.results.length) * 100)
+                average += campaign.y
+                overview_data.data.push(campaign.y)
+            })
+            average = Math.floor(average / campaigns.length);
+            var overview_chart = new Chart(overview_ctx).Line(campaigns, overview_chart_options);
+        }
+    })
+    .error(function(){
+        errorFlash("Error fetching campaigns")
+    })
+}
+
+$(document).ready(function(){
+    load()
+})

static/js/app/templates.js

@@ -0,0 +1,87 @@
+// Save attempts to POST to /groups/
+function save(){
+    var targets = []
+    $.each($("#targetsTable").DataTable().rows().data(), function(i, target){
+        targets.push({
+            first_name : target[0],
+            last_name: target[1],
+            email: target[2],
+            position: target[3]
+        })
+    })
+    var group = {
+        name: $("#name").val(),
+        targets: targets
+    }
+    console.log(group)
+    // Submit the group
+    api.groups.post(group)
+    .success(function(data){
+        successFlash("Group added successfully!")
+        load()
+        dismiss()
+    })
+    .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 dismiss(){
+    $("#modal\\.flashes").empty()
+    $("#modal").modal('hide')
+}
+
+function edit(group){
+    $("#html_editor").ckeditor()
+    if (group == "new") {
+        group = {}
+    }
+    targets = $("#targetsTable").dataTable()
+    // Handle Addition
+    $("#targetForm").submit(function(){
+        targets.DataTable()
+        .row.add([
+            $("#firstName").val(),
+            $("#lastName").val(),
+            $("#email").val(),
+            $("#position").val(),
+            '<span style="cursor:pointer;"><i class="fa fa-trash-o"></i></span>'
+        ])
+        .draw()
+        $("#targetForm>div>input").val('')
+        $("#firstName").focus()
+        return false
+    })
+    // Handle Deletion
+    $("#targetsTable").on("click", "span>i.fa-trash-o", function(){
+        targets.DataTable()
+        .row( $(this).parents('tr') )
+        .remove()
+        .draw();
+    })
+}
+
+function load(){
+    api.templates.get()
+    .success(function(templates){
+        if (templates.length > 0){
+            $("#emptyMessage").hide()
+            $("#templateTable").show()
+            templateTable = $("#templateTable").DataTable();
+            $.each(templates, function(i, template){
+                templateTable.row.add([
+                    template.name,
+                    template.modified_date
+                ]).draw()
+            })
+        }
+    })
+    .error(function(){
+        errorFlash("Error fetching templates")
+    })
+}
+
+$(document).ready(function(){
+    load()
+})

static/js/app/users.js

@@ -1,14 +1,23 @@
-// Save attempts to POST to /campaigns/
+// Save attempts to POST to /groups/
 function save(){
-    var targets = [{}]
+    var targets = []
+    $.each($("#targetsTable").DataTable().rows().data(), function(i, target){
+        targets.push({
+            first_name : target[0],
+            last_name: target[1],
+            email: target[2],
+            position: target[3]
+        })
+    })
     var group = {
         name: $("#name").val(),
         targets: targets
     }
-    // Submit the campaign
+    console.log(group)
+    // Submit the group
     api.groups.post(group)
     .success(function(data){
-        successFlash("Campaign successfully launched!")
+        successFlash("Group added successfully!")
         load()
         dismiss()
     })
@@ -23,15 +32,8 @@ function dismiss(){
     $("#modal").modal('hide')
 }
 
-function groupAdd(name){
-    groups.append({
-        name: name
-    })
-}
-
 function edit(group){
     if (group == "new") {
-        console.log("new")
         group = {}
     }
     targets = $("#targetsTable").dataTable()
@@ -68,8 +70,8 @@ function load(){
             groupTable = $("#groupTable").DataTable();
             $.each(groups, function(i, group){
                 groupTable.row.add([
-                    group.Name,
-                    group.targets,
+                    group.name,
+                    group.targets.join(),
                     group.modified_date
                 ]).draw()
             })

static/js/ckeditor/config.js

@@ -34,5 +34,7 @@ CKEDITOR.editorConfig = function( config ) {
 	config.format_tags = 'p;h1;h2;h3;pre';
 	config.removePlugins = 'magicline';
 	config.extraPlugins = 'dialogadvtab';
-
+	config.fullPage = true;
+	config.allowedContent = true;
+	config.startupMode = "source";
 };

templates/base.html

@@ -96,29 +96,11 @@
     <script src="/js/bootstrap.min.js"></script>
     <script src="/js/jquery.dataTables.min.js"></script>
     <script src="/js/dataTables.bootstrap.js"></script>
-    <!--<script src="/js/angular-file-upload-shim.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
-    <script src="/js/angular-file-upload.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/highcharts.min.js"></script>
-    <!--<script src="/js/highcharts-ng.js"></script>
-    <script src="/js/app/app.js"></script>
-    <script src="/js/app/controllers.js"></script>
-    <script src="/js/app/factories.js"></script>-->
+    <script src="/js/chartjs.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" .}}
-    <!--<script src="/js/ng-ckeditor.js"></script>-->
-    <script>
-    Highcharts.setOptions({
-        global: {
-            timezoneOffset: 5 * 60
-        }
-    });
-    </script>
 </body>
 
 </html>

templates/campaigns.html

@@ -3,9 +3,9 @@
     <div class="row">
         <div class="col-sm-3 col-md-2 sidebar">
             <ul class="nav nav-sidebar">
-                <li><a href="#">Dashboard</a>
+                <li><a href="/">Dashboard</a>
                 </li>
-                <li class="active"><a href="#/campaigns">Campaigns</a>
+                <li class="active"><a href="/campaigns">Campaigns</a>
                 </li>
                 <li><a href="/users">Users &amp; Groups</a>
                 </li>
@@ -22,9 +22,11 @@
     </div>
 </div>
 <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
+    <div class="row">
         <h1 class="page-header">
             Campaigns
         </h1>
+    </div>
     <div id="flashes" class="row"></div>
     <div class="row">
         <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal"><i class="fa fa-plus"></i> New Campaign</button>
@@ -35,6 +37,7 @@
             No campaigns created yet. Let's create one!
         </div>
     </div>
+    <div class="row">
         <table id="campaignTable" class="table" style="display:none;">
             <thead>
                 <tr>
@@ -46,6 +49,7 @@
             <tbody>
             </tbody>
         </table>
+    </div>
         <!-- <table ng-table="mainTableParams" class="table table-hover table-striped table-bordered">
             <tbody>
                 <tr ng-repeat="campaign in $data | orderBy:modified_date:true" class="editable-row">

templates/dashboard.html

@@ -34,12 +34,8 @@
     </div>
     <div>
         <div class="row">
-            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
-                <highchart config="overview_chart"></highchart>
-            </div>
-            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
-                <highchart config="average_chart"></highchart>
-            </div>
+            <canvas id="overview_chart" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></canvas>
+            <canvas id="average_chart" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></canvas>
         </div>
         <div class="row">
             <h2>Recent Campaigns</h2>
@@ -79,5 +75,5 @@
 </div>
 {{end}}
 {{define "scripts"}}
-<script src="/js/app/campaigns.js"></script>
+<script src="/js/app/dashboard.js"></script>
 {{end}}

templates/templates.html

@@ -21,13 +21,15 @@
         </div>
     </div>
 </div>
-<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" ng-controller="TemplateCtrl">
+<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
+    <div class="row">
         <h1 class="page-header">
             Email Templates
         </h1>
+    </div>
     <div id="flashes" class="row"></div>
     <div class="row">
-        <button type="button" class="btn btn-primary" ng-click="editTemplate('new')"><i class="fa fa-plus"></i> New Template</button>
+        <button type="button" class="btn btn-primary" onclick="edit('new')" data-toggle="modal" data-target="#modal"><i class="fa fa-plus"></i> New Template</button>
     </div>
     &nbsp;
     <div id="emptyMessage" class="row">
@@ -35,6 +37,7 @@
             No templates created yet. Let's create one!
         </div>
     </div>
+    <div class="row">
         <table id="templateTable" class="table" style="display:none;">
             <thead>
                 <tr>
@@ -45,6 +48,7 @@
             <tbody>
             </tbody>
         </table>
+    </div>
     <!-- <div ng-show="templates.length" class="row">
         <table ng-table="mainTableParams" class="table table-hover table-striped table-bordered">
             <tbody>
@@ -70,7 +74,69 @@
         </table>
     </div> -->
 </div>
+<!-- Modal -->
+<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+        <!-- New Template Modal -->
+        <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="templateModalLabel">New Template</h4>
+        </div>
+        <div class="modal-body">
+            <div class="row" id="modal.flashes"></div>
+            <label class="control-label" for="name">Name:</label>
+            <div class="form-group">
+                <input type="text" class="form-control" ng-model="template.name" placeholder="Template name" id="name" autofocus/>
+            </div>
+            <div class="form-group">
+                <button class="btn btn-danger btn-disabled" ng-click="importEmail()"><i class="fa fa-envelope"></i> Import Email (Coming Soon!)</button>
+            </div>
+            <label class="control-label" for="subject">Subject:</label>
+            <div class="form-group">
+                <input type="text" class="form-control" ng-model="template.subject" placeholder="Email Subject" id="subject" />
+            </div>
+            <!-- Nav tabs -->
+            <ul class="nav nav-tabs" role="tablist">
+                <li role="text"><a href="#text" aria-controls="text" role="tab" data-toggle="tab">Text</a></li>
+                <li role="html"><a href="#html" aria-controls="html" role="tab" data-toggle="tab">HTML</a></li>
+            </ul>
+            <!-- Tab panes -->
+            <div class="tab-content">
+                <div role="tabpanel" class="tab-pane active" id="text">
+                    <textarea rows="10" class="form-control" placeholder="Plaintext"></textarea>
+                </div>
+                <div role="tabpanel" class="tab-pane" id="html">
+                    <textarea id="html_editor"></textarea>
+                </div>
+            </div>
+            <br />
+            <label class="control-label" ng-hide="template.attachments.length == 0">Files:</label>
+            <div ng-repeat="file in template.attachments" ng-model="template.attachments">
+                <i class="fa fa-file-excel-o" ng-show="file.type == 'application/vnd.ms-excel'"></i>
+                <i class="fa fa-file-text-o" ng-show="file.type == 'text/plain'"></i>
+                <i class="fa fa-file-image-o" ng-show="file.type == 'image/gif'"></i>
+                <i class="fa fa-file-pdf-o" ng-show="file.type == 'application/pdf'"></i>
+                <i class="fa fa-file-archive-o" ng-show="file.type == 'application/x-zip-compressed' || file.type == 'application/x-gzip'"></i>
+                <i class="fa fa-file-powerpoint-o" ng-show="file.type == 'application/vnd.openxmlformats-officedocument.presentationml.presentation'"></i>
+                <i class="fa fa-file-word-o" ng-show="file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'"></i>
+                <i class="fa fa-file-o" ng-show="file.type == 'application/octet-stream' || file.type == 'application/x-msdownload'"></i>
+                &nbsp;file.name
+                <span onclick="removeFile(file)" class="remove-row"><i class="fa fa-trash-o"></i>
+                </span>
+            </div>
+            <br/>
+            <span class="btn btn-danger btn-file"><i class="fa fa-plus"></i> Add Files
+                <input type="file" multiple>
+            </span>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-default" onclick="cancel()">Cancel</button>
+            <button type="button" class="btn btn-primary" onclick="save()" data-dismiss="modal">Save Template</button>
+        </div>
+    </div>
+</div>
 {{end}}
 {{define "scripts"}}
-<script src="/js/app/campaigns.js"></script>
+<script src="/js/app/templates.js"></script>
 {{end}}

templates/users.html

@@ -21,10 +21,12 @@
         </div>
     </div>
 </div>
-<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" ng-controller="GroupCtrl">
+<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
+    <div class="row">
         <h1 class="page-header">
             Users &amp; Groups
         </h1>
+    </div>
     <div id="flashes" class="row"></div>
     <div class="row">
         <button type="button" class="btn btn-primary" onclick="edit('new')" data-toggle="modal" data-target="#modal"><i class="fa fa-plus"></i> New Group</button>
@@ -35,6 +37,7 @@
             No groups created yet. Let's create one!
         </div>
     </div>
+    <div class="row">
         <table id="groupTable" class="table" style="display:none;">
             <thead>
                 <tr>
@@ -46,6 +49,7 @@
             <tbody>
             </tbody>
         </table>
+    </div>
     <!-- <div ng-show="groups.length" class="row">
         <table ng-table="mainTableParams" class="table table-hover table-striped table-bordered">
             <tbody>