448 delete account (#216)

* feat(448) added account tab to settings

* feat(448): moved "change password" into settings

* feat(448): created modal to delete account

* feat(448): added backend communication

---------

Co-authored-by: Tanja Ulmen <tanja.ulmen@sva.de>

src/app/app.component.html

@@ -48,9 +48,6 @@
           <a (click)="openSettings()" clrDropdownItem
             ><cds-icon shape="cog"></cds-icon> Settings</a
           >
-          <a (click)="changePassword()" clrDropdownItem
-            ><cds-icon shape="key"></cds-icon> Change Password</a
-          >
           <a (click)="about()" clrDropdownItem
             ><cds-icon shape="help-info"></cds-icon> About</a
           >
@@ -261,8 +258,30 @@ <h3 class="modal-title">Settings</h3>
         <form clrForm [formGroup]="settingsForm">
           <clr-tabs>
             <clr-tab>
-              <button clrTabLink>Terminal</button>
+              <button clrTabLink>Account</button>
               <clr-tab-content *clrIfActive="true">
+                <div class="clr-row space-top-big">
+                  <div class="clr-col">
+                    <button class="btn btn-sm" (click)="changePassword()">
+                      Change Password
+                    </button>
+                  </div>
+                </div>
+                <div class="clr-row space-top-small">
+                  <div class="clr-col">
+                    <button
+                      class="btn btn-danger btn-sm"
+                      (click)="deleteAccountModalOpened = true"
+                    >
+                      Delete Account
+                    </button>
+                  </div>
+                </div>
+              </clr-tab-content>
+            </clr-tab>
+            <clr-tab>
+              <button clrTabLink>Terminal</button>
+              <clr-tab-content>
                 <clr-input-container>
                   <label class="clr-col-md-4">Font-Size</label>
                   <input
@@ -672,6 +691,44 @@ <h3 class="modal-title">Change Password</h3>
       </button>
     </div>
   </clr-modal>
+
+  <clr-modal #deleteaccountmodal [(clrModalOpen)]="deleteAccountModalOpened">
+    <h3 class="modal-title">Are you sure you want to delete your account?</h3>
+    <div class="modal-body">
+      <div class="alert alert-danger">
+        <div class="alert-items">
+          <div class="alert-item static" role="alert">
+            <div class="alert-icon-wrapper">
+              <cds-icon
+                class="alert-icon"
+                shape="exclamation-triangle"
+              ></cds-icon>
+            </div>
+            <span class="alert-text">
+              {{ deleteAccountDangerAlert }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button
+        type="button"
+        class="btn btn-outline"
+        (click)="this.deleteAccountModalOpened = false"
+      >
+        Cancel
+      </button>
+      <button
+        type="button"
+        class="btn btn-danger-outline"
+        (click)="deleteAccount()"
+      >
+        Delete
+      </button>
+    </div>
+  </clr-modal>
+
   <clr-modal [(clrModalOpen)]="alertDeleteAccessCodeModal">
     <h3 class="modal-title">
       Are you sure you want to delete

src/app/app.component.scss

@@ -166,3 +166,11 @@ clr-dg-cell.red {
   > cds-icon[shape^='angle'].dropdown-selection-angle {
   right: 0.5rem;
 }
+
+.space-top-big {
+  margin-top: 25px;
+}
+
+.space-top-small {
+  margin-top: 5px;
+}

src/app/app.component.ts

@@ -27,13 +27,20 @@ export class AppComponent implements OnInit, OnDestroy {
   public logoutModalOpened = false;
   public aboutModalOpened = false;
   public changePasswordModalOpened = false;
+  public deleteAccountModalOpened = false;
 
   public changePwDangerClosed = true;
   public changePwSuccessClosed = true;
 
   public changePwDangerAlert = '';
   public changePwSuccessAlert = '';
 
+  public deleteAccountDangerAlert = 'The account will be deleted permanently!';
+  public deleteAccountSuccessAlert = '';
+
+  public deleteAccountDangerClosed = false;
+  public deleteAccountSuccessClosed = true;
+
   public accessCodeDangerClosed = true;
   public accessCodeSuccessClosed = true;
 
@@ -410,4 +417,30 @@ export class AppComponent implements OnInit, OnDestroy {
       this.emailSubscription.unsubscribe();
     }
   }
+
+  public deleteAccount() {
+    this.deleteAccountSuccessClosed = true;
+    this.deleteAccountDangerClosed = false;
+    this.userService.deleteAccount().subscribe({
+      next: (response) => {
+        console.log(
+          'Account deleted:',
+          response?.message || 'Operation successful',
+        );
+        this.deleteAccountDangerClosed = true;
+        setTimeout(() => this.doLogout(), 1000);
+      },
+      error: (err) => {
+        console.error('Delete Account Error:', err);
+        setTimeout(
+          () => (
+            (this.deleteAccountModalOpened = true),
+            (this.deleteAccountDangerAlert =
+              'The account will be deleted permanently!')
+          ),
+          4000,
+        );
+      },
+    });
+  }
 }

src/app/services/user.service.ts

@@ -9,6 +9,7 @@ import {
 import { ScheduledEvent } from 'src/data/ScheduledEvent';
 import { Router } from '@angular/router';
 import { JwtHelperService } from '@auth0/angular-jwt';
+import { ServerResponse } from '../ServerResponse';
 
 @Injectable({
   providedIn: 'root',
@@ -130,6 +131,21 @@ export class UserService {
     );
   }
 
+  public deleteAccount() {
+    return this.garg.get('/delete', { observe: 'response' }).pipe(
+      map((response) => {
+        if (response.status === 200) {
+          return { message: 'Account deleted successfully' } as ServerResponse;
+        }
+        throw new Error('Unexpected status code');
+      }),
+      catchError((e: HttpErrorResponse) => {
+        console.error('API Error:', e.message, e.status, e.error);
+        return throwError(() => e.error);
+      }),
+    );
+  }
+
   public getScheduledEvents(
     force = false,
   ): Observable<Map<string, ScheduledEvent>> {