@idp.global/catalog 3.3.0 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idp.global/catalog",
-  "version": "3.3.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.3.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>`,
       ],
     }));