@hotosm/hanko-auth 0.5.1 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotosm/hanko-auth",
-  "version": "0.5.1",
+  "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.ts

@@ -921,33 +921,36 @@ 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) => {
@@ -969,7 +972,7 @@ export class HankoAuth extends LitElement {
       }
     });
   }
-
+// subtitle handling
   private _setupSignUpSubtitleObserver(hankoAuth: Element) {
     const injectSubtitle = () => {
       const hankoShadow = (hankoAuth as HTMLElement & { shadowRoot: ShadowRoot | null }).shadowRoot;
@@ -978,13 +981,11 @@ export class HankoAuth extends LitElement {
       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();
@@ -998,11 +999,9 @@ export class HankoAuth extends LitElement {
         ? 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();
@@ -1011,11 +1010,10 @@ export class HankoAuth extends LitElement {
       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;";
+        "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);
 
-      // Re-observe after injection
       this._hankoObserver?.observe(hankoShadow, { childList: true, subtree: true });
     };
 

package/src/hanko-i18n-en.ts

@@ -9,9 +9,9 @@ export const enOverrides = {
     signUp: "Create an account",
   },
   labels: {
-    signUp: "Create an account",
+    signUp: "Sign up here",
     alreadyHaveAnAccount: "Already have a HOT account?",
-    signIn: "Sign in here",
+    dontHaveAnAccount: "Don't have a HOT account?",
   },
   texts: {
     enterPasscode:

package/src/hanko-i18n-es.ts

@@ -120,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}",
@@ -142,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",

package/src/hanko-i18n-fr.ts

@@ -120,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}",
@@ -142,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",

package/src/hanko-i18n-pt.ts

@@ -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",

package/src/hanko-translations.ts

@@ -1,15 +1,30 @@
-/* overrides for Hanko's UI */
-
+// 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 } from "./hanko-i18n-es";
-import { fr } from "./hanko-i18n-fr";
-import { pt } from "./hanko-i18n-pt";
+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 };
 }