feat: notification component

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

@@ -11,3 +11,4 @@
 <main>
   <router-outlet></router-outlet>
 </main>
+<app-notification></app-notification>

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

@@ -2,11 +2,11 @@ import { Component } from "@angular/core";
 import { RouterModule } from "@angular/router";
 import { AppService } from "./app.service";
 import { HeaderComponent } from "./components/header/header.component";
-import { Datum } from "./services/parsers/rulib/rulib.search.dto";
+import { NotificationComponent } from "./components/notification/notification.component";
 
 @Component({
   standalone: true,
-  imports: [RouterModule, HeaderComponent],
+  imports: [RouterModule, HeaderComponent, NotificationComponent, NotificationComponent],
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrl: "./app.component.less",
@@ -14,7 +14,6 @@ import { Datum } from "./services/parsers/rulib/rulib.search.dto";
 })
 export class AppComponent {
   title = "NwaifuAnime";
-  items: Datum[] = [];
   constructor(private sw: AppService) {}
 
   get hasUpdate() {

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

apps/NwaifuAnime/src/app/services/notification/notification.dto.ts

@@ -0,0 +1,6 @@
+export interface INotification {
+  message: string;
+  isError: boolean;
+  time: number;
+  name: string;
+}

apps/NwaifuAnime/src/app/services/notification/notification.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from "@angular/core";
+import { Subject } from "rxjs";
+import { INotification } from "./notification.dto";
+
+@Injectable({
+  providedIn: "root",
+})
+export class NotificationService {
+  readonly notification$ = new Subject<INotification>();
+
+  private sendNotification(message: INotification) {
+    this.notification$.next(message);
+  }
+
+  info(message: string, title: string = "", time = 3000) {
+    this.sendNotification({
+      message,
+      isError: false,
+      time: time,
+      name: title,
+    });
+  }
+
+  error(message: string, title: string = "", time = 3000) {
+    this.sendNotification({
+      message,
+      isError: true,
+      time: time,
+      name: title,
+    });
+  }
+}

apps/NwaifuAnime/src/app/services/parsers/rulib/rulib.auth.service.ts

@@ -9,13 +9,16 @@ export class RulibAuthService implements OnDestroy {
   private api_url = "https://api.lib.social";
   constructor(private http: HttpClient) {}
 
-  setToken(token: string) {
+  setToken(token: string): Observable<boolean> {
-    this.checkToken(token)
+    return this.checkToken(token)
       .pipe(takeUntil(this.destroy$))
-      .subscribe((data) => {
+      .pipe(
-        if (!data) return;
+        map((data) => {
+          if (!data) return false;
           localStorage.setItem("token", token);
-      });
+          return true;
+        }),
+      );
   }
 
   getToken(): string {