Fixed minor issues with login & logout. Cleaned up the UI.

src/app/app.component.ts

@@ -1,21 +1,18 @@
-import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { isPlatformBrowser } from '@angular/common';
 import { Component, OnInit, Inject, PLATFORM_ID, NgZone, OnDestroy } from '@angular/core';
 import { Router, RouterOutlet } from '@angular/router';
-import { FormsModule } from '@angular/forms'
 import { HermesClientService } from './hermes-client.service';
 import { AuthUserGuard } from './shared/auth/auth.user.guard'
 import { Subscription } from 'rxjs';
 import { NavigationComponent } from "./navigation/navigation.component";
 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',
   standalone: true,
-    imports: [RouterOutlet, CommonModule, FormsModule, PoliciesModule, TtsFiltersModule, AuthModule, NavigationComponent],
+  imports: [RouterOutlet, AuthModule, NavigationComponent],
   providers: [AuthUserGuard],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
@@ -38,20 +35,28 @@ export class AppComponent implements OnInit, OnDestroy {
 
     this.auth.update();
 
-        this.addSubscription(this.events.listen('logoff', (message) => {
+    this.addSubscription(this.events.listen('logoff', async (message) => {
       localStorage.removeItem('jwt');
       if (!document.location.href.includes('/login')) {
-                this.router.navigate(['/login?warning=' + message]);
+        if (message)
+          await this.router.navigate(['login'], {
+            queryParams: { message: message }
+          });
+        else
+          await this.router.navigate(['login']);
       }
     }));
 
-        this.addSubscription(this.events.listen('login', (_) => {
+    this.addSubscription(this.events.listen('login', async (_) => {
-            if (document.location.href.includes('/login')) {
+      if (['/login', '/auth'].some(partial => document.location.href.includes(partial))) {
-                this.router.navigate(['/tts-login']);
+        await this.router.navigate(['tts-login']);
       }
     }));
 
-        this.client.connect();
+    const connection = this.client.connect();
+    if (connection) {
+      this.addSubscription(connection);
+    }
     this.ngZone.runOutsideAngular(() => setInterval(() => this.client.heartbeat(), 15000));
   }
 

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

@@ -59,10 +59,10 @@ export class ImpersonationComponent implements OnInit {
                 body: {
                     impersonation: e.value
                 }
-            }).subscribe((data: any) => {
+            }).subscribe(async (data: any) => {
                 this.hermes.disconnect();
                 this.events.emit('impersonation', e.value);
-                this.router.navigate(['/tts-login']);
+                await this.router.navigate(['tts-login']);
             });
         } else {
             this.http.put(environment.API_HOST + '/admin/impersonate', {
@@ -71,10 +71,10 @@ export class ImpersonationComponent implements OnInit {
                 headers: {
                     'Authorization': 'Bearer ' + localStorage.getItem('jwt')
                 }
-            }).subscribe((data: any) => {
+            }).subscribe(async (data: any) => {
                 this.hermes.disconnect();
                 this.events.emit('impersonation', e.value);
-                this.router.navigate(['/tts-login']);
+                await this.router.navigate(['tts-login']);
             });
         }
     }

src/app/auth/login/login.component.html

@@ -1,15 +1,14 @@
 <div class="login">
-    <div></div>
   <mat-card class="outer" appearance="outlined">
     <mat-card-header>
-            <h1>Login</h1>
+      <h1 class="title">Login</h1>
     </mat-card-header>
 
-        <mat-card-content>
+    <mat-card-content class="services">
       <p>Log in with your favorite livestream service</p>
 
       <a>
-                <mat-card appearance="outlined" (click)="login()">
+        <mat-card appearance="outlined" class="twitch" (click)="login()">
           <mat-card-content>
             Twitch
           </mat-card-content>
@@ -17,5 +16,4 @@
       </a>
     </mat-card-content>
   </mat-card>
-    <div></div>
 </div>

src/app/auth/login/login.component.scss

@@ -1,13 +1,35 @@
 .login {
-    display: grid;
+  height: 100vh;
-    grid-template-columns: 1fr max-content 1fr;
+  display: flex;
-    place-items: center;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .mat-mdc-card-header {
-    align-self: center;
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.title {
+  text-align: center;
+  margin: 0;
 }
 
 .mat-mdc-card-content {
   align-self: center;
 }
+
+a {
+  cursor: pointer;
+}
+
+.services p {
+  margin-bottom: 2em;
+}
+
+.twitch {
+  background-color: #a970ff;
+  color: black;
+  font-weight: 500;
+}

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

@@ -36,12 +36,12 @@ export class TtsLoginComponent implements OnInit, OnDestroy {
       }
     }).subscribe((data: any) => this.api_keys = data);
 
-    this.subscription = this.events.listen('tts_login_ack', _ => {
+    this.subscription = this.events.listen('tts_login_ack', async _ => {
-      this.router.navigate(['/policies'])
+      await this.router.navigate(['policies'])
     });
-    this.events.listen('tts_logoff', _ => {
+    this.events.listen('tts_logoff', async _ => {
       this.selected_api_key = undefined;
-      this.router.navigate(['/tts-login'])
+      await this.router.navigate(['tts-login'])
     });
     this.events.listen('impersonation', _ => {
       this.selected_api_key = undefined;

src/app/policies/policy/policy.component.ts

@@ -32,7 +32,7 @@ export class PolicyComponent implements OnInit, OnDestroy {
             return;
 
         if (!this.client.logged_in) {
-            this.router.navigate(["/tts-login"]);
+            this.router.navigate(["tts-login"]);
             return;
         }
     }

src/app/tts-filters/filters/filters.component.ts

@@ -58,7 +58,7 @@ export class FiltersComponent implements OnInit, OnDestroy {
       return;
 
     if (!this.client.logged_in) {
-      this.router.navigate(["/tts-login"]);
+      this.router.navigate(["tts-login"]);
       return;
     }
   }

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

@@ -19,28 +19,45 @@ export class TwitchAuthCallbackComponent implements OnInit {
     this.isBrowser = isPlatformBrowser(this.platformId)
   }
 
-  ngOnInit(): void {
+  async ngOnInit(): Promise<any> {
     if (!this.isBrowser) {
       return;
     }
 
+    if (this.auth.isAuthenticated()) {
+      await this.router.navigate(['tts-login']);
+      return;
+    }
+
     const code = this.route.snapshot.queryParamMap.get('code');
     const scope = this.route.snapshot.queryParamMap.get('scope');
     const state = this.route.snapshot.queryParamMap.get('state');
 
-    if (!code || !scope || !state)
+    if (!code || !scope || !state) {
-      return;
+      await this.router.navigate(['login'], {
-
+        queryParams: {
-    this.http.post(environment.API_HOST + '/auth/twitch/callback', { code, scope, state })
+          error: 'callback_issue'
-      .subscribe((data: any) => {
+        }
-        if (!data?.authenticated) {
+      });
-          this.router.navigate(['/login?error=callback_error']);
       return;
     }
 
-        localStorage.setItem('jwt', data.token);
+    this.http.post(environment.API_HOST + '/auth/twitch/callback', { code, scope, state })
+      .subscribe(async (response: any) => {
+        if (!response?.authenticated) {
+          await this.router.navigate(['login'], {
+            queryParams: {
+              error: 'callback_issue'
+            }
+          });
+          return;
+        }
+
+        localStorage.setItem('jwt', response.token);
         this.auth.update();
-        this.router.navigate(['/tts-login']);
+
+        console.log('logged in. so nav to tts login.');
+        await this.router.navigate(['tts-login']);
       });
   }
 }