More webapp changes+fixes

webapp/src/app/features/account/account-info/account-info.component.html

@@ -13,36 +13,36 @@
     </div>
   } @else if (user()) {
     <nz-card nzTitle="User Information">
-      <nz-descriptions nzBordered [nzColumn]="2">
-        <nz-descriptions-item nzTitle="User ID" [nzSpan]="2">
+      <scn-metadata-grid>
+        <scn-metadata-value label="User ID">
           <span class="mono">{{ user()!.user_id }}</span>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Username">
+        </scn-metadata-value>
+        <scn-metadata-value label="Username">
           {{ user()!.username || '(Not set)' }}
           <button nz-button nzSize="small" nzType="link" (click)="openEditModal()">
             <span nz-icon nzType="edit"></span>
           </button>
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Account Type">
+        </scn-metadata-value>
+        <scn-metadata-value label="Account Type">
           @if (user()!.is_pro) {
             <nz-tag nzColor="gold">Pro</nz-tag>
           } @else {
             <nz-tag>Free</nz-tag>
           }
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Messages Sent">
+        </scn-metadata-value>
+        <scn-metadata-value label="Messages Sent">
           {{ user()!.messages_sent }}
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Created">
+        </scn-metadata-value>
+        <scn-metadata-value label="Created">
           {{ user()!.timestamp_created | relativeTime }}
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Last Read">
+        </scn-metadata-value>
+        <scn-metadata-value label="Last Read">
           {{ user()!.timestamp_lastread | relativeTime }}
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Last Sent">
+        </scn-metadata-value>
+        <scn-metadata-value label="Last Sent">
           {{ user()!.timestamp_lastsent | relativeTime }}
-        </nz-descriptions-item>
-      </nz-descriptions>
+        </scn-metadata-value>
+      </scn-metadata-grid>
     </nz-card>
 
     <nz-card nzTitle="Quota" class="mt-16">
@@ -62,22 +62,39 @@
 
       <nz-divider></nz-divider>
 
-      <nz-descriptions [nzColumn]="2" nzSize="small">
-        <nz-descriptions-item nzTitle="Max Body Size">
+      <scn-metadata-grid>
+        <scn-metadata-value label="Max Body Size">
           {{ user()!.max_body_size | number }} bytes
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Max Title Length">
+        </scn-metadata-value>
+        <scn-metadata-value label="Max Title Length">
           {{ user()!.max_title_length }} chars
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Default Channel">
+        </scn-metadata-value>
+        <scn-metadata-value label="Default Channel">
           {{ user()!.default_channel }}
-        </nz-descriptions-item>
-        <nz-descriptions-item nzTitle="Default Priority">
+        </scn-metadata-value>
+        <scn-metadata-value label="Default Priority">
           {{ user()!.default_priority }}
-        </nz-descriptions-item>
-      </nz-descriptions>
+        </scn-metadata-value>
+      </scn-metadata-grid>
     </nz-card>
 
+    @if (expertMode()) {
+      <nz-card nzTitle="Danger Zone" class="mt-16 danger-zone">
+        <p class="danger-warning">Deleting your account is permanent and cannot be undone. All your data will be lost.</p>
+        <button
+          nz-button
+          nzDanger
+          nz-popconfirm
+          nzPopconfirmTitle="Are you sure you want to delete your account? This action cannot be undone."
+          (nzOnConfirm)="deleteAccount()"
+          [nzLoading]="deleting()"
+        >
+          <span nz-icon nzType="delete"></span>
+          Delete Account
+        </button>
+      </nz-card>
+    }
+
   }
 </div>
 

webapp/src/app/features/account/account-info/account-info.component.scss

@@ -43,3 +43,17 @@
     margin-bottom: 16px;
   }
 }
+
+.danger-zone {
+  border-color: #ff4d4f !important;
+
+  :host ::ng-deep .ant-card-head {
+    color: #ff4d4f;
+    border-bottom-color: #ff4d4f;
+  }
+
+  .danger-warning {
+    color: #666;
+    margin-bottom: 16px;
+  }
+}

webapp/src/app/features/account/account-info/account-info.component.ts

@@ -1,6 +1,7 @@
 import { Component, inject, signal, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
 import { NzCardModule } from 'ng-zorro-antd/card';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
@@ -12,11 +13,14 @@ import { NzModalModule } from 'ng-zorro-antd/modal';
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzInputModule } from 'ng-zorro-antd/input';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
 import { ApiService } from '../../../core/services/api.service';
 import { AuthService } from '../../../core/services/auth.service';
 import { NotificationService } from '../../../core/services/notification.service';
+import { SettingsService } from '../../../core/services/settings.service';
 import { UserWithExtra } from '../../../core/models';
 import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
+import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';
 
 @Component({
   selector: 'app-account-info',
@@ -35,7 +39,10 @@ import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
     NzFormModule,
     NzInputModule,
     NzDividerModule,
+    NzPopconfirmModule,
     RelativeTimePipe,
+    MetadataGridComponent,
+    MetadataValueComponent,
   ],
   templateUrl: './account-info.component.html',
   styleUrl: './account-info.component.scss'
@@ -44,9 +51,13 @@ export class AccountInfoComponent implements OnInit {
   private apiService = inject(ApiService);
   private authService = inject(AuthService);
   private notification = inject(NotificationService);
+  private settingsService = inject(SettingsService);
+  private router = inject(Router);
 
   user = signal<UserWithExtra | null>(null);
   loading = signal(true);
+  deleting = signal(false);
+  expertMode = this.settingsService.expertMode;
 
   // Edit username modal
   showEditModal = signal(false);
@@ -116,4 +127,21 @@ export class AccountInfoComponent implements OnInit {
       }
     });
   }
+
+  deleteAccount(): void {
+    const userId = this.authService.getUserId();
+    if (!userId) return;
+
+    this.deleting.set(true);
+    this.apiService.deleteUser(userId).subscribe({
+      next: () => {
+        this.notification.success('Account deleted');
+        this.authService.logout();
+        this.router.navigate(['/login']);
+      },
+      error: () => {
+        this.deleting.set(false);
+      }
+    });
+  }
 }