@herdingbits/trailhead-webawesome 0.1.2 → 0.2.0

package/dist/adapter.d.ts

@@ -1,7 +1,7 @@
 /**
  * Web Awesome Design System Adapter
  */
-import type { DesignSystemAdapter, FeedbackAdapter } from '@herdingbits/trailhead-types/adapters';
+import type { DesignSystemAdapter, FeedbackAdapter, AuthAdapter } from '@herdingbits/trailhead-types/adapters';
 export interface WebAwesomeAdapterConfig {
     /** URL where Web Awesome is hosted (CDN or local path). Defaults to `${shellUrl}/webawesome`. */
     webAwesomeUrl?: string;
@@ -10,6 +10,7 @@ export declare class WebAwesomeAdapter implements DesignSystemAdapter {
     name: string;
     version: string;
     feedback: FeedbackAdapter;
+    auth: AuthAdapter;
     private readonly config?;
     constructor(config?: WebAwesomeAdapterConfig);
     init(shellUrl: string): Promise<void>;

package/dist/adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"adapter.d.ts","sourceRoot":"","sources":["../src/adapter.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAA4C,MAAM,uCAAuC,CAAC;AA2F5I,MAAM,WAAW,uBAAuB;IACtC,iGAAiG;IACjG,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,qBAAa,iBAAkB,YAAW,mBAAmB;IAC3D,IAAI,SAAgB;IACpB,OAAO,SAAW;IAClB,QAAQ,EAAE,eAAe,CAAC;IAC1B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAA0B;gBAEtC,MAAM,CAAC,EAAE,uBAAuB;IAKtC,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;CAkB5C"}
+{"version":3,"file":"adapter.d.ts","sourceRoot":"","sources":["../src/adapter.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAA4C,WAAW,EAAuC,MAAM,uCAAuC,CAAC;AAuJ9L,MAAM,WAAW,uBAAuB;IACtC,iGAAiG;IACjG,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,qBAAa,iBAAkB,YAAW,mBAAmB;IAC3D,IAAI,SAAgB;IACpB,OAAO,SAAW;IAClB,QAAQ,EAAE,eAAe,CAAC;IAC1B,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAA0B;gBAEtC,MAAM,CAAC,EAAE,uBAAuB;IAMtC,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;CAkB5C"}

package/dist/adapter.js

@@ -75,12 +75,67 @@ class WebAwesomeFeedbackAdapter {
         });
     }
 }
+class WebAwesomeAuthAdapter {
+    promptCredentials(errorMessage) {
+        let settle;
+        const result = new Promise((resolve) => {
+            settle = resolve;
+        });
+        let settled = false;
+        const dialog = document.createElement("div");
+        dialog.className = "shell-dialog-overlay";
+        dialog.innerHTML = `
+      <div class="shell-dialog">
+        <div class="shell-dialog-title">Session Expired</div>
+        <div class="shell-dialog-message">Sign in to continue where you left off.</div>
+        ${errorMessage ? `<div class="shell-dialog-error">${errorMessage}</div>` : ""}
+        <form class="shell-auth-form">
+          <input type="text" name="username" placeholder="Username" autocomplete="username" required />
+          <input type="password" name="password" placeholder="Password" autocomplete="current-password" required />
+          <div class="shell-dialog-buttons">
+            <button type="button" class="shell-btn shell-btn-secondary" data-action="cancel">Cancel</button>
+            <button type="submit" class="shell-btn shell-btn-primary">Sign In</button>
+          </div>
+        </form>
+      </div>
+    `;
+        const settleOnce = (value) => {
+            if (settled)
+                return;
+            settled = true;
+            dialog.remove();
+            settle(value);
+        };
+        const form = dialog.querySelector("form");
+        form.addEventListener("submit", (e) => {
+            e.preventDefault();
+            const data = new FormData(form);
+            settleOnce({
+                username: String(data.get("username") ?? ""),
+                password: String(data.get("password") ?? ""),
+            });
+        });
+        dialog.querySelector('[data-action="cancel"]')?.addEventListener("click", () => settleOnce(null));
+        // Click outside to cancel — matches showDialog's existing convention.
+        dialog.onclick = (e) => {
+            if (e.target === dialog)
+                settleOnce(null);
+        };
+        document.body.appendChild(dialog);
+        dialog.querySelector('input[name="username"]')?.focus();
+        return {
+            result,
+            close: () => settleOnce(null),
+        };
+    }
+}
 export class WebAwesomeAdapter {
     constructor(config) {
         this.name = "webawesome";
         this.version = "1.0.0";
         this.config = config;
         this.feedback = new WebAwesomeFeedbackAdapter();
+        this.auth = new WebAwesomeAuthAdapter();
     }
     async init(shellUrl) {
         try {

package/dist/shell.css

@@ -285,3 +285,32 @@ body {
 .shell-btn-default:hover {
   background-color: #e5e7eb;
 }
+
+/* Re-authentication prompt */
+.shell-dialog-error {
+  color: #dc2626;
+  background-color: #fef2f2;
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 1rem;
+  font-size: 0.875rem;
+}
+
+.shell-auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.shell-auth-form input {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 0.875rem;
+}
+
+.shell-auth-form input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herdingbits/trailhead-webawesome",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Web Awesome web components adapter for Trailhead. Vanilla TypeScript, no React required.",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,12 +21,12 @@
     "build": "npm run clean && tsc && cp src/shell.css dist/"
   },
   "peerDependencies": {
-    "@herdingbits/trailhead-core": "^0.1.0",
-    "@awesome.me/webawesome": "^3.6.0"
+    "@awesome.me/webawesome": "^3.6.0",
+    "@herdingbits/trailhead-core": "^0.2.0"
   },
   "devDependencies": {
-    "@herdingbits/trailhead-types": "^0.1.0",
     "@awesome.me/webawesome": "^3.10.0",
+    "@herdingbits/trailhead-types": "^0.2.0",
     "typescript": "^6.0.3"
   },
   "keywords": [