gabrielb
71e1a3f970
Substitui o portal Vite+Vue puro por Nuxt 3 com BFF embutido (Nitro server
routes) e fluxo de autenticação Keycloak via token-handler pattern.
Server (BFF):
- server/api/auth/{login,callback,refresh,logout,me}.ts — Keycloak PKCE
- server/api/proxy/[...path].ts — proxy autenticado pro core-api com tenant
- server/utils/{session,keycloak,pkce,redis,tenant,prefeitura}.ts
- server/middleware/csrf.ts — Origin check + header X-Requested-With
Auth (token-handler pattern):
- JWT vive só server-side em Redis; cliente recebe cookie session-id opaco
- Refresh transparente quando access_token expira
- Multi-tenant via hostname → X-Municipio/X-Dominio injetados no proxy
- Realm dedicado: modumfiscal-portal-{env}
Frontend (Nuxt):
- src/pages/** (file-based routing) substitui src/views/
- Plugins SSR: prefeitura (bootstrap pré-hidratação) + auth (hidrata user via /api/auth/me)
- Composables useAuth, useApi, useLoginModal, useFocusLoginInput
- Modal global de login quando middleware /portal/** bloqueia
- Splash overlay no boot esconde flash do preset inicial pro tema dinâmico
- DocumentoInput bloqueia campo quando user autenticado (pré-preenche em certidão/IPTU)
Removidos:
- index.html, vite.config.js, src/main.js, src/router/
- src/config/apiClient.js (substituído por \$fetch via /api/proxy)
- src/services/{auth,prefeitura}Service.js (lógica migrada pra composables/plugins)
- src/mocks/ (não mais usado)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
409 lines
23 KiB
Vue
409 lines
23 KiB
Vue
<script setup>
|
|
import { ref, computed, watch } from 'vue'
|
|
import { credenciamentoService } from '@/services/credenciamentoService'
|
|
|
|
const router = useRouter()
|
|
|
|
const etapa = ref(0)
|
|
const carregando = ref(false)
|
|
const erro = ref('')
|
|
|
|
const form = ref({
|
|
documento: '',
|
|
tipoPessoa: '',
|
|
nomeCompleto: '',
|
|
nomeFantasia: '',
|
|
dataNascimento: '',
|
|
inscricaoEstadual: '',
|
|
cep: '',
|
|
logradouro: '',
|
|
numero: '',
|
|
complemento: '',
|
|
bairro: '',
|
|
cidade: '',
|
|
uf: '',
|
|
email: '',
|
|
emailConfirm: '',
|
|
telefone: '',
|
|
whatsapp: false,
|
|
representanteNome: '',
|
|
representanteCpf: '',
|
|
representanteCargo: '',
|
|
})
|
|
|
|
const docDigitos = computed(() => form.value.documento.replace(/\D/g, ''))
|
|
const isPJ = computed(() => form.value.tipoPessoa === 'JURIDICA')
|
|
|
|
const totalEtapas = computed(() => isPJ.value ? 6 : 5)
|
|
|
|
const etapaLabels = computed(() => {
|
|
const base = ['Documento', 'Dados', 'Endereço', 'Contato']
|
|
if (isPJ.value) base.push('Representante')
|
|
base.push('Revisão')
|
|
return base
|
|
})
|
|
|
|
const emailsIguais = computed(() => form.value.email === form.value.emailConfirm)
|
|
const emailValido = computed(() => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.value.email))
|
|
|
|
async function verificarDocumento() {
|
|
const d = docDigitos.value
|
|
if (d.length !== 11 && d.length !== 14) return
|
|
carregando.value = true
|
|
erro.value = ''
|
|
try {
|
|
const res = await credenciamentoService.verificarDocumento(d)
|
|
if (res.data.situacao === 'JA_CREDENCIADO') {
|
|
erro.value = 'Este documento já possui cadastro. Use "Esqueci minha senha" se precisar recuperar o acesso.'
|
|
return
|
|
}
|
|
form.value.tipoPessoa = d.length === 14 ? 'JURIDICA' : 'FISICA'
|
|
etapa.value = 1
|
|
} catch (e) {
|
|
erro.value = e?.data?.description ?? 'Não foi possível verificar o documento. Tente novamente.'
|
|
} finally {
|
|
carregando.value = false
|
|
}
|
|
}
|
|
|
|
const buscandoCep = ref(false)
|
|
async function buscarCep() {
|
|
const cep = form.value.cep.replace(/\D/g, '')
|
|
if (cep.length !== 8) return
|
|
buscandoCep.value = true
|
|
try {
|
|
const res = await credenciamentoService.buscarCep(cep)
|
|
const end = res.data
|
|
form.value.logradouro = end.logradouro ?? ''
|
|
form.value.bairro = end.bairro ?? ''
|
|
form.value.cidade = end.localidade ?? ''
|
|
form.value.uf = end.uf ?? ''
|
|
} catch {
|
|
// silencioso — usuário preenche manualmente
|
|
} finally {
|
|
buscandoCep.value = false
|
|
}
|
|
}
|
|
|
|
watch(() => form.value.cep, (v) => {
|
|
if (v.replace(/\D/g, '').length === 8) buscarCep()
|
|
})
|
|
|
|
function avancar() {
|
|
erro.value = ''
|
|
etapa.value++
|
|
}
|
|
|
|
function voltar() {
|
|
erro.value = ''
|
|
etapa.value--
|
|
}
|
|
|
|
async function solicitar() {
|
|
carregando.value = true
|
|
erro.value = ''
|
|
try {
|
|
await credenciamentoService.solicitar({
|
|
documento: docDigitos.value,
|
|
tipoPessoa: form.value.tipoPessoa,
|
|
nomeCompleto: form.value.nomeCompleto,
|
|
nomeFantasia: form.value.nomeFantasia || undefined,
|
|
dataNascimento: form.value.dataNascimento || undefined,
|
|
inscricaoEstadual: form.value.inscricaoEstadual || undefined,
|
|
endereco: {
|
|
cep: form.value.cep.replace(/\D/g, ''),
|
|
logradouro: form.value.logradouro,
|
|
numero: form.value.numero,
|
|
complemento: form.value.complemento || undefined,
|
|
bairro: form.value.bairro,
|
|
cidade: form.value.cidade,
|
|
uf: form.value.uf,
|
|
},
|
|
contato: {
|
|
email: form.value.email,
|
|
telefone: form.value.telefone.replace(/\D/g, ''),
|
|
whatsapp: form.value.whatsapp,
|
|
},
|
|
representante: isPJ.value ? {
|
|
nome: form.value.representanteNome,
|
|
cpf: form.value.representanteCpf.replace(/\D/g, ''),
|
|
cargo: form.value.representanteCargo,
|
|
} : undefined,
|
|
})
|
|
etapa.value = totalEtapas.value
|
|
} catch (e) {
|
|
erro.value = e?.data?.description ?? 'Erro ao enviar solicitação. Tente novamente.'
|
|
} finally {
|
|
carregando.value = false
|
|
}
|
|
}
|
|
|
|
function formatarTelefone(e) {
|
|
const d = e.target.value.replace(/\D/g, '').slice(0, 11)
|
|
form.value.telefone = d
|
|
.replace(/(\d{2})(\d)/, '($1) $2')
|
|
.replace(/(\d{5})(\d{1,4})$/, '$1-$2')
|
|
}
|
|
|
|
function formatarCep(e) {
|
|
const d = e.target.value.replace(/\D/g, '').slice(0, 8)
|
|
form.value.cep = d.replace(/(\d{5})(\d{1,3})/, '$1-$2')
|
|
}
|
|
|
|
const estados = ['AC','AL','AP','AM','BA','CE','DF','ES','GO','MA','MT','MS','MG','PA','PB','PR','PE','PI','RJ','RN','RS','RO','RR','SC','SP','SE','TO']
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-[calc(100vh-8rem)] flex items-center justify-center px-4 py-12">
|
|
<div class="w-full max-w-lg">
|
|
|
|
<div v-if="etapa < totalEtapas" class="mb-8">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<p class="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide">
|
|
Passo {{ etapa + 1 }} de {{ totalEtapas }}
|
|
</p>
|
|
<p class="text-xs text-slate-500 dark:text-slate-400">{{ etapaLabels[etapa] }}</p>
|
|
</div>
|
|
<div class="h-1.5 bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
|
|
<div
|
|
class="h-full bg-primary rounded-full transition-all duration-300"
|
|
:style="{ width: `${((etapa + 1) / totalEtapas) * 100}%` }"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-lg border border-slate-200 dark:border-slate-700 overflow-hidden">
|
|
|
|
<div class="bg-gradient-to-r from-primary to-primary-700 px-8 py-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center" aria-hidden="true">
|
|
<i class="pi pi-user-plus text-white text-lg" />
|
|
</div>
|
|
<div>
|
|
<h1 class="text-white font-bold text-base">Credenciamento</h1>
|
|
<p class="text-white/80 text-xs mt-0.5">
|
|
{{ etapa < totalEtapas ? etapaLabels[etapa] : 'Solicitação enviada!' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-8 py-8 space-y-5">
|
|
|
|
<template v-if="etapa === 0">
|
|
<p class="text-sm text-slate-600 dark:text-slate-300">
|
|
Informe seu CPF (pessoa física) ou CNPJ (empresa) para iniciar o credenciamento.
|
|
</p>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">CPF ou CNPJ</label>
|
|
<DocumentoInput v-model="form.documento" @keyup.enter="verificarDocumento" />
|
|
</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 documento"
|
|
icon="pi pi-arrow-right" icon-pos="right"
|
|
class="w-full" size="large"
|
|
:loading="carregando"
|
|
:disabled="docDigitos.length !== 11 && docDigitos.length !== 14"
|
|
@click="verificarDocumento"
|
|
/>
|
|
<p class="text-center text-sm text-slate-500 dark:text-slate-400">
|
|
Já tem cadastro?
|
|
<NuxtLink to="/" class="text-primary font-semibold hover:underline">Entrar</NuxtLink>
|
|
</p>
|
|
</template>
|
|
|
|
<template v-else-if="etapa === 1">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">
|
|
{{ isPJ ? 'Razão Social' : 'Nome completo' }}
|
|
</label>
|
|
<InputText v-model="form.nomeCompleto" :placeholder="isPJ ? 'Nome da empresa conforme CNPJ' : 'Seu nome completo'" class="w-full" size="large" />
|
|
</div>
|
|
<div v-if="isPJ">
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Nome fantasia <span class="font-normal text-slate-400">(opcional)</span></label>
|
|
<InputText v-model="form.nomeFantasia" placeholder="Nome fantasia" class="w-full" size="large" />
|
|
</div>
|
|
<div v-if="!isPJ">
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Data de nascimento</label>
|
|
<DatePicker v-model="form.dataNascimento" date-format="dd/mm/yy" placeholder="DD/MM/AAAA" class="w-full" size="large" show-icon />
|
|
</div>
|
|
<div v-if="isPJ">
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Inscrição estadual <span class="font-normal text-slate-400">(opcional)</span></label>
|
|
<InputText v-model="form.inscricaoEstadual" placeholder="IE ou ISENTO" class="w-full" size="large" />
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-3 pt-2">
|
|
<Button label="Voltar" severity="secondary" outlined class="flex-1" @click="voltar" />
|
|
<Button label="Continuar" icon="pi pi-arrow-right" icon-pos="right" class="flex-1" :disabled="!form.nomeCompleto.trim()" @click="avancar" />
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="etapa === 2">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">CEP</label>
|
|
<div class="relative">
|
|
<InputText :value="form.cep" placeholder="00000-000" class="w-full" size="large" @input="formatarCep" />
|
|
<i v-if="buscandoCep" class="pi pi-spin pi-spinner absolute right-3 top-1/2 -translate-y-1/2 text-slate-400" aria-hidden="true" />
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<div class="col-span-2">
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Logradouro</label>
|
|
<InputText v-model="form.logradouro" placeholder="Rua, Av., ..." class="w-full" size="large" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Número</label>
|
|
<InputText v-model="form.numero" placeholder="Nº" class="w-full" size="large" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Complemento <span class="font-normal text-slate-400">(opcional)</span></label>
|
|
<InputText v-model="form.complemento" placeholder="Apto, sala, bloco..." class="w-full" size="large" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Bairro</label>
|
|
<InputText v-model="form.bairro" class="w-full" size="large" />
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<div class="col-span-2">
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Cidade</label>
|
|
<InputText v-model="form.cidade" class="w-full" size="large" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">UF</label>
|
|
<Select v-model="form.uf" :options="estados" placeholder="UF" class="w-full" size="large" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-3 pt-2">
|
|
<Button label="Voltar" severity="secondary" outlined class="flex-1" @click="voltar" />
|
|
<Button label="Continuar" icon="pi pi-arrow-right" icon-pos="right" class="flex-1"
|
|
:disabled="!form.logradouro || !form.numero || !form.bairro || !form.cidade || !form.uf"
|
|
@click="avancar" />
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="etapa === 3">
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">E-mail</label>
|
|
<InputText v-model="form.email" type="email" placeholder="seu@email.com" class="w-full" size="large" :invalid="form.email.length > 0 && !emailValido" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Confirmar e-mail</label>
|
|
<InputText v-model="form.emailConfirm" type="email" placeholder="Repita o e-mail" class="w-full" size="large" :invalid="form.emailConfirm.length > 0 && !emailsIguais" />
|
|
<p v-if="form.emailConfirm.length > 0 && !emailsIguais" class="mt-1 text-xs text-red-600 dark:text-red-400">Os e-mails não coincidem.</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Telefone / Celular</label>
|
|
<InputText :value="form.telefone" placeholder="(00) 00000-0000" class="w-full" size="large" inputmode="numeric" @input="formatarTelefone" />
|
|
</div>
|
|
<div class="flex items-center gap-3 p-4 bg-slate-50 dark:bg-slate-700/50 rounded-xl">
|
|
<Checkbox v-model="form.whatsapp" :binary="true" input-id="whatsapp" />
|
|
<label for="whatsapp" class="text-sm text-slate-700 dark:text-slate-200 cursor-pointer">
|
|
Este número também recebe WhatsApp
|
|
</label>
|
|
</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>
|
|
<div class="flex gap-3 pt-2">
|
|
<Button label="Voltar" severity="secondary" outlined class="flex-1" @click="voltar" />
|
|
<Button label="Continuar" icon="pi pi-arrow-right" icon-pos="right" class="flex-1"
|
|
:disabled="!emailValido || !emailsIguais || form.telefone.replace(/\D/g,'').length < 10"
|
|
@click="avancar" />
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="etapa === 4 && isPJ">
|
|
<p class="text-sm text-slate-600 dark:text-slate-300">
|
|
Informe os dados do representante legal da empresa que será responsável pelo acesso ao portal.
|
|
</p>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Nome completo</label>
|
|
<InputText v-model="form.representanteNome" placeholder="Nome do representante" class="w-full" size="large" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">CPF</label>
|
|
<DocumentoInput v-model="form.representanteCpf" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1.5">Cargo / Função</label>
|
|
<InputText v-model="form.representanteCargo" placeholder="Ex.: Sócio-Administrador, Diretor..." class="w-full" size="large" />
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-3 pt-2">
|
|
<Button label="Voltar" severity="secondary" outlined class="flex-1" @click="voltar" />
|
|
<Button label="Continuar" icon="pi pi-arrow-right" icon-pos="right" class="flex-1"
|
|
:disabled="!form.representanteNome || form.representanteCpf.replace(/\D/g,'').length !== 11 || !form.representanteCargo"
|
|
@click="avancar" />
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else-if="(isPJ && etapa === 5) || (!isPJ && etapa === 4)">
|
|
<p class="text-sm text-slate-600 dark:text-slate-300 mb-2">Confira os dados antes de enviar a solicitação.</p>
|
|
<div class="space-y-3 text-sm">
|
|
<div class="bg-slate-50 dark:bg-slate-700/50 rounded-xl p-4 space-y-2">
|
|
<p class="font-semibold text-slate-500 dark:text-slate-400 text-xs uppercase tracking-wide">Identificação</p>
|
|
<p class="text-slate-800 dark:text-slate-100"><span class="text-slate-500 dark:text-slate-400">Documento:</span> {{ form.documento }}</p>
|
|
<p class="text-slate-800 dark:text-slate-100"><span class="text-slate-500 dark:text-slate-400">Nome:</span> {{ form.nomeCompleto }}</p>
|
|
</div>
|
|
<div class="bg-slate-50 dark:bg-slate-700/50 rounded-xl p-4 space-y-2">
|
|
<p class="font-semibold text-slate-500 dark:text-slate-400 text-xs uppercase tracking-wide">Endereço</p>
|
|
<p class="text-slate-800 dark:text-slate-100">{{ form.logradouro }}, {{ form.numero }}{{ form.complemento ? ` — ${form.complemento}` : '' }}</p>
|
|
<p class="text-slate-800 dark:text-slate-100">{{ form.bairro }} — {{ form.cidade }}/{{ form.uf }} — CEP {{ form.cep }}</p>
|
|
</div>
|
|
<div class="bg-slate-50 dark:bg-slate-700/50 rounded-xl p-4 space-y-2">
|
|
<p class="font-semibold text-slate-500 dark:text-slate-400 text-xs uppercase tracking-wide">Contato</p>
|
|
<p class="text-slate-800 dark:text-slate-100">{{ form.email }}</p>
|
|
<p class="text-slate-800 dark:text-slate-100">{{ form.telefone }}{{ form.whatsapp ? ' (WhatsApp)' : '' }}</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>
|
|
<div class="flex gap-3 pt-2">
|
|
<Button label="Voltar" severity="secondary" outlined class="flex-1" @click="voltar" />
|
|
<Button label="Enviar solicitação" icon="pi pi-send" class="flex-1" :loading="carregando" @click="solicitar" />
|
|
</div>
|
|
</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" />
|
|
</div>
|
|
<h2 class="text-lg font-bold text-slate-800 dark:text-slate-100 mb-2">Solicitação enviada!</h2>
|
|
<p class="text-sm text-slate-500 dark:text-slate-400">
|
|
Sua solicitação de credenciamento foi recebida e será analisada em até
|
|
<strong class="text-slate-700 dark:text-slate-300">2 dias úteis</strong>.
|
|
Você receberá um e-mail em <strong class="text-slate-700 dark:text-slate-300">{{ form.email }}</strong> com o resultado.
|
|
</p>
|
|
</div>
|
|
<Button label="Voltar à página inicial" icon="pi pi-home" class="w-full" size="large" @click="router.push('/')" />
|
|
</template>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="etapa === 0" 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('/')"
|
|
>
|
|
<i class="pi pi-arrow-left text-xs" aria-hidden="true" />
|
|
Voltar à página inicial
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|