From 9d4cb5b9968694729beee09c36484c94b51c2063 Mon Sep 17 00:00:00 2001
From: Junior <josegouveiajunior@gmail.com>
Date: Sat, 14 Mar 2026 15:38:44 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20tela=20de=20cadastro=20/register=20e=20?=
 =?UTF-8?q?configura=C3=A7=C3=B5es=20com=20perfil=20completo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- register.vue: cadastro PF/PJ com nome fantasia, razão social, CPF/CNPJ, slug
  - auto-gera slug a partir do nome fantasia
  - toggle PF/PJ muda label dos campos dinamicamente
- configuracoes.vue: exibe e edita todos os campos do perfil do tenant
- auth.global.ts: /register liberado sem autenticação
- login.vue: link para /register + remove erro duplicado

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 front-end/app/middleware/auth.global.ts       |   6 +-
 front-end/app/pages/login.vue                 |   6 +
 front-end/app/pages/register.vue              | 176 ++++++++++++++++++
 front-end/app/pages/sistema/configuracoes.vue |  57 +++++-
 4 files changed, 236 insertions(+), 9 deletions(-)
 create mode 100644 front-end/app/pages/register.vue

diff --git a/front-end/app/middleware/auth.global.ts b/front-end/app/middleware/auth.global.ts
index 25fbf2b..6d90e1e 100644
--- a/front-end/app/middleware/auth.global.ts
+++ b/front-end/app/middleware/auth.global.ts
@@ -1,9 +1,11 @@
+const PUBLIC_ROUTES = ['/login', '/register']
+
 export default defineNuxtRouteMiddleware((to) => {
   const { isAuthenticated } = useAuth()
-  if (!isAuthenticated.value && to.path !== '/login') {
+  if (!isAuthenticated.value && !PUBLIC_ROUTES.includes(to.path)) {
     return navigateTo('/login')
   }
-  if (isAuthenticated.value && to.path === '/login') {
+  if (isAuthenticated.value && PUBLIC_ROUTES.includes(to.path)) {
     return navigateTo('/')
   }
 })
diff --git a/front-end/app/pages/login.vue b/front-end/app/pages/login.vue
index 0680764..d7b0491 100644
--- a/front-end/app/pages/login.vue
+++ b/front-end/app/pages/login.vue
@@ -75,6 +75,10 @@ async function handleSubmit() {
       >
         Entrar
       </UButton>
+
+      <p class="register-link">
+        Não tem conta? <NuxtLink to="/register">Criar conta</NuxtLink>
+      </p>
     </form>
   </div>
 </template>
@@ -99,4 +103,6 @@ async function handleSubmit() {
   background: linear-gradient(135deg, #667eea, #764ba2) !important;
   box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
 }
+.register-link { text-align: center; font-size: 13px; color: #64748b; margin-top: 16px; }
+.register-link a { color: #667eea; font-weight: 600; text-decoration: none; }
 </style>
diff --git a/front-end/app/pages/register.vue b/front-end/app/pages/register.vue
new file mode 100644
index 0000000..01dfa23
--- /dev/null
+++ b/front-end/app/pages/register.vue
@@ -0,0 +1,176 @@
+<!-- front-end/app/pages/register.vue -->
+<script setup lang="ts">
+definePageMeta({ layout: 'auth' })
+
+const { public: { apiBase } } = useRuntimeConfig()
+const token = useCookie<string | null>('auth_token', { maxAge: 60 * 60 * 8 })
+const refreshToken = useCookie<string | null>('refresh_token', { maxAge: 60 * 60 * 24 * 7 })
+
+const documentType = ref<'pf' | 'pj'>('pj')
+const form = reactive({
+  companyName: '',
+  legalName: '',
+  document: '',
+  slug: '',
+  adminName: '',
+  adminEmail: '',
+  adminPassword: '',
+})
+
+const documentLabel = computed(() => documentType.value === 'pj' ? 'CNPJ' : 'CPF')
+const documentPlaceholder = computed(() => documentType.value === 'pj' ? '00.000.000/0001-00' : '000.000.000-00')
+const nameLabel = computed(() => documentType.value === 'pj' ? 'Razão Social' : 'Nome Completo')
+
+// Auto-gera slug a partir do nome fantasia
+watch(() => form.companyName, (val) => {
+  form.slug = val.toLowerCase()
+    .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9\s-]/g, '')
+    .trim()
+    .replace(/\s+/g, '-')
+    .slice(0, 50)
+})
+
+const error = ref('')
+const loading = ref(false)
+
+async function handleSubmit() {
+  error.value = ''
+  loading.value = true
+  try {
+    const res = await $fetch<{ access_token: string; refresh_token: string }>(`${apiBase}/auth/register`, {
+      method: 'POST',
+      body: {
+        company_name: form.companyName,
+        legal_name: form.legalName,
+        document_type: documentType.value,
+        document: form.document,
+        slug: form.slug,
+        admin_name: form.adminName,
+        admin_email: form.adminEmail,
+        admin_password: form.adminPassword,
+      },
+    })
+    token.value = res.access_token
+    refreshToken.value = res.refresh_token
+    navigateTo('/')
+  } catch (err: any) {
+    error.value = err?.data?.error || 'Erro ao criar conta. Tente novamente.'
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="register-card">
+    <div class="register-header">
+      <h1>Criar conta</h1>
+      <p>Preencha os dados para começar a usar o Licitatche</p>
+    </div>
+
+    <form @submit.prevent="handleSubmit">
+      <!-- Tipo de pessoa -->
+      <div class="type-toggle">
+        <button
+          type="button"
+          :class="['type-btn', documentType === 'pj' && 'active']"
+          @click="documentType = 'pj'"
+        >
+          Pessoa Jurídica
+        </button>
+        <button
+          type="button"
+          :class="['type-btn', documentType === 'pf' && 'active']"
+          @click="documentType = 'pf'"
+        >
+          Pessoa Física
+        </button>
+      </div>
+
+      <div class="section-label">Dados da Empresa</div>
+
+      <UFormField label="Nome Fantasia / Apelido" class="field">
+        <UInput v-model="form.companyName" placeholder="Ex: Tech Gov" required />
+      </UFormField>
+
+      <UFormField :label="nameLabel" class="field">
+        <UInput v-model="form.legalName" :placeholder="documentType === 'pj' ? 'Razão Social completa' : 'Nome completo'" required />
+      </UFormField>
+
+      <UFormField :label="documentLabel" class="field">
+        <UInput v-model="form.document" :placeholder="documentPlaceholder" required />
+      </UFormField>
+
+      <UFormField label="Identificador único (slug)" class="field">
+        <UInput v-model="form.slug" placeholder="minha-empresa" required />
+        <template #hint>
+          <span class="slug-hint">Usado para fazer login. Ex: <strong>{{ form.slug || 'minha-empresa' }}</strong></span>
+        </template>
+      </UFormField>
+
+      <div class="section-label">Dados de Acesso</div>
+
+      <UFormField label="Seu nome" class="field">
+        <UInput v-model="form.adminName" placeholder="Nome do responsável" required />
+      </UFormField>
+
+      <UFormField label="E-mail" class="field">
+        <UInput v-model="form.adminEmail" type="email" placeholder="voce@empresa.com.br" required />
+      </UFormField>
+
+      <UFormField label="Senha" class="field">
+        <UInput v-model="form.adminPassword" type="password" placeholder="Mínimo 8 caracteres" required />
+      </UFormField>
+
+      <p v-if="error" class="error-msg">{{ error }}</p>
+
+      <UButton type="submit" block size="md" :loading="loading" class="btn-register">
+        Criar conta
+      </UButton>
+
+      <p class="login-link">
+        Já tem conta? <NuxtLink to="/login">Fazer login</NuxtLink>
+      </p>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.register-card {
+  background: white;
+  border-radius: 20px;
+  padding: 40px;
+  width: 100%;
+  max-width: 460px;
+  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
+}
+.register-header { margin-bottom: 24px; }
+.register-header h1 { font-size: 22px; font-weight: 700; color: #0f172a; letter-spacing: -0.5px; }
+.register-header p { font-size: 13px; color: #64748b; margin-top: 4px; }
+
+.type-toggle { display: flex; gap: 8px; margin-bottom: 20px; }
+.type-btn {
+  flex: 1; padding: 8px; border-radius: 8px; border: 1.5px solid #e2e8f0;
+  font-size: 13px; font-weight: 500; color: #64748b; cursor: pointer; background: white;
+  transition: all 0.15s;
+}
+.type-btn.active {
+  border-color: #667eea; color: #667eea; background: #f0f3ff;
+}
+
+.section-label {
+  font-size: 11px; font-weight: 700; color: #94a3b8; letter-spacing: 0.8px;
+  text-transform: uppercase; margin: 16px 0 12px;
+}
+.field { margin-bottom: 14px; }
+.slug-hint { font-size: 11px; color: #94a3b8; margin-top: 4px; display: block; }
+.error-msg { color: #dc2626; font-size: 13px; margin-bottom: 12px; }
+.btn-register {
+  background: linear-gradient(135deg, #667eea, #764ba2) !important;
+  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+  margin-top: 4px;
+}
+.login-link { text-align: center; font-size: 13px; color: #64748b; margin-top: 16px; }
+.login-link a { color: #667eea; font-weight: 600; text-decoration: none; }
+</style>
diff --git a/front-end/app/pages/sistema/configuracoes.vue b/front-end/app/pages/sistema/configuracoes.vue
index 7a40b8f..72a16c9 100644
--- a/front-end/app/pages/sistema/configuracoes.vue
+++ b/front-end/app/pages/sistema/configuracoes.vue
@@ -6,6 +6,9 @@ interface ApiTenant {
   ID: string
   Slug: string
   Name: string
+  LegalName: string
+  DocumentType: string
+  Document: string
   Plan: string
   MaxUsers: number
   IsActive: boolean
@@ -15,19 +18,35 @@ const { data: tenant, refresh } = await useAsyncData('tenant-me', () =>
   apiFetch<ApiTenant>('/tenant/me')
 )
 
-const nome = ref(tenant.value?.Name ?? '')
+const form = reactive({
+  name: tenant.value?.Name ?? '',
+  legalName: tenant.value?.LegalName ?? '',
+  documentType: tenant.value?.DocumentType ?? 'pj',
+  document: tenant.value?.Document ?? '',
+})
+
 const saving = ref(false)
 const saved = ref(false)
 
 async function salvar() {
   saving.value = true
   saved.value = false
-  await apiFetch('/tenant/me', { method: 'PUT', body: { name: nome.value } })
+  await apiFetch('/tenant/me', {
+    method: 'PUT',
+    body: {
+      name: form.name,
+      legal_name: form.legalName,
+      document_type: form.documentType,
+      document: form.document,
+    },
+  })
   await refresh()
   saving.value = false
   saved.value = true
   setTimeout(() => { saved.value = false }, 3000)
 }
+
+const documentLabel = computed(() => form.documentType === 'pj' ? 'CNPJ' : 'CPF')
 </script>
 
 <template>
@@ -36,8 +55,24 @@ async function salvar() {
     <div class="content">
       <div class="card pad">
         <h2 class="section-title">Dados da Empresa</h2>
-        <UFormField label="Nome da Empresa" class="field">
-          <UInput v-model="nome" />
+
+        <div class="type-toggle">
+          <button type="button" :class="['type-btn', form.documentType === 'pj' && 'active']" @click="form.documentType = 'pj'">
+            Pessoa Jurídica
+          </button>
+          <button type="button" :class="['type-btn', form.documentType === 'pf' && 'active']" @click="form.documentType = 'pf'">
+            Pessoa Física
+          </button>
+        </div>
+
+        <UFormField label="Nome Fantasia / Apelido" class="field">
+          <UInput v-model="form.name" />
+        </UFormField>
+        <UFormField :label="form.documentType === 'pj' ? 'Razão Social' : 'Nome Completo'" class="field">
+          <UInput v-model="form.legalName" />
+        </UFormField>
+        <UFormField :label="documentLabel" class="field">
+          <UInput v-model="form.document" />
         </UFormField>
         <UFormField label="Slug" class="field">
           <UInput :model-value="tenant?.Slug ?? ''" disabled />
@@ -45,6 +80,7 @@ async function salvar() {
         <UFormField label="Plano Atual" class="field">
           <UInput :model-value="tenant?.Plan ?? ''" disabled />
         </UFormField>
+
         <div class="actions">
           <UButton class="btn-primary" size="sm" :loading="saving" @click="salvar">Salvar Alterações</UButton>
           <span v-if="saved" class="saved-msg">Salvo!</span>
@@ -59,9 +95,16 @@ async function salvar() {
 .content { padding: 20px 22px; flex: 1; overflow-y: auto; }
 .card { background: white; border-radius: 11px; border: 1px solid #e2e8f0; }
 .pad { padding: 24px; }
-.section-title { font-size: 15px; font-weight: 700; color: #0f172a; margin-bottom: 20px; }
-.field { margin-bottom: 16px; }
-.actions { display: flex; align-items: center; gap: 12px; }
+.section-title { font-size: 15px; font-weight: 700; color: #0f172a; margin-bottom: 16px; }
+.type-toggle { display: flex; gap: 8px; margin-bottom: 18px; }
+.type-btn {
+  flex: 1; padding: 7px; border-radius: 8px; border: 1.5px solid #e2e8f0;
+  font-size: 13px; font-weight: 500; color: #64748b; cursor: pointer; background: white;
+  transition: all 0.15s;
+}
+.type-btn.active { border-color: #667eea; color: #667eea; background: #f0f3ff; }
+.field { margin-bottom: 14px; }
+.actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
 .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2) !important; }
 .saved-msg { font-size: 13px; color: #10b981; font-weight: 500; }
 </style>