design loading dialog component

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>
+}

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);
+  }
+}

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) {}
 }

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>

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 {

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>
+<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>

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',

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": {

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": {