refactor: remove ConfirmDialogComponent

src/app/components/add-task/add-task.component.ts

@@ -215,7 +215,7 @@ export class AddTaskComponent implements OnInit, OnDestroy {
    * @returns {void}
    */
   closeOverlay() {
-    this.overlayService.setOverlayData('', '');
+    this.overlayService.clearOverlayData();
   }
 
   /**
@@ -268,8 +268,7 @@ export class AddTaskComponent implements OnInit, OnDestroy {
 
   onSubmit(ngForm: NgForm) {
     if (ngForm.submitted && ngForm.form.valid) {
-      // OverlayData = Current TaskId
+      if (this.overlayType === 'taskOverlayEdit') {
-      if (this.overlayData) {
         this.updateTask(ngForm);
       } else {
         this.createTask(ngForm);

src/app/components/contacts/contact-detail/contact-detail.component.html

@@ -66,7 +66,7 @@
           <!-- Show delete button if user is not contact only -->
           @if (selectedUser.isContactOnly || currentUser && selectedUser.id !==
           currentUser.id) {
-          <div class="btn btn-delete" (click)="toggleConfirmDialog()">
+          <div class="btn btn-delete" (click)="deleteContact(selectedUserId)">
             <img src="./../../../../assets/img/contact/delete.svg" alt="" />
             <p>
               {{ "contacts.btnDelete0" | translate }}
@@ -116,11 +116,3 @@
   <!-- TODO -->
   }
 </section>
-
-<!-- Confirm dialog -->
-<app-confirm-dialog
-  *ngIf="showConfirmDialog"
-  [message]="'confirmDialogComponent.deleteContact' | translate"
-  (onConfirm)="deleteContact()"
-  (onCancel)="toggleConfirmDialog()"
-></app-confirm-dialog>

src/app/components/contacts/contact-detail/contact-detail.component.ts

@@ -16,12 +16,11 @@ import { OverlayService } from '../../../services/overlay.service';
 import { ApiService } from '../../../services/api.service';
 import { ToastNotificationService } from '../../../services/toast-notification.service';
 import { UpdateNotifierService } from '../../../services/update-notifier.service';
-import { ConfirmDialogComponent } from '../../../shared/components/confirm-dialog/confirm-dialog.component';
 
 @Component({
   selector: 'app-contact-detail',
   standalone: true,
-  imports: [CommonModule, TranslateModule, ConfirmDialogComponent],
+  imports: [CommonModule, TranslateModule],
   templateUrl: './contact-detail.component.html',
   styleUrl: './contact-detail.component.scss',
 })
@@ -112,7 +111,6 @@ export class ContactDetailComponent implements OnChanges, OnDestroy {
    */
   toggleConfirmDialog(): void {
     this.showConfirmDialog = !this.showConfirmDialog;
-    this.overlayService.setOverlayData('dialog', '');
   }
 
   /**
@@ -130,9 +128,9 @@ export class ContactDetailComponent implements OnChanges, OnDestroy {
    * Deletes the contact with the given id, shows a success toast, triggers an update of the contact list,
    * and closes the contact details component.
    */
-  async deleteContact() {
+  async deleteContact(userId: string) {
     try {
-      await lastValueFrom(this.apiService.deleteUserById(this.selectedUserId!));
+      await lastValueFrom(this.apiService.deleteUserById(userId));
       this.toastNotificationService.deleteContactSuccessToast();
       this.updateNotifierService.notifyUpdate('contact');
       this.emitCloseContact();

src/app/components/login/forgot-pw/pw-reset/pw-reset.component.ts

@@ -6,7 +6,7 @@ import { FooterComponent } from '../../footer/footer.component';
 import { HeaderComponent } from '../../header/header.component';
 import { TranslateModule } from '@ngx-translate/core';
 import { ActivatedRoute } from '@angular/router';
-import { Subject, Subscription, takeUntil } from 'rxjs';
+import { Subject, takeUntil } from 'rxjs';
 import { ButtonStateService } from '../../../../services/button-state.service';
 import { AuthService } from '../../../../services/auth.service';
 import { PasswordVisibilityService } from '../../../../services/password-visibility.service';
@@ -26,8 +26,6 @@ import { PasswordVisibilityService } from '../../../../services/password-visibil
   styleUrl: './pw-reset.component.scss',
 })
 export class PwResetComponent implements OnInit, OnDestroy {
-  private routeSubscription: Subscription = new Subscription();
-
   uid: string = '';
   token: string = '';
   errorHttpMessage: string = '';

src/app/shared/components/confirm-dialog/confirm-dialog.component.html

@@ -1,17 +0,0 @@
-<section>
-  <div class="dialog">
-    <p>{{ message }}</p>
-    <div class="btns">
-      <div class="btn">
-        <div class="btn-cancel" (click)="cancel()">
-          {{ "confirmDialogComponent.btnCancel" | translate }}
-        </div>
-      </div>
-      <div class="btn">
-        <div class="btn-delete-contact" (click)="confirm()">
-          {{ "confirmDialogComponent.btnConfirm" | translate }}
-        </div>
-      </div>
-    </div>
-  </div>
-</section>

src/app/shared/components/confirm-dialog/confirm-dialog.component.scss

@@ -1,112 +0,0 @@
-section {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  backdrop-filter: blur(5px);
-  background-color: rgba($color: #000000, $alpha: 0.2);
-  z-index: 999;
-}
-
-.dialog {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--white);
-  width: 600px;
-  height: 200px;
-  border-radius: 26px;
-  margin: 24px;
-  border: 2px solid rgba($color: #000000, $alpha: 0.1);
-  p {
-    text-align: center;
-    font-size: 27px;
-    font-weight: 500;
-    margin-bottom: 12px;
-    padding: 0 12px;
-  }
-}
-
-.btns {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.btn {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 111px;
-  height: 57px;
-  margin: 0 24px;
-}
-
-.btn-cancel {
-  padding: 12px;
-  margin: 12px 12px;
-  border-radius: 10px;
-  border-color: var(--black);
-  background-color: var(--dark-blue);
-  color: var(--white);
-  font-size: 23px;
-  font-weight: 400;
-  transition: 125ms ease-in-out;
-  cursor: pointer;
-  &:hover {
-    background-color: var(--light-blue);
-    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
-  }
-}
-
-.btn-delete-contact {
-  padding: 12px;
-  margin: 12px 12px;
-  border-radius: 10px;
-  color: var(--red);
-  background-color: var(--white);
-  border: 1px solid var(--red);
-  font-size: 23px;
-  font-weight: 400;
-  transition: 125ms ease-in-out;
-  cursor: pointer;
-  &:hover {
-    color: var(--white);
-    background-color: var(--red);
-    border-color: var(--black);
-    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
-  }
-}
-
-@media screen and (max-width: 450px) {
-  .dialog {
-    p {
-      font-size: 22px;
-    }
-  }
-}
-
-@media screen and (max-width: 350px) {
-  .dialog {
-    width: 280px;
-    p {
-      font-size: 22px;
-    }
-  }
-
-  .btn {
-    width: 100px;
-  }
-
-  .btn-delete-contact,
-  .btn-cancel {
-    font-size: 18px;
-  }
-}

src/app/shared/components/confirm-dialog/confirm-dialog.component.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ConfirmDialogComponent } from './confirm-dialog.component';
-
-describe('ConfirmDialogComponent', () => {
-  let component: ConfirmDialogComponent;
-  let fixture: ComponentFixture<ConfirmDialogComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ConfirmDialogComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ConfirmDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/shared/components/confirm-dialog/confirm-dialog.component.ts

@@ -1,24 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-
-@Component({
-  selector: 'app-confirm-dialog',
-  standalone: true,
-  imports: [TranslateModule],
-  templateUrl: './confirm-dialog.component.html',
-  styleUrl: './confirm-dialog.component.scss',
-})
-export class ConfirmDialogComponent {
-  @Input() message: string = 'Are you sure?';
-  @Output() onCancel = new EventEmitter<void>();
-  @Output() onConfirm = new EventEmitter<void>();
-
-  cancel() {
-    this.onCancel.emit();
-  }
-
-  confirm() {
-    this.cancel();
-    this.onConfirm.emit();
-  }
-}

src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.html

@@ -124,7 +124,7 @@
       class="btn-delete"
       type="button"
       value="{{ 'contactDialogForm.btnDelete' | translate }}"
-      (click)="toggleConfirmDialog()"
+      (click)="deleteContact(selectedUser.id)"
     ></app-form-btn>
     } @else {
     <app-form-btn
@@ -152,11 +152,3 @@
     ></app-form-btn>
   </div>
 </form>
-
-<!-- Confirm dialog -->
-<app-confirm-dialog
-  *ngIf="showConfirmDialog"
-  [message]="'confirmDialogComponent.deleteContact' | translate"
-  (onConfirm)="deleteContact(selectedUser.id)"
-  (onCancel)="toggleConfirmDialog()"
-></app-confirm-dialog>

src/app/shared/components/overlay/contact-overlay/contact-form/contact-form.component.ts

@@ -16,19 +16,12 @@ import { ApiService } from '../../../../../services/api.service';
 import { ToastNotificationService } from '../../../../../services/toast-notification.service';
 import { UpdateNotifierService } from '../../../../../services/update-notifier.service';
 import { User } from '../../../../../interfaces/user.interface';
-import { ConfirmDialogComponent } from '../../../confirm-dialog/confirm-dialog.component';
 import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-contact-form',
   standalone: true,
-  imports: [
+  imports: [CommonModule, TranslateModule, FormsModule, FormBtnComponent],
-    CommonModule,
-    TranslateModule,
-    FormsModule,
-    FormBtnComponent,
-    ConfirmDialogComponent,
-  ],
   templateUrl: './contact-form.component.html',
   styleUrl: './contact-form.component.scss',
 })

src/app/shared/components/overlay/task-overlay/task-overlay.component.html

@@ -127,9 +127,9 @@
     </div>
     }
   </div>
-  @if(task.creator === currentUserId) {
+  @if(task.creator === currentUserId && task.id) {
   <div class="btns">
-    <div class="btn btn-delete" (click)="toggleConfirmDialog()">
+    <div class="btn btn-delete" (click)="deleteTask(task.id)">
       <img src="./../../../../../assets/img/contact/delete.svg" alt="" />
       <p>{{ "addTask.delete" | translate }}</p>
     </div>
@@ -145,11 +145,3 @@
   </div>
   }
 </section>
-
-<!-- Confirm dialog -->
-<app-confirm-dialog
-  *ngIf="showConfirmDialog"
-  [message]="'confirmDialogComponent.deleteTask' | translate"
-  (onConfirm)="deleteTask(overlayData)"
-  (onCancel)="toggleConfirmDialog()"
-></app-confirm-dialog>

src/app/shared/components/overlay/task-overlay/task-overlay.component.ts

@@ -19,18 +19,11 @@ import { map, Subject, takeUntil } from 'rxjs';
 import { ApiService } from '../../../../services/api.service';
 import { UpdateNotifierService } from '../../../../services/update-notifier.service';
 import { ToastNotificationService } from '../../../../services/toast-notification.service';
-import { ConfirmDialogComponent } from '../../confirm-dialog/confirm-dialog.component';
 
 @Component({
   selector: 'app-task-overlay',
   standalone: true,
-  imports: [
+  imports: [BtnCloseComponent, CommonModule, BtnBackComponent, TranslateModule],
-    BtnCloseComponent,
-    CommonModule,
-    BtnBackComponent,
-    TranslateModule,
-    ConfirmDialogComponent,
-  ],
   templateUrl: './task-overlay.component.html',
   styleUrl: './task-overlay.component.scss',
 })