cache busting

This commit is contained in:
realaravinth 2021-04-09 13:21:50 +05:30
parent d7b1a9f29b
commit c4255397b1
No known key found for this signature in database
GPG key ID: AD9F0F08E855ED88
60 changed files with 873 additions and 716 deletions

92
Cargo.lock generated
View file

@ -661,6 +661,21 @@ dependencies = [
"bytes 1.0.1",
]
[[package]]
name = "cache-buster"
version = "0.1.0"
source = "git+https://github.com/realaravinth/cache-buster#b7336fc0b15aa98368dfb9a313ea01bef1711859"
dependencies = [
"data-encoding",
"derive_builder 0.10.0",
"mime",
"mime_guess",
"serde 1.0.125",
"serde_json",
"sha2",
"walkdir",
]
[[package]]
name = "cargo-platform"
version = "0.1.1"
@ -880,12 +895,12 @@ dependencies = [
[[package]]
name = "darling"
version = "0.12.2"
version = "0.12.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "a06d4a9551359071d1890820e3571252b91229e0712e7c36b08940e603c5a8fc"
checksum = "e9d6ddad5866bb2170686ed03f6839d31a76e5407d80b1c334a2c24618543ffa"
dependencies = [
"darling_core 0.12.2",
"darling_macro 0.12.2",
"darling_core 0.12.3",
"darling_macro 0.12.3",
]
[[package]]
@ -904,9 +919,9 @@ dependencies = [
[[package]]
name = "darling_core"
version = "0.12.2"
version = "0.12.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "b443e5fb0ddd56e0c9bfa47dc060c5306ee500cb731f2b91432dd65589a77684"
checksum = "a9ced1fd13dc386d5a8315899de465708cf34ee2a6d9394654515214e67bb846"
dependencies = [
"fnv",
"ident_case",
@ -929,15 +944,21 @@ dependencies = [
[[package]]
name = "darling_macro"
version = "0.12.2"
version = "0.12.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "c0220073ce504f12a70efc4e7cdaea9e9b1b324872e7ad96a208056d7a638b81"
checksum = "0a7a1445d54b2f9792e3b31a3e715feabbace393f38dc4ffd49d94ee9bc487d5"
dependencies = [
"darling_core 0.12.2",
"darling_core 0.12.3",
"quote",
"syn",
]
[[package]]
name = "data-encoding"
version = "2.3.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "3ee2393c4a91429dffb4bedf19f4d6abf27d8a732c8ce4980305d782e5426d57"
[[package]]
name = "derive_builder"
version = "0.9.0"
@ -979,7 +1000,7 @@ version = "0.10.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "3150f1e84602847b99d3eeb702487fc364f7d6c94f634e944a68fdbaea09e457"
dependencies = [
"darling 0.12.2",
"darling 0.12.3",
"proc-macro2",
"quote",
"syn",
@ -1118,10 +1139,13 @@ dependencies = [
name = "frontend"
version = "0.1.0"
dependencies = [
"cache-buster",
"lazy_static",
"log",
"mime",
"pretty_env_logger",
"sailfish",
"sha2",
"tokio 1.4.0",
]
@ -1450,9 +1474,9 @@ dependencies = [
[[package]]
name = "http"
version = "0.2.3"
version = "0.2.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "7245cd7449cc792608c3c8a9eaf69bd4eabbabf802713748fd739c98b82f0747"
checksum = "527e8c9ac747e28542699a951517aa9a6945af506cd1f2e1b53a576c17b6cc11"
dependencies = [
"bytes 1.0.1",
"fnv",
@ -1461,9 +1485,9 @@ dependencies = [
[[package]]
name = "httparse"
version = "1.3.5"
version = "1.3.6"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "615caabe2c3160b313d52ccc905335f4ed5f10881dd63dc5699d47e90be85691"
checksum = "bc35c995b9d93ec174cf9a27d425c7892722101e14993cd227fdb51d70cf9589"
[[package]]
name = "humantime"
@ -1595,9 +1619,9 @@ dependencies = [
[[package]]
name = "libc"
version = "0.2.92"
version = "0.2.93"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "56d855069fafbb9b344c0f962150cd2c1187975cb1c22c1522c240d8c4986714"
checksum = "9385f66bf6105b241aa65a61cb923ef20efc665cb9f9bb50ac2f0c4b7f378d41"
[[package]]
name = "linked-hash-map"
@ -1607,9 +1631,9 @@ checksum = "7fb9b38af92608140b86b693604b9ffcc5824240a484d1ecd4795bacb2fe88f3"
[[package]]
name = "lock_api"
version = "0.4.2"
version = "0.4.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "dd96ffd135b2fd7b973ac026d28085defbe8983df057ced3eb4f2130b0831312"
checksum = "5a3c91c24eae6777794bb1997ad98bbb87daf92890acab859f7eaa4320333176"
dependencies = [
"scopeguard",
]
@ -2099,9 +2123,9 @@ checksum = "bc881b2c22681370c6a780e47af9840ef841837bc98118431d4e1868bd0c1086"
[[package]]
name = "proc-macro2"
version = "1.0.24"
version = "1.0.26"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "1e0704ee1a7e00d7bb417d0770ea303c1bccbabf0ef1667dae92b5967f5f8a71"
checksum = "a152013215dca273577e18d2bf00fa862b89b24169fb78c4c95aeb07992c9cec"
dependencies = [
"unicode-xid",
]
@ -2350,9 +2374,9 @@ checksum = "71d301d4193d031abdd79ff7e3dd721168a9572ef3fe51a1517aba235bd8f86e"
[[package]]
name = "sailfish"
version = "0.3.2"
version = "0.3.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "a5ef143e1c551a0eee1d1c4a1faf45558749750826db1eab212babbe08e4a7b8"
checksum = "816920a08514d9741242b3efe70c16c350ed548bc4a5ba03426e56faf9d45f77"
dependencies = [
"itoap",
"ryu",
@ -2362,9 +2386,9 @@ dependencies = [
[[package]]
name = "sailfish-compiler"
version = "0.3.2"
version = "0.3.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "b823601d78663c108d4425fea46ee63e1622144eadbcf0eeb9c279c1be681cd9"
checksum = "4276e7b848bde8e7813d534f014bc35ce5acd2b9e2b6b075727113fcf478ba63"
dependencies = [
"filetime",
"home",
@ -2377,9 +2401,9 @@ dependencies = [
[[package]]
name = "sailfish-macros"
version = "0.3.2"
version = "0.3.3"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "90b31a6c9be3d1bd5fa41a6d5c274ba3c7d1ebb1d0e0b6381e60cc70725e9e10"
checksum = "6bba2458ef07ae12c9aed2edb866c3db2f9c21cf19a2c3f2613b2982bc1a4a46"
dependencies = [
"proc-macro2",
"sailfish-compiler",
@ -2815,9 +2839,9 @@ checksum = "1e81da0851ada1f3e9d4312c704aa4f8806f0f9d69faaf8df2f3464b4a9437c2"
[[package]]
name = "syn"
version = "1.0.67"
version = "1.0.69"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "6498a9efc342871f91cc2d0d694c674368b4ceb40f62b65a7a08c3792935e702"
checksum = "48fe99c6bd8b1cc636890bcc071842de909d902c81ac7dab53ba33c421ab8ffb"
dependencies = [
"proc-macro2",
"quote",
@ -2929,9 +2953,9 @@ dependencies = [
[[package]]
name = "tinyvec"
version = "1.1.1"
version = "1.2.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "317cca572a0e89c3ce0ca1f1bdc9369547fe318a683418e42ac8f59d14701023"
checksum = "5b5220f05bb7de7f3f53c7c065e1199b3172696fe2db9f9c4d8ad9b4ee74c342"
dependencies = [
"tinyvec_macros",
]
@ -3128,9 +3152,9 @@ dependencies = [
[[package]]
name = "unicode-bidi"
version = "0.3.4"
version = "0.3.5"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "49f2bd0c6468a8230e1db229cff8029217cf623c767ea5d60bfbd42729ea54d5"
checksum = "eeb8be209bb1c96b7c177c7420d26e04eccacb0eeae6b980e35fcb74678107e0"
dependencies = [
"matches",
]
@ -3387,9 +3411,9 @@ dependencies = [
[[package]]
name = "whoami"
version = "1.1.1"
version = "1.1.2"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "1e296f550993cba2c5c3eba5da0fb335562b2fa3d97b7a8ac9dc91f40a3abc70"
checksum = "4abacf325c958dfeaf1046931d37f2a901b6dfe0968ee965a29e94c6766b2af6"
dependencies = [
"wasm-bindgen",
"web-sys",

View file

@ -3,14 +3,22 @@ name = "frontend"
version = "0.1.0"
authors = ["realaravinth <realaravinth@batsense.net>"]
edition = "2018"
build = "build.rs"
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
sailfish = { version = "0.3.2", features = ["derive"]}
tokio = { version = "1.4.0", features = [ "rt-multi-thread", "macros", "fs", "test-util" ]}
cache-buster = { version = "0.1", git = "https://github.com/realaravinth/cache-buster" }
pretty_env_logger = "0.4"
log = "0.4"
lazy_static = "1.4"
sha2 = "0.9.3"
[build-dependencies]
cache-buster = { version = "0.1", git = "https://github.com/realaravinth/cache-buster" }
mime = "0.3.16"

39
frontend/build.rs Normal file
View file

@ -0,0 +1,39 @@
/*
* Copyright (C) 2021 Aravinth Manivannan <realaravinth@batsense.net>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
use cache_buster::BusterBuilder;
fn main() {
let types = vec![
mime::IMAGE_PNG,
mime::IMAGE_SVG,
mime::IMAGE_JPEG,
mime::IMAGE_GIF,
];
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();
}

BIN
frontend/main Executable file

Binary file not shown.

33
frontend/main.rs Normal file
View file

@ -0,0 +1,33 @@
/*
* Copyright (C) 2021 Aravinth Manivannan <realaravinth@batsense.net>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
fn main() {
// note: add error checking yourself.
// println!("cargo:rustc-env=GIT_HASH={}", git_hash);
read_files("./dist");
}
fn read_files(path: &str) {
use std::fs;
for entry in fs::read_dir(path).unwrap() {
let entry = entry.unwrap();
if entry.path().is_file() {
println!("{:?}", entry.file_type());
}
}
}

View file

@ -8,7 +8,7 @@
"license": "AGPLv3 or above",
"scripts": {
"start": "find . | entr yarn build-dev",
"build-dev": "cargo run && webpack --config webpack.dev.js",
"build-dev": "webpack --config webpack.dev.js",
"build-fast-dev": "cargo run && webpack-dev-server --config webpack.dev.js",
"build-check": "webpack-dev-server --config webpack.dev.js",
"build": "cargo run && webpack --config webpack.prod.js"

53
frontend/prod/index.html Normal file
View file

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

View file

@ -0,0 +1,522 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dashboard</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>
<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>
<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>
<!-- 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>
</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>

View file

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

View file

@ -1,3 +1,5 @@
use cache_buster::Files;
use lazy_static::lazy_static;
use log::{debug, info};
use sailfish::TemplateOnce;
use tokio::fs;
@ -32,7 +34,11 @@ impl IndexPage {
}
}
const BASE_DIR: &str = "./output";
const BASE_DIR: &str = "./prod";
lazy_static! {
pub static ref FILES: Files = Files::load();
}
#[tokio::main]
async fn main() {

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 455 KiB

View file

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

After

Width:  |  Height:  |  Size: 321 B

View file

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

After

Width:  |  Height:  |  Size: 329 B

View file

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

After

Width:  |  Height:  |  Size: 460 B

View file

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

After

Width:  |  Height:  |  Size: 316 B

View file

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

After

Width:  |  Height:  |  Size: 473 B

View file

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

After

Width:  |  Height:  |  Size: 337 B

View file

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

After

Width:  |  Height:  |  Size: 290 B

View file

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

After

Width:  |  Height:  |  Size: 528 B

View file

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

After

Width:  |  Height:  |  Size: 409 B

View file

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

After

Width:  |  Height:  |  Size: 365 B

View file

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

After

Width:  |  Height:  |  Size: 332 B

View file

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

After

Width:  |  Height:  |  Size: 352 B

View file

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

After

Width:  |  Height:  |  Size: 367 B

View file

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

After

Width:  |  Height:  |  Size: 346 B

View file

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

After

Width:  |  Height:  |  Size: 305 B

View file

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

After

Width:  |  Height:  |  Size: 281 B

View file

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

After

Width:  |  Height:  |  Size: 1,011 B

View file

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

After

Width:  |  Height:  |  Size: 405 B

View file

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

After

Width:  |  Height:  |  Size: 279 B

View file

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

After

Width:  |  Height:  |  Size: 355 B

View file

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

After

Width:  |  Height:  |  Size: 323 B

View file

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

After

Width:  |  Height:  |  Size: 325 B

View file

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

After

Width:  |  Height:  |  Size: 313 B

View file

@ -1,47 +0,0 @@
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;

View file

@ -1,43 +0,0 @@
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};

View file

@ -1,49 +0,0 @@
import ROUTES from '../api/v1/routes';
import isBlankString from '../utils/isBlankString';
import genJsonPayload from '../utils/genJsonPayload';
import {checkUsernameExists} from './userExists';
import {checkEmailExists} from './emailExists';
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 default registerUser;

View file

@ -1,26 +0,0 @@
import isBlankString from '../utils/isBlankString';
import genJsonPayload from '../utils/genJsonPayload';
import ROUTES from '../api/v1/routes';
const signin = 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 default signin;

View file

@ -1,47 +0,0 @@
import ROUTES from '../api/v1/routes';
import genJsonPayload from '../utils/genJsonPayload';
const checkUsernameEventHandler = _e => {
checkUsernameExists();
};
//export const checkUsernameExists = async () => {
async function checkUsernameExists() {
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 {checkUsernameExists, checkUsernameEventHandler};

View file

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

View file

@ -1,101 +0,0 @@
@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);
}

View file

@ -1,147 +0,0 @@
/*
<style>
/* RESET RULES
*/
:root {
--page-header-bgColor: #242e42;
--page-header-bgColor-hover: #1d2636;
--page-header-txtColor: #dde9f8;
--page-header-headingColor: #7889a4;
--page-header-width: 220px;
--page-content-bgColor: #f0f1f6;
--page-content-txtColor: #171616;
--page-content-blockColor: #fff;
--white: #fff;
--black: #333;
--blue: #00b9eb;
--red: #ec1848;
--border-radius: 4px;
--box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.075);
--switch-bgLightModeColor: #87cefa;
--switch-sunColor: gold;
--switch-moonColor: #f4f4f4;
--switch-bgDarkModeColor: #1f1f27;
}
$nav-width: 220px;
$nav-txt-color: #dde9f8;
$nav-bg-color: #242e42;
$page-content-blockColor: #fff;
$border-radius: 4px;
$black: #333;
$white: #fff;
/* HEADER STYLES
*/
.nav-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
padding-top: 20px;
width: $nav-width;
color: $nav-txt-color;
background: $nav-bg-color;
}
.nav {
display: flex;
flex-direction: column;
min-height: 100%;
}
.nav__home-btn {
display: block;
margin: 0 15px;
}
.nav__logo {
max-width: 120px;
fill: $white;
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(298deg)
brightness(104%) contrast(101%);
}
.nav__show-menu {
display: none;
margin-left: 5px;
padding: 4px;
background: $page-content-blockColor;
border-radius: $border-radius;
}
.nav__show-menu-icon {
fill: $black;
transition: transform 0.2s;
}
.nav-menu {
display: flex;
flex-direction: column;
flex-grow: 1;
margin-top: 35px;
}
.page-header .admin-menu li:nth-last-child(2) {
margin-bottom: 35px;
}
.page-header .admin-menu li:last-child {
margin-top: auto;
margin-bottom: 20px;
}
.page-header .admin-menu li > * {
width: 100%;
padding: 12px 15px;
}
.page-header .admin-menu .switcher {
display: inline-block;
width: auto;
}
.page-header .admin-menu .menu-heading h3 {
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 12px;
margin-top: 12px;
color: var(--page-header-headingColor);
}
.page-header .admin-menu svg {
width: 20px;
height: 20px;
fill: var(--page-header-txtColor);
margin-right: 10px;
}
.page-header .admin-menu a,
.page-header .admin-menu button {
display: flex;
align-items: center;
font-size: 0.9rem;
}
.page-header .admin-menu a:hover,
.page-header .admin-menu a:focus,
.page-header .admin-menu button:hover,
.page-header .admin-menu button:focus {
background: var(--page-header-bgColor-hover);
color: var(--blue);
outline: none;
}
.page-header .admin-menu a:hover svg,
.page-header .admin-menu a:focus svg,
.page-header .admin-menu button:hover svg,
.page-header .admin-menu button:focus svg {
fill: var(--blue);
}
*/

View file

@ -1,21 +0,0 @@
import './css/forms.scss';
import signin from './auth/signin';
import registerUser from './auth/register';
import {run as runPanel} from './panel/index';
import {checkUsernameEventHandler} from './auth/userExists';
if (window.location.pathname == '/') {
let form = document.getElementById('form');
form.addEventListener('submit', signin, true);
} else if (window.location.pathname == '/signup') {
let form = document.getElementById('form');
form.addEventListener('submit', registerUser, true);
let username = document.getElementById('username');
username.addEventListener('input', checkUsernameEventHandler, false);
} else if (window.location.pathname.includes('panel')) {
runPanel();
} else {
}
//export default signin;

View file

@ -1,67 +0,0 @@
export const run = () => {
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');
}
});
};

View file

@ -1,8 +0,0 @@
import './css/forms.scss';
import registerUser from './auth/register';
let form = document.getElementById('form');
form.addEventListener('submit', registerUser, true);
let username = document.getElementById('username');
username.addEventListener('input', checkUsernameEventHandler, false);

View file

@ -1,12 +0,0 @@
const genJsonPayload = payload => {
let value = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(payload),
};
return value;
};
export default genJsonPayload;

View file

@ -1,8 +0,0 @@
const isBlankString = (event, value, field) => {
if (!value.replace(/\s/g, '').length) {
event.preventDefault();
alert(`${field} can't be empty`);
}
};
export default isBlankString;

View file

@ -1,6 +1,6 @@
<. include!("../../components/headers.html"); .>
<div class="form-container">
<img src="../static/img/icon-trans.png" class="form__logo" alt="" />
<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">

View file

@ -1,6 +1,6 @@
<. include!("../../components/headers.html"); .>
<div class="form-container">
<img src="/static/img/icon-trans.png" class="form__logo" alt="" />
<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">

View file

@ -1,7 +1,7 @@
<nav class="secondary-menu">
<ul>
<li class="secondary-menu__heading">
<img class="secondary-menu__logo" src="./icon-trans.png" alt="Logo" />
<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>
@ -12,7 +12,7 @@
-->
<li class="secondary-menu__item">
<a class="secondary-menu__item-link" href="">
<img class="secondary-menu__icon" src="./svg/home.svg" alt="" />
<img class="secondary-menu__icon" src="<.= crate::FILES.get("./static/img/svg/home.svg").unwrap() .>" alt="" />
<div class="secondary-menu__item-name">
Overview
</div>
@ -20,19 +20,16 @@
</li>
<li class="secondary-menu__item">
<a class="secondary-menu__item-link" href="">
<img class="secondary-menu__icon" src="./svg/key.svg" alt="" />
<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="main-menu__item--spacer"></li>
-->
<li class="secondary-menu__item">
<a class="secondary-menu__item-link" href="">
<img class="secondary-menu__icon" src="./svg/settings.svg" alt="" />
<img class="secondary-menu__icon" src="<.= crate::FILES.get("./static/img/svg/settings.svg").unwrap() .>" alt="" />
<div class="secondary-menu__item-name">
Settings
</div>
@ -40,7 +37,7 @@
</li>
<li class="secondary-menu__item">
<a class="secondary-menu__item-link" href="">
<img class="secondary-menu__icon" src="./svg/credit-card.svg" alt="" />
<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>
@ -48,7 +45,7 @@
</li>
<li class="secondary-menu__item">
<a class="secondary-menu__item-link" href="">
<img class="secondary-menu__icon" src="./svg/help-circle.svg" alt="" />
<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>
@ -58,7 +55,7 @@
<a class="secondary-menu__item-link" href="">
<img
class="secondary-menu__icon"
src="./svg/message-square.svg"
src="<.= crate::FILES.get("./static/img/svg/message-square.svg").unwrap() .>"
alt=""
/>
@ -69,7 +66,7 @@
</li>
<li class="secondary-menu__item">
<a class="secondary-menu__item-link" href="">
<img class="secondary-menu__icon" src="./svg/file-text.svg" alt="" />
<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>
@ -77,7 +74,8 @@
</li>
<li class="secondary-menu__item">
<a class="secondary-menu__item-link" href="">
<img class="secondary-menu__icon" src="./svg/github.svg" alt="" />
<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>

View file

@ -1,5 +1,7 @@
/*
import './main.scss';
import './nav/main.scss';
*/
export const index = () => {
// const html = document.documentElement;

View file

@ -7,22 +7,8 @@ module.exports = merge(common, {
mode: 'development',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
path: path.resolve(__dirname, 'static'),
},
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'),
}),
],
module: {
rules: [
{
@ -36,3 +22,21 @@ module.exports = merge(common, {
],
},
});
/*
* 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'),
}),
],
*/

View file

@ -17,7 +17,28 @@ module.exports = merge(common, {
minimizer: [
new OptimizeCssAssetsPlugin(),
new TerserPlugin(),
new HtmlWebpackPlugin({
],
},
plugins: [
new MiniCssExtractPlugin({filename: '[name].[contentHash].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,
@ -43,22 +64,5 @@ module.exports = merge(common, {
removeComments: true,
}
}),
],
},
plugins: [
new MiniCssExtractPlugin({filename: '[name].[contentHash].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
],
},
],
},
});
*/

View file

@ -1,4 +0,0 @@
</body>
<script src="/index.js"></script>
<link rel="stylesheet" href="main.css" />
</html>

View file

@ -1,41 +0,0 @@
<. include!("./top.html"); .>
<title>Sign in | mCaptcha</title>
<img src="./img/icon-trans.png" class="form__logo" alt="" />
<h2 class="form__brand">Sign in to mCaptcha</h2>
<div class="form-container">
<form class="form__box">
<label class="form__in-group" for="username"
>Username
<input
class="form__in-field"
type="text"
name="username"
id="username"
required
/>
</label>
<label for="password" class="form__in-group"
>Password
<input
class="form__in-field"
type="password"
name="password"
id="password"
required
/>
<a class="form__pw-recovery" -href="/forgot/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="/" class="form__secondary-action__link">Create account</a>
</p>
</div>
</div>
<. include!("./bottom.html"); .>

View file

@ -1,6 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />