@joelbarron/react-web-dev-kit 0.1.9 → 0.1.10

package/dist/auth/forms/sign-in/AuthOtpSignInForm.js

@@ -0,0 +1,227 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import ArrowBackOutlinedIcon from '@mui/icons-material/ArrowBackOutlined';
+import Alert from '@mui/material/Alert';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import Stack from '@mui/material/Stack';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { JBSelectField, JBTextField } from '../../../forms';
+import { COUNTRY_CALLING_CODE_OPTIONS, DEFAULT_OTP_COUNTRY_CODE } from '../../constants';
+import { AuthPrimaryButton, AuthSecondaryButton } from '../../ui';
+import { parseAuthError } from '../errorParser';
+const otpSchema = z.object({
+    countryCode: z.string().nonempty('Selecciona la lada'),
+    phone: z.string().nonempty('Debes ingresar tu teléfono'),
+    code: z.string().optional()
+});
+export function AuthOtpSignInForm(props) {
+    const { defaultValues, countryCodeOptions, requestRoleSelection, countryCodes, loading = false, onRequestOtp, onVerifyOtp, onBackToPassword } = props;
+    const resolvedCountryCodeOptions = countryCodeOptions ??
+        (countryCodes?.length
+            ? countryCodes.map((code) => ({ value: code, label: code }))
+            : COUNTRY_CALLING_CODE_OPTIONS);
+    const defaultCountryCode = resolvedCountryCodeOptions.some((item) => item.value === DEFAULT_OTP_COUNTRY_CODE)
+        ? DEFAULT_OTP_COUNTRY_CODE
+        : `${resolvedCountryCodeOptions[0]?.value ?? DEFAULT_OTP_COUNTRY_CODE}`;
+    const [otpRequested, setOtpRequested] = useState(false);
+    const [infoMessage, setInfoMessage] = useState(null);
+    const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
+    const [pendingOtpRequestValues, setPendingOtpRequestValues] = useState(null);
+    const [shouldSelectRoleOnVerify, setShouldSelectRoleOnVerify] = useState(false);
+    const { control, formState, handleSubmit, setError, clearErrors, watch } = useForm({
+        mode: 'onChange',
+        defaultValues: {
+            countryCode: defaultValues?.countryCode ?? defaultCountryCode,
+            phone: defaultValues?.phone ?? '',
+            code: defaultValues?.code ?? ''
+        },
+        resolver: zodResolver(otpSchema)
+    });
+    const { errors, isSubmitting } = formState;
+    const countryCodeValue = watch('countryCode');
+    const phoneValue = watch('phone');
+    const codeValue = watch('code');
+    const isLoading = loading || isSubmitting;
+    const isRequestOtpButtonDisabled = isLoading || !countryCodeValue?.trim() || !phoneValue?.trim();
+    const isVerifyButtonDisabled = isLoading || !countryCodeValue?.trim() || !phoneValue?.trim() || !codeValue?.trim();
+    useEffect(() => {
+        const subscription = watch((_value, { name }) => {
+            if (name) {
+                clearErrors(name);
+            }
+            clearErrors('root');
+        });
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [watch, clearErrors]);
+    function parseBooleanLike(value) {
+        if (typeof value === 'boolean') {
+            return value;
+        }
+        if (typeof value === 'string') {
+            const normalized = value.trim().toLowerCase();
+            if (normalized === 'true') {
+                return true;
+            }
+            if (normalized === 'false') {
+                return false;
+            }
+        }
+        if (typeof value === 'number') {
+            if (value === 1) {
+                return true;
+            }
+            if (value === 0) {
+                return false;
+            }
+        }
+        return undefined;
+    }
+    function getUserExistsFromRecord(record) {
+        const direct = parseBooleanLike(record.userExist) ??
+            parseBooleanLike(record.userExists) ??
+            parseBooleanLike(record.user_exist) ??
+            parseBooleanLike(record.user_exists);
+        if (typeof direct === 'boolean') {
+            return direct;
+        }
+        const nestedCandidates = [record.data, record.result, record.payload];
+        for (const candidate of nestedCandidates) {
+            if (candidate && typeof candidate === 'object') {
+                const nested = getUserExistsFromRecord(candidate);
+                if (typeof nested === 'boolean') {
+                    return nested;
+                }
+            }
+        }
+        return undefined;
+    }
+    function getUserExistsFromResponse(response) {
+        if (!response || typeof response !== 'object') {
+            return undefined;
+        }
+        return getUserExistsFromRecord(response);
+    }
+    function applySubmitError(error) {
+        const parsed = parseAuthError(error);
+        const allowedFields = ['countryCode', 'phone', 'code'];
+        Object.entries(parsed.fieldErrors).forEach(([field, message]) => {
+            if (allowedFields.includes(field)) {
+                setError(field, {
+                    type: 'manual',
+                    message
+                });
+                return;
+            }
+            setError('root', {
+                type: 'manual',
+                message
+            });
+        });
+        if (parsed.rootMessage) {
+            setError('root', {
+                type: 'manual',
+                message: parsed.rootMessage
+            });
+            return;
+        }
+        setError('root', {
+            type: 'manual',
+            message: otpRequested ? 'Código OTP inválido.' : 'No se pudo solicitar el código OTP.'
+        });
+    }
+    async function verifyOtp(values, selectedRole) {
+        const normalizedPhone = `${values.countryCode}${values.phone}`.replace(/\s+/g, '');
+        if (!values.code) {
+            setError('code', { type: 'manual', message: 'Debes ingresar el código OTP' });
+            return;
+        }
+        await onVerifyOtp({
+            phone: normalizedPhone,
+            code: values.code,
+            role: selectedRole
+        });
+    }
+    async function requestOtp(values) {
+        const normalizedPhone = `${values.countryCode}${values.phone}`.replace(/\s+/g, '');
+        const response = await onRequestOtp({ phone: normalizedPhone });
+        const userExists = getUserExistsFromResponse(response);
+        setShouldSelectRoleOnVerify(Boolean(requestRoleSelection) && userExists === false);
+        setOtpRequested(true);
+        setInfoMessage('Código SMS enviado.');
+    }
+    async function onSubmit(values) {
+        try {
+            if (!otpRequested) {
+                setPendingOtpRequestValues(values);
+                setIsConfirmDialogOpen(true);
+                return;
+            }
+            let selectedRole;
+            if (shouldSelectRoleOnVerify && requestRoleSelection) {
+                selectedRole = await requestRoleSelection();
+                if (!selectedRole) {
+                    return;
+                }
+            }
+            await verifyOtp(values, selectedRole);
+        }
+        catch (error) {
+            applySubmitError(error);
+        }
+    }
+    async function onConfirmOtpRequest() {
+        if (!pendingOtpRequestValues) {
+            setIsConfirmDialogOpen(false);
+            return;
+        }
+        try {
+            setError('root', {
+                type: 'manual',
+                message: ''
+            });
+            await requestOtp(pendingOtpRequestValues);
+            setIsConfirmDialogOpen(false);
+            setPendingOtpRequestValues(null);
+        }
+        catch (error) {
+            setIsConfirmDialogOpen(false);
+            const parsed = parseAuthError(error);
+            if (parsed.rootMessage) {
+                setError('root', {
+                    type: 'manual',
+                    message: parsed.rootMessage
+                });
+                return;
+            }
+            setError('root', {
+                type: 'manual',
+                message: 'No se pudo solicitar el código OTP.'
+            });
+        }
+    }
+    function onChangePhoneNumber() {
+        setOtpRequested(false);
+        setInfoMessage(null);
+        setPendingOtpRequestValues(null);
+        setIsConfirmDialogOpen(false);
+        setShouldSelectRoleOnVerify(false);
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("form", { name: "loginFormOtp", noValidate: true, style: { display: 'flex', width: '100%', flexDirection: 'column', justifyContent: 'center', paddingTop: 4 }, onSubmit: handleSubmit(onSubmit), children: [_jsxs(Stack, { direction: "row", spacing: 2, sx: { mb: 3 }, children: [_jsx(JBSelectField, { control: control, name: "countryCode", label: "Lada", variant: "outlined", sx: { width: 184 }, options: resolvedCountryCodeOptions, required: true, disabled: otpRequested }), _jsx(JBTextField, { control: control, name: "phone", label: "Tel\u00E9fono", autoFocus: true, type: "tel", variant: "outlined", required: true, fullWidth: true, disabled: otpRequested })] }), otpRequested ? (_jsx(JBTextField, { control: control, name: "code", sx: { mb: 3 }, label: "C\u00F3digo OTP", type: "text", variant: "outlined", required: true, fullWidth: true })) : null, infoMessage ? (_jsx(Alert, { sx: { mb: 2 }, severity: "info", children: infoMessage })) : null, errors.root?.message ? (_jsx(Alert, { sx: { mb: 2 }, severity: "error", children: errors.root.message })) : null, !otpRequested ? (_jsx(AuthPrimaryButton, { sx: { mt: 2 }, "aria-label": "Solicitar c\u00F3digo OTP", disabled: isRequestOtpButtonDisabled, loading: isLoading, loadingLabel: "Solicitando OTP...", type: "submit", size: "large", children: "Solicitar OTP" })) : null, otpRequested ? (_jsxs(_Fragment, { children: [_jsx(AuthPrimaryButton, { sx: { mt: 2 }, "aria-label": "Verificar c\u00F3digo OTP", disabled: isVerifyButtonDisabled, loading: isLoading, loadingLabel: "Verificando OTP...", type: "submit", size: "large", children: "Verificar OTP" }), _jsx(AuthSecondaryButton, { sx: { mt: 2 }, type: "button", onClick: onChangePhoneNumber, children: "Cambiar n\u00FAmero" })] })) : null, _jsx(AuthSecondaryButton, { sx: { mt: 2 }, type: "button", startIcon: _jsx(ArrowBackOutlinedIcon, { fontSize: "small" }), onClick: onBackToPassword, children: "Regresar a iniciar sesi\u00F3n" })] }), _jsxs(Dialog, { open: isConfirmDialogOpen, onClose: () => {
+                    setIsConfirmDialogOpen(false);
+                }, fullWidth: true, maxWidth: "xs", children: [_jsx(DialogTitle, { children: "Confirmar n\u00FAmero" }), _jsx(DialogContent, { children: _jsx(DialogContentText, { children: `¿Es correcto este número? ${pendingOtpRequestValues
+                                ? `${pendingOtpRequestValues.countryCode}${pendingOtpRequestValues.phone}`.replace(/\s+/g, '')
+                                : ''}` }) }), _jsxs(DialogActions, { children: [_jsx(AuthSecondaryButton, { sx: { mt: 0 }, type: "button", onClick: () => {
+                                    setIsConfirmDialogOpen(false);
+                                    setPendingOtpRequestValues(null);
+                                }, children: "Cancelar" }), _jsx(AuthPrimaryButton, { sx: { mt: 0 }, type: "button", onClick: () => {
+                                    void onConfirmOtpRequest();
+                                }, children: "Confirmar" })] })] })] }));
+}

package/dist/auth/forms/sign-in/AuthPasswordSignInForm.d.ts

@@ -0,0 +1,22 @@
+import type { AuthLinkComponent } from '../../ui';
+export type AuthPasswordSignInFormValues = {
+    login: string;
+    password: string;
+    remember?: boolean;
+};
+export type AuthPasswordSignInFormProps = {
+    defaultValues?: Partial<AuthPasswordSignInFormValues>;
+    loading?: boolean;
+    disabled?: boolean;
+    submitLabel?: string;
+    forgotPasswordPath?: string;
+    rememberLabel?: string;
+    loginLabel?: string;
+    passwordLabel?: string;
+    accountConfirmationPath?: string;
+    verifyAccountLabel?: string;
+    LinkComponent?: AuthLinkComponent;
+    onSubmit: (values: AuthPasswordSignInFormValues) => unknown | Promise<unknown>;
+};
+export declare function AuthPasswordSignInForm(props: AuthPasswordSignInFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AuthPasswordSignInForm.d.ts.map

package/dist/auth/forms/sign-in/AuthPasswordSignInForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthPasswordSignInForm.d.ts","sourceRoot":"","sources":["../../../../src/auth/forms/sign-in/AuthPasswordSignInForm.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAKlD,MAAM,MAAM,4BAA4B,GAAG;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC,4BAA4B,CAAC,CAAC;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,QAAQ,EAAE,CAAC,MAAM,EAAE,4BAA4B,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;CAChF,CAAC;AAwBF,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,2CA0OxE"}

package/dist/auth/forms/sign-in/AuthPasswordSignInForm.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';
+import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
+import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { JBCheckboxField, JBTextField } from '../../../forms';
+import { AuthPrimaryButton, AuthSecondaryButton } from '../../ui';
+import { getDjangoLikePasswordError } from '../password/passwordValidation';
+import { parseAuthError } from '../errorParser';
+const signInSchema = z.object({
+    login: z.string().nonempty('Debes ingresar tu usuario o correo'),
+    password: z.string().superRefine((value, ctx) => {
+        if (!value) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: 'Debes ingresar tu contraseña.'
+            });
+            return;
+        }
+        const passwordError = getDjangoLikePasswordError(value);
+        if (passwordError) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: passwordError
+            });
+        }
+    }),
+    remember: z.boolean().optional()
+});
+export function AuthPasswordSignInForm(props) {
+    const { defaultValues, loading = false, disabled = false, submitLabel = 'Iniciar sesión', forgotPasswordPath = '/forgot-password', rememberLabel = 'Recuérdame', loginLabel = 'Usuario o correo', passwordLabel = 'Contraseña', accountConfirmationPath = '/verify-email', verifyAccountLabel = 'Ir a verificar cuenta', LinkComponent, onSubmit } = props;
+    const { control, formState, handleSubmit, setError, clearErrors, watch } = useForm({
+        mode: 'onChange',
+        defaultValues: {
+            login: defaultValues?.login ?? '',
+            password: defaultValues?.password ?? '',
+            remember: defaultValues?.remember ?? true
+        },
+        resolver: zodResolver(signInSchema)
+    });
+    const { errors, isSubmitting } = formState;
+    const loginValue = watch('login');
+    const passwordValue = watch('password');
+    const isLoading = loading || isSubmitting;
+    const [showPassword, setShowPassword] = useState(false);
+    useEffect(() => {
+        const subscription = watch((_value, { name }) => {
+            if (name) {
+                clearErrors(name);
+            }
+            clearErrors('root');
+        });
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [watch, clearErrors]);
+    const normalizeText = (value) => value
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .toLowerCase();
+    const shouldShowVerifyAccountCta = (message) => {
+        if (!message) {
+            return false;
+        }
+        const normalizedMessage = normalizeText(message);
+        return normalizedMessage.includes('no esta verificada') || normalizedMessage.includes('not verified');
+    };
+    const getAccountConfirmationTo = () => {
+        const login = loginValue?.trim() ?? '';
+        const isEmail = login.includes('@');
+        if (!isEmail) {
+            return accountConfirmationPath;
+        }
+        return `${accountConfirmationPath}?email=${encodeURIComponent(login)}`;
+    };
+    async function onSubmitForm(values) {
+        try {
+            await onSubmit(values);
+        }
+        catch (error) {
+            const parsed = parseAuthError(error, {
+                username: 'login'
+            });
+            const allowedFields = ['login', 'password', 'remember'];
+            Object.entries(parsed.fieldErrors).forEach(([field, message]) => {
+                if (allowedFields.includes(field)) {
+                    setError(field, {
+                        type: 'manual',
+                        message
+                    });
+                    return;
+                }
+                setError('root', {
+                    type: 'manual',
+                    message
+                });
+            });
+            if (parsed.rootMessage) {
+                setError('root', {
+                    type: 'manual',
+                    message: parsed.rootMessage
+                });
+                return;
+            }
+            setError('root', {
+                type: 'manual',
+                message: 'No se pudo iniciar sesión. Inténtalo de nuevo.'
+            });
+        }
+    }
+    return (_jsxs("form", { name: "loginForm", noValidate: true, style: { display: 'flex', width: '100%', flexDirection: 'column', justifyContent: 'center', paddingTop: 4 }, onSubmit: handleSubmit(onSubmitForm), children: [_jsx(JBTextField, { control: control, name: "login", sx: { mb: 3 }, label: loginLabel, autoFocus: true, type: "text", variant: "outlined", required: true, fullWidth: true, disabled: disabled }), _jsx(JBTextField, { control: control, name: "password", sx: { mb: 3 }, label: passwordLabel, type: showPassword ? 'text' : 'password', InputProps: {
+                    endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { edge: "end", "aria-label": showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña', onClick: () => setShowPassword((prev) => !prev), children: showPassword ? _jsx(VisibilityOffOutlinedIcon, {}) : _jsx(VisibilityOutlinedIcon, {}) }) }))
+                }, variant: "outlined", required: true, fullWidth: true, disabled: disabled }), _jsxs(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: { xs: 'column', sm: 'row' },
+                    alignItems: 'center',
+                    justifyContent: { xs: 'center', sm: 'space-between' },
+                    gap: { xs: 1.5, sm: 0 }
+                }, children: [_jsx(JBCheckboxField, { control: control, name: "remember", label: rememberLabel, formControlProps: {
+                            sx: {
+                                m: 0
+                            }
+                        }, formControlLabelProps: {
+                            sx: {
+                                '& .MuiFormControlLabel-label': {
+                                    fontWeight: 500
+                                }
+                            }
+                        }, checkboxSx: {
+                            '&.Mui-checked .MuiSvgIcon-root': {
+                                color: 'secondary.main'
+                            }
+                        }, disabled: disabled }), LinkComponent ? (disabled ? (_jsx(Box, { component: 'span', sx: { color: 'text.disabled' }, children: "\u00BFOlvidaste tu contrase\u00F1a?" })) : (_jsx(Box, { component: LinkComponent, to: forgotPasswordPath, sx: {
+                            color: 'primary.main',
+                            fontWeight: 500,
+                            textDecoration: 'none',
+                            '&:hover': {
+                                textDecoration: 'underline'
+                            }
+                        }, children: "\u00BFOlvidaste tu contrase\u00F1a?" }))) : null] }), _jsx(AuthPrimaryButton, { sx: { mt: 2 }, "aria-label": submitLabel, disabled: disabled || isLoading || !loginValue?.trim() || !passwordValue, loading: isLoading, loadingLabel: "Iniciando sesi\u00F3n...", startIcon: _jsx(EmailOutlinedIcon, { fontSize: "small" }), type: "submit", size: "large", children: submitLabel }), LinkComponent && shouldShowVerifyAccountCta(errors.root?.message) ? (_jsx(AuthSecondaryButton, { sx: { mt: 1.5 }, component: LinkComponent, to: getAccountConfirmationTo(), children: verifyAccountLabel })) : null, errors.root?.message && (_jsx(Alert, { sx: { mt: 2 }, severity: "error", children: errors.root.message }))] }));
+}

package/dist/auth/forms/sign-in/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AuthPasswordSignInForm';
+export * from './AuthOtpSignInForm';
+//# sourceMappingURL=index.d.ts.map

package/dist/auth/forms/sign-in/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/auth/forms/sign-in/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC"}

package/dist/auth/forms/sign-in/index.js

@@ -0,0 +1,2 @@
+export * from './AuthPasswordSignInForm';
+export * from './AuthOtpSignInForm';

package/dist/auth/forms/sign-up/AuthSignUpForm.d.ts

@@ -0,0 +1,37 @@
+import { z } from 'zod';
+import { SelectOption } from '../../../forms';
+import { RegisterPayload } from '../../types';
+declare const signUpSchema: z.ZodObject<{
+    firstName: z.ZodString;
+    lastName1: z.ZodString;
+    lastName2: z.ZodOptional<z.ZodString>;
+    email: z.ZodString;
+    birthday: z.ZodOptional<z.ZodString>;
+    gender: z.ZodOptional<z.ZodEnum<{
+        MALE: "MALE";
+        FEMALE: "FEMALE";
+        OTHER: "OTHER";
+        PREFER_NOT_TO_SAY: "PREFER_NOT_TO_SAY";
+    }>>;
+    role: z.ZodOptional<z.ZodString>;
+    password: z.ZodString;
+    passwordConfirm: z.ZodString;
+    acceptTermsConditions: z.ZodBoolean;
+}, z.core.$strip>;
+export type AuthSignUpFormValues = z.infer<typeof signUpSchema>;
+export type AuthSignUpFormProps = {
+    defaultValues?: Partial<AuthSignUpFormValues>;
+    loading?: boolean;
+    disabled?: boolean;
+    submitLabel?: string;
+    fieldsScrollable?: boolean;
+    formMaxHeight?: string | number;
+    roleOptions?: Array<SelectOption<string> & {
+        allowSignup?: boolean;
+    }>;
+    defaultRole?: string;
+    onSubmit: (values: RegisterPayload) => unknown | Promise<unknown>;
+};
+export declare function AuthSignUpForm(props: AuthSignUpFormProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AuthSignUpForm.d.ts.map

package/dist/auth/forms/sign-up/AuthSignUpForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthSignUpForm.d.ts","sourceRoot":"","sources":["../../../../src/auth/forms/sign-up/AuthSignUpForm.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,EAAkE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9G,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAK9C,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;iBAkCd,CAAC;AAEL,MAAM,MAAM,oBAAoB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,YAAY,CAAC,CAAC;AAEhE,MAAM,MAAM,mBAAmB,GAAG;IAChC,aAAa,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG;QAAE,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;CACnE,CAAC;AAeF,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CAyTxD"}

package/dist/auth/forms/sign-up/AuthSignUpForm.js

@@ -0,0 +1,193 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import PersonAddAlt1OutlinedIcon from '@mui/icons-material/PersonAddAlt1Outlined';
+import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
+import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import _ from 'lodash';
+import { useEffect, useState } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { z } from 'zod';
+import { JBCheckboxField, JBDatePickerField, JBSelectField, JBTextField } from '../../../forms';
+import { DEFAULT_GENDER, GENDERS, GENDER_SELECT_OPTIONS } from '../../constants';
+import { AuthPrimaryButton } from '../../ui';
+import { getDjangoLikePasswordError, isPasswordTooSimilar } from '../password/passwordValidation';
+import { parseAuthError } from '../errorParser';
+const signUpSchema = z
+    .object({
+    firstName: z.string().nonempty('Debes ingresar el nombre'),
+    lastName1: z.string().nonempty('Debes ingresar el primer apellido'),
+    lastName2: z.string().optional(),
+    email: z.string().email('Debes ingresar un correo válido').nonempty('Debes ingresar un correo'),
+    birthday: z.string().optional(),
+    gender: z.enum(GENDERS).optional(),
+    role: z.string().optional(),
+    password: z.string().nonempty('Debes ingresar la contraseña.'),
+    passwordConfirm: z.string().nonempty('La confirmación de contraseña es obligatoria'),
+    acceptTermsConditions: z.boolean().refine((val) => val === true, 'Debes aceptar los términos y condiciones.')
+})
+    .refine((data) => data.password === data.passwordConfirm, {
+    message: 'Las contraseñas deben coincidir',
+    path: ['passwordConfirm']
+})
+    .superRefine((data, ctx) => {
+    const passwordError = getDjangoLikePasswordError(data.password);
+    if (passwordError) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: passwordError,
+            path: ['password']
+        });
+    }
+    if (isPasswordTooSimilar(data.password, [data.email, data.firstName, data.lastName1, data.lastName2])) {
+        ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: 'La contraseña es demasiado similar a tus datos personales.',
+            path: ['password']
+        });
+    }
+});
+const defaultValues = {
+    firstName: '',
+    lastName1: '',
+    lastName2: '',
+    email: '',
+    birthday: '',
+    gender: DEFAULT_GENDER,
+    role: '',
+    password: '',
+    passwordConfirm: '',
+    acceptTermsConditions: false
+};
+export function AuthSignUpForm(props) {
+    const { defaultValues: valuesFromProps, loading = false, disabled = false, submitLabel = 'Crear cuenta', fieldsScrollable = false, formMaxHeight = 'min(72dvh, 620px)', roleOptions, defaultRole, onSubmit } = props;
+    const signupRoleOptions = (roleOptions ?? []).filter((roleOption) => roleOption.allowSignup !== false);
+    const resolvedDefaultRole = valuesFromProps?.role ??
+        defaultRole ??
+        signupRoleOptions[0]?.value ??
+        defaultValues.role;
+    const { control, formState, handleSubmit, setError, clearErrors, trigger, watch } = useForm({
+        mode: 'onChange',
+        defaultValues: {
+            ...defaultValues,
+            role: resolvedDefaultRole,
+            ...(valuesFromProps ?? {})
+        },
+        resolver: zodResolver(signUpSchema)
+    });
+    const { isValid, dirtyFields, errors, isSubmitting } = formState;
+    const isLoading = loading || isSubmitting;
+    const passwordValue = useWatch({ control, name: 'password' });
+    const passwordConfirmValue = useWatch({ control, name: 'passwordConfirm' });
+    const [showPassword, setShowPassword] = useState(false);
+    const [showPasswordConfirm, setShowPasswordConfirm] = useState(false);
+    useEffect(() => {
+        if (!passwordConfirmValue) {
+            return;
+        }
+        void trigger('passwordConfirm');
+    }, [passwordValue, passwordConfirmValue, trigger]);
+    useEffect(() => {
+        const subscription = watch((_value, { name }) => {
+            if (name) {
+                clearErrors(name);
+            }
+            clearErrors('root');
+        });
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [watch, clearErrors]);
+    async function onSubmitForm(values) {
+        try {
+            await onSubmit({
+                firstName: values.firstName,
+                lastName1: values.lastName1,
+                lastName2: values.lastName2 || undefined,
+                username: null,
+                email: values.email,
+                birthday: values.birthday || undefined,
+                gender: values.gender || undefined,
+                password: values.password,
+                passwordConfirm: values.passwordConfirm,
+                role: values.role || defaultRole || undefined,
+                termsAndConditionsAccepted: values.acceptTermsConditions
+            });
+        }
+        catch (error) {
+            const parsed = parseAuthError(error, {
+                username: 'email'
+            });
+            const allowedFields = [
+                'firstName',
+                'lastName1',
+                'lastName2',
+                'email',
+                'birthday',
+                'gender',
+                'role',
+                'password',
+                'passwordConfirm',
+                'acceptTermsConditions'
+            ];
+            Object.entries(parsed.fieldErrors).forEach(([field, message]) => {
+                if (allowedFields.includes(field)) {
+                    setError(field, { type: 'manual', message });
+                    return;
+                }
+                setError('root', {
+                    type: 'manual',
+                    message
+                });
+            });
+            if (parsed.rootMessage) {
+                setError('root', {
+                    type: 'manual',
+                    message: parsed.rootMessage
+                });
+                return;
+            }
+            setError('root', {
+                type: 'manual',
+                message: 'No se pudo crear la cuenta. Inténtalo de nuevo.'
+            });
+        }
+    }
+    return (_jsxs("form", { name: "registerForm", noValidate: true, style: {
+            display: 'flex',
+            width: '100%',
+            flexDirection: 'column',
+            justifyContent: 'flex-start',
+            paddingTop: 4,
+            ...(fieldsScrollable
+                ? {
+                    height: '100%',
+                    maxHeight: typeof formMaxHeight === 'number' ? `${formMaxHeight}px` : formMaxHeight,
+                    minHeight: 0,
+                    overflow: 'hidden'
+                }
+                : null)
+        }, onSubmit: handleSubmit(onSubmitForm), children: [_jsxs(Box, { sx: {
+                    ...(fieldsScrollable
+                        ? {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            flex: 1,
+                            minHeight: 0,
+                            overflowY: 'auto',
+                            pr: 0.5,
+                            pb: 1
+                        }
+                        : null)
+                }, children: [_jsx(JBTextField, { control: control, name: "firstName", sx: { mb: 3 }, label: "Nombre(s)", autoFocus: true, type: "text", variant: "outlined", required: true, fullWidth: true, disabled: disabled }), _jsx(JBTextField, { control: control, name: "lastName1", sx: { mb: 3 }, label: "Primer apellido", type: "text", variant: "outlined", required: true, fullWidth: true, disabled: disabled }), _jsx(JBTextField, { control: control, name: "lastName2", sx: { mb: 3 }, label: "Segundo apellido", type: "text", variant: "outlined", fullWidth: true, disabled: disabled }), _jsx(JBTextField, { control: control, name: "email", sx: { mb: 3 }, label: "Correo electr\u00F3nico", type: "email", variant: "outlined", required: true, fullWidth: true, disabled: disabled }), _jsx(JBDatePickerField, { control: control, name: "birthday", sx: { mb: 3 }, label: "Fecha de nacimiento", disableFuture: true, storeAsDateString: true, textFieldProps: {
+                            variant: 'outlined',
+                            fullWidth: true
+                        }, disabled: disabled }), _jsx(JBSelectField, { control: control, name: "gender", sx: { mb: 3 }, label: "G\u00E9nero", variant: "outlined", fullWidth: true, options: GENDER_SELECT_OPTIONS, disabled: disabled }), signupRoleOptions.length > 0 ? (_jsx(JBSelectField, { control: control, name: "role", sx: { mb: 3 }, label: "Rol de perfil", variant: "outlined", fullWidth: true, options: signupRoleOptions, required: true, disabled: disabled })) : null, _jsx(JBTextField, { control: control, name: "password", sx: { mb: 3 }, label: "Contrase\u00F1a", type: showPassword ? 'text' : 'password', InputProps: {
+                            endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { edge: "end", "aria-label": showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña', onClick: () => setShowPassword((prev) => !prev), children: showPassword ? _jsx(VisibilityOffOutlinedIcon, {}) : _jsx(VisibilityOutlinedIcon, {}) }) }))
+                        }, variant: "outlined", required: true, fullWidth: true, disabled: disabled }), _jsx(JBTextField, { control: control, name: "passwordConfirm", sx: { mb: 3 }, label: "Confirmar contrase\u00F1a", type: showPasswordConfirm ? 'text' : 'password', InputProps: {
+                            endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { edge: "end", "aria-label": showPasswordConfirm ? 'Ocultar confirmación de contraseña' : 'Mostrar confirmación de contraseña', onClick: () => setShowPasswordConfirm((prev) => !prev), children: showPasswordConfirm ? _jsx(VisibilityOffOutlinedIcon, {}) : _jsx(VisibilityOutlinedIcon, {}) }) }))
+                        }, variant: "outlined", required: true, fullWidth: true, disabled: disabled }), _jsx(JBCheckboxField, { control: control, name: "acceptTermsConditions", size: "small", label: "Acepto t\u00E9rminos y pol\u00EDticas de privacidad", disabled: disabled })] }), errors.root?.message ? (_jsx(Alert, { sx: { mt: 2 }, severity: "error", children: errors.root.message })) : null, _jsx(AuthPrimaryButton, { sx: { mt: 3 }, "aria-label": submitLabel, disabled: disabled || isLoading || _.isEmpty(dirtyFields) || !isValid, loading: isLoading, loadingLabel: "Creando cuenta...", startIcon: _jsx(PersonAddAlt1OutlinedIcon, { fontSize: "small" }), type: "submit", size: "large", children: submitLabel })] }));
+}

package/dist/auth/forms/sign-up/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AuthSignUpForm';
+//# sourceMappingURL=index.d.ts.map

package/dist/auth/forms/sign-up/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/auth/forms/sign-up/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}