feature: added password show hide visibility [sample pull request]

FRONTEND-REACT/package.json

@@ -5,6 +5,8 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@material-ui/types": "^5.1.0",
+    "@mui/icons-material": "^5.6.2",
     "@mui/material": "^5.6.2",
     "@mui/styles": "^5.6.2",
     "@testing-library/jest-dom": "^5.16.4",

FRONTEND-REACT/src/Component/RegisterForm/index.css

@@ -42,4 +42,8 @@
     .formContainer {
         min-height: 70vh;
     }
+}
+
+.passwordEye{
+    margin-right: 1px !important;
 }

FRONTEND-REACT/src/Component/RegisterForm/index.tsx

@@ -1,19 +1,20 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import {
-  Button, CircularProgress, InputProps, TextFieldProps,
+  Button, CircularProgress, IconButton, InputAdornment, TextFieldProps,
 } from '@mui/material';
 import { useFormik } from 'formik';
-import { FormEvent, ReactNode, useContext } from 'react';
+import { ReactNode, useContext } from 'react';
 import InputMask, { Props } from 'react-input-mask';
 import * as yup from 'yup';
 import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
 import { useSnackbar } from 'notistack';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import { UserContext } from '../../Utils/ContextAPI';
 import Input from '../Input';
 import './index.css';
 import { capitalize, phoneRegExp } from '../../Utils/Constants';
-import USFlag from '../Svgs/USFlag';
 import InputWithIcon from '../Input/InputWithIcon';
 import { apiRegistration } from '../../Utils/Helpers';
 
@@ -23,6 +24,7 @@ interface Values {
   phone: string;
   email: string;
   password: string;
+  showPassword: boolean;
 }
 
 const validationSchema = yup.object({
@@ -39,8 +41,8 @@ const validationSchema = yup.object({
 });
 
 const RegisterForm = () => {
-  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
-  const { state, dispatch } = useContext(UserContext);
+  const { enqueueSnackbar } = useSnackbar();
+  const { dispatch } = useContext(UserContext);
   const navigate = useNavigate();
 
   const formik = useFormik({
@@ -50,6 +52,7 @@ const RegisterForm = () => {
       phone: '',
       email: '',
       password: '',
+      showPassword: false,
     } as Values,
     validationSchema,
     onSubmit: async (values) => {
@@ -80,6 +83,10 @@ const RegisterForm = () => {
       {...innerProps}
     />
   );
+  const setValue = async (key: string, value: any) => {
+    await formik.setFieldValue(key, value);
+  };
+
   return (
     <div className="formContainer">
       <div className="formContainerChild">
@@ -143,6 +150,24 @@ const RegisterForm = () => {
             name="password"
             fullWidth
             className="formItems"
+            type={formik.values.showPassword ? 'text' : 'password'}
+            InputProps={{
+              disableUnderline: true,
+              endAdornment:
+                (
+                  <InputAdornment position="end">
+                    <IconButton
+                      className="passwordEye"
+                      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+                      onClick={() => setValue('showPassword', !formik.values.showPassword)}
+                      edge="end"
+                    >
+                      {formik.values.showPassword ? <VisibilityOff /> : <Visibility />}
+                    </IconButton>
+                  </InputAdornment>
+                )
+              ,
+            }}
             label="Password"
             error={formik.touched.password && Boolean(formik.errors.password)}
             helperText={formik.touched.password && formik.errors.password}