Jelajahi Sumber

Create the register page.

Lee Morgan 1 tahun lalu
induk
melakukan
011731e519
3 mengubah file dengan 76 tambahan dan 5 penghapusan
  1. 9 5
      src/views/js/index.js
  2. 1 0
      src/views/js/pages/Login.js
  3. 66 0
      src/views/js/pages/Register.js

+ 9 - 5
src/views/js/index.js

@@ -1,14 +1,18 @@
 import Login from "./pages/Login.js";
+import Register from "./pages/Register.js";
 
 const pages = document.querySelector(".page");
-let page;
+let currentPage;
 
-const changePage = (page, data)=>{
-    page.close();
+window.changePage = (page, data)=>{
+    console.time("change page");
+    currentPage.close();
 
     switch(page){
-        case "login": page = new Login(); break;
+        case "login": currentPage = new Login(); break;
+        case "register": currentPage = new Register(); break;
     }
+    console.timeEnd("change page");
 }
 
-page = new Login();
+currentPage = new Login();

+ 1 - 0
src/views/js/pages/Login.js

@@ -42,6 +42,7 @@ export default class Login extends Page{
             .append(new Elem("button")
                 .text("Create Account")
                 .addClass("link")
+                .type("button")
                 .onclick(()=>{changePage("register")})
             )
             .appendTo(this.container);

+ 66 - 0
src/views/js/pages/Register.js

@@ -0,0 +1,66 @@
+import Page from "./Page.js";
+import Elem from "../Elem.js";
+
+export default class Register extends Page{
+    constructor(){
+        super("Register");
+
+        this.render();
+    }
+
+    submit(){
+        event.preventDefault();
+        console.log("submitting");
+    }
+
+    render(){
+        new Elem("form")
+            .addClass("standardForm")
+            .onsubmit(this.submit)
+            .append(new Elem("h1")
+                .text("Register")
+            )
+            .append(new Elem("label")
+                .text("Name")
+                .append(new Elem("input")
+                    .addClass("name")
+                    .type("text")
+                    .placeholder("Name")
+                )
+            )
+            .append(new Elem("label")
+                .text("Email")
+                .append(new Elem("input")
+                    .addClass("email")
+                    .type("email")
+                    .placeholder("Email")
+                )
+            )
+            .append(new Elem("label")
+                .text("Password")
+                .append(new Elem("input")
+                    .addClass("password")
+                    .type("password")
+                    .placeholder("Password")
+                )
+            )
+            .append(new Elem("label")
+                .text("Confirm Password")
+                .append(new Elem("input")
+                    .addClass("confirmPassword")
+                    .type("password")
+                    .placeholder("Confirm Password")
+                )
+            )
+            .append(new Elem("button")
+                .text("Create Account")
+            )
+            .append(new Elem("button")
+                .text("Log In")
+                .addClass("link")
+                .type("button")
+                .onclick(()=>{changePage("login")})
+            )
+            .appendTo(this.container);
+    }
+}