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
            // First-time login requires password reset, show modal
12
            this.showNewPasswordModal = true;
13
            this.cognitoUser = resp.cognitoUser;
14
          } else {
15
            // Login successful
16
            this.message = 'Login successful!';
17
          }
18
        }).catch(err => {
19
          this.message = `Login failed: ${err}`;
20
        });
21
    } else if (this.authMode === 'register') {
22
      this.authService.signUp(this.username, this.password, this.email).then(
23
        () => {
24
          this.message = 'Registration successful! Please check your email and enter the verification code.';
25
          this.authMode = 'confirmSignUp';
26
        },
27
        (err) => (this.message = `Registration failed: ${err}`)
28
      );
29
    } else if (this.authMode === 'forgotPassword') {
30
      this.authService.forgotPassword(this.username).then(
31
        () => {
32
          this.message = 'Verification code has been sent. Please check your email and enter the code and new password.';
33
          this.authMode = 'resetPassword';
34
        },
35
        (err) => (this.message = `Failed to send verification code: ${err}`)
36
      );
37
    } else if (this.authMode === 'confirmSignUp') {
38
      this.authService.confirmSignUp(this.username, this.code).then(
39
        () => (this.message = 'Verification successful! Please log in.'),
40
        (err) => (this.message = `Verification failed: ${err}`)
41
      );
42
    } else if (this.authMode === 'resetPassword') {
43
      this.authService.confirmPassword(this.username, this.code, this.newPassword).then(
44
        () => {
45
          this.message = 'Password reset successful! Please log in with the new password.';
46
          this.authMode = 'login'; // Switch back to login page
47
        },
48
        (err) => (this.message = `Password update failed: ${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
   // Show modal and load data
19
   openModal(itemId: string): void {
20
    this.bgmService.getSubject(itemId).subscribe((data) => {
21
      this.selectedItem = data;
22
      this.showModal = true;
23
    });
24
  }
25
  // Close modal
26
  closeModal(): void {
27
    this.showModal = false;
28
    this.selectedItem = null;
29
  }
30

31
  // Helper: find the official website URL in the infobox
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
// Search method
2
  onSearch(): void {
3
    if (this.searchQuery.trim()) {
4
      this.isLoading = true;
5
      this.errorMessage = '';
6

7
      // Configure search options
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; // extract data array
23
          this.totalResults = response.total; // extract total
24
          this.isLoading = false;
25
        },
26
        (error) => {
27
          this.errorMessage = 'Search failed, please try again.';
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>')) { # If the request URL starts with https://api.bgm.tv/v0, add auth info
5
    const authReq = req.clone({
6
      setHeaders: {
7
        Authorization: `Bearer ${authToken}`, # Add auth information
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
    // Not logged in, redirect to /login
9
    router.navigate(['/login']);
10
    return false;
11
  }
12
};

1
{ path: '', component: HomeComponent, canActivate: [authGuard] }, # Home page requires login