@hotosm/hanko-auth 0.5.1 → 0.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotosm/hanko-auth",
-  "version": "0.5.1",
+  "version": "0.5.4",
   "description": "Web component for HOTOSM SSO authentication with Hanko and OSM integration",
   "type": "module",
   "main": "dist/hanko-auth.umd.js",
@@ -17,13 +17,6 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "watch": "vite build --watch",
-    "preview": "vite preview",
-    "prepublishOnly": "pnpm build"
-  },
   "keywords": [
     "hotosm",
     "hanko",
@@ -51,5 +44,11 @@
   },
   "devDependencies": {
     "vite": "^5.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "watch": "vite build --watch",
+    "preview": "vite preview"
   }
-}
+}

package/src/hanko-auth.styles.ts

@@ -274,7 +274,7 @@ export const styles = css`
 
   .login-link {
     color: var(--login-btn-text-color, white);
-    font-size: var(--login-btn-text-size, var(--hot-font-size-medium));
+    font-size: var(--hot-font-size-small);
     border-radius: var(
       --login-btn-border-radius,
       var(--hot-border-radius-medium)
@@ -303,11 +303,11 @@ export const styles = css`
     border: none;
   }
   .login-link.filled.primary {
-    background: var(--login-btn-bg-color, var(--hot-color-primary-1000));
+    background: var(--hot-color-gray-950);
     color: var(--login-btn-text-color, white);
   }
   .login-link.filled.primary:hover {
-    background: var(--login-btn-hover-bg-color, var(--hot-color-primary-900));
+    background: var(--hot-color-primary-800);
   }
   .login-link.filled.neutral {
     background: var(--login-btn-bg-color, var(--hot-color-neutral-600));
@@ -330,8 +330,8 @@ export const styles = css`
     border: 1px solid;
   }
   .login-link.outline.primary {
-    border-color: var(--login-btn-bg-color, var(--hot-color-primary-1000));
-    color: var(--login-btn-text-color, var(--hot-color-primary-1000));
+    border-color: var(--login-btn-bg-color, var(--hot-color-primary-950));
+    color: var(--login-btn-text-color, var(--hot-color-primary-950));
   }
   .login-link.outline.primary:hover {
     background: var(--login-btn-hover-bg-color, var(--hot-color-primary-50));
@@ -357,7 +357,7 @@ export const styles = css`
     border: none;
   }
   .login-link.plain.primary {
-    color: var(--login-btn-text-color, var(--hot-color-primary-1000));
+    color: var(--login-btn-text-color, var(--hot-color-primary-950));
   }
   .login-link.plain.primary:hover {
     background: var(--login-btn-hover-bg-color, var(--hot-color-primary-50));

package/src/hanko-auth.ts

@@ -195,6 +195,8 @@ export class HankoAuth extends LitElement {
   private _lastSessionId: string | null = null;
   private _hanko: any = null;
   private _isPrimary = false; // Is this the primary instance?
+  private _sessionCheckFailures = 0;
+  private _sessionCheckBackoffTimer: ReturnType<typeof setTimeout> | null = null;
   private _hankoObserver: MutationObserver | null = null;
 
   // Hanko signup headline text across all supported languages (used for subtitle injection)
@@ -368,6 +370,8 @@ export class HankoAuth extends LitElement {
   private _handleVisibilityChange = () => {
     // Only primary instance should handle visibility changes to prevent race conditions
     if (!this._isPrimary) return;
+    // Don't re-check if a backoff retry is already scheduled
+    if (this._sessionCheckBackoffTimer) return;
 
     if (!document.hidden && !this.showProfile && !this.user) {
       // Page became visible, we're in header mode, and no user is logged in
@@ -380,6 +384,8 @@ export class HankoAuth extends LitElement {
   private _handleWindowFocus = () => {
     // Only primary instance should handle window focus to prevent race conditions
     if (!this._isPrimary) return;
+    // Don't re-check if a backoff retry is already scheduled
+    if (this._sessionCheckBackoffTimer) return;
 
     if (!this.showProfile && !this.user) {
       // Window focused, we're in header mode, and no user is logged in
@@ -549,6 +555,16 @@ export class HankoAuth extends LitElement {
     }
   }
 
+  private _scheduleSessionRetry() {
+    if (this._sessionCheckBackoffTimer) return; // already scheduled
+    const delay = Math.min(1000 * 2 ** this._sessionCheckFailures, 60000);
+    this.log(`Session check failed, retrying in ${delay / 1000}s (attempt ${this._sessionCheckFailures})`);
+    this._sessionCheckBackoffTimer = setTimeout(() => {
+      this._sessionCheckBackoffTimer = null;
+      this.checkSession();
+    }, delay);
+  }
+
   private async checkSession() {
     this.log("Checking for existing Hanko session...");
 
@@ -592,6 +608,7 @@ export class HankoAuth extends LitElement {
             return;
           }
 
+          this._sessionCheckFailures = 0; // reset backoff on success
           this.log("Valid Hanko session found via cookie");
           this.log("Session data:", sessionData);
 
@@ -710,12 +727,16 @@ export class HankoAuth extends LitElement {
           this.log("No valid session cookie found - user needs to login");
         }
       } catch (validateError) {
+        this._sessionCheckFailures++;
         this.log("Session validation failed:", validateError);
-        this.log("No valid session - user needs to login");
+        this._scheduleSessionRetry();
+        return;
       }
     } catch (error) {
+      this._sessionCheckFailures++;
       this.log("Session check error:", error);
-      this.log("No existing session - user needs to login");
+      this._scheduleSessionRetry();
+      return;
     } finally {
       // Broadcast state changes to other instances
       if (this._isPrimary) {
@@ -921,33 +942,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 +993,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 +1002,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 +1020,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 +1031,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 };
 }