Skip to content

Commit 3eb7c2e

Browse files
perminder-17perminder-17
committed
Added eye icon
1 parent ca74574 commit 3eb7c2e

File tree

4 files changed

+129
-50
lines changed

4 files changed

+129
-50
lines changed

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

Lines changed: 37 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
@@ -44,22 +49,37 @@ function LoginForm() {
4449
</Field>
4550
<Field name="password">
4651
{(field) => (
47-
<p className="form__field">
48-
<label htmlFor="password" className="form__label">
49-
{t('LoginForm.Password')}
50-
</label>
51-
<input
52-
className="form__input"
53-
aria-label={t('LoginForm.PasswordARIA')}
54-
type="password"
55-
id="password"
56-
autoComplete="current-password"
57-
{...field.input}
58-
/>
59-
{field.meta.touched && field.meta.error && (
60-
<span className="form-error">{field.meta.error}</span>
61-
)}
62-
</p>
52+
<div style={{ position: 'relative' }}>
53+
<p className="form__field">
54+
<label htmlFor="password" className="form__label">
55+
{t('LoginForm.Password')}
56+
</label>
57+
<input
58+
className="form__input"
59+
aria-label={t('LoginForm.PasswordARIA')}
60+
type={showPassword ? 'text' : 'password'}
61+
id="password"
62+
autoComplete="current-password"
63+
{...field.input}
64+
/>
65+
{field.meta.touched && field.meta.error && (
66+
<span className="form-error">{field.meta.error}</span>
67+
)}
68+
</p>
69+
<button
70+
type="button"
71+
onClick={handleVisibility}
72+
style={{
73+
fontSize: '25px',
74+
position: 'absolute',
75+
top: '38%',
76+
right: '2px',
77+
paddingTop: '4.5px'
78+
}}
79+
>
80+
{showPassword ? <AiOutlineEyeInvisible /> : <AiOutlineEye />}
81+
</button>
82+
</div>
6383
)}
6484
</Field>
6585
{submitError && !modifiedSinceLastSubmit && (

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

Lines changed: 76 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';
@@ -38,6 +39,14 @@ function SignupForm() {
3839
function onSubmit(formProps) {
3940
return dispatch(validateAndSignUpUser(formProps));
4041
}
42+
const [showPassword, setShowPassword] = useState(false);
43+
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
44+
const handleVisibility = () => {
45+
setShowPassword(!showPassword);
46+
};
47+
const handleConfirmVisibility = () => {
48+
setShowConfirmPassword(!showConfirmPassword);
49+
};
4150

4251
return (
4352
<Form
@@ -93,42 +102,76 @@ function SignupForm() {
93102
</Field>
94103
<Field name="password">
95104
{(field) => (
96-
<p className="form__field">
97-
<label htmlFor="password" className="form__label">
98-
{t('SignupForm.Password')}
99-
</label>
100-
<input
101-
className="form__input"
102-
aria-label={t('SignupForm.PasswordARIA')}
103-
type="password"
104-
id="password"
105-
autoComplete="new-password"
106-
{...field.input}
107-
/>
108-
{field.meta.touched && field.meta.error && (
109-
<span className="form-error">{field.meta.error}</span>
110-
)}
111-
</p>
105+
<div style={{ position: 'relative' }}>
106+
<p className="form__field">
107+
<label htmlFor="password" className="form__label">
108+
{t('SignupForm.Password')}
109+
</label>
110+
<input
111+
className="form__input"
112+
aria-label={t('SignupForm.PasswordARIA')}
113+
type={showPassword ? 'text' : 'password'}
114+
id="password"
115+
autoComplete="new-password"
116+
{...field.input}
117+
/>
118+
{field.meta.touched && field.meta.error && (
119+
<span className="form-error">{field.meta.error}</span>
120+
)}
121+
</p>
122+
<button
123+
type="button"
124+
onClick={handleVisibility}
125+
style={{
126+
fontSize: '25px',
127+
position: 'absolute',
128+
top: '38%',
129+
right: '1.5px',
130+
paddingTop: '4.5px'
131+
}}
132+
>
133+
{showPassword ? <AiOutlineEyeInvisible /> : <AiOutlineEye />}
134+
</button>
135+
</div>
112136
)}
113137
</Field>
114138
<Field name="confirmPassword">
115139
{(field) => (
116-
<p className="form__field">
117-
<label htmlFor="confirm password" className="form__label">
118-
{t('SignupForm.ConfirmPassword')}
119-
</label>
120-
<input
121-
className="form__input"
122-
type="password"
123-
aria-label={t('SignupForm.ConfirmPasswordARIA')}
124-
id="confirm password"
125-
autoComplete="new-password"
126-
{...field.input}
127-
/>
128-
{field.meta.touched && field.meta.error && (
129-
<span className="form-error">{field.meta.error}</span>
130-
)}
131-
</p>
140+
<div style={{ position: 'relative' }}>
141+
<p className="form__field">
142+
<label htmlFor="confirmPassword" className="form__label">
143+
{t('SignupForm.ConfirmPassword')}
144+
</label>
145+
<input
146+
className="form__input"
147+
type={showConfirmPassword ? 'text' : 'password'}
148+
aria-label={t('SignupForm.ConfirmPasswordARIA')}
149+
id="confirmPassword" // Match the id with htmlFor
150+
autoComplete="new-password"
151+
{...field.input}
152+
/>
153+
{field.meta.touched && field.meta.error && (
154+
<span className="form-error">{field.meta.error}</span>
155+
)}
156+
</p>
157+
<button
158+
type="button"
159+
onClick={handleConfirmVisibility}
160+
style={{
161+
fontSize: '25px',
162+
position: 'absolute',
163+
top: '38%',
164+
right: '1.5px',
165+
paddingTop: '4px'
166+
}}
167+
>
168+
{showConfirmPassword ? (
169+
<AiOutlineEyeInvisible />
170+
) : (
171+
<AiOutlineEye />
172+
)}
173+
</button>
174+
</div>
132175
)}
133176
</Field>
134177
<Button type="submit" disabled={submitting || invalid || pristine}>

‎package-lock.json

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,7 @@
228228
"react-ga": "^3.3.0",
229229
"react-helmet": "^5.1.3",
230230
"react-i18next": "^11.11.3",
231+
"react-icons": "^4.11.0",
231232
"react-markdown": "^6.0.3",
232233
"react-redux": "^7.2.4",
233234
"react-refresh": "^0.14.0",

0 commit comments

Comments
 (0)