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

A complete authentication solution for web applications.

'use client';
// react:
import { 
// react:
default as React, 
// hooks:
useRef, } from 'react';
// reusable-ui core:
import { 
// react helper hooks:
useEvent, useMergeEvents, } from '@reusable-ui/core'; // a set of reusable-ui packages which are responsible for building any component
// reusable-ui components:
import { ButtonIcon, 
// layout-components:
CardBody, 
// status-components:
Busy, ModalCard, useDialogMessage, } from '@reusable-ui/components'; // a set of official Reusable-UI components
// internal components:
import { 
// react components:
ButtonWithBusy, } from './ButtonWithBusy.js';
import { FieldEmail, } from './FieldEmail.js';
import { FieldPassword, } from './FieldPassword.js';
import { FieldPassword2, } from './FieldPassword2.js';
// internals:
import { 
// states:
useSignInState, } from './states/signInState.js';
import { 
// handlers:
handlePreventSubmit, } from './utilities.js';
export const TabReset = (props) => {
    // rest props:
    const { 
    // components:
    resetTitleComponent = React.createElement("h1", null, "Password Reset"), emailInputComponent, passwordInputComponent, passwordTooltipComponent, passwordValidationListComponent, passwordValidationListItemComponent, passwordValidationIconComponent, password2InputComponent, password2TooltipComponent, password2ValidationListComponent, password2ValidationListItemComponent, password2ValidationIconComponent, passwordResetButtonComponent = React.createElement(ButtonWithBusy, { busyType: 'recover', buttonComponent: React.createElement(ButtonIcon, { icon: 'save' }) }), tokenValidationDialogComponent = React.createElement(ModalCard, { theme: 'primary', backdropStyle: 'static', inheritEnabled: false }), } = props;
    // states:
    const { 
    // states:
    isResetSection, tokenVerified, isResetApplied, 
    // fields & validations:
    formRef, 
    // actions:
    doReset, } = useSignInState();
    // handlers:
    const passwordResetButtonHandleClickInternal = useEvent((event) => {
        // conditions:
        if (event.defaultPrevented)
            return; // the event was already handled by user => nothing to do
        event.preventDefault();
        // actions:
        doReset();
    });
    const passwordResetButtonHandleClick = useMergeEvents(
    // preserves the original `onClick` from `passwordResetButtonComponent`:
    passwordResetButtonComponent.props.onClick, 
    // actions:
    passwordResetButtonHandleClickInternal);
    // dialogs:
    const { showDialog, } = useDialogMessage();
    // effects:
    const shouldTokenValidationDialogShown = (!!tokenValidationDialogComponent // if no <Dialog> defined => nothing to display
        &&
            (tokenVerified === null) // if already verified => no need to display the <Dialog>
    );
    const shownTokenValidationDialogRef = useRef(null); // initially no <Dialog> was shown
    if ((!!shownTokenValidationDialogRef.current) !== shouldTokenValidationDialogShown) { // detect changes
        // close prev shown <Dialog> (if any):
        shownTokenValidationDialogRef.current?.closeDialog(null);
        // show a new <Dialog> (if needed):
        if (tokenValidationDialogComponent && shouldTokenValidationDialogShown) {
            shownTokenValidationDialogRef.current = showDialog(React.cloneElement(tokenValidationDialogComponent, 
            // props:
            {
                // global stackable:
                viewport: tokenValidationDialogComponent.props.viewport ?? formRef,
            }, 
            // children:
            (tokenValidationDialogComponent.props.children ?? React.createElement(CardBody, null,
                React.createElement("p", null,
                    React.createElement(Busy, null),
                    "\u00A0Validating password reset token...")))));
        } // if
    } // if
    // jsx:
    return (React.createElement("form", { 
        // refs:
        ref: isResetSection ? formRef : undefined, 
        // validations:
        noValidate: true, 
        // handlers:
        onSubmit: handlePreventSubmit },
        React.cloneElement(resetTitleComponent, 
        // props:
        {
            // classes:
            className: resetTitleComponent.props.className ?? 'resetTitle',
        }),
        React.createElement(FieldEmail
        // accessibilities:
        , { 
            // accessibilities:
            emailReadOnly: true, 
            // states:
            isActiveSection: isResetSection, isActionApplied: isResetSection, 
            // components:
            emailInputComponent: emailInputComponent, emailTooltipComponent: null }),
        React.createElement(FieldPassword
        // states:
        , { 
            // states:
            isActiveSection: isResetSection, isActionApplied: isResetApplied, 
            // components:
            passwordInputComponent: passwordInputComponent, passwordTooltipComponent: passwordTooltipComponent, passwordValidationListComponent: passwordValidationListComponent, passwordValidationListItemComponent: passwordValidationListItemComponent, passwordValidationIconComponent: passwordValidationIconComponent }),
        React.createElement(FieldPassword2
        // states:
        , { 
            // states:
            isActiveSection: isResetSection, isActionApplied: isResetApplied, 
            // components:
            passwordInputComponent: passwordInputComponent, passwordTooltipComponent: passwordTooltipComponent, passwordValidationListComponent: passwordValidationListComponent, passwordValidationListItemComponent: passwordValidationListItemComponent, passwordValidationIconComponent: passwordValidationIconComponent, password2InputComponent: password2InputComponent, password2TooltipComponent: password2TooltipComponent, password2ValidationListComponent: password2ValidationListComponent, password2ValidationListItemComponent: password2ValidationListItemComponent, password2ValidationIconComponent: password2ValidationIconComponent }),
        React.cloneElement(passwordResetButtonComponent, 
        // props:
        {
            // actions:
            type: passwordResetButtonComponent.props.type ?? 'submit',
            // classes:
            className: passwordResetButtonComponent.props.className ?? 'doReset',
            // handlers:
            onClick: passwordResetButtonHandleClick,
        }, 
        // children:
        passwordResetButtonComponent.props.children ?? 'Reset Password')));
};