@autenticar-me/vue 0.8.1 → 0.10.0

package/README.md

@@ -31,113 +31,329 @@ app.use(atmPlugin, {
 app.mount('#app')
 ```
 
-### Composables Disponíveis
+## Composables
 
-- `useAtm()` - Acesso ao contexto completo da Autenticar.me
-- `useAtmClient()` - Cliente da API
-- `useAuth()` - Gerenciamento de autenticação
+- **`useAtm()`** - Acesso ao contexto completo da Autenticar.me
+- **`useAtmClient()`** - Cliente da API
+- **`useAuth()`** - Gerenciamento de autenticação
+- **`useTheme()`** - Controle de tema (light/dark)
 
-### Componentes Disponíveis
+## Componentes
 
-#### Botões
-- `SignInButton` - Botão de login que abre modal
-- `SignOutButton` - Botão de logout
-- `SignUpButton` - Botão de cadastro que abre modal
+### Formulários de Autenticação
 
-#### Formulários
-- `SignIn` - Formulário de login completo com logo e rodapé
-- `SignUp` - Formulário de cadastro completo com logo e rodapé
+#### SignIn
 
-#### Layouts
-- `SignedIn` - Wrapper para conteúdo visível apenas para usuários autenticados
-- `SignedOut` - Wrapper para conteúdo visível apenas para usuários não autenticados
+Formulário completo de login com suporte a autenticação por email/senha e email link.
 
-#### Outros
-- `AuthSwitcher` - Alterna entre estados autenticado/não autenticado
-- `UserProfile` - Perfil do usuário
-- `Notification` - Sistema de notificações
+**Props:**
+- **`fallbackRedirectUrl`** (string, padrão: `"/"`) - URL para redirecionar após login bem-sucedido
+- **`initialValues`** (object, opcional) - Valores iniciais para preencher os campos do formulário
+  - `emailAddress` (string) - Email ou username
+  - `password` (string) - Senha
+- **`signUpUrl`** (string, opcional) - URL para redirecionar quando o usuário clicar em "Cadastre aqui". Se não fornecido, emite evento `sign-up`
 
-### Exemplos de Uso
+**Eventos:**
+- **`completed`** - Emitido quando o login é concluído com sucesso
+- **`sign-up`** - Emitido quando o usuário clica em "Cadastre aqui" e não há `signUpUrl` definido
 
-#### Usando Botões com Modal (Mais Simples)
+**Exemplos:**
+```vue
+<template>
+  <SignIn
+    fallbackRedirectUrl="/dashboard"
+    :initialValues="{ emailAddress: 'usuario@exemplo.com' }"
+    signUpUrl="/register"
+  />
+</template>
 
-Os botões abrem modais com os formulários e permitem alternância automática entre login/cadastro:
+<script setup>
+import { SignIn } from '@autenticar-me/vue'
+</script>
+```
 
 ```vue
 <template>
-  <SignInButton redirect="/dashboard" signUpLink="/cadastro" />
-  <SignUpButton redirect="/onboarding" signInLink="/login" />
+  <SignIn
+    @completed="handleLoginCompleted"
+    @sign-up="showSignUpModal"
+  />
 </template>
 
 <script setup>
-import { SignInButton, SignUpButton } from '@autenticar-me/vue'
+import { SignIn } from '@autenticar-me/vue'
+
+const handleLoginCompleted = () => {
+  console.log('Login realizado com sucesso!')
+}
+
+const showSignUpModal = () => {
+  console.log('Usuário quer se cadastrar')
+}
 </script>
 ```
 
-**Comportamento:**
-- **SignInButton**: Abre modal com formulário de login. Se usuário clicar em "Cadastre aqui", alterna para formulário de cadastro dentro do modal (ou navega para `signUpLink` se fornecido)
-- **SignUpButton**: Abre modal com formulário de cadastro. Se usuário clicar em "Já tem uma conta?", alterna para formulário de login dentro do modal (ou navega para `signInLink` se fornecido)
-- Após autenticação bem-sucedida, fecha o modal e redireciona para a rota especificada em `redirect`
+#### SignUp
+
+Formulário completo de cadastro com validação de campos e senha.
+
+**Props:**
+- **`fallbackRedirectUrl`** (string, padrão: `"/"`) - URL para redirecionar após cadastro bem-sucedido
+- **`initialValues`** (object, opcional) - Valores iniciais para preencher os campos do formulário
+  - `first_name` (string) - Primeiro nome
+  - `last_name` (string) - Sobrenome
+  - `email_address` (string) - Email
+  - `password` (string) - Senha
+  - `confirm_password` (string) - Confirmação de senha
+- **`signInUrl`** (string, opcional) - URL para redirecionar quando o usuário clicar em "Faça login". Se não fornecido, emite evento `sign-in`
 
-#### Usando Formulários com Redirecionamento e Navegação
+**Eventos:**
+- **`completed`** - Emitido quando o cadastro é concluído com sucesso
+- **`sign-in`** - Emitido quando o usuário clica em "Faça login" e não há `signInUrl` definido
 
+**Exemplos:**
 ```vue
 <template>
-  <div class="login-page">
-    <h1>Faça login</h1>
-    <SignIn redirect="/dashboard" signUpLink="/cadastro" />
-  </div>
+  <SignUp
+    fallbackRedirectUrl="/dashboard"
+    :initialValues="{ first_name: 'João', email_address: 'joao@exemplo.com' }"
+    signInUrl="/login"
+  />
 </template>
 
 <script setup>
-import { SignIn } from '@autenticar-me/vue'
+import { SignUp } from '@autenticar-me/vue'
 </script>
 ```
 
 ```vue
 <template>
-  <div class="signup-page">
-    <h1>Criar conta</h1>
-    <SignUp redirect="/onboarding" signInLink="/login" />
-  </div>
+  <SignUp
+    @completed="handleSignUpCompleted"
+    @sign-in="showSignInModal"
+  />
 </template>
 
 <script setup>
 import { SignUp } from '@autenticar-me/vue'
+
+const handleSignUpCompleted = () => {
+  console.log('Cadastro realizado com sucesso!')
+}
+
+const showSignInModal = () => {
+  console.log('Usuário quer fazer login')
+}
+</script>
+```
+
+### Botões de Autenticação
+
+#### SignInButton
+
+Botão que abre um modal de login quando clicado.
+
+**Props:**
+- **`fallbackRedirectUrl`** (string, padrão: `"/"`) - URL para redirecionar após login bem-sucedido no modal
+- **`signUpUrl`** (string, opcional) - URL para redirecionar quando o usuário clicar em "Cadastre aqui" dentro do modal. Se não fornecido, alterna para o formulário de cadastro dentro do modal
+
+**Exemplo:**
+```vue
+<template>
+  <SignInButton
+    fallbackRedirectUrl="/dashboard"
+    signUpUrl="/register"
+  />
+</template>
+
+<script setup>
+import { SignInButton } from '@autenticar-me/vue'
+</script>
+```
+
+#### SignUpButton
+
+Botão que abre um modal de cadastro quando clicado. Só é exibido se o registro estiver habilitado nas configurações.
+
+**Props:**
+- **`fallbackRedirectUrl`** (string, padrão: `"/"`) - URL para redirecionar após cadastro bem-sucedido no modal
+- **`signInUrl`** (string, opcional) - URL para redirecionar quando o usuário clicar em "Faça login" dentro do modal. Se não fornecido, alterna para o formulário de login dentro do modal
+
+**Exemplo:**
+```vue
+<template>
+  <SignUpButton
+    fallbackRedirectUrl="/dashboard"
+    signInUrl="/login"
+  />
+</template>
+
+<script setup>
+import { SignUpButton } from '@autenticar-me/vue'
+</script>
+```
+
+#### SignOutButton
+
+Botão que realiza logout do usuário quando clicado. Só é exibido quando há um usuário autenticado.
+
+**Exemplo:**
+```vue
+<template>
+  <SignOutButton />
+</template>
+
+<script setup>
+import { SignOutButton } from '@autenticar-me/vue'
+</script>
+```
+
+### Componentes de Perfil
+
+#### UserProfile
+
+Componente de perfil do usuário com dropdown menu e modal de gerenciamento. Permite visualizar e editar informações pessoais, gerenciar emails, redefinir senha e gerenciar sessões ativas.
+
+**Exemplo:**
+```vue
+<template>
+  <UserProfile />
+</template>
+
+<script setup>
+import { UserProfile } from '@autenticar-me/vue'
+</script>
+```
+
+### Componentes de Layout
+
+#### SignedIn
+
+Componente wrapper que só renderiza seu conteúdo quando o usuário está autenticado.
+
+**Exemplo:**
+```vue
+<template>
+  <SignedIn>
+    <Dashboard />
+  </SignedIn>
+</template>
+
+<script setup>
+import { SignedIn } from '@autenticar-me/vue'
+import Dashboard from './Dashboard.vue'
+</script>
+```
+
+#### SignedOut
+
+Componente wrapper que só renderiza seu conteúdo quando o usuário não está autenticado e o estado de autenticação foi carregado.
+
+**Exemplo:**
+```vue
+<template>
+  <SignedOut>
+    <LandingPage />
+  </SignedOut>
+</template>
+
+<script setup>
+import { SignedOut } from '@autenticar-me/vue'
+import LandingPage from './LandingPage.vue'
+</script>
+```
+
+### Outros Componentes
+
+#### AuthSwitcher
+
+Componente que alterna automaticamente entre os componentes de autenticação e perfil do usuário. Exibe UserProfile quando há um usuário autenticado, ou os botões SignInButton e SignUpButton quando não há.
+
+**Exemplo:**
+```vue
+<template>
+  <AuthSwitcher />
+</template>
+
+<script setup>
+import { AuthSwitcher } from '@autenticar-me/vue'
+</script>
+```
+
+## Casos de Uso
+
+### Usando Botões com Modal
+
+Os botões abrem modais com os formulários e permitem alternância automática entre login/cadastro dentro do modal:
+
+```vue
+<template>
+  <SignInButton fallbackRedirectUrl="/dashboard" />
+  <SignUpButton fallbackRedirectUrl="/dashboard" />
+</template>
+
+<script setup>
+import { SignInButton, SignUpButton } from '@autenticar-me/vue'
 </script>
 ```
 
-**Props disponíveis:**
-- `redirect` - Rota para redirecionar após login/cadastro bem-sucedido
-- `signUpLink` (SignIn) - Rota para a página de cadastro (ao clicar em "Cadastre aqui")
-- `signInLink` (SignUp) - Rota para a página de login (ao clicar em "Já tem uma conta?")
+**Comportamento:**
+- Ao clicar em "Cadastre aqui" no modal de login, o conteúdo muda para o formulário de cadastro
+- Ao clicar em "Faça login" no modal de cadastro, o conteúdo muda para o formulário de login
+- Após autenticação bem-sucedida, o modal fecha e redireciona para `fallbackRedirectUrl`
 
-#### Redirecionamento Customizado
+### Usando Formulários em Páginas Dedicadas
 
 ```vue
 <template>
-  <SignIn @completed="handleLogin" />
+  <div class="login-page">
+    <SignIn
+      fallbackRedirectUrl="/dashboard"
+      signUpUrl="/cadastro"
+    />
+  </div>
 </template>
 
 <script setup>
 import { SignIn } from '@autenticar-me/vue'
-import { useRouter } from 'vue-router'
+</script>
+```
 
-const router = useRouter()
+### Controle de Acesso por Autenticação
 
-const handleLogin = () => {
-  router.push('/minha-rota')
-}
+```vue
+<template>
+  <div>
+    <SignedOut>
+      <h1>Bem-vindo! Faça login para continuar</h1>
+      <SignInButton />
+    </SignedOut>
+
+    <SignedIn>
+      <h1>Área Restrita</h1>
+      <UserProfile />
+    </SignedIn>
+  </div>
+</template>
+
+<script setup>
+import { SignedIn, SignedOut, SignInButton, UserProfile } from '@autenticar-me/vue'
 </script>
 ```
 
-## Tipos
+## Tipos TypeScript
+
+O pacote exporta tipos para TypeScript:
+
+- **`User`** - Tipo do usuário
+- **`Session`** - Tipo da sessão
+- **`Configurations`** - Configurações da plataforma
+- **`UserAttribute`** - Atributos do usuário
+- **`PluginOptions`** - Opções do plugin
+
+## Utilidades
 
-O pacote exporta tipos TypeScript para:
-- `User` - Tipo do usuário
-- `Session` - Tipo da sessão
-- `Configurations` - Configurações da plataforma
-- `UserAttribute` - Atributos do usuário
+- **`getDeviceToken()`** - Obtém token do dispositivo para autenticação
 
 ## Licença
 

package/dist/components/Buttons/SignInButton.vue.d.ts

@@ -1,6 +1,6 @@
 interface Props {
-    redirect?: string;
-    signUpLink?: string;
+    fallbackRedirectUrl?: string;
+    signUpUrl?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/Buttons/SignInButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SignInButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Buttons/SignInButton.vue"],"names":[],"mappings":"AA0GA,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;;AAsHD,wBAMG"}
+{"version":3,"file":"SignInButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Buttons/SignInButton.vue"],"names":[],"mappings":"AA+EA,UAAU,KAAK;IACX,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;;AAoFD,wBAMG"}

package/dist/components/Buttons/SignUpButton.vue.d.ts

@@ -1,6 +1,6 @@
 interface Props {
-    redirect?: string;
-    signInLink?: string;
+    fallbackRedirectUrl?: string;
+    signInUrl?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/Buttons/SignUpButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SignUpButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Buttons/SignUpButton.vue"],"names":[],"mappings":"AAgFA,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;;AAyFD,wBAMG"}
+{"version":3,"file":"SignUpButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Buttons/SignUpButton.vue"],"names":[],"mappings":"AAgFA,UAAU,KAAK;IACX,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;;AAyFD,wBAMG"}

package/dist/components/Modals/SignInModal.vue.d.ts

@@ -1,11 +1,13 @@
 interface Props {
-    redirect?: string;
-    signUpLink?: string;
+    fallbackRedirectUrl?: string;
+    signUpUrl?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     close: (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onClose?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}>, {
+    fallbackRedirectUrl: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;
 //# sourceMappingURL=SignInModal.vue.d.ts.map

package/dist/components/Modals/SignInModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SignInModal.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Modals/SignInModal.vue"],"names":[],"mappings":"AA0EA,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;;;;;;AAmKD,wBAQG"}
+{"version":3,"file":"SignInModal.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Modals/SignInModal.vue"],"names":[],"mappings":"AAiFA,UAAU,KAAK;IACX,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;;;;;;yBAFyB,MAAM;;AA+KhC,wBASG"}

package/dist/components/Modals/SignUpModal.vue.d.ts

@@ -1,11 +1,13 @@
 interface Props {
-    redirect?: string;
-    signInLink?: string;
+    fallbackRedirectUrl?: string;
+    signInUrl?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     close: (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onClose?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}>, {
+    fallbackRedirectUrl: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;
 //# sourceMappingURL=SignUpModal.vue.d.ts.map

package/dist/components/Modals/SignUpModal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SignUpModal.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Modals/SignUpModal.vue"],"names":[],"mappings":"AAgHA,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;;;;;;AA8LD,wBAQG"}
+{"version":3,"file":"SignUpModal.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Modals/SignUpModal.vue"],"names":[],"mappings":"AAuHA,UAAU,KAAK;IACX,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;;;;;;yBAFyB,MAAM;;AA0MhC,wBASG"}

package/dist/components/SignIn.vue.d.ts

@@ -1,6 +1,10 @@
 interface Props {
-    redirect?: string;
-    signUpLink?: string;
+    fallbackRedirectUrl?: string;
+    initialValues?: {
+        emailAddress?: string;
+        password?: string;
+    };
+    signUpUrl?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     completed: (...args: any[]) => void;
@@ -8,7 +12,9 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onCompleted?: ((...args: any[]) => any) | undefined;
     "onSign-up"?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+}>, {
+    fallbackRedirectUrl: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     emailInput: HTMLInputElement;
     passwordInput: HTMLInputElement;
 }, any>;

package/dist/components/SignIn.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SignIn.vue.d.ts","sourceRoot":"","sources":["../../src/components/SignIn.vue"],"names":[],"mappings":"AAw1BA,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;;;;;;;;;;;AA4lBD,wBAQG"}
+{"version":3,"file":"SignIn.vue.d.ts","sourceRoot":"","sources":["../../src/components/SignIn.vue"],"names":[],"mappings":"AAk4BA,UAAU,KAAK;IACX,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,aAAa,CAAC,EAAE;QACZ,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;;;;;;;;yBANyB,MAAM;;;;;AAuoBhC,wBASG"}

package/dist/components/SignUp.vue.d.ts

@@ -1,6 +1,13 @@
 interface Props {
-    redirect?: string;
-    signInLink?: string;
+    fallbackRedirectUrl?: string;
+    initialValues?: {
+        first_name?: string;
+        last_name?: string;
+        email_address?: string;
+        password?: string;
+        confirm_password?: string;
+    };
+    signInUrl?: string;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     completed: () => any;
@@ -8,7 +15,9 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onCompleted?: (() => any) | undefined;
     "onSign-in"?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+}>, {
+    fallbackRedirectUrl: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     firstNameInput: HTMLInputElement;
     emailInput: HTMLInputElement;
 }, any>;

package/dist/components/SignUp.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SignUp.vue.d.ts","sourceRoot":"","sources":["../../src/components/SignUp.vue"],"names":[],"mappings":"AAmrBA,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;;;;;;;;;;;AAgfD,wBAQG"}
+{"version":3,"file":"SignUp.vue.d.ts","sourceRoot":"","sources":["../../src/components/SignUp.vue"],"names":[],"mappings":"AA6rBA,UAAU,KAAK;IACX,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,aAAa,CAAC,EAAE;QACZ,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAC5B,CAAA;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;;;;;;;;yBATyB,MAAM;;;;;AAggBhC,wBASG"}