Landing y login

La pantalla de login y registro de cada empresa es configurable sin código. La configuración vive en Domain.theme.landing (JSON) y es dato, nunca código: solo claves de una lista blanca, longitudes máximas, enums, colores hex, números acotados y URLs https (o rutas relativas en los enlaces). Sin HTML, CSS libre, JavaScript, data: ni http:. Un saneador idéntico en frontend y backend (con test de paridad) la valida al guardar y al servir.

Layouts#

Las páginas de administración (/admin/login, /admin/register) fuerzan center y ocultan hero, funciones, estadísticas y testimonios. En móvil, hero.mobile es banner (hero compacto arriba) u hidden (solo la cabecera de marca).

Referencia de campos#

Textos por idioma#

Los textos de la empresa se pueden dar por idioma en i18n.es / i18n.en. Claves admitidas: heroTitle, heroSubtitle, heroBadge, imageAlt, formTitle, formSubtitle, submitLabel, registerTitle, registerSubtitle, registerSubmitLabel, footerText, registrationMessage. Prioridad de un texto: i18n[idioma] > valor base (hero.title, …) > diccionario global de BloomX. El idioma efectivo es landing.locale si la empresa lo fuerza; si no, el del visitante (cookie bloomx-lang → Accept-Language → español).

Registro#

• registration.enabled: false oculta el enlace "crear cuenta" del login y muestra en /register un aviso (registration.message). Es solo interfaz: el servidor sigue aceptando POST /api/register con la clave correcta.
• registration.enabled: false hace que el servidor (/api/register) responda 403 (el formulario también se oculta). registration.requireKey: false hace que el servidor no pida la clave de registro, y true (por defecto) exige REGISTRATION_KEY; en producción, si falta o vale dev-secret, el registro con clave responde 403. La política la aplica el servidor aunque el formulario se manipule.
• form.showRegisterLink: false oculta el enlace de registro del login. showForgotLink, showGoogle y showRememberMe controlan esos elementos del formulario.
• El acceso con Google solo funciona si configuraste GOOGLE_CLIENT_ID/GOOGLE_CLIENT_SECRET y NEXTAUTH_URL (Variables).

Ejemplos JSON copiables#

Cada ejemplo va dentro de theme (el mismo objeto de Temas empresariales). Las URL de imágenes deben ser https y servidas por ti.

{
  "landing": {
    "layout": "split-right",
    "hero": {
      "badge": "Correo corporativo",
      "title": "Tu correo, bajo tu marca",
      "subtitle": "Seguro, rápido y con tus reglas.",
      "gradient": { "from": "#0b5fff", "to": "#1e1b4b", "angle": 135 },
      "pattern": "dots",
      "mobile": "banner"
    },
    "logo": { "light": "https://cdn.mi-empresa.com/logo.svg", "dark": "https://cdn.mi-empresa.com/logo-dark.svg", "height": 32, "position": "panel", "showName": true },
    "features": [
      { "icon": "shield", "title": "Seguridad de nivel empresarial", "text": "MFA y cifrado en reposo." },
      { "icon": "zap", "title": "Rápido", "text": "Búsqueda instantánea y atajos de teclado." },
      { "icon": "calendar", "title": "Calendario integrado" }
    ],
    "footer": { "text": "© Mi Empresa", "links": [ { "label": "Soporte", "url": "https://mi-empresa.com/soporte" } ], "showPoweredBy": false }
  }
}

{
  "landing": {
    "layout": "minimal",
    "form": { "showRegisterLink": false, "showGoogle": false, "showRememberMe": true },
    "registration": { "enabled": false, "message": "El alta es solo por invitación." },
    "legal": { "termsUrl": "https://mi-empresa.com/terminos", "privacyUrl": "https://mi-empresa.com/privacidad" }
  }
}

{
  "landing": {
    "layout": "fullscreen-bg",
    "locale": "es",
    "panelWidth": 440,
    "background": { "type": "image", "imageUrl": "https://cdn.mi-empresa.com/fondo.jpg", "overlay": 0.55 },
    "hero": { "title": "Bienvenido", "subtitle": "Accede a tu correo corporativo", "imageAlt": "Oficina" },
    "form": { "title": "Inicia sesión", "submitLabel": "Entrar", "alignment": "left", "showForgotLink": true },
    "testimonials": {
      "enabled": true,
      "style": "carousel",
      "items": [
        { "quote": "Migramos en un fin de semana.", "author": "Ana Ruiz", "role": "CTO", "avatarUrl": "https://cdn.mi-empresa.com/ana.jpg" },
        { "quote": "Por fin un correo que respeta nuestra marca.", "author": "Luis Peña", "role": "Operaciones" }
      ]
    },
    "stats": [ { "value": "99.9%", "label": "Disponibilidad" }, { "value": "24/7", "label": "Soporte" } ],
    "docs": { "visible": true, "landingLink": true, "showInFooter": true },
    "i18n": {
      "es": { "heroTitle": "Bienvenido", "submitLabel": "Entrar" },
      "en": { "heroTitle": "Welcome", "heroSubtitle": "Sign in to your company mail", "submitLabel": "Sign in", "formTitle": "Sign in" }
    }
  }
}

# Guardar (sesión de manager). El cuerpo reemplaza TODO el tema: incluye también palette/colores si los tienes.
curl -sS -X PUT "$BACKEND/api/admin/domain" \
  -H 'content-type: application/json' -b 'auth_session=<cookie>' \
  -d @tema-completo.json     # {"theme": { ...colores..., "landing": { ... } }}

Seguridad y límites#

• Todo texto pasa por una limpieza (sin HTML ni caracteres de control o de dirección bidi); el texto que exceda el máximo se recorta.
• Las imágenes solo pueden ser https y se pintan con <img referrerPolicy="no-referrer">; nunca con url(...) en CSS, para evitar inyección por URL. La CSP ya permite https: en img-src.
• Un elemento sin campo obligatorio (testimonio sin quote, función sin title, enlace sin label o url) se descarta.
• Límites: 8 testimonios, 6 funciones, 4 estadísticas, 6 enlaces de pie, 32 KB en total. Más elementos se recortan.
• El contraste del texto sobre imagen o degradado se calcula en el render para cumplir AA (sube el overlay mínimo si hace falta).