@navinc/base-react-components/dist/use-password-strength.js

Nav's Pattern Library

import { useState } from 'react';
export const usePasswordStrength = () => {
    const [password, setPassword] = useState('');
    const [valid, setValid] = useState(false);
    const [missingConditions, setMissingConditions] = useState([]);
    const handleChange = (e) => {
        const newPassword = e.target.value;
        setPassword(newPassword);
        const requiredConditions = [
            { condition: /[a-z]/, message: 'lowercase' },
            { condition: /[A-Z]/, message: 'uppercase' },
            { condition: /\d/, message: 'number' },
            // special characters allowed per this article in Auth0:
            // https://community.auth0.com/t/special-characters-allowed-in-password/99086
            { condition: /[ !"#$%&'()*+,\-./:;<=>?@[\\\]^_`{|}~]/, message: 'special' },
        ];
        const missing = requiredConditions
            .filter(({ condition }) => !condition.test(newPassword))
            .map(({ message }) => message);
        if (newPassword.length >= 8 && missing.length <= 1) {
            setValid(true);
            setMissingConditions(missing);
        }
        else {
            setValid(false);
            setMissingConditions(missing);
        }
    };
    return { password, valid, missingConditions, handleChange };
};
//# sourceMappingURL=use-password-strength.js.map