Formik Strong Password

 import { Form, Formik, Field, ErrorMessage } from "formik";

import * as Yup from "yup";
import React, { useState } from "react";

export function TestFormik() {
    const [password, setPassword] = useState("");

    // Validation Schema
    const validationSchema = Yup.object({
        email: Yup.string().email("Invalid Email").required("Please Input Email"),
        password: Yup.string().required("Please Input Password").min(8).max(20),
    });

    function LogIn(values) {
        alert(`Success! Email: ${values.email}, Password: ${values.password}`);
    }

    // Password Rules Checking
    const rules = [
        { regex: /[a-z]/, message: "At least one lowercase letter" },
        { regex: /[A-Z]/, message: "At least one uppercase letter" },
        { regex: /[0-9]/, message: "At least one number" },
        { regex: /[\W_]/, message: "At least one special character" },
        { regex: /^.{8,20}$/, message: "Password must be 8-20 characters long" },
    ];

    return (
        <Formik
            validationSchema={validationSchema}
            initialValues={{ email: "", password: "" }}
            onSubmit={LogIn}
        >
            {({ handleSubmit }) => (
                <Form onSubmit={handleSubmit}>
                    <div>
                        <label>Email:</label>
                        <Field name="email" type="email" />
                        <ErrorMessage name="email">
                            {(msg) => <p style={{ color: "red" }}>{msg}</p>}
                        </ErrorMessage>
                    </div>

                    <div>
                        <label>Password:</label>
                        <Field
                            name="password"
                            type="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                        />
                        <ErrorMessage name="password">
                            {(msg) => <p style={{ color: "red" }}>{msg}</p>}
                        </ErrorMessage>

                        {/* Password Rules Dialog */}
                        <div style={{
                            marginTop: "10px",
                            padding: "10px",
                            border: "1px solid gray",
                            borderRadius: "5px",
                            background: "#f8f9fa"
                        }}>
                            <p><strong>Password must contain:</strong></p>
                            <ul style={{ listStyleType: "none", padding: 0 }}>
                                {rules.map((rule, index) => (
                                    // <li key={index} style={{
                                    //     color: rule.regex.test(password) ? "green" : "red",
                                    //     fontWeight: rule.regex.test(password) ? "bold" : "normal"
                                    // }}>
                                    //     {rule.regex.test(password) ? "✔" : "✖"} {rule.message}
                                    // </li>
                                    !rule.regex.test(password)&&<li style={{color:"red"}}>
                                        "✖"{rule.message}
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </div>

                    <button type="submit">Log In</button>
                </Form>
            )}
        </Formik>
    );
}