@idp.global/catalog 3.2.0 → 3.4.0

package/dist_ts_web/elements/idp-secure-account-card.d.ts

@@ -0,0 +1,37 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import './idp-auth-card.js';
+import './idp-option-row.js';
+import './idp-otp-input.js';
+import './idp-status-icon.js';
+import './idp-button.js';
+export type TIdpSecureAccountStage = 'choice' | 'totp' | 'backup-codes' | 'done';
+declare global {
+    interface HTMLElementTagNameMap {
+        'idp-secure-account-card': IdpSecureAccountCard;
+    }
+}
+/**
+ * Post-registration security enrollment card. Purely presentational: the host
+ * runs the WebAuthn/TOTP requests and drives `stage`, reacting to
+ * idp-secure-passkey, idp-secure-totp, idp-secure-totp-verify, idp-secure-skip
+ * and idp-secure-continue.
+ */
+export declare class IdpSecureAccountCard extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    static demoGroups: string[];
+    accessor stage: TIdpSecureAccountStage;
+    /** disables actions while the host performs a request */
+    accessor busy: boolean;
+    accessor errorText: string;
+    /** manual-entry TOTP secret shown during the totp stage */
+    accessor totpSecret: string;
+    /** otpauth:// URL; rendered as a tappable link for phone authenticators */
+    accessor totpOtpauthUrl: string;
+    /** one-time backup codes shown after successful TOTP verification */
+    accessor backupCodes: string[];
+    /** which method completed, for the done stage copy */
+    accessor doneMethod: 'passkey' | 'totp' | '';
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+    private emit;
+}

package/dist_ts_web/elements/idp-secure-account-card.js

@@ -0,0 +1,348 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, html, property, customElement, css } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+import './idp-auth-card.js';
+import './idp-option-row.js';
+import './idp-otp-input.js';
+import './idp-status-icon.js';
+import './idp-button.js';
+/**
+ * Post-registration security enrollment card. Purely presentational: the host
+ * runs the WebAuthn/TOTP requests and drives `stage`, reacting to
+ * idp-secure-passkey, idp-secure-totp, idp-secure-totp-verify, idp-secure-skip
+ * and idp-secure-continue.
+ */
+let IdpSecureAccountCard = (() => {
+    let _classDecorators = [customElement('idp-secure-account-card')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _stage_decorators;
+    let _stage_initializers = [];
+    let _stage_extraInitializers = [];
+    let _busy_decorators;
+    let _busy_initializers = [];
+    let _busy_extraInitializers = [];
+    let _errorText_decorators;
+    let _errorText_initializers = [];
+    let _errorText_extraInitializers = [];
+    let _totpSecret_decorators;
+    let _totpSecret_initializers = [];
+    let _totpSecret_extraInitializers = [];
+    let _totpOtpauthUrl_decorators;
+    let _totpOtpauthUrl_initializers = [];
+    let _totpOtpauthUrl_extraInitializers = [];
+    let _backupCodes_decorators;
+    let _backupCodes_initializers = [];
+    let _backupCodes_extraInitializers = [];
+    let _doneMethod_decorators;
+    let _doneMethod_initializers = [];
+    let _doneMethod_extraInitializers = [];
+    var IdpSecureAccountCard = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _stage_decorators = [property({ type: String, reflect: true })];
+            _busy_decorators = [property({ type: Boolean })];
+            _errorText_decorators = [property({ type: String })];
+            _totpSecret_decorators = [property({ type: String })];
+            _totpOtpauthUrl_decorators = [property({ type: String })];
+            _backupCodes_decorators = [property({ type: Array })];
+            _doneMethod_decorators = [property({ type: String })];
+            __esDecorate(this, null, _stage_decorators, { kind: "accessor", name: "stage", static: false, private: false, access: { has: obj => "stage" in obj, get: obj => obj.stage, set: (obj, value) => { obj.stage = value; } }, metadata: _metadata }, _stage_initializers, _stage_extraInitializers);
+            __esDecorate(this, null, _busy_decorators, { kind: "accessor", name: "busy", static: false, private: false, access: { has: obj => "busy" in obj, get: obj => obj.busy, set: (obj, value) => { obj.busy = value; } }, metadata: _metadata }, _busy_initializers, _busy_extraInitializers);
+            __esDecorate(this, null, _errorText_decorators, { kind: "accessor", name: "errorText", static: false, private: false, access: { has: obj => "errorText" in obj, get: obj => obj.errorText, set: (obj, value) => { obj.errorText = value; } }, metadata: _metadata }, _errorText_initializers, _errorText_extraInitializers);
+            __esDecorate(this, null, _totpSecret_decorators, { kind: "accessor", name: "totpSecret", static: false, private: false, access: { has: obj => "totpSecret" in obj, get: obj => obj.totpSecret, set: (obj, value) => { obj.totpSecret = value; } }, metadata: _metadata }, _totpSecret_initializers, _totpSecret_extraInitializers);
+            __esDecorate(this, null, _totpOtpauthUrl_decorators, { kind: "accessor", name: "totpOtpauthUrl", static: false, private: false, access: { has: obj => "totpOtpauthUrl" in obj, get: obj => obj.totpOtpauthUrl, set: (obj, value) => { obj.totpOtpauthUrl = value; } }, metadata: _metadata }, _totpOtpauthUrl_initializers, _totpOtpauthUrl_extraInitializers);
+            __esDecorate(this, null, _backupCodes_decorators, { kind: "accessor", name: "backupCodes", static: false, private: false, access: { has: obj => "backupCodes" in obj, get: obj => obj.backupCodes, set: (obj, value) => { obj.backupCodes = value; } }, metadata: _metadata }, _backupCodes_initializers, _backupCodes_extraInitializers);
+            __esDecorate(this, null, _doneMethod_decorators, { kind: "accessor", name: "doneMethod", static: false, private: false, access: { has: obj => "doneMethod" in obj, get: obj => obj.doneMethod, set: (obj, value) => { obj.doneMethod = value; } }, metadata: _metadata }, _doneMethod_initializers, _doneMethod_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            IdpSecureAccountCard = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = () => html `
+    <div style="background: var(--sh-bg, #f5f5f7); padding: 40px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: center;">
+      <idp-secure-account-card stage="choice"></idp-secure-account-card>
+      <idp-secure-account-card stage="totp" totpSecret="JBSWY3DPEHPK3PXP" totpOtpauthUrl="otpauth://totp/idp.global:alex%40lossless.com?secret=JBSWY3DPEHPK3PXP&issuer=idp.global"></idp-secure-account-card>
+      <idp-secure-account-card stage="backup-codes" .backupCodes=${['1111-2222', '3333-4444', '5555-6666', '7777-8888', '9999-0000', '1234-5678']}></idp-secure-account-card>
+      <idp-secure-account-card stage="done" doneMethod="passkey"></idp-secure-account-card>
+    </div>
+  `;
+        static demoGroups = ['idp.global v5 auth'];
+        #stage_accessor_storage = __runInitializers(this, _stage_initializers, 'choice');
+        get stage() { return this.#stage_accessor_storage; }
+        set stage(value) { this.#stage_accessor_storage = value; }
+        #busy_accessor_storage = (__runInitializers(this, _stage_extraInitializers), __runInitializers(this, _busy_initializers, false));
+        /** disables actions while the host performs a request */
+        get busy() { return this.#busy_accessor_storage; }
+        set busy(value) { this.#busy_accessor_storage = value; }
+        #errorText_accessor_storage = (__runInitializers(this, _busy_extraInitializers), __runInitializers(this, _errorText_initializers, ''));
+        get errorText() { return this.#errorText_accessor_storage; }
+        set errorText(value) { this.#errorText_accessor_storage = value; }
+        #totpSecret_accessor_storage = (__runInitializers(this, _errorText_extraInitializers), __runInitializers(this, _totpSecret_initializers, ''));
+        /** manual-entry TOTP secret shown during the totp stage */
+        get totpSecret() { return this.#totpSecret_accessor_storage; }
+        set totpSecret(value) { this.#totpSecret_accessor_storage = value; }
+        #totpOtpauthUrl_accessor_storage = (__runInitializers(this, _totpSecret_extraInitializers), __runInitializers(this, _totpOtpauthUrl_initializers, ''));
+        /** otpauth:// URL; rendered as a tappable link for phone authenticators */
+        get totpOtpauthUrl() { return this.#totpOtpauthUrl_accessor_storage; }
+        set totpOtpauthUrl(value) { this.#totpOtpauthUrl_accessor_storage = value; }
+        #backupCodes_accessor_storage = (__runInitializers(this, _totpOtpauthUrl_extraInitializers), __runInitializers(this, _backupCodes_initializers, []));
+        /** one-time backup codes shown after successful TOTP verification */
+        get backupCodes() { return this.#backupCodes_accessor_storage; }
+        set backupCodes(value) { this.#backupCodes_accessor_storage = value; }
+        #doneMethod_accessor_storage = (__runInitializers(this, _backupCodes_extraInitializers), __runInitializers(this, _doneMethod_initializers, ''));
+        /** which method completed, for the done stage copy */
+        get doneMethod() { return this.#doneMethod_accessor_storage; }
+        set doneMethod(value) { this.#doneMethod_accessor_storage = value; }
+        static styles = [
+            ...idpElementStyles,
+            css `
+      :host {
+        display: block;
+        font-family: var(--idp-font);
+      }
+      .option-list {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 16px;
+      }
+      .skip-row {
+        margin-top: 16px;
+        text-align: center;
+        font-size: 13px;
+      }
+      .skip-row a {
+        color: var(--idp-fg-3);
+        cursor: pointer;
+        text-decoration: none;
+      }
+      .skip-row a:hover {
+        color: var(--idp-fg-2);
+        text-decoration: underline;
+      }
+      .error-note {
+        margin-top: 14px;
+        padding: 9px 12px;
+        background: color-mix(in srgb, #ff3b30 8%, transparent);
+        border: 1px solid color-mix(in srgb, #ff3b30 30%, transparent);
+        border-radius: 11px;
+        font-size: 12.5px;
+        color: #d70015;
+      }
+      .totp-block {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        margin-top: 16px;
+      }
+      .code-block {
+        padding: 10px 12px;
+        background: var(--idp-bg);
+        border: 1px solid var(--idp-border);
+        border-radius: 11px;
+        font-family: ui-monospace, 'SF Mono', monospace;
+        font-size: 12px;
+        word-break: break-all;
+        user-select: all;
+      }
+      .code-label {
+        font-size: 11.5px;
+        color: var(--idp-fg-3);
+        margin-bottom: 4px;
+      }
+      .otp-row {
+        display: flex;
+        justify-content: center;
+        margin-top: 4px;
+      }
+      .backup-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 8px;
+        margin-top: 16px;
+      }
+      .backup-code {
+        padding: 8px 10px;
+        background: var(--idp-bg);
+        border: 1px solid var(--idp-border);
+        border-radius: 9px;
+        font-family: ui-monospace, 'SF Mono', monospace;
+        font-size: 12.5px;
+        text-align: center;
+        user-select: all;
+      }
+      .status-block {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 14px;
+        padding: 18px 0 6px;
+        text-align: center;
+      }
+      .status-text {
+        font-size: 13px;
+        color: var(--idp-fg-2);
+        line-height: 1.5;
+        max-width: 280px;
+      }
+      .actions {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-top: 18px;
+      }
+    `,
+        ];
+        render() {
+            const renderers = {
+                choice: () => ({
+                    heading: 'Secure your account',
+                    description: 'Add a second factor now. You can also set this up later under Security in your console.',
+                    body: html `
+          <div class="option-list">
+            <idp-option-row
+              tileTone="accent"
+              tileSize="34"
+              icon="fingerprint"
+              label="Add a passkey"
+              description="Sign in with Face ID, Touch ID, or a security key"
+              trailing="chevron"
+              @click=${() => { if (!this.busy)
+                        this.emit('idp-secure-passkey'); }}
+            ></idp-option-row>
+            <idp-option-row
+              tileTone="accent"
+              tileSize="34"
+              icon="lucide:Smartphone"
+              label="Use an authenticator app"
+              description="Time-based codes from an app like 1Password or Google Authenticator"
+              trailing="chevron"
+              @click=${() => { if (!this.busy)
+                        this.emit('idp-secure-totp'); }}
+            ></idp-option-row>
+          </div>
+          ${this.errorText ? html `<div class="error-note" role="alert">${this.errorText}</div>` : html ``}
+          <div class="skip-row"><a @click=${() => this.emit('idp-secure-skip')}>Skip for now</a></div>
+        `,
+                }),
+                totp: () => ({
+                    heading: 'Set up your authenticator',
+                    description: 'Add the secret to your authenticator app, then enter the current 6-digit code.',
+                    body: html `
+          <div class="totp-block">
+            <div>
+              <div class="code-label">Manual secret</div>
+              <div class="code-block">${this.totpSecret}</div>
+            </div>
+            ${this.totpOtpauthUrl
+                        ? html `
+                  <div>
+                    <div class="code-label">Or open directly on this device</div>
+                    <div class="code-block"><a href=${this.totpOtpauthUrl}>${this.totpOtpauthUrl}</a></div>
+                  </div>
+                `
+                        : html ``}
+            <div class="otp-row">
+              <idp-otp-input
+                @idp-otp-complete=${(eventArg) => {
+                        this.dispatchEvent(new CustomEvent('idp-secure-totp-verify', {
+                            detail: { code: eventArg.detail.value },
+                            bubbles: true,
+                            composed: true,
+                        }));
+                    }}
+              ></idp-otp-input>
+            </div>
+          </div>
+          ${this.errorText ? html `<div class="error-note" role="alert">${this.errorText}</div>` : html ``}
+          <div class="skip-row"><a @click=${() => this.emit('idp-secure-back')}>Choose a different method</a></div>
+        `,
+                }),
+                'backup-codes': () => ({
+                    heading: 'Save your backup codes',
+                    description: 'Each code works once if you lose access to your authenticator. Store them somewhere safe.',
+                    body: html `
+          <div class="backup-grid">
+            ${this.backupCodes.map((codeArg) => html `<div class="backup-code">${codeArg}</div>`)}
+          </div>
+          <div class="actions">
+            <idp-button variant="accent" shape="rect" block @click=${() => this.emit('idp-secure-continue')}>I saved these codes</idp-button>
+          </div>
+        `,
+                }),
+                done: () => ({
+                    heading: this.doneMethod === 'totp' ? 'Authenticator added' : 'Passkey added',
+                    description: '',
+                    body: html `
+          <div class="status-block">
+            <idp-status-icon tone="ok" icon="check"></idp-status-icon>
+            <div class="status-text">
+              ${this.doneMethod === 'totp'
+                        ? 'Sign-ins now require a code from your authenticator app.'
+                        : 'You can now sign in with your passkey instead of a password.'}
+            </div>
+          </div>
+          <div class="actions">
+            <idp-button variant="accent" shape="rect" block @click=${() => this.emit('idp-secure-continue')}>Continue</idp-button>
+          </div>
+        `,
+                }),
+            };
+            const view = renderers[this.stage]();
+            return html `
+      <idp-auth-card heading=${view.heading} description=${view.description}>
+        ${view.body}
+      </idp-auth-card>
+    `;
+        }
+        emit(eventName) {
+            this.dispatchEvent(new CustomEvent(eventName, { bubbles: true, composed: true }));
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _doneMethod_extraInitializers);
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return IdpSecureAccountCard = _classThis;
+})();
+export { IdpSecureAccountCard };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWRwLXNlY3VyZS1hY2NvdW50LWNhcmQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvaWRwLXNlY3VyZS1hY2NvdW50LWNhcmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxhQUFhLEVBQUUsR0FBRyxFQUF1QixNQUFNLDZCQUE2QixDQUFDO0FBQ25ILE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUMvQyxPQUFPLG9CQUFvQixDQUFDO0FBQzVCLE9BQU8scUJBQXFCLENBQUM7QUFDN0IsT0FBTyxvQkFBb0IsQ0FBQztBQUM1QixPQUFPLHNCQUFzQixDQUFDO0FBQzlCLE9BQU8saUJBQWlCLENBQUM7QUFXekI7Ozs7O0dBS0c7SUFFVSxvQkFBb0I7NEJBRGhDLGFBQWEsQ0FBQyx5QkFBeUIsQ0FBQzs7OztzQkFDQyxXQUFXOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O29DQUFuQixTQUFRLFdBQVc7Ozs7aUNBV2xELFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxDQUFDO2dDQUl6QyxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLENBQUM7cUNBRzNCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztzQ0FJMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDOzBDQUkxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7dUNBSTFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsQ0FBQztzQ0FJekIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO1lBdEIzQixvS0FBZ0Is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

package/dist_ts_web/elements/index.d.ts

@@ -23,6 +23,7 @@ export * from './idp-app-pair.js';
 export * from './idp-auth-card.js';
 export * from './idp-consent-card.js';
 export * from './idp-invite-card.js';
+export * from './idp-secure-account-card.js';
 export * from './idp-approval-card.js';
 export * from './idp-mobile-frame.js';
 export * from './idp-inbox-preview.js';

package/dist_ts_web/elements/index.js

@@ -23,6 +23,7 @@ export * from './idp-app-pair.js';
 export * from './idp-auth-card.js';
 export * from './idp-consent-card.js';
 export * from './idp-invite-card.js';
+export * from './idp-secure-account-card.js';
 export * from './idp-approval-card.js';
 export * from './idp-mobile-frame.js';
 export * from './idp-inbox-preview.js';
@@ -37,4 +38,4 @@ export * from './idp-landing-page.js';
 export * from './idp-mobile-showcase.js';
 export * from './idp-sso-connection-form.js';
 export * from './idp-scim-token-panel.js';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGdCQUFnQixDQUFDO0FBQy9CLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsa0JBQWtCLENBQUM7QUFDakMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsZ0JBQWdCLENBQUM7QUFDL0IsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsc0JBQXNCLENBQUM7QUFDckMsY0FBYyx3QkFBd0IsQ0FBQztBQUN2QyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLDZCQUE2QixDQUFDO0FBQzVDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyx3QkFBd0IsQ0FBQztBQUN2QyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsc0JBQXNCLENBQUM7QUFDckMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYyw4QkFBOEIsQ0FBQztBQUM3QyxjQUFjLDJCQUEyQixDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGdCQUFnQixDQUFDO0FBQy9CLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsa0JBQWtCLENBQUM7QUFDakMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsZ0JBQWdCLENBQUM7QUFDL0IsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsc0JBQXNCLENBQUM7QUFDckMsY0FBYyw4QkFBOEIsQ0FBQztBQUM3QyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyx3QkFBd0IsQ0FBQztBQUN2QyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyxzQkFBc0IsQ0FBQztBQUNyQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYywwQkFBMEIsQ0FBQztBQUN6QyxjQUFjLDhCQUE4QixDQUFDO0FBQzdDLGNBQWMsMkJBQTJCLENBQUMifQ==

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idp.global/catalog",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "private": false,
   "description": "Web component catalog for idp.global, based on the v5 Apple-system design language.",
   "exports": {

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@idp.global/catalog',
-  version: '3.2.0',
+  version: '3.4.0',
   description: 'Web component catalog for idp.global, based on the v5 Apple-system design language.'
 }

package/ts_web/elements/idp-admin-shell.ts

@@ -94,6 +94,19 @@ export interface IIdpAdminGaUserActionEventDetail {
   action: 'suspend' | 'unsuspend';
 }
 
+export interface IIdpAdminGaUserDeleteEventDetail {
+  userId: string;
+}
+
+export interface IIdpAdminAccountDeleteEventDetail {
+  password: string;
+  confirmEmail: string;
+}
+
+export interface IIdpAdminOrgExportEventDetail {
+  orgId: string;
+}
+
 export interface IIdpAdminProfileUpdateEventDetail {
   name: string;
   username: string;
@@ -1036,6 +1049,23 @@ export class IdpAdminShell extends DeesElement {
   @property({ type: Boolean })
   public accessor profileSaving = false;
 
+  /** shows the account danger zone (delete account) on the profile page */
+  @property({ type: Boolean })
+  public accessor dangerZoneEnabled = false;
+
+  /** host sets this while the delete-account request is in flight */
+  @property({ type: Boolean })
+  public accessor accountDeleting = false;
+
+  @state()
+  private accessor deleteAccountOpen = false;
+
+  @state()
+  private accessor deleteAccountPassword = '';
+
+  @state()
+  private accessor deleteAccountConfirmEmail = '';
+
   @state()
   private accessor profileDraft: { name: string; username: string; mobileNumber: string } | null = null;
 
@@ -1943,6 +1973,20 @@ export class IdpAdminShell extends DeesElement {
             : html``}
         `)}
         ${this.renderSectionCard('Account status', '', html`<div class="split-row"><div><div class="section-title">Status</div><div class="muted">Your account is currently ${status}.</div></div><idp-badge variant=${status === 'active' ? 'ok' : status === 'suspended' ? 'error' : 'warn'}>${status}</idp-badge></div>${this.globalAdmin ? html`<div class="divider"></div><div class="split-row"><div><div class="section-title">Global admin</div><div class="muted">You have platform-wide administrative access.</div></div><idp-badge variant="accent">Admin</idp-badge></div>` : html``}`)}
+        ${this.dangerZoneEnabled
+          ? this.renderSectionCard('Danger zone', 'Deleting your account locks it immediately and permanently erases it after a 7-day grace period.', html`
+              ${this.deleteAccountOpen
+                ? html`
+                    ${this.renderFormRow('Confirm your email', 'Type your account email to confirm', html`<input class="input" .value=${this.deleteAccountConfirmEmail} ?disabled=${this.accountDeleting} @input=${(eventArg: Event) => { this.deleteAccountConfirmEmail = (eventArg.target as HTMLInputElement).value; }} />`, true)}
+                    ${this.renderFormRow('Password', 'Required when your account has one', html`<input class="input" type="password" autocomplete="current-password" .value=${this.deleteAccountPassword} ?disabled=${this.accountDeleting} @input=${(eventArg: Event) => { this.deleteAccountPassword = (eventArg.target as HTMLInputElement).value; }} />`)}
+                    <div class="split-row" style="justify-content:flex-end;gap:10px;margin-top:14px">
+                      <idp-button variant="outline" shape="rect" ?disabled=${this.accountDeleting} @click=${() => { this.deleteAccountOpen = false; this.deleteAccountPassword = ''; this.deleteAccountConfirmEmail = ''; }}>Cancel</idp-button>
+                      <idp-button variant="accent" shape="rect" ?loading=${this.accountDeleting} ?disabled=${this.deleteAccountConfirmEmail.trim().toLowerCase() !== (this.user?.email || '').trim().toLowerCase()} @click=${() => this.dispatchShellEvent<IIdpAdminAccountDeleteEventDetail>('idp-admin-account-delete', { password: this.deleteAccountPassword, confirmEmail: this.deleteAccountConfirmEmail.trim() })}>Delete my account</idp-button>
+                    </div>
+                  `
+                : html`<div class="split-row"><div><div class="section-title">Delete this account</div><div class="muted">Organisations you own must be transferred or deleted first.</div></div><idp-button variant="outline" shape="rect" @click=${() => { this.deleteAccountOpen = true; }}>Delete account…</idp-button></div>`}
+            `)
+          : html``}
         ${this.delegationApps.length
           ? html`<idp-delegation-section .apps=${this.delegationApps} .delegations=${this.delegations}></idp-delegation-section>`
           : html``}
@@ -2214,6 +2258,7 @@ export class IdpAdminShell extends DeesElement {
           <button class="plain-button primary" ?disabled=${!identityChanged} @click=${() => this.submitOrgSettingsUpdate()}>Apply identity changes</button>
         `)}
         ${this.renderSectionCard('Organisation ID', 'Use this identifier when making API calls.', this.renderCodeBlock(org.id))}
+        ${this.renderSectionCard('Data export', 'Download all organisation data (members, invitations, SSO configuration, activity) as JSON. Owner only.', html`<div class="split-row"><div><div class="section-title">Export organisation data</div><div class="muted">Streams every record; token secrets and credentials are never included.</div></div><idp-button variant="outline" shape="rect" @click=${() => this.dispatchShellEvent<IIdpAdminOrgExportEventDetail>('idp-admin-org-export', { orgId: org.id })}>Export JSON</idp-button></div>`)}
         ${this.renderSectionCard('Transfer ownership', `Owner-only operation. Type ${transferConfirmText} to confirm.`, html`
           ${transferCandidates.length ? html`
             ${this.renderFormRow('New owner', 'The target user must already be an organisation member.', html`
@@ -2447,7 +2492,12 @@ export class IdpAdminShell extends DeesElement {
         html`<idp-badge variant=${statusVariant(userArg.status)}>${userArg.status}</idp-badge>`,
         userArg.isGlobalAdmin ? html`<idp-badge variant="accent">Admin</idp-badge>` : '-',
         this.formatTimeAgo(userArg.createdAt),
-        html`<button class="plain-button ghost" style="font-size:11px" @click=${() => this.dispatchShellEvent<IIdpAdminGaUserActionEventDetail>('idp-admin-ga-user-action', { userId: userArg.id, action: userArg.status === 'suspended' ? 'unsuspend' : 'suspend' })}>${userArg.status === 'suspended' ? 'Unsuspend' : 'Suspend'}</button>`,
+        html`<span style="display:inline-flex;gap:8px">
+          <button class="plain-button ghost" style="font-size:11px" @click=${() => this.dispatchShellEvent<IIdpAdminGaUserActionEventDetail>('idp-admin-ga-user-action', { userId: userArg.id, action: userArg.status === 'suspended' ? 'unsuspend' : 'suspend' })}>${userArg.status === 'suspended' ? 'Unsuspend' : 'Suspend'}</button>
+          ${userArg.status === 'suspended'
+            ? html`<button class="plain-button ghost" style="font-size:11px;color:#d70015" @click=${() => this.dispatchShellEvent<IIdpAdminGaUserDeleteEventDetail>('idp-admin-ga-user-delete', { userId: userArg.id })}>Delete permanently</button>`
+            : html``}
+        </span>`,
       ],
     }));