1
0
Fork 0
mirror of https://github.com/mCaptcha/mCaptcha.git synced 2025-02-24 12:28:56 +03:00

show password component

This commit is contained in:
realaravinth 2021-05-14 16:33:18 +05:30
parent bb6cc840ea
commit 6b740a980b
No known key found for this signature in database
GPG key ID: AD9F0F08E855ED88
13 changed files with 285 additions and 7 deletions

View file

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

View file

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

View file

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

View file

@ -36,7 +36,8 @@
id="password"
required
/>
</label>
<. include!("../../components/showPassword/index.html"); .>
</label>
<input type="submit" class="sitekey-form__submit" value="Sign in" />
</form>

View file

@ -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 = <HTMLFontElement>document.getElementById('form');
form.addEventListener('submit', login, true);
registerShowPassword();
};

View file

@ -13,7 +13,7 @@
action="<.= crate::V1_API_ROUTES.auth.register .>"
class="sitekey-form" id="form">
<h1 class="form__title">
Join mCaptcah
Join mCaptcha
</h1>
<label class="sitekey-form__label" for="username"
@ -50,6 +50,8 @@
id="password"
required
/>
<. include!("../../components/showPassword/index.html"); .>
</label>
<label for="password" class="sitekey-form__label"
@ -62,6 +64,7 @@
id="password-check"
required
/>
<. include!("../../components/showPassword/index.html"); .>
</label>
<input type="submit" class="sitekey-form__submit" value="Sign up" />
</form>

View file

@ -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 = <HTMLFontElement>document.getElementById('form');
form.addEventListener('submit', registerUser, true);
usernameElement.addEventListener('input', userExists, false);
registerShowPassword();
};

View file

@ -28,6 +28,6 @@
position: relative;
margin-top: 5px;
box-sizing: border-box;
height: 40px;
height: $form-input-height;
width: 90%;
}

View file

@ -0,0 +1,6 @@
<span class="show-password-container">
<img class="show-password--show" src="<.=
crate::FILES.get("./static-assets/img/svg/eye.svg").unwrap() .>" alt="" />
<img class="show-password--hide" src="<.=
crate::FILES.get("./static-assets/img/svg/eye-off.svg").unwrap() .>" alt="" />
</span>

View file

@ -0,0 +1,105 @@
/*
* 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/>.
*/
const showPasswordButtonClassHidden = 'show-password--hide';
const showPasswordButtonClassShowing = 'show-password--show';
const container = 'show-password-container';
let display = 'hidden';
const showPasswordButtons = () => {
let buttons: NodeListOf<HTMLElement>;
return (() => {
if (buttons === undefined) {
buttons = <NodeListOf<HTMLElement>>(
document.querySelectorAll(`.${showPasswordButtonClassShowing}`)
);
}
return buttons;
})();
};
const hidePasswordButtons = () => {
let buttons: NodeListOf<HTMLElement>;
return (() => {
if (buttons === undefined) {
buttons = <NodeListOf<HTMLElement>>(
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
*
*/

View file

@ -0,0 +1,44 @@
/*
* 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/>.
*/
@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;
}

View file

@ -0,0 +1,89 @@
/*
* 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/>.
*/
import registerShowPassword from './index';
import {showPassword} from './index';
const initial_content = `
<form class="sitekey-form" method="POST" action="/api/v1/signin" id="form" data-bitwarden-watching="1">
<h1 class="form__title">
Signin to mCaptcha
</h1>
<label class="sitekey-form__label" for="username">
Username
<input class="sitekey-form__input" type="text" name="username" id="username" required="" data-com.bitwarden.browser.user-edited="yes">
</label>
<label class="sitekey-form__label" for="duration">
Password
<input class="sitekey-form__input" type="password" name="password" id="password" required="">
<span class="show-password-container">
<img class="show-password--show" src="/static/img/svg/eye.svg" alt="">
<img class="show-password--hide" src="/static/img/svg/eye-off.svg" alt="">
</span>
</label>
<input type="submit" class="sitekey-form__submit" value="Sign in">
</form>
`;
it('show password works', () => {
document.body.innerHTML = initial_content;
const container = <HTMLElement>(
document.querySelector(`.show-password-container`)
);
const hide = <HTMLElement>container.querySelector('.show-password--hide');
const show = <HTMLElement>container.querySelector('.show-password--show');
const password = <HTMLInputElement>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 = <HTMLElement>(
document.querySelector(`.show-password-container`)
);
const hide = <HTMLElement>container.querySelector('.show-password--hide');
const show = <HTMLElement>container.querySelector('.show-password--show');
const password = <HTMLInputElement>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');
});

View file

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