Create the user with server response and redirect to home page.

src/views/js/Elem.js

@@ -38,6 +38,21 @@ export default class Elem {
         return this;
     }
 
+    required(){
+        this.elem.required = true;
+        return this;
+    }
+
+    focus(){
+        this.onConnect(()=>this.elem.focus());
+        return this;
+    }
+
+    toVar(v){
+        v(this.elem);
+        return this;
+    }
+
     append(v){
         if(v instanceof this.constructor){
             this.elem.appendChild(v.elem);
@@ -59,4 +74,18 @@ export default class Elem {
     get(){
         return this.elem;
     }
+
+    onConnect(cb){
+        if(this.elem.isConnected){
+            cb();
+        }else {
+            const observer = new MutationObserver(()=>{
+                if(this.elem.isConnected) {
+                    observer.disconnect();
+                    cb();
+                }
+            });
+            observer.observe(document, {childList: true, subtree: true});
+        }
+    }
 }

src/views/js/index.js

@@ -1,5 +1,6 @@
 import Login from "./pages/Login.js";
 import Register from "./pages/Register.js";
+import Home from "./pages/Home.js";
 
 const pages = document.querySelector(".page");
 let currentPage;
@@ -11,6 +12,7 @@ window.changePage = (page, data)=>{
     switch(page){
         case "login": currentPage = new Login(); break;
         case "register": currentPage = new Register(); break;
+        case "home": currentPage = new Home(); break;
     }
     console.timeEnd("change page");
 }

src/views/js/pages/Home.js

@@ -0,0 +1,16 @@
+import Page from "./Page.js";
+import Elem from "../Elem.js";
+
+export default class Home extends Page{
+    constructor(){
+        super("Home");
+
+        this.render();
+    }
+
+    render(){
+        new Elem("h1")
+            .text("Home page")
+            .appendTo(this.container);
+    }
+}

src/views/js/pages/Register.js

@@ -18,7 +18,7 @@ export default class Register extends Page{
         const password = this.container.querySelector(".password").value;
         const confirmPassword = this.container.querySelector(".confirmPassword").value;
 
-        if(!isValidEmail(email)){
+        if(!this.isValidEmail(email)){
             new Notifier("error", "Invalid email address");
             return;
         }
@@ -43,17 +43,27 @@ export default class Register extends Page{
             .then(r=>r.json())
             .then((response)=>{
                 if(response.error){
-                    console.log(response.error);
+                    new Notifier("error", response.error.message);
                 }else{
-                    let user = new User(...response);
-                    console.log(response);
+                    window.user = new User(
+                        response.id,
+                        response.name,
+                        response.email,
+                        response.encryption_salt
+                    );
+                    changePage("home");
                 }
             })
             .catch((err)=>{
-                console.log(err);
+                new Notifier("error", "Something went wrong, try refreshing the page");
             });
     }
 
+    isValidEmail(email){
+        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return regex.test(email);
+    }
+
     render(){
         new Elem("form")
             .addClass("standardForm")
@@ -67,6 +77,8 @@ export default class Register extends Page{
                     .addClass("name")
                     .type("text")
                     .placeholder("Name")
+                    .required()
+                    .focus()
                 )
             )
             .append(new Elem("label")
@@ -75,6 +87,7 @@ export default class Register extends Page{
                     .addClass("email")
                     .type("email")
                     .placeholder("Email")
+                    .required()
                 )
             )
             .append(new Elem("label")
@@ -83,6 +96,7 @@ export default class Register extends Page{
                     .addClass("password")
                     .type("password")
                     .placeholder("Password")
+                    .required()
                 )
             )
             .append(new Elem("label")
@@ -91,6 +105,7 @@ export default class Register extends Page{
                     .addClass("confirmPassword")
                     .type("password")
                     .placeholder("Confirm Password")
+                    .required()
                 )
             )
             .append(new Elem("button")