Adding landing page frontend logic - basic page structure at this point

static/js/app/landing_pages.js

@@ -0,0 +1,98 @@
+/*
+	landing_pages.js
+	Handles the creation, editing, and deletion of landing pages
+	Author: Jordan Wright <github.com/jordan-wright>
+*/
+var pages = []
+// Save attempts to POST to /templates/
+function save(idx){
+    var page = {}
+    page.name = $("#name").val()
+    page.html = CKEDITOR.instances["html_editor"].getData();
+    if (idx != -1){
+        page.id = page[idx].id
+        api.landing_pageId.put(page)
+        .success(function(data){
+            successFlash("Page edited successfully!")
+            load()
+            dismiss()
+        })
+    } else {
+        // Submit the page
+        api.landing_pages.post(page)
+        .success(function(data){
+            successFlash("Page added successfully!")
+            load()
+            dismiss()
+        })
+        .error(function(data){
+            modalError(data.responseJSON.message)
+        })
+    }
+}
+
+function dismiss(){
+    $("#modal\\.flashes").empty()
+    $("#modal").modal('hide')
+    $("#name").val("")
+    $("#html_editor").val("")
+}
+
+function deleteTemplate(idx){
+    if (confirm("Delete " + pages[idx].name + "?")){
+        api.landing_pageId.delete(pages[idx].id)
+        .success(function(data){
+            successFlash(data.message)
+            load()
+        })
+    }
+}
+
+function edit(idx){
+    $("#modalSubmit").unbind('click').click(function(){save(idx)})
+    $("#html_editor").ckeditor()
+    var page = {}
+    if (idx != -1) {
+        page = pages[idx]
+        $("#name").val(page.name)
+        $("#html_editor").val(page.html)
+    }
+}
+
+function load(){
+    $("#pagesTable").hide()
+    $("#emptyMessage").hide()
+    $("#loading").show()
+    api.landing_pages.get()
+    .success(function(ps){
+        pages = ps
+        $("#loading").hide()
+        if (pages.length > 0){
+            $("#pagesTable").show()
+            pagesTable = $("#templateTable").DataTable();
+            pagesTable.clear()
+            $.each(pages, function(i, page){
+                pagesTable.row.add([
+                    page.name,
+                    moment(page.modified_date).format('MMMM Do YYYY, h:mm:ss a'),
+                    "<div class='pull-right'><button class='btn btn-primary' data-toggle='modal' data-target='#modal' onclick='edit(" + i + ")'>\
+                    <i class='fa fa-pencil'></i>\
+                    </button>\
+                    <button class='btn btn-danger' onclick='deletePage(" + i + ")'>\
+                    <i class='fa fa-trash-o'></i>\
+                    </button></div>"
+                ]).draw()
+            })
+        } else {
+            $("#emptyMessage").show()
+        }
+    })
+    .error(function(){
+        $("#loading").hide()
+        errorFlash("Error fetching pages")
+    })
+}
+
+$(document).ready(function(){
+    load()
+})

static/js/gophish.js

@@ -105,5 +105,31 @@ var api = {
         delete: function(id){
             return query("/templates/" + id, "DELETE", {})
         }
+    },
+    // landing_pages contains the endpoints for /landing_pages
+    landing_pages : {
+        // get() - Queries the API for GET /landing_pages
+        get: function(){
+            return query("/landing_pages/", "GET", {})
+        },
+        // post() - Posts a campaign to POST /landing_pages
+        post: function(page){
+            return query("/landing_pages/", "POST", page)
+        }
+    },
+    // templateId contains the endpoints for /templates/:id
+    landing_pageId : {
+        // get() - Queries the API for GET /templates/:id
+        get: function(id){
+            return query("/landing_pages/" + id, "GET", {})
+        },
+        // put() - Puts a campaign to PUT /templates/:id
+        put: function (page){
+            return query("/landing_pages/" + page.id, "PUT", page)
+        },
+        // delete() - Deletes a campaign at DELETE /templates/:id
+        delete: function(id){
+            return query("/landing_pages/" + id, "DELETE", {})
+        }
     }
 }

templates/landing_pages.html

@@ -11,7 +11,7 @@
                 </li>
                 <li><a href="/templates">Email Templates</a>
                 </li>
-                <li class="active"><a href="#/landing_pages">Landing Pages</a>
+                <li class="active"><a href="/landing_pages">Landing Pages</a>
                 </li>
                 <li><a href="/settings">Settings</a>
                 </li>
@@ -27,7 +27,7 @@
     </h1>
     <div id="flashes" class="row"></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>
+        <button type="button" class="btn btn-primary" onclick="edit(-1) "data-toggle="modal" data-target="#newLandingPageModal"><i class="fa fa-plus"></i> New Page</button>
     </div>
     &nbsp;
     <div id="loading">
@@ -54,8 +54,44 @@
         </table>
     </div>
 </div>
+<!-- Modal -->
+<div class="modal fade" id="newLandingPageModal" 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="pageModalLabel">New Landing Page</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" placeholder="Page name" id="name" autofocus/>
+            </div>
+            <div class="form-group">
+                <button class="btn btn-danger btn-disabled"><i class="fa fa-envelope"></i> Import Site (Coming Soon!)</button>
+            </div>
+            <!-- Nav tabs -->
+            <ul class="nav nav-tabs" role="tablist">
+                <li class="active" 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="html">
+                    <textarea id="html_editor"></textarea>
+                </div>
+            </div>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-default" onclick="dismiss()">Cancel</button>
+            <button type="button" class="btn btn-primary" id="modalSubmit">Save Page</button>
+        </div>
+    </div>
+</div>
 {{end}}
 {{define "scripts"}}
 <script src="/js/ckeditor/ckeditor.js"></script>
 <script src="/js/ckeditor/adapters/jquery.js"></script>
+<script src="/js/app/landing_pages.js"></script>
 {{end}}