Create login functionality.

views/index.html

@@ -88,6 +88,10 @@
         <button id="loginToRegister" class="link">Register</button>
     </div>
 
+    <div id="homePage" class="page">
+        <h1>Home Page</h1>
+    </div>
+
     <script src="/index.js"></script>
 </body>
 </html>

views/index.js

@@ -1,5 +1,6 @@
 import registerPage from "./js/pages/register.js";
 import loginPage from "./js/pages/login.js";
+import homPage from "./js/pages/home.js";
 
 const notifier = document.getElementById("notifier");
 const pageElements = document.querySelectorAll(".page");
@@ -17,7 +18,7 @@ window.notify = (type, message)=>{
     }, 7500);
 }
 
-window.changePage = (page)=>{
+window.changePage = (page, data)=>{
     for(let i = 0; i < pageElements.length; i++){
         pageElements[i].style.display = "none";
     }
@@ -26,5 +27,6 @@ window.changePage = (page)=>{
     switch(page){
         case "login": loginPage.render(); break;
         case "register": registerPage.render(); break;
+        case "home": homePage.render(); break;
     }
 }

views/js/pages/home.js

@@ -0,0 +1,9 @@
+export default {
+    rendered: false,
+
+    render: function(){
+        if(!this.rendered){
+            this.rendered = true;
+        }
+    }
+}

views/js/pages/login.js

@@ -4,6 +4,7 @@ export default {
     render: function(){
         if(!this.rendered){
             this.buttons();
+            this.createSubmit();
             this.rendered = true;
         }
     },
@@ -12,5 +13,32 @@ export default {
         document.getElementById("loginToRegister").addEventListener("click", ()=>{
             changePage("register");
         });
+    },
+
+    createSubmit: function(){
+        document.getElementById("loginForm").addEventListener("submit", (event)=>{
+            event.preventDefault();
+            fetch("/user/login", {
+                method: "put",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({
+                    email: document.getElementById("loginEmail").value,
+                    pass: document.getElementById("loginPass").value
+                })
+            })
+                .then(r=>r.json())
+                .then((response)=>{
+                    if(response.error){
+                        notify("error", response.error.message);
+                    }else{
+                        changePage("home", response);
+                    }
+                })
+                .catch((err)=>{
+                    notify("error", "Something went wrong, try refreshing the page");
+                });
+        });
     }
 }