From 35d815d5e6007dda4497315b9e036b6d335727fd Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Tue, 21 May 2024 09:48:21 +0200
Subject: [PATCH] added notice dialog

---
 src/app/app.component.html                    |  1 +
 src/app/app.routes.ts                         |  1 +
 src/app/components/login/login.component.ts   | 20 ++++++++-
 src/app/services/login.service.ts             |  2 +-
 .../dialog-overlay.component.html             | 12 ++++++
 .../dialog-overlay.component.scss             | 41 +++++++++++++++++++
 .../dialog-overlay.component.spec.ts          | 23 +++++++++++
 .../dialog-overlay.component.ts               | 25 +++++++++++
 .../components/overlay/overlay.component.html |  6 +++
 .../components/overlay/overlay.component.ts   | 10 ++++-
 src/assets/i18n/de.json                       |  5 +++
 src/assets/i18n/en.json                       |  5 +++
 12 files changed, 147 insertions(+), 4 deletions(-)
 create mode 100644 src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.html
 create mode 100644 src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.scss
 create mode 100644 src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.spec.ts
 create mode 100644 src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 2802773..e0fb758 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,5 +1,6 @@
 @if (this.isLoggedIn === undefined) {
 <router-outlet></router-outlet>
+<app-overlay></app-overlay>
 } @else {
 <div
   [ngClass]="{
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 3f1edd6..8859ce7 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -16,6 +16,7 @@ import { PwResetComponent } from './components/login/forgot-pw/pw-reset/pw-reset
 export const routes: Routes = [
   { path: '', component: SummaryComponent },
   { path: 'login', component: LoginComponent },
+  { path: 'login/:id', component: LoginComponent },
   { path: 'login/imprint', component: ImprintComponent },
   { path: 'login/privacy-policy', component: PrivacyPolicyComponent },
   { path: 'register', component: RegisterComponent },
diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts
index 7e11ff1..0938d04 100644
--- a/src/app/components/login/login.component.ts
+++ b/src/app/components/login/login.component.ts
@@ -3,13 +3,14 @@ import { Component } from '@angular/core';
 import { FormsModule, NgForm } from '@angular/forms';
 import { FormBtnComponent } from '../../shared/components/buttons/form-btn/form-btn.component';
 import { FirebaseService } from '../../services/firebase.service';
-import { Router, RouterLink } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { LoginService } from '../../services/login.service';
 import { SharedService } from '../../services/shared.service';
 import { FooterComponent } from './footer/footer.component';
 import { HeaderComponent } from './header/header.component';
 import { TranslateModule } from '@ngx-translate/core';
 import { LoadingDialogComponent } from './loading-dialog/loading-dialog.component';
+import { OverlayService } from '../../services/overlay.service';
 
 @Component({
   selector: 'app-login',
@@ -39,9 +40,26 @@ export class LoginComponent {
     private firebaseService: FirebaseService,
     public loginSerivce: LoginService,
     public sharedService: SharedService,
+    private overlayService: OverlayService,
+    private route: ActivatedRoute,
     private router: Router
   ) {}
 
+  ngOnInit() {
+    this.routeParams();
+  }
+
+  routeParams() {
+    this.route.params.subscribe((params) => {
+      if (params['id'] && params['id'] === 'pw-send') {
+        this.overlayService.setOverlayData('dialog', 'pw-send');
+      }
+      if (params['id'] && params['id'] === 'pw-change') {
+        this.overlayService.setOverlayData('dialog', 'pw-change');
+      }
+    });
+  }
+
   onSubmit(ngForm: NgForm) {
     this.sharedService.isBtnDisabled = true;
     if (ngForm.submitted && ngForm.form.valid) {
diff --git a/src/app/services/login.service.ts b/src/app/services/login.service.ts
index 3746bb7..d48c7a4 100644
--- a/src/app/services/login.service.ts
+++ b/src/app/services/login.service.ts
@@ -212,7 +212,7 @@ export class LoginService {
     const auth = getAuth();
     sendPasswordResetEmail(auth, email)
       .then(() => {
-        this.router.navigate(['/login']);
+        this.router.navigate(['/login/pw-send']);
         this.sharedService.isBtnDisabled = false;
       })
       .catch((error) => {
diff --git a/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.html b/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.html
new file mode 100644
index 0000000..b67ed1c
--- /dev/null
+++ b/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.html
@@ -0,0 +1,12 @@
+<section>
+  <div class="header">
+    <div class="headline">{{ "msgDialog.noticeHeadline" | translate }}</div>
+    <app-btn-close (click)="closeOverlay()"></app-btn-close>
+  </div>
+  <p>
+    @if (overlayData === "pw-send") { {{ "msgDialog.pwSend" | translate }} }
+  </p>
+  <p>
+    @if (overlayData === "pw-change") { {{ "msgDialog.pwChange" | translate }} }
+  </p>
+</section>
diff --git a/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.scss b/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.scss
new file mode 100644
index 0000000..013a0c3
--- /dev/null
+++ b/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.scss
@@ -0,0 +1,41 @@
+section {
+  width: 500px;
+  height: fit-content;
+  padding: 24px;
+  border-radius: 24px;
+  background-color: var(--white);
+  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.1);
+  p {
+    text-align: center;
+    font-size: 21px;
+    font-weight: 500;
+    padding-bottom: 12px;
+  }
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 18px;
+  .headline {
+    font-size: 24px;
+    font-weight: 700;
+  }
+}
+
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 600px) {
+  section {
+    width: calc(100vw - 96px);
+  }
+}
+
+@media screen and (max-width: 450px) {
+  section {
+    p {
+      font-size: 18px;
+    }
+  }
+}
diff --git a/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.spec.ts b/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.spec.ts
new file mode 100644
index 0000000..00cbc7b
--- /dev/null
+++ b/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DialogOverlayComponent } from './dialog-overlay.component';
+
+describe('DialogOverlayComponent', () => {
+  let component: DialogOverlayComponent;
+  let fixture: ComponentFixture<DialogOverlayComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DialogOverlayComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(DialogOverlayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.ts b/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.ts
new file mode 100644
index 0000000..186a71c
--- /dev/null
+++ b/src/app/shared/components/overlay/dialog-overlay/dialog-overlay.component.ts
@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { SharedService } from '../../../../services/shared.service';
+import { BtnCloseComponent } from '../../buttons/btn-close/btn-close.component';
+import { Router } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-dialog-overlay',
+  standalone: true,
+  imports: [BtnCloseComponent, TranslateModule],
+  templateUrl: './dialog-overlay.component.html',
+  styleUrl: './dialog-overlay.component.scss',
+})
+export class DialogOverlayComponent {
+  @Input() overlayData: string = '';
+  @Input() overlayType: string = '';
+  @Output() closeDialogEmitter = new EventEmitter<string>();
+
+  constructor(public sharedService: SharedService, private router: Router) {}
+
+  closeOverlay() {
+    this.router.navigate(['/login']);
+    this.closeDialogEmitter.emit('');
+  }
+}
diff --git a/src/app/shared/components/overlay/overlay.component.html b/src/app/shared/components/overlay/overlay.component.html
index 65b57a7..bdd368d 100644
--- a/src/app/shared/components/overlay/overlay.component.html
+++ b/src/app/shared/components/overlay/overlay.component.html
@@ -18,6 +18,12 @@
       [overlayType]="overlayType"
       (closeDialogEmitter)="onCloseOverlay($event)"
     ></app-task-edit-overlay>
+    }@if (overlayType === "dialog") {
+    <app-dialog-overlay
+      [overlayData]="overlayData"
+      [overlayType]="overlayType"
+      (closeDialogEmitter)="onCloseOverlay($event)"
+    ></app-dialog-overlay>
     }
   </div>
 </div>
diff --git a/src/app/shared/components/overlay/overlay.component.ts b/src/app/shared/components/overlay/overlay.component.ts
index b3d085b..c72ac8d 100644
--- a/src/app/shared/components/overlay/overlay.component.ts
+++ b/src/app/shared/components/overlay/overlay.component.ts
@@ -13,8 +13,10 @@ import { CommonModule } from '@angular/common';
 import { TaskOverlayComponent } from './task-overlay/task-overlay.component';
 import { FirebaseService } from '../../../services/firebase.service';
 import { TaskEditOverlayComponent } from './task-edit-overlay/task-edit-overlay.component';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { AddTaskComponent } from '../../../components/add-task/add-task.component';
+import { DialogOverlayComponent } from './dialog-overlay/dialog-overlay.component';
+import { SharedService } from '../../../services/shared.service';
 
 @Component({
   selector: 'app-overlay',
@@ -23,6 +25,7 @@ import { AddTaskComponent } from '../../../components/add-task/add-task.componen
     CommonModule,
     TaskOverlayComponent,
     TaskEditOverlayComponent,
+    DialogOverlayComponent,
     AddTaskComponent,
   ],
   templateUrl: './overlay.component.html',
@@ -34,7 +37,9 @@ export class OverlayComponent implements OnInit {
 
   constructor(
     private overlayService: OverlayService,
-    private route: ActivatedRoute
+    private sharedService: SharedService,
+    private route: ActivatedRoute,
+    private router: Router
   ) {}
 
   ngOnInit(): void {
@@ -51,6 +56,7 @@ export class OverlayComponent implements OnInit {
   }
 
   onCloseOverlay(emitter: string) {
+    this.overlayType === 'dialog' && this.router.navigate(['/login']);
     this.overlayData = emitter;
   }
 
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index e919201..def2665 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -20,6 +20,11 @@
     "pwChange": "Passwort ändern",
     "notice": "Wir senden Ihnen eine E-Mail, über die Sie Ihr Passwort ändern können"
   },
+  "msgDialog": {
+    "noticeHeadline": "Hinweis",
+    "pwSend": "Eine E-Mail mit Anweisungen zum Zurücksetzen Ihres Passworts wurde an Sie gesendet.",
+    "pwChange": "Ihr Passwort wurde erfolgreich geändert. Sie können sich jetzt einloggen."
+  },
   "register": {
     "signup": "Registrieren",
     "name": "Name",
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 1f43d4c..ddddbb4 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -20,6 +20,11 @@
     "pwChange": "Change Password",
     "notice": "We will send you an email to change your password."
   },
+  "msgDialog": {
+    "noticeHeadline": "Notice",
+    "pwSend": "An email with instructions on how to reset your password has been sent to you.",
+    "pwChange": "Your password has been successfully changed. You can now log in."
+  },
   "register": {
     "signup": "Sign up",
     "name": "Name",