Merge pull request #51 from deriv-com/aizad/password-improvements

Aizad/ Improvement for Password Input

Author: shayan-deriv

lib/components/PasswordInput/PasswordMeter.scss

@@ -5,7 +5,7 @@ $ERROR: #ec3f3f;
 .deriv-password__meter__bar {
   height: 100%;
   border-radius: 0px 0px 4px 4px;
-  transition: "width 0.25s ease-in-out";
+  transition: width 0.25s ease-in-out;
 
   &__initial {
     background-color: $NEUTRAL;

lib/components/PasswordInput/index.tsx

@@ -1,6 +1,7 @@
 import React, {
   ChangeEvent,
   ComponentProps,
+  FocusEvent,
   useCallback,
   useMemo,
   useState,
@@ -40,11 +41,7 @@ export const validatePassword = (password: string) => {
 
 type InputProps = ComponentProps<typeof Input>;
 
-interface PasswordInputProps
-  extends Pick<
-    InputProps,
-    "value" | "onChange" | "label" | "id" | "autoComplete"
-  > {
+interface PasswordInputProps extends Omit<InputProps, "rightPlaceholder"> {
   hidePasswordMeter?: boolean;
   hint?: string;
 }
@@ -58,13 +55,12 @@ const PasswordVariant: Record<TScore, InputProps["variant"]> = {
 };
 
 export const PasswordInput = ({
-  autoComplete,
-  id,
-  label,
   value,
+  onBlur,
   onChange,
   hint,
   hidePasswordMeter,
+  ...rest
 }: PasswordInputProps) => {
   const [isTouched, setIsTouched] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
@@ -84,20 +80,21 @@ export const PasswordInput = ({
     [isTouched, onChange]
   );
 
-  const handleBlur = useCallback(() => {
-    if (!isTouched) {
-      setIsTouched(true);
-    }
-  }, [isTouched]);
+  const handleBlur = useCallback(
+    (e: FocusEvent<HTMLInputElement>) => {
+      onBlur?.(e);
+      if (!isTouched) {
+        setIsTouched(true);
+      }
+    },
+    [isTouched, onBlur]
+  );
 
   return (
     <div className="deriv-password">
       <Input
-        autoComplete={autoComplete}
-        id={id}
-        label={label}
-        type={showPassword ? "text" : "password"}
         value={value}
+        type={showPassword ? "text" : "password"}
         message={isTouched ? errorMessage : "" || hint}
         onChange={handleChange}
         onBlur={handleBlur}
@@ -110,6 +107,7 @@ export const PasswordInput = ({
             {showPassword ? <EyeIcon /> : <EyeIconSlash />}
           </button>
         }
+        {...rest}
       />
       {!hidePasswordMeter && <PasswordMeter score={score as TScore} />}
     </div>

src/stories/PasswordInput.stories.ts src/stories/PasswordInput.stories.tsx

@@ -1,27 +1,21 @@
 import { StoryObj, Meta } from "@storybook/react";
 import { PasswordInput } from "../../lib/main";
+import { useState } from "react";
 
 const meta = {
   title: "Components/PasswordInput",
   component: PasswordInput,
   parameters: { layout: "centered" },
   tags: ["autodocs"],
   args: {
-    autoComplete: "password",
-    id: "password",
     label: "Enter Password",
     value: "",
     onChange: () => {},
     hidePasswordMeter: false,
-    hint: "Password should have lower and uppercase English letters with numbers.",
+    hint: "This is a hint message",
   },
   argTypes: {
-    autoComplete: {
-      control: {
-        disable: true,
-      },
-    },
-    id: {
+    value: {
       control: {
         disable: true,
       },
@@ -49,5 +43,17 @@ export const Default: Story = {
     value: "",
     onChange: () => {},
     hidePasswordMeter: false,
+    hint: "This is a hint message",
+  },
+  render: (args) => {
+    const [value, setValue] = useState("");
+
+    return (
+      <PasswordInput
+        {...args}
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    );
   },
 };