Login page lifecycle fix

Frontend/src/app/components/login-page/login-page.component.ts

@@ -59,7 +59,10 @@ export class LoginPageComponent implements OnInit {
         email: responsePayload.email,
         avatar: responsePayload.picture
       });
-      this.loading = true;
+      this.ngZone$.run(() => {
+        this.loading = true;
+      });
+      await this.sleep(2500);
       await this.auth$.getAPIToken(response.credential);
       this.ngZone$.run(() => {
         this.router$.navigate(['/app']);
@@ -67,21 +70,32 @@ export class LoginPageComponent implements OnInit {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (e: any) {
       console.error('handleCredentialResponse', e);
-      this.loading = false;
+      this.ngZone$.run(() => {
+        this.loading = false;
+      });
       if (e.status === 401) {
-        this.notifications$.add({
+        this.ngZone$.run(() => {
-          text: "Użytkownik nie istnieje w bazie danych aplikacji DiunaBI.",
+          this.notifications$.add({
-          duration: 2500
+            text: "Użytkownik nie istnieje w bazie danych aplikacji DiunaBI.",
+            btn: "OK",
+            duration: 15000
+          });
         });
       } else {
-        this.notifications$.add({
+        this.ngZone$.run(() => {
-          text: "Błąd połączenia z serwerem. Skontaktuj się z administratorem.",
+          this.notifications$.add({
-          duration: 2500
+            text: "Błąd połączenia z serwerem. Skontaktuj się z administratorem.",
+            btn: "OK",
+            duration: 15000
+          });
         });
       }
     } finally {
       this.loading = false;
     }
   }
+  sleep(ms: number) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
 }
 

Frontend/src/app/components/notifications/notifications.component.scss

@@ -6,12 +6,10 @@ mat-card {
     cursor: pointer;
 }
 .text {
-    display: inline-block;
+    float: left;
-    width: 70%;
 }
 .btn {
-    display: inline-block;
+    float: right;
-    width: 30%;
-    text-align: right;
     color: red;
+    margin-left: 5px;
 }