diff --git a/frontend/templates/auth/login/index.html b/frontend/templates/auth/login/index.html index efd4dcc2..578fb6c2 100644 --- a/frontend/templates/auth/login/index.html +++ b/frontend/templates/auth/login/index.html @@ -1,30 +1,46 @@ <. include!("../../components/headers.html"); .> -
- -

Sign in to mCaptcha

+
+ +

Sign in to mCaptcha

-
- + + - - -
-
-

- New to mCaptcha? - Create account -

-
-
+ + + +
+

+ New to mCaptcha? + Create account +

+
+
<. include!("../../components/footers.html"); .> diff --git a/frontend/templates/auth/login/index.js b/frontend/templates/auth/login/index.js index 6ab771bd..5d5b557e 100644 --- a/frontend/templates/auth/login/index.js +++ b/frontend/templates/auth/login/index.js @@ -3,6 +3,8 @@ 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; @@ -23,4 +25,7 @@ const login = e => { }); }; -export default login; +export const index = () => { + let form = document.getElementById('form'); + form.addEventListener('submit', login, true); +}; diff --git a/frontend/templates/auth/register/index.js b/frontend/templates/auth/register/index.js index 8f21aecc..ab2a3779 100644 --- a/frontend/templates/auth/register/index.js +++ b/frontend/templates/auth/register/index.js @@ -3,9 +3,11 @@ import ROUTES from '../../api/v1/routes'; import isBlankString from '../../utils/genJsonPayload'; import genJsonPayload from '../../utils/genJsonPayload'; -import {checkUsernameExists} from './userExists'; +import userExists from './userExists'; import {checkEmailExists} from './emailExists'; +import '../forms.scss'; + const registerUser = async e => { e.preventDefault(); @@ -46,10 +48,12 @@ const registerUser = async e => { } }; -let form = document.getElementById('form'); -form.addEventListener('submit', registerUser, true); +const index = () => { + let form = document.getElementById('form'); + form.addEventListener('submit', registerUser, true); -let username = document.getElementById('username'); -username.addEventListener('input', checkUsernameEventHandler, false); + let username = document.getElementById('username'); + username.addEventListener('input', userExists, false); +} -export default registerUser; +export default index; diff --git a/frontend/templates/auth/register/userExists.js b/frontend/templates/auth/register/userExists.js index ba05b7fa..ba2277dd 100644 --- a/frontend/templates/auth/register/userExists.js +++ b/frontend/templates/auth/register/userExists.js @@ -3,12 +3,8 @@ import ROUTES from '../../api/v1/routes'; import genJsonPayload from '../../utils/genJsonPayload'; -const checkUsernameEventHandler = _e => { - checkUsernameExists(); -}; - //export const checkUsernameExists = async () => { -async function checkUsernameExists() { +async function userExists() { let username = document.getElementById('username'); let val = username.value; let payload = { @@ -45,4 +41,4 @@ async function checkUsernameExists() { return false; }; -export {checkUsernameExists, checkUsernameEventHandler}; +export default userExists; diff --git a/frontend/templates/components/headers.html b/frontend/templates/components/headers.html index 624cf4c8..e45ef921 100644 --- a/frontend/templates/components/headers.html +++ b/frontend/templates/components/headers.html @@ -1,7 +1,7 @@ - - - -<.= title .>|<.= name .> + + + + + <.= title .>|<.= name .> - diff --git a/frontend/templates/index.js b/frontend/templates/index.js index bd23d3ac..6fe87879 100644 --- a/frontend/templates/index.js +++ b/frontend/templates/index.js @@ -1,20 +1,17 @@ -import './auth/forms.scss'; - -import signin from './auth/login'; -import registerUser from './auth/register'; -import {run as runPanel} from './panel/index'; -import {checkUsernameEventHandler} from './auth/register/userExists'; +import * as login from './auth/login'; +import * as register from './auth/register'; +import * as panel from './panel/index'; 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); + login.index(); +} else if (window.location.pathname == '/register') { + register.index(); +// let form = document.getElementById('form'); +// form.addEventListener('submit', registerUser, true); +// let username = document.getElementById('username'); +// username.addEventListener('input', checkUsernameEventHandler, false); } else if (window.location.pathname.includes('panel')) { - runPanel(); + panel.index(); } else { } diff --git a/frontend/templates/main.scss b/frontend/templates/main.scss new file mode 100644 index 00000000..85130aa5 --- /dev/null +++ b/frontend/templates/main.scss @@ -0,0 +1,2 @@ +@use './auth/forms'; +@use './panel/main'; diff --git a/frontend/templates/panel/index.html b/frontend/templates/panel/index.html index 807b520b..261bf0ca 100644 --- a/frontend/templates/panel/index.html +++ b/frontend/templates/panel/index.html @@ -1,6 +1,4 @@ -<. include!("../components/headers.html"); .> <.# include!("svg.html"); .> -<. include!("style.html"); .> -<. include!("nav/index.html"); .> +<. include!("../components/headers.html"); .> <. include!("nav/index.html"); .>
@@ -13,7 +11,7 @@
- Hello admin + Hello Batman
1 @@ -30,19 +28,12 @@
-
+
+ + +
+
-
<. include!("../components/footers.html"); .> diff --git a/frontend/templates/panel/index.js b/frontend/templates/panel/index.js index 62a45420..9068b621 100644 --- a/frontend/templates/panel/index.js +++ b/frontend/templates/panel/index.js @@ -1,67 +1,72 @@ -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'; +import './main.scss'; +import './nav/main.scss'; - /*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'); - } - }); +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; }; diff --git a/frontend/templates/panel/layout.html b/frontend/templates/panel/layout.html new file mode 100644 index 00000000..7eaf4934 --- /dev/null +++ b/frontend/templates/panel/layout.html @@ -0,0 +1,395 @@ + + + + + + Document + + +
+ + +
+ + +
+ + + + + + + +
+ + +
+
+ Add Site Key +
+
+ +
+ + +
+ + +
+ + + +
+ +
+ +
+ + + + +
+ +
+
+ +
+ + + diff --git a/frontend/templates/panel/main.scss b/frontend/templates/panel/main.scss index e67163e5..260c57b6 100644 --- a/frontend/templates/panel/main.scss +++ b/frontend/templates/panel/main.scss @@ -1,3 +1,5 @@ +@use './vars'; + /* +--> diff --git a/frontend/templates/panel/vars.scss b/frontend/templates/panel/vars.scss new file mode 100644 index 00000000..e9617734 --- /dev/null +++ b/frontend/templates/panel/vars.scss @@ -0,0 +1,4 @@ +$page-content-blockColor: #fff; +$border-radius: 4px; +$black: #333; +$white: #fff; diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js index 96d5356f..d7965f92 100644 --- a/frontend/webpack.common.js +++ b/frontend/webpack.common.js @@ -1,5 +1,3 @@ -const path = require('path'); - module.exports = { entry: { main: './templates/index.js', diff --git a/frontend/webpack.dev.js b/frontend/webpack.dev.js index 3f8836a1..799c9600 100644 --- a/frontend/webpack.dev.js +++ b/frontend/webpack.dev.js @@ -10,17 +10,17 @@ module.exports = merge(common, { path: path.resolve(__dirname, 'dist'), }, plugins: [ - new HtmlWebpackPlugin({ - template: './output/index.html', - }), new HtmlWebpackPlugin({ filename: 'register/index.html', - template: './output/register/index.html', + template: path.resolve(__dirname, 'output/register/', 'index.html'), }), new HtmlWebpackPlugin({ filename: 'panel/index.html', - template: './output/panel/index.html', + template: path.resolve(__dirname, 'output/panel/', 'index.html'), + }), + new HtmlWebpackPlugin({ + template: path.resolve(__dirname, 'output/', 'index.html'), }), ], module: { diff --git a/frontend/webpack.prod.js b/frontend/webpack.prod.js index c30d324c..0ff4ac37 100644 --- a/frontend/webpack.prod.js +++ b/frontend/webpack.prod.js @@ -37,6 +37,11 @@ module.exports = merge(common, { new HtmlWebpackPlugin({ filename: 'panel/index.html', template: './output/panel/index.html', + minify: { + removeAttributeQuotes: true, + collapseWhitespace: true, + removeComments: true, + } }), ], },