@heymarco/next-auth/dist/components/TabRecover.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:
useEvent, useMergeEvents, } from '@reusable-ui/core'; // a set of reusable-ui packages which are responsible for building any component
// reusable-ui components:
import { ButtonIcon, } from '@reusable-ui/components'; // a set of official Reusable-UI components
// internal components:
import { 
// react components:
ButtonWithBusy, } from './ButtonWithBusy.js';
import { FieldUsernameOrEmail, } from './FieldUsernameOrEmail.js';
// internals:
import { 
// states:
useSignInState, } from './states/signInState.js';
import { 
// handlers:
handlePreventSubmit, } from './utilities.js';
export const TabRecover = (props) => {
    // rest props:
    const { 
    // components:
    recoverTitleComponent = React.createElement("h1", null, "Forgot Password?"), usernameOrEmailInputComponent, sendRecoverLinkButtonComponent = React.createElement(ButtonWithBusy, { busyType: 'recover', buttonComponent: React.createElement(ButtonIcon, { icon: 'lock_open' }) }), } = props;
    // states:
    const { 
    // states:
    isRecoverSection, 
    // fields & validations:
    formRef, 
    // actions:
    doRecover, } = useSignInState();
    // handlers:
    const sendRecoverLinkButtonHandleClickInternal = useEvent((event) => {
        // conditions:
        if (event.defaultPrevented)
            return; // the event was already handled by user => nothing to do
        event.preventDefault();
        // actions:
        doRecover();
    });
    const sendRecoverLinkButtonHandleClick = useMergeEvents(
    // preserves the original `onClick` from `sendRecoverLinkButtonComponent`:
    sendRecoverLinkButtonComponent.props.onClick, 
    // actions:
    sendRecoverLinkButtonHandleClickInternal);
    // jsx:
    return (React.createElement("form", { 
        // refs:
        ref: isRecoverSection ? formRef : undefined, 
        // validations:
        noValidate: true, 
        // handlers:
        onSubmit: handlePreventSubmit },
        React.cloneElement(recoverTitleComponent, 
        // props:
        {
            // classes:
            className: recoverTitleComponent.props.className ?? 'recoverTitle',
        }),
        React.createElement(FieldUsernameOrEmail
        // states:
        , { 
            // states:
            isActiveSection: isRecoverSection, 
            // components:
            usernameOrEmailInputComponent: usernameOrEmailInputComponent }),
        React.cloneElement(sendRecoverLinkButtonComponent, 
        // props:
        {
            // actions:
            type: sendRecoverLinkButtonComponent.props.type ?? 'submit',
            // classes:
            className: sendRecoverLinkButtonComponent.props.className ?? 'doRecover',
            // handlers:
            onClick: sendRecoverLinkButtonHandleClick,
        }, 
        // children:
        sendRecoverLinkButtonComponent.props.children ?? 'Send Password Reset Link')));
};