freemium F2: signup self-service com confirmacao + /onboarding
- Signup.vue reescrito: coleta tipo de conta + nome + nome do negocio + slug (disponibilidade ao vivo via slug_disponivel) + email/senha; grava tudo no raw_user_meta_data do signUp; PEGADINHA #2: signOut scope:local se nao veio sessao + tela "confirme seu e-mail". Removido provisionamento/intent inline. - OnboardingPage.vue (PEGADINHA #3): 1o login chama auto_provision_free_tenant + processar_pos_signup; resolve estados provisionando/slug-colidiu/erro; redireciona pro painel conforme kind. - guard: logado-sem-tenant (nao saas_admin) -> /onboarding em vez de /login - rota /onboarding (meta.public; a pagina exige sessao) NOTA: supabase/config.toml e gitignored — enable_confirmations=true foi setado local (ativa no proximo restart do stack). No hosted, ligar em Auth>Email>Confirm. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
@@ -24,6 +24,7 @@ import Password from 'primevue/password';
|
||||
import Chip from 'primevue/chip';
|
||||
import Message from 'primevue/message';
|
||||
import ProgressSpinner from 'primevue/progressspinner';
|
||||
import SelectButton from 'primevue/selectbutton';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@@ -34,12 +35,88 @@ const toast = useToast();
|
||||
// ============================
|
||||
const email = ref('');
|
||||
const password = ref('');
|
||||
const displayName = ref('');
|
||||
const businessName = ref('');
|
||||
const slug = ref('');
|
||||
const slugTouched = ref(false);
|
||||
const loading = ref(false);
|
||||
|
||||
// validação simples (sem "viajar")
|
||||
// tela "confirme seu e-mail" (quando a confirmação está ligada e o signUp não
|
||||
// retorna sessão)
|
||||
const signedUp = ref(false);
|
||||
const signedUpEmail = ref('');
|
||||
|
||||
// tipo de conta — deriva do plano da query, default terapeuta
|
||||
const kindOptions = [
|
||||
{ label: 'Sou terapeuta', value: 'therapist' },
|
||||
{ label: 'Somos uma clínica', value: 'clinic_full' }
|
||||
];
|
||||
const accountKind = ref('therapist');
|
||||
|
||||
// ============================
|
||||
// Slug do tenant (= nome do schema físico, IMUTÁVEL)
|
||||
// ============================
|
||||
// espelha public.generate_tenant_slug pra a sugestão local; a verdade é a RPC.
|
||||
function slugify(s) {
|
||||
let b = String(s || '').toLowerCase().trim();
|
||||
b = b.normalize('NFD').replace(/[̀-ͯ]/g, ''); // tira acentos
|
||||
b = b.replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '');
|
||||
b = b.slice(0, 48);
|
||||
if (!b || !/^[a-z]/.test(b)) b = ('t_' + b).slice(0, 48);
|
||||
return b;
|
||||
}
|
||||
|
||||
const slugStatus = ref('idle'); // idle|checking|ok|curto|longo|invalido|reservado|em_uso|bloqueado|erro
|
||||
let slugTimer = null;
|
||||
|
||||
function onSlugInput() {
|
||||
slugTouched.value = true;
|
||||
slug.value = slugify(slug.value);
|
||||
}
|
||||
|
||||
async function checkSlug() {
|
||||
try {
|
||||
const { data, error } = await supabase.rpc('slug_disponivel', { p_slug: slug.value });
|
||||
if (error) throw error;
|
||||
slugStatus.value = data?.ok ? 'ok' : (data?.motivo || 'invalido');
|
||||
} catch {
|
||||
slugStatus.value = 'erro';
|
||||
}
|
||||
}
|
||||
|
||||
watch(businessName, (v) => {
|
||||
if (!slugTouched.value) slug.value = slugify(v);
|
||||
});
|
||||
|
||||
watch(slug, (v) => {
|
||||
if (slugTimer) clearTimeout(slugTimer);
|
||||
if (!v) { slugStatus.value = 'idle'; return; }
|
||||
if (v.length < 3) { slugStatus.value = 'curto'; return; }
|
||||
slugStatus.value = 'checking';
|
||||
slugTimer = setTimeout(checkSlug, 400);
|
||||
});
|
||||
|
||||
const slugOk = computed(() => slugStatus.value === 'ok');
|
||||
const slugMessage = computed(() => ({
|
||||
checking: 'Verificando disponibilidade…',
|
||||
ok: 'Disponível ✓',
|
||||
curto: 'Mínimo de 3 caracteres.',
|
||||
longo: 'Máximo de 48 caracteres.',
|
||||
invalido: 'Use letras minúsculas, números e _ (começando com letra).',
|
||||
reservado: 'Esse identificador é reservado.',
|
||||
em_uso: 'Esse identificador já está em uso.',
|
||||
bloqueado: 'Esse identificador não está disponível.',
|
||||
erro: 'Não consegui verificar agora.'
|
||||
}[slugStatus.value] || ''));
|
||||
|
||||
// validação
|
||||
const emailOk = computed(() => /\S+@\S+\.\S+/.test(String(email.value || '').trim()));
|
||||
const passwordOk = computed(() => String(password.value || '').length >= 6);
|
||||
const canSubmit = computed(() => !loading.value && emailOk.value && passwordOk.value);
|
||||
const nameOk = computed(() => String(displayName.value || '').trim().length >= 2);
|
||||
const businessOk = computed(() => String(businessName.value || '').trim().length >= 2);
|
||||
const canSubmit = computed(() =>
|
||||
!loading.value && emailOk.value && passwordOk.value && nameOk.value && businessOk.value && slugOk.value
|
||||
);
|
||||
|
||||
// ============================
|
||||
// Query (plan / interval)
|
||||
@@ -148,46 +225,11 @@ watch(
|
||||
() => loadSelectedPlanRow()
|
||||
);
|
||||
|
||||
// ============================
|
||||
// subscription_intent (MODELO B: tenant)
|
||||
// ============================
|
||||
async function getActiveTenantIdForUser(userId) {
|
||||
const { data, error } = await supabase.from('tenant_members').select('tenant_id').eq('user_id', userId).eq('status', 'active').order('created_at', { ascending: false }).limit(1).maybeSingle();
|
||||
|
||||
if (error) throw error;
|
||||
return data?.tenant_id || null;
|
||||
}
|
||||
|
||||
async function createSubscriptionIntentAfterSignup(userId, preferredTenantId = null) {
|
||||
if (!hasPlanQuery.value) return;
|
||||
if (!selectedPlanRow.value) return;
|
||||
if (amountCents.value == null) return;
|
||||
|
||||
const tenantId = preferredTenantId || (await getActiveTenantIdForUser(userId));
|
||||
if (!tenantId) throw new Error('Não encontrei tenant ativo para este usuário.');
|
||||
|
||||
const payload = {
|
||||
tenant_id: tenantId,
|
||||
created_by_user_id: userId,
|
||||
|
||||
// opcional (se sua tabela ainda tem user_id)
|
||||
user_id: userId,
|
||||
|
||||
email:
|
||||
String(email.value || '')
|
||||
.trim()
|
||||
.toLowerCase() || null,
|
||||
plan_key: selectedPlanRow.value.plan_key,
|
||||
interval: intervalNormalized.value,
|
||||
amount_cents: amountCents.value,
|
||||
currency: currency.value || 'BRL',
|
||||
status: 'new',
|
||||
source: 'landing'
|
||||
};
|
||||
|
||||
const { error } = await supabase.from('subscription_intents').insert(payload);
|
||||
if (error) throw error;
|
||||
}
|
||||
// NOTA F2: provisionamento de tenant + criação de intent NÃO acontecem mais
|
||||
// aqui (com confirmação de e-mail ligada o signUp não tem sessão e tudo que
|
||||
// depende de auth.uid() quebraria em silêncio). A escolha vai no metadata do
|
||||
// signUp e é processada no 1º login pós-confirmação por auto_provision_free_tenant
|
||||
// / processar_pos_signup (ver session.js / OnboardingPage).
|
||||
|
||||
// ============================
|
||||
// Nav
|
||||
@@ -216,53 +258,40 @@ async function onSignup() {
|
||||
.trim()
|
||||
.toLowerCase();
|
||||
|
||||
// grava a escolha no raw_user_meta_data — processada no 1º login
|
||||
// (auto_provision_free_tenant / processar_pos_signup)
|
||||
const { data, error } = await supabase.auth.signUp({
|
||||
email: cleanEmail,
|
||||
password: password.value
|
||||
password: password.value,
|
||||
options: {
|
||||
data: {
|
||||
account_kind: accountKind.value,
|
||||
tenant_name: String(businessName.value || '').trim(),
|
||||
tenant_slug: String(slug.value || '').trim(),
|
||||
display_name: String(displayName.value || '').trim(),
|
||||
plan_key: planFromQuery.value || null,
|
||||
billing_interval: intervalNormalized.value || null
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
const userId = data?.user?.id || null;
|
||||
|
||||
// ✅ Modelo B: garante tenant pessoal (não aborta se falhar)
|
||||
let tenantId = null;
|
||||
if (userId) {
|
||||
try {
|
||||
const resTenant = await supabase.rpc('ensure_personal_tenant');
|
||||
tenantId = resTenant?.data || null;
|
||||
} catch (e) {
|
||||
console.warn('[Signup] ensure_personal_tenant falhou:', e);
|
||||
}
|
||||
|
||||
// ✅ intent (não quebra signup se falhar)
|
||||
try {
|
||||
await createSubscriptionIntentAfterSignup(userId, tenantId);
|
||||
} catch (e) {
|
||||
console.error('[Signup] subscription_intent failed:', e);
|
||||
toast.add({
|
||||
severity: 'warn',
|
||||
summary: 'Conta criada',
|
||||
detail: 'Não consegui registrar a intenção do plano. Você pode seguir normalmente.',
|
||||
life: 4500
|
||||
});
|
||||
}
|
||||
// ⚠️ PEGADINHA #2: se NÃO veio sessão (confirmação pendente), encerra
|
||||
// qualquer sessão local e mostra "confirme seu e-mail". Sem isso, uma
|
||||
// sessão anterior (ex: dev testando) vazaria e o push pro painel mandaria
|
||||
// o usuário pro ambiente da sessão antiga.
|
||||
if (!data?.session) {
|
||||
try { await supabase.auth.signOut({ scope: 'local' }); } catch { /* ignore */ }
|
||||
signedUpEmail.value = cleanEmail;
|
||||
signedUp.value = true;
|
||||
return;
|
||||
}
|
||||
|
||||
toast.add({
|
||||
severity: 'success',
|
||||
summary: 'Conta criada',
|
||||
detail: 'Agora vamos para os próximos passos.',
|
||||
life: 2500
|
||||
});
|
||||
|
||||
router.push({
|
||||
path: '/auth/welcome',
|
||||
query: {
|
||||
plan: planFromQuery.value || undefined,
|
||||
interval: intervalNormalized.value || undefined
|
||||
}
|
||||
});
|
||||
// confirmação desligada (auto-confirm): o guard manda pra /onboarding,
|
||||
// que provisiona o tenant gratuito.
|
||||
toast.add({ severity: 'success', summary: 'Conta criada', detail: 'Preparando seu ambiente…', life: 2500 });
|
||||
router.push('/onboarding');
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
|
||||
@@ -366,7 +395,23 @@ async function onSignup() {
|
||||
<!-- RIGHT -->
|
||||
<div class="col-span-12 lg:col-span-6 p-6 md:p-10">
|
||||
<div class="max-w-md mx-auto">
|
||||
<div class="text-2xl font-semibold">Criar conta</div>
|
||||
<!-- Tela: confirme seu e-mail (confirmação ligada) -->
|
||||
<div v-if="signedUp" class="text-center py-6">
|
||||
<div class="h-14 w-14 rounded-2xl border border-[var(--surface-border)] bg-[var(--surface-ground)] mx-auto grid place-items-center">
|
||||
<i class="pi pi-envelope text-2xl opacity-80" />
|
||||
</div>
|
||||
<div class="text-2xl font-semibold mt-4">Confirme seu e-mail</div>
|
||||
<div class="text-sm text-[var(--text-color-secondary)] mt-2 leading-relaxed">
|
||||
Enviamos um link de confirmação para <span class="font-semibold">{{ signedUpEmail }}</span>.
|
||||
Clique no link para ativar sua conta e entrar — seu ambiente é criado automaticamente no primeiro acesso.
|
||||
</div>
|
||||
<Message severity="info" class="mt-4 text-left">Não recebeu? Verifique a caixa de spam. O link expira em 1 hora.</Message>
|
||||
<Button label="Ir para o login" icon="pi pi-arrow-right" iconPos="right" class="w-full mt-4" @click="goLogin" />
|
||||
</div>
|
||||
|
||||
<!-- Form de cadastro -->
|
||||
<div v-else>
|
||||
<div class="text-2xl font-semibold">Criar conta grátis</div>
|
||||
<div class="text-sm text-[var(--text-color-secondary)] mt-1">
|
||||
Já tem conta?
|
||||
<a class="cursor-pointer font-medium" @click.prevent="goLogin">Entrar</a>
|
||||
@@ -445,6 +490,40 @@ async function onSignup() {
|
||||
|
||||
<!-- Form -->
|
||||
<div class="space-y-4">
|
||||
<!-- Tipo de conta -->
|
||||
<div>
|
||||
<label class="text-xs text-[var(--text-color-secondary)] mb-1 block">Você é…</label>
|
||||
<SelectButton v-model="accountKind" :options="kindOptions" optionLabel="label" optionValue="value" :allowEmpty="false" :disabled="loading" class="w-full" />
|
||||
</div>
|
||||
|
||||
<!-- Seu nome -->
|
||||
<div>
|
||||
<FloatLabel variant="on">
|
||||
<InputText id="signup_name" v-model="displayName" class="w-full" autocomplete="name" :disabled="loading" />
|
||||
<label for="signup_name">Seu nome</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<!-- Nome do negócio -->
|
||||
<div>
|
||||
<FloatLabel variant="on">
|
||||
<InputText id="signup_business" v-model="businessName" class="w-full" :disabled="loading" />
|
||||
<label for="signup_business">{{ accountKind === 'therapist' ? 'Nome do seu consultório' : 'Nome da clínica' }}</label>
|
||||
</FloatLabel>
|
||||
</div>
|
||||
|
||||
<!-- Slug (identificador definitivo) -->
|
||||
<div>
|
||||
<FloatLabel variant="on">
|
||||
<InputText id="signup_slug" v-model="slug" class="w-full" :disabled="loading" @input="onSlugInput" @blur="onSlugInput" />
|
||||
<label for="signup_slug">Identificador (definitivo)</label>
|
||||
</FloatLabel>
|
||||
<div v-if="slug" class="mt-1 text-xs" :class="slugOk ? 'text-emerald-600' : (slugStatus === 'checking' ? 'text-[var(--text-color-secondary)]' : 'text-orange-600')">
|
||||
{{ slugMessage }}
|
||||
</div>
|
||||
<div v-else class="mt-1 text-xs text-[var(--text-color-secondary)]">Vira o endereço do seu ambiente. Escolha com calma — não dá pra mudar depois.</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<FloatLabel variant="on">
|
||||
<InputText id="signup_email" v-model="email" class="w-full" autocomplete="email" :disabled="loading" @keydown.enter.prevent="onSignup" />
|
||||
@@ -475,14 +554,15 @@ async function onSignup() {
|
||||
<div v-if="password && !passwordOk" class="mt-2 text-xs text-orange-600">Use pelo menos 6 caracteres.</div>
|
||||
</div>
|
||||
|
||||
<Button label="CRIAR CONTA" class="w-full" severity="success" :loading="loading" :disabled="!canSubmit" icon="pi pi-arrow-right" @click="onSignup" />
|
||||
<Button label="CRIAR CONTA GRÁTIS" class="w-full" severity="success" :loading="loading" :disabled="!canSubmit" icon="pi pi-arrow-right" @click="onSignup" />
|
||||
|
||||
<div class="text-xs text-center text-[var(--text-color-secondary)]">Ao criar a conta, registramos sua intenção de assinatura. Pagamento é manual (PIX/boleto) por enquanto.</div>
|
||||
<div class="text-xs text-center text-[var(--text-color-secondary)]">Plano gratuito ativado na hora, sem cartão. Você pode fazer upgrade quando quiser.</div>
|
||||
|
||||
<div class="text-xs text-center">
|
||||
<a class="cursor-pointer text-[var(--text-color-secondary)] hover:underline" @click.prevent="goLogin"> Já tenho conta — entrar </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user