Created auth module. Created Visitor auth guard for non-logged in users.

src/app/app.component.ts

@@ -10,10 +10,12 @@ import EventService from './shared/services/EventService';
 import { ApiAuthenticationService } from './shared/services/api/api-authentication.service';
 import { PoliciesModule } from './policies/policies.module';
 import { TtsFiltersModule } from './tts-filters/tts-filters.module';
+import { AuthModule } from './auth/auth.module';
 
 @Component({
     selector: 'app-root',
-    imports: [RouterOutlet, CommonModule, FormsModule, PoliciesModule, TtsFiltersModule, NavigationComponent],
+    standalone: true,
+    imports: [RouterOutlet, CommonModule, FormsModule, PoliciesModule, TtsFiltersModule, AuthModule, NavigationComponent],
     providers: [AuthUserGuard],
     templateUrl: './app.component.html',
     styleUrl: './app.component.scss'

src/app/app.routes.ts

@@ -1,33 +1,43 @@
 import { Routes } from '@angular/router';
 import { PolicyComponent } from './policies/policy/policy.component';
 import { AuthUserGuard } from './shared/auth/auth.user.guard';
-import { LoginComponent } from './login/login.component';
-import { TtsLoginComponent } from './tts-login/tts-login.component';
+import { LoginComponent } from './auth/login/login.component';
+import { TtsLoginComponent } from './auth/tts-login/tts-login.component';
 import { TwitchAuthCallbackComponent } from './twitch-auth-callback/twitch-auth-callback.component';
 import { FiltersComponent } from './tts-filters/filters/filters.component';
+import { AuthAdminGuard } from './shared/auth/auth.admin.guard';
+import { ActionComponent } from './actions/action/action.component';
+import { AuthVisitorGuard } from './shared/auth/auth.visitor.guard';
 
 export const routes: Routes = [
-    {
-        path: 'policies',
-        component: PolicyComponent,
-        canActivate: [AuthUserGuard],
-    },
-    {
-        path: 'filters',
-        component: FiltersComponent,
-        canActivate: [AuthUserGuard],
-    },
-    {
-        path: 'login',
-        component: LoginComponent,
-    },
-    {
-        path: 'tts-login',
-        component: TtsLoginComponent,
-        canActivate: [AuthUserGuard],
-    },
-    {
-        path: 'auth',
-        component: TwitchAuthCallbackComponent
-    }
+  {
+    path: 'policies',
+    component: PolicyComponent,
+    canActivate: [AuthUserGuard],
+  },
+  {
+    path: 'filters',
+    component: FiltersComponent,
+    canActivate: [AuthUserGuard],
+  },
+  {
+    path: 'actions',
+    component: ActionComponent,
+    canActivate: [AuthAdminGuard],
+  },
+  {
+    path: 'login',
+    component: LoginComponent,
+    canActivate: [AuthVisitorGuard],
+  },
+  {
+    path: 'tts-login',
+    component: TtsLoginComponent,
+    canActivate: [AuthUserGuard],
+  },
+  {
+    path: 'auth',
+    component: TwitchAuthCallbackComponent,
+    canActivate: [AuthVisitorGuard],
+  }
 ];

src/app/auth/auth.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { LoginComponent } from './login/login.component';
+import { TtsLoginComponent } from './tts-login/tts-login.component';
+import { ImpersonationComponent } from './impersonation/impersonation.component';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    LoginComponent,
+    TtsLoginComponent,
+    ImpersonationComponent
+  ]
+})
+export class AuthModule { }

src/app/auth/impersonation/impersonation.component.html

@@ -0,0 +1,19 @@
+@if (isAdmin()) {
+<mat-card appearance="outlined">
+  <mat-card-header>
+    <mat-card-title> Impersonation</mat-card-title>
+    <mat-card-subtitle>Impersonate as another user</mat-card-subtitle>
+  </mat-card-header>
+  <mat-card-actions>
+    <mat-form-field>
+      <mat-label>User to impersonate</mat-label>
+      <mat-select (selectionChange)="onChange($event)" [(value)]="impersonated">
+        <mat-option>{{getUsername()}}</mat-option>
+        @for (user of users; track user.id) {
+        <mat-option [value]="user.id">{{ user.name }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </mat-card-actions>
+</mat-card>
+}

src/app/auth/impersonation/impersonation.component.ts

@@ -1,16 +1,17 @@
 import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
-import { ApiAuthenticationService } from '../shared/services/api/api-authentication.service';
+import { ApiAuthenticationService } from '../../shared/services/api/api-authentication.service';
 import { MatCardModule } from '@angular/material/card';
 import { MatSelectModule } from '@angular/material/select';
 import { HttpClient } from '@angular/common/http';
 import { isPlatformBrowser } from '@angular/common';
-import { environment } from '../../environments/environment';
-import EventService from '../shared/services/EventService';
-import { HermesClientService } from '../hermes-client.service';
+import { environment } from '../../../environments/environment';
+import EventService from '../../shared/services/EventService';
+import { HermesClientService } from '../../hermes-client.service';
 import { Router } from '@angular/router';
 
 @Component({
     selector: 'impersonation',
+    standalone: true,
     imports: [MatCardModule, MatSelectModule],
     templateUrl: './impersonation.component.html',
     styleUrl: './impersonation.component.scss'

src/app/auth/login/login.component.ts

@@ -2,7 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { Router, RouterModule } from '@angular/router';
 import { Subscription } from 'rxjs';
-import { environment } from '../../environments/environment';
+import { environment } from '../../../environments/environment';
 
 @Component({
     selector: 'login',

src/app/auth/tts-login/tts-login.component.ts

@@ -4,16 +4,17 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatButtonModule } from '@angular/material/button';
-import EventService from '../shared/services/EventService';
+import EventService from '../../shared/services/EventService';
 import { HttpClient } from '@angular/common/http';
 import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
-import { environment } from '../../environments/environment';
-import { HermesClientService } from '../hermes-client.service';
+import { environment } from '../../../environments/environment';
+import { HermesClientService } from '../../hermes-client.service';
 import { MatCard } from '@angular/material/card';
 
 @Component({
     selector: 'tts-login',
+    standalone: true,
     imports: [MatButtonModule, MatCard, MatFormFieldModule, MatSelectModule, MatInputModule, FormsModule],
     templateUrl: './tts-login.component.html',
     styleUrl: './tts-login.component.scss'

src/app/impersonation/impersonation.component.html

@@ -1,19 +0,0 @@
-@if (isAdmin()) {
-<mat-card appearance="outlined">
-	<mat-card-header>
-		<mat-card-title> Impersonation</mat-card-title>
-		<mat-card-subtitle>Impersonate as another user</mat-card-subtitle>
-	</mat-card-header>
-	<mat-card-actions>
-		<mat-form-field>
-			<mat-label>User to impersonate</mat-label>
-			<mat-select (selectionChange)="onChange($event)" [(value)]="impersonated">
-				<mat-option>{{getUsername()}}</mat-option>
-				@for (user of users; track user.id) {
-					<mat-option [value]="user.id">{{ user.name }}</mat-option>
-				}
-			</mat-select>
-		</mat-form-field>
-	</mat-card-actions>
-</mat-card>
-}

src/app/navigation/navigation.component.html

@@ -1,37 +1,30 @@
 <nav>
-    <impersonation />
-    <ul>
-        <li>
-            <a
-                routerLink="/login"
-                routerLinkActive="active"
-                *ngIf="!isLoggedIn()">
-                Login
-            </a>
-        </li>
-        <li>
-            <a
-                routerLink="/tts-login"
-                routerLinkActive="active"
-                *ngIf="isLoggedIn() && !isTTSLoggedIn()">
-                TTS Login
-            </a>
-        </li>
-        <li>
-            <a
-                routerLink="/policies"
-                routerLinkActive="active"
-                *ngIf="isLoggedIn() && isTTSLoggedIn()">
-                Policies
-            </a>
-        </li>
-        <li>
-            <a
-                routerLink="/filters"
-                routerLinkActive="active"
-                *ngIf="isLoggedIn() && isTTSLoggedIn()">
-                Filters
-            </a>
-        </li>
-    </ul>
+  <impersonation />
+  <ul>
+    <li>
+      <a routerLink="/login" routerLinkActive="active" *ngIf="!isLoggedIn()">
+        Login
+      </a>
+    </li>
+    <li>
+      <a routerLink="/tts-login" routerLinkActive="active" *ngIf="isLoggedIn() && !isTTSLoggedIn()">
+        TTS Login
+      </a>
+    </li>
+    <li>
+      <a routerLink="/policies" routerLinkActive="active" *ngIf="isLoggedIn() && isTTSLoggedIn()">
+        Policies
+      </a>
+    </li>
+    <li>
+      <a routerLink="/filters" routerLinkActive="active" *ngIf="isLoggedIn() && isTTSLoggedIn()">
+        Filters
+      </a>
+    </li>
+    <li>
+      <a routerLink="/actions" routerLinkActive="active" *ngIf="isLoggedIn() && isTTSLoggedIn() && isAdmin()">
+        Actions
+      </a>
+    </li>
+  </ul>
 </nav>

src/app/navigation/navigation.component.ts

@@ -3,27 +3,29 @@ import { RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { HermesClientService } from '../hermes-client.service';
 import { ApiAuthenticationService } from '../shared/services/api/api-authentication.service';
-import { ImpersonationComponent } from '../impersonation/impersonation.component';
 import { MatCardModule } from '@angular/material/card';
+import { AuthModule } from '../auth/auth.module';
+import { ImpersonationComponent } from "../auth/impersonation/impersonation.component";
 
 @Component({
-    selector: 'navigation',
-    imports: [CommonModule, RouterModule, ImpersonationComponent, MatCardModule],
-    templateUrl: './navigation.component.html',
-    styleUrl: './navigation.component.scss'
+  selector: 'navigation',
+  standalone: true,
+  imports: [CommonModule, RouterModule, MatCardModule, AuthModule, ImpersonationComponent],
+  templateUrl: './navigation.component.html',
+  styleUrl: './navigation.component.scss'
 })
 export class NavigationComponent {
-    constructor(private auth: ApiAuthenticationService, private hermes: HermesClientService) { }
+  constructor(private auth: ApiAuthenticationService, private hermes: HermesClientService) { }
 
-    isLoggedIn() {
-        return this.auth.isAuthenticated();
-    }
+  isLoggedIn() {
+    return this.auth.isAuthenticated();
+  }
 
-    isAdmin() {
-        return this.isLoggedIn() && this.auth.isAdmin()
-    }
+  isAdmin() {
+    return this.isLoggedIn() && this.auth.isAdmin()
+  }
 
-    isTTSLoggedIn() {
-        return this.hermes?.logged_in ?? false;
-    }
+  isTTSLoggedIn() {
+    return this.hermes?.logged_in ?? false;
+  }
 }

src/app/shared/auth/auth.visitor.guard.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
+import { ApiAuthenticationService } from '../services/api/api-authentication.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthVisitorGuard implements CanActivate {
+
+  constructor(private auth: ApiAuthenticationService, private router: Router) { }
+
+  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
+    return !this.auth.isAuthenticated();
+  }
+}

src/app/twitch-auth-callback/twitch-auth-callback.component.ts

@@ -7,6 +7,7 @@ import { environment } from '../../environments/environment';
 
 @Component({
     selector: 'app-twitch-auth-callback',
+    standalone: true,
     imports: [],
     templateUrl: './twitch-auth-callback.component.html',
     styleUrl: './twitch-auth-callback.component.scss'