@hotosm/hanko-auth 0.4.5 → 0.4.7

package/package.json

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

@@ -3,7 +3,7 @@ import { css } from "lit";
 export const styles = css`
   :host {
     display: block;
-    font-family: var(--hot-font-sans);
+    font-family: var(--font-family, var(--hot-font-sans));
   }
 
   .container {
@@ -38,28 +38,26 @@ export const styles = css`
     animation: spin 1s linear infinite;
     margin: 0 auto;
   }
-  /* Container that mimics the login button dimensions */
+  /* Container that mimics the avatar/dropdown-trigger dimensions */
   .loading-placeholder {
     display: inline-grid;
     place-items: center;
-    /* Use same styling as login-link button */
-    padding: var(--login-btn-padding, var(--hot-spacing-x-small) var(--hot-spacing-medium));
-    margin: var(--login-btn-margin, 0);
-    font-size: var(--login-btn-text-size, var(--hot-font-size-medium));
-    font-family: var(--login-btn-font-family, inherit);
-    border-radius: var(--login-btn-border-radius, var(--hot-border-radius-medium));
+    /* Match dropdown-trigger padding so size is stable pre/post load */
+    padding: var(--hot-spacing-x-small);
+    width: var(--hot-spacing-2x-large);
+    height: var(--hot-spacing-2x-large);
+    box-sizing: content-box;
   }
 
   /* Invisible text to reserve button width */
   .loading-placeholder-text {
-    visibility: hidden;
-    grid-area: 1 / 1;
+    display: none;
   }
 
   .spinner-small {
     grid-area: 1 / 1;
-    width: 1em;
-    height: 1em;
+    width: var(--hot-spacing-2x-large);
+    height: var(--hot-spacing-2x-large);
     border: 2px solid var(--hot-color-gray-200);
     border-top: 2px solid var(--hot-color-gray-600);
     border-radius: 50%;
@@ -87,7 +85,8 @@ export const styles = css`
     border: none;
     border-radius: 6px;
     font-size: 14px;
-    font-weight: 500;
+    font-family: var(--font-family, var(--hot-font-sans));
+    font-weight: var(--font-weight, 500);
     cursor: pointer;
     transition: all 0.2s;
   }
@@ -255,15 +254,21 @@ 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));
-    border-radius: var(--login-btn-border-radius, var(--hot-border-radius-medium));
+    border-radius: var(
+      --login-btn-border-radius,
+      var(--hot-border-radius-medium)
+    );
     text-decoration: none;
-    padding: var(--login-btn-padding, var(--hot-spacing-x-small) var(--hot-spacing-medium));
+    padding: var(
+      --login-btn-padding,
+      var(--hot-spacing-x-small) var(--hot-spacing-medium)
+    );
     margin: var(--login-btn-margin, 0);
     display: inline-block;
     cursor: pointer;
     transition: all 0.2s;
-    font-weight: var(--hot-font-weight-medium);
-    font-family: var(--login-btn-font-family, inherit);
+    font-weight: var(--login-btn-font-weight, var(--font-weight, var(--hot-font-weight-medium)));
+    font-family: var(--login-btn-font-family, var(--font-family, var(--hot-font-sans)));
   }
 
   /* Button variants - filled */
@@ -365,7 +370,6 @@ export const styles = css`
     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;
@@ -386,7 +390,7 @@ export const styles = css`
   .dropdown-content.open {
     opacity: 1;
     visibility: visible;
-    transform: translateY(0);
+    transform: translateY(-1px);
   }
 
   .dropdown-content button {
@@ -400,6 +404,7 @@ export const styles = css`
     text-align: left;
     transition: background-color 0.2s ease;
     gap: var(--hot-spacing-small);
+    font-family: var(--font-family, var(--hot-font-sans, inherit));
     font-size: var(--hot-font-size-small);
     color: var(--hot-color-gray-900);
   }
@@ -427,4 +432,65 @@ export const styles = css`
     width: 20px;
     height: 20px;
   }
+
+  /* Bar display mode */
+
+  :host([display="bar"]) {
+    width: 100%;
+  }
+
+  :host([display="bar"]) .dropdown {
+    display: block;
+    width: 100%;
+  }
+
+  .bar-trigger {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: var(--hot-spacing-small) var(--hot-spacing-medium);
+    background: none;
+    border: none;
+    cursor: pointer;
+    gap: var(--hot-spacing-small);
+    font-family: var(--font-family, var(--hot-font-sans, inherit));
+  }
+
+  .bar-trigger:hover,
+  .bar-trigger:active,
+  .bar-trigger:focus {
+    background: none;
+    outline: none;
+  }
+
+  .bar-info {
+    display: flex;
+    align-items: center;
+    gap: var(--hot-spacing-small);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .bar-email {
+    font-size: var(--hot-font-size-medium);
+    color: var(--hot-color-gray-900);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .bar-chevron {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    color: var(--hot-color-gray-900);
+  }
+
+  /* When bar-trigger is used as a login-link, override width behavior */
+  a.bar-trigger.login-link {
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+    text-decoration: none;
+  }
 `;

package/src/hanko-auth.ts

@@ -27,6 +27,8 @@ import accountIcon from "../assets/icon-account.svg";
 import logoutIcon from "../assets/icon-logout.svg";
 import mapIcon from "../assets/icon-map.svg";
 import checkIcon from "../assets/icon-check.svg";
+import chevronDownIcon from "../assets/chevron-down.svg";
+import chevronUpIcon from "../assets/chevron-up.svg";
 
 // Track if Hanko has been registered globally
 let hankoRegistered = false;
@@ -129,6 +131,9 @@ export class HankoAuth extends LitElement {
     | "primary"
     | "neutral"
     | "danger" = "primary";
+  // Display mode: "default" (compact avatar button) or "bar" (full-width bar with avatar + email + chevron)
+  @property({ type: String, reflect: true }) display: "default" | "bar" =
+    "default";
 
   // Internal state
   @state() private user: UserState | null = null;
@@ -167,6 +172,40 @@ export class HankoAuth extends LitElement {
     }
   };
 
+  /** Dropdown menu content for bar display mode (no email, only action links) */
+  private renderBarDropdownContent() {
+    return html`
+      <div class="dropdown-content ${this.isOpen ? "open" : ""}">
+        <button data-action="profile" @click=${this.handleDropdownSelect}>
+          <img src="${accountIcon}" class="icon" alt="Account icon" />
+          ${this.t("myHotAccount")}
+        </button>
+        ${this.osmRequired
+          ? this.osmConnected
+            ? html`
+                <button class="osm-connected" disabled>
+                  <img src="${checkIcon}" alt="Check icon" class="icon" />
+                  ${this.t("connectedToOsm")} (@${this.osmData?.osm_username})
+                </button>
+              `
+            : html`
+                <button
+                  data-action="connect-osm"
+                  @click=${this.handleDropdownSelect}
+                >
+                  <img src="${mapIcon}" alt="Check icon" class="icon" />
+                  ${this.t("connectToOsm")}
+                </button>
+              `
+          : ""}
+        <button data-action="logout" @click=${this.handleDropdownSelect}>
+          <img src="${logoutIcon}" alt="Log out icon" class="icon" />
+          ${this.t("logOut")}
+        </button>
+      </div>
+    `;
+  }
+
   // Private fields
   private _trailingSlashCache: Record<string, boolean> = {};
   private _debugMode = false;
@@ -865,7 +904,11 @@ export class HankoAuth extends LitElement {
     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) {
+    if (
+      changedProperties.has("user") &&
+      this.user === null &&
+      this.showProfile
+    ) {
       this.log("🔄 User logged out, re-attaching event listeners...");
       this._currentHankoAuthElement = null;
       this.setupEventListeners();
@@ -1483,8 +1526,34 @@ export class HankoAuth extends LitElement {
             </div>
           </div>
         `;
+      } else if (this.display === "bar") {
+        // Logged in, show-profile=false, display=bar: render full-width bar trigger
+        return html`
+          <div class="dropdown">
+            <button
+              @click=${this.toggleDropdown}
+              aria-label="${this.t("openAccountMenu")}"
+              aria-expanded=${this.isOpen}
+              aria-haspopup="true"
+              class="bar-trigger"
+            >
+              <div class="bar-info">
+                <span class="header-avatar">${initial}</span>
+                <span class="bar-email"
+                  >${this.user.email || this.user.id}</span
+                >
+              </div>
+              <img
+                src="${this.isOpen ? chevronUpIcon : chevronDownIcon}"
+                class="bar-chevron"
+                alt=""
+              />
+            </button>
+            ${this.renderBarDropdownContent()}
+          </div>
+        `;
       } else {
-        // Logged in, show-profile=false: render dropdown
+        // Logged in, show-profile=false, display=default: render compact dropdown
         return html`
           <div class="dropdown">
             <button
@@ -1621,6 +1690,24 @@ export class HankoAuth extends LitElement {
           returnTo,
         )}${this.osmRequired ? "&osm_required=true" : ""}${autoConnectParam}&lang=${this.lang}`;
 
+        /*  if (this.display === "bar") {
+          return html`<a
+            class="bar-trigger login-link ${this.buttonVariant} ${this.buttonColor}"
+            href="${loginUrl}"
+            @click=${(e: Event) => {
+              e.preventDefault();
+              window.location.href = loginUrl;
+            }}
+          >
+            <span class="bar-email">${this.t("logIn")}</span>
+            <img
+              src="${chevronDownIcon}"
+              class="bar-chevron"
+              alt=""
+            />
+          </a>`;
+        } */
+
         return html`<a
           class="login-link ${this.buttonVariant} ${this.buttonColor}"
           href="${loginUrl}"