feat: tela de cadastro /register e configurações com perfil completo
- 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
176
front-end/app/pages/register.vue
Normal file
176
front-end/app/pages/register.vue
Normal 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>
|
||||
Reference in New Issue
Block a user