Added option to disable password reveal functionality (#1093)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net> Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
minio · Nov 8, 2024 · 8746008 · 8746008
1 parent a0ae0dc
commit 8746008
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,
         ]}