From fa4a2c6d04961151b475697df33c7541ee19eb1f Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Thu, 30 May 2024 20:05:41 +0200
Subject: [PATCH] design loading dialog component

---
 .../loading-dialog.component.html             | 14 +++++-
 .../loading-dialog.component.scss             | 49 +++++++++++++++++++
 .../loading-dialog.component.ts               |  8 +--
 .../main-login/login/login.component.html     |  1 +
 .../main-login/login/login.component.ts       |  2 +
 .../main-login/main-login.component.html      | 10 ++--
 .../main-login/main-login.component.ts        |  1 +
 src/assets/i18n/de.json                       |  4 +-
 src/assets/i18n/en.json                       |  4 +-
 9 files changed, 82 insertions(+), 11 deletions(-)

diff --git a/src/app/components/main-login/loading-dialog/loading-dialog.component.html b/src/app/components/main-login/loading-dialog/loading-dialog.component.html
index 82e72cc..96ce853 100644
--- a/src/app/components/main-login/loading-dialog/loading-dialog.component.html
+++ b/src/app/components/main-login/loading-dialog/loading-dialog.component.html
@@ -1 +1,13 @@
-<p>loading-dialog works!</p>
+@if (loginService.isBtnDisabled) {
+<div class="loading-dialog">
+  <div id="loading" class="loader"></div>
+  <div id="loadingText" class="loading-text">
+    <p>
+      {{ "login.loginDialog0" | translate }}
+    </p>
+    <p>
+      {{ "login.loginDialog1" | translate }}
+    </p>
+  </div>
+</div>
+}
diff --git a/src/app/components/main-login/loading-dialog/loading-dialog.component.scss b/src/app/components/main-login/loading-dialog/loading-dialog.component.scss
index e69de29..d7e24a1 100644
--- a/src/app/components/main-login/loading-dialog/loading-dialog.component.scss
+++ b/src/app/components/main-login/loading-dialog/loading-dialog.component.scss
@@ -0,0 +1,49 @@
+.loading-dialog {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100vw;
+  height: 100vh;
+  backdrop-filter: blur(5px);
+  background-color: rgba($color: #000, $alpha: 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+}
+
+.loader {
+  position: fixed;
+  border: 16px solid #fff;
+  border-top: 16px solid #444df2;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: spin 2s linear infinite;
+  margin: auto;
+  margin-top: 20px;
+}
+
+.loading-text {
+  position: fixed;
+  text-align: center;
+  margin-top: 200px;
+  color: #fff;
+  text-shadow: 3px 3px 3px #000;
+  p {
+    font-size: 21px;
+    font-weight: 400px;
+    margin-bottom: 6px;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/app/components/main-login/loading-dialog/loading-dialog.component.ts b/src/app/components/main-login/loading-dialog/loading-dialog.component.ts
index ce535e0..6fd051e 100644
--- a/src/app/components/main-login/loading-dialog/loading-dialog.component.ts
+++ b/src/app/components/main-login/loading-dialog/loading-dialog.component.ts
@@ -1,12 +1,14 @@
 import { Component } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { loginService } from '../../../service/login.service';
 
 @Component({
   selector: 'app-loading-dialog',
   standalone: true,
-  imports: [],
+  imports: [TranslateModule],
   templateUrl: './loading-dialog.component.html',
-  styleUrl: './loading-dialog.component.scss'
+  styleUrl: './loading-dialog.component.scss',
 })
 export class LoadingDialogComponent {
-
+  constructor(public loginService: loginService) {}
 }
diff --git a/src/app/components/main-login/login/login.component.html b/src/app/components/main-login/login/login.component.html
index 559cdac..9e6deaa 100644
--- a/src/app/components/main-login/login/login.component.html
+++ b/src/app/components/main-login/login/login.component.html
@@ -113,3 +113,4 @@
   </div>
   <app-footer></app-footer>
 </section>
+<app-loading-dialog></app-loading-dialog>
diff --git a/src/app/components/main-login/login/login.component.ts b/src/app/components/main-login/login/login.component.ts
index 813f116..09a8be7 100644
--- a/src/app/components/main-login/login/login.component.ts
+++ b/src/app/components/main-login/login/login.component.ts
@@ -6,6 +6,7 @@ import { FooterComponent } from '../../../shared/components/login/footer/footer.
 import { CommonModule } from '@angular/common';
 import { StartHeaderComponent } from '../../../shared/components/login/start-header/start-header.component';
 import { TranslateModule } from '@ngx-translate/core';
+import { LoadingDialogComponent } from '../loading-dialog/loading-dialog.component';
 
 @Component({
   selector: 'app-login',
@@ -19,6 +20,7 @@ import { TranslateModule } from '@ngx-translate/core';
     RouterLink,
     StartHeaderComponent,
     TranslateModule,
+    LoadingDialogComponent,
   ],
 })
 export class LoginComponent {
diff --git a/src/app/components/main-login/main-login.component.html b/src/app/components/main-login/main-login.component.html
index ab1b0b2..13cc4cc 100644
--- a/src/app/components/main-login/main-login.component.html
+++ b/src/app/components/main-login/main-login.component.html
@@ -1,5 +1,5 @@
- <app-login></app-login>
- <app-register></app-register> 
- <app-choose-avatar ></app-choose-avatar> 
- <app-password-forget></app-password-forget>
- <app-password-reset></app-password-reset>
\ No newline at end of file
+<app-login></app-login>
+<app-register></app-register>
+<app-choose-avatar></app-choose-avatar>
+<app-password-forget></app-password-forget>
+<app-password-reset></app-password-reset>
diff --git a/src/app/components/main-login/main-login.component.ts b/src/app/components/main-login/main-login.component.ts
index 709507a..6393a74 100644
--- a/src/app/components/main-login/main-login.component.ts
+++ b/src/app/components/main-login/main-login.component.ts
@@ -6,6 +6,7 @@ import { PasswordForgetComponent } from './password-forget/password-forget.compo
 import { PasswordResetComponent } from './password-reset/password-reset.component';
 import { CommonModule } from '@angular/common';
 import { RouterLink } from '@angular/router';
+import { LoadingDialogComponent } from './loading-dialog/loading-dialog.component';
 
 @Component({
   selector: 'app-main-login',
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index 17e0a7d..3c2612a 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -16,7 +16,9 @@
     "errorText3": "*Ungültige Anmeldeinformationen.",
     "errorText4": "*Zuviele fehlgeschlagener Anmeldeversuche.",
     "errorText5": "*Bitte Überprüfe deine Eingaben.",
-    "errorText6": "*Bitte versuchen Sie es später erneut."
+    "errorText6": "*Bitte versuchen Sie es später erneut.",
+    "loginDialog0": "Einloggen",
+    "loginDialog1": "Bitte warten..."
   },
 
   "createAccount": {
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 2ce7e35..2d822dd 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -16,7 +16,9 @@
     "errorText3": "*Invalid login credentials.",
     "errorText4": "*Too many failed login attempts.",
     "errorText5": "*Please check your entries.",
-    "errorText6": "*Please try again later."
+    "errorText6": "*Please try again later.",
+    "loginDialog0": "Logging in",
+    "loginDialog1": "Please wait..."
   },
 
   "createAccount": {