@joelbarron/react-web-dev-kit 0.1.0

package/dist/auth/forms/password/AuthForgotPasswordForm.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import Alert from '@mui/material/Alert';
+import Button from '@mui/material/Button';
+import _ from 'lodash';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { JBTextField } from '../../../forms';
+import { parseAuthError } from '../errorParser';
+const forgotSchema = z.object({
+    email: z.string().email('Debes ingresar un correo válido').nonempty('Debes ingresar un correo')
+});
+export function AuthForgotPasswordForm(props) {
+    const { defaultValues, loading = false, submitLabel = 'Enviar enlace de recuperación', successMessage = 'Si la cuenta existe, enviamos un enlace de recuperación a tu correo.', onSubmit } = props;
+    const [success, setSuccess] = useState(null);
+    const { control, formState, handleSubmit, setError, clearErrors, watch } = useForm({
+        mode: 'onChange',
+        defaultValues: {
+            email: defaultValues?.email ?? ''
+        },
+        resolver: zodResolver(forgotSchema)
+    });
+    const { errors, dirtyFields, isSubmitting, isValid } = formState;
+    useEffect(() => {
+        const subscription = watch((_value, { name }) => {
+            if (name) {
+                clearErrors(name);
+            }
+            clearErrors('root');
+        });
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [watch, clearErrors]);
+    async function onSubmitForm(values) {
+        try {
+            setSuccess(null);
+            await onSubmit(values);
+            setSuccess(successMessage);
+        }
+        catch (error) {
+            const parsed = parseAuthError(error);
+            Object.entries(parsed.fieldErrors).forEach(([field, message]) => {
+                if (field === 'email') {
+                    setError('email', {
+                        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 enviar el correo de recuperación. Inténtalo de nuevo.'
+            });
+        }
+    }
+    return (_jsxs("form", { name: "forgotPasswordForm", noValidate: true, style: { display: 'flex', width: '100%', flexDirection: 'column', justifyContent: 'center', paddingTop: 4 }, onSubmit: handleSubmit(onSubmitForm), children: [_jsx(JBTextField, { control: control, name: "email", sx: { mb: 3 }, label: "Correo electr\u00F3nico", autoFocus: true, type: "email", variant: "outlined", required: true, fullWidth: true }), errors.root?.message && (_jsx(Alert, { sx: { mb: 2 }, severity: "error", children: errors.root.message })), success && (_jsx(Alert, { sx: { mb: 2 }, severity: "success", children: success })), _jsx(Button, { variant: "contained", color: "secondary", sx: { width: '100%' }, "aria-label": submitLabel, type: "submit", size: "large", disabled: loading || isSubmitting || _.isEmpty(dirtyFields) || !isValid, children: submitLabel })] }));
+}

package/dist/auth/forms/password/AuthPasswordResetConfirmForm.d.ts

@@ -0,0 +1,15 @@
+export type AuthPasswordResetConfirmFormValues = {
+    uid: string;
+    token: string;
+    newPassword: string;
+    newPasswordConfirm: string;
+};
+export type AuthPasswordResetConfirmFormProps = {
+    defaultValues?: Partial<AuthPasswordResetConfirmFormValues>;
+    loading?: boolean;
+    submitLabel?: string;
+    successMessage?: string;
+    onSubmit: (values: AuthPasswordResetConfirmFormValues) => unknown | Promise<unknown>;
+};
+export declare function AuthPasswordResetConfirmForm(props: AuthPasswordResetConfirmFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AuthPasswordResetConfirmForm.d.ts.map

package/dist/auth/forms/password/AuthPasswordResetConfirmForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthPasswordResetConfirmForm.d.ts","sourceRoot":"","sources":["../../../../src/auth/forms/password/AuthPasswordResetConfirmForm.tsx"],"names":[],"mappings":"AAWA,MAAM,MAAM,kCAAkC,GAAG;IAC/C,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,iCAAiC,GAAG;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC,kCAAkC,CAAC,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,CAAC,MAAM,EAAE,kCAAkC,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;CACtF,CAAC;AAiBF,wBAAgB,4BAA4B,CAAC,KAAK,EAAE,iCAAiC,2CAuJpF"}

package/dist/auth/forms/password/AuthPasswordResetConfirmForm.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import Alert from '@mui/material/Alert';
+import Button from '@mui/material/Button';
+import _ from 'lodash';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { JBTextField } from '../../../forms';
+import { parseAuthError } from '../errorParser';
+const resetSchema = z
+    .object({
+    uid: z.string().nonempty('El uid es obligatorio'),
+    token: z.string().nonempty('El token es obligatorio'),
+    newPassword: z
+        .string()
+        .nonempty('Debes ingresar tu nueva contraseña')
+        .min(8, 'La contraseña es muy corta - mínimo 8 caracteres.'),
+    newPasswordConfirm: z.string().nonempty('La confirmación de contraseña es obligatoria')
+})
+    .refine((data) => data.newPassword === data.newPasswordConfirm, {
+    message: 'Las contraseñas deben coincidir',
+    path: ['newPasswordConfirm']
+});
+export function AuthPasswordResetConfirmForm(props) {
+    const { defaultValues, loading = false, submitLabel = 'Restablecer contraseña', successMessage = 'Contraseña restablecida correctamente. Ya puedes iniciar sesión.', onSubmit } = props;
+    const { control, formState, handleSubmit, setError, clearErrors, watch } = useForm({
+        mode: 'onChange',
+        defaultValues: {
+            uid: defaultValues?.uid ?? '',
+            token: defaultValues?.token ?? '',
+            newPassword: defaultValues?.newPassword ?? '',
+            newPasswordConfirm: defaultValues?.newPasswordConfirm ?? ''
+        },
+        resolver: zodResolver(resetSchema)
+    });
+    const { errors, dirtyFields, isSubmitting, isValid, isSubmitSuccessful } = formState;
+    useEffect(() => {
+        const subscription = watch((_value, { name }) => {
+            if (name) {
+                clearErrors(name);
+            }
+            clearErrors('root');
+        });
+        return () => {
+            subscription.unsubscribe();
+        };
+    }, [watch, clearErrors]);
+    async function onSubmitForm(values) {
+        try {
+            await onSubmit(values);
+        }
+        catch (error) {
+            const parsed = parseAuthError(error);
+            const allowedFields = [
+                'uid',
+                'token',
+                'newPassword',
+                'newPasswordConfirm'
+            ];
+            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 restablecer la contraseña. Inténtalo de nuevo.'
+            });
+        }
+    }
+    return (_jsxs("form", { name: "resetPasswordForm", noValidate: true, style: { display: 'flex', width: '100%', flexDirection: 'column', justifyContent: 'center', paddingTop: 4 }, onSubmit: handleSubmit(onSubmitForm), children: [_jsx(JBTextField, { control: control, name: "uid", sx: { mb: 3 }, label: "UID", type: "text", variant: "outlined", required: true, fullWidth: true }), _jsx(JBTextField, { control: control, name: "token", sx: { mb: 3 }, label: "Token", type: "text", variant: "outlined", required: true, fullWidth: true }), _jsx(JBTextField, { control: control, name: "newPassword", sx: { mb: 3 }, label: "Nueva contrase\u00F1a", type: "password", variant: "outlined", required: true, fullWidth: true }), _jsx(JBTextField, { control: control, name: "newPasswordConfirm", sx: { mb: 3 }, label: "Confirmar nueva contrase\u00F1a", type: "password", variant: "outlined", required: true, fullWidth: true }), errors.root?.message && (_jsx(Alert, { sx: { mb: 2 }, severity: "error", children: errors.root.message })), isSubmitSuccessful && (_jsx(Alert, { sx: { mb: 2 }, severity: "success", children: successMessage })), _jsx(Button, { variant: "contained", color: "secondary", sx: { width: '100%' }, "aria-label": submitLabel, disabled: loading || isSubmitting || _.isEmpty(dirtyFields) || !isValid, type: "submit", size: "large", children: submitLabel })] }));
+}

package/dist/auth/forms/password/AuthResetPasswordForm.d.ts

@@ -0,0 +1,12 @@
+export type AuthResetPasswordFormValues = {
+    newPassword: string;
+    confirmPassword: string;
+};
+export type AuthResetPasswordFormProps = {
+    defaultValues?: Partial<AuthResetPasswordFormValues>;
+    loading?: boolean;
+    submitLabel?: string;
+    onSubmit: (values: AuthResetPasswordFormValues) => void | Promise<void>;
+};
+export declare function AuthResetPasswordForm(props: AuthResetPasswordFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AuthResetPasswordForm.d.ts.map

package/dist/auth/forms/password/AuthResetPasswordForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthResetPasswordForm.d.ts","sourceRoot":"","sources":["../../../../src/auth/forms/password/AuthResetPasswordForm.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,2BAA2B,GAAG;IACxC,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAC;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,2BAA2B,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACzE,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,2CA4CtE"}

package/dist/auth/forms/password/AuthResetPasswordForm.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Stack } from '@mui/material';
+import { useForm } from 'react-hook-form';
+import { JBTextField } from '../../../forms';
+export function AuthResetPasswordForm(props) {
+    const { defaultValues, loading = false, submitLabel = 'Restablecer contraseña', onSubmit } = props;
+    const { control, handleSubmit, watch } = useForm({
+        defaultValues: {
+            newPassword: defaultValues?.newPassword ?? '',
+            confirmPassword: defaultValues?.confirmPassword ?? ''
+        }
+    });
+    const newPasswordValue = watch('newPassword');
+    return (_jsx("form", { style: { paddingTop: 4 }, onSubmit: handleSubmit((values) => onSubmit(values)), children: _jsxs(Stack, { spacing: 2, children: [_jsx(JBTextField, { control: control, name: "newPassword", label: "Nueva contrase\u00F1a", type: "password", fullWidth: true, rules: { required: 'El password es requerido' } }), _jsx(JBTextField, { control: control, name: "confirmPassword", label: "Confirmar contrase\u00F1a", type: "password", fullWidth: true, rules: {
+                        required: 'La confirmacion es requerida',
+                        validate: (value) => value === newPasswordValue || 'Las contraseñas no coinciden'
+                    } }), _jsx(Button, { variant: "contained", type: "submit", disabled: loading, children: submitLabel })] }) }));
+}

package/dist/auth/forms/password/index.d.ts

@@ -0,0 +1,4 @@
+export * from './AuthForgotPasswordForm';
+export * from './AuthPasswordResetConfirmForm';
+export * from './AuthResetPasswordForm';
+//# sourceMappingURL=index.d.ts.map

package/dist/auth/forms/password/index.d.ts.map

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

package/dist/auth/forms/password/index.js

@@ -0,0 +1,3 @@
+export * from './AuthForgotPasswordForm';
+export * from './AuthPasswordResetConfirmForm';
+export * from './AuthResetPasswordForm';

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

@@ -0,0 +1,24 @@
+import { SelectOption } from '../../../forms';
+export type AuthOtpSignInFormValues = {
+    countryCode: string;
+    phone: string;
+    code?: string;
+};
+export type AuthOtpSignInFormProps = {
+    defaultValues?: Partial<AuthOtpSignInFormValues>;
+    countryCodeOptions?: SelectOption<string>[];
+    requestRoleSelection?: () => Promise<string | undefined>;
+    countryCodes?: string[];
+    loading?: boolean;
+    onRequestOtp: (values: {
+        phone: string;
+    }) => unknown | Promise<unknown>;
+    onVerifyOtp: (values: {
+        phone: string;
+        code: string;
+        role?: string;
+    }) => unknown | Promise<unknown>;
+    onBackToPassword?: () => void;
+};
+export declare function AuthOtpSignInForm(props: AuthOtpSignInFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AuthOtpSignInForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AuthOtpSignInForm.d.ts","sourceRoot":"","sources":["../../../../src/auth/forms/sign-in/AuthOtpSignInForm.tsx"],"names":[],"mappings":"AAYA,OAAO,EAA8B,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAK1E,MAAM,MAAM,uBAAuB,GAAG;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IACjD,kBAAkB,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;IAC5C,oBAAoB,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACzD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IACxE,WAAW,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IACpG,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B,CAAC;AAQF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAsX9D"}

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

@@ -0,0 +1,226 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+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", onClick: onBackToPassword, children: "Usar contrase\u00F1a" })] }), _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,21 @@
+import type { AuthLinkComponent } from '../../ui';
+export type AuthPasswordSignInFormValues = {
+    login: string;
+    password: string;
+    remember?: boolean;
+};
+export type AuthPasswordSignInFormProps = {
+    defaultValues?: Partial<AuthPasswordSignInFormValues>;
+    loading?: 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":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,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,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;AAWF,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,2CAkMxE"}

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

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { JBCheckboxField, JBTextField } from '../../../forms';
+import { AuthPrimaryButton, AuthSecondaryButton } from '../../ui';
+import { parseAuthError } from '../errorParser';
+const signInSchema = z.object({
+    login: z.string().nonempty('Debes ingresar tu usuario o correo'),
+    password: z
+        .string()
+        .min(4, 'La contraseña es muy corta - mínimo 4 caracteres.')
+        .nonempty('Debes ingresar tu contraseña.'),
+    remember: z.boolean().optional()
+});
+export function AuthPasswordSignInForm(props) {
+    const { defaultValues, loading = 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;
+    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 }), _jsx(JBTextField, { control: control, name: "password", sx: { mb: 3 }, label: passwordLabel, type: "password", variant: "outlined", required: true, fullWidth: true }), _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'
+                            }
+                        } }), LinkComponent ? _jsx(LinkComponent, { to: forgotPasswordPath, children: "\u00BFOlvidaste tu contrase\u00F1a?" }) : null] }), _jsx(AuthPrimaryButton, { sx: { mt: 2 }, "aria-label": submitLabel, disabled: isLoading || !loginValue?.trim() || !passwordValue, loading: isLoading, loadingLabel: "Iniciando sesi\u00F3n...", 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';