diff --git a/FRONTEND-REACT/package.json b/FRONTEND-REACT/package.json index daa4196..f08b03c 100644 --- a/FRONTEND-REACT/package.json +++ b/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", diff --git a/FRONTEND-REACT/src/Component/RegisterForm/index.css b/FRONTEND-REACT/src/Component/RegisterForm/index.css index 496393a..0f4c684 100644 --- a/FRONTEND-REACT/src/Component/RegisterForm/index.css +++ b/FRONTEND-REACT/src/Component/RegisterForm/index.css @@ -42,4 +42,8 @@ .formContainer { min-height: 70vh; } +} + +.passwordEye{ + margin-right: 1px !important; } \ No newline at end of file diff --git a/FRONTEND-REACT/src/Component/RegisterForm/index.tsx b/FRONTEND-REACT/src/Component/RegisterForm/index.tsx index 3552f03..b34d0e8 100644 --- a/FRONTEND-REACT/src/Component/RegisterForm/index.tsx +++ b/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 (