Browse Source

UI fixes

Got submitting groups working
Fixed CKEditor integration on templates
pull/24/head
unknown 6 years ago
parent
commit
ca378f835f
11 changed files with 288 additions and 89 deletions
  1. +1
    -1
      static/css/flat-ui.css
  2. +45
    -0
      static/js/app/dashboard.js
  3. +87
    -0
      static/js/app/templates.js
  4. +15
    -13
      static/js/app/users.js
  5. +11
    -0
      static/js/chartjs.min.js
  6. +3
    -1
      static/js/ckeditor/config.js
  7. +2
    -20
      templates/base.html
  8. +20
    -16
      templates/campaigns.html
  9. +3
    -7
      templates/dashboard.html
  10. +82
    -16
      templates/templates.html
  11. +19
    -15
      templates/users.html

+ 1
- 1
static/css/flat-ui.css View File

@ -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;

+ 45
- 0
static/js/app/dashboard.js View File

@ -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()
})

+ 87
- 0
static/js/app/templates.js View File

@ -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()
})

+ 15
- 13
static/js/app/users.js View File

@ -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()
})

+ 11
- 0
static/js/chartjs.min.js
File diff suppressed because it is too large
View File


+ 3
- 1
static/js/ckeditor/config.js View File

@ -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";
};

+ 2
- 20
templates/base.html View File

@ -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>

+ 20
- 16
templates/campaigns.html View File

@ -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">
<h1 class="page-header">
Campaigns
</h1>
<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,17 +37,19 @@
No campaigns created yet. Let's create one!
</div>
</div>
<table id="campaignTable" class="table" style="display:none;">
<thead>
<tr>
<th>Created Date</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="row">
<table id="campaignTable" class="table" style="display:none;">
<thead>
<tr>
<th>Created Date</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<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">

+ 3
- 7
templates/dashboard.html View File

@ -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}}

+ 82
- 16
templates/templates.html View File

@ -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">
<h1 class="page-header">
Email Templates
</h1>
<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,16 +37,18 @@
No templates created yet. Let's create one!
</div>
</div>
<table id="templateTable" class="table" style="display:none;">
<thead>
<tr>
<th>Name</th>
<th>Modified Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="row">
<table id="templateTable" class="table" style="display:none;">
<thead>
<tr>
<th>Name</th>
<th>Modified Date</th>
</tr>
</thead>
<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}}

+ 19
- 15
templates/users.html View File

@ -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">
<h1 class="page-header">
Users &amp; Groups
</h1>
<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,17 +37,19 @@
No groups created yet. Let's create one!
</div>
</div>
<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 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>
<!-- <div ng-show="groups.length" class="row">
<table ng-table="mainTableParams" class="table table-hover table-striped table-bordered">
<tbody>

Loading…
Cancel
Save