feat: add component for password field

Author: eshankvaish

src/Assets/Icon/ic-visibility-off.svg

@@ -0,0 +1,52 @@
+import { useState } from 'react'
+import { DEFAULT_SECRET_PLACEHOLDER } from '@Shared/constants'
+import { ReactComponent as ICVisibilityOn } from '@Icons/ic-visibility-on.svg'
+import { ReactComponent as ICVisibilityOff } from '@Icons/ic-visibility-off.svg'
+import CustomInput from './CustomInput'
+import { CustomInputProps, PasswordFieldProps } from './types'
+
+const PasswordField = ({ onFocus, onBlur, shouldShowDefaultPlaceholderOnBlur, ...props }: PasswordFieldProps) => {
+    const [fieldType, setFieldType] = useState<CustomInputProps['type']>('password')
+
+    const isFieldTypePassword = fieldType === 'password'
+
+    const handleFocus: CustomInputProps['onFocus'] = (event) => {
+        if (event.target.value === DEFAULT_SECRET_PLACEHOLDER) {
+            // eslint-disable-next-line no-param-reassign
+            event.target.value = ''
+        }
+
+        onFocus?.(event)
+    }
+
+    const handleBlur: CustomInputProps['onBlur'] = (event) => {
+        if (shouldShowDefaultPlaceholderOnBlur && event.target.value === '') {
+            // eslint-disable-next-line no-param-reassign
+            event.target.value = DEFAULT_SECRET_PLACEHOLDER
+        }
+        setFieldType('password')
+        onBlur?.(event)
+    }
+
+    return (
+        <CustomInput
+            {...props}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            type={fieldType}
+            endIconButtonConfig={
+                props.value && props.value !== DEFAULT_SECRET_PLACEHOLDER
+                    ? {
+                          icon: isFieldTypePassword ? <ICVisibilityOn /> : <ICVisibilityOff />,
+                          onClick: () => {
+                              setFieldType((prevFieldType) => (prevFieldType === 'password' ? 'text' : 'password'))
+                          },
+                          ariaLabel: isFieldTypePassword ? 'Show password' : 'Hide password',
+                      }
+                    : null
+            }
+        />
+    )
+}
+
+export default PasswordField

src/Assets/Icon/ic-visibility-on.svg

@@ -15,4 +15,5 @@
  */
 
 export { default as CustomInput } from './CustomInput'
-export type { CustomInputProps } from './types'
+export { default as PasswordField } from './PasswordField'
+export type { CustomInputProps, PasswordFieldProps } from './types'

src/Shared/Components/CustomInput/PasswordField.tsx

@@ -21,10 +21,7 @@ import { ButtonComponentType, ButtonProps } from '../Button'
 
 export interface CustomInputProps
     extends Omit<FormFieldWrapperProps, 'children' | 'inputId'>,
-        Pick<
-            InputHTMLAttributes<HTMLInputElement>,
-            'onBlur' | 'disabled' | 'autoFocus' | 'onFocus' | 'type' | 'onKeyDown'
-        >,
+        Pick<InputHTMLAttributes<HTMLInputElement>, 'onBlur' | 'disabled' | 'autoFocus' | 'onFocus' | 'onKeyDown'>,
         Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'placeholder' | 'onChange' | 'value' | 'name'>> {
     /**
      * If false, the input is not trimmed on blur
@@ -38,8 +35,24 @@ export interface CustomInputProps
      * @default ComponentSizeType.large
      */
     size?: Extract<ComponentSizeType, ComponentSizeType.medium | ComponentSizeType.large>
-    endIconButtonConfig?: Pick<
-        ButtonProps<ButtonComponentType.button>,
-        'icon' | 'onClick' | 'disabled' | 'ariaLabel' | 'showAriaLabelInTippy' | 'style'
-    >
+    /**
+     * Type for the input
+     *
+     * Note: For password field, use PasswordField component
+     *
+     * @default 'text'
+     */
+    type?: Exclude<InputHTMLAttributes<HTMLInputElement>['type'], 'password'>
+    /**
+     * End icon button configuration
+     */
+    endIconButtonConfig?: Required<Pick<ButtonProps<ButtonComponentType.button>, 'icon' | 'onClick' | 'ariaLabel'>> &
+        Pick<ButtonProps<ButtonComponentType.button>, 'disabled' | 'showAriaLabelInTippy' | 'style'>
+}
+
+export interface PasswordFieldProps extends Omit<CustomInputProps, 'endIconButtonConfig' | 'type'> {
+    /**
+     * If true, the value is cleared & default placeholder is shown on blur
+     */
+    shouldShowDefaultPlaceholderOnBlur: boolean
 }