@riligar/auth-react 1.9.4 → 1.10.0

package/dist/index.esm.js

@@ -3,9 +3,10 @@ import { useMemo, useEffect, createContext, useState, useRef } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Navigate, Outlet } from 'react-router-dom';
-import { Paper, Stack, Image, Title, Text, TextInput, PasswordInput, Anchor, Button, Divider, Group, Center, Loader } from '@mantine/core';
+import { Paper, Stack, Image, Title, Text, TextInput, PasswordInput, Anchor, Button, Divider, Group, Center, Loader, Modal, Box, Avatar, Collapse, Card, Tooltip, ThemeIcon } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { IconMail, IconLock, IconArrowRight, IconBrandGoogle, IconBrandGithub, IconUser, IconSend, IconCheck, IconX, IconRefresh } from '@tabler/icons-react';
+import { IconMail, IconLock, IconArrowRight, IconBrandGoogle, IconBrandGithub, IconUser, IconSend, IconCheck, IconX, IconRefresh, IconPhoto, IconTrash, IconPencil, IconShield, IconKey, IconUserCircle } from '@tabler/icons-react';
+import { notifications } from '@mantine/notifications';
 
 // Config - pode ser sobrescrita pelo AuthProvider
 // Tenta detectar ambiente Vite, mas falha graciosamente se não existir
@@ -281,6 +282,34 @@ const getApplicationInfo = async () => {
   }
 };
 
+/*--- Profile Management ---------------------------*/
+const updateProfile = async data => {
+  return await api('/auth/update-user', {
+    method: 'POST',
+    body: JSON.stringify(data)
+  });
+};
+const changePassword = async (currentPassword, newPassword, revokeOtherSessions = false) => {
+  return await api('/auth/change-password', {
+    method: 'POST',
+    body: JSON.stringify({
+      currentPassword,
+      newPassword,
+      revokeOtherSessions
+    })
+  });
+};
+const changeEmail = async (newEmail, callbackURL) => {
+  const callback = callbackURL || (typeof window !== 'undefined' ? `${window.location.origin}/auth/verify-email` : '/auth/verify-email');
+  return await api('/auth/change-email', {
+    method: 'POST',
+    body: JSON.stringify({
+      newEmail,
+      callbackURL: callback
+    })
+  });
+};
+
 /* Social login redirect (ex.: Google) -----------*/
 function socialRedirect(provider, redirectTo = typeof window !== 'undefined' ? window.location.href : '/') {
   if (typeof window === 'undefined') return;
@@ -301,7 +330,10 @@ const useAuthStore = create((set, get) => ({
     verifyMagicLink: false,
     resetPassword: false,
     verifyEmail: false,
-    resendVerification: false
+    resendVerification: false,
+    updateProfile: false,
+    changePassword: false,
+    changeEmail: false
   },
   // Application info (logo, nome, etc)
   applicationInfo: null,
@@ -668,7 +700,75 @@ const useAuthStore = create((set, get) => ({
   /* Atualizar usuário manualmente */
   setUser: user => set({
     user
-  })
+  }),
+  /* Profile Management */
+  updateProfile: async data => {
+    const {
+      setLoading
+    } = get();
+    setLoading('updateProfile', true);
+    set({
+      error: null
+    });
+    try {
+      const result = await updateProfile(data);
+      // Atualiza o user no store com os novos dados
+      set(state => ({
+        user: state.user ? {
+          ...state.user,
+          ...data
+        } : null
+      }));
+      setLoading('updateProfile', false);
+      return result;
+    } catch (err) {
+      set({
+        error: err
+      });
+      setLoading('updateProfile', false);
+      throw err;
+    }
+  },
+  changePassword: async (currentPassword, newPassword, revokeOtherSessions = false) => {
+    const {
+      setLoading
+    } = get();
+    setLoading('changePassword', true);
+    set({
+      error: null
+    });
+    try {
+      const result = await changePassword(currentPassword, newPassword, revokeOtherSessions);
+      setLoading('changePassword', false);
+      return result;
+    } catch (err) {
+      set({
+        error: err
+      });
+      setLoading('changePassword', false);
+      throw err;
+    }
+  },
+  changeEmail: async (newEmail, callbackURL) => {
+    const {
+      setLoading
+    } = get();
+    setLoading('changeEmail', true);
+    set({
+      error: null
+    });
+    try {
+      const result = await changeEmail(newEmail, callbackURL);
+      setLoading('changeEmail', false);
+      return result;
+    } catch (err) {
+      set({
+        error: err
+      });
+      setLoading('changeEmail', false);
+      throw err;
+    }
+  }
 }));
 
 const AuthContext = /*#__PURE__*/createContext(); // só para ter o Provider em JSX
@@ -792,6 +892,18 @@ const useSession = () => useAuthStore(useShallow(s => ({
 // Loading States Hook
 const useAuthLoading = () => useAuthStore(s => s.loadingStates);
 
+// Profile Management Hook
+const useProfile = () => useAuthStore(useShallow(s => ({
+  user: s.user,
+  updateProfile: s.updateProfile,
+  changePassword: s.changePassword,
+  changeEmail: s.changeEmail,
+  loadingUpdateProfile: s.loadingStates.updateProfile,
+  loadingChangePassword: s.loadingStates.changePassword,
+  loadingChangeEmail: s.loadingStates.changeEmail,
+  error: s.error
+})));
+
 // Application Logo Hook
 const useApplicationLogo = () => {
   const applicationInfo = useAuthStore(s => s.applicationInfo);
@@ -1728,5 +1840,680 @@ function VerifyEmailCard({
   });
 }
 
-export { AuthCard, AuthProvider, ForgotPasswordForm, MagicLinkForm, MagicLinkVerify, ProtectedRoute, ResetPasswordForm, SignInForm, SignUpForm, VerifyEmailCard, configure, decodeJWT, forgotPassword, getApplicationInfo, getCurrentUser, getSession, isAuthenticated, refreshToken, resendVerification, resetPassword, sendMagicLink, signIn, signOut, signUp, socialRedirect, useAuth, useAuthLoading, useAuthStore, useCheckToken, useEmailVerification, useMagicLink, usePasswordReset, useSession, useSignIn, useSignOut, useSignUp, verifyEmail, verifyMagicLink };
+function AccountModal({
+  // Controle do modal
+  opened,
+  onClose,
+  // Callbacks
+  onProfileUpdate,
+  onPasswordChange,
+  onEmailChange,
+  onError,
+  // Features toggle
+  showAvatar = true,
+  showName = true,
+  showEmail = true,
+  showPassword = true,
+  // Customização
+  labels = {},
+  title = 'Account',
+  subtitle = 'Manage your account info.',
+  // Avatar config
+  maxAvatarSize = 500 * 1024,
+  // 500KB
+
+  ...modalProps
+}) {
+  // Local state - which section is expanded
+  const [editingSection, setEditingSection] = useState(null); // 'password' | 'email' | 'name' | 'avatar' | null
+
+  // Hook para profile
+  const {
+    user,
+    updateProfile,
+    changePassword,
+    changeEmail,
+    loadingUpdateProfile,
+    loadingChangePassword,
+    loadingChangeEmail
+  } = useProfile();
+
+  // Password form
+  const passwordForm = useForm({
+    initialValues: {
+      currentPassword: '',
+      newPassword: '',
+      confirmPassword: ''
+    },
+    validate: {
+      currentPassword: v => !v ? labels.currentPasswordRequired || 'Senha atual obrigatória' : null,
+      newPassword: v => {
+        if (!v) return labels.newPasswordRequired || 'Nova senha obrigatória';
+        if (v.length < 8) return labels.passwordMinLength || 'Mínimo 8 caracteres';
+        return null;
+      },
+      confirmPassword: (v, values) => v !== values.newPassword ? labels.passwordMismatch || 'Senhas não coincidem' : null
+    }
+  });
+
+  // Email form
+  const emailForm = useForm({
+    initialValues: {
+      newEmail: ''
+    },
+    validate: {
+      newEmail: v => {
+        if (!v) return labels.emailRequired || 'Email obrigatório';
+        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) return labels.emailInvalid || 'Email inválido';
+        return null;
+      }
+    }
+  });
+
+  // Name form
+  const nameForm = useForm({
+    initialValues: {
+      name: ''
+    },
+    validate: {
+      name: v => !v ? labels.nameRequired || 'Nome obrigatório' : null
+    }
+  });
+
+  // Avatar state (base64)
+  const [avatarPreview, setAvatarPreview] = useState(null);
+  const [avatarFile, setAvatarFile] = useState(null);
+
+  // Handle file selection and convert to base64
+  const handleAvatarFileChange = file => {
+    if (!file) {
+      setAvatarPreview(null);
+      setAvatarFile(null);
+      return;
+    }
+
+    // Validate file type
+    if (!file.type.startsWith('image/')) {
+      notifications.show({
+        title: labels.errorTitle || 'Erro',
+        message: labels.avatarInvalidType || 'Por favor, selecione uma imagem válida',
+        color: 'red'
+      });
+      return;
+    }
+
+    // Validate file size
+    if (file.size > maxAvatarSize) {
+      notifications.show({
+        title: labels.errorTitle || 'Erro',
+        message: labels.avatarTooLarge || `Imagem muito grande. Máximo ${Math.round(maxAvatarSize / 1024)}KB.`,
+        color: 'red'
+      });
+      return;
+    }
+    setAvatarFile(file);
+
+    // Convert to base64
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setAvatarPreview(reader.result);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  // Populate forms when user data is available or section opens
+  useEffect(() => {
+    if (editingSection === 'name' && user?.name) {
+      nameForm.setValues({
+        name: user.name
+      });
+    }
+    if (editingSection === 'avatar' && user?.image) {
+      setAvatarPreview(user.image);
+    }
+  }, [editingSection, user]);
+  const handleToggleSection = section => {
+    if (editingSection === section) {
+      setEditingSection(null);
+      passwordForm.reset();
+      emailForm.reset();
+      nameForm.reset();
+      setAvatarPreview(null);
+      setAvatarFile(null);
+    } else {
+      setEditingSection(section);
+    }
+  };
+  const handleChangePassword = async values => {
+    try {
+      await changePassword(values.currentPassword, values.newPassword);
+      notifications.show({
+        title: labels.successTitle || 'Sucesso',
+        message: labels.passwordChanged || 'Senha alterada com sucesso',
+        color: 'green'
+      });
+      passwordForm.reset();
+      setEditingSection(null);
+      onPasswordChange?.();
+    } catch (error) {
+      notifications.show({
+        title: labels.errorTitle || 'Erro',
+        message: error.message || labels.passwordChangeFailed || 'Falha ao alterar senha',
+        color: 'red'
+      });
+      onError?.(error);
+    }
+  };
+  const handleChangeEmail = async values => {
+    try {
+      await changeEmail(values.newEmail);
+      notifications.show({
+        title: labels.successTitle || 'Sucesso',
+        message: labels.emailVerificationSent || 'Verifique seu novo email para confirmar a alteração',
+        color: 'green'
+      });
+      emailForm.reset();
+      setEditingSection(null);
+      onEmailChange?.(values.newEmail);
+    } catch (error) {
+      notifications.show({
+        title: labels.errorTitle || 'Erro',
+        message: error.message || labels.emailChangeFailed || 'Falha ao alterar email',
+        color: 'red'
+      });
+      onError?.(error);
+    }
+  };
+  const handleChangeName = async values => {
+    try {
+      await updateProfile({
+        name: values.name
+      });
+      notifications.show({
+        title: labels.successTitle || 'Sucesso',
+        message: labels.nameUpdated || 'Nome atualizado com sucesso',
+        color: 'green'
+      });
+      nameForm.reset();
+      setEditingSection(null);
+      onProfileUpdate?.({
+        name: values.name
+      });
+    } catch (error) {
+      notifications.show({
+        title: labels.errorTitle || 'Erro',
+        message: error.message || labels.nameUpdateFailed || 'Falha ao atualizar nome',
+        color: 'red'
+      });
+      onError?.(error);
+    }
+  };
+  const handleChangeAvatar = async () => {
+    if (!avatarPreview) {
+      notifications.show({
+        title: labels.errorTitle || 'Erro',
+        message: labels.avatarRequired || 'Selecione uma imagem',
+        color: 'red'
+      });
+      return;
+    }
+    try {
+      await updateProfile({
+        image: avatarPreview
+      });
+      notifications.show({
+        title: labels.successTitle || 'Sucesso',
+        message: labels.avatarUpdated || 'Foto de perfil atualizada com sucesso',
+        color: 'green'
+      });
+      setAvatarPreview(null);
+      setAvatarFile(null);
+      setEditingSection(null);
+      onProfileUpdate?.({
+        image: avatarPreview
+      });
+    } catch (error) {
+      notifications.show({
+        title: labels.errorTitle || 'Erro',
+        message: error.message || labels.avatarUpdateFailed || 'Falha ao atualizar foto',
+        color: 'red'
+      });
+      onError?.(error);
+    }
+  };
+  const handleRemoveAvatar = async () => {
+    try {
+      await updateProfile({
+        image: ''
+      });
+      notifications.show({
+        title: labels.successTitle || 'Sucesso',
+        message: labels.avatarRemoved || 'Foto de perfil removida',
+        color: 'green'
+      });
+      setAvatarPreview(null);
+      setAvatarFile(null);
+      setEditingSection(null);
+      onProfileUpdate?.({
+        image: ''
+      });
+    } catch (error) {
+      notifications.show({
+        title: labels.errorTitle || 'Erro',
+        message: error.message || labels.avatarRemoveFailed || 'Falha ao remover foto',
+        color: 'red'
+      });
+      onError?.(error);
+    }
+  };
+
+  // Reusable Section Header
+  const SectionHeader = ({
+    icon: Icon,
+    sectionTitle,
+    description
+  }) => /*#__PURE__*/jsxs(Group, {
+    gap: "sm",
+    mb: "lg",
+    children: [/*#__PURE__*/jsx(ThemeIcon, {
+      size: 36,
+      variant: "light",
+      children: /*#__PURE__*/jsx(Icon, {
+        size: 18
+      })
+    }), /*#__PURE__*/jsxs(Box, {
+      children: [/*#__PURE__*/jsx(Text, {
+        fw: 600,
+        size: "md",
+        children: sectionTitle
+      }), description && /*#__PURE__*/jsx(Text, {
+        size: "xs",
+        c: "dimmed",
+        children: description
+      })]
+    })]
+  });
+
+  // Reusable Row component
+  const SettingRow = ({
+    label,
+    children,
+    action,
+    actionLabel,
+    onClick,
+    expanded
+  }) => /*#__PURE__*/jsx(Card, {
+    p: "xs",
+    children: /*#__PURE__*/jsxs(Group, {
+      justify: "space-between",
+      wrap: "nowrap",
+      children: [/*#__PURE__*/jsxs(Group, {
+        gap: "xl",
+        wrap: "nowrap",
+        flex: 1,
+        children: [/*#__PURE__*/jsx(Text, {
+          size: "sm",
+          c: "dimmed",
+          w: 100,
+          style: {
+            flexShrink: 0
+          },
+          children: label
+        }), /*#__PURE__*/jsx(Box, {
+          flex: 1,
+          children: children
+        })]
+      }), action && /*#__PURE__*/jsx(Tooltip, {
+        label: actionLabel || action,
+        position: "left",
+        children: /*#__PURE__*/jsx(Anchor, {
+          size: "sm",
+          fw: 500,
+          onClick: onClick,
+          c: expanded ? 'red' : 'blue',
+          children: expanded ? labels.cancel || 'Cancel' : action
+        })
+      })]
+    })
+  });
+  return /*#__PURE__*/jsxs(Modal, {
+    opened: opened,
+    onClose: onClose,
+    size: 550,
+    withCloseButton: true,
+    radius: "lg",
+    overlayProps: {
+      backgroundOpacity: 0.55,
+      blur: 3
+    },
+    title: /*#__PURE__*/jsxs(Group, {
+      gap: "md",
+      children: [/*#__PURE__*/jsx(ThemeIcon, {
+        size: 44,
+        variant: "light",
+        children: /*#__PURE__*/jsx(IconUserCircle, {
+          size: 24
+        })
+      }), /*#__PURE__*/jsxs(Box, {
+        children: [/*#__PURE__*/jsx(Title, {
+          order: 4,
+          children: title
+        }), /*#__PURE__*/jsx(Text, {
+          size: "sm",
+          c: "dimmed",
+          children: subtitle
+        })]
+      })]
+    }),
+    ...modalProps,
+    children: [/*#__PURE__*/jsx(Divider, {
+      mb: "md"
+    }), (showAvatar || showName || showEmail) && /*#__PURE__*/jsxs(Box, {
+      mb: "xl",
+      children: [/*#__PURE__*/jsx(SectionHeader, {
+        icon: IconUser,
+        sectionTitle: labels.profileSection || 'Profile',
+        description: labels.profileDescription || 'Your personal information'
+      }), /*#__PURE__*/jsxs(Stack, {
+        gap: "sm",
+        children: [showAvatar && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(SettingRow, {
+            label: labels.avatar || 'Avatar',
+            action: labels.update || 'Update',
+            actionLabel: labels.updateAvatar || 'Update your profile picture',
+            onClick: () => handleToggleSection('avatar'),
+            expanded: editingSection === 'avatar',
+            children: /*#__PURE__*/jsx(Group, {
+              gap: "md",
+              children: /*#__PURE__*/jsx(Avatar, {
+                src: user?.image,
+                name: user?.name || user?.email,
+                size: 48,
+                radius: "xl",
+                color: "initials"
+              })
+            })
+          }), /*#__PURE__*/jsx(Collapse, {
+            in: editingSection === 'avatar',
+            children: /*#__PURE__*/jsx(Card, {
+              p: "md",
+              withBorder: true,
+              children: /*#__PURE__*/jsxs(Stack, {
+                gap: "md",
+                align: "center",
+                children: [/*#__PURE__*/jsx("input", {
+                  type: "file",
+                  id: "avatar-upload",
+                  accept: "image/*",
+                  style: {
+                    display: 'none'
+                  },
+                  onChange: e => handleAvatarFileChange(e.target.files?.[0])
+                }), /*#__PURE__*/jsx(Tooltip, {
+                  label: labels.clickToChange || 'Clique para alterar',
+                  position: "bottom",
+                  children: /*#__PURE__*/jsxs(Box, {
+                    onClick: () => document.getElementById('avatar-upload')?.click(),
+                    style: {
+                      position: 'relative',
+                      cursor: 'pointer',
+                      borderRadius: '50%'
+                    },
+                    children: [/*#__PURE__*/jsx(Avatar, {
+                      src: avatarPreview || user?.image,
+                      name: user?.name || user?.email,
+                      size: 100,
+                      radius: 100,
+                      color: "initials"
+                    }), /*#__PURE__*/jsx(ThemeIcon, {
+                      size: 32,
+                      radius: "xl",
+                      color: "blue",
+                      style: {
+                        position: 'absolute',
+                        bottom: 0,
+                        right: 0,
+                        border: '2px solid var(--mantine-color-body)'
+                      },
+                      children: /*#__PURE__*/jsx(IconPhoto, {
+                        size: 16
+                      })
+                    })]
+                  })
+                }), /*#__PURE__*/jsx(Text, {
+                  size: "xs",
+                  c: "dimmed",
+                  ta: "center",
+                  children: labels.avatarHint || `Máximo ${Math.round(maxAvatarSize / 1024)}KB • JPG, PNG, GIF, WebP`
+                }), /*#__PURE__*/jsxs(Group, {
+                  justify: "center",
+                  gap: "sm",
+                  children: [user?.image && /*#__PURE__*/jsx(Tooltip, {
+                    label: labels.removePhoto || 'Remover foto',
+                    children: /*#__PURE__*/jsx(Button, {
+                      variant: "light",
+                      color: "red",
+                      size: "xs",
+                      onClick: handleRemoveAvatar,
+                      loading: loadingUpdateProfile,
+                      leftSection: /*#__PURE__*/jsx(IconTrash, {
+                        size: 14
+                      }),
+                      children: labels.remove || 'Remover'
+                    })
+                  }), /*#__PURE__*/jsx(Button, {
+                    variant: "default",
+                    size: "xs",
+                    onClick: () => handleToggleSection('avatar'),
+                    children: labels.cancel || 'Cancelar'
+                  }), /*#__PURE__*/jsx(Button, {
+                    size: "xs",
+                    loading: loadingUpdateProfile,
+                    leftSection: /*#__PURE__*/jsx(IconCheck, {
+                      size: 14
+                    }),
+                    onClick: handleChangeAvatar,
+                    disabled: !avatarPreview || avatarPreview === user?.image,
+                    children: labels.save || 'Salvar'
+                  })]
+                })]
+              })
+            })
+          })]
+        }), showName && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(SettingRow, {
+            label: labels.name || 'Nome',
+            action: labels.change || 'Change',
+            actionLabel: labels.changeName || 'Change your display name',
+            onClick: () => handleToggleSection('name'),
+            expanded: editingSection === 'name',
+            children: /*#__PURE__*/jsxs(Group, {
+              gap: "xs",
+              children: [/*#__PURE__*/jsx(IconPencil, {
+                size: 16,
+                color: "var(--mantine-color-dimmed)"
+              }), /*#__PURE__*/jsx(Text, {
+                size: "sm",
+                children: user?.name || labels.notDefined || 'Não definido'
+              })]
+            })
+          }), /*#__PURE__*/jsx(Collapse, {
+            in: editingSection === 'name',
+            children: /*#__PURE__*/jsx(Card, {
+              p: "md",
+              withBorder: true,
+              children: /*#__PURE__*/jsx("form", {
+                onSubmit: nameForm.onSubmit(handleChangeName),
+                children: /*#__PURE__*/jsxs(Stack, {
+                  gap: "sm",
+                  children: [/*#__PURE__*/jsx(TextInput, {
+                    label: labels.name || 'Nome',
+                    placeholder: labels.namePlaceholder || 'Digite seu nome',
+                    leftSection: /*#__PURE__*/jsx(IconUser, {
+                      size: 16
+                    }),
+                    ...nameForm.getInputProps('name')
+                  }), /*#__PURE__*/jsxs(Group, {
+                    justify: "flex-end",
+                    gap: "sm",
+                    children: [/*#__PURE__*/jsx(Button, {
+                      variant: "default",
+                      size: "xs",
+                      onClick: () => handleToggleSection('name'),
+                      leftSection: /*#__PURE__*/jsx(IconX, {
+                        size: 14
+                      }),
+                      children: labels.cancel || 'Cancelar'
+                    }), /*#__PURE__*/jsx(Button, {
+                      type: "submit",
+                      size: "xs",
+                      loading: loadingUpdateProfile,
+                      leftSection: /*#__PURE__*/jsx(IconCheck, {
+                        size: 14
+                      }),
+                      children: labels.save || 'Salvar'
+                    })]
+                  })]
+                })
+              })
+            })
+          })]
+        }), showEmail && /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(SettingRow, {
+            label: labels.email || 'Email',
+            action: labels.change || 'Change',
+            actionLabel: labels.changeEmail || 'Change your email',
+            onClick: () => handleToggleSection('email'),
+            expanded: editingSection === 'email',
+            children: /*#__PURE__*/jsxs(Group, {
+              gap: "xs",
+              children: [/*#__PURE__*/jsx(IconMail, {
+                size: 16,
+                color: "var(--mantine-color-dimmed)"
+              }), /*#__PURE__*/jsx(Text, {
+                size: "sm",
+                children: user?.email || 'email@exemplo.com'
+              })]
+            })
+          }), /*#__PURE__*/jsx(Collapse, {
+            in: editingSection === 'email',
+            children: /*#__PURE__*/jsx(Card, {
+              p: "md",
+              withBorder: true,
+              children: /*#__PURE__*/jsx("form", {
+                onSubmit: emailForm.onSubmit(handleChangeEmail),
+                children: /*#__PURE__*/jsxs(Stack, {
+                  gap: "sm",
+                  children: [/*#__PURE__*/jsx(TextInput, {
+                    label: labels.newEmail || 'Novo Email',
+                    placeholder: labels.newEmailPlaceholder || 'Digite o novo email',
+                    leftSection: /*#__PURE__*/jsx(IconMail, {
+                      size: 16
+                    }),
+                    ...emailForm.getInputProps('newEmail')
+                  }), /*#__PURE__*/jsxs(Group, {
+                    justify: "flex-end",
+                    gap: "sm",
+                    children: [/*#__PURE__*/jsx(Button, {
+                      variant: "default",
+                      size: "xs",
+                      onClick: () => handleToggleSection('email'),
+                      leftSection: /*#__PURE__*/jsx(IconX, {
+                        size: 14
+                      }),
+                      children: labels.cancel || 'Cancelar'
+                    }), /*#__PURE__*/jsx(Button, {
+                      type: "submit",
+                      size: "xs",
+                      loading: loadingChangeEmail,
+                      leftSection: /*#__PURE__*/jsx(IconCheck, {
+                        size: 14
+                      }),
+                      children: labels.save || 'Salvar'
+                    })]
+                  })]
+                })
+              })
+            })
+          })]
+        })]
+      })]
+    }), showPassword && /*#__PURE__*/jsxs(Box, {
+      mb: "md",
+      children: [/*#__PURE__*/jsx(SectionHeader, {
+        icon: IconShield,
+        sectionTitle: labels.securitySection || 'Security',
+        description: labels.securityDescription || 'Protect your account'
+      }), /*#__PURE__*/jsxs(Stack, {
+        gap: "sm",
+        children: [/*#__PURE__*/jsx(SettingRow, {
+          label: labels.password || 'Password',
+          action: labels.change || 'Change',
+          actionLabel: labels.changePassword || 'Change your password',
+          onClick: () => handleToggleSection('password'),
+          expanded: editingSection === 'password',
+          children: /*#__PURE__*/jsxs(Group, {
+            gap: "xs",
+            children: [/*#__PURE__*/jsx(IconKey, {
+              size: 16,
+              color: "var(--mantine-color-dimmed)"
+            }), /*#__PURE__*/jsx(Text, {
+              size: "sm",
+              c: "dimmed",
+              children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
+            })]
+          })
+        }), /*#__PURE__*/jsx(Collapse, {
+          in: editingSection === 'password',
+          children: /*#__PURE__*/jsx(Card, {
+            p: "md",
+            withBorder: true,
+            children: /*#__PURE__*/jsx("form", {
+              onSubmit: passwordForm.onSubmit(handleChangePassword),
+              children: /*#__PURE__*/jsxs(Stack, {
+                gap: "sm",
+                children: [/*#__PURE__*/jsx(PasswordInput, {
+                  label: labels.currentPassword || 'Senha Atual',
+                  placeholder: labels.currentPasswordPlaceholder || 'Digite sua senha atual',
+                  ...passwordForm.getInputProps('currentPassword')
+                }), /*#__PURE__*/jsx(PasswordInput, {
+                  label: labels.newPassword || 'Nova Senha',
+                  placeholder: labels.newPasswordPlaceholder || 'Digite a nova senha',
+                  description: labels.passwordDescription || 'Mínimo 8 caracteres',
+                  ...passwordForm.getInputProps('newPassword')
+                }), /*#__PURE__*/jsx(PasswordInput, {
+                  label: labels.confirmPassword || 'Confirmar Nova Senha',
+                  placeholder: labels.confirmPasswordPlaceholder || 'Confirme a nova senha',
+                  ...passwordForm.getInputProps('confirmPassword')
+                }), /*#__PURE__*/jsxs(Group, {
+                  justify: "flex-end",
+                  gap: "xs",
+                  children: [/*#__PURE__*/jsx(Button, {
+                    variant: "default",
+                    size: "xs",
+                    onClick: () => handleToggleSection('password'),
+                    leftSection: /*#__PURE__*/jsx(IconX, {
+                      size: 14
+                    }),
+                    children: labels.cancel || 'Cancelar'
+                  }), /*#__PURE__*/jsx(Button, {
+                    type: "submit",
+                    size: "xs",
+                    loading: loadingChangePassword,
+                    leftSection: /*#__PURE__*/jsx(IconCheck, {
+                      size: 14
+                    }),
+                    children: labels.save || 'Salvar'
+                  })]
+                })]
+              })
+            })
+          })
+        })]
+      })]
+    })]
+  });
+}
+
+export { AccountModal, AuthCard, AuthProvider, ForgotPasswordForm, MagicLinkForm, MagicLinkVerify, ProtectedRoute, ResetPasswordForm, SignInForm, SignUpForm, VerifyEmailCard, changeEmail, changePassword, configure, decodeJWT, forgotPassword, getApplicationInfo, getCurrentUser, getSession, isAuthenticated, refreshToken, resendVerification, resetPassword, sendMagicLink, signIn, signOut, signUp, socialRedirect, updateProfile, useAuth, useAuthLoading, useAuthStore, useCheckToken, useEmailVerification, useMagicLink, usePasswordReset, useProfile, useSession, useSignIn, useSignOut, useSignUp, verifyEmail, verifyMagicLink };
 //# sourceMappingURL=index.esm.js.map