AlexeerCT
a5b378ccff
- Introduced utility functions for managing access tokens in cookies, including setting, getting, and clearing tokens. - Updated various components and server routes to utilize the new access token functions for better consistency and maintainability. - Removed redundant cookie handling code across the application, streamlining the authentication process.
384 lines
14 KiB
Svelte
384 lines
14 KiB
Svelte
<script lang="ts">
|
|
import * as Card from "$lib/components/ui/card/index";
|
|
import {
|
|
FieldGroup,
|
|
Field,
|
|
FieldLabel,
|
|
FieldDescription,
|
|
} from "$lib/components/ui/field/index";
|
|
import { Input } from "$lib/components/ui/input/index";
|
|
import { Button } from "$lib/components/ui/button/index";
|
|
import { cn } from "$lib/utils";
|
|
import faviconUrl from '$lib/assets/favicon.svg';
|
|
import type { HTMLAttributes } from "svelte/elements";
|
|
import { page } from '$app/state';
|
|
import { enhance } from '$app/forms';
|
|
import { loginWithProvider } from '$lib/sso';
|
|
import { onMount, tick } from 'svelte';
|
|
import { clearAccessTokenOnDocument } from '$lib/access-token-cookie-browser';
|
|
|
|
let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
|
|
|
|
const id = $props.id();
|
|
|
|
let username = $state('');
|
|
let password = $state('');
|
|
let tenantSlug = $state('');
|
|
let loading = $state(false);
|
|
// step 1 = credenciales, step 2 = selección de organización
|
|
let step = $state<1 | 2>(1);
|
|
let readyToSubmit = $state(false);
|
|
let formEl: HTMLFormElement | undefined = $state();
|
|
|
|
// Descubrimiento de tenants
|
|
type TenantInfo = { id: number; name: string; slug: string };
|
|
let tenants = $state<TenantInfo[]>([]);
|
|
let discoveryError = $state('');
|
|
|
|
const error = $derived(discoveryError || page.form?.error || '');
|
|
|
|
// Limpiar todo el localStorage y cookies al montar el componente de login
|
|
onMount(() => {
|
|
clearAllData();
|
|
// Si viene ?tenant= en la URL (ej: después del registro), pre-seleccionar
|
|
const urlTenant = new URL(window.location.href).searchParams.get('tenant');
|
|
if (urlTenant) {
|
|
tenantSlug = urlTenant;
|
|
}
|
|
});
|
|
|
|
// Función para limpiar cookies del cliente
|
|
function clearClientCookies() {
|
|
if (typeof document !== 'undefined') {
|
|
const isSecure = window.location.protocol === 'https:';
|
|
const secureFlag = isSecure ? '; Secure' : '';
|
|
clearAccessTokenOnDocument();
|
|
document.cookie = `refresh_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; SameSite=Lax${secureFlag}`;
|
|
document.cookie = `active_company_id=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; SameSite=Lax${secureFlag}`;
|
|
}
|
|
}
|
|
|
|
function clearAllData() {
|
|
if (typeof localStorage !== 'undefined') {
|
|
localStorage.removeItem('access_token');
|
|
localStorage.removeItem('refresh_token');
|
|
localStorage.removeItem('activeCompanyId');
|
|
}
|
|
clearClientCookies();
|
|
}
|
|
|
|
async function fetchTenants(): Promise<TenantInfo[]> {
|
|
discoveryError = '';
|
|
try {
|
|
const apiBase = (import.meta.env.VITE_API_URL || '').replace(/\/+$/, '');
|
|
const res = await fetch(`${apiBase}/v1/auth/login`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password }),
|
|
});
|
|
const data = await res.json().catch(() => ({}));
|
|
if (res.ok) {
|
|
// Múltiples tenants: { status: "choose_tenant", tenants: [...] }
|
|
if (data.tenants) return data.tenants;
|
|
// Un solo tenant: Hub devuelve token directo con data.tenant
|
|
if (data.access_token && data.tenant) return [data.tenant];
|
|
} else {
|
|
discoveryError = data.detail || 'Error de autenticación';
|
|
}
|
|
} catch {
|
|
discoveryError = 'Error de conexión con el servidor';
|
|
}
|
|
return [];
|
|
}
|
|
|
|
// Llama al backend real desde el paso 2
|
|
function confirmTenant() {
|
|
if (!tenantSlug) return;
|
|
readyToSubmit = true;
|
|
formEl?.requestSubmit();
|
|
}
|
|
|
|
function goBack() {
|
|
step = 1;
|
|
tenantSlug = '';
|
|
tenants = [];
|
|
readyToSubmit = false;
|
|
}
|
|
|
|
function handleMicrosoftLogin() {
|
|
clearAllData();
|
|
if (tenantSlug) localStorage.setItem('pending_tenant_slug', tenantSlug);
|
|
loginWithProvider('microsoft');
|
|
}
|
|
|
|
function handleGoogleLogin() {
|
|
clearAllData();
|
|
if (tenantSlug) localStorage.setItem('pending_tenant_slug', tenantSlug);
|
|
loginWithProvider('google');
|
|
}
|
|
</script>
|
|
|
|
<div class={cn("flex flex-col gap-6", className)} {...restProps}>
|
|
<Card.Root class="overflow-hidden p-0 shadow-2xl border-0">
|
|
<Card.Content class="grid p-0 md:grid-cols-2">
|
|
<!-- Formulario -->
|
|
<form
|
|
bind:this={formEl}
|
|
class="p-8 md:p-10 flex flex-col justify-center"
|
|
method="POST"
|
|
use:enhance={async ({ cancel }) => {
|
|
// Interceptar solo en el paso 1 antes de hacer el submit real
|
|
if (!readyToSubmit) {
|
|
cancel();
|
|
loading = true;
|
|
tenants = await fetchTenants();
|
|
loading = false;
|
|
if (tenants.length === 1) {
|
|
// 1 sola org: login directo
|
|
tenantSlug = tenants[0].slug;
|
|
readyToSubmit = true;
|
|
await tick(); // esperar a que el DOM refleje tenantSlug antes de enviar
|
|
formEl?.requestSubmit();
|
|
} else if (tenants.length > 1) {
|
|
// Varias orgs: mostrar selector
|
|
step = 2;
|
|
} else if (discoveryError) {
|
|
// Error claro del Hub (sin licencia, credenciales inválidas, etc.)
|
|
// No hacer submit — el error ya se muestra en discoveryError
|
|
} else {
|
|
// 0 orgs sin error: enviar igual, el backend rechazará
|
|
readyToSubmit = true;
|
|
await tick();
|
|
formEl?.requestSubmit();
|
|
}
|
|
return;
|
|
}
|
|
loading = true;
|
|
return async ({ update, result }) => {
|
|
await update({ reset: false });
|
|
loading = false;
|
|
readyToSubmit = false;
|
|
if (result.type === 'failure') {
|
|
clearClientCookies();
|
|
step = 1;
|
|
}
|
|
};
|
|
}}
|
|
>
|
|
<FieldGroup>
|
|
<!-- Logo / Branding -->
|
|
<div class="flex flex-col items-center gap-3 text-center mb-2">
|
|
<img src={faviconUrl} alt="Anexo 76" class="w-14 h-14 rounded-2xl shadow-lg shadow-blue-200 dark:shadow-blue-900/50" />
|
|
<div>
|
|
<h1 class="text-2xl font-bold tracking-tight text-slate-900 dark:text-slate-100">Anexo 76</h1>
|
|
<p class="text-muted-foreground text-sm mt-0.5">
|
|
Sistema de Cumplimiento Fiscal y Aduanal
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{#if error}
|
|
<div class="flex items-start gap-3 rounded-xl bg-red-50 dark:bg-red-950/40 border border-red-200 dark:border-red-800 p-4 text-sm text-red-700 dark:text-red-400">
|
|
<svg class="w-4 h-4 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
|
|
</svg>
|
|
{error}
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Campos ocultos siempre presentes para el submit en paso 2 -->
|
|
<input type="hidden" name="tenant_slug" value={tenantSlug} />
|
|
{#if step === 2}
|
|
<input type="hidden" name="username" value={username} />
|
|
<input type="hidden" name="password" value={password} />
|
|
{/if}
|
|
|
|
{#if step === 1}
|
|
<!-- PASO 1: Credenciales -->
|
|
<Field>
|
|
<FieldLabel for="username-{id}" class="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Usuario</FieldLabel>
|
|
<Input
|
|
id="username-{id}"
|
|
name="username"
|
|
type="text"
|
|
placeholder="usuario@empresa.com"
|
|
bind:value={username}
|
|
required
|
|
disabled={loading}
|
|
class="h-11"
|
|
/>
|
|
</Field>
|
|
|
|
<Field>
|
|
<div class="flex items-center justify-between">
|
|
<FieldLabel for="password-{id}" class="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Contraseña</FieldLabel>
|
|
<a href="##" class="text-xs text-blue-600 hover:text-blue-700 dark:text-blue-400 font-medium hover:underline underline-offset-2">
|
|
¿Olvidaste tu contraseña?
|
|
</a>
|
|
</div>
|
|
<Input
|
|
id="password-{id}"
|
|
name="password"
|
|
type="password"
|
|
bind:value={password}
|
|
required
|
|
disabled={loading}
|
|
class="h-11"
|
|
/>
|
|
</Field>
|
|
|
|
<Field>
|
|
<Button
|
|
type="submit"
|
|
disabled={loading}
|
|
class="h-11 w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 font-semibold shadow-md shadow-blue-200 dark:shadow-blue-900/40 transition-all duration-200"
|
|
>
|
|
{#if loading}
|
|
<svg class="animate-spin w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
|
|
</svg>
|
|
Verificando...
|
|
{:else}
|
|
Iniciar sesión
|
|
{/if}
|
|
</Button>
|
|
</Field>
|
|
|
|
<div class="relative flex items-center gap-3 my-1">
|
|
<div class="flex-1 h-px bg-border"></div>
|
|
<span class="text-xs text-muted-foreground font-medium px-1">o continúa con</span>
|
|
<div class="flex-1 h-px bg-border"></div>
|
|
</div>
|
|
|
|
<Field class="grid grid-cols-2 gap-3">
|
|
<Button
|
|
variant="outline"
|
|
type="button"
|
|
onclick={handleGoogleLogin}
|
|
disabled={loading}
|
|
class="h-11 border hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
|
|
>
|
|
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" fill="currentColor"/>
|
|
</svg>
|
|
<span class="sr-only">Google</span>
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
type="button"
|
|
onclick={handleMicrosoftLogin}
|
|
disabled={loading}
|
|
class="h-11 border hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
|
|
>
|
|
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path d="M11.4 24H0V12.6h11.4V24zM24 24H12.6V12.6H24V24zM11.4 11.4H0V0h11.4v11.4zm12.6 0H12.6V0H24v11.4z" fill="currentColor"/>
|
|
</svg>
|
|
<span class="sr-only">Microsoft</span>
|
|
</Button>
|
|
</Field>
|
|
|
|
<p class="text-center text-sm text-muted-foreground">
|
|
¿No tienes cuenta?{' '}
|
|
<a href="/register" class="font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 hover:underline underline-offset-2">
|
|
Regístrate
|
|
</a>
|
|
</p>
|
|
{:else}
|
|
<!-- PASO 2: Selección de organización -->
|
|
<div class="flex flex-col gap-1 text-center">
|
|
<p class="text-sm font-medium text-slate-700 dark:text-slate-300">Selecciona tu organización</p>
|
|
<p class="text-xs text-muted-foreground">Tu cuenta tiene acceso a varias organizaciones</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
{#each tenants as t}
|
|
<button
|
|
type="button"
|
|
onclick={() => (tenantSlug = t.slug)}
|
|
class="flex items-center gap-3 rounded-xl border-2 px-4 py-3 text-left transition-all duration-150 hover:border-blue-400 hover:bg-blue-50 dark:hover:bg-blue-950/40
|
|
{tenantSlug === t.slug
|
|
? 'border-blue-500 bg-blue-50 dark:bg-blue-950/40'
|
|
: 'border-input bg-background'}"
|
|
>
|
|
<span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 font-bold text-sm">
|
|
{t.name.charAt(0).toUpperCase()}
|
|
</span>
|
|
<span class="flex-1 text-sm font-medium text-slate-800 dark:text-slate-200">{t.name}</span>
|
|
{#if tenantSlug === t.slug}
|
|
<svg class="w-4 h-4 text-blue-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
{/if}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
|
|
<Field>
|
|
<Button
|
|
type="button"
|
|
onclick={confirmTenant}
|
|
disabled={!tenantSlug || loading}
|
|
class="h-11 w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 font-semibold shadow-md shadow-blue-200 dark:shadow-blue-900/40 transition-all duration-200"
|
|
>
|
|
{#if loading}
|
|
<svg class="animate-spin w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
|
|
</svg>
|
|
Iniciando sesión...
|
|
{:else}
|
|
Continuar
|
|
{/if}
|
|
</Button>
|
|
</Field>
|
|
|
|
<button
|
|
type="button"
|
|
onclick={goBack}
|
|
class="flex items-center justify-center gap-1.5 text-xs text-muted-foreground hover:text-slate-700 dark:hover:text-slate-300 transition-colors mx-auto"
|
|
>
|
|
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
|
|
</svg>
|
|
Volver al inicio de sesión
|
|
</button>
|
|
{/if}
|
|
</FieldGroup>
|
|
</form>
|
|
|
|
<!-- Panel imagen -->
|
|
<div class="relative hidden md:block overflow-hidden">
|
|
<!-- Fotografía de fondo -->
|
|
<img
|
|
src="/login-bg.jpg"
|
|
alt=""
|
|
class="absolute inset-0 w-full h-full object-cover object-center"
|
|
/>
|
|
<!-- Overlay degradado -->
|
|
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/90 via-slate-900/40 to-slate-900/10"></div>
|
|
|
|
<!-- Contenido sobre la imagen -->
|
|
<div class="relative z-10 h-full flex flex-col justify-end p-10">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<img src={faviconUrl} alt="" class="w-9 h-9 rounded-xl" />
|
|
<span class="text-white font-bold text-lg tracking-tight">Anexo 76</span>
|
|
</div>
|
|
<blockquote class="space-y-2">
|
|
<p class="text-white text-xl font-semibold leading-snug">
|
|
"Cumplimiento fiscal simplificado para empresas que operan con el SAT."
|
|
</p>
|
|
<footer class="text-slate-300 text-sm">Sistema de Cumplimiento Fiscal y Aduanal</footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</Card.Content>
|
|
</Card.Root>
|
|
<p class="px-6 text-center text-xs text-muted-foreground">
|
|
Al continuar, aceptas nuestros
|
|
<a href="##" class="underline hover:text-blue-600 underline-offset-2">Términos de Servicio</a>
|
|
y
|
|
<a href="##" class="underline hover:text-blue-600 underline-offset-2">Política de Privacidad</a>.
|
|
</p>
|
|
</div>
|