feat: notification component

apps/NwaifuAnime/src/app/components/auth/auth.component.ts

@@ -2,6 +2,7 @@ import { CommonModule } from "@angular/common";
 import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from "@angular/core";
 import { ActivatedRoute, Router, RouterLink } from "@angular/router";
 import { Subject, takeUntil } from "rxjs";
+import { NotificationService } from "../../services/notification/notification.service";
 import { RulibAuthService } from "../../services/parsers/rulib/rulib.auth.service";
 import { EAuthTokenService } from "./enum";
 
@@ -20,18 +21,34 @@ export class AuthComponent implements AfterViewInit, OnDestroy {
     private route: ActivatedRoute,
     private router: Router,
     private rulibAuthService: RulibAuthService,
+    private notificationService: NotificationService,
   ) {}
 
   private setToken(service: EAuthTokenService, token: string) {
     switch (service) {
       case EAuthTokenService.RULIB:
-        this.rulibAuthService.setToken(token);
+        this.rulibAuthService
+          .setToken(token)
+          .pipe(takeUntil(this.destroy$))
+          .subscribe((data) => {
+            if (data) {
+              this.router.navigate(["/"]);
+              this.notificationService.info("Успешная авторизация в RuLib!", "Вход");
+            } else {
+              this.router.navigate(["/", "auth"]);
+              this.notificationService.error(
+                "Не удалось авторизоваться в RuLib! Попробуйте ещё раз.",
+                "Вход",
+                4000,
+              );
+            }
+          });
         break;
       default:
         this.router.navigate(["/", "auth"]);
+        this.notificationService.error("Неизвестный сервис авторизации!", "Вход");
         return;
     }
-    this.router.navigate(["/"]);
   }
 
   setLibSocialToken() {

apps/NwaifuAnime/src/app/components/notification/notification.component.html

@@ -0,0 +1,12 @@
+<div
+  class="notification-container fixed md:right-0 bottom-0 max-w-[100%] min-w-[100%] min-h-[8rem] h-[8rem] md:min-w-[20rem] px-3 pb-4"
+  [hidden]="!show_notification"
+>
+  <div [class]="'notification rounded-md bg-white border-2 ' + borderColor + ' h-full'">
+    <div [class]="'head flex flex-row justify-between px-2 py-2 h-5 border-b-2 ' + borderColor">
+      <h3 class="self-center">{{ notification.name }}</h3>
+      <button class="self-center" (click)="closeNotification()" type="button">X</button>
+    </div>
+    <div class="notification-text mx-3 my-1">{{ notification.message }}</div>
+  </div>
+</div>

apps/NwaifuAnime/src/app/components/notification/notification.component.ts

@@ -0,0 +1,53 @@
+import { CommonModule } from "@angular/common";
+import { AfterViewInit, Component, OnDestroy } from "@angular/core";
+import { Subject, takeUntil } from "rxjs";
+import { INotification } from "../../services/notification/notification.dto";
+import { NotificationService } from "../../services/notification/notification.service";
+
+@Component({
+  standalone: true,
+  selector: "app-notification",
+  templateUrl: "./notification.component.html",
+  styleUrls: ["./notification.component.less"],
+  imports: [CommonModule],
+})
+export class NotificationComponent implements AfterViewInit, OnDestroy {
+  show_notification = false;
+  isError = false;
+  private closeNotificationTimer: ReturnType<typeof setTimeout> | null = null;
+  notification: INotification = { isError: false, message: "", name: "", time: 0 };
+
+  private destroy$ = new Subject<void>();
+
+  constructor(private notificationService: NotificationService) {}
+
+  ngAfterViewInit(): void {
+    this.notificationService.notification$
+      .asObservable()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((data) => {
+        if (!data) return;
+        this.notification = data;
+        this.show_notification = true;
+        if (this.closeNotificationTimer) {
+          clearTimeout(this.closeNotificationTimer);
+        }
+        this.closeNotificationTimer = setTimeout(() => {
+          this.show_notification = false;
+        }, data.time);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  closeNotification() {
+    this.show_notification = false;
+  }
+
+  get borderColor(): string {
+    return this.notification.isError ? "border-red-600" : "border-green-600";
+  }
+}