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:
parent
bb6cc840ea
commit
6b740a980b
13 changed files with 285 additions and 7 deletions
|
@ -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)]
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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();
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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();
|
||||
};
|
||||
|
|
|
@ -28,6 +28,6 @@
|
|||
position: relative;
|
||||
margin-top: 5px;
|
||||
box-sizing: border-box;
|
||||
height: 40px;
|
||||
height: $form-input-height;
|
||||
width: 90%;
|
||||
}
|
||||
|
|
6
templates/components/showPassword/index.html
Normal file
6
templates/components/showPassword/index.html
Normal 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>
|
105
templates/components/showPassword/index.ts
Normal file
105
templates/components/showPassword/index.ts
Normal 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
|
||||
*
|
||||
*/
|
44
templates/components/showPassword/main.scss
Normal file
44
templates/components/showPassword/main.scss
Normal 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;
|
||||
}
|
89
templates/components/showPassword/showpassword.test.ts
Normal file
89
templates/components/showPassword/showpassword.test.ts
Normal 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');
|
||||
});
|
|
@ -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';
|
||||
|
|
Loading…
Add table
Reference in a new issue