@heymarco/next-auth/dist/components/TabSignUp.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 { FieldName, } from './FieldName.js';
import { FieldEmail, } from './FieldEmail.js';
import { FieldUsername, } from './FieldUsername.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 TabSignUp = (props) => {
    // rest props:
    const { 
    // components:
    signUpTitleComponent = React.createElement("h1", null, "Sign Up"), nameInputComponent, nameTooltipComponent, nameValidationListComponent, nameValidationListItemComponent, nameValidationIconComponent, emailInputComponent, emailTooltipComponent, emailValidationListComponent, emailValidationListItemComponent, emailValidationIconComponent, usernameInputComponent, usernameTooltipComponent, usernameValidationListComponent, usernameValidationListItemComponent, usernameValidationIconComponent, passwordInputComponent, passwordTooltipComponent, passwordValidationListComponent, passwordValidationListItemComponent, passwordValidationIconComponent, password2InputComponent, password2TooltipComponent, password2ValidationListComponent, password2ValidationListItemComponent, password2ValidationIconComponent, signUpButtonComponent = React.createElement(ButtonWithBusy, { busyType: 'signUp', buttonComponent: React.createElement(ButtonIcon, { icon: 'account_box' }) }), } = props;
    // states:
    const { 
    // states:
    isSignUpSection, isSignUpApplied, 
    // fields & validations:
    formRef, 
    // actions:
    doSignUp, } = useSignInState();
    // handlers:
    const signUpButtonHandleClickInternal = useEvent((event) => {
        // conditions:
        if (event.defaultPrevented)
            return; // the event was already handled by user => nothing to do
        event.preventDefault();
        // actions:
        doSignUp();
    });
    const signUpButtonHandleClick = useMergeEvents(
    // preserves the original `onClick` from `signUpButtonComponent`:
    signUpButtonComponent.props.onClick, 
    // actions:
    signUpButtonHandleClickInternal);
    // jsx:
    return (React.createElement("form", { 
        // refs:
        ref: isSignUpSection ? formRef : undefined, 
        // validations:
        noValidate: true, 
        // handlers:
        onSubmit: handlePreventSubmit },
        React.cloneElement(signUpTitleComponent, 
        // props:
        {
            // classes:
            className: signUpTitleComponent.props.className ?? 'signUpTitle',
        }),
        React.createElement(FieldName
        // states:
        , { 
            // states:
            isActiveSection: isSignUpSection, isActionApplied: isSignUpApplied, 
            // components:
            nameInputComponent: nameInputComponent, nameTooltipComponent: nameTooltipComponent, nameValidationListComponent: nameValidationListComponent, nameValidationListItemComponent: nameValidationListItemComponent, nameValidationIconComponent: nameValidationIconComponent }),
        React.createElement(FieldEmail
        // states:
        , { 
            // states:
            isActiveSection: isSignUpSection, isActionApplied: isSignUpApplied, 
            // components:
            emailInputComponent: emailInputComponent, emailTooltipComponent: emailTooltipComponent, emailValidationListComponent: emailValidationListComponent, emailValidationListItemComponent: emailValidationListItemComponent, emailValidationIconComponent: emailValidationIconComponent }),
        React.createElement(FieldUsername
        // states:
        , { 
            // states:
            isActiveSection: isSignUpSection, isActionApplied: isSignUpApplied, 
            // components:
            usernameInputComponent: usernameInputComponent, usernameTooltipComponent: usernameTooltipComponent, usernameValidationListComponent: usernameValidationListComponent, usernameValidationListItemComponent: usernameValidationListItemComponent, usernameValidationIconComponent: usernameValidationIconComponent }),
        React.createElement(FieldPassword
        // states:
        , { 
            // states:
            isActiveSection: isSignUpSection, isActionApplied: isSignUpApplied, 
            // components:
            passwordInputComponent: passwordInputComponent, passwordTooltipComponent: passwordTooltipComponent, passwordValidationListComponent: passwordValidationListComponent, passwordValidationListItemComponent: passwordValidationListItemComponent, passwordValidationIconComponent: passwordValidationIconComponent }),
        React.createElement(FieldPassword2
        // states:
        , { 
            // states:
            isActiveSection: isSignUpSection, isActionApplied: isSignUpApplied, 
            // components:
            passwordInputComponent: passwordInputComponent, passwordTooltipComponent: passwordTooltipComponent, passwordValidationListComponent: passwordValidationListComponent, passwordValidationListItemComponent: passwordValidationListItemComponent, passwordValidationIconComponent: passwordValidationIconComponent, password2InputComponent: password2InputComponent, password2TooltipComponent: password2TooltipComponent, password2ValidationListComponent: password2ValidationListComponent, password2ValidationListItemComponent: password2ValidationListItemComponent, password2ValidationIconComponent: password2ValidationIconComponent }),
        React.cloneElement(signUpButtonComponent, 
        // props:
        {
            // actions:
            type: signUpButtonComponent.props.type ?? 'submit',
            // classes:
            className: signUpButtonComponent.props.className ?? 'doSignUp',
            // handlers:
            onClick: signUpButtonHandleClick,
        }, 
        // children:
        signUpButtonComponent.props.children ?? 'Sign Up')));
};