feat: update example

src/PasswordStrengthInput.tsx

@@ -24,6 +24,13 @@ export type PasswordsComplexityPass = {
   message: string;
 };
 
+export type ErrorMessages = {
+  minLength: string;
+  lowerCase: string;
+  upperCase: string;
+  number: string;
+  specialChar: string;
+}
 
 export type PasswordStrengthInputProps = {
   className?: string;
@@ -33,6 +40,7 @@ export type PasswordStrengthInputProps = {
   strengthLabelClassName?: string;
   hidePasswordIcon?: ReactNode;
   showPasswordIcon?: ReactNode;
+  errorMessages?: ErrorMessages;
 };
 
 
@@ -44,6 +52,7 @@ const PasswordStrengthInput =  forwardRef<HTMLDivElement, PasswordStrengthInputP
   strengthLabelClassName,
   hidePasswordIcon,
   showPasswordIcon,
+  errorMessages,
   ...rest
 }, ref) => {
   const [errors, setErrors] = useState<PasswordsComplexityPass[]>([]);
@@ -56,7 +65,8 @@ const PasswordStrengthInput =  forwardRef<HTMLDivElement, PasswordStrengthInputP
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target;
 
-    const newErrors = getPasswordScoreAndCriteria(value).errorMessages || [];
+    const result = getPasswordScoreAndCriteria(value, errorMessages);
+    const newErrors = result.errorMessages || [];
     setErrors(newErrors);
 
     rest.onChange?.(event);

src/dev/App.tsx

@@ -9,6 +9,13 @@ const App = () => {
       <Container>
         <PasswordStrengthInput
           className='input'
+          errorMessages={{
+            minLength: 'Devrait contenir au moins 8 caractères',
+            lowerCase: 'Devrait contenir au moins une lettre minuscule',
+            upperCase: 'Devrait contenir au moins une lettre majuscule',
+            number: 'Devrait contenir au moins un chiffre',
+            specialChar: 'Devrait contenir au moins un caractère spécial',
+          }}
           options={{
             tooWeak: {
               label: 'Too weak 2',

src/utils.ts

@@ -1,13 +1,21 @@
-import { PasswordsComplexityPass } from "./PasswordStrengthInput";
+import { ErrorMessages, PasswordsComplexityPass } from "./PasswordStrengthInput";
 
 type ComplexPasswordErrors = {
   [key: number]: PasswordsComplexityPass;
 }
+
 type PasswordScoreAndCriteria = {
   errorMessages?: PasswordsComplexityPass[];
   allChecksPassed: boolean;
 }
-export const getPasswordScoreAndCriteria = (password: string): PasswordScoreAndCriteria => {
+export const getPasswordScoreAndCriteria = (password: string, message?: ErrorMessages): PasswordScoreAndCriteria => {
+  const {
+    minLength = "Must be at least 8 characters",
+    lowerCase = "Must contain at least one lowercase letter",
+    upperCase = "Must contain at least one uppercase letter",
+    number = "Must contain at least one number",
+    specialChar = "Must contain at least one special character"
+  } = message || {};
 
   if (!password) return { allChecksPassed: false};
 
@@ -28,11 +36,11 @@ export const getPasswordScoreAndCriteria = (password: string): PasswordScoreAndC
   ];
 
   const errorMessages: ComplexPasswordErrors = {
-    1: { pass: false, message: "Must be at least 8 characters" },
-    2: { pass: false, message: "Must contain at least one lowercase letter" },
-    3: { pass: false, message: "Must contain at least one uppercase letter" },
-    4: { pass: false, message: "Must contain at least one number" },
-    5: { pass: false, message: "Must contain at least one special character" },
+    1: { pass: false, message: minLength },
+    2: { pass: false, message: lowerCase },
+    3: { pass: false, message: upperCase },
+    4: { pass: false, message: number },
+    5: { pass: false, message: specialChar },
   };
 
   let allChecksPassed: boolean = false;