ajustes

front-end/app/pages/login.vue

@@ -1,23 +1,50 @@
 <!-- front-end/app/pages/login.vue -->
 <script setup lang="ts">
+import type { TenantOption } from '~/composables/useAuth'
+
 definePageMeta({ layout: 'auth' })
 
-const { login } = useAuth()
+const { login, selectTenant } = useAuth()
 const email = ref('')
 const password = ref('')
-const slug = 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, slug.value)
+  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 {
-    error.value = result.error ?? 'Erro ao autenticar.'
+    tenantError.value = result.error ?? 'Erro ao selecionar empresa.'
   }
 }
 </script>
@@ -52,17 +79,6 @@ async function handleSubmit() {
         />
       </UFormField>
 
-      <UFormField label="Organização" class="field">
-        <UInput
-          v-model="slug"
-          type="text"
-          placeholder="minha-empresa"
-          size="md"
-          class="w-full"
-          required
-        />
-      </UFormField>
-
       <div class="forgot">
         <a href="#">Esqueceu a senha?</a>
       </div>
@@ -84,6 +100,29 @@ async function handleSubmit() {
       </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>
@@ -108,4 +147,30 @@ async function handleSubmit() {
 }
 .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>