@hotosm/hanko-auth 0.4.8 → 0.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hotosm/hanko-auth",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "description": "Web component for HOTOSM SSO authentication with Hanko and OSM integration",
   "type": "module",
   "main": "dist/hanko-auth.umd.js",
@@ -21,7 +21,8 @@
     "dev": "vite",
     "build": "vite build",
     "watch": "vite build --watch",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "prepublishOnly": "pnpm build"
   },
   "keywords": [
     "hotosm",

package/src/hanko-auth.styles.ts

@@ -25,8 +25,10 @@ export const styles = css`
     display: flex;
     flex-direction: column;
     align-items: center;
+    width: 100%;
     gap: var(--hot-spacing-small);
     padding: var(--hot-spacing-large);
+    box-sizing: border-box;
   }
 
   .spinner {
@@ -147,15 +149,19 @@ export const styles = css`
     font-weight: var(--hot-font-weight-bold);
     color: var(--hot-color-gray-600);
     overflow: hidden;
+    flex-shrink: 0;
   }
 
   .profile-info {
-    padding: var(--hot-spacing-x-small) var(--hot-spacing-medium);
+    min-width: 0;
   }
 
   .profile-email {
     font-size: var(--hot-font-size-small);
     font-weight: var(--hot-font-weight-bold);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .osm-section {
@@ -260,6 +266,7 @@ export const styles = css`
     overflow: hidden;
     font-weight: var(--hot-font-weight-semibold);
     color: white;
+    flex-shrink: 0;
   }
 
   .login-link {

package/src/hanko-auth.ts

@@ -85,6 +85,7 @@ interface UserState {
   email: string | null;
   username: string | null;
   emailVerified: boolean;
+  avatarUrl?: string;
 }
 
 interface OSMData {
@@ -208,6 +209,21 @@ export class HankoAuth extends LitElement {
   private _hanko: any = null;
   private _isPrimary = false; // Is this the primary instance?
 
+  constructor() {
+    super();
+    try {
+      const cached = localStorage.getItem("hotosm-auth-user");
+      if (cached) {
+        const cachedUser: UserState = JSON.parse(cached);
+        this.user = cachedUser;
+        this.loading = false;
+        if (cachedUser.avatarUrl) {
+          this.profilePictureUrl = cachedUser.avatarUrl;
+        }
+      }
+    } catch {}
+  }
+
   // Get computed hankoUrl (priority: attribute > meta tag > window.HANKO_URL > origin)
   get hankoUrl(): string {
     if (this.hankoUrlAttr) {
@@ -657,6 +673,10 @@ export class HankoAuth extends LitElement {
               // Redirect to onboarding in progress, don't proceed
               return;
             }
+            await this.fetchProfileDisplayName();
+            if (this.user && this.profilePictureUrl) {
+              this.user = { ...this.user, avatarUrl: this.profilePictureUrl };
+            }
 
             this.dispatchEvent(
               new CustomEvent("hanko-login", {
@@ -677,8 +697,6 @@ export class HankoAuth extends LitElement {
             if (this.osmRequired) {
               await this.checkOSMConnection();
             }
-            // Fetch profile display name
-            await this.fetchProfileDisplayName();
             if (this.osmRequired && this.autoConnect && !this.osmConnected) {
               this.log("Auto-connecting to OSM (from existing session)...");
               this.handleOSMConnect();
@@ -1058,6 +1076,10 @@ export class HankoAuth extends LitElement {
     }
 
     this.log("User state updated:", this.user);
+    await this.fetchProfileDisplayName();
+    if (this.user && this.profilePictureUrl) {
+      this.user = { ...this.user, avatarUrl: this.profilePictureUrl };
+    }
 
     // Broadcast state changes to other instances
     if (this._isPrimary) {
@@ -1076,8 +1098,6 @@ export class HankoAuth extends LitElement {
     if (this.osmRequired) {
       await this.checkOSMConnection();
     }
-    // Fetch profile display name (only works with login.hotosm.org backend)
-    await this.fetchProfileDisplayName();
 
     // Auto-connect to OSM if required and auto-connect is enabled
     if (this.osmRequired && this.autoConnect && !this.osmConnected) {