From b210be14f1f4c4efc328a875361dcd99625922e6 Mon Sep 17 00:00:00 2001 From: kashan Date: Sat, 7 May 2022 04:08:03 +0500 Subject: [PATCH 1/3] added password show hide visibility --- FRONTEND-REACT/package.json | 2 + .../src/Component/RegisterForm/index.css | 4 ++ .../src/Component/RegisterForm/index.tsx | 43 ++++++++++++++++++- 3 files changed, 48 insertions(+), 1 deletion(-) 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..a608f51 100644 --- a/FRONTEND-REACT/src/Component/RegisterForm/index.tsx +++ b/FRONTEND-REACT/src/Component/RegisterForm/index.tsx @@ -1,6 +1,6 @@ /* eslint-disable react/jsx-props-no-spreading */ import { - Button, CircularProgress, InputProps, TextFieldProps, + Button, CircularProgress, IconButton, InputAdornment, InputProps, TextFieldProps, } from '@mui/material'; import { useFormik } from 'formik'; import { FormEvent, ReactNode, useContext } from 'react'; @@ -9,6 +9,8 @@ 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'; @@ -23,6 +25,7 @@ interface Values { phone: string; email: string; password: string; + showPassword: boolean; } const validationSchema = yup.object({ @@ -50,6 +53,7 @@ const RegisterForm = () => { phone: '', email: '', password: '', + showPassword: false, } as Values, validationSchema, onSubmit: async (values) => { @@ -80,6 +84,10 @@ const RegisterForm = () => { {...innerProps} /> ); + const setValue = async (key: string, value: any) => { + await formik.setFieldValue(key, value); + }; + return (
@@ -143,6 +151,39 @@ const RegisterForm = () => { name="password" fullWidth className="formItems" + type={formik.values.showPassword ? 'text' : 'password'} + InputProps={{ + disableUnderline: true, + endAdornment: + ( + + setValue('showPassword', !formik.values.showPassword)} + edge="end" + > + {formik.values.showPassword ? : } + + + ) + + , + }} + // endAdornment={ + // ( + // + // setValue('showPassword', !formik.values.showPassword)} + // edge="end" + // > + // {formik.values.showPassword ? : } + // + // + // ) + // } label="Password" error={formik.touched.password && Boolean(formik.errors.password)} helperText={formik.touched.password && formik.errors.password} From 134fc3d3aa94a901b0a89dfd981682c481e3e9c8 Mon Sep 17 00:00:00 2001 From: kashan Date: Sat, 7 May 2022 04:20:37 +0500 Subject: [PATCH 2/3] removed unnecessary comments --- .../src/Component/RegisterForm/index.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/FRONTEND-REACT/src/Component/RegisterForm/index.tsx b/FRONTEND-REACT/src/Component/RegisterForm/index.tsx index a608f51..77ef62a 100644 --- a/FRONTEND-REACT/src/Component/RegisterForm/index.tsx +++ b/FRONTEND-REACT/src/Component/RegisterForm/index.tsx @@ -170,20 +170,7 @@ const RegisterForm = () => { , }} - // endAdornment={ - // ( - // - // setValue('showPassword', !formik.values.showPassword)} - // edge="end" - // > - // {formik.values.showPassword ? : } - // - // - // ) - // } + label="Password" error={formik.touched.password && Boolean(formik.errors.password)} helperText={formik.touched.password && formik.errors.password} From c5ffe8c88f7f04f9b117e7d0126a3229928dc6ec Mon Sep 17 00:00:00 2001 From: kashan Date: Sat, 7 May 2022 04:24:13 +0500 Subject: [PATCH 3/3] lint fixes --- FRONTEND-REACT/src/Component/RegisterForm/index.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/FRONTEND-REACT/src/Component/RegisterForm/index.tsx b/FRONTEND-REACT/src/Component/RegisterForm/index.tsx index 77ef62a..b34d0e8 100644 --- a/FRONTEND-REACT/src/Component/RegisterForm/index.tsx +++ b/FRONTEND-REACT/src/Component/RegisterForm/index.tsx @@ -1,9 +1,9 @@ /* eslint-disable react/jsx-props-no-spreading */ import { - Button, CircularProgress, IconButton, InputAdornment, 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'; @@ -15,7 +15,6 @@ 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'; @@ -42,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({ @@ -167,10 +166,8 @@ const RegisterForm = () => { ) - , }} - label="Password" error={formik.touched.password && Boolean(formik.errors.password)} helperText={formik.touched.password && formik.errors.password}