Adding twitch bot pages

Author: ProgrammingByPermutation

src/src/app/app.routes.ts

@@ -16,7 +16,7 @@ export const routes: Routes = [
   {path: 'home', component: HomeComponent},
   {path: 'vm-admin', component: VmManagerComponent, canActivate: [authGuard]},
   {path: 'twitch-bot/index', component: TwitchBotIndexComponent},
-  {path: 'twitch-bot/config', component: TwitchBotConfigComponent, canActivate: [authGuard]},
+  {path: 'twitch-bot/config', component: TwitchBotConfigComponent},
   {path: 'imdb-search', component: ImdbSearchComponent},
   {path: '**', component: NotFoundComponent},
 ];

src/src/app/common/components/loading-icon/loading-icon.component.html

@@ -1,4 +1,4 @@
-<svg attr.width="{{width}}" attr.height="{{height}}" viewBox="0 0 135 135" style="margin-right: 10px"
+<svg attr.width="{{width}}" attr.height="{{height}}" viewBox="0 0 135 135" class="icon"
      xmlns="http://www.w3.org/2000/svg" attr.fill="{{fill}}">
   <path
     d="M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z">

src/src/app/common/components/loading-icon/loading-icon.component.scss

@@ -3,3 +3,8 @@
   vertical-align: middle;
   font-weight: 500;
 }
+
+.icon {
+  margin-right: 10px;
+  vertical-align: middle;
+}

src/src/app/common/components/twitch-login/twitch-login.component.ts

@@ -17,9 +17,16 @@ export class TwitchLoginComponent {
    * 1 = Twitch Bot Login
    */
   @Input() twitchScopeIndex: number = 0;
+  @Input() redirectUrl: string | null = null;
 
   twitchLogin(): void {
-    const redirectUrl = `${environment.apiUrl}/user/twitch-login`;
+    let redirectUrl = null;
+    if (!this.redirectUrl) {
+      redirectUrl = `${environment.apiUrl}/user/twitch-login`;
+    } else {
+      redirectUrl = `${environment.apiUrl}/${this.redirectUrl}`;
+    }
+
     window.location.href = `https://id.twitch.tv/oauth2/authorize?` +
       encodeURI(`client_id=${environment.twitchClientId}&` +
         `redirect_uri=${redirectUrl}&` +

src/src/app/common/interface/feature-toggle-response.ts

@@ -0,0 +1,4 @@
+export interface FeatureToggleResponse {
+  feature: string;
+  isEnabled: boolean;
+}

src/src/app/service/nullinside.service.ts

@@ -4,6 +4,7 @@ import { Observable } from "rxjs";
 import { environment } from "../../environments/environment";
 import { UserRolesResponse } from "../common/interface/user-roles-response";
 import { DockerResource } from '../common/interface/docker-resource';
+import { FeatureToggleResponse } from "../common/interface/feature-toggle-response";
 
 @Injectable({
   providedIn: 'root'
@@ -28,4 +29,8 @@ export class NullinsideService {
   setVirtualMachinePowerState(id: number, turnOn: boolean): Observable<boolean> {
     return this.httpClient.post<boolean>(`${environment.apiUrl}/docker/${id}`, {turnOn: turnOn});
   }
+
+  getFeatureToggles(): Observable<FeatureToggleResponse[]> {
+    return this.httpClient.get<FeatureToggleResponse[]>(`${environment.apiUrl}/featureToggle`);
+  }
 }

src/src/app/view/home/home.component.html

@@ -1,19 +1,29 @@
 <app-standard-banner />
 
-@if (apps.length > 0) {
-  <div class="layout-content flex-container">
-    @for (app of apps; track app.displayName) {
-      <div class="app hover-border-blink" (click)="onAppClicked(app.displayName)"
-           (keyup.enter)="onAppClicked(app.displayName)" tabindex="0">
-        <h1>{{ app.displayName }}</h1>
-        <p>{{ app.description }}</p>
+@if (!loading) {
+  @if (!error) {
+    @if (apps.length > 0) {
+      <div class="layout-content flex-container">
+        @for (app of apps; track app.displayName) {
+          <div class="app hover-border-blink" (click)="onAppClicked(app.displayName)"
+               (keyup.enter)="onAppClicked(app.displayName)" tabindex="0">
+            <h1>{{ app.displayName }}</h1>
+            <p>{{ app.description }}</p>
+          </div>
+        }
+      </div>
+    } @else {
+      <div class="layout-content bye">
+        <div class="info-banner">
+          Sorry, there are no applications available to you at this time.
+        </div>
       </div>
     }
-  </div>
-} @else {
-  <div class="layout-content bye">
-    <div class="info-banner">
-      Sorry, there are no applications available to you at this time.
+  } @else {
+    <div class="error-banner">
+      {{ error }}
     </div>
-  </div>
+  }
+} @else {
+  <app-loading-icon class="center" fontSize="32px" height="45px" width="45px">Getting Available Apps</app-loading-icon>
 }

src/src/app/view/home/home.component.ts

@@ -6,6 +6,9 @@ import { WebsiteApp } from "../../common/interface/website-app";
 import { Router } from '@angular/router';
 import { MatAnchor, MatButton } from '@angular/material/button';
 import { StandardBannerComponent } from '../../common/components/standard-banner/standard-banner.component';
+import { LoadingIconComponent } from "../../common/components/loading-icon/loading-icon.component";
+import { catchError, forkJoin, Observable, of } from "rxjs";
+import { UserRolesResponse } from "../../common/interface/user-roles-response";
 
 @Component({
   selector: 'app-home',
@@ -14,7 +17,8 @@ import { StandardBannerComponent } from '../../common/components/standard-banner
     LogoComponent,
     MatButton,
     MatAnchor,
-    StandardBannerComponent
+    StandardBannerComponent,
+    LoadingIconComponent
   ],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss'
@@ -23,20 +27,21 @@ export class HomeComponent implements OnInit {
   public roles: string[] | null = null;
   public error: string | null = null;
   public userIsLoggedIn: boolean = false;
+  public loading: boolean = true;
 
   public apps: WebsiteApp[] = [
     {
       displayName: 'IMDB Search',
       description: 'Search the public IMDB database using various search techniques',
       url: 'imdb-search',
       params: undefined
+    },
+    {
+      displayName: 'Twitch Bot',
+      description: 'The nullinside anti-bot Twitch bot.',
+      url: 'twitch-bot/index',
+      params: undefined
     }
-    /*    {
-          displayName: 'Twitch Bot',
-          description: 'The nullinside anti-bot Twitch bot.',
-          url: 'twitch-bot/index',
-          params: undefined
-        },*/
   ];
 
   constructor(private api: NullinsideService,
@@ -46,10 +51,14 @@ export class HomeComponent implements OnInit {
   ngOnInit(): void {
     this.userIsLoggedIn = null !== localStorage.getItem('auth-token');
 
-    this.api.getUserRoles()
+    forkJoin({
+      // We don't care if the roles don't exist. This is only for authed users. So catch the error if there is one.
+      user: this.api.getUserRoles().pipe(catchError(_ => of({roles: []}))) as Observable<UserRolesResponse>,
+      featureToggles: this.api.getFeatureToggles()
+    })
       .subscribe({
         next: response => {
-          this.roles = response.roles;
+          this.roles = response.user.roles;
           if (-1 !== this.roles?.indexOf(VM_ADMIN)) {
             this.apps = [...this.apps, {
               displayName: 'VM Admin',
@@ -58,11 +67,19 @@ export class HomeComponent implements OnInit {
               params: null
             }];
           }
+
+          const twitchBotFeatureToggle = response.featureToggles.find(f => 'Twitch Bot' === f.feature);
+          if (!twitchBotFeatureToggle || !twitchBotFeatureToggle.isEnabled) {
+            this.apps = [...this.apps.filter(f => 'Twitch Bot' !== f.displayName)]
+          }
+
+          this.loading = false;
         },
-        error: error => {
-          this.error = error;
+        error: _ => {
+          this.error = 'Failed to get list of apps from the server, please refresh to try again...';
+          this.loading = false;
         }
-      })
+      });
   }
 
   onAppClicked(displayName: string) {

src/src/app/view/login-landing/errors.ts

@@ -0,0 +1,5 @@
+export enum Errors {
+  TwitchErrorWithToken,
+  TwitchAccountHasNoEmail,
+  InternalError
+}

src/src/app/view/login-landing/login-landing.component.ts

@@ -5,6 +5,7 @@ import { LoadingIconComponent } from "../../common/components/loading-icon/loadi
 import { ActivatedRoute, ParamMap, Router } from "@angular/router";
 import { environment } from "../../../environments/environment";
 import { HttpErrorResponse } from "@angular/common/http";
+import { Errors } from "./errors";
 
 @Component({
   selector: 'app-login-landing',
@@ -34,7 +35,15 @@ export class LoginLandingComponent implements OnInit, OnDestroy {
       next: (params: ParamMap) => {
         const error = params.get('error');
         if (null !== error) {
-          '4' === error ? this.onLoginFailed(':( Your Twitch account must have a valid e-mail address, please add one and try again', false) : this.onLoginFailed();
+          const errorNum = +error;
+          if (Errors.TwitchAccountHasNoEmail === errorNum) {
+            this.onLoginFailed('Your Twitch account must have a valid e-mail address, please add one and try again', false)
+          } else if (Errors.TwitchErrorWithToken === errorNum) {
+            this.onLoginFailed('Twitch failed to give us a valid token, please add one and try again', false)
+          } else {
+            this.onLoginFailed('Sorry we did something wrong trying to log you in, please add one and try again', false)
+          }
+
           return;
         }