npm - @hasna/connectors - Versions diffs - 0.7.1 → 0.7.2 - Mend

@hasna/connectors 0.7.1 → 0.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/bin/index.js CHANGED Viewed

@@ -5254,13 +5254,38 @@ function getAllConnectorsWithAuth() {
     };
   });
 }
-function errorPage(title, message, hint) {
-  return `<!DOCTYPE html><html><head><meta charset="utf-8"></head><body style="font-family:system-ui,sans-serif;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background:var(--bg,#0a0a0a);color:var(--fg,#e5e5e5);">
-    <style>@media(prefers-color-scheme:light){:root{--bg:#fff;--fg:#111;--sub:#666;--hint:#888}}:root{--bg:#0a0a0a;--fg:#e5e5e5;--sub:#888;--hint:#666}</style>
-    <div style="text-align:center;">
-      <h2 style="color:#ef4444;">${title}</h2>
-      <p style="color:var(--sub);">${message}</p>
-      ${hint ? `<p style="color:var(--hint);font-size:14px;">${hint}</p>` : ""}
+function oauthPage(type, title, message, hint, extra) {
+  const icons = {
+    success: `<div class="icon icon-success"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg></div>`,
+    error: `<div class="icon icon-error"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg></div>`,
+    warning: `<div class="icon icon-warning"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg></div>`
+  };
+  return `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+    <style>
+      * { margin:0; padding:0; box-sizing:border-box; }
+      body { font-family:ui-sans-serif,system-ui,-apple-system,sans-serif; display:flex; justify-content:center; align-items:center; min-height:100vh; background:#09090b; color:#fafafa; }
+      .card { background:#18181b; border:1px solid #27272a; border-radius:12px; padding:48px 40px; max-width:420px; width:100%; text-align:center; }
+      .icon { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 24px; }
+      .icon svg { width:32px; height:32px; }
+      .icon-success { background:#052e16; }
+      .icon-success svg { color:#22c55e; }
+      .icon-error { background:#450a0a; }
+      .icon-error svg { color:#ef4444; }
+      .icon-warning { background:#422006; }
+      .icon-warning svg { color:#eab308; }
+      h2 { font-size:24px; font-weight:600; margin-bottom:8px; color:#fafafa; }
+      .subtitle { color:#a1a1aa; font-size:15px; margin-top:12px; line-height:1.5; }
+      .connector { color:#22c55e; font-weight:600; }
+      .hint { color:#52525b; font-size:13px; margin-top:24px; }
+      code, .cmd { background:#27272a; color:#e4e4e7; padding:2px 8px; border-radius:4px; font-family:ui-monospace,monospace; font-size:12px; }
+    </style>
+  </head><body>
+    <div class="card">
+      ${icons[type]}
+      <h2>${title}</h2>
+      <p class="subtitle">${message}</p>
+      ${hint ? `<p class="hint">${hint}</p>` : ""}
+      ${extra?.script ? `<script>${extra.script}</script>` : ""}
     </div>
   </body></html>`;
 }
@@ -5586,7 +5611,7 @@ Dashboard not found at: ${dashboardDir}`);
         const redirectUri = `http://localhost:${port}/oauth/${name}/callback`;
         const authUrl = getOAuthStartUrl(name, redirectUri);
         if (!authUrl) {
-          return htmlResponse(errorPage("OAuth Not Available", `No OAuth client credentials found for <strong>${name}</strong>.`, `Set up credentials at <code>~/.connectors/connect-${name}/credentials.json</code>`));
+          return htmlResponse(oauthPage("warning", "OAuth Not Available", `No OAuth client credentials found for <span class="connector">${name}</span>.`, `Set up credentials at <code>~/.connectors/connect-${name}/credentials.json</code>`));
         }
         return Response.redirect(authUrl, 302);
       }
@@ -5597,46 +5622,21 @@ Dashboard not found at: ${dashboardDir}`);
         const error = url2.searchParams.get("error");
         const state = url2.searchParams.get("state");
         if (error) {
-          return htmlResponse(errorPage("Authentication Failed", error, "You can close this window."));
+          return htmlResponse(oauthPage("error", "Authentication Failed", error, "You can close this window."));
         }
         if (!validateOAuthState(state, name)) {
-          return htmlResponse(errorPage("Invalid State", "CSRF validation failed. The OAuth state parameter is missing or invalid.", "Please try again from the dashboard."));
+          return htmlResponse(oauthPage("error", "Invalid State", "CSRF validation failed. The OAuth state parameter is missing or invalid.", "Please try again from the dashboard."));
         }
         if (!code) {
-          return htmlResponse(errorPage("Missing Authorization Code", "No code received from the OAuth provider.", "You can close this window and try again."));
+          return htmlResponse(oauthPage("error", "Missing Authorization Code", "No code received from the OAuth provider.", "You can close this window and try again."));
         }
         try {
           const redirectUri = `http://localhost:${port}/oauth/${name}/callback`;
           await exchangeOAuthCode(name, code, redirectUri);
           logActivity("oauth_connected", name);
-          return htmlResponse(`<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-            <style>
-              * { margin:0; padding:0; box-sizing:border-box; }
-              body { font-family:ui-sans-serif,system-ui,-apple-system,sans-serif; display:flex; justify-content:center; align-items:center; min-height:100vh; background:#09090b; color:#fafafa; }
-              .card { background:#18181b; border:1px solid #27272a; border-radius:12px; padding:48px 40px; max-width:420px; text-align:center; }
-              .icon { width:64px; height:64px; border-radius:50%; background:#052e16; display:flex; align-items:center; justify-content:center; margin:0 auto 24px; }
-              .icon svg { width:32px; height:32px; color:#22c55e; }
-              h2 { font-size:24px; font-weight:600; margin-bottom:8px; color:#fafafa; }
-              .connector { color:#22c55e; font-weight:600; }
-              .subtitle { color:#a1a1aa; font-size:15px; margin-top:12px; line-height:1.5; }
-              .hint { color:#52525b; font-size:13px; margin-top:24px; }
-              .cmd { background:#27272a; color:#e4e4e7; padding:2px 8px; border-radius:4px; font-family:ui-monospace,monospace; font-size:12px; }
-            </style>
-          </head><body>
-            <div class="card">
-              <div class="icon"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg></div>
-              <h2>Connected!</h2>
-              <p class="subtitle"><span class="connector">${name}</span> is now authenticated and ready to use.</p>
-              <p class="hint">You can close this window.<br>Try <span class="cmd">connectors run ${name} --help</span></p>
-              <script>
-                if (window.opener) {
-                  window.opener.postMessage({ type: 'oauth-complete', connector: '${name}' }, 'http://localhost:${port}');
-                }
-              </script>
-            </div>
-          </body></html>`);
+          return htmlResponse(oauthPage("success", "Connected!", `<span class="connector">${name}</span> is now authenticated and ready to use.`, `You can close this window.<br>Try <code>connectors run ${name} --help</code>`, { script: `if(window.opener){window.opener.postMessage({type:'oauth-complete',connector:'${name}'},'http://localhost:${port}');}` }));
         } catch (e) {
-          return htmlResponse(errorPage("Authentication Failed", e instanceof Error ? e.message : "Unknown error", "You can close this window."));
+          return htmlResponse(oauthPage("error", "Authentication Failed", e instanceof Error ? e.message : "Unknown error", "You can close this window."));
         }
       }
       if (method === "OPTIONS") {
@@ -7545,7 +7545,7 @@ var PRESETS = {
   commerce: { description: "Commerce and finance", connectors: ["stripe", "shopify", "revolut", "mercury", "pandadoc"] }
 };
 var program2 = new Command;
-program2.name("connectors").description("Install API connectors for your project").version("0.7.1").enablePositionalOptions();
+program2.name("connectors").description("Install API connectors for your project").version("0.7.2").enablePositionalOptions();
 program2.command("interactive", { isDefault: true }).alias("i").description("Interactive connector browser").action(() => {
   if (!isTTY) {
     console.log(`Non-interactive environment detected. Use a subcommand:

package/bin/mcp.js CHANGED Viewed

@@ -21013,7 +21013,7 @@ async function getConnectorCommandHelp(name, command) {
 loadConnectorVersions();
 var server = new McpServer({
   name: "connectors",
-  version: "0.7.1"
+  version: "0.7.2"
 });
 server.registerTool("search_connectors", {
   title: "Search Connectors",

package/bin/serve.js CHANGED Viewed

@@ -1732,13 +1732,38 @@ function getAllConnectorsWithAuth() {
     };
   });
 }
-function errorPage(title, message, hint) {
-  return `<!DOCTYPE html><html><head><meta charset="utf-8"></head><body style="font-family:system-ui,sans-serif;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background:var(--bg,#0a0a0a);color:var(--fg,#e5e5e5);">
-    <style>@media(prefers-color-scheme:light){:root{--bg:#fff;--fg:#111;--sub:#666;--hint:#888}}:root{--bg:#0a0a0a;--fg:#e5e5e5;--sub:#888;--hint:#666}</style>
-    <div style="text-align:center;">
-      <h2 style="color:#ef4444;">${title}</h2>
-      <p style="color:var(--sub);">${message}</p>
-      ${hint ? `<p style="color:var(--hint);font-size:14px;">${hint}</p>` : ""}
+function oauthPage(type, title, message, hint, extra) {
+  const icons = {
+    success: `<div class="icon icon-success"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg></div>`,
+    error: `<div class="icon icon-error"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg></div>`,
+    warning: `<div class="icon icon-warning"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg></div>`
+  };
+  return `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+    <style>
+      * { margin:0; padding:0; box-sizing:border-box; }
+      body { font-family:ui-sans-serif,system-ui,-apple-system,sans-serif; display:flex; justify-content:center; align-items:center; min-height:100vh; background:#09090b; color:#fafafa; }
+      .card { background:#18181b; border:1px solid #27272a; border-radius:12px; padding:48px 40px; max-width:420px; width:100%; text-align:center; }
+      .icon { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 24px; }
+      .icon svg { width:32px; height:32px; }
+      .icon-success { background:#052e16; }
+      .icon-success svg { color:#22c55e; }
+      .icon-error { background:#450a0a; }
+      .icon-error svg { color:#ef4444; }
+      .icon-warning { background:#422006; }
+      .icon-warning svg { color:#eab308; }
+      h2 { font-size:24px; font-weight:600; margin-bottom:8px; color:#fafafa; }
+      .subtitle { color:#a1a1aa; font-size:15px; margin-top:12px; line-height:1.5; }
+      .connector { color:#22c55e; font-weight:600; }
+      .hint { color:#52525b; font-size:13px; margin-top:24px; }
+      code, .cmd { background:#27272a; color:#e4e4e7; padding:2px 8px; border-radius:4px; font-family:ui-monospace,monospace; font-size:12px; }
+    </style>
+  </head><body>
+    <div class="card">
+      ${icons[type]}
+      <h2>${title}</h2>
+      <p class="subtitle">${message}</p>
+      ${hint ? `<p class="hint">${hint}</p>` : ""}
+      ${extra?.script ? `<script>${extra.script}</script>` : ""}
     </div>
   </body></html>`;
 }
@@ -2064,7 +2089,7 @@ Dashboard not found at: ${dashboardDir}`);
         const redirectUri = `http://localhost:${port}/oauth/${name}/callback`;
         const authUrl = getOAuthStartUrl(name, redirectUri);
         if (!authUrl) {
-          return htmlResponse(errorPage("OAuth Not Available", `No OAuth client credentials found for <strong>${name}</strong>.`, `Set up credentials at <code>~/.connectors/connect-${name}/credentials.json</code>`));
+          return htmlResponse(oauthPage("warning", "OAuth Not Available", `No OAuth client credentials found for <span class="connector">${name}</span>.`, `Set up credentials at <code>~/.connectors/connect-${name}/credentials.json</code>`));
         }
         return Response.redirect(authUrl, 302);
       }
@@ -2075,46 +2100,21 @@ Dashboard not found at: ${dashboardDir}`);
         const error = url2.searchParams.get("error");
         const state = url2.searchParams.get("state");
         if (error) {
-          return htmlResponse(errorPage("Authentication Failed", error, "You can close this window."));
+          return htmlResponse(oauthPage("error", "Authentication Failed", error, "You can close this window."));
         }
         if (!validateOAuthState(state, name)) {
-          return htmlResponse(errorPage("Invalid State", "CSRF validation failed. The OAuth state parameter is missing or invalid.", "Please try again from the dashboard."));
+          return htmlResponse(oauthPage("error", "Invalid State", "CSRF validation failed. The OAuth state parameter is missing or invalid.", "Please try again from the dashboard."));
         }
         if (!code) {
-          return htmlResponse(errorPage("Missing Authorization Code", "No code received from the OAuth provider.", "You can close this window and try again."));
+          return htmlResponse(oauthPage("error", "Missing Authorization Code", "No code received from the OAuth provider.", "You can close this window and try again."));
         }
         try {
           const redirectUri = `http://localhost:${port}/oauth/${name}/callback`;
           await exchangeOAuthCode(name, code, redirectUri);
           logActivity("oauth_connected", name);
-          return htmlResponse(`<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-            <style>
-              * { margin:0; padding:0; box-sizing:border-box; }
-              body { font-family:ui-sans-serif,system-ui,-apple-system,sans-serif; display:flex; justify-content:center; align-items:center; min-height:100vh; background:#09090b; color:#fafafa; }
-              .card { background:#18181b; border:1px solid #27272a; border-radius:12px; padding:48px 40px; max-width:420px; text-align:center; }
-              .icon { width:64px; height:64px; border-radius:50%; background:#052e16; display:flex; align-items:center; justify-content:center; margin:0 auto 24px; }
-              .icon svg { width:32px; height:32px; color:#22c55e; }
-              h2 { font-size:24px; font-weight:600; margin-bottom:8px; color:#fafafa; }
-              .connector { color:#22c55e; font-weight:600; }
-              .subtitle { color:#a1a1aa; font-size:15px; margin-top:12px; line-height:1.5; }
-              .hint { color:#52525b; font-size:13px; margin-top:24px; }
-              .cmd { background:#27272a; color:#e4e4e7; padding:2px 8px; border-radius:4px; font-family:ui-monospace,monospace; font-size:12px; }
-            </style>
-          </head><body>
-            <div class="card">
-              <div class="icon"><svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg></div>
-              <h2>Connected!</h2>
-              <p class="subtitle"><span class="connector">${name}</span> is now authenticated and ready to use.</p>
-              <p class="hint">You can close this window.<br>Try <span class="cmd">connectors run ${name} --help</span></p>
-              <script>
-                if (window.opener) {
-                  window.opener.postMessage({ type: 'oauth-complete', connector: '${name}' }, 'http://localhost:${port}');
-                }
-              </script>
-            </div>
-          </body></html>`);
+          return htmlResponse(oauthPage("success", "Connected!", `<span class="connector">${name}</span> is now authenticated and ready to use.`, `You can close this window.<br>Try <code>connectors run ${name} --help</code>`, { script: `if(window.opener){window.opener.postMessage({type:'oauth-complete',connector:'${name}'},'http://localhost:${port}');}` }));
         } catch (e) {
-          return htmlResponse(errorPage("Authentication Failed", e instanceof Error ? e.message : "Unknown error", "You can close this window."));
+          return htmlResponse(oauthPage("error", "Authentication Failed", e instanceof Error ? e.message : "Unknown error", "You can close this window."));
         }
       }
       if (method === "OPTIONS") {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hasna/connectors",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Open source connector library - Install API connectors with a single command",
   "type": "module",
   "bin": {