@brightlayer-ui/react-auth-workflow/components/PasswordRequirements/PasswordRequirements.js

Re-usable workflow components for Authentication and Registration within Eaton applications.

import React from 'react';
import { PasswordRequirementsCheck } from './PasswordRequirementsCheck.js';
import Box from '@mui/material/Box';
import { defaultPasswordRequirements } from '../../constants/index.js';
import { useTranslation } from 'react-i18next';
/**
 * Component that renders all of the password requirement line items with check indicators.
 *
 * @param {PasswordRequirementsProps} props - props of passwordRequirement component
 *
 * @category Component
 */
export const PasswordRequirements = (props) => {
    const { t } = useTranslation();
    const { passwordText, passwordRequirements = defaultPasswordRequirements(t), sx, ...otherProps } = props;
    return (React.createElement(Box, { sx: sx, ...otherProps }, passwordRequirements.map((req, ind) => (React.createElement(PasswordRequirementsCheck, { key: `password_requirement_${ind}`, label: req.description, isChecked: new RegExp(req.regex).test(passwordText) })))));
};