Added the eyeicon for passwords

client/modules/User/components/LoginForm.jsx

@@ -1,15 +1,18 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Field } from 'react-final-form';
 import { useDispatch } from 'react-redux';
 import Button from '../../../common/Button';
 import { validateLogin } from '../../../utils/reduxFormUtils';
 import { validateAndLoginUser } from '../actions';
+import viewimg from '../../../images/view.png';
+import hideimg from '../../../images/hide.png';
 
 function LoginForm() {
   const { t } = useTranslation();
-
+  const [showpassword, setShowpassword] = useState(false);
   const dispatch = useDispatch();
+
   function onSubmit(formProps) {
     return dispatch(validateAndLoginUser(formProps));
   }
@@ -48,14 +51,19 @@ function LoginForm() {
                 <label htmlFor="password" className="form__label">
                   {t('LoginForm.Password')}
                 </label>
-                <input
-                  className="form__input"
-                  aria-label={t('LoginForm.PasswordARIA')}
-                  type="password"
-                  id="password"
-                  autoComplete="current-password"
-                  {...field.input}
-                />
+                <div className="form__password-div">
+                  <input
+                    className="form__input"
+                    aria-label={t('LoginForm.PasswordARIA')}
+                    type={showpassword ? 'text' : 'password'}
+                    id="password"
+                    autoComplete="current-password"
+                    {...field.input}
+                  />
+                  <button onClick={() => setShowpassword(!showpassword)}>
+                    <img src={showpassword ? viewimg : hideimg} alt="" />
+                  </button>
+                </div>
                 {field.meta.touched && field.meta.error && (
                   <span className="form-error">{field.meta.error}</span>
                 )}

client/modules/User/components/SignupForm.jsx

@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Field } from 'react-final-form';
 import { useDispatch } from 'react-redux';
 import { validateSignup } from '../../../utils/reduxFormUtils';
 import { validateAndSignUpUser } from '../actions';
 import Button from '../../../common/Button';
 import apiClient from '../../../utils/apiClient';
+import viewimg from '../../../images/view.png';
+import hideimg from '../../../images/hide.png';
 
 function asyncValidate(fieldToValidate, value) {
   if (!value || value.trim().length === 0)
@@ -33,6 +35,7 @@ function validateEmail(email) {
 
 function SignupForm() {
   const { t } = useTranslation();
+  const [showpassword, setShowpassword] = useState(false);
 
   const dispatch = useDispatch();
   function onSubmit(formProps) {
@@ -97,14 +100,19 @@ function SignupForm() {
                 <label htmlFor="password" className="form__label">
                   {t('SignupForm.Password')}
                 </label>
-                <input
-                  className="form__input"
-                  aria-label={t('SignupForm.PasswordARIA')}
-                  type="password"
-                  id="password"
-                  autoComplete="new-password"
-                  {...field.input}
-                />
+                <div className="form__password-div">
+                  <input
+                    className="form__input"
+                    aria-label={t('SignupForm.PasswordARIA')}
+                    type={showpassword ? 'text' : 'password'}
+                    id="password"
+                    autoComplete="new-password"
+                    {...field.input}
+                  />
+                  <button onClick={() => setShowpassword(!showpassword)}>
+                    <img src={showpassword ? viewimg : hideimg} alt="" />
+                  </button>
+                </div>
                 {field.meta.touched && field.meta.error && (
                   <span className="form-error">{field.meta.error}</span>
                 )}

client/styles/components/_forms.scss

@@ -91,6 +91,28 @@
   margin-left: auto;
   margin-right: auto;
 }
+
+.form__password-div {
+	display: flex;
+	align-items: center;
+	max-width: 90vw;
+  width: #{360 / $base-font-size}rem;
+}
+.form__password-div button{
+  display: flex;
+  padding: 0 2px;
+}
+.form__password-div button:focus{
+  box-shadow: none;
+}
+.form__password-div img{
+  width: 30px;
+
+  @media (max-width: 770px) {
+   width: 24px;
+  }
+}
+
 
 // .form [type="submit"] {
 //   @extend %button;