mirror/mCaptcha
1
0
Fork 1
mirror of https://github.com/mCaptcha/mCaptcha.git synced 2026-02-11 10:05:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

show password component

Browse Source
This commit is contained in:
realaravinth
2021-05-14 16:33:18 +05:30
parent bb6cc840ea
commit 6b740a980b
13 changed files with 285 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/components/_forms.scss
View File

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

105
templates/components/showPassword/index.ts Normal file
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
*
*/

44
templates/components/showPassword/main.scss Normal file
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;
}

89
templates/components/showPassword/showpassword.test.ts Normal file
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');
});