added login wait animation

src/app/components/login/login.component.html

@@ -108,3 +108,16 @@
   </form>
   <app-footer></app-footer>
 </section>
+@if (sharedService.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/login/login.component.scss

@@ -87,6 +87,58 @@ section {
   padding: 12px 0;
 }
 
+/*------------- LOADER -------------*/
+
+.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 var(--white);
+  border-top: 16px solid var(--light-blue);
+  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: var(--white);
+  text-shadow: 3px 3px 3px var(--black);
+  p {
+    font-size: 21px;
+    font-weight: 400px;
+    margin-bottom: 6px;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 /*------------- RESPONSIVE -------------*/
 
 @media (max-height: 800px) {
@@ -125,6 +177,14 @@ section {
     }
   }
 
+  .loading-text {
+    margin-top: 180px;
+    p {
+      font-size: 18px;
+      font-weight: 400px;
+    }
+  }
+
   .error-msg {
     height: 21px;
     p {

src/assets/i18n/de.json

@@ -8,7 +8,9 @@
     "errorMail0": "Sie müssen eine E-Mail Adresse eingeben!",
     "errorMail1": "Diese E-Mail Adresse existiert nicht!",
     "errorPassword0": "Sie müssen ein Passwort eingeben!",
-    "errorPassword1": "Das Passwort stimmt nicht mit der E-Mail Adresse überein!"
+    "errorPassword1": "Das Passwort stimmt nicht mit der E-Mail Adresse überein!",
+    "loginDialog0": "Einloggen",
+    "loginDialog1": "Bitte warten..."
   },
   "register": {
     "signup": "Registrieren",

src/assets/i18n/en.json

@@ -8,7 +8,9 @@
     "errorMail0": "You must enter a mail!",
     "errorMail1": "This email address does not exist!",
     "errorPassword0": "You must enter a password!",
-    "errorPassword1": "The password does not match the email address!"
+    "errorPassword1": "The password does not match the email address!",
+    "loginDialog0": "Logging in",
+    "loginDialog1": "Please wait..."
   },
   "register": {
     "signup": "Sign up",