From f3e46cca4ce9f18efce4a9ffbde294e77fc0a800 Mon Sep 17 00:00:00 2001
From: gabrielb <gabriel18lb@outlook.com>
Date: Tue, 19 May 2026 18:09:33 -0300
Subject: [PATCH] =?UTF-8?q?feat(portal):=20simplificar=20fluxo=20de=20prim?=
 =?UTF-8?q?eiro=20acesso=20para=20Op=C3=A7=C3=A3o=20B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove etapas OTP (canal, código, senha). Novo fluxo: identificar (CPF/CNPJ)
→ confirmar (mostra nome + email mascarado) → sucesso (email enviado via Keycloak).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/primeiro-acesso.vue         | 201 ++++++++------------------
 src/services/primeiroAcessoService.js |   9 ++
 2 files changed, 71 insertions(+), 139 deletions(-)

diff --git a/src/pages/primeiro-acesso.vue b/src/pages/primeiro-acesso.vue
index 53e3075..71e25c9 100644
--- a/src/pages/primeiro-acesso.vue
+++ b/src/pages/primeiro-acesso.vue
@@ -1,10 +1,8 @@
 <script setup>
 import { ref, computed } from 'vue'
-import { useAuth } from '@/composables/useAuth'
 import { primeiroAcessoService } from '@/services/primeiroAcessoService'
 
 const router = useRouter()
-const { login } = useAuth()
 
 const etapa = ref(0)
 const carregando = ref(false)
@@ -12,21 +10,12 @@ const erro = ref('')
 
 const documento = ref('')
 const contribuinteNome = ref('')
-
-const canais = ref([])
-const canalSelecionado = ref(null)
-
-const codigo = ref('')
-const tokenValidacao = ref('')
-
-const senha = ref('')
-const senhaConfirm = ref('')
+const emailMascarado = ref('')
 
 const docDigitos = computed(() => documento.value.replace(/\D/g, ''))
 const docValido = computed(() => docDigitos.value.length === 11 || docDigitos.value.length === 14)
 
-const senhaForte = computed(() => senha.value.length >= 8)
-const senhasIguais = computed(() => senha.value === senhaConfirm.value)
+const subtitulos = ['Identificação', 'Confirmação', 'Pronto!']
 
 async function identificar() {
     if (!docValido.value) return
@@ -35,81 +24,37 @@ async function identificar() {
     try {
         const res = await primeiroAcessoService.verificarDocumento(docDigitos.value)
         contribuinteNome.value = res.data.nome
-        canais.value = res.data.canais
-        canalSelecionado.value = canais.value[0] ?? null
+        const canalEmail = res.data.canais?.find(c => c.tipo === 'EMAIL')
+        emailMascarado.value = canalEmail?.valor ?? ''
         etapa.value = 1
     } catch (e) {
-        erro.value = e?.data?.description ?? 'Documento não encontrado ou não habilitado para este fluxo.'
+        erro.value = e?.data?.description ?? 'Documento não encontrado ou não habilitado para acesso ao portal.'
     } finally {
         carregando.value = false
     }
 }
 
-async function enviarCodigo() {
-    if (!canalSelecionado.value) return
+async function solicitar() {
     carregando.value = true
     erro.value = ''
     try {
-        await primeiroAcessoService.solicitarCodigo(docDigitos.value, canalSelecionado.value.tipo)
+        await primeiroAcessoService.solicitarAcesso(docDigitos.value)
         etapa.value = 2
     } catch (e) {
-        erro.value = e?.data?.description ?? 'Não foi possível enviar o código. Tente novamente.'
+        erro.value = e?.data?.description ?? 'Não foi possível solicitar o acesso. Tente novamente.'
     } finally {
         carregando.value = false
     }
 }
-
-async function validarCodigo() {
-    if (codigo.value.length < 6) return
-    carregando.value = true
-    erro.value = ''
-    try {
-        const res = await primeiroAcessoService.validarCodigo(docDigitos.value, codigo.value)
-        tokenValidacao.value = res.data.token
-        etapa.value = 3
-    } catch (e) {
-        erro.value = e?.data?.description ?? 'Código inválido ou expirado. Solicite um novo.'
-    } finally {
-        carregando.value = false
-    }
-}
-
-async function definirSenha() {
-    if (!senhaForte.value || !senhasIguais.value) return
-    carregando.value = true
-    erro.value = ''
-    try {
-        await primeiroAcessoService.definirSenha(tokenValidacao.value, senha.value)
-        etapa.value = 4
-    } catch (e) {
-        erro.value = e?.data?.description ?? 'Não foi possível definir a senha. Tente novamente.'
-    } finally {
-        carregando.value = false
-    }
-}
-
-async function entrarKeycloak() {
-    carregando.value = true
-    erro.value = ''
-    try {
-        await login(docDigitos.value, '/portal/painel')
-    } catch (e) {
-        carregando.value = false
-        erro.value = e?.data?.statusMessage ?? 'Não foi possível iniciar o login.'
-    }
-}
-
-const iconeCanal = { EMAIL: 'pi-envelope', SMS: 'pi-mobile', WHATSAPP: 'pi-whatsapp' }
-const labelCanal = { EMAIL: 'E-mail', SMS: 'SMS', WHATSAPP: 'WhatsApp' }
 </script>
 
 <template>
     <div class="min-h-[calc(100vh-8rem)] flex items-center justify-center px-4 py-12">
         <div class="w-full max-w-md">
 
-            <div v-if="etapa < 4" class="flex items-center justify-center gap-2 mb-8">
+            <div v-if="etapa < 2" class="flex items-center justify-center gap-2 mb-8">
                 <div
-                    v-for="i in 4"
+                    v-for="i in 2"
                     :key="i"
                     class="h-1.5 rounded-full transition-all duration-300"
                     :class="[
@@ -128,9 +73,7 @@ const labelCanal = { EMAIL: 'E-mail', SMS: 'SMS', WHATSAPP: 'WhatsApp' }
                         </div>
                         <div>
                             <h1 class="text-white font-bold text-base leading-tight">Primeiro Acesso</h1>
-                            <p class="text-white/80 text-xs mt-0.5">
-                                {{ ['Identificação', 'Canal de envio', 'Código de verificação', 'Crie sua senha', 'Pronto!'][etapa] }}
-                            </p>
+                            <p class="text-white/80 text-xs mt-0.5">{{ subtitulos[etapa] }}</p>
                         </div>
                     </div>
                 </div>
@@ -139,7 +82,7 @@ const labelCanal = { EMAIL: 'E-mail', SMS: 'SMS', WHATSAPP: 'WhatsApp' }
 
                     <template v-if="etapa === 0">
                         <p class="text-sm text-slate-600 dark:text-slate-300">
-                            Informe seu CPF ou CNPJ para verificarmos seu cadastro e iniciar a criação de senha.
+                            Informe seu CPF ou CNPJ para verificarmos seu cadastro e iniciar a criação do seu acesso ao portal.
                         </p>
                         <div>
                             <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">CPF ou CNPJ</label>
@@ -148,102 +91,82 @@ const labelCanal = { EMAIL: 'E-mail', SMS: 'SMS', WHATSAPP: 'WhatsApp' }
                         <p v-if="erro" role="alert" class="text-sm text-red-600 dark:text-red-400 flex items-center gap-1.5">
                             <i class="pi pi-exclamation-circle" aria-hidden="true" /> {{ erro }}
                         </p>
-                        <Button label="Continuar" icon="pi pi-arrow-right" icon-pos="right" class="w-full" size="large" :loading="carregando" :disabled="!docValido" @click="identificar" />
+                        <Button
+                            label="Continuar"
+                            icon="pi pi-arrow-right"
+                            icon-pos="right"
+                            class="w-full"
+                            size="large"
+                            :loading="carregando"
+                            :disabled="!docValido || carregando"
+                            @click="identificar"
+                        />
                     </template>
 
                     <template v-else-if="etapa === 1">
-                        <div>
-                            <p class="text-sm text-slate-600 dark:text-slate-300 mb-1">Olá, <strong class="text-slate-800 dark:text-slate-100">{{ contribuinteNome }}</strong>.</p>
+                        <div class="space-y-3">
                             <p class="text-sm text-slate-600 dark:text-slate-300">
-                                Enviaremos um código de verificação. Escolha como prefere receber:
+                                Olá, <strong class="text-slate-800 dark:text-slate-100">{{ contribuinteNome }}</strong>.
+                            </p>
+                            <p class="text-sm text-slate-600 dark:text-slate-300">
+                                Vamos criar seu acesso ao portal. Ao confirmar, você receberá um e-mail
+                                <template v-if="emailMascarado">
+                                    para <strong class="text-slate-800 dark:text-slate-100">{{ emailMascarado }}</strong>
+                                </template>
+                                com um link para definir sua senha.
                             </p>
                         </div>
-                        <div class="space-y-2">
-                            <button
-                                v-for="canal in canais"
-                                :key="canal.tipo"
-                                class="w-full flex items-center gap-3 p-4 rounded-xl border transition-colors text-left"
-                                :class="canalSelecionado?.tipo === canal.tipo
-                                    ? 'border-primary bg-primary/5 dark:bg-primary/10'
-                                    : 'border-slate-200 dark:border-slate-600 hover:border-slate-300 dark:hover:border-slate-500'"
-                                @click="canalSelecionado = canal"
-                            >
-                                <div class="w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0"
-                                    :class="canalSelecionado?.tipo === canal.tipo ? 'bg-primary text-white' : 'bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400'">
-                                    <i :class="['pi', iconeCanal[canal.tipo] ?? 'pi-send', 'text-sm']" aria-hidden="true" />
-                                </div>
-                                <div>
-                                    <p class="font-semibold text-slate-800 dark:text-slate-100 text-sm">{{ labelCanal[canal.tipo] ?? canal.tipo }}</p>
-                                    <p class="text-xs text-slate-500 dark:text-slate-400">{{ canal.valor }}</p>
-                                </div>
-                            </button>
+
+                        <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-4 flex gap-3">
+                            <i class="pi pi-envelope text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" aria-hidden="true" />
+                            <p class="text-sm text-blue-700 dark:text-blue-300">
+                                O link de acesso é enviado pelo Keycloak e expira em 24 horas. Verifique também a caixa de spam.
+                            </p>
                         </div>
+
                         <p v-if="erro" role="alert" class="text-sm text-red-600 dark:text-red-400 flex items-center gap-1.5">
                             <i class="pi pi-exclamation-circle" aria-hidden="true" /> {{ erro }}
                         </p>
+
                         <div class="flex gap-3">
-                            <Button label="Voltar" severity="secondary" outlined class="flex-1" @click="etapa = 0" />
-                            <Button label="Enviar código" icon="pi pi-send" class="flex-1" :loading="carregando" :disabled="!canalSelecionado" @click="enviarCodigo" />
+                            <Button label="Voltar" severity="secondary" outlined class="flex-1" :disabled="carregando" @click="etapa = 0" />
+                            <Button
+                                label="Solicitar acesso"
+                                icon="pi pi-send"
+                                class="flex-1"
+                                :loading="carregando"
+                                :disabled="carregando"
+                                @click="solicitar"
+                            />
                         </div>
                     </template>
 
-                    <template v-else-if="etapa === 2">
-                        <p class="text-sm text-slate-600 dark:text-slate-300">
-                            Enviamos um código de 6 dígitos para
-                            <strong class="text-slate-800 dark:text-slate-100">{{ canalSelecionado?.valor }}</strong>.
-                            Ele expira em 10 minutos.
-                        </p>
-                        <div>
-                            <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Código de verificação</label>
-                            <InputOtp v-model="codigo" :length="6" class="justify-center gap-2" integer-only @keyup.enter="validarCodigo" />
-                        </div>
-                        <p v-if="erro" role="alert" class="text-sm text-red-600 dark:text-red-400 flex items-center gap-1.5">
-                            <i class="pi pi-exclamation-circle" aria-hidden="true" /> {{ erro }}
-                        </p>
-                        <Button label="Verificar código" class="w-full" size="large" :loading="carregando" :disabled="codigo.length < 6" @click="validarCodigo" />
-                        <button class="w-full text-center text-sm text-primary hover:underline" @click="enviarCodigo">
-                            Não recebi o código — reenviar
-                        </button>
-                    </template>
-
-                    <template v-else-if="etapa === 3">
-                        <p class="text-sm text-slate-600 dark:text-slate-300">
-                            Crie uma senha segura com pelo menos 8 caracteres.
-                        </p>
-                        <div class="space-y-4">
-                            <div>
-                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Nova senha</label>
-                                <Password v-model="senha" :feedback="true" toggle-mask placeholder="Mínimo 8 caracteres" class="w-full" input-class="w-full" size="large" />
-                            </div>
-                            <div>
-                                <label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Confirmar senha</label>
-                                <Password v-model="senhaConfirm" :feedback="false" toggle-mask placeholder="Repita a senha" class="w-full" input-class="w-full" size="large" :invalid="senhaConfirm.length > 0 && !senhasIguais" />
-                                <p v-if="senhaConfirm.length > 0 && !senhasIguais" class="mt-1 text-xs text-red-600 dark:text-red-400">As senhas não coincidem.</p>
-                            </div>
-                        </div>
-                        <p v-if="erro" role="alert" class="text-sm text-red-600 dark:text-red-400 flex items-center gap-1.5">
-                            <i class="pi pi-exclamation-circle" aria-hidden="true" /> {{ erro }}
-                        </p>
-                        <Button label="Criar senha" icon="pi pi-check" class="w-full" size="large" :loading="carregando" :disabled="!senhaForte || !senhasIguais" @click="definirSenha" />
-                    </template>
-
                     <template v-else>
                         <div class="text-center py-4">
                             <div class="w-16 h-16 bg-emerald-100 dark:bg-emerald-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
-                                <i class="pi pi-check-circle text-emerald-600 dark:text-emerald-400 text-3xl" aria-hidden="true" />
+                                <i class="pi pi-envelope-open text-emerald-600 dark:text-emerald-400 text-3xl" aria-hidden="true" />
                             </div>
-                            <h2 class="text-lg font-bold text-slate-800 dark:text-slate-100 mb-2">Senha criada com sucesso!</h2>
+                            <h2 class="text-lg font-bold text-slate-800 dark:text-slate-100 mb-2">E-mail enviado!</h2>
                             <p class="text-sm text-slate-500 dark:text-slate-400">
-                                Você já pode acessar o portal com seu CPF/CNPJ e a nova senha.
+                                Acesse o e-mail cadastrado e clique no link para definir sua senha e acessar o portal.
+                            </p>
+                            <p v-if="emailMascarado" class="mt-2 text-sm font-medium text-slate-700 dark:text-slate-300">
+                                {{ emailMascarado }}
                             </p>
                         </div>
-                        <Button label="Ir para o login" icon="pi pi-sign-in" class="w-full" size="large" :loading="carregando" @click="entrarKeycloak" />
+                        <Button
+                            label="Ir para o login"
+                            icon="pi pi-sign-in"
+                            class="w-full"
+                            size="large"
+                            @click="router.push('/entrar')"
+                        />
                     </template>
 
                 </div>
             </div>
 
-            <div v-if="etapa < 4" class="text-center mt-4">
+            <div v-if="etapa < 2" class="text-center mt-4">
                 <button
                     class="inline-flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 transition-colors py-3 px-4 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800"
                     @click="router.push('/')"
diff --git a/src/services/primeiroAcessoService.js b/src/services/primeiroAcessoService.js
index b44907b..a15d5b2 100644
--- a/src/services/primeiroAcessoService.js
+++ b/src/services/primeiroAcessoService.js
@@ -12,6 +12,15 @@ export const primeiroAcessoService = {
         })
     },
 
+    solicitarAcesso(documento) {
+        return $fetch(proxyUrl('/publico/primeiro-acesso/solicitar'), {
+            method: 'POST',
+            headers: FETCH_HEADERS,
+            body: { documento },
+        })
+    },
+
+    // TODO Opção A (futuro — fluxo OTP para verificação de identidade antes de criar conta)
     solicitarCodigo(documento, canal) {
         return $fetch(proxyUrl('/publico/primeiro-acesso/codigo'), {
             method: 'POST',