@heymarco/next-auth/dist/components/FieldPassword2.js

A complete authentication solution for web applications.

'use client';
// react:
import { 
// react:
default as React, } from 'react';
// reusable-ui core:
import { 
// react helper hooks:
useMergeRefs, } from '@reusable-ui/core'; // a set of reusable-ui packages which are responsible for building any component
// reusable-ui components:
import { Icon, PasswordInput, ListItem, List, Tooltip, } from '@reusable-ui/components'; // a set of official Reusable-UI components
// internal components:
import { 
// react components:
InputWithLabel, } from './InputWithLabel.js';
// internals:
import { 
// states:
useSignInState, } from './states/signInState.js';
import { 
// utilities:
getValidityTheme, getValidityIcon, } from './utilities.js';
export const FieldPassword2 = (props) => {
    // rest props:
    const { 
    // states:
    isActiveSection, isActionApplied, 
    // components:
    passwordInputComponent = React.createElement(InputWithLabel, { icon: 'lock', inputComponent: React.createElement(PasswordInput, null) }), passwordTooltipComponent = React.createElement(Tooltip, { theme: 'warning', floatingPlacement: 'top' }), passwordValidationListComponent = React.createElement(List, { listStyle: 'flat' }), passwordValidationListItemComponent = React.createElement(ListItem, { size: 'sm', outlined: true }), passwordValidationIconComponent = React.createElement(Icon, { size: 'sm', icon: undefined }), password2InputComponent = passwordInputComponent, password2TooltipComponent = passwordTooltipComponent, password2ValidationListComponent = passwordValidationListComponent, password2ValidationListItemComponent = passwordValidationListItemComponent, password2ValidationIconComponent = passwordValidationIconComponent, } = props;
    // states:
    const { 
    // constraints:
    passwordMinLength, passwordMaxLength, passwordHasUppercase, passwordHasLowercase, 
    // passwordProhibitedHint,
    // states:
    isBusy, 
    // fields & validations:
    userInteracted, password2Ref, password2, password2Handlers, password2Focused, password2Valid, password2ValidLength, password2ValidUppercase, password2ValidLowercase, password2ValidMatch, } = useSignInState();
    const specificValidations = {
        password2ValidLength,
        password2ValidUppercase,
        password2ValidLowercase,
        password2ValidMatch,
    };
    // validations:
    const passwordValidationMap = {
        Length: React.createElement(React.Fragment, null,
            "Must be ",
            passwordMinLength,
            "-",
            passwordMaxLength,
            " characters."),
        Uppercase: !!passwordHasUppercase && React.createElement(React.Fragment, null, "At least one capital letter."),
        Lowercase: !!passwordHasLowercase && React.createElement(React.Fragment, null, "At least one non-capital letter."),
        Match: React.createElement(React.Fragment, null, "Exact match to previous password."),
        // NotProhibited : passwordProhibitedHint,
    };
    // refs:
    const mergedPassword2InputRef = useMergeRefs(
    // preserves the original `elmRef` from `password2InputComponent`:
    password2InputComponent.props.elmRef, (isActiveSection ? password2Ref : undefined));
    // jsx:
    return (React.createElement(React.Fragment, null,
        React.cloneElement(password2InputComponent, 
        // props:
        {
            // refs:
            elmRef: mergedPassword2InputRef,
            // classes:
            className: password2InputComponent.props.className ?? 'password2',
            // accessibilities:
            placeholder: password2InputComponent.props.placeholder ?? 'Confirm New Password',
            // values:
            value: password2InputComponent.props.value ?? password2,
            // validations:
            isValid: password2InputComponent.props.isValid ?? (password2Valid === true),
            required: password2InputComponent.props.required ?? true,
            // formats:
            autoComplete: password2InputComponent.props.autoComplete ?? 'new-password',
            // handlers:
            ...password2Handlers,
        }),
        !!password2TooltipComponent && React.cloneElement(password2TooltipComponent, 
        // props:
        {
            // states:
            expanded: password2TooltipComponent.props.expanded ?? (password2Focused && userInteracted && !isBusy && isActiveSection && !isActionApplied),
            // floatable:
            floatingOn: password2TooltipComponent.props.floatingOn ?? password2Ref,
        }, 
        // children:
        /* <List> */
        React.cloneElement(password2ValidationListComponent, 
        // props:
        undefined, 
        // children:
        (password2ValidationListComponent.props.children ?? Object.entries(passwordValidationMap).map(([validationType, text], index) => {
            // conditions:
            if (!text)
                return null; // disabled => ignore
            // fn props:
            const isValid = specificValidations?.[`password2Valid${validationType}`];
            if (isValid === undefined)
                return null;
            // jsx:
            return React.cloneElement(password2ValidationListItemComponent, 
            // props:
            {
                // identifiers:
                key: password2ValidationListItemComponent.key ?? index,
                // variants:
                theme: password2ValidationListItemComponent.props.theme ?? getValidityTheme(isValid),
            }, 
            // children:
            password2ValidationListItemComponent.props.children ?? React.createElement(React.Fragment, null,
                React.cloneElement(password2ValidationIconComponent, 
                // props:
                {
                    // appearances:
                    icon: password2ValidationIconComponent.props.icon ?? getValidityIcon(isValid),
                }),
                "\u00A0",
                text));
        }))))));
};