Refactoring

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

@@ -141,7 +141,7 @@ export class UserAccountSettingsComponent implements OnDestroy, OnInit {
 
   public onCloseAccount() {
     const confirmation = confirm(
-      $localize`Do you really want to close your account?`
+      $localize`Do you really want to close your Ghostfolio account?`
     );
 
     const accessToken = this.deleteOwnUserForm.get('accessToken').value;
@@ -149,17 +149,19 @@ export class UserAccountSettingsComponent implements OnDestroy, OnInit {
     if (confirmation) {
       this.dataService
         .deleteOwnUser({ accessToken })
-        .pipe(takeUntil(this.unsubscribeSubject))
-        .subscribe({
-          next: () => {
+        .pipe(
+          catchError(() => {
+            alert($localize`Oops! Incorrect Security Token.`);
+
+            return EMPTY;
+          }),
+          takeUntil(this.unsubscribeSubject)
+        )
+        .subscribe(() => {
           this.tokenStorageService.signOut();
           this.userService.remove();
 
           document.location.href = `/${document.documentElement.lang}`;
-          },
-          error: () => {
-            alert($localize`Oops! Incorrect Security Token.`);
-          }
         });
     }
   }

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

@@ -233,25 +233,21 @@
         </div>
       </div>
       @if (hasPermissionToDeleteOwnUser) {
-        <hr class="danger-zone-hr" />
-        @if (hasPermissionToDeleteOwnUser) {
+        <hr class="mt-5" />
         <form
           class="w-100"
           [formGroup]="deleteOwnUserForm"
           (ngSubmit)="onCloseAccount()"
         >
-            <div class="align-items-center d-flex mt-4 py-1">
-              <div class="pr-1 w-50 danger-zone-text" i18n>Danger Zone</div>
+          <div class="d-flex py-1">
+            <div class="pr-1 text-danger w-50" i18n>Danger Zone</div>
             <div class="pl-1 w-50">
               <mat-form-field
                 appearance="outline"
                 class="without-hint w-100"
-                  color="warn"
                 [hideRequiredMarker]="true"
               >
-                  <mat-label class="danger-zone-text" i18n
-                    >Security Token</mat-label
-                  >
+                <mat-label i18n>Security Token</mat-label>
                 <input
                   formControlName="accessToken"
                   matInput
@@ -270,13 +266,8 @@
                   />
                 </button>
               </mat-form-field>
-              </div>
-            </div>
-
-            <div class="align-items-center d-flex py-1">
-              <div class="pr-1 w-50"></div>
-              <div class="pl-1 w-50">
               <button
+                class="mt-2"
                 color="warn"
                 mat-flat-button
                 type="submit"
@@ -290,7 +281,6 @@
           </div>
         </form>
       }
-      }
     </div>
   </div>
 </div>

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

@@ -15,15 +15,6 @@
     font-size: 90%;
     line-height: 1.2;
   }
-
-  .danger-zone {
-    &-text {
-      color: rgba(var(--palette-warn-500), 1);
-    }
-    &-hr {
-      background-color: rgba(var(--palette-warn-500), 1);
-    }
-  }
 }
 
 :host-context(.is-dark-theme) {

libs/common/src/lib/permissions.ts

@@ -17,10 +17,10 @@ export const permissions = {
   deleteAccountBalance: 'deleteAcccountBalance',
   deleteAuthDevice: 'deleteAuthDevice',
   deleteOrder: 'deleteOrder',
+  deleteOwnUser: 'deleteOwnUser',
   deletePlatform: 'deletePlatform',
   deleteTag: 'deleteTag',
   deleteUser: 'deleteUser',
-  deleteOwnUser: 'deleteOwnUser',
   enableFearAndGreedIndex: 'enableFearAndGreedIndex',
   enableImport: 'enableImport',
   enableBlog: 'enableBlog',
@@ -58,10 +58,10 @@ export function getPermissions(aRole: Role): string[] {
         permissions.deleteAccount,
         permissions.deleteAuthDevice,
         permissions.deleteOrder,
+        permissions.deleteOwnUser,
         permissions.deletePlatform,
         permissions.deleteTag,
         permissions.deleteUser,
-        permissions.deleteOwnUser,
         permissions.updateAccount,
         permissions.updateAuthDevice,
         permissions.updateOrder,