custom notifications service

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

@@ -1,9 +1,9 @@
 import { Component, NgZone, OnInit } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 import jwt_decode from "jwt-decode";
 import { AuthService } from 'src/app/auth/auth.service';
 import { User } from 'src/app/models/user.model';
+import { NotificationsService } from 'src/app/services/notifications.service';
 import { environment } from 'src/environments/environment';
 
 @Component({
@@ -17,14 +17,12 @@ export class LoginPageComponent implements OnInit {
     private router$: Router,
     private auth$: AuthService,
     private ngZone$: NgZone,
-    private snackBar$: MatSnackBar
+    private notifications$: NotificationsService
   ) { }
 
   loading = false;
 
   ngOnInit(): void {
-    this.snackBar$.open("", "", { duration: 1 });
-    console.log('Envs', environment);
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     window.onGoogleLibraryLoad = () => {
@@ -66,13 +64,20 @@ export class LoginPageComponent implements OnInit {
       this.ngZone$.run(() => {
         this.router$.navigate(['/app']);
       });
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (e: any) {
+      console.error('handleCredentialResponse', e);
       this.loading = false;
       if (e.status === 401) {
-        this.snackBar$.open("Użytkownik nie istnieje w bazie danych aplikacji DiunaBI.", "", { duration: 3000 });
+        this.notifications$.add({
+          text: "Użytkownik nie istnieje w bazie danych aplikacji DiunaBI.",
+          duration: 2500
+        });
       } else {
-        this.snackBar$.open("Błąd połączenia z serwerem. Skontaktuj się z administratorem.", "", { duration: 3000 });
+        this.notifications$.add({
+          text: "Błąd połączenia z serwerem. Skontaktuj się z administratorem.",
+          duration: 2500
+        });
       }
     } finally {
       this.loading = false;

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

@@ -0,0 +1,8 @@
+<mat-card *ngFor="let msg of notifications$.messages">
+    <mat-card-content>
+        <span class="text">{{msg.text}}</span>
+        <span class="btn" *ngIf="msg.btn">
+            <a class="action-button" (click)="notifications$.doAction(msg)">{{msg.btn}}</a>
+        </span>
+    </mat-card-content>
+</mat-card>

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

@@ -0,0 +1,17 @@
+mat-card {
+    margin-bottom: 3px;
+    background-color: rgba(255, 145, 0, 0.4);
+}
+.action-button {
+    cursor: pointer;
+}
+.text {
+    display: inline-block;
+    width: 70%;
+}
+.btn {
+    display: inline-block;
+    width: 30%;
+    text-align: right;
+    color: red;
+}

Frontend/src/app/components/notifications/notifications.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationsComponent } from './notifications.component';
+
+describe('NotificationsComponent', () => {
+  let component: NotificationsComponent;
+  let fixture: ComponentFixture<NotificationsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NotificationsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NotificationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { NotificationsService } from 'src/app/services/notifications.service';
+
+@Component({
+  selector: 'app-notifications',
+  templateUrl: './notifications.component.html',
+  styleUrls: ['./notifications.component.scss'],
+})
+export class NotificationsComponent {
+  constructor(
+    public notifications$: NotificationsService
+  ) {}
+}