@riligar/auth-react 1.9.3 → 1.10.0

package/dist/index.js

@@ -8,6 +8,7 @@ var reactRouterDom = require('react-router-dom');
 var core = require('@mantine/core');
 var form = require('@mantine/form');
 var iconsReact = require('@tabler/icons-react');
+var notifications = require('@mantine/notifications');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 // Config - pode ser sobrescrita pelo AuthProvider
@@ -284,6 +285,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;
@@ -304,7 +333,10 @@ const useAuthStore = zustand.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,
@@ -671,7 +703,75 @@ const useAuthStore = zustand.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__*/react.createContext(); // só para ter o Provider em JSX
@@ -795,6 +895,18 @@ const useSession = () => useAuthStore(shallow.useShallow(s => ({
 // Loading States Hook
 const useAuthLoading = () => useAuthStore(s => s.loadingStates);
 
+// Profile Management Hook
+const useProfile = () => useAuthStore(shallow.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);
@@ -1731,6 +1843,682 @@ function VerifyEmailCard({
   });
 }
 
+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] = react.useState(null); // 'password' | 'email' | 'name' | 'avatar' | null
+
+  // Hook para profile
+  const {
+    user,
+    updateProfile,
+    changePassword,
+    changeEmail,
+    loadingUpdateProfile,
+    loadingChangePassword,
+    loadingChangeEmail
+  } = useProfile();
+
+  // Password form
+  const passwordForm = form.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 = form.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 = form.useForm({
+    initialValues: {
+      name: ''
+    },
+    validate: {
+      name: v => !v ? labels.nameRequired || 'Nome obrigatório' : null
+    }
+  });
+
+  // Avatar state (base64)
+  const [avatarPreview, setAvatarPreview] = react.useState(null);
+  const [avatarFile, setAvatarFile] = react.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.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.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
+  react.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.notifications.show({
+        title: labels.successTitle || 'Sucesso',
+        message: labels.passwordChanged || 'Senha alterada com sucesso',
+        color: 'green'
+      });
+      passwordForm.reset();
+      setEditingSection(null);
+      onPasswordChange?.();
+    } catch (error) {
+      notifications.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.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.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.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.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.notifications.show({
+        title: labels.errorTitle || 'Erro',
+        message: labels.avatarRequired || 'Selecione uma imagem',
+        color: 'red'
+      });
+      return;
+    }
+    try {
+      await updateProfile({
+        image: avatarPreview
+      });
+      notifications.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.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.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.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__*/jsxRuntime.jsxs(core.Group, {
+    gap: "sm",
+    mb: "lg",
+    children: [/*#__PURE__*/jsxRuntime.jsx(core.ThemeIcon, {
+      size: 36,
+      variant: "light",
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
+        size: 18
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+        fw: 600,
+        size: "md",
+        children: sectionTitle
+      }), description && /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+        size: "xs",
+        c: "dimmed",
+        children: description
+      })]
+    })]
+  });
+
+  // Reusable Row component
+  const SettingRow = ({
+    label,
+    children,
+    action,
+    actionLabel,
+    onClick,
+    expanded
+  }) => /*#__PURE__*/jsxRuntime.jsx(core.Card, {
+    p: "xs",
+    children: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+      justify: "space-between",
+      wrap: "nowrap",
+      children: [/*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+        gap: "xl",
+        wrap: "nowrap",
+        flex: 1,
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+          size: "sm",
+          c: "dimmed",
+          w: 100,
+          style: {
+            flexShrink: 0
+          },
+          children: label
+        }), /*#__PURE__*/jsxRuntime.jsx(core.Box, {
+          flex: 1,
+          children: children
+        })]
+      }), action && /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+        label: actionLabel || action,
+        position: "left",
+        children: /*#__PURE__*/jsxRuntime.jsx(core.Anchor, {
+          size: "sm",
+          fw: 500,
+          onClick: onClick,
+          c: expanded ? 'red' : 'blue',
+          children: expanded ? labels.cancel || 'Cancel' : action
+        })
+      })]
+    })
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(core.Modal, {
+    opened: opened,
+    onClose: onClose,
+    size: 550,
+    withCloseButton: true,
+    radius: "lg",
+    overlayProps: {
+      backgroundOpacity: 0.55,
+      blur: 3
+    },
+    title: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+      gap: "md",
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.ThemeIcon, {
+        size: 44,
+        variant: "light",
+        children: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconUserCircle, {
+          size: 24
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.Title, {
+          order: 4,
+          children: title
+        }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+          size: "sm",
+          c: "dimmed",
+          children: subtitle
+        })]
+      })]
+    }),
+    ...modalProps,
+    children: [/*#__PURE__*/jsxRuntime.jsx(core.Divider, {
+      mb: "md"
+    }), (showAvatar || showName || showEmail) && /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+      mb: "xl",
+      children: [/*#__PURE__*/jsxRuntime.jsx(SectionHeader, {
+        icon: iconsReact.IconUser,
+        sectionTitle: labels.profileSection || 'Profile',
+        description: labels.profileDescription || 'Your personal information'
+      }), /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+        gap: "sm",
+        children: [showAvatar && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(core.Group, {
+              gap: "md",
+              children: /*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
+                src: user?.image,
+                name: user?.name || user?.email,
+                size: 48,
+                radius: "xl",
+                color: "initials"
+              })
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(core.Collapse, {
+            in: editingSection === 'avatar',
+            children: /*#__PURE__*/jsxRuntime.jsx(core.Card, {
+              p: "md",
+              withBorder: true,
+              children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+                gap: "md",
+                align: "center",
+                children: [/*#__PURE__*/jsxRuntime.jsx("input", {
+                  type: "file",
+                  id: "avatar-upload",
+                  accept: "image/*",
+                  style: {
+                    display: 'none'
+                  },
+                  onChange: e => handleAvatarFileChange(e.target.files?.[0])
+                }), /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+                  label: labels.clickToChange || 'Clique para alterar',
+                  position: "bottom",
+                  children: /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+                    onClick: () => document.getElementById('avatar-upload')?.click(),
+                    style: {
+                      position: 'relative',
+                      cursor: 'pointer',
+                      borderRadius: '50%'
+                    },
+                    children: [/*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
+                      src: avatarPreview || user?.image,
+                      name: user?.name || user?.email,
+                      size: 100,
+                      radius: 100,
+                      color: "initials"
+                    }), /*#__PURE__*/jsxRuntime.jsx(core.ThemeIcon, {
+                      size: 32,
+                      radius: "xl",
+                      color: "blue",
+                      style: {
+                        position: 'absolute',
+                        bottom: 0,
+                        right: 0,
+                        border: '2px solid var(--mantine-color-body)'
+                      },
+                      children: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconPhoto, {
+                        size: 16
+                      })
+                    })]
+                  })
+                }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                  size: "xs",
+                  c: "dimmed",
+                  ta: "center",
+                  children: labels.avatarHint || `Máximo ${Math.round(maxAvatarSize / 1024)}KB • JPG, PNG, GIF, WebP`
+                }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+                  justify: "center",
+                  gap: "sm",
+                  children: [user?.image && /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+                    label: labels.removePhoto || 'Remover foto',
+                    children: /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+                      variant: "light",
+                      color: "red",
+                      size: "xs",
+                      onClick: handleRemoveAvatar,
+                      loading: loadingUpdateProfile,
+                      leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconTrash, {
+                        size: 14
+                      }),
+                      children: labels.remove || 'Remover'
+                    })
+                  }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+                    variant: "default",
+                    size: "xs",
+                    onClick: () => handleToggleSection('avatar'),
+                    children: labels.cancel || 'Cancelar'
+                  }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+                    size: "xs",
+                    loading: loadingUpdateProfile,
+                    leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconCheck, {
+                      size: 14
+                    }),
+                    onClick: handleChangeAvatar,
+                    disabled: !avatarPreview || avatarPreview === user?.image,
+                    children: labels.save || 'Salvar'
+                  })]
+                })]
+              })
+            })
+          })]
+        }), showName && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs(core.Group, {
+              gap: "xs",
+              children: [/*#__PURE__*/jsxRuntime.jsx(iconsReact.IconPencil, {
+                size: 16,
+                color: "var(--mantine-color-dimmed)"
+              }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                size: "sm",
+                children: user?.name || labels.notDefined || 'Não definido'
+              })]
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(core.Collapse, {
+            in: editingSection === 'name',
+            children: /*#__PURE__*/jsxRuntime.jsx(core.Card, {
+              p: "md",
+              withBorder: true,
+              children: /*#__PURE__*/jsxRuntime.jsx("form", {
+                onSubmit: nameForm.onSubmit(handleChangeName),
+                children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+                  gap: "sm",
+                  children: [/*#__PURE__*/jsxRuntime.jsx(core.TextInput, {
+                    label: labels.name || 'Nome',
+                    placeholder: labels.namePlaceholder || 'Digite seu nome',
+                    leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconUser, {
+                      size: 16
+                    }),
+                    ...nameForm.getInputProps('name')
+                  }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+                    justify: "flex-end",
+                    gap: "sm",
+                    children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
+                      variant: "default",
+                      size: "xs",
+                      onClick: () => handleToggleSection('name'),
+                      leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconX, {
+                        size: 14
+                      }),
+                      children: labels.cancel || 'Cancelar'
+                    }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+                      type: "submit",
+                      size: "xs",
+                      loading: loadingUpdateProfile,
+                      leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconCheck, {
+                        size: 14
+                      }),
+                      children: labels.save || 'Salvar'
+                    })]
+                  })]
+                })
+              })
+            })
+          })]
+        }), showEmail && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx(SettingRow, {
+            label: labels.email || 'Email',
+            action: labels.change || 'Change',
+            actionLabel: labels.changeEmail || 'Change your email',
+            onClick: () => handleToggleSection('email'),
+            expanded: editingSection === 'email',
+            children: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+              gap: "xs",
+              children: [/*#__PURE__*/jsxRuntime.jsx(iconsReact.IconMail, {
+                size: 16,
+                color: "var(--mantine-color-dimmed)"
+              }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+                size: "sm",
+                children: user?.email || 'email@exemplo.com'
+              })]
+            })
+          }), /*#__PURE__*/jsxRuntime.jsx(core.Collapse, {
+            in: editingSection === 'email',
+            children: /*#__PURE__*/jsxRuntime.jsx(core.Card, {
+              p: "md",
+              withBorder: true,
+              children: /*#__PURE__*/jsxRuntime.jsx("form", {
+                onSubmit: emailForm.onSubmit(handleChangeEmail),
+                children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+                  gap: "sm",
+                  children: [/*#__PURE__*/jsxRuntime.jsx(core.TextInput, {
+                    label: labels.newEmail || 'Novo Email',
+                    placeholder: labels.newEmailPlaceholder || 'Digite o novo email',
+                    leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconMail, {
+                      size: 16
+                    }),
+                    ...emailForm.getInputProps('newEmail')
+                  }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+                    justify: "flex-end",
+                    gap: "sm",
+                    children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
+                      variant: "default",
+                      size: "xs",
+                      onClick: () => handleToggleSection('email'),
+                      leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconX, {
+                        size: 14
+                      }),
+                      children: labels.cancel || 'Cancelar'
+                    }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+                      type: "submit",
+                      size: "xs",
+                      loading: loadingChangeEmail,
+                      leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconCheck, {
+                        size: 14
+                      }),
+                      children: labels.save || 'Salvar'
+                    })]
+                  })]
+                })
+              })
+            })
+          })]
+        })]
+      })]
+    }), showPassword && /*#__PURE__*/jsxRuntime.jsxs(core.Box, {
+      mb: "md",
+      children: [/*#__PURE__*/jsxRuntime.jsx(SectionHeader, {
+        icon: iconsReact.IconShield,
+        sectionTitle: labels.securitySection || 'Security',
+        description: labels.securityDescription || 'Protect your account'
+      }), /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+        gap: "sm",
+        children: [/*#__PURE__*/jsxRuntime.jsx(SettingRow, {
+          label: labels.password || 'Password',
+          action: labels.change || 'Change',
+          actionLabel: labels.changePassword || 'Change your password',
+          onClick: () => handleToggleSection('password'),
+          expanded: editingSection === 'password',
+          children: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+            gap: "xs",
+            children: [/*#__PURE__*/jsxRuntime.jsx(iconsReact.IconKey, {
+              size: 16,
+              color: "var(--mantine-color-dimmed)"
+            }), /*#__PURE__*/jsxRuntime.jsx(core.Text, {
+              size: "sm",
+              c: "dimmed",
+              children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
+            })]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(core.Collapse, {
+          in: editingSection === 'password',
+          children: /*#__PURE__*/jsxRuntime.jsx(core.Card, {
+            p: "md",
+            withBorder: true,
+            children: /*#__PURE__*/jsxRuntime.jsx("form", {
+              onSubmit: passwordForm.onSubmit(handleChangePassword),
+              children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+                gap: "sm",
+                children: [/*#__PURE__*/jsxRuntime.jsx(core.PasswordInput, {
+                  label: labels.currentPassword || 'Senha Atual',
+                  placeholder: labels.currentPasswordPlaceholder || 'Digite sua senha atual',
+                  ...passwordForm.getInputProps('currentPassword')
+                }), /*#__PURE__*/jsxRuntime.jsx(core.PasswordInput, {
+                  label: labels.newPassword || 'Nova Senha',
+                  placeholder: labels.newPasswordPlaceholder || 'Digite a nova senha',
+                  description: labels.passwordDescription || 'Mínimo 8 caracteres',
+                  ...passwordForm.getInputProps('newPassword')
+                }), /*#__PURE__*/jsxRuntime.jsx(core.PasswordInput, {
+                  label: labels.confirmPassword || 'Confirmar Nova Senha',
+                  placeholder: labels.confirmPasswordPlaceholder || 'Confirme a nova senha',
+                  ...passwordForm.getInputProps('confirmPassword')
+                }), /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+                  justify: "flex-end",
+                  gap: "xs",
+                  children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
+                    variant: "default",
+                    size: "xs",
+                    onClick: () => handleToggleSection('password'),
+                    leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconX, {
+                      size: 14
+                    }),
+                    children: labels.cancel || 'Cancelar'
+                  }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+                    type: "submit",
+                    size: "xs",
+                    loading: loadingChangePassword,
+                    leftSection: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconCheck, {
+                      size: 14
+                    }),
+                    children: labels.save || 'Salvar'
+                  })]
+                })]
+              })
+            })
+          })
+        })]
+      })]
+    })]
+  });
+}
+
+exports.AccountModal = AccountModal;
 exports.AuthCard = AuthCard;
 exports.AuthProvider = AuthProvider;
 exports.ForgotPasswordForm = ForgotPasswordForm;
@@ -1741,6 +2529,8 @@ exports.ResetPasswordForm = ResetPasswordForm;
 exports.SignInForm = SignInForm;
 exports.SignUpForm = SignUpForm;
 exports.VerifyEmailCard = VerifyEmailCard;
+exports.changeEmail = changeEmail;
+exports.changePassword = changePassword;
 exports.configure = configure;
 exports.decodeJWT = decodeJWT;
 exports.forgotPassword = forgotPassword;
@@ -1756,6 +2546,7 @@ exports.signIn = signIn;
 exports.signOut = signOut;
 exports.signUp = signUp;
 exports.socialRedirect = socialRedirect;
+exports.updateProfile = updateProfile;
 exports.useAuth = useAuth;
 exports.useAuthLoading = useAuthLoading;
 exports.useAuthStore = useAuthStore;
@@ -1763,6 +2554,7 @@ exports.useCheckToken = useCheckToken;
 exports.useEmailVerification = useEmailVerification;
 exports.useMagicLink = useMagicLink;
 exports.usePasswordReset = usePasswordReset;
+exports.useProfile = useProfile;
 exports.useSession = useSession;
 exports.useSignIn = useSignIn;
 exports.useSignOut = useSignOut;