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

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,21 +1,19 @@
 <div class="login">
-    <div></div>
-    <mat-card class="outer" appearance="outlined">
-        <mat-card-header>
-            <h1>Login</h1>
-        </mat-card-header>
+  <mat-card class="outer" appearance="outlined">
+    <mat-card-header>
+      <h1 class="title">Login</h1>
+    </mat-card-header>
 
-        <mat-card-content>
-            <p>Log in with your favorite livestream service</p>
+    <mat-card-content class="services">
+      <p>Log in with your favorite livestream service</p>
 
-            <a>
-                <mat-card appearance="outlined" (click)="login()">
-                    <mat-card-content>
-                        Twitch
-                    </mat-card-content>
-                </mat-card>
-            </a>
-        </mat-card-content>
-    </mat-card>
-    <div></div>
+      <a>
+        <mat-card appearance="outlined" class="twitch" (click)="login()">
+          <mat-card-content>
+            Twitch
+          </mat-card-content>
+        </mat-card>
+      </a>
+    </mat-card-content>
+  </mat-card>
 </div>

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

@@ -1,13 +1,35 @@
 .login {
-    display: grid;
-    grid-template-columns: 1fr max-content 1fr;
-    place-items: center;
+  height: 100vh;
+  display: flex;
+  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;
+  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.router.navigate(['/policies'])
+    this.subscription = this.events.listen('tts_login_ack', async _ => {
+      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;