Create the elements for the login page.

src/views/js/Elem.js

@@ -8,8 +8,46 @@ export default class Elem {
         return this;
     }
 
-    .appendTo(v){
-        v.appendChild(this.elem);
+    addClass(v){
+        this.elem.classList.add(v);
+        return this;
+    }
+
+    text(v){
+        this.elem.textContent = v;
+        return this;
+    }
+
+    type(v){
+        this.elem.type = v;
+        return this;
+    }
+
+    placeholder(v){
+        this.elem.placeholder = v;
+        return this;
+    }
+
+    onsubmit(v){
+        this.elem.onsubmit = v;
+        return this;
+    }
+
+    append(v){
+        if(v instanceof this.constructor){
+            this.elem.appendChild(v.elem);
+        }else{
+            this.elem.appendChild(v);
+        }
+        return this;
+    }
+
+    appendTo(v){
+        if(v instanceof this.constructor){
+            v.elem.appendChild(this.elem);
+        }else{
+            v.appendChild(this.elem);
+        }
         return this;
     }
 

src/views/js/index.js

@@ -1,4 +1,4 @@
-import LoginPage from "./pages/login.js";
+import Login from "./pages/Login.js";
 
 const pages = document.querySelector(".page");
 let page;
@@ -7,6 +7,8 @@ const changePage = (page, data)=>{
     page.close();
 
     switch(page){
-        case "login": page = new LoginPage(); break;
+        case "login": page = new Login(); break;
     }
 }
+
+page = new Login();

src/views/js/pages/Login.js

@@ -1,5 +1,44 @@
-export default class LoginPage {
+import Page from "./Page.js";
+import Elem from "../Elem.js";
+
+export default class Login extends Page{
     constructor(){
         super("Login");
+
+        this.render();
+    }
+
+    submit(){
+        event.preventDefault();
+        console.log("submitting");
+    }
+
+    render(){
+        new Elem("form")
+            .addClass("standardForm")
+            .onsubmit(this.submit)
+            .append(new Elem("h1")
+                .text("Login")
+            )
+            .append(new Elem("label")
+                .text("Email")
+                .append(new Elem("input")
+                    .addClass("email")
+                    .type("text")
+                    .placeholder("Email")
+                )
+            )
+            .append(new Elem("label")
+                .text("Password")
+                .append(new Elem("input")
+                    .addClass("password")
+                    .type("password")
+                    .placeholder("Password")
+                )
+            )
+            .append(new Elem("button")
+                .text("Login")
+            )
+            .appendTo(this.container);
     }
 }