feat: auth page

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

@@ -1,38 +1,44 @@
 <div class="flex flex-col items-center">
+  @if (needAuth) {
+    <h1>Необходима авторизация</h1>
+    <a routerLink="/auth" class="text-center bg-slate-600 text-white p-3 rounded-md mb-4">Войти</a>
+  }
   @if (detail_item) {
     <h1>{{ detail_item.name }}</h1>
     <h2>{{ detail_item.rus_name }}</h2>
     <img [src]="detail_item.cover.default" [alt]="detail_item.slug" />
 
-    <details class="w-full">
-      <summary class="text-center sticky top-0 bg-white z-10 py-2">
-        <h3>Главы</h3>
-      </summary>
-      <div class="flex flex-col items-center pb-16">
-        @for (chapter of chapters.data; track $index) {
-          <a
-            routerLink="/reader"
-            [queryParams]="{
-              url: detail_item.slug_url,
-              chapter: chapter.number,
-              volume: chapter.volume,
-            }"
-            [title]="chapter.name"
-            class="p-3 text-white bg-slate-600 w-[300px] mt-3 rounded-lg"
-          >
-            <h3>
-              <strong>{{ chapter.number }}.</strong> {{ chapter.name || "Нет названия" }}
-            </h3>
-          </a>
-        }
-      </div>
-    </details>
-    <a
-      routerLink="/reader"
-      class="p-3 text-white bg-slate-600 w-[300px] mt-5 rounded-lg text-center"
-      [queryParams]="{ url: detail_item.slug_url, volume: 1, chapter: 1 }"
-    >
-      Читать
-    </a>
+    @if (!needAuth) {
+      <details class="w-full">
+        <summary class="text-center sticky top-0 bg-white z-10 py-2">
+          <h3>Главы</h3>
+        </summary>
+        <div class="flex flex-col items-center pb-16">
+          @for (chapter of chapters.data; track $index) {
+            <a
+              routerLink="/reader"
+              [queryParams]="{
+                url: detail_item.slug_url,
+                chapter: chapter.number,
+                volume: chapter.volume,
+              }"
+              [title]="chapter.name"
+              class="p-3 text-white bg-slate-600 w-[300px] mt-3 rounded-lg"
+            >
+              <h3>
+                <strong>{{ chapter.number }}.</strong> {{ chapter.name || "Нет названия" }}
+              </h3>
+            </a>
+          }
+        </div>
+      </details>
+      <a
+        routerLink="/reader"
+        class="p-3 text-white bg-slate-600 w-[300px] mt-5 rounded-lg text-center"
+        [queryParams]="{ url: detail_item.slug_url, volume: 1, chapter: 1 }"
+      >
+        Читать
+      </a>
+    }
   }
 </div>

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

@@ -16,6 +16,7 @@ import { SearchService } from "../../services/search.service";
 export class DetailComponent implements AfterViewInit, OnDestroy {
   detail_item: Data | null = null;
   chapters: IRulibChaptersResult = { data: [] };
+  needAuth: boolean = false;
   private destroy$ = new Subject<void>();
   constructor(
     private route: ActivatedRoute,
@@ -27,15 +28,27 @@ export class DetailComponent implements AfterViewInit, OnDestroy {
     this.searchService
       .getDetails(url)
       .pipe(takeUntil(this.destroy$))
-      .subscribe((data) => {
-        this.detail_item = data.data;
+      .subscribe({
+        next: (data) => {
+          this.detail_item = data.data;
+        },
+        error: (error) => {
+          console.log(error);
+        },
       });
     this.searchService
       .getChapters(url)
       .pipe(takeUntil(this.destroy$))
-      .subscribe((data) => {
-        this.chapters = data;
-        console.log(data);
+      .subscribe({
+        next: (data) => {
+          this.chapters = data;
+          if (data.data.length === 0) {
+            this.needAuth = true;
+          }
+        },
+        error: (error) => {
+          console.log(error);
+        },
       });
   }