add sign up page

client/components/layout/c-nav.comp.js

@@ -41,7 +41,7 @@ export class CNavComponent extends HTMLElement {
                         <a style="cursor: pointer;" route="/login" class="nav-link">Sign in</a>
                     </li>
                     <li class="nav-item">
-                        <a style="cursor: pointer;" class="nav-link">Sign up</a>
+                        <a style="cursor: pointer;" route="/register" class="nav-link">Sign up</a>
                     </li>
                 </ul>
             </div>

client/index.js

@@ -2,6 +2,7 @@ import {layoutComponents} from "./components/layout/index";
 import {ArticleComponent} from "./components/article.comp";
 import {HomeComponent} from "./pages/home.comp";
 import {CLoginComponent} from "./pages/login.comp";
+import {CRegisterComponent} from "./pages/register.comp";
 import {RouterOutlet} from "./router/router-outlet";
 import {ComponentRegistry} from "./component-registry";
 import {RouterHandler} from "./router/router-handler";
@@ -35,6 +36,10 @@ class App {
             {
                 tagName: 'c-login',
                 component: CLoginComponent
+            },
+            {
+                tagName: 'c-register',
+                component: CRegisterComponent
             }
         ];
         ComponentRegistry.register(components);

client/pages/login.comp.js

@@ -20,7 +20,7 @@ export class CLoginComponent extends HTMLElement {
     <div class="row">
 
       <div class="col-md-6 offset-md-3 col-xs-12">
-        <h1 class="text-xs-center">Sign up</h1>
+        <h1 class="text-xs-center">Sign in</h1>
         <p class="text-xs-center">
           <a href="">Have an account?</a>
         </p>
@@ -30,17 +30,14 @@ export class CLoginComponent extends HTMLElement {
         <!--</ul>-->
 
         <form>
-          <fieldset class="form-group">
-            <input class="form-control form-control-lg" type="text" placeholder="Your Name">
-          </fieldset>
           <fieldset class="form-group">
             <input class="form-control form-control-lg" type="text" placeholder="Email">
           </fieldset>
           <fieldset class="form-group">
             <input class="form-control form-control-lg" type="password" placeholder="Password">
           </fieldset>
           <button class="btn btn-lg btn-primary pull-xs-right">
-            Sign up
+            Sign in
           </button>
         </form>
       </div>

client/pages/register.comp.js

@@ -0,0 +1,56 @@
+"use strict";
+export class CRegisterComponent extends HTMLElement {
+    constructor() {
+        super();
+        // this.shadow = this.createShadowRoot();
+    }
+
+    static get observedAttributes() {
+        return [];
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+
+    }
+
+    connectedCallback() {
+        var template = `
+             <div class="auth-page">
+  <div class="container page">
+    <div class="row">
+
+      <div class="col-md-6 offset-md-3 col-xs-12">
+        <h1 class="text-xs-center">Sign up</h1>
+        <p class="text-xs-center">
+          <a href="">Have an account?</a>
+        </p>
+
+        <!--<ul class="error-messages">-->
+          <!--<li>That email is already taken</li>-->
+        <!--</ul>-->
+
+        <form>
+          <fieldset class="form-group">
+            <input class="form-control form-control-lg" type="text" placeholder="Your Name">
+          </fieldset>
+          <fieldset class="form-group">
+            <input class="form-control form-control-lg" type="text" placeholder="Email">
+          </fieldset>
+          <fieldset class="form-group">
+            <input class="form-control form-control-lg" type="password" placeholder="Password">
+          </fieldset>
+          <button class="btn btn-lg btn-primary pull-xs-right">
+            Sign up
+          </button>
+        </form>
+      </div>
+
+    </div>
+  </div>
+</div>
+        `;
+        this.innerHTML = template;
+    }
+
+
+}

client/router/router-handler.js

@@ -1,5 +1,6 @@
 import {HomeComponent} from "../pages/home.comp";
 import {CLoginComponent} from "../pages/login.comp";
+import {CRegisterComponent} from "../pages/register.comp";
 export class RouterHandler {
     constructor() {
         var pushState = history.pushState;
@@ -17,46 +18,31 @@ export class RouterHandler {
             } else if(url != undefined) {
                 routeTo = url;
             }
-            RouterHandler.handleButtonChanges(routeTo);
+            RouterHandler.navigate(routeTo);
             RouterHandler._onChangeCallbacks.forEach(c => {
                 c(routeTo);
             });
-            // }
         };
     }
 
     static onChange(callback) {
         RouterHandler._onChangeCallbacks.push(callback);
     }
 
-    static handleButtonChanges(url) {
-        let page = null;
-
-        if (url == undefined || url == '/') {
-            page = new HomeComponent();
-        } else {
-            page = new CLoginComponent();
-        }
-        const outlet = document.querySelector('router-outlet');
-        while (outlet.firstChild) {
-            outlet.removeChild(outlet.firstChild);
-        }
-        outlet.appendChild(page);
-    }
-
     static navigate(url) {
         let page = null;
 
-        if (url == '/') {
-            page = new HomeComponent();
-        } else {
+        if (url == '/login') {
             page = new CLoginComponent();
+        } else if(url == '/register') {
+            page = new CRegisterComponent();
+        } else {
+            page = new HomeComponent();
         }
         const outlet = document.querySelector('router-outlet');
         while (outlet.firstChild) {
             outlet.removeChild(outlet.firstChild);
         }
-        // history.pushState({}, null, url);
         outlet.appendChild(page);
     }
 }