feat(app): wire dashboard administration flows

ts_web/elements/account/views/usersview.ts

@@ -56,6 +56,9 @@ export class UsersView extends DeesElement {
   @state()
   accessor organizationName: string = '';
 
+  @state()
+  accessor organizationSlug: string = '';
+
   @state()
   accessor inviteEmail: string = '';
 
@@ -631,6 +634,7 @@ export class UsersView extends DeesElement {
 
       this.organizationId = selectedOrg.id;
       this.organizationName = selectedOrg.data.name;
+      this.organizationSlug = selectedOrg.data.slug;
       this.currentUserId = currentState.user?.id || '';
 
       // Check if current user is admin/owner
@@ -855,8 +859,8 @@ export class UsersView extends DeesElement {
   }
 
   private async handleTransferOwnership(newOwnerId: string, name: string) {
-    const confirmed = await this.showTransferConfirmation(name);
-    if (!confirmed) return;
+    const confirmationText = await this.showTransferConfirmation(name);
+    if (!confirmationText) return;
 
     this.submitting = true;
     this.actionMessage = null;
@@ -873,6 +877,7 @@ export class UsersView extends DeesElement {
         jwt,
         organizationId: this.organizationId,
         newOwnerId,
+        confirmationText,
       });
 
       if (response.success) {
@@ -889,8 +894,10 @@ export class UsersView extends DeesElement {
     }
   }
 
-  private async showTransferConfirmation(name: string): Promise<boolean> {
+  private async showTransferConfirmation(name: string): Promise<string | null> {
     return new Promise((resolve) => {
+      const expectedText = `transfer ${this.organizationSlug}`;
+      let confirmationText = '';
       plugins.deesCatalog.DeesModal.createAndShow({
         heading: 'Transfer Ownership',
         content: html`
@@ -899,11 +906,15 @@ export class UsersView extends DeesElement {
             <p style="margin: 0; color: var(--muted-foreground);">
               You will be demoted to admin role and will no longer be the owner of this organization.
             </p>
+            <p style="margin: 12px 0 8px 0; color: var(--muted-foreground);">
+              Type <code>${expectedText}</code> to confirm.
+            </p>
+            <input style="box-sizing:border-box;width:100%;padding:8px;border:1px solid var(--border);border-radius:8px;" @input=${(eventArg: Event) => { confirmationText = (eventArg.target as HTMLInputElement).value; }} />
           </div>
         `,
         menuOptions: [
-          { name: 'Cancel', action: async (modal) => { modal.destroy(); resolve(false); } },
-          { name: 'Transfer Ownership', action: async (modal) => { modal.destroy(); resolve(true); } },
+          { name: 'Cancel', action: async (modal) => { modal.destroy(); resolve(null); } },
+          { name: 'Transfer Ownership', action: async (modal) => { modal.destroy(); resolve(confirmationText.trim() === expectedText ? confirmationText.trim() : null); } },
         ],
         width: 420,
       });