@joelbarron/react-web-dev-kit 0.1.0

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

@@ -0,0 +1,36 @@
+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;
+    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":"AAMA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,OAAO,EAA+C,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE3F,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAI9C,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;iBAmBd,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,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,2CAiRxD"}

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

@@ -0,0 +1,164 @@
+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 _ from 'lodash';
+import { useEffect } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { z } from 'zod';
+import { JBCheckboxField, JBSelectField, JBTextField } from '../../../forms';
+import { DEFAULT_GENDER, GENDERS, GENDER_SELECT_OPTIONS } from '../../constants';
+import { AuthPrimaryButton } from '../../ui';
+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.')
+        .min(8, 'La contraseña es muy corta - mínimo 8 caracteres.'),
+    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']
+});
+const defaultValues = {
+    firstName: '',
+    lastName1: '',
+    lastName2: '',
+    email: '',
+    birthday: '',
+    gender: DEFAULT_GENDER,
+    role: '',
+    password: '',
+    passwordConfirm: '',
+    acceptTermsConditions: false
+};
+export function AuthSignUpForm(props) {
+    const { defaultValues: valuesFromProps, loading = 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' });
+    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 }), _jsx(JBTextField, { control: control, name: "lastName1", sx: { mb: 3 }, label: "Primer apellido", type: "text", variant: "outlined", required: true, fullWidth: true }), _jsx(JBTextField, { control: control, name: "lastName2", sx: { mb: 3 }, label: "Segundo apellido", type: "text", variant: "outlined", fullWidth: true }), _jsx(JBTextField, { control: control, name: "email", sx: { mb: 3 }, label: "Correo electr\u00F3nico", type: "email", variant: "outlined", required: true, fullWidth: true }), _jsx(JBTextField, { control: control, name: "birthday", sx: { mb: 3 }, label: "Fecha de nacimiento", type: "date", InputLabelProps: { shrink: true }, variant: "outlined", fullWidth: true }), _jsx(JBSelectField, { control: control, name: "gender", sx: { mb: 3 }, label: "G\u00E9nero", variant: "outlined", fullWidth: true, options: GENDER_SELECT_OPTIONS }), signupRoleOptions.length > 0 ? (_jsx(JBSelectField, { control: control, name: "role", sx: { mb: 3 }, label: "Rol de perfil", variant: "outlined", fullWidth: true, options: signupRoleOptions, required: true })) : null, _jsx(JBTextField, { control: control, name: "password", sx: { mb: 3 }, label: "Contrase\u00F1a", type: "password", variant: "outlined", required: true, fullWidth: true }), _jsx(JBTextField, { control: control, name: "passwordConfirm", sx: { mb: 3 }, label: "Confirmar contrase\u00F1a", type: "password", variant: "outlined", required: true, fullWidth: true }), _jsx(JBCheckboxField, { control: control, name: "acceptTermsConditions", size: "small", label: "Acepto t\u00E9rminos y pol\u00EDticas de privacidad" })] }), errors.root?.message ? (_jsx(Alert, { sx: { mt: 2 }, severity: "error", children: errors.root.message })) : null, _jsx(AuthPrimaryButton, { sx: { mt: 3 }, "aria-label": submitLabel, disabled: isLoading || _.isEmpty(dirtyFields) || !isValid, loading: isLoading, loadingLabel: "Creando cuenta...", 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"}

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

@@ -0,0 +1 @@
+export * from './AuthSignUpForm';

package/dist/auth/fuse/createFuseAuthViews.d.ts

@@ -0,0 +1,24 @@
+import { JBAuthProfileRoleOption, JBAuthSocialConfig } from "../../config";
+import { AuthLinkComponent } from "../ui";
+type CreateFuseAuthViewsOptions = {
+    LinkComponent: AuthLinkComponent;
+    accountConfirmationPath?: string;
+    signUpRoleOptions?: JBAuthProfileRoleOption[];
+    defaultSignUpRole?: string;
+    socialConfig?: JBAuthSocialConfig;
+    onSignUpSuccess?: (values: {
+        email: string;
+        detail?: string;
+        response: Record<string, unknown>;
+    }) => void;
+};
+export declare function createFuseAuthViews(options: CreateFuseAuthViewsOptions): {
+    SignInPageView: () => import("react/jsx-runtime").JSX.Element;
+    SignUpPageView: () => import("react/jsx-runtime").JSX.Element;
+    ForgotPasswordPageView: () => import("react/jsx-runtime").JSX.Element;
+    ResetPasswordPageView: () => import("react/jsx-runtime").JSX.Element;
+    SignOutPageView: () => import("react/jsx-runtime").JSX.Element;
+    AccountConfirmationPageView: () => import("react/jsx-runtime").JSX.Element;
+};
+export {};
+//# sourceMappingURL=createFuseAuthViews.d.ts.map

package/dist/auth/fuse/createFuseAuthViews.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFuseAuthViews.d.ts","sourceRoot":"","sources":["../../../src/auth/fuse/createFuseAuthViews.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAG3E,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAqaf,KAAK,0BAA0B,GAAG;IAChC,aAAa,EAAE,iBAAiB,CAAC;IACjC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,iBAAiB,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAC9C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE;QACzB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACnC,KAAK,IAAI,CAAC;CACZ,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,0BAA0B;;;;;;;EAwYtE"}

package/dist/auth/fuse/createFuseAuthViews.js

@@ -0,0 +1,360 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Alert from "@mui/material/Alert";
+import Typography from "@mui/material/Typography";
+import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { useNavigate, useSearchParams } from "react-router";
+import { AuthAccountConfirmationForm, AuthForgotPasswordForm, AuthOtpSignInForm, AuthPasswordResetConfirmForm, AuthPasswordSignInForm, AuthSignUpForm, } from "../forms";
+import { authenticateWithSocialProvider } from "../social/providerAuth";
+import { useFuseJwtAuth } from "./fuseAdapter";
+import { AuthRoleSelectionDialog, AuthSocialProviderButton, AuthSecondaryButton, SignInPageTitle, SignOutPageTitle, SignUpPageTitle, } from "../ui";
+import { parseAuthError } from "../forms/errorParser";
+const IS_DEV = typeof window !== "undefined" && window.location.hostname === "localhost";
+const DEV_LOGIN_DEFAULT_VALUES = IS_DEV
+    ? {
+        login: "admin",
+        password: "Test123_",
+        remember: true,
+    }
+    : undefined;
+const DEV_SIGN_UP_DEFAULT_VALUES = IS_DEV
+    ? {
+        firstName: "Joel",
+        lastName1: "Barron",
+        lastName2: "Hernandez",
+        email: "joel.test+1@example.com",
+        birthday: "1995-12-16",
+        gender: "MALE",
+        password: "Test123_",
+        passwordConfirm: "Test123_",
+        acceptTermsConditions: true,
+    }
+    : undefined;
+const DEV_OTP_DEFAULT_VALUES = IS_DEV
+    ? {
+        countryCode: "+52",
+        phone: "5512345678",
+        code: "",
+    }
+    : undefined;
+const SOCIAL_PROVIDER_ORDER = ["google", "facebook", "apple"];
+function getEnabledSocialProviders(socialConfig) {
+    if (!socialConfig) {
+        return [];
+    }
+    return SOCIAL_PROVIDER_ORDER.flatMap((provider) => {
+        const providerConfig = socialConfig[provider];
+        if (!providerConfig?.enabled || !providerConfig.clientId?.trim()) {
+            return [];
+        }
+        return [
+            {
+                provider,
+                clientId: providerConfig.clientId.trim(),
+                redirectUri: providerConfig.redirectUri?.trim() || undefined,
+                scope: providerConfig.scope?.trim() || undefined
+            }
+        ];
+    });
+}
+function FuseSignInController(props) {
+    const { LinkComponent, mode = "password", onBackToPassword, requestRoleSelection } = props;
+    const { signIn, requestOtp, signInOtp } = useFuseJwtAuth();
+    if (mode === "otp") {
+        return (_jsx(AuthOtpSignInForm, { defaultValues: DEV_OTP_DEFAULT_VALUES, requestRoleSelection: requestRoleSelection, onBackToPassword: onBackToPassword, onRequestOtp: ({ phone }) => requestOtp({
+                channel: "sms",
+                phone,
+            }), onVerifyOtp: ({ phone, code, role }) => signInOtp({
+                channel: "sms",
+                phone,
+                code,
+                role,
+            }) }));
+    }
+    return (_jsx(AuthPasswordSignInForm, { defaultValues: DEV_LOGIN_DEFAULT_VALUES, LinkComponent: LinkComponent, onSubmit: (values) => signIn({
+            login: values.login,
+            password: values.password,
+        }) }));
+}
+function FuseSignUpController(props) {
+    const { onSuccess, requestRoleSelection, requiresRoleSelection = false } = props;
+    const { signUp } = useFuseJwtAuth();
+    return (_jsx(AuthSignUpForm, { defaultValues: DEV_SIGN_UP_DEFAULT_VALUES, onSubmit: async (values) => {
+            const selectedRole = requestRoleSelection
+                ? await requestRoleSelection()
+                : values.role;
+            if (requiresRoleSelection && !selectedRole) {
+                return;
+            }
+            const response = await signUp({
+                ...values,
+                role: selectedRole ?? values.role,
+            });
+            onSuccess?.({
+                email: values.email,
+                detail: response.detail ?? undefined,
+                response
+            });
+        } }));
+}
+function FuseOtpSignUpForm(props) {
+    const { onBackToPassword, requestRoleSelection } = props;
+    const { requestOtp, signInOtp } = useFuseJwtAuth();
+    return (_jsx(AuthOtpSignInForm, { defaultValues: DEV_OTP_DEFAULT_VALUES, requestRoleSelection: requestRoleSelection, onBackToPassword: onBackToPassword, onRequestOtp: ({ phone }) => requestOtp({
+            channel: "sms",
+            phone,
+        }), onVerifyOtp: ({ phone, code, role }) => signInOtp({
+            channel: "sms",
+            phone,
+            code,
+            role,
+        }) }));
+}
+function FuseAuthAlternativesSection(props) {
+    const { onSmsClick, socialProviders = [], onSocialClick, socialLoadingProvider, socialError } = props;
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: { mt: 4, display: "flex", alignItems: "center" }, children: [_jsx(Box, { sx: { mt: "1px", flex: 1, borderTop: 1, borderColor: "divider" } }), _jsx(Typography, { sx: { mx: 1 }, color: "text.secondary", children: "O contin\u00FAa con" }), _jsx(Box, { sx: { mt: "1px", flex: 1, borderTop: 1, borderColor: "divider" } })] }), _jsxs(Box, { sx: {
+                    mt: 4,
+                    display: "grid",
+                    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+                    gap: 1.5
+                }, children: [socialProviders.map((socialProvider) => (_jsx(AuthSocialProviderButton, { provider: socialProvider.provider, loading: socialLoadingProvider === socialProvider.provider, disabled: Boolean(socialLoadingProvider && socialLoadingProvider !== socialProvider.provider), onClick: () => onSocialClick?.(socialProvider.provider) }, socialProvider.provider))), _jsx(AuthSecondaryButton, { sx: { minWidth: 0 }, "aria-label": "SMS", onClick: onSmsClick, startIcon: _jsx(PhoneIphoneIcon, { fontSize: "small" }), children: "SMS" })] }), socialError ? (_jsx(Alert, { severity: "error", sx: { mt: 2 }, children: socialError })) : null] }));
+}
+function FuseSignUpCtaSection(props) {
+    const { LinkComponent, signUpPath = "/sign-up" } = props;
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: { mt: 6, display: "flex", alignItems: "center" }, children: [_jsx(Box, { sx: { mt: "1px", flex: 1, borderTop: 1, borderColor: "divider" } }), _jsx(Typography, { sx: { mx: 1 }, color: "text.secondary", children: "\u00BFNo tienes una cuenta?" }), _jsx(Box, { sx: { mt: "1px", flex: 1, borderTop: 1, borderColor: "divider" } })] }), _jsx(Box, { sx: { mt: 2, display: "flex", alignItems: "center", gap: 2 }, children: _jsx(AuthSecondaryButton, { component: LinkComponent, to: signUpPath, sx: { flex: 1 }, "aria-label": "Crear cuenta", children: "Crear cuenta" }) })] }));
+}
+function FuseSignInCtaSection(props) {
+    const { LinkComponent, signInPath = "/sign-in" } = props;
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: { mt: 6, display: "flex", alignItems: "center" }, children: [_jsx(Box, { sx: { mt: "1px", flex: 1, borderTop: 1, borderColor: "divider" } }), _jsx(Typography, { sx: { mx: 1 }, color: "text.secondary", children: "\u00BFYa tienes una cuenta?" }), _jsx(Box, { sx: { mt: "1px", flex: 1, borderTop: 1, borderColor: "divider" } })] }), _jsx(Box, { sx: { mt: 2, display: "flex", alignItems: "center", gap: 2 }, children: _jsx(AuthSecondaryButton, { component: LinkComponent, to: signInPath, sx: { flex: 1 }, "aria-label": "Iniciar sesi\u00F3n", children: "Iniciar sesi\u00F3n" }) })] }));
+}
+function FuseForgotPasswordPageForm() {
+    const { requestPasswordReset } = useFuseJwtAuth();
+    return (_jsx(AuthForgotPasswordForm, { onSubmit: (values) => requestPasswordReset({ email: values.email }) }));
+}
+function FuseResetPasswordPageForm(props) {
+    const { initialUid = "", initialToken = "" } = props;
+    const { confirmPasswordReset } = useFuseJwtAuth();
+    return (_jsx(AuthPasswordResetConfirmForm, { defaultValues: {
+            uid: initialUid,
+            token: initialToken,
+        }, onSubmit: (values) => confirmPasswordReset(values) }));
+}
+function FuseAccountConfirmationPageForm(props) {
+    const { initialUid = "", initialToken = "" } = props;
+    const [searchParams] = useSearchParams();
+    const navigate = useNavigate();
+    const initialEmail = useMemo(() => searchParams.get("email") || "", [searchParams]);
+    const { confirmAccountEmail, resendAccountConfirmation } = useFuseJwtAuth();
+    return (_jsx(AuthAccountConfirmationForm, { defaultValues: {
+            uid: initialUid,
+            token: initialToken,
+        }, defaultEmail: initialEmail, onGoToSignIn: () => navigate('/sign-in'), onSubmit: (values) => confirmAccountEmail(values), onResend: (values) => resendAccountConfirmation(values) }));
+}
+function useRoleSelectionDialog(options, defaultRole) {
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const [selectedRole, setSelectedRole] = useState(defaultRole ?? options[0]?.value ?? "");
+    const roleSelectionResolverRef = useRef(null);
+    const requestRoleSelection = useCallback(() => {
+        if (!options.length) {
+            return Promise.resolve(undefined);
+        }
+        if (options.length === 1) {
+            return Promise.resolve(options[0].value);
+        }
+        return new Promise((resolve) => {
+            roleSelectionResolverRef.current = resolve;
+            setIsDialogOpen(true);
+        });
+    }, [options]);
+    const closeRoleDialog = useCallback((role) => {
+        const resolver = roleSelectionResolverRef.current;
+        roleSelectionResolverRef.current = null;
+        setIsDialogOpen(false);
+        resolver?.(role);
+    }, []);
+    const dialog = (_jsx(AuthRoleSelectionDialog, { open: isDialogOpen, options: options, initialRole: selectedRole, onCancel: () => closeRoleDialog(undefined), onConfirm: (role) => {
+            setSelectedRole(role);
+            closeRoleDialog(role);
+        } }));
+    return { requestRoleSelection, dialog, hasRoleOptions: options.length > 0 };
+}
+export function createFuseAuthViews(options) {
+    const { LinkComponent, accountConfirmationPath = "/verify-email", signUpRoleOptions, defaultSignUpRole, socialConfig, onSignUpSuccess, } = options;
+    function SignInPageView() {
+        const [mode, setMode] = useState("password");
+        const { signInSocial } = useFuseJwtAuth();
+        const [socialLoadingProvider, setSocialLoadingProvider] = useState(null);
+        const [socialError, setSocialError] = useState(null);
+        const signupRoleOptions = (signUpRoleOptions ?? [])
+            .filter((roleOption) => roleOption.allowSignup === true)
+            .map((roleOption) => ({
+            value: roleOption.value,
+            label: roleOption.label,
+        }));
+        const { requestRoleSelection, dialog, hasRoleOptions } = useRoleSelectionDialog(signupRoleOptions, defaultSignUpRole);
+        const enabledSocialProviders = useMemo(() => getEnabledSocialProviders(socialConfig), [socialConfig]);
+        const onSocialClick = useCallback(async (provider) => {
+            const providerConfig = enabledSocialProviders.find((item) => item.provider === provider);
+            if (!providerConfig) {
+                return;
+            }
+            try {
+                setSocialError(null);
+                setSocialLoadingProvider(provider);
+                const tokenPayload = await authenticateWithSocialProvider(provider, providerConfig);
+                const selectedRole = hasRoleOptions ? await requestRoleSelection() : undefined;
+                if (hasRoleOptions && !selectedRole) {
+                    return;
+                }
+                await signInSocial({
+                    ...tokenPayload,
+                    provider,
+                    role: selectedRole,
+                    client: "web",
+                    termsAndConditionsAccepted: true,
+                });
+            }
+            catch (error) {
+                const parsed = parseAuthError(error);
+                setSocialError(parsed.rootMessage || "No se pudo continuar con el proveedor social.");
+            }
+            finally {
+                setSocialLoadingProvider(null);
+            }
+        }, [enabledSocialProviders, hasRoleOptions, requestRoleSelection, signInSocial]);
+        return (_jsxs(Box, { sx: {
+                mx: { xs: "auto", sm: 0 },
+                width: { xs: "100%", sm: 320 },
+                maxWidth: 320,
+                display: "flex",
+                flexDirection: "column",
+                gap: 4,
+            }, children: [_jsx(SignInPageTitle, {}), _jsxs(Box, { sx: { width: "100%" }, children: [_jsx(FuseSignInController, { LinkComponent: LinkComponent, mode: mode, requestRoleSelection: requestRoleSelection, onBackToPassword: () => setMode("password") }), mode === "password" && (_jsxs(_Fragment, { children: [_jsx(FuseSignUpCtaSection, { LinkComponent: LinkComponent }), _jsx(FuseAuthAlternativesSection, { onSmsClick: () => setMode("otp"), socialProviders: enabledSocialProviders, onSocialClick: onSocialClick, socialLoadingProvider: socialLoadingProvider, socialError: socialError })] }))] }), dialog] }));
+    }
+    function SignUpPageView() {
+        const [mode, setMode] = useState("password");
+        const { signInSocial } = useFuseJwtAuth();
+        const [socialLoadingProvider, setSocialLoadingProvider] = useState(null);
+        const [socialError, setSocialError] = useState(null);
+        const navigate = useNavigate();
+        const signupRoleOptions = (signUpRoleOptions ?? [])
+            .filter((roleOption) => roleOption.allowSignup === true)
+            .map((roleOption) => ({
+            value: roleOption.value,
+            label: roleOption.label,
+        }));
+        const { requestRoleSelection, dialog, hasRoleOptions } = useRoleSelectionDialog(signupRoleOptions, defaultSignUpRole);
+        const enabledSocialProviders = useMemo(() => getEnabledSocialProviders(socialConfig), [socialConfig]);
+        const onSocialClick = useCallback(async (provider) => {
+            const providerConfig = enabledSocialProviders.find((item) => item.provider === provider);
+            if (!providerConfig) {
+                return;
+            }
+            try {
+                setSocialError(null);
+                setSocialLoadingProvider(provider);
+                const tokenPayload = await authenticateWithSocialProvider(provider, providerConfig);
+                const selectedRole = hasRoleOptions ? await requestRoleSelection() : undefined;
+                if (hasRoleOptions && !selectedRole) {
+                    return;
+                }
+                await signInSocial({
+                    ...tokenPayload,
+                    provider,
+                    role: selectedRole,
+                    client: "web",
+                    termsAndConditionsAccepted: true,
+                });
+            }
+            catch (error) {
+                const parsed = parseAuthError(error);
+                setSocialError(parsed.rootMessage || "No se pudo continuar con el proveedor social.");
+            }
+            finally {
+                setSocialLoadingProvider(null);
+            }
+        }, [enabledSocialProviders, hasRoleOptions, requestRoleSelection, signInSocial]);
+        return (_jsxs(Box, { sx: {
+                mx: { xs: "auto", sm: 0 },
+                width: { xs: "100%", sm: 320 },
+                maxWidth: 320,
+                display: "flex",
+                flexDirection: "column",
+                gap: 4,
+            }, children: [_jsx(SignUpPageTitle, {}), _jsx(Box, { sx: { width: "100%" }, children: mode === "password" ? (_jsxs(_Fragment, { children: [_jsx(FuseSignUpController, { requiresRoleSelection: hasRoleOptions, requestRoleSelection: requestRoleSelection, onSuccess: (payload) => {
+                                    const { email } = payload;
+                                    onSignUpSuccess?.(payload);
+                                    navigate(`${accountConfirmationPath}?email=${encodeURIComponent(email)}`);
+                                } }), _jsx(FuseSignInCtaSection, { LinkComponent: LinkComponent }), _jsx(FuseAuthAlternativesSection, { onSmsClick: () => setMode("otp"), socialProviders: enabledSocialProviders, onSocialClick: onSocialClick, socialLoadingProvider: socialLoadingProvider, socialError: socialError })] })) : (_jsx(FuseOtpSignUpForm, { requestRoleSelection: requestRoleSelection, onBackToPassword: () => setMode("password") })) }), dialog] }));
+    }
+    function ForgotPasswordPageView() {
+        return (_jsxs(Box, { sx: {
+                mx: { xs: "auto", sm: 0 },
+                width: { xs: "100%", sm: 320 },
+                maxWidth: 320,
+                display: "flex",
+                flexDirection: "column",
+                gap: 4,
+            }, children: [_jsxs(Box, { sx: { width: "100%" }, children: [_jsx("img", { style: { width: 48 }, src: "/assets/images/logo/logo.svg", alt: "logo" }), _jsx(Typography, { sx: {
+                                mt: 4,
+                                fontSize: 36,
+                                lineHeight: 1.25,
+                                fontWeight: 800,
+                                letterSpacing: "-0.02em",
+                            }, children: "Olvid\u00E9 mi contrase\u00F1a" }), _jsx(Typography, { sx: { mt: 1.5, fontSize: 16 }, color: "text.secondary", children: "Ingresa tu correo y te enviaremos un enlace para restablecer tu contrase\u00F1a." })] }), _jsx(FuseForgotPasswordPageForm, {}), _jsxs(Typography, { sx: { fontSize: 16, fontWeight: 500 }, color: "text.secondary", children: ["Volver a ", _jsx(LinkComponent, { to: "/sign-in", children: "Iniciar sesi\u00F3n" })] })] }));
+    }
+    function ResetPasswordPageView() {
+        const [searchParams] = useSearchParams();
+        const initialUid = useMemo(() => searchParams.get("uid") || "", [searchParams]);
+        const initialToken = useMemo(() => searchParams.get("token") || "", [searchParams]);
+        return (_jsxs(Box, { sx: {
+                mx: { xs: "auto", sm: 0 },
+                width: { xs: "100%", sm: 320 },
+                maxWidth: 320,
+                display: "flex",
+                flexDirection: "column",
+                gap: 4,
+            }, children: [_jsxs(Box, { sx: { width: "100%" }, children: [_jsx("img", { style: { width: 48 }, src: "/assets/images/logo/logo.svg", alt: "logo" }), _jsx(Typography, { sx: {
+                                mt: 4,
+                                fontSize: 36,
+                                lineHeight: 1.25,
+                                fontWeight: 800,
+                                letterSpacing: "-0.02em",
+                            }, children: "Restablecer contrase\u00F1a" }), _jsx(Typography, { sx: { mt: 1.5, fontSize: 16 }, color: "text.secondary", children: "Define una nueva contrase\u00F1a para volver a acceder a tu cuenta." })] }), _jsx(FuseResetPasswordPageForm, { initialUid: initialUid, initialToken: initialToken }), _jsxs(Typography, { sx: { fontSize: 16, fontWeight: 500 }, color: "text.secondary", children: ["Volver a ", _jsx(LinkComponent, { to: "/sign-in", children: "Iniciar sesi\u00F3n" })] })] }));
+    }
+    function SignOutPageView() {
+        return (_jsxs(Box, { sx: {
+                mx: { xs: "auto", sm: 0 },
+                width: { xs: "100%", sm: 320 },
+                maxWidth: 320,
+            }, children: [_jsx(SignOutPageTitle, {}), _jsxs(Typography, { sx: { mt: 2, textAlign: "center", fontSize: 16, fontWeight: 500 }, color: "text.secondary", children: ["Ir a ", _jsx(LinkComponent, { to: "/sign-in", children: "iniciar sesi\u00F3n" })] })] }));
+    }
+    function AccountConfirmationPageView() {
+        const [searchParams] = useSearchParams();
+        const initialUid = useMemo(() => searchParams.get("uid") || "", [searchParams]);
+        const initialToken = useMemo(() => searchParams.get("token") || "", [searchParams]);
+        return (_jsxs(Box, { sx: {
+                mx: { xs: "auto", sm: 0 },
+                width: { xs: "100%", sm: 320 },
+                maxWidth: 320,
+                display: "flex",
+                flexDirection: "column",
+                gap: 4,
+            }, children: [_jsxs(Box, { sx: { width: "100%" }, children: [_jsx("img", { style: { width: 48 }, src: "/assets/images/logo/logo.svg", alt: "logo" }), _jsx(Typography, { sx: {
+                                mt: 4,
+                                fontSize: 36,
+                                lineHeight: 1.25,
+                                fontWeight: 800,
+                                letterSpacing: "-0.02em",
+                            }, children: "Verificar cuenta" }), _jsx(Typography, { sx: { mt: 1.5, fontSize: 16 }, color: "text.secondary", children: "Estamos validando tu enlace de confirmaci\u00F3n." })] }), _jsx(FuseAccountConfirmationPageForm, { initialUid: initialUid, initialToken: initialToken })] }));
+    }
+    return {
+        SignInPageView,
+        SignUpPageView,
+        ForgotPasswordPageView,
+        ResetPasswordPageView,
+        SignOutPageView,
+        AccountConfirmationPageView,
+    };
+}

package/dist/auth/fuse/fuseAdapter.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { AuthClient } from '../client';
+import { AccountConfirmationPayload, AccountConfirmationResendPayload, LoginSocialPayload, PasswordChangePayload, PasswordResetConfirmPayload, PasswordResetRequestPayload, RegisterPayload, RequestOtpPayload, VerifyOtpPayload } from '../types';
+type JsonRecord = Record<string, unknown>;
+type FuseAuthState<TUser = JsonRecord> = {
+    authStatus: 'configuring' | 'authenticated' | 'unauthenticated';
+    isAuthenticated: boolean;
+    user: TUser | null;
+};
+export type FuseJwtAuthContextType<TUser = JsonRecord> = FuseAuthState<TUser> & {
+    signIn: (credentials: {
+        login: string;
+        password: string;
+        username?: string;
+    }) => Promise<JsonRecord>;
+    signInSocial: (payload: LoginSocialPayload) => Promise<JsonRecord>;
+    requestOtp: (payload: RequestOtpPayload) => Promise<Record<string, unknown>>;
+    signInOtp: (payload: VerifyOtpPayload) => Promise<JsonRecord>;
+    signUp: (payload: RegisterPayload) => Promise<JsonRecord>;
+    confirmAccountEmail: (payload: AccountConfirmationPayload) => Promise<Record<string, unknown>>;
+    resendAccountConfirmation: (payload: AccountConfirmationResendPayload) => Promise<Record<string, unknown>>;
+    requestPasswordReset: (payload: PasswordResetRequestPayload) => Promise<Record<string, unknown>>;
+    confirmPasswordReset: (payload: PasswordResetConfirmPayload) => Promise<Record<string, unknown>>;
+    changePassword: (payload: PasswordChangePayload) => Promise<Record<string, unknown>>;
+    switchProfile: (profileId: number) => Promise<JsonRecord>;
+    getProfiles: () => Promise<Record<string, unknown>[]>;
+    signOut: () => void;
+    refreshToken: () => Promise<string | null>;
+};
+type FuseAuthProviderComponentProps = {
+    children?: ReactNode;
+    onAuthStateChanged?: (state: FuseAuthState) => void;
+    ref?: React.Ref<{
+        signOut: () => void;
+    }>;
+};
+export declare const createFuseJwtAuthProvider: (authClient: AuthClient) => (props: FuseAuthProviderComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useFuseJwtAuth: () => FuseJwtAuthContextType<JsonRecord>;
+export {};
+//# sourceMappingURL=fuseAdapter.d.ts.map

package/dist/auth/fuse/fuseAdapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fuseAdapter.d.ts","sourceRoot":"","sources":["../../../src/auth/fuse/fuseAdapter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,SAAS,EAOV,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EACL,0BAA0B,EAC1B,gCAAgC,EAChC,kBAAkB,EAClB,qBAAqB,EACrB,2BAA2B,EAC3B,2BAA2B,EAC3B,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,UAAU,CAAC;AAElB,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE1C,KAAK,aAAa,CAAC,KAAK,GAAG,UAAU,IAAI;IACvC,UAAU,EAAE,aAAa,GAAG,eAAe,GAAG,iBAAiB,CAAC;IAChE,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,KAAK,GAAG,IAAI,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,sBAAsB,CAAC,KAAK,GAAG,UAAU,IAAI,aAAa,CAAC,KAAK,CAAC,GAAG;IAC9E,MAAM,EAAE,CAAC,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;IACrG,YAAY,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;IACnE,UAAU,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7E,SAAS,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;IAC9D,MAAM,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;IAC1D,mBAAmB,EAAE,CAAC,OAAO,EAAE,0BAA0B,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC/F,yBAAyB,EAAE,CAAC,OAAO,EAAE,gCAAgC,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3G,oBAAoB,EAAE,CAAC,OAAO,EAAE,2BAA2B,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACjG,oBAAoB,EAAE,CAAC,OAAO,EAAE,2BAA2B,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACjG,cAAc,EAAE,CAAC,OAAO,EAAE,qBAAqB,KAAK,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACrF,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;IAC1D,WAAW,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;IACtD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC5C,CAAC;AAEF,KAAK,8BAA8B,GAAG;IACpC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC,CAAC;CACJ,CAAC;AAsEF,eAAO,MAAM,yBAAyB,GAAI,YAAY,UAAU,aAC1B,8BAA8B,4CAgQnE,CAAC;AAEF,eAAO,MAAM,cAAc,0CAM1B,CAAC"}