@hotosm/hanko-auth 0.5.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotosm/hanko-auth",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "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();
@@ -929,6 +948,7 @@ export class HankoAuth extends LitElement {
       if (hankoAuth) {
         this._currentHankoAuthElement = hankoAuth;
         this.log("Attaching event listeners to hanko-auth element");
+        this._setupSignUpSubtitleObserver(hankoAuth);
 
         hankoAuth.addEventListener("onSessionCreated", (e: any) => {
           this.log(`Hanko event: onSessionCreated`, e.detail);
@@ -950,6 +970,67 @@ export class HankoAuth extends LitElement {
     });
   }
 
+  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() ?? "";
+
+      // Remove any existing subtitle first
+      const existing = hankoShadow.querySelector(".hot-subtitle");
+
+      const isSignUp = this._signUpHeadlines.has(headlineText);
+      const isLogin = this._loginHeadlines.has(headlineText);
+
+      // Only show subtitle on the two initial screens
+      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");
+
+      // Skip if subtitle already has correct text
+      if (existing && existing.textContent === subtitleText) return;
+      if (!h1) return;
+
+      // Disconnect before modifying DOM to avoid re-triggering the observer
+      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-base, 16px); color: var(--hot-color-gray-600, #6b7280); font-weight: normal;";
+
+      h1.insertAdjacentElement("afterend", subtitle);
+
+      // Re-observe after injection
+      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 +1525,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 +1713,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 +1725,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 +1733,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 +1778,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: "Create an account",
+    alreadyHaveAnAccount: "Already have a HOT account?",
+    signIn: "Sign in here",
+  },
+  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:
@@ -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:
@@ -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:
@@ -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,15 @@
+/* overrides for Hanko's UI */
+
+import { en } from "@teamhanko/hanko-elements/i18n/en";
+import { enOverrides } from "./hanko-i18n-en";
+import { es } from "./hanko-i18n-es";
+import { fr } from "./hanko-i18n-fr";
+import { pt } from "./hanko-i18n-pt";
+
+Object.assign(en.headlines, enOverrides.headlines);
+Object.assign(en.labels, enOverrides.labels);
+Object.assign(en.texts, enOverrides.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",
   },
 };