user subsystem clean up

Change-Id: Ia59bb7c1e4412693f55cdcaf9607bcb4158850ae
Signed-off-by: Justin Choquette <jchoquette@iol.unh.edu>

6 files changed, 301 insertions, 115 deletions

diff --git a/src/templates/base/account/booking_list.html b/src/templates/base/account/booking_list.html
index 2af3915..c6702c9 100644
--- a/src/templates/base/account/booking_list.html
+++ b/src/templates/base/account/booking_list.html
@@ -97,16 +97,23 @@
     }
 
     async function submit_cancel_form() {
-        var ajaxForm = $("#booking_cancel_form");
-        var formData = ajaxForm.serialize();
-        req = new XMLHttpRequest();
-        var url = "cancel/" + current_booking_id;
-        req.open("POST", url, true);
-        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-        req.onerror = function() { alert("problem submitting form"); }
-        req.send(formData);
-        await new Promise(r => setTimeout(r, 500)); // Quickest solution I could come up with to give liblaas time to mark it as deleted until we do an api rework
-        location.reload();
+        let data = {"booking_id": current_booking_id}
+        $.ajax({
+            url: '',
+            type: 'post',
+            data: JSON.stringify(data),
+            headers: {
+                'X-CSRFToken': document.getElementsByName('csrfmiddlewaretoken')[0].value,
+                'Content-Type': 'application/json'
+            },
+            dataType: 'text',
+        })
+        .done(function() {
+            location.reload()
+        })
+        .fail(function() {
+            alert("Unable to cancel booking.")
+        })
     }
 </script>
 
diff --git a/src/templates/base/account/resource_list.html b/src/templates/base/account/resource_list.html
index c16fd07..c44e974 100644
--- a/src/templates/base/account/resource_list.html
+++ b/src/templates/base/account/resource_list.html
@@ -1,6 +1,5 @@
 {% extends "base.html" %}
 {% block extrahead %}
-<script src="/static/js/workflows/workflow.js"></script>
 {% endblock %}
 {% block content %}
 <div class="row">
@@ -42,12 +41,25 @@
     }
 
     async function submit_delete_form() {
-        if(LibLaaSAPI.deleteTemplate(current_resource_id)) {
-            location.reload();
-        } else {
-            alert('Unable to delete template.');
-        }
+        let data = {"template_id": current_resource_id}
+        $.ajax({
+            url: '',
+            type: 'post',
+            data: JSON.stringify(data),
+            headers: {
+                'X-CSRFToken': document.getElementsByName('csrfmiddlewaretoken')[0].value,
+                'Content-Type': 'application/json'
+            },
+            dataType: 'text',
+        })
+        .done(function() {
+            location.reload()
+        })
+        .fail(function() {
+            alert("Unable to delete resource.")
+        })
     }
+
 </script>
 <div class="modal fade" id="resModal" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-dialog" role="document">
diff --git a/src/templates/base/account/settings.html b/src/templates/base/account/settings.html
index 611ae38..2813beb 100644
--- a/src/templates/base/account/settings.html
+++ b/src/templates/base/account/settings.html
@@ -3,88 +3,143 @@
 {% load bootstrap4 %}
 {% block content %}
 <h1>Settings</h1>
-    <form action="/accounts/settings/" method="post">
+<form>
+    <div class="form-group">
         {% csrf_token %}
         <input id="hidden_key_list" type="hidden" name="ssh_key_list" value="">
-        <div class="form-group">
-        <label>Your IPA Username</label>
-        <input type="text" class="form-control" disabled="true" style="width: 300px;" value="{{ ipa_username }}">
+        <label for="form_username">VPN Username</label>
+        <input value="{{ipa_username}}" type="text" class="form-control col-lg-1" id="form_username" disabled="">
         <p>To change your password and access advanced account management, please go <a href="http://os-passwd.iol.unh.edu">here</a></p>
-        {{ company_form }}
-        {{ preference_form }}
-        <br>
-        <label>SSH Keys:</label>
-        <ul class="list-group" id="key_ul">
-            {% for key in existing_keys %}
-            <li class="card w-25 mb-1">
-                <div class="card-body" style="height: 150px; overflow-y: auto;">
-                    {{key}}
-                </div>
-                <div class="card-footer d-flex flex-row-reverse">
-                    <div class="btn btn-danger" onclick="remove_key('{{key}}', this.parentNode.parentNode)">Delete</div>
-                </div>
-            </li>
+
+        <label for="form_company">Company</label>
+        <input value="{{company}}" type="text" class="form-control col-lg-1" id="form_company">
+
+        <label for="form_timezone">Timezone</label>
+        <select class="form-control col-lg-1" id="form_timezone">
+            {% for tz in timezones %}
+            <option {% if tz == timezone %} selected {% endif %}>{{tz}}</option>
             {% endfor %}
-        </ul>
+        </select>
+
+        <label for="Nothing" class="m-0">Public User</label>
+        <div class="custom-control custom-switch">
+            <input type="checkbox" class="custom-control-input" id="form_public" {% if public %} checked="" {% endif %}>
+            <label class="custom-control-label" for="form_public"></label>
+          </div>
+    </div>
+</form>
+
+<div class="form-group">
+    <h2>SSH Keys</h2>
+    <ul class="list-group" id="key_ul">
+        {% for key in existing_keys %}
+        <li class="card w-25 mb-1">
+            <div class="card-body" style="height: 150px; overflow-y: auto;">
+                {{key}}
+            </div>
+            <div class="card-footer d-flex flex-row-reverse">
+                <div class="btn btn-danger" onclick="remove_key('{{key}}', this.parentNode.parentNode)">Delete</div>
+            </div>
+        </li>
+        {% endfor %}
+    </ul>
+
+    <ul class="list-group">
         <li class="card w-25 text-truncate mb-1">
             <div class="card-body">
-                <textarea id="new_key_area" placeholder="New SSH Public Key" class="form-control" id="new_key_input"></textarea>            </div>
+                <textarea id="new_key_area" placeholder="New SSH Public Key" class="form-control"
+                    id="new_key_input"></textarea>
+            </div>
             <div class="card-footer d-flex flex-row-reverse">
-                <div class="btn btn-success" onclick="add_key(this.parentNode.parentNode.childNodes[1].childNodes[1].value)">Add</div>
+                <div class="btn btn-success"
+                    onclick="add_key(this.parentNode.parentNode.childNodes[1].childNodes[1].value)">Add</div>
             </div>
         </li>
-        <input class="btn btn-success mt-5" style="width: 100px" name="submitButton" type="submit" value="Save">
-        </div>
-    </form>
+    </ul>
+
+    <button class="btn btn-success" onclick=submit_changes()>Save</button>
+</div>
 
 <script>
-let key_list = []
-$(window).on('load', function() {
-    document.getElementById('new_key_area').value = "";
-    {% for key in existing_keys %}
-    key_list.push('{{key}}')
-    {% endfor %}
-    update_json_list()
-});
-
-
-function remove_key(target_key, node) {
-    key_list = key_list.filter(key => key != target_key);
-    node.setAttribute("hidden", "true");
-    update_json_list()
-}
-
-function add_key(key_string) {
-    console.log(key_string)
-    if (key_list.indexOf(key_string) != -1) {
-        alert('This key has already been added');
-        return;
+    let key_list = []
+    $(window).on('load', function () {
+        document.getElementById('new_key_area').value = "";
+        {% for key in existing_keys %}
+        key_list.push('{{key}}')
+        {% endfor %}
+        update_json_list()
+    });
+
+
+    function remove_key(target_key, node) {
+        key_list = key_list.filter(key => key != target_key);
+        node.setAttribute("hidden", "true");
+        update_json_list()
+    }
+
+    function add_key(key_string) {
+        console.log(key_string)
+        if (key_list.indexOf(key_string) != -1) {
+            alert('This key has already been added');
+            return;
+        }
+        key_list.push(key_string)
+        create_key_card(key_string)
+        update_json_list()
     }
-    key_list.push(key_string)
-    create_key_card(key_string)
-    update_json_list()
-}
-
-function create_key_card(key_string) {
-    const elem = document.createElement('li');
-    elem.classList.add('card', 'w-25', 'mb-1');
-    elem.innerHTML = `
+
+    function create_key_card(key_string) {
+        const elem = document.createElement('li');
+        elem.classList.add('card', 'w-25', 'mb-1');
+        elem.innerHTML = `
     <div class="card-body" style="height: 150px; overflow-y: auto;">
         ` + key_string + `
     </div>
     <div class="card-footer d-flex flex-row-reverse">
-        <div class="btn btn-danger" onclick="remove_key('` + key_string +`', this.parentNode.parentNode)">Delete</div>
+        <div class="btn btn-danger" onclick="remove_key('` + key_string + `', this.parentNode.parentNode)">Delete</div>
     </div>
     `
 
-    document.getElementById('key_ul').appendChild(elem);
-    document.getElementById('new_key_area').value = "";
+        document.getElementById('key_ul').appendChild(elem);
+        document.getElementById('new_key_area').value = "";
 
-}
+    }
 
-function update_json_list() {
-    document.getElementById("hidden_key_list").value = key_list.toString()
-}
-</script>
-{% endblock content %}
+    function update_json_list() {
+        document.getElementById("hidden_key_list").value = key_list.toString()
+    }
 
+    function collect_form_data() {
+        data = {
+            "public_user": document.getElementById("form_public").checked,
+            "timezone": document.getElementById("form_timezone").value,
+            "company": document.getElementById("form_company").value,
+            "keys": key_list
+        }
+        console.log(data)
+        return data
+    }
+
+    async function submit_changes() {
+
+        let data = collect_form_data();
+        $.ajax({
+            url: '',
+            type: 'post',
+            data: JSON.stringify(data),
+            headers: {
+                'X-CSRFToken': document.getElementsByName('csrfmiddlewaretoken')[0].value,
+                'Content-Type': 'application/json'
+            },
+            dataType: 'text',
+        })
+        .done(function() {
+            location.reload()
+        })
+        .fail(function() {
+            alert("There was an issue saving your changes.")
+        })
+    }
+
+</script>
+{% endblock content %}
\ No newline at end of file
diff --git a/src/templates/base/booking/booking_detail.html b/src/templates/base/booking/booking_detail.html
index bcf554b..0ae6530 100644
--- a/src/templates/base/booking/booking_detail.html
+++ b/src/templates/base/booking/booking_detail.html
@@ -169,28 +169,32 @@ code {
 </div>
 
 <script>
+    const agg_id = "{{booking.aggregateId}}"
     setInterval(function () {
         fetchBookingStatus();
     }, 5000);
 
 
     async function fetchBookingStatus() {
-        req = new XMLHttpRequest();
-        var url = "status";
-        req.open("GET", url, true);
-        req.onerror = function () { console.log("failed to get status") }
-        req.onreadystatechange = function () {
-            if (req.readyState === 4) {
-                let status = JSON.parse(req.responseText)
-                updateStatuses(status)
-            }
-        }
-        req.send();
+        data = {"agg_id": agg_id}
+        $.ajax({
+            url: '',
+            type: 'post',
+            data: JSON.stringify(data),
+            headers: {
+                'X-CSRFToken': document.getElementsByName('csrfmiddlewaretoken')[0].value,
+                'Content-Type': 'application/json'
+            },
+            dataType: 'text',
+        })
+        .done(function(response) {
+            updateStatuses(response)
+        })
     }
 
     async function updateStatuses(status) {
-
         const instances = status.instances;
+        if (!instances) return;
         
         Object.keys(instances).forEach((aggId) => {
             const instance = instances[aggId]
diff --git a/src/templates/base/dashboard/landing.html b/src/templates/base/dashboard/landing.html
index 7f97e4f..97cc508 100644
--- a/src/templates/base/dashboard/landing.html
+++ b/src/templates/base/dashboard/landing.html
@@ -63,37 +63,98 @@
     </div>
 </div>
 
-<!-- IPA Modal -->
+  <!-- Link Modal -->
 <div class="modal fade" id="ipa-modal" tabindex="-1">
-    <div class="modal-dialog modal-xl">
-      <div class="modal-content">
+<div class="modal-dialog modal-xl">
+    <div class="modal-content">
         <div class="modal-header">
-          <h5 class="modal-title">Welcome to LaaS 3.0</h5>
+            <h5 class="modal-title">Welcome to LaaS 3.0</h5>
         </div>
-        <div class="modal-body" id="add_resource_modal_body">
+        <div class="modal-body">
             <p>We have made large scale improvements to the dashboard and our host provisioning service to improve your user experience.</p>
-            <p>{{ ipa_migrator.message }}</p>
-            <form action="{{ipa_migrator.action}}" method="post">
+            <p id="form-message">
+                {% if ipa_status == "new" %}
+                Our records indicate that you do not currently have an account in our IPA system, or your usernames do not match. Please enter the following details to enroll your account.
+                {% elif ipa_status == "conflict" %}
+                Our records indicate that you do not currently have an account in our IPA system, or your emails do not match. Please enter the following details to enroll your account.
+                {% endif %}
+            </p>
+            <form>
                 {% csrf_token %}
-                <p class="text-danger">{{error}}</p>
-                {{ ipa_migrator.form }}
+
+                <p class="text-danger" id="error-msg"></p>
                 <div class="form-group">
-                    <input class="btn btn-success" name="submitButton" type="submit" value="{{ipa_migrator.button}}">
+
+                    <label for="firstname">First Name:</label>
+                    <input type="text" class="form-control" name="firstname" id="firstname"style="width: 300px;" placeholder="First Name">
+
+                    <label for="lastname">Last Name:</label>
+                    <input type="text" class="form-control" name="lastname" id="lastname" style="width: 300px;" placeholder="Last Name">
+
+                    <label for="company">Company:</label>
+                    <input type="text" class="form-control" name="company" id="company" style="width: 300px;" placeholder="Company">
+
+                    
+                    <label for="username" {% if ipa_status != "conflict" %} hidden {% endif %}>New VPN Username:</label>
+                    <input type="text" class="form-control" name="username" id="username" style="width: 300px;" placeholder="New VPN Username" {% if ipa_status != "conflict" %} hidden {% endif %}>
+
+                    <label for="email">Email:</label>
+                    <input type="text" class="form-control" name="email" id="email" style="width: 300px;"  value="{{profile.email}}" disabled>
+
                 </div>
             </form>
+
+            <button class="btn btn-success" onclick="submit_form()">Submit</button>
         </div>
-      </div>
     </div>
-  </div>
+</div>
+</div>
 
 <script>
 
+    function collect_form_data() {
+        data = {
+            "firstname": document.getElementById("firstname").value,
+            "lastname": document.getElementById("lastname").value,
+            "company": document.getElementById("company").value,
+            "username": document.getElementById("username").value // Only present in conflict form
+            // Do not collect email, grab this from the UserProfile in django. Prevents hijacking of accounts.
+        };
+
+        return data;
+
+    }
+
+    function submit_form() {
+        const data = collect_form_data();
+
+        $.ajax({
+            url: '/liblaas/migrate/{{ipa_status}}/',
+            type: 'post',
+            data: JSON.stringify(data),
+            headers: {
+                'X-CSRFToken': document.getElementsByName('csrfmiddlewaretoken')[0].value,
+                'Content-Type': 'application/json'
+            },
+            dataType: 'text',
+            success: (response) => {
+                console.log("successful response is")
+                location.reload();
+            },
+              error: (response) => {
+                const r = JSON.parse(response.responseText)
+                document.getElementById("error-msg").innerText = r.message;
+            }
+        })
+    }
+
 $(window).on('load', function() {
-    if ({{ipa_migrator.exists}}) {
+
+    if ("{{ipa_status}}" == "new" || "{{ipa_status}}" == "conflict") {
         $('#ipa-modal').modal({backdrop: 'static', keyboard: false});
         $('#ipa-modal').modal('show');
     }
-    });
+});
 </script>
 
 {% endblock content %}
diff --git a/src/templates/base/workflow/book_a_pod.html b/src/templates/base/workflow/book_a_pod.html
index 5c1a253..6c79bfe 100644
--- a/src/templates/base/workflow/book_a_pod.html
+++ b/src/templates/base/workflow/book_a_pod.html
@@ -114,14 +114,21 @@
       </div>
       <div class="modal-body" id="add_resource_modal_body">
           <p>Please update your information before creating a booking.</p>
-          <form action="{{prereq_validator.action}}" method="post">
-              {% csrf_token %}
-              {{ prereq_validator.form }}
-              <div class="form-group">
-                  <input class="btn btn-success" name="submitButton" type="submit" value="Save">
-              </div>
+          <p id="error-msg" class="text-danger"></p>
+          <form>
+            {% csrf_token %}
+            <div class="form-group">
+              {% if prereqs.company == "false" %}
+              <label for="prereq_form">Company:</label>
+              <input type="text" class="form-control" style="width: 300px;" placeholder="Company" id="prereq_form" name="company">
+              {% elif prereqs.keys == "false" %}
+              <label for="prereq_form">SSH Public Key:</label>
+              <textarea id="prereq_form" placeholder="SSH Public Key" class="form-control" style="width: 500px;" id="prereq_form" name="ssh"></textarea>
+              {% endif %}
+            </div>
           </form>
-      </div>
+          <button class="btn btn-success" onclick="submit_form({% if prereqs.company == 'false' %} 'ipa/company/'{% elif prereqs.keys == 'false' %} 'ipa/ssh/'  {% endif %})">Save</button>
+        </div>
     </div>
   </div>
 </div>
@@ -145,10 +152,52 @@
 </body>
 
 <script>
+    function collect_form_data() {
+
+      const form = document.getElementById("prereq_form");
+
+      const data = {};
+      if (form.name == "company") {
+        data["data"] = form.value;
+      } else if (form.name == "ssh") {
+        data["data"] = [];
+        data["data"].push(form.value)
+      }
+
+      return data;
+
+    }
+
+    function submit_form(endpoint) {
+        const data = collect_form_data();
+
+        $.ajax({
+            url: '../../liblaas/' + endpoint,
+            type: 'post',
+            data: JSON.stringify(data),
+            headers: {
+                'X-CSRFToken': document.getElementsByName('csrfmiddlewaretoken')[0].value,
+                'Content-Type': 'application/json'
+            },
+            dataType: 'text',
+            success: (response) => {
+                location.reload();
+            },
+              error: (response) => {
+                const r = JSON.parse(response.responseText)
+                document.getElementById("error-msg").innerText = r.message;
+            }
+        })
+    }
+
+
+
+
   let user;
   let workflow;
   $(window).on('load', function() {
-    if ({{prereq_validator.exists}}) {
+
+    if (!{{prereqs.company}} || !{{prereqs.keys}}) {
         $('#ipa-modal').modal({backdrop: 'static', keyboard: false});
         $('#ipa-modal').modal('show');
     } else {
@@ -157,7 +206,5 @@
       workflow.startWorkflow();
     }
     });
-
-
   </script>
 {% endblock %}