chore: Add eye icon for password field

querybook/webapp/components/UnauthPage/LoginForm.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { Formik, Form, Field } from 'formik';
+import { Formik, Form } from 'formik';
 
 import ds from 'lib/datasource';
 import { Button } from 'ui/Button/Button';
-import { FormField } from 'ui/Form/FormField';
 import { Message } from 'ui/Message/Message';
 import { FormWrapper } from 'ui/Form/FormWrapper';
 import { SimpleField } from 'ui/FormikField/SimpleField';
@@ -39,9 +38,11 @@ export const LoginForm: React.FunctionComponent<ILoginFormProps> = ({
                 );
 
                 const passwordField = (
-                    <FormField label="Password">
-                        <Field type="password" name="password" />
-                    </FormField>
+                    <SimpleField
+                        type="input"
+                        name="password"
+                        inputType="password"
+                    />
                 );
 
                 const errorMessageDOM = errorMessage && (

querybook/webapp/components/UnauthPage/SignupForm.tsx

@@ -7,6 +7,7 @@ import { FormField } from 'ui/Form/FormField';
 import { Message } from 'ui/Message/Message';
 import { Button } from 'ui/Button/Button';
 import { FormWrapper } from 'ui/Form/FormWrapper';
+import { SimpleField } from 'ui/FormikField/SimpleField';
 
 export interface ISignupFormProps {
     onSuccessLogin: () => any;
@@ -62,12 +63,7 @@ export const SignupForm: React.FunctionComponent<ISignupFormProps> = ({
         >
             {({ handleSubmit, isSubmitting, isValid }) => {
                 const usernameField = (
-                    <FormField
-                        label="Username"
-                        error={() => <ErrorMessage name="username" />}
-                    >
-                        <Field type="username" name="username" />
-                    </FormField>
+                    <SimpleField type="input" name="username" />
                 );
 
                 const emailField = (
@@ -80,21 +76,19 @@ export const SignupForm: React.FunctionComponent<ISignupFormProps> = ({
                 );
 
                 const passwordField = (
-                    <FormField
-                        label="Password"
-                        error={() => <ErrorMessage name="password" />}
-                    >
-                        <Field type="password" name="password" />
-                    </FormField>
+                    <SimpleField
+                        type="input"
+                        name="password"
+                        inputType="password"
+                    />
                 );
 
                 const password2Field = (
-                    <FormField
-                        label="Confirm Password"
-                        error={() => <ErrorMessage name="password2" />}
-                    >
-                        <Field type="password" name="password2" />
-                    </FormField>
+                    <SimpleField
+                        type="input"
+                        name="password2"
+                        inputType="password"
+                    />
                 );
 
                 const errorMessageDOM = errorMessage && (

querybook/webapp/ui/DebouncedInput/DebouncedInput.stories.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import centered from '@storybook/addon-centered/react';
 
 import { DebouncedInput } from './DebouncedInput';
+import { DebouncedPasswordInput } from './DebouncedPasswordInput';
 
 export default {
     title: 'Form/DebouncedInput',
@@ -11,9 +12,13 @@ export default {
 export const _DebouncedInput = (args) => {
     const [text, setText] = useState('');
 
+    const { password, ...props } = args;
+
+    const InputComponent = password ? DebouncedPasswordInput : DebouncedInput;
+
     return (
         <>
-            <DebouncedInput
+            <InputComponent
                 inputProps={{
                     placeholder: 'placeholder',
                     className: 'input',
@@ -22,13 +27,14 @@ export const _DebouncedInput = (args) => {
                 onChange={setText}
                 value={text}
                 className="mb8"
-                {...args}
+                {...props}
             />
         </>
     );
 };
 
 _DebouncedInput.args = {
+    password: false,
     flex: true,
     transparent: false,
     autoAdjustWidth: false,

querybook/webapp/ui/DebouncedInput/DebouncedInput.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 
 import { useDebounceState } from 'hooks/redux/useDebounceState';
@@ -22,15 +22,44 @@ export interface IDebouncedInputProps extends IDebouncedInputStylingProps {
     onChange: (value: string) => any;
 }
 
+function useAdjustableWidth(
+    autoAdjustWidth: boolean,
+    inputRef: React.MutableRefObject<HTMLInputElement>,
+    value: string,
+    placeholder: string
+) {
+    placeholder = placeholder ?? '';
+
+    React.useEffect(() => {
+        const adjustInputSize = () => {
+            if (inputRef.current) {
+                inputRef.current.size = Math.max(
+                    1,
+                    value.length,
+                    placeholder.length
+                );
+            }
+        };
+
+        if (autoAdjustWidth) {
+            adjustInputSize();
+        }
+    }, [autoAdjustWidth, value, inputRef.current, placeholder]);
+}
+
 export const DebouncedInput: React.FunctionComponent<IDebouncedInputProps> = ({
     debounceTime = 500,
     debounceMethod = 'debounce',
+
+    // Input
     value = '',
-    className = '',
     autoAdjustWidth = false,
     inputProps = {},
     children,
     onChange,
+
+    // Styling
+    className = '',
     transparent,
     flex,
 }) => {
@@ -42,31 +71,13 @@ export const DebouncedInput: React.FunctionComponent<IDebouncedInputProps> = ({
             method: debounceMethod,
         }
     );
-
     const inputRef = React.useRef<HTMLInputElement>();
-
-    React.useEffect(() => {
-        const adjustInputSize = () => {
-            if (inputRef.current) {
-                const { placeholder = '' } = inputProps;
-
-                inputRef.current.size = Math.max(
-                    1,
-                    debouncedValue.length,
-                    placeholder.length
-                );
-            }
-        };
-
-        if (autoAdjustWidth) {
-            adjustInputSize();
-        }
-    }, [
+    useAdjustableWidth(
         autoAdjustWidth,
+        inputRef,
         debouncedValue,
-        inputRef.current,
-        inputProps.placeholder,
-    ]);
+        inputProps?.placeholder
+    );
 
     const onChangeFn = React.useCallback(
         (event: React.ChangeEvent<HTMLInputElement>) => {

querybook/webapp/ui/DebouncedInput/DebouncedPasswordInput.scss

@@ -0,0 +1,18 @@
+.DebouncedPasswordInput {
+    position: relative;
+    .password-eye-icon {
+        position: absolute;
+        right: 12px;
+        top: 50%;
+        transform: translate(0%, -50%);
+        opacity: 0;
+        transition: opacity 0.1s ease-in-out;
+        background-color: var(--bg-color);
+    }
+
+    &:hover {
+        .password-eye-icon {
+            opacity: 1;
+        }
+    }
+}

querybook/webapp/ui/DebouncedInput/DebouncedPasswordInput.tsx

@@ -0,0 +1,45 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+
+import { useToggleState } from 'hooks/useToggleState';
+import { DebouncedInput, IDebouncedInputProps } from './DebouncedInput';
+import { IconButton } from 'ui/Button/IconButton';
+import './DebouncedPasswordInput.scss';
+
+export const DebouncedPasswordInput: React.FC<IDebouncedInputProps> = (
+    props
+) => {
+    const [revealPassword, , toggleRevealPassword] = useToggleState(false);
+
+    const className = useMemo(
+        () =>
+            classNames({
+                [props.className]: props.className,
+                DebouncedPasswordInput: true,
+            }),
+        [props.className]
+    );
+
+    const inputProps = useMemo(
+        () => ({
+            ...props.inputProps,
+            type: revealPassword ? 'text' : 'password',
+        }),
+        [props.inputProps, revealPassword]
+    );
+
+    return (
+        <DebouncedInput
+            {...props}
+            className={className}
+            inputProps={inputProps}
+        >
+            <IconButton
+                className="password-eye-icon"
+                onClick={toggleRevealPassword}
+                icon={revealPassword ? 'eye-off' : 'eye'}
+                noPadding
+            />
+        </DebouncedInput>
+    );
+};

querybook/webapp/ui/FormikField/InputField.tsx

@@ -4,22 +4,28 @@ import {
     DebouncedInput,
     IDebouncedInputProps,
 } from 'ui/DebouncedInput/DebouncedInput';
+import { DebouncedPasswordInput } from 'ui/DebouncedInput/DebouncedPasswordInput';
 
 export interface IInputFieldProps extends Partial<IDebouncedInputProps> {
     name: string;
+    inputType?: 'text' | 'password';
 }
 
 export const InputField: React.FC<IInputFieldProps> = ({
     name,
+    inputType = 'text',
     ...inputProps
 }) => {
     const [_, meta, helpers] = useField(name);
 
     const { value } = meta;
     const { setValue } = helpers;
 
+    const InputComponent =
+        inputType === 'text' ? DebouncedInput : DebouncedPasswordInput;
+
     return (
-        <DebouncedInput
+        <InputComponent
             {...inputProps}
             value={inputProps.value ?? value}
             onChange={inputProps.onChange ?? setValue}

querybook/webapp/ui/SmartForm/SmartForm.tsx

@@ -6,6 +6,7 @@ import { getDefaultFormValue } from './formFunctions';
 import { Button } from 'ui/Button/Button';
 import { IconButton } from 'ui/Button/IconButton';
 import { DebouncedInput } from 'ui/DebouncedInput/DebouncedInput';
+import { DebouncedPasswordInput } from 'ui/DebouncedInput/DebouncedPasswordInput';
 import {
     FormField,
     FormFieldInputSection,
@@ -63,18 +64,19 @@ function SimpleFormField<T>({
             className: 'input',
         };
 
+        let InputComponent = DebouncedInput;
         if (fieldType === 'number') {
             inputProps['type'] = 'number';
         } else if (hidden) {
-            inputProps['type'] = 'password';
+            InputComponent = DebouncedPasswordInput;
         }
 
         if (description) {
             inputProps['placeholder'] = description;
         }
 
         controlDOM = (
-            <DebouncedInput
+            <InputComponent
                 value={(value as unknown) as string}
                 onChange={onFieldChange}
                 inputProps={inputProps}