@hotosm/hanko-auth 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotosm/hanko-auth",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Web component for HOTOSM SSO authentication with Hanko and OSM integration",
   "type": "module",
   "main": "dist/hanko-auth.umd.js",

package/src/hanko-auth.styles.ts

@@ -6,10 +6,14 @@ export const styles = css`
     font-family: var(--font-family, var(--hot-font-sans));
   }
 
+  hanko-auth::part(headline1) {
+    text-align: center;
+  }
+
   .container {
     max-width: 400px;
     margin: 0 auto;
-    padding: var(--hot-spacing-large);
+    padding: var(--hot-spacing-x-small) var(--hot-spacing-large);
   }
 
   .loading {
@@ -32,13 +36,12 @@ export const styles = css`
   }
 
   .spinner {
-    width: clamp(40px, 10%, 60px);
-    height: clamp(40px, 10%, 60px);
-    border: 4px solid var(--hot-color-gray-50);
+    width: 25px;
+    height: 25px;
+    border: 4px solid var(--hot-color-red-50);
     border-top: 4px solid var(--hot-color-red-600);
     border-radius: 50%;
     animation: spin 1s linear infinite;
-    margin: 0 auto;
   }
   /* Container that mimics the avatar/dropdown-trigger dimensions */
   .loading-placeholder {
@@ -521,5 +524,6 @@ export const styles = css`
   /* Style Hanko's internal link button (e.g. "Create account") */
   hanko-auth::part(link) {
     font-weight: bold;
+    text-decoration: underline;
   }
 `;

package/src/hanko-auth.ts

@@ -6,10 +6,7 @@ import { keyed } from "lit/directives/keyed.js";
 import { register } from "@teamhanko/hanko-elements";
 import { styles } from "./hanko-auth.styles";
 // hanko ui translations
-import { en } from "@teamhanko/hanko-elements/i18n/en";
-import { es } from "./hanko-i18n-es";
-import { fr } from "./hanko-i18n-fr";
-import { pt } from "./hanko-i18n-pt";
+import { getTranslations } from "./hanko-translations";
 // custom component translations
 import { translations } from "./translations";
 
@@ -36,7 +33,7 @@ async function ensureHankoRegistered(hankoUrl: string): Promise<void> {
       await register(hankoUrl, {
         enablePasskeys: false,
         hidePasskeyButtonOnLogin: true,
-        translations: { en, es, fr, pt },
+        translations: getTranslations(),
         fallbackLanguage: "en",
       });
       hankoRegistered = true;
@@ -198,6 +195,28 @@ export class HankoAuth extends LitElement {
   private _lastSessionId: string | null = null;
   private _hanko: any = null;
   private _isPrimary = false; // Is this the primary instance?
+  private _hankoObserver: MutationObserver | null = null;
+
+  // Hanko signup headline text across all supported languages (used for subtitle injection)
+  private _signUpHeadlines = new Set([
+    "Create an account", // en (our override)
+    "Crear cuenta",      // es
+    "Créer un compte",   // fr
+    "Criar conta",       // pt
+  ]);
+
+  // Hanko initial login (email entry) headline text across all supported languages
+  // Covers both loginEmail and loginEmailNoSignup variants
+  private _loginHeadlines = new Set([
+    "Sign in or create account", // en loginEmail
+    "Sign in",                   // en loginEmailNoSignup
+    "Iniciar sesión o crear cuenta", // es loginEmail
+    "Iniciar sesión",                // es loginEmailNoSignup
+    "Se connecter ou s'inscrire",    // fr loginEmail
+    "Se connecter",                  // fr loginEmailNoSignup
+    "Entrar ou criar conta",         // pt loginEmail
+    "Entrar",                        // pt loginEmailNoSignup
+  ]);
 
   constructor() {
     super();
@@ -902,33 +921,37 @@ export class HankoAuth extends LitElement {
 
   updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
-    // Re-attach event listeners when user becomes null (after logout)
-    // because a new <hanko-auth> element is created
     if (
-      changedProperties.has("user") &&
-      this.user === null &&
-      this.showProfile
+      (changedProperties.has("user") && this.user === null && this.showProfile) ||
+      changedProperties.has("lang")
     ) {
-      this.log("User logged out, re-attaching event listeners...");
       this._currentHankoAuthElement = null;
       this.setupEventListeners();
     }
   }
 
   private setupEventListeners() {
-    // Use updateComplete to ensure DOM is ready
     this.updateComplete.then(() => {
       const hankoAuth = this.shadowRoot?.querySelector("hanko-auth");
 
-      // Skip if already attached to the same element
       if (hankoAuth && hankoAuth === this._currentHankoAuthElement) {
-        this.log("Event listeners already attached to this element");
         return;
       }
-
+      // no exports available for adding css, so injecting it
       if (hankoAuth) {
         this._currentHankoAuthElement = hankoAuth;
-        this.log("Attaching event listeners to hanko-auth element");
+        const hankoShadow = (hankoAuth as HTMLElement & { shadowRoot: ShadowRoot | null }).shadowRoot;
+        if (hankoShadow && !hankoShadow.querySelector("#hot-hanko-overrides")) {
+          const style = document.createElement("style");
+          style.id = "hot-hanko-overrides";
+          style.textContent = `
+            .hanko_lastUsed { margin-left: 8px; }
+            .hanko_form .hanko_li { min-width: 100%; }
+          `;
+          hankoShadow.appendChild(style);
+        }
+
+        this._setupSignUpSubtitleObserver(hankoAuth);
 
         hankoAuth.addEventListener("onSessionCreated", (e: any) => {
           this.log(`Hanko event: onSessionCreated`, e.detail);
@@ -949,6 +972,62 @@ export class HankoAuth extends LitElement {
       }
     });
   }
+// subtitle handling
+  private _setupSignUpSubtitleObserver(hankoAuth: Element) {
+    const injectSubtitle = () => {
+      const hankoShadow = (hankoAuth as HTMLElement & { shadowRoot: ShadowRoot | null }).shadowRoot;
+      if (!hankoShadow) return;
+
+      const h1 = hankoShadow.querySelector<HTMLElement>("h1[part='headline1']");
+      const headlineText = h1?.textContent?.trim() ?? "";
+
+      const existing = hankoShadow.querySelector(".hot-subtitle");
+
+      const isSignUp = this._signUpHeadlines.has(headlineText);
+      const isLogin = this._loginHeadlines.has(headlineText);
+
+      if (!isSignUp && !isLogin) {
+        if (existing) {
+          this._hankoObserver?.disconnect();
+          existing.remove();
+          this._hankoObserver?.observe(hankoShadow, { childList: true, subtree: true });
+        }
+        return;
+      }
+
+      const subtitleText = isSignUp
+        ? this.t("signUpSubtitle")
+        : this.t("loginSubtitle");
+
+      if (existing && existing.textContent === subtitleText) return;
+      if (!h1) return;
+
+      this._hankoObserver?.disconnect();
+
+      if (existing) existing.remove();
+
+      const subtitle = document.createElement("p");
+      subtitle.className = "hot-subtitle";
+      subtitle.textContent = subtitleText;
+      subtitle.style.cssText =
+        "margin: -4px 0 16px; text-align: center; font-size: var(--hot-font-size-large); color: var(--hot-color-gray-600, #6b7280); font-weight: normal;";
+
+      h1.insertAdjacentElement("afterend", subtitle);
+
+      this._hankoObserver?.observe(hankoShadow, { childList: true, subtree: true });
+    };
+
+    if (this._hankoObserver) {
+      this._hankoObserver.disconnect();
+    }
+
+    const hankoShadow = (hankoAuth as HTMLElement & { shadowRoot: ShadowRoot | null }).shadowRoot;
+    if (hankoShadow) {
+      this._hankoObserver = new MutationObserver(() => injectSubtitle());
+      this._hankoObserver.observe(hankoShadow, { childList: true, subtree: true });
+      injectSubtitle();
+    }
+  }
 
   private async handleHankoSuccess(event: any) {
     this.log("Hanko auth success:", event.detail);
@@ -1444,7 +1523,6 @@ window.location.href = redirectUrl;
                       <div class="osm-section">
                         <div class="osm-connected">
                           <div class="osm-badge">
-                            <span class="osm-badge-icon">🗺️</span>
                             <div>
                               <div>${this.t("connectedToOpenStreetMap")}</div>
                               ${this.osmData?.osm_username
@@ -1633,7 +1711,7 @@ window.location.href = redirectUrl;
             --color: var(--hot-color-gray-900);
             --color-shade-1: var(--hot-color-gray-700);
             --color-shade-2: var(--hot-color-gray-100);
-            --brand-color: var(--hot-color-gray-800);
+            --brand-color: var(--hot-color-gray-1000);
             --brand-color-shade-1: var(--hot-color-gray-900);
             --brand-contrast-color: white;
             --background-color: white;
@@ -1645,7 +1723,7 @@ window.location.href = redirectUrl;
             --item-height: 2.75rem;
             --item-margin: var(--hot-spacing-small) 0;
             --container-padding: 0;
-            --headline1-font-size: var(--hot-font-size-large);
+            --headline1-font-size: var(--hot-font-size-xl);
             --headline1-font-weight: var(--hot-font-weight-semibold);
             --headline2-font-size: var(--hot-font-size-medium);
             --headline2-font-weight: var(--hot-font-weight-semibold);
@@ -1653,7 +1731,7 @@ window.location.href = redirectUrl;
           >
             ${keyed(
               this.lang,
-              html`<hanko-auth lang="${this.lang}"></hanko-auth>`,
+              html`<hanko-auth lang="${this.lang}" exportparts="link"></hanko-auth>`,
             )}
           </div>
         `;
@@ -1698,5 +1776,5 @@ declare global {
   }
 }
 
-// Re-export Hanko translations for use by consuming apps
-export { en, es, fr, pt };
+// Re-export for use by consuming apps
+export { getTranslations } from "./hanko-translations";

package/src/hanko-i18n-en.ts

@@ -0,0 +1,20 @@
+/**
+ * English (en) overrides for Hanko Elements
+ * Only include keys that differ from the default Hanko English translations.
+ * These are merged on top of enBase in hanko-auth.ts.
+ */
+
+export const enOverrides = {
+  headlines: {
+    signUp: "Create an account",
+  },
+  labels: {
+    signUp: "Sign up here",
+    alreadyHaveAnAccount: "Already have a HOT account?",
+    dontHaveAnAccount: "Don't have a HOT account?",
+  },
+  texts: {
+    enterPasscode:
+      "Please enter below the passcode we’ve sent to your email address:",
+  },
+};

package/src/hanko-i18n-es.ts

@@ -48,12 +48,13 @@ export const es = {
     deleteSecurityKey: "Eliminar clave de seguridad",
     securityKeys: "Claves de seguridad",
     authenticatorApp: "Aplicación de autenticación",
-    authenticatorAppAlreadySetUp: "La aplicación de autenticación está configurada",
+    authenticatorAppAlreadySetUp:
+      "La aplicación de autenticación está configurada",
     authenticatorAppNotSetUp: "Configurar aplicación de autenticación",
     trustDevice: "¿Confiar en este navegador?",
   },
   texts: {
-    enterPasscode: 'Ingrese el código que se envió a "{emailAddress}".',
+    enterPasscode: "Ingrese el código que se envió a su correo electrónico:",
     enterPasscodeNoEmail:
       "Ingrese el código que se envió a su dirección de correo principal.",
     setupPasskey:
@@ -119,7 +120,7 @@ export const es = {
     signInPasskey: "Iniciar sesión con llave de acceso",
     registerAuthenticator: "Crear una llave de acceso",
     signIn: "Iniciar sesión",
-    signUp: "Crear cuenta",
+    signUp: "Regístrese aquí",
     sendNewPasscode: "Enviar nuevo código",
     passwordRetryAfter: "Reintentar en {passwordRetryAfter}",
     passcodeResendAfter: "Solicitar nuevo código en {passcodeResendAfter}",
@@ -141,7 +142,7 @@ export const es = {
     emailOrUsername: "Correo o nombre de usuario",
     username: "Nombre de usuario",
     optional: "opcional",
-    dontHaveAnAccount: "¿No tiene una cuenta?",
+    dontHaveAnAccount: "¿No tiene una cuenta HOT?",
     alreadyHaveAnAccount: "¿Ya tiene una cuenta?",
     changeUsername: "Cambiar nombre de usuario",
     setUsername: "Establecer nombre de usuario",
@@ -172,8 +173,7 @@ export const es = {
       "El código se ha ingresado incorrectamente demasiadas veces. Por favor, solicite un nuevo código.",
     tooManyRequests:
       "Se han realizado demasiadas solicitudes. Por favor, espere para repetir la operación solicitada.",
-    unauthorized:
-      "Su sesión ha expirado. Por favor, inicie sesión nuevamente.",
+    unauthorized: "Su sesión ha expirado. Por favor, inicie sesión nuevamente.",
     invalidWebauthnCredential: "Esta llave de acceso ya no se puede usar.",
     passcodeExpired: "El código ha expirado. Por favor, solicite uno nuevo.",
     userVerification:

package/src/hanko-i18n-fr.ts

@@ -48,12 +48,13 @@ export const fr = {
     deleteSecurityKey: "Supprimer la clé de sécurité",
     securityKeys: "Clés de sécurité",
     authenticatorApp: "Application d'authentification",
-    authenticatorAppAlreadySetUp: "L'application d'authentification est configurée",
+    authenticatorAppAlreadySetUp:
+      "L'application d'authentification est configurée",
     authenticatorAppNotSetUp: "Configurer l'application d'authentification",
     trustDevice: "Faire confiance à ce navigateur ?",
   },
   texts: {
-    enterPasscode: 'Entrez le code envoyé à "{emailAddress}".',
+    enterPasscode: "Entrez le code envoyé à votre adresse e-mail:",
     enterPasscodeNoEmail:
       "Entrez le code envoyé à votre adresse e-mail principale.",
     setupPasskey:
@@ -119,7 +120,7 @@ export const fr = {
     signInPasskey: "Se connecter avec clé d'accès",
     registerAuthenticator: "Créer une clé d'accès",
     signIn: "Se connecter",
-    signUp: "Créer un compte",
+    signUp: "S'inscrire ici",
     sendNewPasscode: "Envoyer un nouveau code",
     passwordRetryAfter: "Réessayer dans {passwordRetryAfter}",
     passcodeResendAfter: "Demander un nouveau code dans {passcodeResendAfter}",
@@ -141,7 +142,7 @@ export const fr = {
     emailOrUsername: "E-mail ou nom d'utilisateur",
     username: "Nom d'utilisateur",
     optional: "optionnel",
-    dontHaveAnAccount: "Vous n'avez pas de compte ?",
+    dontHaveAnAccount: "Vous n'avez pas de compte HOT ?",
     alreadyHaveAnAccount: "Vous avez déjà un compte ?",
     changeUsername: "Changer le nom d'utilisateur",
     setUsername: "Définir le nom d'utilisateur",
@@ -172,8 +173,7 @@ export const fr = {
       "Le code a été saisi incorrectement trop de fois. Veuillez demander un nouveau code.",
     tooManyRequests:
       "Trop de demandes ont été effectuées. Veuillez attendre avant de répéter l'opération demandée.",
-    unauthorized:
-      "Votre session a expiré. Veuillez vous reconnecter.",
+    unauthorized: "Votre session a expiré. Veuillez vous reconnecter.",
     invalidWebauthnCredential: "Cette clé d'accès ne peut plus être utilisée.",
     passcodeExpired: "Le code a expiré. Veuillez en demander un nouveau.",
     userVerification:

package/src/hanko-i18n-pt.ts

@@ -48,12 +48,13 @@ export const pt = {
     deleteSecurityKey: "Excluir chave de segurança",
     securityKeys: "Chaves de segurança",
     authenticatorApp: "Aplicativo de autenticação",
-    authenticatorAppAlreadySetUp: "O aplicativo de autenticação está configurado",
+    authenticatorAppAlreadySetUp:
+      "O aplicativo de autenticação está configurado",
     authenticatorAppNotSetUp: "Configurar aplicativo de autenticação",
     trustDevice: "Confiar neste navegador?",
   },
   texts: {
-    enterPasscode: 'Digite o código enviado para "{emailAddress}".',
+    enterPasscode: "Digite o código enviado para o seu endereço de e-mail:",
     enterPasscodeNoEmail:
       "Digite o código enviado para seu endereço de e-mail principal.",
     setupPasskey:
@@ -65,8 +66,7 @@ export const pt = {
     otpScanQRCode:
       "Digitalize o código QR usando seu aplicativo de autenticação (como Google Authenticator ou qualquer outro aplicativo TOTP). Alternativamente, você pode inserir manualmente a chave secreta OTP no aplicativo.",
     otpSecretKey: "Chave secreta OTP",
-    passwordFormatHint:
-      "Deve ter entre {minLength} e {maxLength} caracteres.",
+    passwordFormatHint: "Deve ter entre {minLength} e {maxLength} caracteres.",
     securityKeySetUp:
       "Use uma chave de segurança dedicada via USB, Bluetooth ou NFC, ou seu telefone celular. Conecte ou ative sua chave de segurança, depois clique no botão abaixo e siga as instruções para concluir o registro.",
     setPrimaryEmail:
@@ -119,7 +119,7 @@ export const pt = {
     signInPasskey: "Entrar com chave de acesso",
     registerAuthenticator: "Criar uma chave de acesso",
     signIn: "Entrar",
-    signUp: "Criar conta",
+    signUp: "Cadastre-se aqui",
     sendNewPasscode: "Enviar novo código",
     passwordRetryAfter: "Tentar novamente em {passwordRetryAfter}",
     passcodeResendAfter: "Solicitar novo código em {passcodeResendAfter}",
@@ -141,7 +141,7 @@ export const pt = {
     emailOrUsername: "E-mail ou nome de usuário",
     username: "Nome de usuário",
     optional: "opcional",
-    dontHaveAnAccount: "Não tem uma conta?",
+    dontHaveAnAccount: "Não tem uma conta HOT?",
     alreadyHaveAnAccount: "Já tem uma conta?",
     changeUsername: "Alterar nome de usuário",
     setUsername: "Definir nome de usuário",
@@ -172,8 +172,7 @@ export const pt = {
       "O código foi inserido incorretamente muitas vezes. Por favor, solicite um novo código.",
     tooManyRequests:
       "Muitas solicitações foram feitas. Por favor, aguarde antes de repetir a operação solicitada.",
-    unauthorized:
-      "Sua sessão expirou. Por favor, faça login novamente.",
+    unauthorized: "Sua sessão expirou. Por favor, faça login novamente.",
     invalidWebauthnCredential: "Esta chave de acesso não pode mais ser usada.",
     passcodeExpired: "O código expirou. Por favor, solicite um novo.",
     userVerification:
@@ -194,8 +193,7 @@ export const pt = {
   flowErrors: {
     technical_error:
       "Ocorreu um erro técnico. Por favor, tente novamente mais tarde.",
-    flow_expired_error:
-      "A sessão expirou, clique no botão para reiniciar.",
+    flow_expired_error: "A sessão expirou, clique no botão para reiniciar.",
     value_invalid_error: "O valor inserido não é válido.",
     passcode_invalid: "O código fornecido não está correto.",
     passkey_invalid: "Esta chave de acesso não pode mais ser usada.",
@@ -213,8 +211,7 @@ export const pt = {
     operation_not_permitted_error: "A operação não é permitida.",
     flow_discontinuity_error:
       "O processo não pode continuar devido à configuração do usuário ou do provedor.",
-    form_data_invalid_error:
-      "Os dados do formulário enviados contêm erros.",
+    form_data_invalid_error: "Os dados do formulário enviados contêm erros.",
     unauthorized: "Sua sessão expirou. Por favor, faça login novamente.",
     value_missing_error: "O valor está faltando.",
     value_too_long_error: "O valor é muito longo.",

package/src/hanko-translations.ts

@@ -0,0 +1,30 @@
+// Hanko's UI overwrites
+import { en } from "@teamhanko/hanko-elements/i18n/en";
+import { fr as hankoFr } from "@teamhanko/hanko-elements/i18n/fr";
+import { enOverrides } from "./hanko-i18n-en";
+import { es as esOverrides } from "./hanko-i18n-es";
+import { fr as frOverrides } from "./hanko-i18n-fr";
+import { pt as ptOverrides } from "./hanko-i18n-pt";
+
+Object.assign(en.headlines, enOverrides.headlines);
+Object.assign(en.labels, enOverrides.labels);
+Object.assign(en.texts, enOverrides.texts);
+
+const fr = JSON.parse(JSON.stringify(hankoFr));
+Object.assign(fr.headlines, frOverrides.headlines);
+Object.assign(fr.labels, frOverrides.labels);
+Object.assign(fr.texts, frOverrides.texts);
+
+const es = JSON.parse(JSON.stringify(en));
+Object.assign(es.headlines, esOverrides.headlines);
+Object.assign(es.labels, esOverrides.labels);
+Object.assign(es.texts, esOverrides.texts);
+
+const pt = JSON.parse(JSON.stringify(en));
+Object.assign(pt.headlines, ptOverrides.headlines);
+Object.assign(pt.labels, ptOverrides.labels);
+Object.assign(pt.texts, ptOverrides.texts);
+
+export function getTranslations() {
+  return { en, es, fr, pt };
+}

package/src/translations.ts

@@ -17,6 +17,8 @@ export interface Translations {
   openAccountMenu: string;
   connectedToOsmAs: string;
   osmConnectionRequired: string;
+  signUpSubtitle: string;
+  loginSubtitle: string;
 }
 
 export const translations: Record<string, Translations> = {
@@ -35,6 +37,8 @@ export const translations: Record<string, Translations> = {
     openAccountMenu: "Open account menu",
     connectedToOsmAs: "Connected to OSM as",
     osmConnectionRequired: "OSM connection required",
+    signUpSubtitle: "Access all HOT tools and services",
+    loginSubtitle: "With your HOT account",
   },
   es: {
     logIn: "Iniciar sesión",
@@ -51,6 +55,8 @@ export const translations: Record<string, Translations> = {
     openAccountMenu: "Abrir menú de cuenta",
     connectedToOsmAs: "Conectado a OSM como",
     osmConnectionRequired: "Se requiere conexión OSM",
+    signUpSubtitle: "Accede a todas las herramientas y servicios de HOT",
+    loginSubtitle: "Con tu cuenta HOT",
   },
   fr: {
     logIn: "Se connecter",
@@ -67,6 +73,8 @@ export const translations: Record<string, Translations> = {
     openAccountMenu: "Ouvrir le menu du compte",
     connectedToOsmAs: "Connecté à OSM en tant que",
     osmConnectionRequired: "Connexion OSM requise",
+    signUpSubtitle: "Accédez à tous les outils et services HOT",
+    loginSubtitle: "Avec votre compte HOT",
   },
   pt: {
     logIn: "Entrar",
@@ -83,5 +91,7 @@ export const translations: Record<string, Translations> = {
     openAccountMenu: "Abrir menu da conta",
     connectedToOsmAs: "Conectado ao OSM como",
     osmConnectionRequired: "Conexão OSM necessária",
+    signUpSubtitle: "Acesse todas as ferramentas e serviços HOT",
+    loginSubtitle: "Com a sua conta HOT",
   },
 };