@kya-os/consent 0.1.13 → 0.1.14

package/dist/cjs/templates/modes/oauth.template.js

@@ -0,0 +1,153 @@
+"use strict";
+/**
+ * OAuth Template
+ *
+ * OAuth redirect flow with provider branding.
+ *
+ * @module @kya-os/consent/templates/modes/oauth
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OAuthTemplate = void 0;
+const base_template_js_1 = require("../base/base-template.js");
+const components_js_1 = require("../base/components.js");
+const tokens_js_1 = require("../../styles/tokens.js");
+const escape_js_1 = require("../../security/escape.js");
+const modes_types_js_1 = require("../../types/modes.types.js");
+/**
+ * OAuth provider branding information.
+ */
+const PROVIDER_BRANDING = {
+    github: {
+        color: "#24292e",
+        name: "GitHub",
+        icon: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>`,
+    },
+    google: {
+        color: "#4285f4",
+        name: "Google",
+        icon: `<svg class="w-5 h-5" viewBox="0 0 24 24"><path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>`,
+    },
+    microsoft: {
+        color: "#0078d4",
+        name: "Microsoft",
+        icon: `<svg class="w-5 h-5" viewBox="0 0 24 24"><path fill="#f35325" d="M1 1h10v10H1z"/><path fill="#81bc06" d="M13 1h10v10H13z"/><path fill="#05a6f0" d="M1 13h10v10H1z"/><path fill="#ffba08" d="M13 13h10v10H13z"/></svg>`,
+    },
+    slack: {
+        color: "#4a154b",
+        name: "Slack",
+        icon: `<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"/></svg>`,
+    },
+    auth0: {
+        color: "#eb5424",
+        name: "Auth0",
+        icon: `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M21.98 7.448L19.62 0H4.347L2.02 7.448c-1.352 4.312.03 9.206 3.815 12.015L12.007 24l6.157-4.552c3.755-2.81 5.182-7.688 3.815-12.015l-6.16 4.58 2.343 7.45-6.157-4.597-6.158 4.58 2.358-7.433-6.188-4.55 7.63-.045L12.008 0l2.356 7.404 7.615.044z"/></svg>`,
+    },
+};
+/**
+ * OAuth Template
+ *
+ * Renders an OAuth consent page with:
+ * - Permission list
+ * - Expiration notice
+ * - Provider-branded continue button
+ */
+class OAuthTemplate extends base_template_js_1.BaseConsentTemplate {
+    get authMode() {
+        return modes_types_js_1.AUTH_MODES.OAUTH;
+    }
+    /**
+     * Set the OAuth authorization URL.
+     */
+    setOAuthUrl(url) {
+        this.oauthUrl = url;
+    }
+    get oauthConfig() {
+        return this.config.modeConfig?.oauth;
+    }
+    renderAuthContent() {
+        const config = this.oauthConfig;
+        const providerId = config?.providerId || this.config.provider || "oauth";
+        const branding = PROVIDER_BRANDING[providerId.toLowerCase()];
+        return `
+      <div class="space-y-4">
+        ${this.renderPermissionsList()}
+        <div class="pt-2">
+          <p class="text-sm text-gray-600">
+            You will be redirected to ${(0, escape_js_1.escapeHtml)(branding?.name || config?.providerName || "the identity provider")} to authenticate.
+          </p>
+        </div>
+        ${this.renderExpirationNotice()}
+      </div>
+    `;
+    }
+    /**
+     * Render permissions as a simple list.
+     */
+    renderPermissionsList() {
+        const { scopes } = this.config;
+        if (scopes.length === 0)
+            return "";
+        const items = scopes.map((s) => `<li>${(0, escape_js_1.escapeHtml)(s)}</li>`).join("");
+        return `
+      <div class="space-y-2">
+        <p class="text-sm font-medium text-gray-700">Requested permissions:</p>
+        <ul class="list-disc list-inside text-sm text-gray-600 space-y-1">
+          ${items}
+        </ul>
+      </div>
+    `;
+    }
+    /**
+     * Render expiration notice.
+     */
+    renderExpirationNotice() {
+        const { copy } = this.resolved;
+        const expirationDays = this.resolved.expirationDays || 30;
+        return (0, components_js_1.renderExpirationNotice)(copy.expirationText, expirationDays);
+    }
+    /**
+     * Override action buttons to show OAuth provider button.
+     */
+    renderActionButtons() {
+        const config = this.oauthConfig;
+        const providerId = config?.providerId || this.config.provider || "oauth";
+        const branding = PROVIDER_BRANDING[providerId.toLowerCase()];
+        const buttonText = config?.buttonText ||
+            `Continue with ${branding?.name || config?.providerName || "Provider"}`;
+        const { copy } = this.resolved;
+        // If OAuth URL is set, use a direct link
+        const oauthUrl = this.oauthUrl || this.config.oauthUrl;
+        if (oauthUrl) {
+            const buttonStyle = branding
+                ? `style="background-color: ${branding.color}"`
+                : "";
+            return `
+        <div class="${tokens_js_1.CONSENT_CLASSES.buttonGroup}">
+          <button type="button" onclick="window.close()" class="${tokens_js_1.CONSENT_CLASSES.buttonSecondary}">
+            ${(0, escape_js_1.escapeHtml)(copy.cancelButtonText)}
+          </button>
+          <a href="${(0, escape_js_1.escapeAttr)(oauthUrl)}"
+             class="${tokens_js_1.CONSENT_CLASSES.buttonPrimary} flex items-center justify-center gap-2"
+             ${buttonStyle}>
+            ${branding?.icon || ""}
+            ${(0, escape_js_1.escapeHtml)(buttonText)}
+          </a>
+        </div>
+      `;
+        }
+        // Fallback to standard buttons
+        return `
+      <div class="${tokens_js_1.CONSENT_CLASSES.buttonGroup}">
+        <button type="button" onclick="window.close()" class="${tokens_js_1.CONSENT_CLASSES.buttonSecondary}">
+          ${(0, escape_js_1.escapeHtml)(copy.cancelButtonText)}
+        </button>
+        <button type="submit" class="${tokens_js_1.CONSENT_CLASSES.buttonPrimary} btn-primary flex items-center justify-center gap-2">
+          ${branding?.icon || ""}
+          ${(0, escape_js_1.escapeHtml)(buttonText)}
+        </button>
+      </div>
+    `;
+    }
+}
+exports.OAuthTemplate = OAuthTemplate;
+//# sourceMappingURL=oauth.template.js.map

package/dist/cjs/templates/modes/oauth.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oauth.template.js","sourceRoot":"","sources":["../../../../src/templates/modes/oauth.template.ts"],"names":[],"mappings":"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"}

package/dist/cjs/templates/modes/otp.template.js

@@ -0,0 +1,316 @@
+"use strict";
+/**
+ * OTP Template
+ *
+ * One-Time Password authentication via SMS/email.
+ *
+ * @module @kya-os/consent/templates/modes/otp
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OTPTemplate = void 0;
+const base_template_js_1 = require("../base/base-template.js");
+const components_js_1 = require("../base/components.js");
+const escape_js_1 = require("../../security/escape.js");
+const modes_types_js_1 = require("../../types/modes.types.js");
+/**
+ * OTP Template
+ *
+ * Renders a two-step OTP flow:
+ * 1. Phone/email input to request code
+ * 2. Code input to verify
+ */
+class OTPTemplate extends base_template_js_1.BaseConsentTemplate {
+    get authMode() {
+        return modes_types_js_1.AUTH_MODES.OTP;
+    }
+    get otpConfig() {
+        return this.config.modeConfig?.otp;
+    }
+    renderAuthContent() {
+        const config = this.otpConfig;
+        const digits = config?.digits || 6;
+        return `
+      <div id="otp-request-container">
+        <form id="otp-request-form" class="space-y-4">
+          ${this.renderPhoneField(config)}
+          ${(0, components_js_1.renderErrorContainer)("otp-request-error")}
+          ${(0, components_js_1.renderFullWidthButton)("Send verification code", "submit")}
+        </form>
+      </div>
+      <div id="otp-verify-container" class="hidden">
+        <form id="otp-verify-form" class="space-y-4">
+          <div class="text-center mb-4">
+            <p class="text-sm text-gray-600">
+              ${(0, escape_js_1.escapeHtml)(config?.instructions || `Enter the ${digits}-digit code sent to your phone`)}
+            </p>
+          </div>
+          <div class="flex justify-center gap-2" id="otp-inputs">
+            ${this.renderOTPInputs(digits)}
+          </div>
+          ${(0, components_js_1.renderErrorContainer)("otp-verify-error")}
+          ${(0, components_js_1.renderFullWidthButton)("Verify", "submit")}
+          <div class="text-center">
+            <button type="button" id="resend-otp" class="text-sm link-primary disabled:opacity-50">
+              Resend code
+            </button>
+          </div>
+        </form>
+      </div>
+    `;
+    }
+    /**
+     * Render phone/email input field.
+     */
+    renderPhoneField(config) {
+        return (0, components_js_1.renderInput)("tel", "phone", config?.phoneLabel || "Phone number", config?.phonePlaceholder || "+1 (555) 123-4567", true, "tel");
+    }
+    /**
+     * Render OTP digit input boxes.
+     */
+    renderOTPInputs(digits) {
+        const inputs = [];
+        for (let i = 0; i < digits; i++) {
+            inputs.push(`
+        <input type="text" inputmode="numeric" pattern="[0-9]" maxlength="1"
+               class="w-12 h-14 text-center text-2xl font-bold border border-gray-300 rounded-lg shadow-sm focus-primary"
+               data-otp-index="${i}"
+               autocomplete="one-time-code" />
+      `);
+        }
+        return inputs.join("");
+    }
+    /**
+     * Override action buttons - form has its own submit.
+     */
+    renderActionButtons() {
+        return "";
+    }
+    renderModeScript() {
+        const serverUrl = (0, escape_js_1.escapeJs)(this.config.serverUrl);
+        const projectId = (0, escape_js_1.escapeJs)(this.config.projectId);
+        const sessionId = (0, escape_js_1.escapeJs)(this.config.sessionId);
+        const agentDid = (0, escape_js_1.escapeJs)(this.config.agentDid);
+        const tool = (0, escape_js_1.escapeJs)(this.config.tool);
+        const scopes = JSON.stringify(this.config.scopes);
+        const digits = this.otpConfig?.digits || 6;
+        const resendCooldown = this.otpConfig?.resendCooldown || 60;
+        return `
+<script>
+(function() {
+  const requestContainer = document.getElementById('otp-request-container');
+  const verifyContainer = document.getElementById('otp-verify-container');
+  const requestForm = document.getElementById('otp-request-form');
+  const verifyForm = document.getElementById('otp-verify-form');
+  const resendBtn = document.getElementById('resend-otp');
+  const otpInputs = document.querySelectorAll('[data-otp-index]');
+
+  const serverUrl = ${serverUrl};
+  const digits = ${digits};
+  const cooldown = ${resendCooldown};
+  let lastPhone = '';
+  let verificationId = '';
+
+  function getError(id) {
+    const container = document.getElementById(id);
+    return { container, div: container?.querySelector('div') };
+  }
+
+  function showError(id, message) {
+    const { container, div } = getError(id);
+    if (div) {
+      div.textContent = message;
+      container.classList.remove('hidden');
+    }
+  }
+
+  function hideError(id) {
+    const { container } = getError(id);
+    if (container) container.classList.add('hidden');
+  }
+
+  // OTP input auto-focus behavior
+  otpInputs.forEach((input, idx) => {
+    input.addEventListener('input', (e) => {
+      const value = e.target.value;
+      if (value && idx < otpInputs.length - 1) {
+        otpInputs[idx + 1].focus();
+      }
+    });
+
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Backspace' && !e.target.value && idx > 0) {
+        otpInputs[idx - 1].focus();
+      }
+    });
+
+    input.addEventListener('paste', (e) => {
+      e.preventDefault();
+      const paste = (e.clipboardData || window.clipboardData).getData('text');
+      const chars = paste.replace(/\\D/g, '').slice(0, digits).split('');
+      chars.forEach((char, i) => {
+        if (otpInputs[i]) otpInputs[i].value = char;
+      });
+      if (chars.length > 0 && otpInputs[chars.length - 1]) {
+        otpInputs[chars.length - 1].focus();
+      }
+    });
+  });
+
+  // Request OTP
+  requestForm?.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    hideError('otp-request-error');
+
+    const button = requestForm.querySelector('button[type="submit"]');
+    const phoneInput = requestForm.querySelector('input[name="phone"]');
+    lastPhone = phoneInput.value;
+
+    button.disabled = true;
+    button.textContent = 'Sending...';
+
+    try {
+      const response = await fetch(serverUrl + '/consent/otp/request', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          phone: lastPhone,
+          tool: ${tool},
+          scopes: ${scopes},
+          agent_did: ${agentDid},
+          session_id: ${sessionId},
+          project_id: ${projectId},
+        })
+      });
+
+      const result = await response.json();
+
+      if (result.success) {
+        verificationId = result.verificationId || '';
+        requestContainer.classList.add('hidden');
+        verifyContainer.classList.remove('hidden');
+        otpInputs[0]?.focus();
+        startResendCooldown();
+      } else {
+        showError('otp-request-error', result.error || 'Failed to send code');
+        button.disabled = false;
+        button.textContent = 'Send verification code';
+      }
+    } catch (err) {
+      showError('otp-request-error', 'Network error. Please try again.');
+      button.disabled = false;
+      button.textContent = 'Send verification code';
+    }
+  });
+
+  // Verify OTP
+  verifyForm?.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    hideError('otp-verify-error');
+
+    const button = verifyForm.querySelector('button[type="submit"]');
+    const code = Array.from(otpInputs).map(i => i.value).join('');
+
+    if (code.length !== digits) {
+      showError('otp-verify-error', 'Please enter the full code');
+      return;
+    }
+
+    button.disabled = true;
+    button.textContent = 'Verifying...';
+
+    try {
+      const response = await fetch(serverUrl + '/consent/otp/verify', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          phone: lastPhone,
+          code: code,
+          verification_id: verificationId,
+          tool: ${tool},
+          scopes: ${scopes},
+          agent_did: ${agentDid},
+          session_id: ${sessionId},
+          project_id: ${projectId},
+        })
+      });
+
+      const result = await response.json();
+
+      if (result.success) {
+        button.textContent = 'Success!';
+        button.style.backgroundColor = '#10B981';
+
+        if (result.redirectUrl) {
+          window.location.href = result.redirectUrl;
+        } else if (result.delegation_id) {
+          window.location.href = serverUrl + '/consent/success?delegation_id=' +
+            encodeURIComponent(result.delegation_id) +
+            '&project_id=' + encodeURIComponent(${projectId});
+        }
+      } else {
+        showError('otp-verify-error', result.error || 'Invalid code');
+        button.disabled = false;
+        button.textContent = 'Verify';
+      }
+    } catch (err) {
+      showError('otp-verify-error', 'Network error. Please try again.');
+      button.disabled = false;
+      button.textContent = 'Verify';
+    }
+  });
+
+  // Resend cooldown
+  function startResendCooldown() {
+    resendBtn.disabled = true;
+    let remaining = cooldown;
+    resendBtn.textContent = 'Resend code (' + remaining + 's)';
+
+    const timer = setInterval(() => {
+      remaining--;
+      if (remaining <= 0) {
+        clearInterval(timer);
+        resendBtn.disabled = false;
+        resendBtn.textContent = 'Resend code';
+      } else {
+        resendBtn.textContent = 'Resend code (' + remaining + 's)';
+      }
+    }, 1000);
+  }
+
+  resendBtn?.addEventListener('click', async () => {
+    if (resendBtn.disabled) return;
+
+    resendBtn.disabled = true;
+    try {
+      const response = await fetch(serverUrl + '/consent/otp/request', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          phone: lastPhone,
+          tool: ${tool},
+          scopes: ${scopes},
+          agent_did: ${agentDid},
+          session_id: ${sessionId},
+          project_id: ${projectId},
+        })
+      });
+
+      const result = await response.json();
+      if (result.success) {
+        verificationId = result.verificationId || verificationId;
+        startResendCooldown();
+      } else {
+        resendBtn.disabled = false;
+        alert(result.error || 'Failed to resend');
+      }
+    } catch (err) {
+      resendBtn.disabled = false;
+      alert('Network error');
+    }
+  });
+})();
+</script>`;
+    }
+}
+exports.OTPTemplate = OTPTemplate;
+//# sourceMappingURL=otp.template.js.map

package/dist/cjs/templates/modes/otp.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp.template.js","sourceRoot":"","sources":["../../../../src/templates/modes/otp.template.ts"],"names":[],"mappings":"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"}

package/dist/cjs/templates/modes/success.template.js

@@ -0,0 +1,140 @@
+"use strict";
+/**
+ * Success Page Template
+ *
+ * Rendered after successful consent approval.
+ *
+ * @module @kya-os/consent/templates/modes/success
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuccessTemplate = void 0;
+exports.renderSuccessPage = renderSuccessPage;
+const tokens_js_1 = require("../../styles/tokens.js");
+const stylesheet_js_1 = require("../../styles/stylesheet.js");
+const components_js_1 = require("../base/components.js");
+const escape_js_1 = require("../../security/escape.js");
+const colors_js_1 = require("../../constants/colors.js");
+const defaults_js_1 = require("../../constants/defaults.js");
+const css_variables_js_1 = require("../../styles/css-variables.js");
+/**
+ * Success Page Template
+ *
+ * Standalone template for the success page (not extending BaseConsentTemplate).
+ * Renders a simple confirmation after consent is granted.
+ */
+class SuccessTemplate {
+    constructor(config, branding) {
+        this.config = config;
+        const primaryColor = branding?.primaryColor || colors_js_1.DEFAULT_COLORS.PRIMARY;
+        const secondaryColor = branding?.secondaryColor || colors_js_1.DEFAULT_COLORS.SECONDARY;
+        this.branding = {
+            primaryColor,
+            secondaryColor,
+            logoUrl: branding?.logoUrl,
+            companyName: branding?.companyName,
+            cssVars: {
+                "--consent-primary": primaryColor,
+                "--consent-secondary": secondaryColor,
+                "--consent-primary-rgb": (0, css_variables_js_1.hexToRgb)(primaryColor),
+                "--consent-secondary-rgb": (0, css_variables_js_1.hexToRgb)(secondaryColor),
+            },
+        };
+    }
+    /**
+     * Render the success page.
+     */
+    render() {
+        const title = this.config.title || defaults_js_1.DEFAULT_SUCCESS.title;
+        const description = this.config.description || defaults_js_1.DEFAULT_SUCCESS.description;
+        const buttonText = this.config.continueButtonText || defaults_js_1.DEFAULT_SUCCESS.continueButtonText;
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  ${this.renderHead()}
+</head>
+<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">
+  <div class="${tokens_js_1.CONSENT_CLASSES.container}">
+    <div class="${tokens_js_1.CONSENT_CLASSES.content}">
+      <div class="text-center py-8">
+        ${(0, components_js_1.renderSuccessIcon)()}
+        <h1 class="${tokens_js_1.CONSENT_CLASSES.title} mb-4">${(0, escape_js_1.escapeHtml)(title)}</h1>
+        <p class="text-gray-600 mb-8">${(0, escape_js_1.escapeHtml)(description)}</p>
+        ${this.renderCredentialInfo()}
+        <div class="mt-6">
+          ${(0, components_js_1.renderFullWidthButton)(buttonText, "button")}
+        </div>
+      </div>
+    </div>
+  </div>
+  ${this.renderScript()}
+</body>
+</html>`;
+    }
+    /**
+     * Render the <head> section.
+     */
+    renderHead() {
+        return `
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com; style-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com; img-src 'self' data: https:; font-src 'self' data:;">
+      <title>Access Granted</title>
+      <script src="https://cdn.tailwindcss.com"></script>
+      <style>
+        ${(0, stylesheet_js_1.generateHeadStyles)(this.branding)}
+      </style>
+    `;
+    }
+    /**
+     * Render credential/delegation info.
+     */
+    renderCredentialInfo() {
+        if (!this.config.delegationId) {
+            return "";
+        }
+        return `
+      <div class="bg-gray-50 rounded-lg p-4 mb-4">
+        <p class="text-xs text-gray-500 uppercase tracking-wide mb-1">Delegation ID</p>
+        <p class="text-sm font-mono text-gray-700 break-all">${(0, escape_js_1.escapeHtml)(this.config.delegationId)}</p>
+      </div>
+    `;
+    }
+    /**
+     * Render client-side script.
+     */
+    renderScript() {
+        const autoClose = this.config.autoClose ?? false;
+        return `
+<script>
+(function() {
+  const closeBtn = document.querySelector('button');
+  const autoClose = ${autoClose};
+
+  if (closeBtn) {
+    closeBtn.addEventListener('click', function() {
+      window.close();
+      // If window.close() doesn't work (not opened by script), redirect home
+      setTimeout(function() {
+        window.location.href = '/';
+      }, 100);
+    });
+  }
+
+  if (autoClose) {
+    setTimeout(function() {
+      window.close();
+    }, 3000);
+  }
+})();
+</script>`;
+    }
+}
+exports.SuccessTemplate = SuccessTemplate;
+/**
+ * Render a success page with the given configuration.
+ */
+function renderSuccessPage(config, branding) {
+    const template = new SuccessTemplate(config, branding);
+    return template.render();
+}
+//# sourceMappingURL=success.template.js.map

package/dist/cjs/templates/modes/success.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"success.template.js","sourceRoot":"","sources":["../../../../src/templates/modes/success.template.ts"],"names":[],"mappings":";AAAA;;;;;;GAMG;;;AA2IH,8CAMC;AA/ID,sDAAyD;AACzD,8DAAgE;AAChE,yDAAiF;AACjF,wDAAsD;AAGtD,yDAA2D;AAC3D,6DAA8D;AAC9D,oEAAyD;AAEzD;;;;;GAKG;AACH,MAAa,eAAe;IAI1B,YAAY,MAAyB,EAAE,QAA2C;QAChF,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,MAAM,YAAY,GAAG,QAAQ,EAAE,YAAY,IAAI,0BAAc,CAAC,OAAO,CAAC;QACtE,MAAM,cAAc,GAAG,QAAQ,EAAE,cAAc,IAAI,0BAAc,CAAC,SAAS,CAAC;QAC5E,IAAI,CAAC,QAAQ,GAAG;YACd,YAAY;YACZ,cAAc;YACd,OAAO,EAAE,QAAQ,EAAE,OAAO;YAC1B,WAAW,EAAE,QAAQ,EAAE,WAAW;YAClC,OAAO,EAAE;gBACP,mBAAmB,EAAE,YAAY;gBACjC,qBAAqB,EAAE,cAAc;gBACrC,uBAAuB,EAAE,IAAA,2BAAQ,EAAC,YAAY,CAAC;gBAC/C,yBAAyB,EAAE,IAAA,2BAAQ,EAAC,cAAc,CAAC;aACpD;SACF,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,IAAI,6BAAe,CAAC,KAAK,CAAC;QACzD,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,IAAI,6BAAe,CAAC,WAAW,CAAC;QAC3E,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,kBAAkB,IAAI,6BAAe,CAAC,kBAAkB,CAAC;QAExF,OAAO;;;IAGP,IAAI,CAAC,UAAU,EAAE;;;gBAGL,2BAAe,CAAC,SAAS;kBACvB,2BAAe,CAAC,OAAO;;UAE/B,IAAA,iCAAiB,GAAE;qBACR,2BAAe,CAAC,KAAK,UAAU,IAAA,sBAAU,EAAC,KAAK,CAAC;wCAC7B,IAAA,sBAAU,EAAC,WAAW,CAAC;UACrD,IAAI,CAAC,oBAAoB,EAAE;;YAEzB,IAAA,qCAAqB,EAAC,UAAU,EAAE,QAAQ,CAAC;;;;;IAKnD,IAAI,CAAC,YAAY,EAAE;;QAEf,CAAC;IACP,CAAC;IAED;;OAEG;IACK,UAAU;QAChB,OAAO;;;;;;;UAOD,IAAA,kCAAkB,EAAC,IAAI,CAAC,QAAQ,CAAC;;KAEtC,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,oBAAoB;QAC1B,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC;YAC9B,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,OAAO;;;+DAGoD,IAAA,sBAAU,EAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC;;KAE9F,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,YAAY;QAClB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,IAAI,KAAK,CAAC;QAEjD,OAAO;;;;sBAIW,SAAS;;;;;;;;;;;;;;;;;;UAkBrB,CAAC;IACT,CAAC;CACF;AApHD,0CAoHC;AAED;;GAEG;AACH,SAAgB,iBAAiB,CAC/B,MAAyB,EACzB,QAA2C;IAE3C,MAAM,QAAQ,GAAG,IAAI,eAAe,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACvD,OAAO,QAAQ,CAAC,MAAM,EAAE,CAAC;AAC3B,CAAC"}