@hotosm/hanko-auth 0.3.5 → 0.4.2

package/src/hanko-auth.ts

@@ -12,6 +12,12 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { register } from "@teamhanko/hanko-elements";
+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 { styles } from "./hanko-auth.styles";
+import { translations } from "./translations";
 //Icons
 import accountIcon from "../assets/icon-account.svg";
 import logoutIcon from "../assets/icon-logout.svg";
@@ -50,6 +56,7 @@ interface OSMData {
 
 @customElement("hotosm-auth")
 export class HankoAuth extends LitElement {
+  static styles = styles;
   // Properties (from attributes)
   @property({ type: String, attribute: "hanko-url" }) hankoUrlAttr = "";
   @property({ type: String, attribute: "base-path" }) basePath = "";
@@ -74,6 +81,18 @@ export class HankoAuth extends LitElement {
   @property({ type: String, attribute: "app-id" }) appId = "";
   // Custom login page URL (for standalone mode - overrides ${hankoUrl}/app)
   @property({ type: String, attribute: "login-url" }) loginUrl = "";
+  // Language code (en, es, fr, pt, etc.)
+  @property({ type: String }) lang = "en";
+  // Button variant (filled, outline, plain)
+  @property({ type: String, attribute: "button-variant" }) buttonVariant:
+    | "filled"
+    | "outline"
+    | "plain" = "plain";
+  // Button color (primary, neutral, danger)
+  @property({ type: String, attribute: "button-color" }) buttonColor:
+    | "primary"
+    | "neutral"
+    | "danger" = "primary";
 
   // Internal state
   @state() private user: UserState | null = null;
@@ -84,15 +103,26 @@ export class HankoAuth extends LitElement {
   @state() private error: string | null = null;
   @state() private profileDisplayName: string = "";
   @state() private hasAppMapping = false; // True if user has mapping in the app
+  @state() private userProfileLanguage: string | null = null; // Language from user profile
   // dropdown
   @state() private isOpen = false;
 
   private toggleDropdown() {
     this.isOpen = !this.isOpen;
+    if (this.isOpen) {
+      // Add listener when dropdown opens
+      setTimeout(() => {
+        document.addEventListener("click", this.handleOutsideClick);
+      }, 0);
+    } else {
+      // Remove listener when dropdown closes
+      document.removeEventListener("click", this.handleOutsideClick);
+    }
   }
 
   private closeDropdown() {
     this.isOpen = false;
+    document.removeEventListener("click", this.handleOutsideClick);
   }
   private handleOutsideClick = (event: MouseEvent) => {
     if (!this.contains(event.target as Node)) {
@@ -107,332 +137,6 @@ export class HankoAuth extends LitElement {
   private _hanko: any = null;
   private _isPrimary = false; // Is this the primary instance?
 
-  static styles = css`
-    :host {
-      display: block;
-      font-family: var(--hot-font-sans);
-    }
-
-    .container {
-      max-width: 400px;
-      margin: 0 auto;
-      padding: var(--hot-spacing-large);
-    }
-
-    .loading {
-      text-align: center;
-      padding: var(--hot-spacing-3x-large);
-      color: var(--hot-color-gray-600);
-    }
-
-    .osm-connecting {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--hot-spacing-small);
-      padding: var(--hot-spacing-large);
-    }
-
-    .spinner {
-      width: var(--hot-spacing-3x-large);
-      height: var(--hot-spacing-3x-large);
-      border: var(--hot-spacing-2x-small) solid var(--hot-color-gray-50);
-      border-top: var(--hot-spacing-2x-small) solid var(--hot-color-red-600);
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-
-    @keyframes spin {
-      0% {
-        transform: rotate(0deg);
-      }
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-
-    .connecting-text {
-      font-size: var(--hot-font-size-small);
-      color: var(--hot-color-gray-600);
-      font-weight: var(--hot-font-weight-semibold);
-    }
-
-    button {
-      width: 100%;
-      padding: 12px 20px;
-      border: none;
-      border-radius: 6px;
-      font-size: 14px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.2s;
-    }
-
-    .btn-primary {
-      background: var(--hot-color-gray-700);
-      color: white;
-    }
-
-    .btn-primary:hover {
-      background: var(--hot-color-gray-600);
-    }
-
-    .btn-secondary {
-      border: 1px solid var(--hot-color-gray-700);
-      border-radius: var(--hot-border-radius-medium);
-      background-color: white;
-      color: var(--hot-color-gray-700);
-      margin-top: 8px;
-    }
-
-    .btn-secondary:hover {
-      background: var(--hot-color-gray-50);
-    }
-
-    .error {
-      background: var(--hot-color-red-50);
-      border: var(--hot-border-width, 1px) solid var(--hot-color-red-200);
-      border-radius: var(--hot-border-radius-medium);
-      padding: var(--hot-spacing-small);
-      color: var(--hot-color-red-700);
-      margin-bottom: var(--hot-spacing-medium);
-    }
-
-    .profile {
-      background: var(--hot-color-gray-50);
-      border-radius: var(--hot-border-radius-large);
-      padding: var(--hot-spacing-large);
-      margin-bottom: var(--hot-spacing-medium);
-    }
-
-    .profile-header {
-      display: flex;
-      align-items: center;
-      gap: var(--hot-spacing-small);
-      margin-bottom: var(--hot-spacing-medium);
-    }
-
-    .profile-avatar {
-      width: var(--hot-spacing-3x-large);
-      height: var(--hot-spacing-3x-large);
-      border-radius: 50%;
-      background: var(--hot-color-gray-200);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: var(--hot-font-size-large);
-      font-weight: var(--hot-font-weight-bold);
-      color: var(--hot-color-gray-600);
-    }
-
-    .profile-info {
-      padding: var(--hot-spacing-x-small) var(--hot-spacing-medium);
-    }
-
-    .profile-email {
-      font-size: var(--hot-font-size-small);
-      font-weight: var(--hot-font-weight-bold);
-    }
-
-    .osm-section {
-      border-top: var(--hot-border-width, 1px) solid var(--hot-color-gray-100);
-      padding-top: var(--hot-spacing-medium);
-      padding-bottom: var(--hot-spacing-small);
-      margin-top: var(--hot-spacing-medium);
-      text-align: center;
-    }
-
-    .osm-connected {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: var(--hot-spacing-small);
-      background: linear-gradient(
-        135deg,
-        var(--hot-color-success-50) 0%,
-        var(--hot-color-success-50) 100%
-      );
-      border-radius: var(--hot-border-radius-large);
-      border: var(--hot-border-width, 1px) solid var(--hot-color-success-200);
-    }
-
-    .osm-badge {
-      display: flex;
-      align-items: center;
-      gap: var(--hot-spacing-x-small);
-      color: var(--hot-color-success-800);
-      font-weight: var(--hot-font-weight-semibold);
-      font-size: var(--hot-font-size-small);
-      text-align: left;
-    }
-
-    .osm-badge-icon {
-      font-size: var(--hot-font-size-medium);
-    }
-
-    .osm-username {
-      font-size: var(--hot-font-size-x-small);
-      color: var(--hot-color-success-700);
-      margin-top: var(--hot-spacing-2x-small);
-    }
-    .osm-prompt {
-      background: var(--hot-color-warning-50);
-      border: var(--hot-border-width, 1px) solid var(--hot-color-warning-200);
-      border-radius: var(--hot-border-radius-large);
-      padding: var(--hot-spacing-large);
-      margin-bottom: var(--hot-spacing-medium);
-      text-align: center;
-    }
-
-    .osm-prompt-title {
-      font-weight: var(--hot-font-weight-semibold);
-      font-size: var(--hot-font-size-medium);
-      margin-bottom: var(--hot-spacing-small);
-      color: var(--hot-color-gray-900);
-      text-align: center;
-    }
-
-    .osm-prompt-text {
-      font-size: var(--hot-font-size-small);
-      color: var(--hot-color-gray-600);
-      margin-bottom: var(--hot-spacing-medium);
-      line-height: var(--hot-line-height-normal);
-      text-align: center;
-    }
-
-    .osm-status-badge {
-      position: absolute;
-      top: 2px;
-      right: 2px;
-      width: var(--hot-font-size-small);
-      height: var(--hot-font-size-small);
-      border-radius: 50%;
-      border: var(--hot-spacing-3x-small) solid white;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: var(--hot-font-size-2x-small);
-      color: white;
-      font-weight: var(--hot-font-weight-bold);
-    }
-
-    .osm-status-badge.connected {
-      background-color: var(--hot-color-success-600);
-    }
-
-    .osm-status-badge.required {
-      background-color: var(--hot-color-warning-600);
-    }
-    .header-avatar {
-      width: var(--hot-spacing-2x-large);
-      height: var(--hot-spacing-2x-large);
-      border-radius: 50%;
-      background: var(--hot-color-gray-800);
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      font-size: var(--hot-font-size-small);
-      font-weight: var(--hot-font-weight-semibold);
-      color: white;
-    }
-
-    .login-link {
-      color: var(--hot-color-neutral-950);
-      font-size: var(--hot-font-size-small);
-      border-radius: var(--hot-border-radius-medium);
-      text-decoration: none;
-      padding: 14px;
-    }
-    .login-link:hover {
-      background: var(--hot-color-gray-50);
-    }
-    /* Dropdown styles */
-    .dropdown {
-      position: relative;
-      display: inline-block;
-    }
-    .dropdown-trigger {
-      background: none;
-      border: none;
-      padding: var(--hot-spacing-x-small);
-      cursor: pointer;
-      position: relative;
-    }
-
-    .dropdown-trigger.no-hover:hover,
-    .dropdown-trigger.no-hover:active,
-    .dropdown-trigger.no-hover:focus {
-      background: none;
-      outline: none;
-    }
-    .dropdown-content {
-      position: absolute;
-      right: 0;
-      background: white;
-      border: 1px solid var(--hot-color-gray-100);
-      border-radius: var(--hot-border-radius-medium);
-      z-index: 1000;
-      opacity: 0;
-      visibility: hidden;
-      transform: translateY(-10px);
-      transition:
-        opacity 0.2s ease,
-        visibility 0.2s ease,
-        transform 0.2s ease;
-    }
-    @media (max-width: 768px) {
-      .dropdown-content {
-        position: fixed;
-        width: 100%;
-      }
-    }
-
-    .dropdown-content.open {
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
-    }
-
-    .dropdown-content button {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      padding: var(--hot-spacing-small) var(--hot-spacing-medium);
-      background: none;
-      border: none;
-      cursor: pointer;
-      text-align: left;
-      transition: background-color 0.2s ease;
-      gap: var(--hot-spacing-small);
-      font-size: var(--hot-font-size-small);
-      color: var(--hot-color-gray-900);
-    }
-
-    .dropdown-content button:hover {
-      background-color: var(--hot-color-gray-50);
-    }
-
-    .dropdown-content button:focus {
-      background-color: var(--hot-color-gray-50);
-      outline: 2px solid var(--hot-color-gray-500);
-      outline-offset: -2px;
-    }
-
-    .dropdown-content .profile-info {
-      padding: var(--hot-spacing-small) var(--hot-spacing-medium);
-    }
-
-    .dropdown-content .profile-email {
-      font-size: var(--hot-font-size-small);
-      font-weight: var(--hot-font-weight-bold);
-    }
-
-    .icon {
-      width: 20px;
-      height: 20px;
-    }
-  `;
-
   // Get computed hankoUrl (priority: attribute > meta tag > window.HANKO_URL > origin)
   get hankoUrl(): string {
     if (this.hankoUrlAttr) {
@@ -619,6 +323,21 @@ export class HankoAuth extends LitElement {
     }
   }
 
+  /**
+   * Get translated string for the current language
+   * Falls back to English if translation not found
+   * When user is logged in, uses their profile language instead of the lang prop
+   */
+  private t(key: keyof typeof translations.en): string {
+    // When user is logged in, use their profile language
+    const effectiveLang =
+      this.user && this.userProfileLanguage
+        ? this.userProfileLanguage
+        : this.lang;
+    const langTranslations = translations[effectiveLang] || translations.en;
+    return langTranslations[key] || translations.en[key] || key;
+  }
+
   private warn(...args: any[]) {
     console.warn(...args);
   }
@@ -648,11 +367,12 @@ export class HankoAuth extends LitElement {
     return path;
   }
 
+  // styles injected to ensure global availability
   private injectHotStyles() {
     const stylesheets = [
       {
         id: "hot-design-system",
-        href: "https://cdn.jsdelivr.net/npm/hotosm-ui-design@latest/dist/hot.css",
+        href: "https://cdn.jsdelivr.net/npm/@hotosm/ui-design@latest/dist/hot.css",
       },
       {
         id: "google-font-archivo",
@@ -678,10 +398,16 @@ export class HankoAuth extends LitElement {
       return;
     }
 
+    // DEBUG: Add delay to see loading state longer (remove in production)
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
     try {
       await register(this.hankoUrl, {
         enablePasskeys: false,
         hidePasskeyButtonOnLogin: true,
+        translations: { en, es, fr, pt },
+        translationsLocation: null,
+        fallbackLanguage: "en",
       });
 
       // Create persistent Hanko instance and set up session event listeners
@@ -1072,7 +798,7 @@ export class HankoAuth extends LitElement {
     }
   }
 
-  // Fetch profile display name from login backend
+  // Fetch profile display name and language from login backend
   private async fetchProfileDisplayName() {
     try {
       const profileUrl = `${this.hankoUrl}/api/profile/me`;
@@ -1091,6 +817,12 @@ export class HankoAuth extends LitElement {
             `${profile.first_name || ""} ${profile.last_name || ""}`.trim();
           this.log("👤 Display name set to:", this.profileDisplayName);
         }
+
+        // Set language from user profile if available
+        if (profile.language) {
+          this.userProfileLanguage = profile.language;
+          this.log("🌐 Language set from profile:", this.userProfileLanguage);
+        }
       }
     } catch (error) {
       this.log("⚠️ Could not fetch profile:", error);
@@ -1426,6 +1158,7 @@ export class HankoAuth extends LitElement {
     this.osmConnected = false;
     this.osmData = null;
     this.hasAppMapping = false;
+    this.userProfileLanguage = null; // Clear user's language preference
 
     // Broadcast state changes to other instances
     if (this._isPrimary) {
@@ -1590,7 +1323,7 @@ export class HankoAuth extends LitElement {
     );
 
     if (this.loading) {
-      return html` <button disabled>Log in</button> `;
+      return html`<span class="loading-placeholder"><span class="loading-placeholder-text">${this.t("logIn")}</span><span class="spinner-small"></span></span>`;
     }
 
     if (this.error) {
@@ -1631,7 +1364,9 @@ export class HankoAuth extends LitElement {
               ${this.osmRequired && this.osmLoading
                 ? html`
                     <div class="osm-section">
-                      <div class="loading">Checking OSM connection...</div>
+                      <div class="loading">
+                        ${this.t("checkingOsmConnection")}
+                      </div>
                     </div>
                   `
                 : this.osmRequired && this.osmConnected
@@ -1641,7 +1376,7 @@ export class HankoAuth extends LitElement {
                           <div class="osm-badge">
                             <span class="osm-badge-icon">🗺️</span>
                             <div>
-                              <div>Connected to OpenStreetMap</div>
+                              <div>${this.t("connectedToOpenStreetMap")}</div>
                               ${this.osmData?.osm_username
                                 ? html`
                                     <div class="osm-username">
@@ -1663,20 +1398,22 @@ export class HankoAuth extends LitElement {
                             <div class="osm-connecting">
                               <div class="spinner"></div>
                               <div class="connecting-text">
-                                🗺️ Connecting to OpenStreetMap...
+                                🗺️ ${this.t("connectingToOpenStreetMap")}
                               </div>
                             </div>
                           `
                         : html`
-                            <div class="osm-prompt-title">🌍 OSM Required</div>
+                            <div class="osm-prompt-title">
+                              🌍 ${this.t("osmRequired")}
+                            </div>
                             <div class="osm-prompt-text">
-                              This endpoint requires OSM connection.
+                              ${this.t("osmRequiredText")}
                             </div>
                             <button
                               @click=${this.handleOSMConnect}
                               class="btn-primary"
                             >
-                              Connect OSM Account
+                              ${this.t("connectOsmAccount")}
                             </button>
                           `}
                     </div>
@@ -1684,7 +1421,7 @@ export class HankoAuth extends LitElement {
                 : ""}
 
               <button @click=${this.handleLogout} class="btn-secondary">
-                Log out
+                ${this.t("logOut")}
               </button>
             </div>
           </div>
@@ -1695,7 +1432,7 @@ export class HankoAuth extends LitElement {
           <div class="dropdown">
             <button
               @click=${this.toggleDropdown}
-              aria-label="Open account menu"
+              aria-label="${this.t("openAccountMenu")}"
               aria-expanded=${this.isOpen}
               aria-haspopup="true"
               class="dropdown-trigger"
@@ -1706,7 +1443,8 @@ export class HankoAuth extends LitElement {
                 ? html`
                     <span
                       class="osm-status-badge connected"
-                      title="Connected to OSM as @${this.osmData?.osm_username}"
+                      title="${this.t("connectedToOsmAs")} @${this.osmData
+                        ?.osm_username}"
                       >✓</span
                     >
                   `
@@ -1714,7 +1452,7 @@ export class HankoAuth extends LitElement {
                   ? html`
                       <span
                         class="osm-status-badge required"
-                        title="OSM connection required"
+                        title="${this.t("osmConnectionRequired")}"
                         >!</span
                       >
                     `
@@ -1728,14 +1466,15 @@ export class HankoAuth extends LitElement {
               </div>
               <button data-action="profile" @click=${this.handleDropdownSelect}>
                 <img src="${accountIcon}" class="icon" alt="Account icon" />
-                My HOT Account
+                ${this.t("myHotAccount")}
               </button>
               ${this.osmRequired
                 ? this.osmConnected
                   ? html`
                       <button class="osm-connected" disabled>
                         <img src="${checkIcon}" alt="Check icon" class="icon" />
-                        Connected to OSM (@${this.osmData?.osm_username})
+                        ${this.t("connectedToOsm")}
+                        (@${this.osmData?.osm_username})
                       </button>
                     `
                   : html`
@@ -1744,13 +1483,13 @@ export class HankoAuth extends LitElement {
                         @click=${this.handleDropdownSelect}
                       >
                         <img src="${mapIcon}" alt="Check icon" class="icon" />
-                        Connect to OSM
+                        ${this.t("connectToOsm")}
                       </button>
                     `
                 : ""}
               <button data-action="logout" @click=${this.handleDropdownSelect}>
                 <img src="${logoutIcon}" alt="Log out icon" class="icon" />
-                Log Out
+                ${this.t("logOut")}
               </button>
             </div>
           </div>
@@ -1785,7 +1524,7 @@ export class HankoAuth extends LitElement {
             --headline2-font-weight: var(--hot-font-weight-semibold);
           "
           >
-            <hanko-auth></hanko-auth>
+            <hanko-auth lang="${this.lang}"></hanko-auth>
           </div>
         `;
       } else {
@@ -1810,9 +1549,13 @@ export class HankoAuth extends LitElement {
         const loginBase = this.loginUrl || `${baseUrl}/app`;
         const loginUrl = `${loginBase}?return_to=${encodeURIComponent(
           returnTo,
-        )}${this.osmRequired ? "&osm_required=true" : ""}${autoConnectParam}`;
+        )}${this.osmRequired ? "&osm_required=true" : ""}${autoConnectParam}&lang=${this.lang}`;
 
-        return html`<a class="login-link" href="${loginUrl}">Log in</a> `;
+        return html`<a
+          class="login-link ${this.buttonVariant} ${this.buttonColor}"
+          href="${loginUrl}"
+          >${this.t("logIn")}</a
+        > `;
       }
     }
   }