From 2bfbc77e1285ad283f72110578aec032c6a6b25a Mon Sep 17 00:00:00 2001
From: Benjamin Perez <benjamin@bexsoft.net>
Date: Fri, 8 Nov 2024 12:37:40 -0600
Subject: [PATCH] Added option to disable password reveal functionality

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
---
 src/components/InputBox/InputBox.stories.tsx | 9 +++++++++
 src/components/InputBox/InputBox.styles.ts   | 3 +++
 src/components/InputBox/InputBox.types.ts    | 1 +
 src/components/InputBox/index.tsx            | 7 +++++--
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/InputBox/InputBox.stories.tsx b/src/components/InputBox/InputBox.stories.tsx
index 93f716b7b..c4a292e35 100644
--- a/src/components/InputBox/InputBox.stories.tsx
+++ b/src/components/InputBox/InputBox.stories.tsx
@@ -91,6 +91,15 @@ PasswordInput.args = {
   type: "password",
 };
 
+export const PasswordInputRevealDisabled = Template.bind({});
+PasswordInputRevealDisabled.args = {
+  label: "An input box",
+  required: true,
+  tooltip: "Tooltip text",
+  type: "password",
+  passwordRevealEnabled: false,
+};
+
 export const WithOverlayIcon = Template.bind({});
 WithOverlayIcon.args = {
   label: "An input box",
diff --git a/src/components/InputBox/InputBox.styles.ts b/src/components/InputBox/InputBox.styles.ts
index 6e85078b1..3112a916e 100644
--- a/src/components/InputBox/InputBox.styles.ts
+++ b/src/components/InputBox/InputBox.styles.ts
@@ -192,6 +192,9 @@ export const containerSizeSmall = css({
 });
 
 export const containerOverlayIcon = css({
+  "& input": {
+    paddingRight: 37,
+  },
   "& .accessoryIcon": {
     right: 37,
   },
diff --git a/src/components/InputBox/InputBox.types.ts b/src/components/InputBox/InputBox.types.ts
index 412b4a099..b59f4a920 100644
--- a/src/components/InputBox/InputBox.types.ts
+++ b/src/components/InputBox/InputBox.types.ts
@@ -43,4 +43,5 @@ export interface InputBoxProps
   sizeMode?: InputBoxSize;
   orientation?: InputBoxOrientation;
   disableErrorUntilFocus?: boolean;
+  passwordRevealEnabled?: boolean;
 }
diff --git a/src/components/InputBox/index.tsx b/src/components/InputBox/index.tsx
index 2f548267f..5a8ea2f51 100644
--- a/src/components/InputBox/index.tsx
+++ b/src/components/InputBox/index.tsx
@@ -63,6 +63,7 @@ const Inputdiv = React.forwardRef<
       onFocus,
       disableErrorUntilFocus = false,
       children,
+      passwordRevealEnabled = true,
       value,
       ...props
     },
@@ -86,7 +87,7 @@ const Inputdiv = React.forwardRef<
     let inputdivWrapperIcon = overlayIcon;
     let inputdivWrapperType = type;
 
-    if (type === "password" && !overlayIcon) {
+    if (type === "password" && passwordRevealEnabled && !overlayIcon) {
       inputdivWrapperIcon = toggleTextInput ? <EyeOffIcon /> : <EyeIcon />;
       inputdivWrapperType = toggleTextInput ? "text" : "password";
     }
@@ -110,7 +111,9 @@ const Inputdiv = React.forwardRef<
         css={[
           containerStyles,
           sizeMode === "small" ? containerSizeSmall : {},
-          overlayIcon || type === "password" ? containerOverlayIcon : {},
+          overlayIcon || (type === "password" && passwordRevealEnabled)
+            ? containerOverlayIcon
+            : {},
           css({ flexDirection: orientation === "vertical" ? "column" : "row" }),
           overrideThemes,
         ]}