JS router

frontend/templates/auth/register/index.js

@@ -48,12 +48,10 @@ const registerUser = async e => {
   }
 };
 
-const index = () => {
+export const index = () => {
   let form = document.getElementById('form');
   form.addEventListener('submit', registerUser, true);
 
   let username = document.getElementById('username');
   username.addEventListener('input', userExists, false);
 }
-
-export default index;

frontend/templates/index.js

@@ -1,18 +1,14 @@
+import {Router} from './router';
+
 import * as login from './auth/login';
 import * as register from './auth/register';
 import * as panel from './panel/index';
 
-if (window.location.pathname == '/') {
-  login.index();
-} else if (window.location.pathname == '/register') {
-  register.index();
-//  let form = document.getElementById('form');
-//  form.addEventListener('submit', registerUser, true);
-//  let username = document.getElementById('username');
-//  username.addEventListener('input', checkUsernameEventHandler, false);
-} else if (window.location.pathname.includes('panel')) {
-  panel.index();
-} else {
-}
+const router = new Router();
 
-//export default signin;
+router.register('/', login.index);
+router.register('/register', register.index);
+router.register('/panel/', panel.index);
+router.register('/panel/layout.html/', panel.index);
+
+router.route();

frontend/templates/panel/layout.html

@@ -10,6 +10,14 @@
       <nav class="secondary-menu">
         <ul>
           <li class="secondary-menu__item">mCaptcha</li>
+
+          <li class="secondary-menu__section-partition"></li>
+          <button class="main-menu__add-site">+ New Site</button>
+        <li class="secondary-menu__item">Overview</li>
+        <li class="secondary-menu__item">Site Keys</li>
+        <li class="main-menu__item--spacer"></li>
+ 
+          <li class="secondary-menu__section-partition"></li>
           <li class="secondary-menu__item">API Docs</li>
           <li class="secondary-menu__section-partition"></li>
           <li class="secondary-menu__item">Settings</li>
@@ -41,7 +49,8 @@
         <!--
         <li class="task-bar__action">Brand Name</li>
         -->
-        <li class="task-bar__action"></li>
+        <li class="task-bar__action">
+		</li>
         <li class="task-bar__action">
           <img src="../../static/img/svg/bell.svg" alt="Notifications" />
         </li>
@@ -51,11 +60,14 @@
         </li>
       </ul>
 
+
       <ul class="main-menu">
         <!-- important actions -->
+		<!--
         <li class="main-menu__item">Overview</li>
         <li class="main-menu__item">Site Keys</li>
         <li class="main-menu__item">Settings</li>
+		-->
         <li class="main-menu__item--spacer"></li>
         <!-- dummy-->
         <li class="main-menu__item">
@@ -142,6 +154,10 @@
       padding: 0;
     }
 
+	:root {
+      --green: #5cad66;
+	}
+
     .home-button {
       width: 250px;
       margin: auto;
@@ -175,7 +191,7 @@
     }
 
     .secondary-menu__item:hover {
-      color: #5cad66 !important;
+      color: var(--green);
       cursor: grab;
     }
 

frontend/templates/router.js

@@ -0,0 +1,54 @@
+export class Router {
+  constructor() {
+    this.routes = [];
+  }
+
+  register(uri, fn) {
+    // typechecks
+    if (!uri) {
+      throw new Error('uri is empty');
+    }
+
+    if (!fn) {
+      throw new Error('fn is empty');
+    }
+    if (typeof uri !== 'string') {
+      throw new TypeError('URI must be a string');
+    }
+
+    if (typeof fn !== 'function') {
+      throw new TypeError('a callback fn must be provided');
+    }
+
+    this.routes.forEach(route => {
+      if (route.uri == uri) {
+        throw new Error(
+          `URI exists. provided URI: ${uri}, registered config: ${route}`,
+        );
+      }
+    });
+
+    // normalize URI for trailing slash
+    let uriLength = uri.length;
+    if (uri[uriLength - 1] == '/') {
+      uri = uri.slice(0, uriLength - 1);
+    }
+
+    const route = {
+      uri,
+      fn,
+    };
+    this.routes.push(route);
+  }
+
+  route() {
+    this.routes.forEach(route => {
+      // normalize for trailing slash
+      let pattern = new RegExp(`^${route.uri}/$`);
+      let path = window.location.pathname;
+      if (path.match(pattern)) {
+        return route.fn.call();
+      }
+    });
+  }
+}