Skip to content

Commit 7c50147

Browse files
raclimraclim
authored
Merge pull request #2467 from perminder-17/eye-icon
Added eye icon
2 parents 54e743a + 64f3044 commit 7c50147

File tree

3 files changed

+118
-52
lines changed

3 files changed

+118
-52
lines changed

‎client/modules/User/components/LoginForm.jsx

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { useTranslation } from 'react-i18next';
33
import { Form, Field } from 'react-final-form';
44
import { useDispatch } from 'react-redux';
5+
import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
56
import Button from '../../../common/Button';
67
import { validateLogin } from '../../../utils/reduxFormUtils';
78
import { validateAndLoginUser } from '../actions';
@@ -13,6 +14,10 @@ function LoginForm() {
1314
function onSubmit(formProps) {
1415
return dispatch(validateAndLoginUser(formProps));
1516
}
17+
const [showPassword, setShowPassword] = useState(false);
18+
const handleVisibility = () => {
19+
setShowPassword(!showPassword);
20+
};
1621

1722
return (
1823
<Form
@@ -45,22 +50,35 @@ function LoginForm() {
4550
</Field>
4651
<Field name="password">
4752
{(field) => (
48-
<p className="form__field">
49-
<label htmlFor="password" className="form__label">
50-
{t('LoginForm.Password')}
51-
</label>
52-
<input
53-
className="form__input"
54-
aria-label={t('LoginForm.PasswordARIA')}
55-
type="password"
56-
id="password"
57-
autoComplete="current-password"
58-
{...field.input}
59-
/>
60-
{field.meta.touched && field.meta.error && (
61-
<span className="form-error">{field.meta.error}</span>
62-
)}
63-
</p>
53+
<div>
54+
<p className="form__field">
55+
<label htmlFor="password" className="form__label">
56+
{t('LoginForm.Password')}
57+
</label>
58+
<button
59+
className="form__eye__icon"
60+
type="button"
61+
onClick={handleVisibility}
62+
>
63+
{showPassword ? (
64+
<AiOutlineEyeInvisible />
65+
) : (
66+
<AiOutlineEye />
67+
)}
68+
</button>
69+
<input
70+
className="form__input"
71+
aria-label={t('LoginForm.PasswordARIA')}
72+
type={showPassword ? 'text' : 'password'}
73+
id="password"
74+
autoComplete="current-password"
75+
{...field.input}
76+
/>
77+
{field.meta.touched && field.meta.error && (
78+
<span className="form-error">{field.meta.error}</span>
79+
)}
80+
</p>
81+
</div>
6482
)}
6583
</Field>
6684
{submitError && !modifiedSinceLastSubmit && (

‎client/modules/User/components/SignupForm.jsx

Lines changed: 68 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import React from 'react';
1+
import { React, useState } from 'react';
22
import { useTranslation } from 'react-i18next';
33
import { Form, Field } from 'react-final-form';
44
import { useDispatch } from 'react-redux';
5+
import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
56
import { validateSignup } from '../../../utils/reduxFormUtils';
67
import { validateAndSignUpUser } from '../actions';
78
import Button from '../../../common/Button';
@@ -39,6 +40,14 @@ function SignupForm() {
3940
function onSubmit(formProps) {
4041
return dispatch(validateAndSignUpUser(formProps));
4142
}
43+
const [showPassword, setShowPassword] = useState(false);
44+
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
45+
const handleVisibility = () => {
46+
setShowPassword(!showPassword);
47+
};
48+
const handleConfirmVisibility = () => {
49+
setShowConfirmPassword(!showConfirmPassword);
50+
};
4251

4352
return (
4453
<Form
@@ -95,42 +104,68 @@ function SignupForm() {
95104
</Field>
96105
<Field name="password">
97106
{(field) => (
98-
<p className="form__field">
99-
<label htmlFor="password" className="form__label">
100-
{t('SignupForm.Password')}
101-
</label>
102-
<input
103-
className="form__input"
104-
aria-label={t('SignupForm.PasswordARIA')}
105-
type="password"
106-
id="password"
107-
autoComplete="new-password"
108-
{...field.input}
109-
/>
110-
{field.meta.touched && field.meta.error && (
111-
<span className="form-error">{field.meta.error}</span>
112-
)}
113-
</p>
107+
<div>
108+
<p className="form__field">
109+
<label htmlFor="password" className="form__label">
110+
{t('SignupForm.Password')}
111+
</label>
112+
<button
113+
className="form__eye__icon"
114+
type="button"
115+
onClick={handleVisibility}
116+
>
117+
{showPassword ? (
118+
<AiOutlineEyeInvisible />
119+
) : (
120+
<AiOutlineEye />
121+
)}
122+
</button>
123+
<input
124+
className="form__input"
125+
aria-label={t('SignupForm.PasswordARIA')}
126+
type={showPassword ? 'text' : 'password'}
127+
id="password"
128+
autoComplete="new-password"
129+
{...field.input}
130+
/>
131+
{field.meta.touched && field.meta.error && (
132+
<span className="form-error">{field.meta.error}</span>
133+
)}
134+
</p>
135+
</div>
114136
)}
115137
</Field>
116138
<Field name="confirmPassword">
117139
{(field) => (
118-
<p className="form__field">
119-
<label htmlFor="confirm password" className="form__label">
120-
{t('SignupForm.ConfirmPassword')}
121-
</label>
122-
<input
123-
className="form__input"
124-
type="password"
125-
aria-label={t('SignupForm.ConfirmPasswordARIA')}
126-
id="confirm password"
127-
autoComplete="new-password"
128-
{...field.input}
129-
/>
130-
{field.meta.touched && field.meta.error && (
131-
<span className="form-error">{field.meta.error}</span>
132-
)}
133-
</p>
140+
<div>
141+
<p className="form__field">
142+
<label htmlFor="confirmPassword" className="form__label">
143+
{t('SignupForm.ConfirmPassword')}
144+
</label>
145+
<button
146+
className="form__eye__icon"
147+
type="button"
148+
onClick={handleConfirmVisibility}
149+
>
150+
{showConfirmPassword ? (
151+
<AiOutlineEyeInvisible />
152+
) : (
153+
<AiOutlineEye />
154+
)}
155+
</button>
156+
<input
157+
className="form__input"
158+
type={showConfirmPassword ? 'text' : 'password'}
159+
aria-label={t('SignupForm.ConfirmPasswordARIA')}
160+
id="confirmPassword" // Match the id with htmlFor
161+
autoComplete="new-password"
162+
{...field.input}
163+
/>
164+
{field.meta.touched && field.meta.error && (
165+
<span className="form-error">{field.meta.error}</span>
166+
)}
167+
</p>
168+
</div>
134169
)}
135170
</Field>
136171
<Button type="submit" disabled={submitting || invalid || pristine}>

‎client/styles/components/_forms.scss

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,13 +66,26 @@
6666
color: getThemifyVariable("form-input-text-color");
6767
background-color: getThemifyVariable("input-background-color");
6868
}
69-
69+
7070
@media (max-width: 770px) {
7171
max-width: 100%;
72-
width:100%;
72+
width: 100%;
7373
}
7474
}
7575

76+
.form__eye__icon {
77+
font-size: 28px;
78+
position: relative;
79+
top: 7px;
80+
right: -355px;
81+
margin-left: -40px;
82+
}
83+
84+
85+
.form__input[type='password']::-ms-reveal {
86+
display: none;
87+
}
88+
7689
.form__input-flexible-height {
7790
height: auto;
7891
resize: none;

0 commit comments

Comments
 (0)