Improve user account deletion flow

apps/client/src/app/components/user-account-settings/user-account-settings.component.ts

@@ -71,6 +71,7 @@ import { catchError } from 'rxjs/operators';
 export class GfUserAccountSettingsComponent implements OnInit {
   public appearancePlaceholder = $localize`Auto`;
   public baseCurrency: string;
+  public closeUserAccountMail: string;
   public currencies: string[] = [];
   public deleteOwnUserForm = this.formBuilder.group({
     accessToken: ['', Validators.required]
@@ -124,6 +125,8 @@ export class GfUserAccountSettingsComponent implements OnInit {
         if (state?.user) {
           this.user = state.user;
 
+          this.closeUserAccountMail = `mailto:hi@ghostfol.io?subject=Delete Account&body=Hello%0D%0DPlease delete my Ghostfolio account.%0D%0DUser ID: ${this.user.id}%0D%0DKind regards`;
+
           this.hasPermissionToDeleteOwnUser = hasPermission(
             this.user.permissions,
             permissions.deleteOwnUser

apps/client/src/app/components/user-account-settings/user-account-settings.html

@@ -280,21 +280,21 @@
       <div class="align-items-center d-flex py-1">
         <div class="pr-1 w-50"></div>
         <div class="pl-1 text-monospace w-50">
-          <button color="primary" mat-flat-button (click)="onExport()">
+          <button color="primary" i18n mat-flat-button (click)="onExport()">
-            <span i18n>Export Data</span>
+            Export Data
           </button>
         </div>
       </div>
-      @if (hasPermissionToDeleteOwnUser) {
+      <hr class="mt-5" />
-        <hr class="mt-5" />
+      <div class="d-flex py-1">
-        <form
+        <div class="pr-1 text-danger w-50" i18n>Danger Zone</div>
-          class="w-100"
+        <div class="pl-1 w-50">
-          [formGroup]="deleteOwnUserForm"
+          @if (hasPermissionToDeleteOwnUser) {
-          (ngSubmit)="onCloseAccount()"
+            <form
-        >
+              class="w-100"
-          <div class="d-flex py-1">
+              [formGroup]="deleteOwnUserForm"
-            <div class="pr-1 text-danger w-50" i18n>Danger Zone</div>
+              (ngSubmit)="onCloseAccount()"
-            <div class="pl-1 w-50">
+            >
               <mat-form-field
                 appearance="outline"
                 class="without-hint w-100"
@@ -324,18 +324,28 @@
               <button
                 class="mt-2"
                 color="warn"
+                i18n
                 mat-flat-button
                 type="submit"
                 [disabled]="
                   !(deleteOwnUserForm.dirty && deleteOwnUserForm.valid)
                 "
               >
-                <span i18n>Close Account</span>
+                Close Account
               </button>
+            </form>
+          } @else if (user?.accounts?.length > 0 || user?.activitiesCount > 0) {
+            <div class="hint-text text-muted" i18n>
+              For security reasons, please delete all activities and accounts
+              first before your Ghostfolio account can be closed.
             </div>
-          </div>
+          } @else {
-        </form>
+            <a color="warn" i18n mat-flat-button [href]="closeUserAccountMail"
-      }
+              >Close Account</a
+            >
+          }
+        </div>
+      </div>
     </div>
   </div>
 </div>