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))
+        .pipe(
-        .subscribe({
+          catchError(() => {
-          next: () => {
-            this.tokenStorageService.signOut();
-            this.userService.remove();
-
-            document.location.href = `/${document.documentElement.lang}`;
-          },
-          error: () => {
             alert($localize`Oops! Incorrect Security Token.`);
-          }
+
+            return EMPTY;
+          }),
+          takeUntil(this.unsubscribeSubject)
+        )
+        .subscribe(() => {
+          this.tokenStorageService.signOut();
+          this.userService.remove();
+
+          document.location.href = `/${document.documentElement.lang}`;
         });
     }
   }

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

@@ -233,63 +233,53 @@
         </div>
       </div>
       @if (hasPermissionToDeleteOwnUser) {
-        <hr class="danger-zone-hr" />
+        <hr class="mt-5" />
-        @if (hasPermissionToDeleteOwnUser) {
+        <form
-          <form
+          class="w-100"
-            class="w-100"
+          [formGroup]="deleteOwnUserForm"
-            [formGroup]="deleteOwnUserForm"
+          (ngSubmit)="onCloseAccount()"
-            (ngSubmit)="onCloseAccount()"
+        >
-          >
+          <div class="d-flex py-1">
-            <div class="align-items-center d-flex mt-4 py-1">
+            <div class="pr-1 text-danger w-50" i18n>Danger Zone</div>
-              <div class="pr-1 w-50 danger-zone-text" i18n>Danger Zone</div>
+            <div class="pl-1 w-50">
-              <div class="pl-1 w-50">
+              <mat-form-field
-                <mat-form-field
+                appearance="outline"
-                  appearance="outline"
+                class="without-hint w-100"
-                  class="without-hint w-100"
+                [hideRequiredMarker]="true"
-                  color="warn"
+              >
-                  [hideRequiredMarker]="true"
+                <mat-label i18n>Security Token</mat-label>
-                >
+                <input
-                  <mat-label class="danger-zone-text" i18n
+                  formControlName="accessToken"
-                    >Security Token</mat-label
+                  matInput
-                  >
+                  [type]="isAccessTokenHidden ? 'password' : 'text'"
-                  <input
+                />
-                    formControlName="accessToken"
-                    matInput
-                    [type]="isAccessTokenHidden ? 'password' : 'text'"
-                  />
-                  <button
-                    mat-button
-                    matSuffix
-                    type="button"
-                    (click)="isAccessTokenHidden = !isAccessTokenHidden"
-                  >
-                    <ion-icon
-                      [name]="
-                        isAccessTokenHidden ? 'eye-outline' : 'eye-off-outline'
-                      "
-                    />
-                  </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
-                  color="warn"
+                  mat-button
-                  mat-flat-button
+                  matSuffix
-                  type="submit"
+                  type="button"
-                  [disabled]="
+                  (click)="isAccessTokenHidden = !isAccessTokenHidden"
-                    !(deleteOwnUserForm.dirty && deleteOwnUserForm.valid)
-                  "
                 >
-                  <span i18n>Close Account</span>
+                  <ion-icon
+                    [name]="
+                      isAccessTokenHidden ? 'eye-outline' : 'eye-off-outline'
+                    "
+                  />
                 </button>
-              </div>
+              </mat-form-field>
+              <button
+                class="mt-2"
+                color="warn"
+                mat-flat-button
+                type="submit"
+                [disabled]="
+                  !(deleteOwnUserForm.dirty && deleteOwnUserForm.valid)
+                "
+              >
+                <span i18n>Close Account</span>
+              </button>
             </div>
-          </form>
+          </div>
-        }
+        </form>
       }
     </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,