Componentes · login v3
Login card v3
PÁGINA HISTÓRICA · se conserva a propósito
Login v3. La tarjeta de entrada ya quedó elegida.
Tomo la opción B que elegiste y le pongo el namebrand en vez del mark solo, agrego Microsoft
como fuente real y convierto "usuario o correo" en un tercer botón. Cada variante lleva código
L01, L02… Dime los números y con eso armo el cambio.
Lo que decidiste hoy
Registrado para que no se pierda. Nada de esto está aplicado todavía.
Cards
A y B, las dos
"Fiel a www" y "brutalista spec sheet" conviven. Quedan como dos variantes del mismo componente, elegibles por contexto: A para catálogo y páginas de venta, B para fichas de dato y documentación.
Login card
Opción B, con namebrand
Textura de anillos de fondo, pero el mark solo de 64px se reemplaza por el lockup completo (marca más namebrand), consistente con la regla nueva.
Login info
Chip con nombre y foto
Con foto cuando la hay. Sin foto, iniciales sobre el color de acento de la marca del sitio.
Acceso por correo
Otro botón más
Usuario y correo dejan de ser el formulario por defecto y pasan a ser una tercera opción al mismo nivel que Google y Microsoft.
Card elegida
L01, en las tres marcas
Tres botones al mismo nivel con el correo al final. L05 y L06 son la misma card con marca CDS y con la de la Compañía Chilena de Inteligencia de Datos. L02 y L03 quedan descartadas.
Textura del fondo
Anillos, en las tres marcas
Los cuadrados concéntricos que había propuesto para la Compañía Chilena de Inteligencia de Datos quedan fuera. La textura es del grupo y no cambia por marca; lo que cambia es el lockup y el acento.
Registro
Dentro del mismo flow
Entrar y crear cuenta conviven en el paso de correo (L11), en vez de vivir en flows separados unidos por un enlace al pie.
Chip de sesión
L07, L08 y L10
Foto con nombre, iniciales cuando no hay foto, y el menú desplegado con nombre completo y correo. Falta decidir L09, el degradado a móvil.
Antes de elegir: hay un error en el login de producción
Salió al verificar qué proveedores tiene cis-auth hoy. No lo he tocado.
El botón de Microsoft muestra el logo de Google
La hoja de estilo de Authentik (custom.css v1.8, del 5 de mayo) fue escrita cuando Google era
la única fuente, y fuerza el icono de todos los botones de proveedor al archivo de Google:
li.pf-c-login__main-footer-links-item img,
.pf-c-button__icon img,
ul.pf-c-login__main-footer-links img {
content: url('/media/public/google-color-icon.svg') !important;
}Como la regla aplica a cualquier img dentro de la lista de fuentes, la entrada de Microsoft
que ahora sirve el flow se dibuja con la G de colores. Lo mismo pasa con el estilo del botón: toda la lista
hereda la "píldora Google" (blanca, borde #dadce0, tipografía Roboto), así que Microsoft no
se ve como Microsoft.
Un segundo punto del mismo archivo: la línea 144 importa por CDN
fonts.googleapis.com/css2 (Plex más Roboto), es decir Google Fonts dentro del
login. Eso contradice la regla de todo self-hosted de CANON y es la deuda que CONTRACTS ya tenía anotada
para auth como "fork declarado".
Alcance de la verificación: confirmé por API que el flow ofrece hoy las dos fuentes (Google y Microsoft), y las reglas de CSS de arriba están citadas textual del archivo servido en vivo. No lo abrí en un navegador, porque acá no hay uno instalado. Si quieres la captura antes de decidir, la consigo.
Login card · el orden de los tres botones
Todas usan la opción B que elegiste: fondo con textura de anillos y lockup completo arriba. Lo que cambia entre L01 y L04 es cómo se ordenan las tres puertas de entrada. Los logos de Google y Microsoft son las marcas de cada proveedor dibujadas en línea con sus colores oficiales, self-hosted, sin CDN.
Entrar al grupo
para continuar a docs.circulodesantiago.cl
Continuar con Google Continuar con Microsoft Continuar con correoEntrar al grupo
para continuar a docs.circulodesantiago.cl
Continuar con Google Continuar con MicrosoftEntrar al grupo
para continuar a docs.circulodesantiago.cl
Continuar con correoEntrar con tu correo
para continuar a docs.circulodesantiago.cl
Entrar
para continuar a protocolo.circulodesantiago.cl
Continuar con Google Continuar con Microsoft Continuar con correoEntrar
para continuar a datos.cochid.cl
Continuar con Google Continuar con Microsoft Continuar con correoEntrar con tu correo
para continuar a docs.circulodesantiago.cl
Login info · el chip del navbar
Elegiste chip con nombre y con foto cuando la haya. Falta decidir el caso sin foto y el nivel de
detalle. Authentik expone el avatar por gravatar o iniciales según AUTHENTIK_AVATARS,
y el nombre llega al sitio en la cabecera X-authentik-username que Caddy ya copia.
Qué cuesta cada cosa
Para que la elección venga con el precio puesto. Ninguna es un cambio de hoja de estilo a secas.
| Cambio | Dónde se toca | Tipo |
|---|---|---|
| Icono correcto de Microsoft | custom.css: acotar la regla content: url(...) por fuente en vez de aplicarla a toda la lista | CSS, reversible |
| Botón de Microsoft con su estilo | custom.css: la "píldora Google" deja de ser el estilo de todos los li | CSS, reversible |
| Quitar Google Fonts del login | custom.css línea 144: reemplazar el @import por Plex self-hosted | CSS, cierra deuda de canon |
| Lockup con namebrand | custom.css más /media/public/: el logo del flow pasa de wordmark a lockup completo | CSS más recurso |
| Correo como tercer botón | Flow de Authentik: la etapa de identificación es la que pide usuario y correo. Hay que separarla en dos pasos para que el formulario aparezca recién al pulsar | Cambio de flow, no de estilo |
| Entrar y crear cuenta en el mismo paso | Flow de Authentik: hoy autenticación y enrolamiento son dos flows distintos unidos por el enlace "Regístrate". Unificarlos toca ambos y el orden de sus etapas | El cambio de mayor alcance · probar en un flow copia antes |
| Textura de anillos como fondo | custom.css más --ak-flow-background con un SVG en data-URI, en vez de la foto hero actual | CSS más recurso |
| Chip con foto | AUTHENTIK_AVATARS más el chip en el chrome v7 (hoy el chrome solo tiene estado anónimo con botón "Entrar") | Config más componente nuevo |
Los logos de Google y de Microsoft son las marcas de cada proveedor dibujadas en línea con
sus colores oficiales (Microsoft: #F25022, #7FBA00,
#00A4EF, #FFB900). No son marcas del grupo ni logos inventados.
Nada aplicado. Producción sigue como está, incluido el error del icono.