From b396e3d526d0b742d634e591c3b126914d9ef267 Mon Sep 17 00:00:00 2001
From: Waseem <waseem.abbas@cofinity-x.com>
Date: Mon, 13 Jan 2025 15:52:45 +0100
Subject: [PATCH 1/2] chore: input component modified to be used as masked
 input as well

---
 src/components/basic/Input/Input.mdx | 13 ++++++++
 src/components/basic/Input/index.tsx | 48 ++++++++++++++++++----------
 2 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/src/components/basic/Input/Input.mdx b/src/components/basic/Input/Input.mdx
index de3063bd..d4d1f57a 100644
--- a/src/components/basic/Input/Input.mdx
+++ b/src/components/basic/Input/Input.mdx
@@ -64,6 +64,19 @@ import { Input } from '.'
     disabled={true}
     error={false}
   />
+
+     {' '}
+
+<br />
+### Masked Input
+
+<Input label="Label"
+  placeholder="Placeholder"
+  helperText="Helper"
+  error={false}
+  showToggle={true}
+/>
+
 </SharedThemeProvider>
 <br />
 <br />
diff --git a/src/components/basic/Input/index.tsx b/src/components/basic/Input/index.tsx
index c1ea527f..ada4adce 100644
--- a/src/components/basic/Input/index.tsx
+++ b/src/components/basic/Input/index.tsx
@@ -18,6 +18,7 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
+import { Visibility, VisibilityOff } from '@mui/icons-material'
 import ErrorOutline from '@mui/icons-material/ErrorOutline'
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
 import {
@@ -28,12 +29,15 @@ import {
   InputAdornment,
   Box,
   FormControl,
+  IconButton,
 } from '@mui/material'
+import { useState } from 'react'
 import { Tooltips } from '../ToolTips'
 
 interface InputProps extends Omit<TextFieldProps, 'variant'> {
   variant?: 'filled'
   tooltipMessage?: string
+  showToggle?: boolean
 }
 
 export const Input = ({
@@ -43,8 +47,14 @@ export const Input = ({
   helperText,
   error = false,
   tooltipMessage,
+  showToggle = false,
   ...props
 }: InputProps) => {
+  const [showPassword, setShowPassword] = useState(false)
+
+  const handleToggleVisibility = () => {
+    setShowPassword((prev) => !prev)
+  }
   return (
     <Box className="cx-input">
       <FormControl
@@ -89,23 +99,27 @@ export const Input = ({
           variant={variant}
           placeholder={placeholder}
           error={error}
-          InputProps={
-            error
-              ? {
-                  endAdornment: (
-                    <InputAdornment
-                      position="end"
-                      className="cx-form-control__input-adornment"
-                    >
-                      <ErrorOutline
-                        color="error"
-                        className="cx-form-control__input-adornment--error"
-                      />
-                    </InputAdornment>
-                  ),
-                }
-              : {}
-          }
+          type={showToggle ? (!showPassword ? 'password' : 'text') : 'text'}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                {showToggle ? (
+                  <IconButton
+                    onClick={handleToggleVisibility}
+                    edge="end"
+                    aria-label="toggle password visibility"
+                  >
+                    {showPassword ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                ) : error ? (
+                  <ErrorOutline
+                    color="error"
+                    className="cx-form-control__input-adornment--error"
+                  />
+                ) : null}
+              </InputAdornment>
+            ),
+          }}
           {...props}
         />
         {error && helperText && (

From 584770dc3c0acd875db9b053d086c90997555fd6 Mon Sep 17 00:00:00 2001
From: Waseem <waseem.abbas@cofinity-x.com>
Date: Tue, 14 Jan 2025 13:17:41 +0100
Subject: [PATCH 2/2] chore: resolved sonarcloud issues

---
 src/components/basic/Input/index.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/basic/Input/index.tsx b/src/components/basic/Input/index.tsx
index ada4adce..7524109d 100644
--- a/src/components/basic/Input/index.tsx
+++ b/src/components/basic/Input/index.tsx
@@ -99,11 +99,11 @@ export const Input = ({
           variant={variant}
           placeholder={placeholder}
           error={error}
-          type={showToggle ? (!showPassword ? 'password' : 'text') : 'text'}
+          type={showToggle && !showPassword ? 'password' : 'text'}
           InputProps={{
             endAdornment: (
               <InputAdornment position="end">
-                {showToggle ? (
+                {showToggle && (
                   <IconButton
                     onClick={handleToggleVisibility}
                     edge="end"
@@ -111,12 +111,13 @@ export const Input = ({
                   >
                     {showPassword ? <VisibilityOff /> : <Visibility />}
                   </IconButton>
-                ) : error ? (
+                )}
+                {error && (
                   <ErrorOutline
                     color="error"
                     className="cx-form-control__input-adornment--error"
                   />
-                ) : null}
+                )}
               </InputAdornment>
             ),
           }}