junior/lic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tela de cadastro /register e configurações com perfil completo

Browse Source 
- 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>
This commit is contained in:
Junior
2026-03-14 15:38:44 -03:00
parent 2e5eee15ad
commit 9d4cb5b996
4 changed files with 236 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
front-end/app/pages/login.vue
View File

@@ -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>

176
front-end/app/pages/register.vue Normal file
View File

@@ -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>

57
front-end/app/pages/sistema/configuracoes.vue
View File

@@ -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>