From 10c2a3e1500366462db159f0817732d6de1159ae Mon Sep 17 00:00:00 2001
From: Preston Doman <pdoman@pdx.edu>
Date: Wed, 6 Feb 2019 15:31:15 -0800
Subject: [PATCH] Add frontend registration functionality

---
 front/static/edit_report.html |  2 +-
 front/static/home.html        |  2 +-
 front/static/index.html       |  2 +-
 front/static/js/login.js      |  2 +-
 front/static/js/signupPage.js | 74 ++++++++++++++++++++++++++++-------
 front/static/login.html       |  6 +--
 front/static/new_report.html  |  2 +-
 front/static/signup.html      | 23 ++++++-----
 8 files changed, 80 insertions(+), 33 deletions(-)

diff --git a/front/static/edit_report.html b/front/static/edit_report.html
index 80d39df..474746f 100644
--- a/front/static/edit_report.html
+++ b/front/static/edit_report.html
@@ -36,7 +36,7 @@
             </ul>
         </div>
     </nav>
-    <div class="container pt-5">
+    <div class="container pt-3">
         <div class="row">
             <div class="col-sm-8 mx-auto">
                 <div class="card bg-light text-dark">
diff --git a/front/static/home.html b/front/static/home.html
index 114887d..d272129 100644
--- a/front/static/home.html
+++ b/front/static/home.html
@@ -35,7 +35,7 @@
             </ul>
         </div>
     </nav>
-    <div class="container">
+    <div class="container pt-5">
         <p>Welcome to Reimbursinator</p>
     </div>
     <script src="js/logout.js"></script>
diff --git a/front/static/index.html b/front/static/index.html
index 713bb3a..f759c1b 100644
--- a/front/static/index.html
+++ b/front/static/index.html
@@ -27,7 +27,7 @@
             </ul>
         </div>
     </nav>
-    <div class="container">
+    <div class="container pt-3">
         <div class="jumbotron">
             <h1>Reimbursinator</h1>
             <p class="lead">An open source expense management solution sponsored by the Software Freedom Conservancy</p>
diff --git a/front/static/js/login.js b/front/static/js/login.js
index 20b411d..0bdaa9b 100644
--- a/front/static/js/login.js
+++ b/front/static/js/login.js
@@ -2,7 +2,7 @@ function postToLoginEndpoint(event) {
     event.preventDefault();
 
     const credentials = {
-        "username" : this.elements.username.value,
+        "email" : this.elements.email.value,
         "password" : this.elements.password.value
     }
     const url = "https://" + window.location.hostname + ":8444/api/v1/account/login/";
diff --git a/front/static/js/signupPage.js b/front/static/js/signupPage.js
index 0055cce..8d348ad 100644
--- a/front/static/js/signupPage.js
+++ b/front/static/js/signupPage.js
@@ -1,20 +1,64 @@
-const password = document.getElementById("password");
-const confirm_password = document.getElementById("confirmPassword");
-function validatePassword(){
-    if(password.value != confirm_password.value) {
-        confirm_password.setCustomValidity("Passwords Don't Match");
-    }
-    else {
-        confirm_password.setCustomValidity('');
+const password1 = document.getElementById("password1");
+const password2 = document.getElementById("password2");
+
+function validatePassword() {
+    if (password1.value != password2.value) {
+        password2.setCustomValidity("Passwords don't match");
+    } else {
+        password2.setCustomValidity('');
     }
 }
-password.onchange = validatePassword;
-confirm_password.onkeyup = validatePassword;
+password1.onchange = validatePassword;
+password2.onkeyup = validatePassword;
 
-function validateEmail(email)
-{
-    if(email.validity.patternMismatch)
+function validateEmail(email) {
+    if (email.validity.patternMismatch) {
         email.setCustomValidity('Please input correct email');
-    else
+    } else {
         email.setCustomValidity('');
-}
\ No newline at end of file
+    }
+}
+
+function postToRegistrationEndpoint(event) {
+    event.preventDefault();
+
+    const credentials = {
+        "email" : this.elements.email.value,
+        "first_name" : this.elements.first_name.value,
+        "last_name" : this.elements.last_name.value,
+        "password1" : this.elements.password1.value,
+        "password2" : this.elements.password2.value
+    }
+    const url = "https://" + window.location.hostname + ":8444/api/v1/account/register/";
+    const xhr = new XMLHttpRequest();
+
+    console.log("Attempting a connection to the following endpoint: " + url);
+    console.log("User credentials:\n" + JSON.stringify(credentials));
+
+    xhr.open("POST", url, true);
+    xhr.setRequestHeader("Content-Type", "application/json");
+    xhr.onreadystatechange = function() {
+        if (this.readyState === 4) {
+            if (this.status === 201) {
+                console.log("REGISTRATION SUCCESS!");
+                console.log("Server response:\n" + this.response);
+                token = JSON.parse(this.response).key;
+                localStorage.setItem("token", token);
+                window.location.replace("home.html");
+            } else {
+                console.error("LOGIN FAILURE!");
+                console.error("Server status: " + this.status);
+                console.error("Server response:\n" + this.response);
+            }
+        }
+    };
+
+    xhr.onerror = function() {
+        alert("Error connecting to the authentication server!");
+    };
+
+    xhr.send(JSON.stringify(credentials));
+}
+
+const form = document.querySelector("form");
+form.addEventListener("submit", postToRegistrationEndpoint);
diff --git a/front/static/login.html b/front/static/login.html
index 9a8af2f..f8b5a07 100644
--- a/front/static/login.html
+++ b/front/static/login.html
@@ -14,7 +14,7 @@
     <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
         <div class="navbar-brand">Reimbursinator</div>
     </nav>
-    <div class="container pt-5">
+    <div class="container pt-3">
         <div class="row">
             <div class="col-sm-6 mx-auto">
                 <div class="card bg-light text-dark">
@@ -24,8 +24,8 @@
                     <div class="card-body">
                         <form class="form" autocomplete="off">
                             <div class="form-group">
-                                <label for="formGroupUsername">Username:</label>
-                                <input class="form-control" id="formGroupUsername" type="text" name="username" required autofocus>
+                                <label for="formGroupPassword">Email:</label>
+                                <input class="form-control" id="formGroupPassword" type="email" name="email">
                             </div>
                             <div class="form-group">
                                 <label for="formGroupPassword">Password:</label>
diff --git a/front/static/new_report.html b/front/static/new_report.html
index 6f0506b..f1cc53b 100644
--- a/front/static/new_report.html
+++ b/front/static/new_report.html
@@ -35,7 +35,7 @@
             </ul>
         </div>
     </nav>
-    <div class="container">
+    <div class="container pt-5">
         <p>Create a new report</p>
     </div>
     <script src="js/logout.js"></script>
diff --git a/front/static/signup.html b/front/static/signup.html
index ebfeb1b..12b1119 100644
--- a/front/static/signup.html
+++ b/front/static/signup.html
@@ -14,7 +14,7 @@
     <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
         <div class="navbar-brand">Reimbursinator</div>
     </nav>
-    <div class="container pt-5">
+    <div class="container pt-3">
         <div class="row">
             <div class="col-sm-6 mx-auto">
                 <div class="card bg-light text-dark">
@@ -23,21 +23,25 @@
                     </div>
                     <div class="card-body">
                         <form class="form signup" autocomplete="off" action="index.html">
-                            <div class="form-group">
-                                <label for="userName">Username:</label>
-                                <input class="form-control" id="userName" type="text" name="username" minlength="4" size="10" required autofocus>
-                            </div>
                             <div class="form-group">
                                 <label for="email">Email:</label>
                                 <input class="form-control" type="email" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" oninput="validateEmail(this);" required>
                             </div>
                             <div class="form-group">
-                                <label for="password">Password:</label>
-                                <input class="form-control" type="password" id="password" minlength="4" size="10" required>
+                                <label for="first_name">First Name:</label>
+                                <input class="form-control" id="first_name" type="text" name="first_name" required>
                             </div>
                             <div class="form-group">
-                                <label for="confirmPassword">Confirm Password:</label>
-                                <input class="form-control" type="password" id="confirmPassword" required>
+                                <label for="last_name">Last Name:</label>
+                                <input class="form-control" id="last_name" type="text" name="last_name" required>
+                            </div>
+                            <div class="form-group">
+                                <label for="password1">Password:</label>
+                                <input class="form-control" type="password" id="password1" name="password1" minlength="8" required>
+                            </div>
+                            <div class="form-group">
+                                <label for="password2">Confirm Password:</label>
+                                <input class="form-control" type="password" id="password2" name="password2" minlength="8" required>
                             </div>
                             <button type="submit" class="btn btn-primary">Submit</button>
                         </form>
@@ -51,5 +55,4 @@
     </div>
 </body>
 <script src="js/signupPage.js"></script>
-    <!--Still need to check if user exist and if email exist test-->
 </html>