frontend integration

.gitignore

@@ -3,3 +3,5 @@ tarpaulin-report.html
 .env
 .env
 cobertura.xml
+prod/
+node_modules/

Cargo.lock

@@ -664,7 +664,7 @@ dependencies = [
 [[package]]
 name = "cache-buster"
 version = "0.1.0"
-source = "git+https://github.com/realaravinth/cache-buster#b7336fc0b15aa98368dfb9a313ea01bef1711859"
+source = "git+https://github.com/realaravinth/cache-buster#26d40b9993820837aa9d2d683937e502bfd3be12"
 dependencies = [
  "data-encoding",
  "derive_builder 0.10.0",
@@ -1335,6 +1335,7 @@ dependencies = [
  "actix-rt",
  "actix-web",
  "argon2-creds",
+ "cache-buster",
  "config",
  "derive_builder 0.9.0",
  "derive_more",
@@ -1342,6 +1343,7 @@ dependencies = [
  "lazy_static",
  "log",
  "m_captcha",
+ "mime",
  "mime_guess",
  "pretty_env_logger",
  "rand 0.8.3",

Cargo.toml

@@ -36,6 +36,7 @@ actix-rt = "1"
 actix-files = "0.4"
 mime_guess = "2.0.3"
 rust-embed = "5.9.0"
+cache-buster = { version = "0.1", git = "https://github.com/realaravinth/cache-buster" }
 
 futures = "0.3"
 
@@ -71,3 +72,5 @@ sailfish = "0.3.2"
 serde_yaml = "0.8"
 serde_json = "1"
 yaml-rust = "0.4"
+cache-buster = { version = "0.1", git = "https://github.com/realaravinth/cache-buster" }
+mime = "0.3.16"

Makefile

@@ -7,13 +7,13 @@ run: build-frontend
 
 dev-env:
 	cargo fetch
-	cd frontend; yarn install
+	yarn install
 
 docs:
 	cargo doc --no-deps --workspace --all-features
 
 build-frontend:
-	cd frontend; yarn build
+	yarn build
 
 test: migrate
 	cargo test
@@ -29,7 +29,6 @@ release: build-frontend
 
 clean:
 	cargo clean
-	cd frontend
 	yarn clean
 
 migrate:

build.rs

@@ -15,6 +15,7 @@
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+use cache_buster::BusterBuilder;
 use std::process::Command;
 
 fn main() {
@@ -32,4 +33,28 @@ fn main() {
         "cargo:rustc-env=OPEN_API_DOCS={}",
         serde_json::to_string(&api_json).unwrap()
     );
+    cache_bust();
+}
+
+fn cache_bust() {
+    let types = vec![
+        mime::IMAGE_PNG,
+        mime::IMAGE_SVG,
+        mime::IMAGE_JPEG,
+        mime::IMAGE_GIF,
+        mime::APPLICATION_JAVASCRIPT,
+        mime::TEXT_CSS,
+    ];
+
+    let config = BusterBuilder::default()
+        .source("./static")
+        .result("./prod")
+        .mime_types(types)
+        .copy(true)
+        .follow_links(true)
+        .build()
+        .unwrap();
+
+    config.init().unwrap();
+    config.hash().unwrap().to_env();
 }

frontend/webpack.prod.js

@@ -10,7 +10,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
 module.exports = merge(common, {
   mode: 'production',
   output: {
-    filename: '[name].[contentHash].bundle.js',
+    filename: '[name].js',
     path: path.resolve(__dirname, 'dist'),
   },
   optimization: {
@@ -20,7 +20,7 @@ module.exports = merge(common, {
     ],
   },
   plugins: [
-    new MiniCssExtractPlugin({filename: '[name].[contentHash].css'}),
+    new MiniCssExtractPlugin({filename: '[name].css'}),
     new CleanWebpackPlugin(),
   ],
   module: {

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "description": "mCaptcha/guard frontend",
+  "main": "index.js",
+  "repository": "https://github.com/mCaptcha/guard",
+  "author": "Aravinth Manivannan <realaravinth@batsense.net>",
+  "license": "AGPLv3 or above",
+  "scripts": {
+    "start": "webpack --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js"
+  },
+  "private": true,
+
+  "devDependencies": {
+    "css-loader": "^2.1.0",
+    "file-loader": "^3.0.1",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "node-sass": "^4.11.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.2.1",
+    "webpack-merge": "^4.2.1"
+  },
+  "dependencies": {
+    "clean-webpack-plugin": "^2.0.0"
+  }
+}

sailfish.yml

@@ -0,0 +1 @@
+delimiter: "."

src/main.rs

@@ -23,6 +23,7 @@ use actix_web::{
     HttpServer,
 };
 //use awc::Client;
+use cache_buster::Files as FileMap;
 use lazy_static::lazy_static;
 use log::info;
 
@@ -32,7 +33,7 @@ mod errors;
 mod api;
 mod docs;
 mod settings;
-//mod templates;
+mod templates;
 #[cfg(test)]
 #[macro_use]
 mod tests;
@@ -46,6 +47,11 @@ lazy_static! {
 
 //    pub static ref OPEN_API_DOC: String = env::var("OPEN_API_DOCS").unwrap();
     pub static ref S: String = env::var("S").unwrap();
+
+    pub static ref FILES: FileMap = FileMap::load();
+    pub static ref JS: &'static str = FILES.get("./static/bundle/main.js").unwrap();
+    pub static ref CSS: &'static str = FILES.get("./static/bundle/main.css").unwrap();
+
 }
 
 pub static OPEN_API_DOC: &str = env!("OPEN_API_DOCS");
@@ -84,8 +90,9 @@ async fn main() -> std::io::Result<()> {
             ))
             .configure(v1::services)
             .configure(docs::services)
+            .configure(templates::services)
             .app_data(get_json_err())
-            .service(Files::new("/", "./frontend/dist").index_file("index.html"))
+            .service(Files::new("/", "./prod"))
     })
     .bind(SETTINGS.server.get_ip())
     .unwrap()

src/templates/auth/login.rs

@@ -0,0 +1,34 @@
+use actix_web::{get, HttpResponse, Responder};
+
+use sailfish::TemplateOnce;
+
+#[derive(Clone, TemplateOnce)]
+#[template(path = "auth/login/index.html")]
+struct IndexPage {
+    name: String,
+    title: String,
+}
+
+impl Default for IndexPage {
+    fn default() -> Self {
+        IndexPage {
+            name: "mCaptcha".into(),
+            title: "Login".into(),
+        }
+    }
+}
+
+impl IndexPage {
+    pub fn run(&self) -> Result<String, &'static str> {
+        let index = self.clone().render_once().unwrap();
+        Ok(index)
+    }
+}
+
+#[get("/")]
+pub async fn login() -> impl Responder {
+    let body = IndexPage::default().run().unwrap();
+    HttpResponse::Ok()
+        .content_type("text/html; charset=utf-8")
+        .body(body)
+}

src/templates/auth/mod.rs

@@ -0,0 +1,2 @@
+pub mod login;
+pub mod register;

src/templates/auth/register.rs

@@ -0,0 +1,34 @@
+use actix_web::{get, HttpResponse, Responder};
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce, Clone)]
+#[template(path = "auth/register/index.html")]
+pub struct IndexPage {
+    pub name: String,
+    pub title: String,
+}
+
+impl Default for IndexPage {
+    fn default() -> Self {
+        IndexPage {
+            name: "mCaptcha".into(),
+            title: "Join".into(),
+        }
+    }
+}
+
+impl IndexPage {
+    pub fn run(&self) -> Result<String, &'static str> {
+        let index = self.clone().render_once().unwrap();
+
+        Ok(index)
+    }
+}
+
+#[get("/join")]
+pub async fn join() -> impl Responder {
+    let body = IndexPage::default().run().unwrap();
+    HttpResponse::Ok()
+        .content_type("text/html; charset=utf-8")
+        .body(body)
+}

src/templates/mod.rs

@@ -17,8 +17,11 @@
 
 use actix_web::web::ServiceConfig;
 
-mod routes;
+mod auth;
+mod panel;
 
 pub fn services(cfg: &mut ServiceConfig) {
-    cfg.service(routes::login);
+    cfg.service(auth::login::login);
+    cfg.service(auth::register::join);
+    cfg.service(panel::panel);
 }

src/templates/panel/mod.rs

@@ -0,0 +1,35 @@
+use actix_web::{get, HttpResponse, Responder};
+use sailfish::TemplateOnce;
+
+#[derive(TemplateOnce, Clone)]
+#[template(path = "panel/index.html")]
+pub struct IndexPage {
+    pub name: String,
+    pub title: String,
+}
+
+const TITLE: &str = "Dashboard";
+
+impl Default for IndexPage {
+    fn default() -> Self {
+        IndexPage {
+            name: "mCaptcha".into(),
+            title: "Home".into(),
+        }
+    }
+}
+
+impl IndexPage {
+    pub fn run(&self) -> Result<String, &'static str> {
+        let index = self.clone().render_once().unwrap();
+        Ok(index)
+    }
+}
+
+#[get("/panel")]
+pub async fn panel() -> impl Responder {
+    let body = IndexPage::default().run().unwrap();
+    HttpResponse::Ok()
+        .content_type("text/html; charset=utf-8")
+        .body(body)
+}

src/templates/routes.rs

@@ -16,19 +16,13 @@
 */
 
 use sailfish::TemplateOnce;
+//use au
 
-#[derive(TemplateOnce, Default)]
-#[template(path = "signin.stpl")]
-struct SignIn;
-
-use actix_web::{get, post, web, HttpResponse, Responder};
-//use awc::Client;
-
-#[get("/login/")]
-pub async fn login() -> impl Responder {
-    let body = SignIn::default().render_once().unwrap();
-    //        .map_err(|_| ServiceError::InternalError)?;
-    HttpResponse::Ok()
-        .content_type("text/html; charset=utf-8")
-        .body(body)
-}
+//#[get("/")]
+//pub async fn login() -> impl Responder {
+//    let body = SignIn::default().render_once().unwrap();
+//    //        .map_err(|_| ServiceError::InternalError)?;
+//    HttpResponse::Ok()
+//        .content_type("text/html; charset=utf-8")
+//        .body(body)
+//}

static/bundle/main.css

@@ -0,0 +1 @@
+*{padding:0;margin:0}.form__logo{width:110px;padding-top:50px;display:block;margin:auto;transform:translateY(-40.9%)}.form__brand,.form__logo{position:relative;top:20%}.form__brand{padding:10px 0;text-align:center;transform:translateY(-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 0;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:1px solid red}.form__in-field--success{border:1px solid #2ea44f}.form__pw-recovery{text-decoration:none;color:#0366d6;font-size:.8rem}.form__submit-button{display:block;border:1px solid #87ceeb;background:#2ea44f;color:#fff;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:#0366d6}

static/bundle/main.js

@@ -0,0 +1 @@
+!function(e){var t={};function a(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,a),r.l=!0,r.exports}a.m=e,a.c=t,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(n,r,function(t){return e[t]}.bind(null,r));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="",a(a.s=1)}([function(e,t,a){},function(e,t,a){"use strict";a.r(t);const n=e=>{if(!e)throw new Error("uri is empty");if("string"!=typeof e)throw new TypeError("URI must be a string");let t=e.length;return"/"==e[t-1]&&(e=e.slice(0,t-1)),e};var r={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"};var o=e=>({method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)});a(0);const i=e=>{e.preventDefault();let t=document.getElementById("username").value;o(e,t,"username");let a=document.getElementById("password").value;fetch(r.loginUser,o({username:t,password:a})).then(e=>{e.ok?alert("success"):e.json().then(e=>alert("error: "+e.error))})};var s=async function(){let e=document.getElementById("username"),t={val:e.value},a=await fetch(r.usernameExists,o(t));if(a.ok){let t=await a.json();return t.exists&&(e.className+=" form__in-field--warn",alert("Username taken")),t.exists}{let e=await a.json();alert("error: "+e.error)}return!1};const l=async e=>{e.preventDefault();let t=document.getElementById("username").value;o(e,t,"username");let a=document.getElementById("password").value;if(a!=document.getElementById("password-check").value)return alert("passwords don't match, check again!");let n=document.getElementById("email").value;o(e,n,"email");let i=await checkUsernameExists();if(i)return;if(i=await(async()=>{let e=document.getElementById("email"),t={val:e.value},a=await fetch(r.emailExists,o(t));if(a.ok){let t=await a.json();return t.exists&&(e.className+=" form__in-field--warn",alert("Email taken")),t.exists}{let e=await a.json();alert("error: "+e.error)}})(),i)return;let s={username:t,password:a,email:n},l=await fetch(r.registerUser,o(s));if(l.ok)alert("success");else{let e=await l.json();alert("error: "+e.error)}},u=()=>{},c=new class{constructor(){this.routes=[]}register(e,t){if(!e)throw new Error("uri is empty");if(!t)throw new Error("fn is empty");if("string"!=typeof e)throw new TypeError("URI must be a string");if("function"!=typeof t)throw new TypeError("a callback fn must be provided");this.routes.forEach(t=>{if(t.uri==e)throw new Error(`URI exists. provided URI: ${e}, registered config: ${t}`)});const a={uri:e=n(e),fn:t};this.routes.push(a)}route(){this.routes.forEach(e=>{let t=new RegExp(`^${e.uri}$`),a=window.location.pathname;if(a=n(a),a.match(t))return e.fn.call()})}};c.register("/",()=>{document.getElementById("form").addEventListener("submit",i,!0)}),c.register("/register",()=>{document.getElementById("form").addEventListener("submit",l,!0),document.getElementById("username").addEventListener("input",s,!1)}),c.register("/panel/",u),c.register("/panel/layout.html/",u),c.route()}]);

static/img/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>

static/img/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>

static/img/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>

static/img/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>

static/img/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>

static/img/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>

static/img/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>

static/img/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>

static/img/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>

static/img/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>

static/img/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>

static/img/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>

static/img/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>

static/img/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>

static/img/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>

static/img/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>

static/img/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>

static/img/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>

static/img/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>

static/img/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>

static/img/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>

static/img/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>

static/img/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>

templates/_reset.scss

@@ -0,0 +1,4 @@
+* {
+  padding: 0;
+  margin: 0;
+}

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;

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);
+}

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"); .>

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);
+};

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};

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"); .>

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);
+}

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;

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>

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>

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();

templates/main.scss

@@ -0,0 +1,2 @@
+@use './auth/forms';
+@use './panel/main';

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>

templates/panel/header/index.html

@@ -0,0 +1,3 @@
+<header>
+  <. include!("./sidebar/index.html"); .>
+</header>

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 -->

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>

templates/panel/index.html

@@ -3,188 +3,22 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<title>Dashboard</title>
+	<title><.= TITLE .></title>
   </head>
   <body>
 
-	  <header>
-  <nav class="secondary-menu">
-  <ul>
-    <li class="secondary-menu__heading">
-      <img class="secondary-menu__logo" src="./prod/img/icon-trans.7920418313D84DCDB2491E02E52E4BEF374970C216E85BD721274EE51241ECD4.png" 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="./prod/img/svg/home.28C26C2D3E4013D24D755A589A80D8DD5C49DA5397032E3F09B76BC3A2C314ED.svg" 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="./prod/img/svg/key.F0AACBED8D0F7A279977392F92F4DA73C35E905AC73B3C83320D54856E627EEC.svg" 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="./prod/img/svg/settings.910C6241743C9C694141971BE8E1C4016A1A5BF203E4E9D676D4CE93BD518F4C.svg" 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="./prod/img/svg/credit-card.DF612AFE367A7B31410F2F6CD3C7B515B0F1889C0107EA695D840DFFA492E07D.svg" 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="./prod/img/svg/help-circle.BE230ABD2E05EB05EF6C5B7D04D35A3A43637EF1E046DEF3D244425609B99F81.svg" 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="./prod/img/svg/message-square.E246A6B2AAEFCE8A62B9BDD2D155D3B4923C3E48325EAEF099D509A2D7BB4DD1.svg"
-          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="./prod/img/svg/file-text.CF57DF252051E7E81C240D36AF1DB8A9DDAF282F9A5E8C338408FE88A6545A02.svg" 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="./prod/img/svg/github.FA9EB1C66F548EC2C7598B94BA6A17275E1EA383D42B6C83351A2388C773E621.svg" alt="" />
-        <div class="secondary-menu__item-name">
-          Source Code
-        </div>
-      </a>
-    </li>
-  </ul>
-</nav>
-<!-- Nav/Side/Secondary bar -->
-</header>
+	  <. include!("./header/index.html"); .>
 
     <main>
 
-		<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>
+		<. include!("./taskbar/index.html"); .>
 
-  <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>
-
-		<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>
+		<. include!("./help-banner/index.html"); .>
       <!-- Main content container -->
       <div class="inner-container">
         <!-- Main menu/ important actions roaster -->
 
-		<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>
+		<. include!("./add-site-key/index.html"); .>
       </div>
       <!-- end of container -->
     </main>
@@ -519,4 +353,4 @@
       width: 90%;
     }
   </style>
-</html>
+</html>

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;
+};

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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();
+      }
+    });
+  }
+}

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;

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;

webpack.common.js

@@ -0,0 +1,23 @@
+module.exports = {
+  entry: {
+    main: './templates/index.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.html$/,
+        use: ['html-loader'],
+      },
+      {
+        test: /\.(svg|png|jpg|gif)$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: '[name].[hash].[ext]',
+            outputPath: 'imgs',
+          },
+        },
+      },
+    ],
+  },
+};

webpack.dev.js

@@ -0,0 +1,42 @@
+const path = require('path');
+const common = require('./webpack.common');
+const merge = require('webpack-merge');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = merge(common, {
+  mode: 'development',
+  output: {
+    filename: '[name].bundle.js',
+    path: path.resolve(__dirname, 'static'),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [
+          'style-loader', //3. Inject styles into DOM
+          'css-loader', //2. Turns css into commonjs
+          'sass-loader', //1. Turns sass into css
+        ],
+      },
+    ],
+  },
+});
+
+/*
+ *  plugins: [
+    new HtmlWebpackPlugin({
+      filename: 'register/index.html',
+      template: path.resolve(__dirname, 'output/register/', 'index.html'),
+    }),
+
+    new HtmlWebpackPlugin({
+      filename: 'panel/index.html',
+      template: path.resolve(__dirname, 'output/panel/', 'index.html'),
+    }),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, 'output/', 'index.html'),
+    }),
+  ],
+
+*/

webpack.prod.js

@@ -0,0 +1,68 @@
+const path = require('path');
+const common = require('./webpack.common');
+const merge = require('webpack-merge');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = merge(common, {
+  mode: 'production',
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, 'static/bundle'),
+  },
+  optimization: {
+    minimizer: [
+      new OptimizeCssAssetsPlugin(),
+      new TerserPlugin(),
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({filename: '[name].css'}),
+    new CleanWebpackPlugin(),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: [
+          MiniCssExtractPlugin.loader, //3. Extract css into files
+          'css-loader', //2. Turns css into commonjs
+          'sass-loader', //1. Turns sass into css
+        ],
+      },
+    ],
+  },
+});
+
+/*
+ *       new HtmlWebpackPlugin({
+        template: path.resolve(__dirname, 'output', 'index.html'),
+        minify: {
+          removeAttributeQuotes: true,
+          collapseWhitespace: true,
+          removeComments: true,
+        },
+      }),
+      new HtmlWebpackPlugin({
+        filename: 'register/index.html', // output filename
+        template: path.resolve(__dirname, 'output/register/', 'index.html'),
+        minify: {
+          removeAttributeQuotes: true,
+          collapseWhitespace: true,
+          removeComments: true,
+        },
+      }),
+      new HtmlWebpackPlugin({
+        filename: 'panel/index.html',
+        template: './output/panel/index.html',
+        minify: {
+          removeAttributeQuotes: true,
+          collapseWhitespace: true,
+          removeComments: true,
+        }
+      }),
+
+*/