chore: added custom error message to passwordInput component

Author: shayan-deriv

src/components/PasswordInput/PasswordConstants.ts

@@ -1,4 +1,4 @@
-export type TScore = 0 | 1 | 2 | 3 | 4;
+export type TScore = 0 | 1 | 2 | 3 | 4 | 5;
 
 export type passwordKeys =
     | "common"

src/components/PasswordInput/PasswordUtils.ts

@@ -31,8 +31,9 @@ export const isPasswordStrong = (password: string) => {
     );
 };
 
-export const calculateScore = (password: string) => {
+export const calculateScore = (password: string, customErrorMessage="") => {
     if (password?.length === 0) return 0;
+    if (customErrorMessage) return 5;
     if (!isPasswordValid(password)) return 1;
     if (
         !isPasswordStrong(password) &&

src/components/PasswordInput/index.tsx

@@ -3,6 +3,7 @@ import React, {
     ComponentProps,
     FocusEvent,
     useCallback,
+    useEffect,
     useMemo,
     useState,
 } from "react";
@@ -22,8 +23,8 @@ import { EyeIcon, EyeIconSlash } from "./PasswordIcon";
 import { PasswordMeter } from "./PasswordMeter";
 import "./PasswordInput.scss";
 
-export const validatePassword = (password: string) => {
-    const score = calculateScore(password);
+export const validatePassword = (password: string, customErrorMessage="") => {
+    const score = calculateScore(password, customErrorMessage);
     let errorMessage = "";
 
     const options = { dictionary: { ...dictionary } };
@@ -36,9 +37,14 @@ export const validatePassword = (password: string) => {
         errorMessage = passwordErrorMessage.invalidLength;
     } else if (!isPasswordValid(password)) {
         errorMessage = passwordErrorMessage.missingCharacter;
-    } else {
+    }
+    else if( customErrorMessage){
+        errorMessage = customErrorMessage;
+    }
+    else {
         errorMessage = warningMessages[feedback.warning as passwordKeys] ?? "";
     }
+
     return { errorMessage, score };
 };
 
@@ -47,6 +53,7 @@ type InputProps = ComponentProps<typeof Input>;
 interface PasswordInputProps extends Omit<InputProps, "rightPlaceholder"> {
     hidePasswordMeter?: boolean;
     hint?: string;
+    customErrorMessage?: string;
 }
 
 const PasswordVariant: Record<TScore, InputProps["variant"]> = {
@@ -55,6 +62,7 @@ const PasswordVariant: Record<TScore, InputProps["variant"]> = {
     2: "warning",
     3: "success",
     4: "success",
+    5: "error",
 };
 
 /**
@@ -86,19 +94,25 @@ export const PasswordInput = ({
     onBlur,
     onChange,
     value,
+    customErrorMessage="",
     ...rest
 }: PasswordInputProps) => {
+    useEffect(() => {
+        setBackendErrorMessage(customErrorMessage);
+    }, [customErrorMessage]);
     const [isTouched, setIsTouched] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
+    const [backendErrorMessage, setBackendErrorMessage] = useState(customErrorMessage);
 
     const { errorMessage, score } = useMemo(
-        () => validatePassword(value as string),
-        [value],
+        () => validatePassword(value as string, backendErrorMessage),
+        [value, backendErrorMessage],
     );
 
     const handleChange = useCallback(
         (e: ChangeEvent<HTMLInputElement>) => {
             onChange?.(e);
+            setBackendErrorMessage("");
             if (!isTouched) {
                 setIsTouched(true);
             }

stories/PasswordInput.stories.tsx

@@ -1,6 +1,7 @@
 import { StoryObj, Meta } from "@storybook/react";
 import { PasswordInput } from "../src/main";
 import { useState } from "react";
+import {Button} from "../src/main";
 
 const meta = {
     title: "Components/PasswordInput",
@@ -121,3 +122,31 @@ export const HidePasswordMeter: Story = {
         );
     },
 };
+
+export const customErrorMessage: Story = {
+    name: "Password Input with custom error message",
+    args: {
+        label: "Enter Password",
+        value: "",
+        onChange: () => {},
+        hidePasswordMeter: true,
+        hint: "This is a hint message",
+    },
+    render: (args) => {
+        const [value, setValue] = useState(args.value);
+        const [errorMessage, setErrorMessage] = useState("");
+
+
+        return (
+            <div className="theme--light" style={{display:"flex", flexDirection:"column"}}>
+                <PasswordInput
+                    {...args}
+                    value={value}
+                    customErrorMessage={errorMessage}
+                    onChange={(e) => setValue(e.target.value)}
+                />
+                <Button onClick={() => setErrorMessage("This is a custom error message")}>submit</Button>
+            </div>
+        );
+    },
+};