@autenticar-me/vue 0.13.0 → 0.14.0

package/README.md

@@ -1,360 +1,374 @@
-# @autenticar-me/vue
-
-Pacote Vue para integração com a plataforma Autenticar.me.
-
-## Sobre
-
-Este pacote fornece componentes, composables e utilitários para facilitar a implementação de autenticação e gerenciamento de usuários em aplicações Vue utilizando a Autenticar.me.
-
-## Instalação
-
-```bash
-npm install @autenticar-me/vue
-```
-
-## Uso Básico
-
-### Configuração do Plugin
-
-```javascript
-import { createApp } from 'vue'
-import { atmPlugin } from '@autenticar-me/vue'
-import App from './App.vue'
-
-const app = createApp(App)
-
-app.use(atmPlugin, {
-  domain: 'seu-dominio.autenticar.me',
-  publicKey: 'sua-chave-publica'
-})
-
-app.mount('#app')
-```
-
-## Composables
-
-- **`useAtm()`** - Acesso ao contexto completo da Autenticar.me
-- **`useAtmClient()`** - Cliente da API
-- **`useAuth()`** - Gerenciamento de autenticação
-- **`useTheme()`** - Controle de tema (light/dark)
-
-## Componentes
-
-### Formulários de Autenticação
-
-#### SignIn
-
-Formulário completo de login com suporte a autenticação por email/senha e email link.
-
-**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`
-
-**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
-
-**Exemplos:**
-```vue
-<template>
-  <SignIn
-    fallbackRedirectUrl="/dashboard"
-    :initialValues="{ emailAddress: 'usuario@exemplo.com' }"
-    signUpUrl="/register"
-  />
-</template>
-
-<script setup>
-import { SignIn } from '@autenticar-me/vue'
-</script>
-```
-
-```vue
-<template>
-  <SignIn
-    @completed="handleLoginCompleted"
-    @sign-up="showSignUpModal"
-  />
-</template>
-
-<script setup>
-import { SignIn } from '@autenticar-me/vue'
-
-const handleLoginCompleted = () => {
-  console.log('Login realizado com sucesso!')
-}
-
-const showSignUpModal = () => {
-  console.log('Usuário quer se cadastrar')
-}
-</script>
-```
-
-#### 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`
-
-**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>
-  <SignUp
-    fallbackRedirectUrl="/dashboard"
-    :initialValues="{ first_name: 'João', email_address: 'joao@exemplo.com' }"
-    signInUrl="/login"
-  />
-</template>
-
-<script setup>
-import { SignUp } from '@autenticar-me/vue'
-</script>
-```
-
-```vue
-<template>
-  <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>
-```
-
-**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`
-
-### Usando Formulários em Páginas Dedicadas
-
-```vue
-<template>
-  <div class="login-page">
-    <SignIn
-      fallbackRedirectUrl="/dashboard"
-      signUpUrl="/cadastro"
-    />
-  </div>
-</template>
-
-<script setup>
-import { SignIn } from '@autenticar-me/vue'
-</script>
-```
-
-### Controle de Acesso por Autenticação
-
-```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 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
-
-- **`getDeviceToken()`** - Obtém token do dispositivo para autenticação
-
-## Licença
-
-MIT
+# @autenticar-me/vue
+
+Pacote Vue para integração com a plataforma Autenticar.me.
+
+## Sobre
+
+Este pacote fornece componentes, composables e utilitários para facilitar a implementação de autenticação e gerenciamento de usuários em aplicações Vue utilizando a Autenticar.me.
+
+## Instalação
+
+```bash
+npm install @autenticar-me/vue
+```
+
+## Uso Básico
+
+### Configuração do Plugin
+
+```javascript
+import { createApp } from 'vue'
+import { atmPlugin } from '@autenticar-me/vue'
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.use(atmPlugin, {
+  domain: 'seu-dominio.autenticar.me',
+  publicKey: 'sua-chave-publica'
+})
+
+app.mount('#app')
+```
+
+## Composables
+
+- **`useAtm()`** - Acesso ao contexto completo da Autenticar.me
+- **`useAtmClient()`** - Cliente da API
+- **`useAuth()`** - Gerenciamento de autenticação
+- **`useTheme()`** - Controle de tema (light/dark)
+
+## Componentes
+
+### Formulários de Autenticação
+
+#### SignIn
+
+Formulário completo de login com suporte a autenticação por email/senha e email link.
+
+**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`
+
+**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
+
+**Exemplos:**
+```vue
+<template>
+  <SignIn
+    fallbackRedirectUrl="/dashboard"
+    :initialValues="{ emailAddress: 'usuario@exemplo.com' }"
+    signUpUrl="/register"
+  />
+</template>
+
+<script setup>
+import { SignIn } from '@autenticar-me/vue'
+</script>
+```
+
+```vue
+<template>
+  <SignIn
+    @completed="handleLoginCompleted"
+    @sign-up="showSignUpModal"
+  />
+</template>
+
+<script setup>
+import { SignIn } from '@autenticar-me/vue'
+
+const handleLoginCompleted = () => {
+  console.log('Login realizado com sucesso!')
+}
+
+const showSignUpModal = () => {
+  console.log('Usuário quer se cadastrar')
+}
+</script>
+```
+
+#### 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`
+
+**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>
+  <SignUp
+    fallbackRedirectUrl="/dashboard"
+    :initialValues="{ first_name: 'João', email_address: 'joao@exemplo.com' }"
+    signInUrl="/login"
+  />
+</template>
+
+<script setup>
+import { SignUp } from '@autenticar-me/vue'
+</script>
+```
+
+```vue
+<template>
+  <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.
+
+**Eventos:**
+- `logout`: Emitido após o logout ser concluído com sucesso
+
+**Exemplo:**
+```vue
+<template>
+  <SignOutButton @logout="handleLogout" />
+</template>
+
+<script setup>
+import { SignOutButton } from '@autenticar-me/vue'
+
+const handleLogout = () => {
+  console.log('Usuário deslogado com sucesso')
+}
+</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.
+
+**Eventos:**
+- `logout`: Emitido após o logout ser concluído com sucesso
+
+**Exemplo:**
+```vue
+<template>
+  <UserProfile @logout="handleLogout" />
+</template>
+
+<script setup>
+import { UserProfile } from '@autenticar-me/vue'
+
+const handleLogout = () => {
+  console.log('Usuário deslogado com sucesso')
+}
+</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>
+```
+
+**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`
+
+### Usando Formulários em Páginas Dedicadas
+
+```vue
+<template>
+  <div class="login-page">
+    <SignIn
+      fallbackRedirectUrl="/dashboard"
+      signUpUrl="/cadastro"
+    />
+  </div>
+</template>
+
+<script setup>
+import { SignIn } from '@autenticar-me/vue'
+</script>
+```
+
+### Controle de Acesso por Autenticação
+
+```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 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
+
+- **`getDeviceToken()`** - Obtém token do dispositivo para autenticação
+
+## Licença
+
+MIT