Untitled

import { useState, useEffect } from "react";


function ChangePasswordForm() {
    // state for form content
    const [formContent, setFormContent] = useState({
        email: "klaudia@gmail.com",
        password: "",
        confirm_password: ""
    });

    // state for error handling
    const [formErrors, setFormErrors] = useState({
        password_valid: false
    })

    // state for password validation
    const [passwordErrors, setPasswordErrors] = useState({
        password_length: false,
        password_digit: false,
        password_capital: false,
        password_small: false,
        password_special: false,
        password_match: false
    })

    // state for submit button allowed
    const [submitAllowed, setSubmitAllowed] = useState({
        button: " disabled"
    })

    // handle changes to the form content
    function handleChange(event) {
        const { name, value } = event.target;
        // update based on inputs
        setFormContent(prevValue => {
            return {
                ...prevValue,
                [name]: value
            };
        });
    }

    // validate password valid
    useEffect(() => {
        if (passwordErrors.password_length &&
            passwordErrors.password_digit &&
            passwordErrors.password_capital &&
            passwordErrors.password_small &&
            passwordErrors.password_special &&
            passwordErrors.password_match
        ) {
        setFormErrors(() => {
            return {
            password_valid: true
            };
        });
        } else {
        setFormErrors(() => {
            return {
            password_valid: false
            };
        });
        }

    }, [passwordErrors.password_length,
        passwordErrors.password_digit,
        passwordErrors.password_capital,
        passwordErrors.password_small,
        passwordErrors.password_special,
        passwordErrors.password_match]);

    // validate submit button allowed
    useEffect(() => {
        if (formErrors.password_valid === true
        ) {
        setSubmitAllowed(() => {
            return {
            button: ""
            };
        });
        } else {
        setSubmitAllowed(() => {
            return {
            button: " disabled"
            };
        });
        }
    }, [formErrors]);

    // validate password length
    useEffect(() => {
        // regex pattern must be met
        const pattern = /^.{10,}$/;
        if (pattern.test(formContent.password) === false) {
        setPasswordErrors(prevValue => {
            return {
            ...prevValue,
            password_length: false
            };
        });
        } else {
        setPasswordErrors(prevValue => {
            return {
            ...prevValue,
            password_length: true
            };
        });
        }

    }, [formContent.password]);

    // validate password digit
    useEffect(() => {
        // regex pattern must be met
        const pattern = /\d/;
        if (pattern.test(formContent.password) === false) {
        setPasswordErrors(prevValue => {
            return {
            ...prevValue,
            password_digit: false
            };
        });
        } else {
        setPasswordErrors(prevValue => {
            return {
            ...prevValue,
            password_digit: true
            };
        });
        }

    }, [formContent.password]);

    // validate password capital
    useEffect(() => {
        // regex pattern must be met
        const pattern = /[A-Z]/;
        if (pattern.test(formContent.password) === false) {
        setPasswordErrors(prevValue => {
            return {
            ...prevValue,
            password_capital: false
            };
        });
        } else {
        setPasswordErrors(prevValue => {
            return {
            ...prevValue,
            password_capital: true
            };
        });
        }

    }, [formContent.password]);

    // validate password small
    useEffect(() => {
        // regex pattern must be met
        const pattern = /[a-z]/;
        if (pattern.test(formContent.password) === false) {
        setPasswordErrors(prevValue => {
            return {
            ...prevValue,
            password_small: false
            };
        });
        } else {
        setPasswordErrors(prevValue => {
            return {
            ...prevValue,
            password_small: true
            };
        });
        }

    }, [formContent.password]);

    // validate password special character
    useEffect(() => {
        // regex pattern must be met
        const pattern = /[!@#$£%^&*(),.?":{}|<>]/;
        if (pattern.test(formContent.password) === false) {
        setPasswordErrors(prevValue => {
            return {
            ...prevValue,
            password_special: false
            };
        });
        } else {
        setPasswordErrors(prevValue => {
            return {
            ...prevValue,
            password_special: true
            };
        });
        }

    }, [formContent.password]);

    // validate passwords match
    useEffect(() => {
        if (formContent.password.length === 0 || (formContent.password !== formContent.confirm_password)) {
        setPasswordErrors(prevValue => {
            return {
            ...prevValue,
            password_match: false
            };
        });
        } else {
        setPasswordErrors(prevValue => {
            return {
            ...prevValue,
            password_match: true
            };
        });
        }

    }, [formContent.password, formContent.confirm_password]);

    console.log(formErrors.password_valid)



    return (
        <>
            <section id="changePassword" className="changePassword vh-100 overflow-auto text-bg-dark py-5">
                <div className="container">
                    <div className="row">
                        <div className="col-md-8 offset-md-2">
                        {/* welcome headers */}
                        <div className="text-center mb-5">
                            <h4 className="text-uppercase fw-bold text-secondary">
                                Change Password
                            </h4>
                            <hr className="w-25 mx-auto" />
                            <p className="lead">Please change your password. You will need to use 
                                it the next time you log in.
                            </p>

                            {
                            (!formErrors.password_valid) && (
                                <div className="col-lg-8 offset-md-2">
                                    <div className="alert alert-primary">
                                        {!passwordErrors.password_length && (<p className="fs-6"><i className="fa-solid fa-xmark fa-bug fa-lg me-1"></i>Password length must be at least 10 characters.</p>)}
                                        {!passwordErrors.password_capital && (<p className="fs-6"><i className="fa-solid fa-xmark fa-bug fa-lg me-1"></i>Password must have at least 1 capital letter.</p>)}
                                        {!passwordErrors.password_small && (<p className="fs-6"><i className="fa-solid fa-xmark fa-bug fa-lg me-1"></i>Password must have at least 1 small letter.</p>)}
                                        {!passwordErrors.password_special && (<p className="fs-6"><i className="fa-solid fa-xmark fa-bug fa-lg me-1"></i>Password must have at least 1 special character.</p>)}
                                        {!passwordErrors.password_digit && (<p className="fs-6"><i className="fa-solid fa-xmark fa-bug fa-lg me-1"></i>Password must have at least 1 digit.</p>)}
                                        {!passwordErrors.password_match && (<p className="fs-6 mb-0"><i className="fa-solid fa-xmark fa-bug fa-lg me-1"></i>Passwords must match.</p>)}
                                    </div> 
                                </div>)
                            }
                            

                        </div>
                        {/* registration form */}
                        <form name="changePassword">
                            {/* email address */}
                            <div className="mb-5">
                            <input
                                type="email"
                                className="form-control bg-transparent border-top-0 border-start-0 border-end-0 rounded-0 border-muted text-white"
                                name="email"
                                value={formContent.email}
                                placeholder="Email Address"
                                disabled
                            />
                            </div>
                            {/* password */}
                            <div className="mb-5">
                            <input
                                onChange={handleChange}
                                type="password"
                                className="form-control bg-transparent border-top-0 border-start-0 border-end-0 rounded-0 border-muted text-white"
                                name="password"
                                value={formContent.password}
                                placeholder="Password"
                            />
                            </div>
                            {/* confirm password */}
                            <div className="mb-5">
                            <input
                                onChange={handleChange}
                                type="password"
                                className="form-control bg-transparent border-top-0 border-start-0 border-end-0 rounded-0 border-muted text-white"
                                name="confirm_password"
                                value={formContent.confirm_password}
                                placeholder="Confirm password"
                            />
                            </div>
                            {/* change password button */}
                            <div className="mb-5 d-grid">
                            <button type="button" className={`btn btn-primary text-white${submitAllowed.button}`}>
                                Submit
                            </button>
                            </div>
                        </form>
                        </div>
                    </div>

                    {/* footer could go there
                    <Footer /> */}

                </div>
            </section>
        </>
    );
}

export default ChangePasswordForm