lic/front-end/app/pages/login.vue

<!-- front-end/app/pages/login.vue -->
<script setup lang="ts">
import type { TenantOption } from '~/composables/useAuth'

definePageMeta({ layout: 'auth' })

const { login, selectTenant } = useAuth()
const email = ref('')
const password = ref('')
const error = ref('')
const loading = ref(false)

// Estado do modal multi-tenant
const tenants = ref<TenantOption[]>([])
const pendingEmail = ref('')
const pendingPassword = ref('')
const showTenantModal = ref(false)
const tenantError = ref('')
const tenantLoading = ref(false)

async function handleSubmit() {
  error.value = ''
  loading.value = true
  const result = await login(email.value, password.value)
  loading.value = false

  if ('success' in result && result.success) {
    navigateTo('/')
  } else if ('needsTenantSelect' in result) {
    tenants.value = result.tenants
    pendingEmail.value = result.email
    pendingPassword.value = result.password
    showTenantModal.value = true
  } else if ('error' in result) {
    error.value = result.error ?? 'Erro ao autenticar.'
  }
}

async function handleSelectTenant(tenantId: string) {
  tenantError.value = ''
  tenantLoading.value = true
  const result = await selectTenant(pendingEmail.value, pendingPassword.value, tenantId)
  tenantLoading.value = false
  if (result.success) {
    navigateTo('/')
  } else {
    tenantError.value = result.error ?? 'Erro ao selecionar empresa.'
  }
}
</script>

<template>
  <div class="login-card">
    <div class="login-header">
      <h1>Bem-vindo de volta</h1>
      <p>Informe suas credenciais para acessar o sistema</p>
    </div>

    <form @submit.prevent="handleSubmit">
      <UFormField label="E-mail" class="field">
        <UInput
          v-model="email"
          type="email"
          placeholder="usuario@orgao.gov.br"
          size="md"
          class="w-full"
          required
        />
      </UFormField>

      <UFormField label="Senha" class="field">
        <UInput
          v-model="password"
          type="password"
          placeholder="••••••••"
          size="md"
          class="w-full"
          required
        />
      </UFormField>

      <div class="forgot">
        <a href="#">Esqueceu a senha?</a>
      </div>

      <p v-if="error" class="error-msg">{{ error }}</p>

      <UButton
        type="submit"
        block
        size="md"
        :loading="loading"
        class="btn-login"
      >
        Entrar
      </UButton>

      <p class="register-link">
        Não tem conta? <NuxtLink to="/register">Criar conta</NuxtLink>
      </p>
    </form>
  </div>

  <!-- Modal seleção de empresa -->
  <div v-if="showTenantModal" class="modal-overlay">
    <div class="modal-card">
      <h2>Selecione a empresa</h2>
      <p>Seu acesso está vinculado a mais de uma empresa.</p>

      <div class="tenant-list">
        <button
          v-for="t in tenants"
          :key="t.id"
          class="tenant-btn"
          :disabled="tenantLoading"
          @click="handleSelectTenant(t.id)"
        >
          <span class="tenant-name">{{ t.name }}</span>
          <span class="tenant-slug">{{ t.slug }}</span>
        </button>
      </div>

      <p v-if="tenantError" class="error-msg">{{ tenantError }}</p>
    </div>
  </div>
</template>

<style scoped>
.login-card {
  background: white;
  border-radius: 20px;
  padding: 48px 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}
.login-header { margin-bottom: 32px; }
.login-header h1 { font-size: 24px; font-weight: 700; color: #0f172a; letter-spacing: -0.5px; }
.login-header p { font-size: 14px; color: #64748b; margin-top: 4px; }
.field { margin-bottom: 18px; }
.forgot { text-align: right; margin-top: -10px; margin-bottom: 20px; }
.forgot a { font-size: 12px; color: #667eea; text-decoration: none; font-weight: 500; }
.error-msg { color: #dc2626; font-size: 13px; margin-bottom: 12px; }
.btn-login {
  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; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal-card {
  background: white; border-radius: 16px; padding: 32px;
  width: 100%; max-width: 380px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.modal-card h2 { font-size: 18px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.modal-card p { font-size: 13px; color: #64748b; margin-bottom: 20px; }
.tenant-list { display: flex; flex-direction: column; gap: 10px; }
.tenant-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 14px 16px; border-radius: 10px;
  border: 1.5px solid #e2e8f0; background: white;
  cursor: pointer; transition: all 0.15s; text-align: left;
}
.tenant-btn:hover { border-color: #667eea; background: #f0f3ff; }
.tenant-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.tenant-name { font-size: 14px; font-weight: 600; color: #0f172a; }
.tenant-slug { font-size: 12px; color: #94a3b8; margin-top: 2px; }
</style>