From c6d750044a33fdae1a00975057892ff37b7f506f Mon Sep 17 00:00:00 2001
From: Kirti Kamal <kirtikamal718@gmail.com>
Date: Fri, 14 Jun 2024 09:53:46 +0530
Subject: [PATCH 1/2] added PasswordTextField component

---
 .../Account/SignUp/SignUp.component.js        | 17 +++++-----
 .../UI/FormItems/PasswordTextField.js         | 33 +++++++++++++++++++
 2 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 src/components/UI/FormItems/PasswordTextField.js

diff --git a/src/components/Account/SignUp/SignUp.component.js b/src/components/Account/SignUp/SignUp.component.js
index 002324a9f..0b2e7702b 100644
--- a/src/components/Account/SignUp/SignUp.component.js
+++ b/src/components/Account/SignUp/SignUp.component.js
@@ -17,6 +17,7 @@ import validationSchema from './validationSchema';
 import { signUp } from './SignUp.actions';
 import messages from './SignUp.messages';
 import './SignUp.css';
+import PasswordTextField from '../../UI/FormItems/PasswordTextField';
 
 export class SignUp extends Component {
   static propTypes = {
@@ -114,18 +115,16 @@ export class SignUp extends Component {
                     error={errors.email}
                     onChange={handleChange}
                   />
-                  <TextField
-                    type="password"
-                    name="password"
-                    label={intl.formatMessage(messages.createYourPassword)}
+                  <PasswordTextField
                     error={errors.password}
+                    label={intl.formatMessage(messages.password)}
+                    name="password"
                     onChange={handleChange}
                   />
-                  <TextField
-                    type="password"
-                    name="passwordConfirm"
-                    label={intl.formatMessage(messages.confirmYourPassword)}
-                    error={errors.passwordConfirm}
+                  <PasswordTextField
+                    error={errors.confirmPassword}
+                    label={intl.formatMessage(messages.confirmPassword)}
+                    name="confirmPassword"
                     onChange={handleChange}
                   />
                   <FormControlLabel
diff --git a/src/components/UI/FormItems/PasswordTextField.js b/src/components/UI/FormItems/PasswordTextField.js
new file mode 100644
index 000000000..aab7d9cdc
--- /dev/null
+++ b/src/components/UI/FormItems/PasswordTextField.js
@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { TextField, InputAdornment, IconButton } from '@material-ui/core';
+import { Visibility, VisibilityOff } from '@material-ui/icons';
+
+const PasswordTextField = ({ label, error, name, onChange }) => {
+  const [isPasswordVisible, setPasswordVisible] = useState(false);
+
+  const togglePasswordVisibility = () => {
+    setPasswordVisible(!isPasswordVisible);
+  };
+
+  return (
+    <TextField
+      error={!!error}
+      helperText={error}
+      label={label}
+      type={isPasswordVisible ? 'text' : 'password'}
+      name={name}
+      onChange={onChange}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <IconButton onClick={togglePasswordVisibility}>
+              {isPasswordVisible ? <Visibility /> : <VisibilityOff />}
+            </IconButton>
+          </InputAdornment>
+        )
+      }}
+    />
+  );
+};
+
+export default PasswordTextField;

From 0a6852f35e57b93f8118fa24f1aa1bcca5375454 Mon Sep 17 00:00:00 2001
From: Kirti Kamal <kirtikamal718@gmail.com>
Date: Sat, 15 Jun 2024 10:05:06 +0530
Subject: [PATCH 2/2] added PasswordTextField in login form and also fixed the
 suggested changes

---
 src/components/Account/Login/Login.component.js   | 3 ++-
 src/components/Account/SignUp/SignUp.component.js | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Account/Login/Login.component.js b/src/components/Account/Login/Login.component.js
index 8c9886004..adb00be88 100644
--- a/src/components/Account/Login/Login.component.js
+++ b/src/components/Account/Login/Login.component.js
@@ -19,6 +19,7 @@ import './Login.css';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import IconButton from '@material-ui/core/IconButton';
 import { Visibility, VisibilityOff } from '@material-ui/icons';
+import PasswordTextField from '../../UI/FormItems/PasswordTextField';
 
 export class Login extends Component {
   static propTypes = {
@@ -101,7 +102,7 @@ export class Login extends Component {
                   name="email"
                   onChange={handleChange}
                 />
-                <TextField
+                <PasswordTextField
                   error={errors.password}
                   label={intl.formatMessage(messages.password)}
                   type={isPasswordVisible ? 'text' : 'password'}
diff --git a/src/components/Account/SignUp/SignUp.component.js b/src/components/Account/SignUp/SignUp.component.js
index 0b2e7702b..4e6e85f88 100644
--- a/src/components/Account/SignUp/SignUp.component.js
+++ b/src/components/Account/SignUp/SignUp.component.js
@@ -117,14 +117,14 @@ export class SignUp extends Component {
                   />
                   <PasswordTextField
                     error={errors.password}
-                    label={intl.formatMessage(messages.password)}
+                    label={intl.formatMessage(messages.createYourPassword)}
                     name="password"
                     onChange={handleChange}
                   />
                   <PasswordTextField
-                    error={errors.confirmPassword}
-                    label={intl.formatMessage(messages.confirmPassword)}
-                    name="confirmPassword"
+                    error={errors.passwordConfirm}
+                    label={intl.formatMessage(messages.confirmYourPassword)}
+                    name="passwordConfirm"
                     onChange={handleChange}
                   />
                   <FormControlLabel