Merge pull request #58 from danieldupriest/frontend-registration

Frontend registration

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

front/static/home.html

@@ -35,7 +35,7 @@
             </ul>
         </div>
     </nav>
-    <div class="container">
+    <div class="container pt-3">
         <p>Welcome to Reimbursinator</p>
     </div>
     <script src="js/logout.js"></script>

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>

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/";

front/static/js/signupPage.js

@@ -1,20 +1,64 @@
-const password = document.getElementById("password");
+const password1 = document.getElementById("password1");
-const confirm_password = document.getElementById("confirmPassword");
+const password2 = document.getElementById("password2");
-function validatePassword(){
+
-    if(password.value != confirm_password.value) {
+function validatePassword() {
-        confirm_password.setCustomValidity("Passwords Don't Match");
+    if (password1.value != password2.value) {
-    }
+        password2.setCustomValidity("Passwords don't match");
-    else {
+    } else {
-        confirm_password.setCustomValidity('');
+        password2.setCustomValidity('');
     }
 }
-password.onchange = validatePassword;
+password1.onchange = validatePassword;
-confirm_password.onkeyup = validatePassword;
+password2.onkeyup = validatePassword;
 
-function validateEmail(email)
+function validateEmail(email) {
-{
+    if (email.validity.patternMismatch) {
-    if(email.validity.patternMismatch)
         email.setCustomValidity('Please input correct email');
-    else
+    } else {
         email.setCustomValidity('');
-}
+    }
+}
+
+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("REGISTRATION 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);

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,12 +24,12 @@
                     <div class="card-body">
                         <form class="form" autocomplete="off">
                             <div class="form-group">
-                                <label for="formGroupUsername">Username:</label>
+                                <label for="email">Email:</label>
-                                <input class="form-control" id="formGroupUsername" type="text" name="username" required autofocus>
+                                <input class="form-control" id="email" type="email" name="email" required>
                             </div>
                             <div class="form-group">
-                                <label for="formGroupPassword">Password:</label>
+                                <label for="password">Password:</label>
-                                <input class="form-control" id="formGroupPassword" type="password" name="password" required>
+                                <input class="form-control" id="password" type="password" name="password" required>
                             </div>
                             <p id="errorLogin" style="color:red"></p>
                             <button type="submit" class="btn btn-primary pull-right">Submit</button>

front/static/new_report.html

@@ -35,7 +35,7 @@
             </ul>
         </div>
     </nav>
-    <div class="container">
+    <div class="container pt-3">
         <p>Create a new report</p>
     </div>
     <script src="js/logout.js"></script>

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>
+                                <label for="first_name">First Name:</label>
-                                <input class="form-control" type="password" id="password" minlength="4" size="10" required>
+                                <input class="form-control" id="first_name" type="text" name="first_name" required>
                             </div>
                             <div class="form-group">
-                                <label for="confirmPassword">Confirm Password:</label>
+                                <label for="last_name">Last Name:</label>
-                                <input class="form-control" type="password" id="confirmPassword" required>
+                                <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>