hippoz/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added toggle to see password (#73)

Browse source
This commit is contained in:
Ajay Bura 2021-09-14 09:01:31 +05:30
parent 7ba1aabc09
commit 65d55d6660
3 changed files with 69 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
public/res/ic/outlined/eye.svg Normal file
View file

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g>
<g>
<path d="M12,19c-4.4,0-8-4-9.3-5.8c-0.6-0.7-0.6-1.7,0-2.4C4,9,7.6,5,12,5s8,4,9.3,5.8c0.6,0.7,0.6,1.7,0,2.4C20,15,16.4,19,12,19
z M12,7c-3.6,0-6.9,3.8-7.8,5c0.9,1.2,4.2,5,7.8,5s6.9-3.8,7.8-5C18.9,10.8,15.6,7,12,7z"/>
</g>
<circle cx="12" cy="12" r="3"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 718 B

56
src/app/templates/auth/Auth.jsx
View file

@ -8,10 +8,12 @@ import * as auth from '../../../client/action/auth';
import Text from '../../atoms/text/Text';
import Button from '../../atoms/button/Button';
import IconButton from '../../atoms/button/IconButton';
import Input from '../../atoms/input/Input';
import Spinner from '../../atoms/spinner/Spinner';
import ScrollView from '../../atoms/scroll/ScrollView';
import EyeIC from '../../../../public/res/ic/outlined/eye.svg';
import CinnySvg from '../../../../public/res/svg/cinny.svg';
// This regex validates historical usernames, which don't satisfy today's username requirements.
@ -207,24 +209,46 @@ function Auth({ type }) {
required
/>
</div>
<Input
forwardRef={passwordRef}
onChange={(e) => validateOnChange(e, ((type === 'login') ? PASSWORD_REGEX : PASSWORD_STRENGHT_REGEX), BAD_PASSWORD_ERROR)}
id="auth_password"
type="password"
label="Password"
required
/>
<div className="password__wrapper">
<Input
forwardRef={passwordRef}
onChange={(e) => validateOnChange(e, ((type === 'login') ? PASSWORD_REGEX : PASSWORD_STRENGHT_REGEX), BAD_PASSWORD_ERROR)}
id="auth_password"
type="password"
label="Password"
required
/>
<IconButton
onClick={() => {
if (passwordRef.current.type === 'password') {
passwordRef.current.type = 'text';
} else passwordRef.current.type = 'password';
}}
size="extra-small"
src={EyeIC}
/>
</div>
{type === 'register' && (
<>
<Input
forwardRef={confirmPasswordRef}
onChange={(e) => validateOnChange(e, new RegExp(`^(${passwordRef.current.value})$`), CONFIRM_PASSWORD_ERROR)}
id="auth_confirmPassword"
type="password"
label="Confirm password"
required
/>
<div className="password__wrapper">
<Input
forwardRef={confirmPasswordRef}
onChange={(e) => validateOnChange(e, new RegExp(`^(${passwordRef.current.value})$`), CONFIRM_PASSWORD_ERROR)}
id="auth_confirmPassword"
type="password"
label="Confirm password"
required
/>
<IconButton
onClick={() => {
if (confirmPasswordRef.current.type === 'password') {
confirmPasswordRef.current.type = 'text';
} else confirmPasswordRef.current.type = 'password';
}}
size="extra-small"
src={EyeIC}
/>
</div>
<Input
forwardRef={emailRef}
onChange={(e) => validateOnChange(e, EMAIL_REGEX, BAD_EMAIL_ERROR)}

16
src/app/templates/auth/Auth.scss
View file

@ -122,6 +122,22 @@
}
}
.password__wrapper {
margin-top: var(--sp-tight);
position: relative;
& .ic-btn {
position: absolute;
right: 6px;
bottom: 6px;
border-radius: calc(var(--bo-radius) / 2);
[dir=rtl] & {
left: 6px;
right: unset;
}
}
}
@media (max-width: 462px) {
.auth__wrapper {
padding: 0;