diff --git a/src/api/v1/auth.rs b/src/api/v1/auth.rs index 81387dcf..e73cad72 100644 --- a/src/api/v1/auth.rs +++ b/src/api/v1/auth.rs @@ -25,6 +25,7 @@ use serde::{Deserialize, Serialize}; use super::mcaptcha::get_random; use crate::errors::*; use crate::Data; +use crate::*; pub mod routes { pub struct Auth { @@ -47,13 +48,17 @@ pub mod routes { } } +//post!(V1_API_ROUTES.auth.register, signup); pub fn services(cfg: &mut web::ServiceConfig) { - use crate::define_resource; - use crate::V1_API_ROUTES; + + // protect_get!(cfg, V1_API_ROUTES.auth.logout, signout); + + //cfg.service(signup); define_resource!(cfg, V1_API_ROUTES.auth.register, Methods::Post, signup); define_resource!(cfg, V1_API_ROUTES.auth.logout, Methods::ProtectGet, signout); define_resource!(cfg, V1_API_ROUTES.auth.login, Methods::Post, signin); + //post!(cfg, V1_API_ROUTES.auth.login, signin); } #[derive(Clone, Debug, Deserialize, Serialize)] diff --git a/src/api/v1/pow/mod.rs b/src/api/v1/pow/mod.rs index e343f23a..29537c9c 100644 --- a/src/api/v1/pow/mod.rs +++ b/src/api/v1/pow/mod.rs @@ -17,6 +17,7 @@ use actix_cors::Cors; use actix_web::web; +use actix_web::*; pub mod get_config; pub mod verify_pow; @@ -68,4 +69,19 @@ pub mod routes { } } } + +} + +#[allow(non_camel_case_types, missing_docs)] +pub struct post; +impl actix_web::dev::HttpServiceFactory for post { + fn register(self, __config: &mut actix_web::dev::AppService) { + async fn post() -> impl Responder { + HttpResponse::Ok() + } + let __resource = actix_web::Resource::new("/test/post") + .guard(actix_web::guard::Post()) + .to(post); + actix_web::dev::HttpServiceFactory::register(__resource, __config) + } } diff --git a/templates/_vars.scss b/templates/_vars.scss index 59a2dafc..8a7bd9ed 100644 --- a/templates/_vars.scss +++ b/templates/_vars.scss @@ -23,7 +23,11 @@ $light-text: rgba(255, 255, 255, 0.87); $secondary-backdrop: #2b2c30; $light-grey: rgba(0, 0, 0, 0.125); $white: #fff; -$form-content-width: 90%; $black-text: #000; + $auth-content-width: 30%; + $blue-link: rgb(3, 102, 214); + +$form-content-width: 90%; +$form-input-height: 40px; diff --git a/templates/auth/login/index.html b/templates/auth/login/index.html index 7320a11f..174e0985 100644 --- a/templates/auth/login/index.html +++ b/templates/auth/login/index.html @@ -36,7 +36,8 @@ id="password" required /> - + <. include!("../../components/showPassword/index.html"); .> + diff --git a/templates/auth/login/ts/index.ts b/templates/auth/login/ts/index.ts index 806a98c4..a9d2013d 100644 --- a/templates/auth/login/ts/index.ts +++ b/templates/auth/login/ts/index.ts @@ -20,6 +20,7 @@ import VIEWS from '../../../views/v1/routes'; import isBlankString from '../../../utils/isBlankString'; import genJsonPayload from '../../../utils/genJsonPayload'; import getFormUrl from '../../../utils/getFormUrl'; +import registerShowPassword from '../../../components/showPassword'; //import '../forms.scss'; @@ -62,4 +63,5 @@ const login = async (e: Event) => { export const index = () => { const form = document.getElementById('form'); form.addEventListener('submit', login, true); + registerShowPassword(); }; diff --git a/templates/auth/register/index.html b/templates/auth/register/index.html index 696b656b..20cf5e44 100644 --- a/templates/auth/register/index.html +++ b/templates/auth/register/index.html @@ -13,7 +13,7 @@ action="<.= crate::V1_API_ROUTES.auth.register .>" class="sitekey-form" id="form">

- Join mCaptcah + Join mCaptcha

diff --git a/templates/auth/register/ts/index.ts b/templates/auth/register/ts/index.ts index 9af41422..79e0ddc8 100644 --- a/templates/auth/register/ts/index.ts +++ b/templates/auth/register/ts/index.ts @@ -23,6 +23,7 @@ import genJsonPayload from '../../../utils/genJsonPayload'; import userExists from './userExists'; import emailExists from './emailExists'; import getFormUrl from '../../../utils/getFormUrl'; +import registerShowPassword from '../../../components/showPassword'; //import '../forms.scss'; @@ -51,7 +52,7 @@ const registerUser = async (e: Event) => { return; } - let email: string|null = emailElement.value; + let email: string | null = emailElement.value; if (!email.replace(/\s/g, '').length) { email = null; } else { @@ -83,4 +84,5 @@ export const index = () => { const form = document.getElementById('form'); form.addEventListener('submit', registerUser, true); usernameElement.addEventListener('input', userExists, false); + registerShowPassword(); }; diff --git a/templates/components/_forms.scss b/templates/components/_forms.scss index bd7aa4e8..d4b70596 100644 --- a/templates/components/_forms.scss +++ b/templates/components/_forms.scss @@ -28,6 +28,6 @@ position: relative; margin-top: 5px; box-sizing: border-box; - height: 40px; + height: $form-input-height; width: 90%; } diff --git a/templates/components/showPassword/index.html b/templates/components/showPassword/index.html new file mode 100644 index 00000000..6f1f9d95 --- /dev/null +++ b/templates/components/showPassword/index.html @@ -0,0 +1,6 @@ + + " alt="" /> + " alt="" /> + diff --git a/templates/components/showPassword/index.ts b/templates/components/showPassword/index.ts new file mode 100644 index 00000000..04562f2e --- /dev/null +++ b/templates/components/showPassword/index.ts @@ -0,0 +1,105 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ + +const showPasswordButtonClassHidden = 'show-password--hide'; +const showPasswordButtonClassShowing = 'show-password--show'; + +const container = 'show-password-container'; + +let display = 'hidden'; + +const showPasswordButtons = () => { + let buttons: NodeListOf; + + return (() => { + if (buttons === undefined) { + buttons = >( + document.querySelectorAll(`.${showPasswordButtonClassShowing}`) + ); + } + return buttons; + })(); +}; + +const hidePasswordButtons = () => { + let buttons: NodeListOf; + + return (() => { + if (buttons === undefined) { + buttons = >( + document.querySelectorAll(`.${showPasswordButtonClassHidden}`) + ); + } + return buttons; + })(); +}; + +// e is click event from show password container +export const showPassword = () => { + const form = document.querySelector('form'); + const inputs = form.querySelectorAll('input'); + + if (display == 'hidden') { + display = 'show'; + inputs.forEach(element => { + if (element.type === 'password') { + element.type = 'text'; + } + }); + showPasswordButtons().forEach((button: HTMLInputElement) => { + button.style.display = 'none'; + }); + + hidePasswordButtons().forEach((button: HTMLInputElement) => { + button.style.display = 'inline'; + }); + } else { + display = 'hidden'; + inputs.forEach(element => { + if (element.type === 'text' && element.name.includes('password')) { + element.type = 'password'; + } + }); + showPasswordButtons().forEach((button: HTMLInputElement) => { + button.style.display = 'inline'; + }); + + hidePasswordButtons().forEach((button: HTMLInputElement) => { + button.style.display = 'none'; + }); + } + + // posibily clicked on something else +}; + +export const registerShowPassword = () => { + document.querySelectorAll(`.${container}`).forEach(container => { + container.addEventListener('click', showPassword); + }); +}; + +export default registerShowPassword; + +/* + * so here's what im going to do: + * the wrapper will be a check box and the check box will manipulate + * show password and hide password buttons using CSS. + * + * There will also be an event hadler attached that will change field types of + * parent fields only. Well, sibling maybe. Will have to see document structure + * + */ diff --git a/templates/components/showPassword/main.scss b/templates/components/showPassword/main.scss new file mode 100644 index 00000000..474d0b5a --- /dev/null +++ b/templates/components/showPassword/main.scss @@ -0,0 +1,44 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ + +@import '../../vars'; + +$img-height: 0.69; + +@mixin show-password-img { + display: block; + width: #{$form-input-height * $img-height}; +} + +.show-password--show { + @include show-password-img; +} + +.show-password--hide { + @include show-password-img; + display: none; +} + +.show-password-container { + position: absolute; + right: 40px; + margin-top: #{$form-input-height * $img-height / 2.5}; +} + +.show-password-container:hover { + cursor: pointer; +} diff --git a/templates/components/showPassword/showpassword.test.ts b/templates/components/showPassword/showpassword.test.ts new file mode 100644 index 00000000..aa375f05 --- /dev/null +++ b/templates/components/showPassword/showpassword.test.ts @@ -0,0 +1,89 @@ +/* + * Copyright (C) 2021 Aravinth Manivannan + * + * 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 . + */ + +import registerShowPassword from './index'; +import {showPassword} from './index'; + +const initial_content = ` +
+

+ Signin to mCaptcha +

+ + + + + +
+ `; + +it('show password works', () => { + document.body.innerHTML = initial_content; + + const container = ( + document.querySelector(`.show-password-container`) + ); + const hide = container.querySelector('.show-password--hide'); + const show = container.querySelector('.show-password--show'); + const password = document.getElementById('password'); + show.style.display = 'inline'; + hide.style.display = 'none'; + + showPassword(); + expect(hide.style.display).toEqual('inline'); + expect(show.style.display).toEqual('none'); + expect(password.type).toEqual('text'); + + showPassword(); + expect(show.style.display).toEqual('inline'); + expect(hide.style.display).toEqual('none'); + expect(password.type).toEqual('password'); +}); + +it('show password click works', () => { + document.body.innerHTML = initial_content; + + const container = ( + document.querySelector(`.show-password-container`) + ); + const hide = container.querySelector('.show-password--hide'); + const show = container.querySelector('.show-password--show'); + const password = document.getElementById('password'); + show.style.display = 'inline'; + hide.style.display = 'none'; + + registerShowPassword(); + container.click(); + expect(hide.style.display).toEqual('inline'); + expect(show.style.display).toEqual('none'); + expect(password.type).toEqual('text'); + + container.click(); + expect(show.style.display).toEqual('inline'); + expect(hide.style.display).toEqual('none'); + expect(password.type).toEqual('password'); +}); diff --git a/templates/index.ts b/templates/index.ts index 920dedcf..7fe67cc2 100644 --- a/templates/index.ts +++ b/templates/index.ts @@ -29,6 +29,7 @@ import VIEWS from './views/v1/routes'; import './main.scss'; import './auth/css/main.scss'; import './components/details.scss'; +import './components/showPassword/main.scss'; import './panel/css/main.scss'; import './panel/navbar/main.scss'; import './panel/header/taskbar/main.scss';