1
my-angular-project-test/
2
├── src/
3
│   ├── app/
4
│   │   ├── environment/
5
│   │   │   ├── environment.ts
6
│   │   ├── components/
7
│   │   │   ├── login/
8
│   │   │   ├── home/
9
│   │   │   ├── search/
10
│   │   ├── guards/
11
│   │   │   ├── auth.guard.ts
12
│   │   ├── interceptors/
13
│   │   │   ├── auth.interceptor.ts
14
│   │   ├── services/
15
│   │   │   ├── auth.service.ts
16
│   │   │   ├── bgm.service.ts
17
│   │   ├── app.component.ts
18
│   ├── index.html
19
│   ├── main.ts
20
├── ...

1
switchMode(mode: 'login' | 'register' | 'forgotPassword' | 'confirmSignUp' | 'resetPassword') {
2
    this.authMode = mode;
3
    this.message = '';
4
}
5

6
  onSubmit() {
7
    if (this.authMode === 'login') {
8
      this.authService.signIn(this.username, this.password).then(
9
        (resp) => {
10
          if (resp.newPasswordRequired) {
11
            // 初回ログインでパスワード変更が必要、モーダルを表示
12
            this.showNewPasswordModal = true;
13
            this.cognitoUser = resp.cognitoUser;
14
          } else {
15
            // ログイン成功
16
            this.message = 'ログイン成功！';
17
          }
18
        }).catch(err => {
19
          this.message = `ログイン失敗：${err}`;
20
        });
21
    } else if (this.authMode === 'register') {
22
      this.authService.signUp(this.username, this.password, this.email).then(
23
        () => {
24
          this.message = '登録に成功しました！メールを確認して認証コードを入力してください。';
25
          this.authMode = 'confirmSignUp';
26
        },
27
        (err) => (this.message = `登録に失敗しました：${err}`)
28
      );
29
    } else if (this.authMode === 'forgotPassword') {
30
      this.authService.forgotPassword(this.username).then(
31
        () => {
32
          this.message = '認証コードを送信しました。メールを確認して認証コードと新しいパスワードを入力してください。';
33
          this.authMode = 'resetPassword';
34
        },
35
        (err) => (this.message = `認証コードの送信に失敗しました：${err}`)
36
      );
37
    } else if (this.authMode === 'confirmSignUp') {
38
      this.authService.confirmSignUp(this.username, this.code).then(
39
        () => (this.message = '認証成功！ ログインしてください。'),
40
        (err) => (this.message = `認証に失敗しました：${err}`)
41
      );
42
    } else if (this.authMode === 'resetPassword') {
43
      this.authService.confirmPassword(this.username, this.code, this.newPassword).then(
44
        () => {
45
          this.message = 'パスワードのリセットに成功しました！ 新しいパスワードでログインしてください。';
46
          this.authMode = 'login'; // ログインページに切り替え
47
        },
48
        (err) => (this.message = `パスワードの更新に失敗しました：${err}`)
49
      );
50
    }
51
  }

1
ngOnInit() : void {
2
    // this.bgmService.getCalendar().subscribe(data => console.log(data));
3
    // this.bgmService.getSubject('482850').subscribe(data => console.log(data));
4
    this.bgmService.getCalendar().subscribe((data:any[]) => {
5
      this.weeklyData = Array(7).fill(null).map((_, index) => ({
6
        day: this.daysOfWeek[index],
7
        items: data
8
          .find((d: any) => d.weekday.id === index + 1)
9
          ?.items.filter((item: any) => item.collection?.doing >= 100) || []
10
      }));
11
    });
12
  }
13

14
  navigateToItem(id: string) {
15
    this.router.navigate(['/items', id]);
16
  }
17

18
   // 显示浮窗并加载数据
19
   openModal(itemId: string): void {
20
    this.bgmService.getSubject(itemId).subscribe((data) => {
21
      this.selectedItem = data;
22
      this.showModal = true;
23
    });
24
  }
25
  // 关闭浮窗
26
  closeModal(): void {
27
    this.showModal = false;
28
    this.selectedItem = null;
29
  }
30

31
  // 辅助方法：查找 infobox 中的官方网站 URL
32
  getOfficialWebsite(): string | null {
33
    if (!this.selectedItem || !this.selectedItem.infobox) return null;
34
    const website = this.selectedItem.infobox.find((info: any) => info.key === '官方网站');
35
    return website ? website.value : null;
36
  }

1
// 検索方法
2
  onSearch(): void {
3
    if (this.searchQuery.trim()) {
4
      this.isLoading = true;
5
      this.errorMessage = '';
6

7
      // 検索オプションを設定
8
      const options = {
9
        limit: this.limit,
10
        type: this.type,
11
        meta_tags: this.meta_tags,
12
        tag: this.tag,
13
        air_date: this.air_date,
14
        rating: this.rating,
15
        rank: this.rank,
16
        nsfw: this.nsfw,
17
        page: this.page
18
      };
19

20
      this.bgmService.searchSubject(this.searchQuery, options).subscribe(
21
        (response: any) => {
22
          this.searchResults = response.data; // data 配列を抽出
23
          this.totalResults = response.total; // 総数を抽出
24
          this.isLoading = false;
25
        },
26
        (error) => {
27
          this.errorMessage = '検索に失敗しました。再試行してください。';
28
          this.isLoading = false;
29
        }
30
      );
31
    }
32
  }

1
export const authInterceptor: HttpInterceptorFn = (req, next) => {
2
  const authToken = environment.bgm.authToken;
3

4
  if (req.url.startsWith('<https://api.bgm.tv/v0>')) { # もしリクエストURLがhttps://api.bgm.tv/v0で始まる場合、認証情報を追加
5
    const authReq = req.clone({
6
      setHeaders: {
7
        Authorization: `Bearer ${authToken}`, # 認証情報を追加
8
      }
9
    });
10
    return next(authReq);
11
  }
12
  return next(req);
13
};

1
export const appConfig: ApplicationConfig = {
2
  providers: [
3
    provideHttpClient(
4
      withInterceptors([authInterceptor])
5
    )
6
  ]
7
};

1
export const authGuard: CanActivateFn = (route, state) => {
2
  const authService = inject(AuthService);
3
  const router = inject(Router);
4

5
  if (authService.isLoggedIn()) {
6
    return true;
7
  } else {
8
    // 未ログインの場合、/loginへリダイレクト
9
    router.navigate(['/login']);
10
    return false;
11
  }
12
};

1
{ path: '', component: HomeComponent, canActivate: [authGuard] }, # 主页需要登录