frontend integration

2026-02-13 11:05:40 +00:00 · 2021-04-09 14:21:43 +05:30
parent c4255397b1
commit 0496c0bdaf
95 changed files with 7115 additions and 197 deletions
--- a/templates/_reset.scss
+++ b/templates/_reset.scss
@@ -0,0 +1,4 @@
+* {
+  padding: 0;
+  margin: 0;
+}
--- a/templates/api/v1/routes.js
+++ b/templates/api/v1/routes.js
@@ -0,0 +1,47 @@
+const ROUTES = {
+  registerUser: '/api/v1/signup',
+
+  loginUser: '/api/v1/signin',
+
+  signoutUser: '/api/v1/signout',
+
+  deleteAccount: '/api/v1/account/delete',
+
+  usernameExists: '/api/v1/account/username/exists',
+
+  emailExists: '/api/v1/account/email/exists',
+
+  healthCheck: '/api/v1/meta/health',
+
+  buildDetails: '/api/v1/meta/build',
+
+  addDomain: '/api/v1/mcaptcha/domain/add',
+
+  challengeDomain: '/api/v1/mcaptcha/domain/domain/verify/challenge/get',
+
+  proveDomain: '/api/v1/mcaptcha/domain/domain/verify/challenge/prove',
+
+  deleteDomain: '/api/v1/mcaptcha/domain/delete',
+
+  addToken: '/api/v1/mcaptcha/domain/token/add',
+
+  updateTokenKey: '/api/v1/mcaptcha/domain/token/update',
+
+  getTokenKey: '/api/v1/mcaptcha/domain/token/get',
+
+  deleteToken: '/api/v1/mcaptcha/domain/token/delete',
+
+  addTokenLevels: '/api/v1/mcaptcha/domain/token/levels/add',
+
+  updateTokenLevels: '/api/v1/mcaptcha/domain/token/levels/update',
+
+  deleteTokenLevels: '/api/v1/mcaptcha/domain/token/levels/delete',
+
+  getTokenLevels: '/api/v1/mcaptcha/domain/token/levels/get',
+
+  getTokenDuration: '/api/v1/mcaptcha/domain/token/token/get',
+
+  updateTokenDuration: '/api/v1/mcaptcha/domain/token/token/update',
+};
+
+export default ROUTES;
--- a/templates/auth/forms.scss
+++ b/templates/auth/forms.scss
@@ -0,0 +1,101 @@
+@import '../reset';
+
+.form__logo {
+  width: 110px;
+  padding-top: 50px;
+  display: block;
+  margin: auto;
+  position: relative;
+  top: 20%;
+  transform: translate(0%, -40.9%);
+}
+
+.form__brand {
+  padding: 10px 0;
+  text-align: center;
+  position: relative;
+  top: 20%;
+  transform: translate(0%, -90.9%);
+}
+
+.form-container {
+  max-width: 40%;
+  min-width: 20%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -49.9%);
+  box-sizing: border-box;
+  margin: auto;
+  padding: 20px 0;
+}
+
+.form__box {
+  border: 1px solid #eaecef;
+  background-color: #f6f8fa;
+  border-radius: 5px;
+  padding: 20px 0;
+}
+
+.form__in-group {
+  display: block;
+  position: relative;
+  margin: auto;
+  max-width: 80%;
+  padding: 10px 0px;
+
+  box-sizing: content-box;
+
+  align-items: center;
+  align-content: center;
+}
+
+.form__in-field {
+  display: block;
+  box-sizing: border-box;
+  margin: 10px 0;
+  padding: 10px 0;
+  width: 100%;
+}
+
+.form__in-field--warn {
+  border: solid 1px red;
+}
+
+.form__in-field--success {
+  border: solid 1px #2ea44f;
+}
+
+.form__pw-recovery {
+  text-decoration: none;
+  color: rgb(3, 102, 214);
+  font-size: 0.8rem;
+}
+
+.form__submit-button {
+  display: block;
+  border: 1px solid skyblue;
+  background: #2ea44f;
+  color: white;
+  height: 40px;
+  border-radius: 5px;
+  width: 80%;
+  margin: auto;
+}
+
+.form__secondary-action {
+  display: block;
+  margin-top: 10px;
+}
+
+.form__secondary-action__banner {
+  display: block;
+  margin: auto;
+  max-width: 80%;
+  text-align: center;
+}
+
+.form__secondary-action__link {
+  text-decoration: none;
+  color: rgb(3, 102, 214);
+}
--- a/templates/auth/login/index.html
+++ b/templates/auth/login/index.html
@@ -0,0 +1,46 @@
+<. include!("../../components/headers.html"); .>
+<div class="form-container">
+    <img src="<.= crate::FILES.get("./static/img/icon-trans.png").unwrap().>" class="form__logo" alt="" />
+  <h2 class="form__brand">Sign in to mCaptcha</h2>
+
+  <form class="form__box" id="form">
+    <label class="form__in-group" for="username"
+      >Username
+      <input
+        class="form__in-field"
+        id="username"
+        type="text"
+        name="username"
+        required=""
+      />
+    </label>
+
+    <label for="password" class="form__in-group"
+      >Password
+      <input
+        class="form__in-field"
+        type="password"
+        id="password"
+        name="password"
+        required=""
+      />
+      <!--
+          <a class="form__pw-recovery" -href="/recovert/password"
+            >Forgot password?</a
+          >
+          -->
+    </label>
+    <button class="form__submit-button" type="submit">
+      Submit
+    </button>
+  </form>
+  <div class="form__secondary-action">
+    <p class="form__secondary-action__banner">
+      New to mCaptcha?
+      <a href="/join" class="form__secondary-action__link"
+        >Create account</a
+      >
+    </p>
+  </div>
+</div>
+<. include!("../../components/footers.html"); .>
--- a/templates/auth/login/index.js
+++ b/templates/auth/login/index.js
@@ -0,0 +1,31 @@
+import ROUTES from '../../api/v1/routes';
+
+import isBlankString from '../../utils/genJsonPayload';
+import genJsonPayload from '../../utils/genJsonPayload';
+
+import '../forms.scss';
+
+const login = e => {
+  e.preventDefault();
+  let username = document.getElementById('username').value;
+  isBlankString(e, username, 'username');
+
+  let password = document.getElementById('password').value;
+  let payload = {
+    username,
+    password,
+  };
+
+  fetch(ROUTES.loginUser, genJsonPayload(payload)).then(res => {
+    if (res.ok) {
+      alert('success');
+    } else {
+      res.json().then(err => alert(`error: ${err.error}`));
+    }
+  });
+};
+
+export const index = () => {
+  let form = document.getElementById('form');
+  form.addEventListener('submit', login, true);
+};
--- a/templates/auth/register/emailExists.js
+++ b/templates/auth/register/emailExists.js
@@ -0,0 +1,43 @@
+import ROUTES from '../../api/v1/routes';
+
+import genJsonPayload from '../../utils/genJsonPayload';
+
+const checkEmailExists = async () => {
+  let email = document.getElementById('email');
+  let val = email.value;
+  let payload = {
+    val,
+  };
+
+  //  return fetch(ROUTES.emailExists, genJsonPayload(payload)).then(res => {
+  //    if (res.ok) {
+  //      res.json().then(data => {
+  //        if (data.exists) {
+  //          console.log(email.className);
+  //          email.className += ' form__in-field--warn';
+  //          alert('Email taken');
+  //        }
+  //
+  //        return data.exists;
+  //      });
+  //    } else {
+  //      res.json().then(err => alert(`error: ${err.error}`));
+  //    }
+  //  });
+  //
+
+  let res = await fetch(ROUTES.emailExists, genJsonPayload(payload));
+  if (res.ok) {
+    let data = await res.json();
+    if (data.exists) {
+      email.className += ' form__in-field--warn';
+      alert('Email taken');
+    }
+    return data.exists;
+  } else {
+    let err = await res.json();
+    alert(`error: ${err.error}`);
+  }
+};
+
+export {checkEmailExists};
--- a/templates/auth/register/index.html
+++ b/templates/auth/register/index.html
@@ -0,0 +1,65 @@
+<. include!("../../components/headers.html"); .>
+<div class="form-container">
+    <img src="<.= crate::FILES.get("./static/img/icon-trans.png").unwrap().>" class="form__logo" alt="" />
+  <h2 class="form__brand">Join mCaptcha</h2>
+
+  <form class="form__box" id="form">
+    <label class="form__in-group" for="username"
+      >Username
+      <input
+        class="form__in-field"
+        id="username"
+        type="text"
+        name="username"
+        id="username"
+        required
+      />
+    </label>
+
+    <label class="form__in-group" for="username"
+      >Email
+      <input
+        class="form__in-field"
+        id="email"
+        type="email"
+        name="email"
+        id="email"
+        required
+      />
+    </label>
+
+    <label for="password" class="form__in-group"
+      >Password
+      <input
+        class="form__in-field"
+        type="password"
+        id="password"
+        name="password"
+        id="password"
+        required
+      />
+    </label>
+
+    <label for="password" class="form__in-group"
+      >Re-enter Password
+      <input
+        class="form__in-field"
+        type="password"
+        id="password-check"
+        name="password-check"
+        id="password-check"
+        required
+      />
+    </label>
+    <button class="form__submit-button" type="submit">
+      Submit
+    </button>
+  </form>
+  <div class="form__secondary-action">
+    <p class="form__secondary-action__banner">
+      New to mCaptcha?
+      <a href="/" class="form__secondary-action__link">Create account</a>
+    </p>
+  </div>
+</div>
+<. include!("../../components/footers.html"); .>
--- a/templates/auth/register/index.js
+++ b/templates/auth/register/index.js
@@ -0,0 +1,57 @@
+import ROUTES from '../../api/v1/routes';
+
+import isBlankString from '../../utils/genJsonPayload';
+import genJsonPayload from '../../utils/genJsonPayload';
+
+import userExists from './userExists';
+import {checkEmailExists} from './emailExists';
+
+import '../forms.scss';
+
+const registerUser = async e => {
+  e.preventDefault();
+
+  let username = document.getElementById('username').value;
+  isBlankString(e, username, 'username');
+
+  let password = document.getElementById('password').value;
+  let passwordCheck = document.getElementById('password-check').value;
+  if (password != passwordCheck) {
+    return alert("passwords don't match, check again!");
+  }
+
+  let email = document.getElementById('email').value;
+  isBlankString(e, email, 'email');
+
+  let exists = await checkUsernameExists();
+  if (exists) {
+    return;
+  }
+
+  exists = await checkEmailExists();
+  if (exists) {
+    return;
+  }
+
+  let payload = {
+    username,
+    password,
+    email,
+  };
+
+  let res = await fetch(ROUTES.registerUser, genJsonPayload(payload));
+  if (res.ok) {
+    alert('success');
+  } else {
+    let err = await res.json();
+    alert(`error: ${err.error}`);
+  }
+};
+
+export const index = () => {
+  let form = document.getElementById('form');
+  form.addEventListener('submit', registerUser, true);
+
+  let username = document.getElementById('username');
+  username.addEventListener('input', userExists, false);
+}
--- a/templates/auth/register/userExists.js
+++ b/templates/auth/register/userExists.js
@@ -0,0 +1,44 @@
+import ROUTES from '../../api/v1/routes';
+
+import genJsonPayload from '../../utils/genJsonPayload';
+
+
+//export const checkUsernameExists = async () => {
+async function userExists()  {
+  let username = document.getElementById('username');
+  let val = username.value;
+  let payload = {
+    val,
+  };
+
+  //  return fetch(ROUTES.usernameExists, genJsonPayload(payload)).then(res => {
+  //    if (res.ok) {
+  //      res.json().then(data => {
+  //        if (data.exists) {
+  //          username.className += ' form__in-field--warn';
+  //          alert('Username taken');
+  //        }
+  //        return data.exists;
+  //      });
+  //    } else {
+  //      res.json().then(err => alert(`error: ${err.error}`));
+  //    }
+  //  });
+  //
+
+  let res = await fetch(ROUTES.usernameExists, genJsonPayload(payload));
+  if (res.ok) {
+    let data = await res.json();
+    if (data.exists) {
+      username.className += ' form__in-field--warn';
+      alert('Username taken');
+    }
+    return data.exists;
+  } else {
+    let err = await res.json();
+    alert(`error: ${err.error}`);
+  }
+  return false;
+};
+
+export default userExists;
--- a/templates/components/footers.html
+++ b/templates/components/footers.html
@@ -0,0 +1,4 @@
+</body>
+<link rel="stylesheet" href="<.= &*crate::CSS .>" type="text/css" media="all">
+<script src="<.= &*crate::JS .>"></script>
+</html>
--- a/templates/components/headers.html
+++ b/templates/components/headers.html
@@ -0,0 +1,7 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><.= title .>|<.= name .></title>
+  </head>
+  <body>
--- a/templates/index.js
+++ b/templates/index.js
@@ -0,0 +1,14 @@
+import {Router} from './router';
+
+import * as login from './auth/login';
+import * as register from './auth/register';
+import * as panel from './panel/index';
+
+const router = new Router();
+
+router.register('/', login.index);
+router.register('/register', register.index);
+router.register('/panel/', panel.index);
+router.register('/panel/layout.html/', panel.index);
+
+router.route();
--- a/templates/main.scss
+++ b/templates/main.scss
@@ -0,0 +1,2 @@
+@use './auth/forms';
+@use './panel/main';
--- a/templates/panel/add-site-key/index.html
+++ b/templates/panel/add-site-key/index.html
@@ -0,0 +1,48 @@
+<form class="sitekey-form" action="/something" method="post">
+  <div class="sitekey-form__title-flex-container">
+    <b class="sitekey-form__title">Add Site Key</b>
+  </div>
+  <div class="sitekey-form__add-level-flex-container">
+    <label class="sitekey-form__label" for="description">Description</label>
+  </div>
+  <input
+    class="sitekey-form__input"
+    type="text/"
+    name="description"
+    id="description"
+    value=""
+  />
+
+  <div class="sitekey-form__add-level-flex-container">
+    <!-- insert Javascript for adding more levels as needed -->
+    <label class="sitekey-form__label" for="level1">Level 1</label>
+  </div>
+
+  <input
+    class="sitekey-form__input"
+    type="text/"
+    name="level1"
+    id="level1"
+    value=""
+  />
+
+  <div class="sitekey-form__add-level-flex-container">
+    <label class="sitekey-form__label" for="level1">Level 2</label>
+  </div>
+
+  <div class="sitekey-form__add-level-flex-container">
+    <!--
+              <div class="sitekey-form__add-level-spacer"></div>
+              -->
+    <input
+      class="sitekey-form__input--add-level"
+      type="text/"
+      name="level2"
+      id="level2"
+      value=""
+    />
+
+    <button class="sitekey-form__add-level">Add Level</button>
+  </div>
+  <button class="sitekey-form__submit" type="submit">Submit</button>
+</form>
--- a/templates/panel/header/index.html
+++ b/templates/panel/header/index.html
@@ -0,0 +1,3 @@
+<header>
+  <. include!("./sidebar/index.html"); .>
+</header>
--- a/templates/panel/header/sidebar/index.html
+++ b/templates/panel/header/sidebar/index.html
@@ -0,0 +1,86 @@
+<nav class="secondary-menu">
+  <ul>
+    <li class="secondary-menu__heading">
+      <img class="secondary-menu__logo" src="<.= crate::FILES.get("./static/img/icon-trans.png").unwrap() .>" alt="Logo" />
+      <div class="secondary-menu__brand-name">
+        mCaptcha
+      </div>
+    </li>
+
+    <!--
+          <li class="secondary-menu__section-partition"></li>
+          -->
+    <li class="secondary-menu__item">
+      <a class="secondary-menu__item-link" href="">
+        <img class="secondary-menu__icon" src="<.= crate::FILES.get("./static/img/svg/home.svg").unwrap() .>" alt="" />
+        <div class="secondary-menu__item-name">
+          Overview
+        </div>
+      </a>
+    </li>
+    <li class="secondary-menu__item">
+      <a class="secondary-menu__item-link" href="">
+        <img class="secondary-menu__icon" src="<.= crate::FILES.get("./static/img/svg/key.svg").unwrap() .>" alt="" />
+        <div class="secondary-menu__item-name">
+          Site Keys
+        </div>
+      </a>
+    </li>
+
+    <li class="secondary-menu__item">
+      <a class="secondary-menu__item-link" href="">
+        <img class="secondary-menu__icon" src="<.= crate::FILES.get("./static/img/svg/settings.svg").unwrap() .>" alt="" />
+        <div class="secondary-menu__item-name">
+          Settings
+        </div>
+      </a>
+    </li>
+    <li class="secondary-menu__item">
+      <a class="secondary-menu__item-link" href="">
+        <img class="secondary-menu__icon" src="<.= crate::FILES.get("./static/img/svg/credit-card.svg").unwrap() .>" alt="" />
+        <div class="secondary-menu__item-name">
+          Billing
+        </div>
+      </a>
+    </li>
+    <li class="secondary-menu__item">
+      <a class="secondary-menu__item-link" href="">
+        <img class="secondary-menu__icon" src="<.= crate::FILES.get("./static/img/svg/help-circle.svg").unwrap() .>" alt="" />
+        <div class="secondary-menu__item-name">
+          Help
+        </div>
+      </a>
+    </li>
+    <li class="secondary-menu__item">
+      <a class="secondary-menu__item-link" href="">
+        <img
+          class="secondary-menu__icon"
+		  src="<.= crate::FILES.get("./static/img/svg/message-square.svg").unwrap() .>"
+          alt=""
+        />
+
+        <div class="secondary-menu__item-name">
+          Support
+        </div>
+      </a>
+    </li>
+    <li class="secondary-menu__item">
+      <a class="secondary-menu__item-link" href="">
+        <img class="secondary-menu__icon" src="<.= crate::FILES.get("./static/img/svg/file-text.svg").unwrap() .>" alt="" />
+        <div class="secondary-menu__item-name">
+          API Docs
+        </div>
+      </a>
+    </li>
+    <li class="secondary-menu__item">
+      <a class="secondary-menu__item-link" href="">
+        <img class="secondary-menu__icon" 
+		src="<.= crate::FILES.get("./static/img/svg/github.svg").unwrap() .>" alt="" />
+        <div class="secondary-menu__item-name">
+          Source Code
+        </div>
+      </a>
+    </li>
+  </ul>
+</nav>
+<!-- Nav/Side/Secondary bar -->
--- a/templates/panel/help-banner/index.html
+++ b/templates/panel/help-banner/index.html
@@ -0,0 +1,14 @@
+<ul class="help-text">
+  <li class="help-text__instructions">
+    <span class="help-text__serial-num">1</span>
+    Add sitekey
+  </li>
+  <li class="help-text__instructions">
+    <span class="help-text__serial-num">2</span>
+    Add client-side code snippets in places that you want to protext
+  </li>
+  <li class="help-text__instructions">
+    <span class="help-text__serial-num">3</span>
+    Add servers-side verification logic
+  </li>
+</ul>
--- a/templates/panel/icon-trans.png
+++ b/templates/panel/icon-trans.png
--- a/templates/panel/index.html
+++ b/templates/panel/index.html
@@ -0,0 +1,356 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title><.= TITLE .></title>
+  </head>
+  <body>
+
+	  <. include!("./header/index.html"); .>
+
+    <main>
+
+		<. include!("./taskbar/index.html"); .>
+
+		<. include!("./help-banner/index.html"); .>
+      <!-- Main content container -->
+      <div class="inner-container">
+        <!-- Main menu/ important actions roaster -->
+
+		<. include!("./add-site-key/index.html"); .>
+      </div>
+      <!-- end of container -->
+    </main>
+  </body>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    li {
+      list-style: none;
+    }
+
+    :root {
+      --green: #5cad66;
+      --violet: #800080;
+      --backdrop: #f0f0f0;
+      --light-text: rgba(255, 255, 255, 0.87);
+      --secondary-backdrop: #2b2c30;
+      --light-grey: rgba(0, 0, 0, 0.125);
+    }
+
+    .secondary-menu {
+      position: fixed;
+      width: 14%;
+      left: 0;
+      bottom: 0;
+      top: 0;
+      right: 0;
+      height: 100%;
+      overflow: auto;
+
+      background-color: var(--secondary-backdrop);
+      color: var(--light-text);
+    }
+
+    .secondary-menu__heading {
+      margin: auto;
+      padding: 20px 5px;
+      display: flex;
+    }
+    .secondary-menu__heading:hover {
+      color: var(--green);
+      cursor: grab;
+    }
+
+    .secondary-menu__logo {
+      width: 70px;
+      display: inline-block;
+    }
+
+    .secondary-menu__brand-name {
+      display: inline-block;
+      margin: auto;
+      font-size: 1.5rem;
+    }
+
+    .secondary-menu__item {
+      margin: auto;
+      padding: 20px 25px;
+      display: flex;
+    }
+
+    .secondary-menu__icon {
+      filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg)
+        brightness(103%) contrast(103%);
+      opacity: 0.8;
+      width: 1rem;
+      margin: auto;
+      margin-right: 10px;
+    }
+
+
+
+    .secondary-menu__item-name {
+      display: inline-block;
+      margin: auto;
+      font-size: 1rem;
+    }
+
+    /*
+    .secondary-menu__section-partition {
+      border-bottom: 1px solid var(--light-text);
+      margin: auto;
+      max-width: 70%;
+      list-style: none;
+      margin: 20px;
+    }
+    */
+
+    .secondary-menu__item-link:hover {
+      color: var(--green);
+      cursor: grab;
+      filter: invert(58%) sepia(60%) saturate(331%) hue-rotate(76deg)
+        brightness(91%) contrast(92%);
+    }
+
+    .secondary-menu__item-link {
+      color: inherit;
+      width: 100%;
+      height: 100%;
+    }
+
+    main {
+      position: fixed;
+      top: 0;
+      right: 0;
+      left: 14%;
+      bottom: 0;
+      background-color: var(--backdrop);
+    }
+
+    .task-bar {
+      display: flex;
+      padding: 0px;
+      margin: 0px;
+      background-color: #fff;
+    }
+
+
+    .task-bar__action{
+      display: inline-block;
+      padding: 10px 0px;
+      margin: auto;
+    }
+
+    .task-bar__spacer {
+      min-width: 250px;
+      flex: 6;
+    }
+
+    .task-bar__icon {
+      opacity: 0.8;
+      width: 1.5rem;
+      margin: auto 20px;
+    }
+
+    .task-bar__icon:hover{
+      cursor: grab;
+    }
+
+    .main-menu {
+      display: flex;
+      flex-grow: 0;
+      padding-top: 20px;
+      padding-left: 10px;
+    }
+
+    .main-menu__item {
+      list-style: none;
+      background-color: #c3c3c3;
+      flex: 2;
+      text-align: center;
+      vertical-align: middle;
+      margin: auto 20px;
+      padding: 10px 0;
+    }
+
+    .main-menu__item--spacer {
+      list-style: none;
+      flex: 3;
+      text-align: center;
+    }
+
+    .main-menu__item:hover {
+      background-color: grey;
+      cursor: grab;
+    }
+
+    .main-menu__item:last-child {
+      padding: 0;
+      display: flex;
+      flex: 2;
+      border: none;
+      background-color: unset;
+    }
+
+    .main-menu__item:last-child:hover {
+      cursor: unset;
+      background-color: unset;
+    }
+
+    .main-menu__add-site {
+      display: inline-block;
+      background-color: var(--violet);
+      color: white;
+      font-weight: 500;
+      font-size: 16px;
+      padding: 10px 15px;
+
+      border-radius: 5px;
+      border: 1px grey solid;
+      min-height: 45px;
+      margin: auto;
+    }
+
+    .main-menu__add-site:hover {
+      background-color: var(--violet);
+      cursor: grab;
+      transform: translateY(-5px);
+    }
+
+    .help-text {
+      border-radius: 4px;
+      box-shadow: var(--secondary-backdrop) 0px 2px 6px 0px;
+      min-width: 70%;
+      max-width: 80%;
+      min-height: 70px;
+      display: flex;
+      margin-left: 15px;
+      margin-top: 40px;
+    }
+
+    .help-text__serial-num {
+      display: inline-flex;
+      background-color: var(--violet);
+      color: var(--light-text);
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .help-text__instructions {
+      display: inline-block;
+      list-style: none;
+      font-size: 19px;
+      font-weight: 500;
+      padding: 10px;
+      margin: auto;
+    }
+
+    .inner-container {
+      display: flex;
+      box-sizing: border-box;
+      max-width: 50%;
+      margin: 50px auto;
+      border-radius: 5px;
+      display: flex;
+    }
+
+    .sitekey-form {
+      display: flex;
+      flex-direction: column;
+      width: 90%;
+      justify-content: center;
+      align-items: center;
+      box-sizing: content-box;
+      background-color: #fff;
+      margin: auto;
+      padding-bottom: 30px;
+    }
+
+    .sitekey-form__title-flex-container {
+      display: flex;
+      width: 100%;
+      border-bottom: 0.1px solid var(--light-grey);
+    }
+
+    .sitekey-form__title {
+      padding-left: 10px;
+      font-size: 1rem;
+      padding: 0.75rem 1.25rem;
+    }
+
+    .sitekey-form__label {
+      display: block;
+      margin: 10px 0;
+      box-sizing: inherit;
+      justify-self: left;
+    }
+
+    .sitekey-form__input {
+      position: relative;
+      margin-top: 5px;
+      box-sizing: border-box;
+      height: 40px;
+      width: 90%;
+    }
+
+    .sitekey-form__input--add-level {
+      position: relative;
+      margin-top: 5px;
+      box-sizing: inherit;
+      flex: 3;
+      height: 40px;
+      margin-right: 20px;
+    }
+
+    .sitekey-form__add-level-flex-container {
+      display: flex;
+      box-sizing: border-box;
+      width: 90%;
+      margin-top: 10px;
+    }
+
+    .sitekey-form__add-level-spacer {
+      flex: 3;
+    }
+
+    .sitekey-form__add-level {
+      background-color: var(--violet);
+      color: white;
+      padding: 5px;
+      font-size: 16px;
+
+      border-radius: 5px;
+      border: 1px var(--light-grey) solid;
+      height: 40px;
+      min-width: 125px;
+      margin: auto;
+    }
+
+    .sitekey-form__submit {
+      margin-top: 50px;
+      display: block;
+      background-color: var(--violet);
+      color: white;
+      padding: 5px;
+      font-size: 20px;
+
+      border-radius: 5px;
+      border: 1px var(--light-grey) solid;
+      min-height: 45px;
+      width: 125px;
+      width: 90%;
+    }
+  </style>
+</html>
--- a/templates/panel/index.js
+++ b/templates/panel/index.js
@@ -0,0 +1,74 @@
+/*
+import './main.scss';
+import './nav/main.scss';
+*/
+
+export const index = () => {
+  //  const html = document.documentElement;
+  //  const body = document.body;
+  //  const menuLinks = document.querySelectorAll('.admin-menu a');
+  //  const collapseBtn = document.querySelector('.admin-menu .collapse-btn');
+  //  const toggleMobileMenu = document.querySelector('.toggle-mob-menu');
+  //  const switchInput = document.querySelector('.switch input');
+  //  const switchLabel = document.querySelector('.switch label');
+  //  const switchLabelText = switchLabel.querySelector('span:last-child');
+  //  const collapsedClass = 'collapsed';
+  //  const lightModeClass = 'light-mode';
+  //
+  //  /*TOGGLE HEADER STATE*/
+  //  collapseBtn.addEventListener('click', function() {
+  //    body.classList.toggle(collapsedClass);
+  //    this.getAttribute('aria-expanded') == 'true'
+  //      ? this.setAttribute('aria-expanded', 'false')
+  //      : this.setAttribute('aria-expanded', 'true');
+  //    this.getAttribute('aria-label') == 'collapse menu'
+  //      ? this.setAttribute('aria-label', 'expand menu')
+  //      : this.setAttribute('aria-label', 'collapse menu');
+  //  });
+  //
+  //  /*TOGGLE MOBILE MENU*/
+  //  toggleMobileMenu.addEventListener('click', function() {
+  //    body.classList.toggle('mob-menu-opened');
+  //    this.getAttribute('aria-expanded') == 'true'
+  //      ? this.setAttribute('aria-expanded', 'false')
+  //      : this.setAttribute('aria-expanded', 'true');
+  //    this.getAttribute('aria-label') == 'open menu'
+  //      ? this.setAttribute('aria-label', 'close menu')
+  //      : this.setAttribute('aria-label', 'open menu');
+  //  });
+  //
+  //  /*SHOW TOOLTIP ON MENU LINK HOVER*/
+  //  for (const link of menuLinks) {
+  //    link.addEventListener('mouseenter', function() {
+  //      if (
+  //        body.classList.contains(collapsedClass) &&
+  //        window.matchMedia('(min-width: 768px)').matches
+  //      ) {
+  //        const tooltip = this.querySelector('span').textContent;
+  //        this.setAttribute('title', tooltip);
+  //      } else {
+  //        this.removeAttribute('title');
+  //      }
+  //    });
+  //  }
+  //
+  //  /*TOGGLE LIGHT/DARK MODE*/
+  //  if (localStorage.getItem('dark-mode') === 'false') {
+  //    html.classList.add(lightModeClass);
+  //    switchInput.checked = false;
+  //    switchLabelText.textContent = 'Light';
+  //  }
+  //
+  //  switchInput.addEventListener('input', function() {
+  //    html.classList.toggle(lightModeClass);
+  //    if (html.classList.contains(lightModeClass)) {
+  //      switchLabelText.textContent = 'Light';
+  //      localStorage.setItem('dark-mode', 'false');
+  //    } else {
+  //      switchLabelText.textContent = 'Dark';
+  //      localStorage.setItem('dark-mode', 'true');
+  //    }
+  //  });
+  //
+  let a;
+};
--- a/templates/panel/output/index.html
+++ b/templates/panel/output/index.html
@@ -0,0 +1,53 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Login|mCaptcha</title>
+  </head>
+  <body>
+<div class="form-container">
+    <img src="./prod/img/icon-trans.7920418313D84DCDB2491E02E52E4BEF374970C216E85BD721274EE51241ECD4.png" class="form__logo" alt="" />
+  <h2 class="form__brand">Sign in to mCaptcha</h2>
+
+  <form class="form__box" id="form">
+    <label class="form__in-group" for="username"
+      >Username
+      <input
+        class="form__in-field"
+        id="username"
+        type="text"
+        name="username"
+        required=""
+      />
+    </label>
+
+    <label for="password" class="form__in-group"
+      >Password
+      <input
+        class="form__in-field"
+        type="password"
+        id="password"
+        name="password"
+        required=""
+      />
+      <!--
+          <a class="form__pw-recovery" -href="/recovert/password"
+            >Forgot password?</a
+          >
+          -->
+    </label>
+    <button class="form__submit-button" type="submit">
+      Submit
+    </button>
+  </form>
+  <div class="form__secondary-action">
+    <p class="form__secondary-action__banner">
+      New to mCaptcha?
+      <a href="/register" class="form__secondary-action__link"
+        >Create account</a
+      >
+    </p>
+  </div>
+</div>
+</body>
+</html>
--- a/templates/panel/output/register/index.html
+++ b/templates/panel/output/register/index.html
@@ -0,0 +1,72 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Join|mCaptcha</title>
+  </head>
+  <body>
+<div class="form-container">
+    <img src="./prod/img/icon-trans.7920418313D84DCDB2491E02E52E4BEF374970C216E85BD721274EE51241ECD4.png" class="form__logo" alt="" />
+  <h2 class="form__brand">Join mCaptcha</h2>
+
+  <form class="form__box" id="form">
+    <label class="form__in-group" for="username"
+      >Username
+      <input
+        class="form__in-field"
+        id="username"
+        type="text"
+        name="username"
+        id="username"
+        required
+      />
+    </label>
+
+    <label class="form__in-group" for="username"
+      >Email
+      <input
+        class="form__in-field"
+        id="email"
+        type="email"
+        name="email"
+        id="email"
+        required
+      />
+    </label>
+
+    <label for="password" class="form__in-group"
+      >Password
+      <input
+        class="form__in-field"
+        type="password"
+        id="password"
+        name="password"
+        id="password"
+        required
+      />
+    </label>
+
+    <label for="password" class="form__in-group"
+      >Re-enter Password
+      <input
+        class="form__in-field"
+        type="password"
+        id="password-check"
+        name="password-check"
+        id="password-check"
+        required
+      />
+    </label>
+    <button class="form__submit-button" type="submit">
+      Submit
+    </button>
+  </form>
+  <div class="form__secondary-action">
+    <p class="form__secondary-action__banner">
+      New to mCaptcha?
+      <a href="/" class="form__secondary-action__link">Create account</a>
+    </p>
+  </div>
+</div>
+</body>
+</html>
--- a/templates/panel/svg/bell.svg
+++ b/templates/panel/svg/bell.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
--- a/templates/panel/svg/credit-card.svg
+++ b/templates/panel/svg/credit-card.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-credit-card"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
--- a/templates/panel/svg/eye-off.svg
+++ b/templates/panel/svg/eye-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye-off"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
--- a/templates/panel/svg/eye.svg
+++ b/templates/panel/svg/eye.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
--- a/templates/panel/svg/file-text.svg
+++ b/templates/panel/svg/file-text.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
--- a/templates/panel/svg/file.svg
+++ b/templates/panel/svg/file.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
--- a/templates/panel/svg/filter.svg
+++ b/templates/panel/svg/filter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-filter"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
--- a/templates/panel/svg/github.svg
+++ b/templates/panel/svg/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
--- a/templates/panel/svg/globe.svg
+++ b/templates/panel/svg/globe.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
--- a/templates/panel/svg/help-circle.svg
+++ b/templates/panel/svg/help-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
--- a/templates/panel/svg/home.svg
+++ b/templates/panel/svg/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
--- a/templates/panel/svg/key.svg
+++ b/templates/panel/svg/key.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-key"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path></svg>
--- a/templates/panel/svg/log-out.svg
+++ b/templates/panel/svg/log-out.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
--- a/templates/panel/svg/menu.svg
+++ b/templates/panel/svg/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
--- a/templates/panel/svg/message-square.svg
+++ b/templates/panel/svg/message-square.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
--- a/templates/panel/svg/moon.svg
+++ b/templates/panel/svg/moon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
--- a/templates/panel/svg/settings.svg
+++ b/templates/panel/svg/settings.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
--- a/templates/panel/svg/shield-off.svg
+++ b/templates/panel/svg/shield-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield-off"><path d="M19.69 14a6.9 6.9 0 0 0 .31-2V5l-8-3-3.16 1.18"></path><path d="M4.73 4.73L4 5v7c0 6 8 10 8 10a20.29 20.29 0 0 0 5.62-4.38"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
--- a/templates/panel/svg/shield.svg
+++ b/templates/panel/svg/shield.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
--- a/templates/panel/svg/tag.svg
+++ b/templates/panel/svg/tag.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-tag"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>
--- a/templates/panel/svg/toggle-left.svg
+++ b/templates/panel/svg/toggle-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-toggle-left"><rect x="1" y="5" width="22" height="14" rx="7" ry="7"></rect><circle cx="8" cy="12" r="3"></circle></svg>
--- a/templates/panel/svg/toggle-right.svg
+++ b/templates/panel/svg/toggle-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-toggle-right"><rect x="1" y="5" width="22" height="14" rx="7" ry="7"></rect><circle cx="16" cy="12" r="3"></circle></svg>
--- a/templates/panel/svg/user.svg
+++ b/templates/panel/svg/user.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
--- a/templates/panel/taskbar/index.html
+++ b/templates/panel/taskbar/index.html
@@ -0,0 +1,20 @@
+<ul class="task-bar">
+  <!--
+        <li class="task-bar__action">Brand Name</li>
+        -->
+  <li class="task-bar__spacer"></li>
+  <li class="task-bar__action">
+    <button class="main-menu__add-site">+ New Site</button>
+  </li>
+  <li class="task-bar__action">
+    <img class="task-bar__icon" src="./svg/moon.svg" alt="Profile" />
+  </li>
+
+  <li class="task-bar__action">
+    <img class="task-bar__icon" src="./svg/bell.svg" alt="Notifications" />
+  </li>
+
+  <li class="task-bar__action">
+    <img class="task-bar__icon" src="../svg/log-out.svg" alt="Profile" />
+  </li>
+</ul>
--- a/templates/router.js
+++ b/templates/router.js
@@ -0,0 +1,67 @@
+const normalizeUri = uri => {
+  if (!uri) {
+    throw new Error('uri is empty');
+  }
+
+  if (typeof uri !== 'string') {
+    throw new TypeError('URI must be a string');
+  }
+
+  let uriLength = uri.length;
+  if (uri[uriLength - 1] == '/') {
+    uri = uri.slice(0, uriLength - 1);
+  }
+  return uri;
+};
+
+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}`,
+        );
+      }
+    });
+
+    uri = normalizeUri(uri);
+
+    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;
+      path = normalizeUri(path);
+      if (path.match(pattern)) {
+        return route.fn.call();
+      }
+    });
+  }
+}
--- a/templates/utils/genJsonPayload.js
+++ b/templates/utils/genJsonPayload.js
@@ -0,0 +1,12 @@
+const genJsonPayload = payload => {
+  let value = {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(payload),
+  };
+  return value;
+};
+
+export default genJsonPayload;
--- a/templates/utils/isBlankString.js
+++ b/templates/utils/isBlankString.js
@@ -0,0 +1,8 @@
+const isBlankString = (event, value, field) => {
+  if (!value.replace(/\s/g, '').length) {
+    event.preventDefault();
+    alert(`${field} can't be empty`);
+  }
+};
+
+export default isBlankString;
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>`
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>