feat: making desktop login less confusing

This is a total hack but trying to make the desktop login process a
little less confusing. When we first load the UI from twitch giving us a
token, we attempt to put our token on the clipboard. Then we observe the
clipboard for the token disappearing. We assume the clipboard being
cleared means the application logged in successfully.

closes nullinside-development-group/nullinside-twitch-streaming-tools#56

Author: ProgrammingByPermutation

src/src/app/view/login-landing-desktop/login-landing-desktop.component.html

@@ -1,23 +1,26 @@
 <div class="centered-box">
-    <div class="centered-box_logo-container">
-        <app-logo/>
-    </div>
-    <div class="centered-box_content-container">
-        @if (loading) {
-            <app-loading-icon fontSize="24px" height="35px" width="35px">Logging in</app-loading-icon>
+  <div class="centered-box_logo-container">
+    <app-logo/>
+  </div>
+  <div class="centered-box_content-container">
+    @if (loggedIn) {
+      <h2>LOGGED IN SUCCESSFULLY!</h2>
+      <p>Please return to the desktop application...</p>
+    } @else if (loading) {
+      <app-loading-icon fontSize="24px" height="35px" width="35px">Logging in</app-loading-icon>
+    } @else {
+      @if (error !== '') {
+        <div class="error-banner">{{ error }}</div>
+      } @else {
+        @if (null !== oAuth) {
+          <h2>DO NOT SHOW ON STREAM</h2>
+          <button mat-stroked-button color="primary" [cdkCopyToClipboard]="JSON.stringify(oAuth)">Copy to
+            Clipboard
+          </button>
         } @else {
-            @if (error !== '') {
-                <div class="error-banner">{{ error }}</div>
-            } @else {
-                @if (null !== oAuth) {
-                    <h2>DO NOT SHOW ON STREAM</h2>
-                    <button mat-stroked-button color="primary" [cdkCopyToClipboard]="JSON.stringify(oAuth)">Copy to
-                        Clipboard
-                    </button>
-                } @else {
-                    <div class="error-banner">Failed to get you authenticated, please try again</div>
-                }
-            }
+          <div class="error-banner">Failed to get you authenticated, please try again</div>
         }
-    </div>
+      }
+    }
+  </div>
 </div>

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

@@ -1,5 +1,4 @@
 import { Component, OnInit, inject } from '@angular/core';
-import {NullinsideService} from "../../service/nullinside.service";
 import {ActivatedRoute, ParamMap} from "@angular/router";
 import {Errors} from "../login-landing/errors";
 import {HttpErrorResponse} from "@angular/common/http";
@@ -8,6 +7,7 @@ import {LogoComponent} from "../../common/components/logo/logo.component";
 import {OAuth} from "../../common/interface/oauth";
 import {MatButton} from "@angular/material/button";
 import {CdkCopyToClipboard} from "@angular/cdk/clipboard";
+import {interval, Subscription} from "rxjs";
 
 @Component({
     selector: 'app-login-landing-desktop',
@@ -21,9 +21,11 @@ import {CdkCopyToClipboard} from "@angular/cdk/clipboard";
     styleUrl: './login-landing-desktop.component.scss'
 })
 export class LoginLandingDesktopComponent implements OnInit {
-    private api = inject(NullinsideService);
     private route = inject(ActivatedRoute);
+    private timer: Subscription | undefined;
+    private desktopData: string | undefined;
 
+    loggedIn: boolean = false;
     error: string = '';
     oAuth: OAuth | null = null;
     loading: boolean = true;
@@ -62,15 +64,47 @@ export class LoginLandingDesktopComponent implements OnInit {
                     expiresUtc: oAuth.expiresUtc
                 };
 
-                navigator.clipboard.writeText(JSON.stringify(oAuth));
+                // DO NOT assign this.desktopData until AFTER you update the clipboard successfully.
+                // The absence of a value on this.desktopData is what tells the application we haven't logged in yet.
+                const json = JSON.stringify(oAuth);
+                navigator.clipboard.writeText(json);
+                this.desktopData = json;
+
                 this.loading = false;
+                this.timer = interval(1000)
+                  .subscribe({
+                    next: _ => {
+                      this.runCheckForLogin();
+                    },
+                    error: e => {
+                      console.error(e);
+                    }
+                  });
             },
             error: (_: HttpErrorResponse) => {
                 this.onLoginFailed();
             }
         });
     }
 
+    private runCheckForLogin() {
+      try {
+        navigator.clipboard.readText().then(text => {
+          // If the text matches what we put on the clipboard then we aren't signed in yet.
+          if (undefined === this.desktopData || text === this.desktopData) {
+            return;
+          }
+
+          // If the text does match, we are signed in on the desktop app. Maybe...kinda....might be...you never know...
+          // Don't judge me. -.-
+          this.timer?.unsubscribe();
+          this.loggedIn = true;
+        })
+      } catch {
+        // Do nothing, just don't crash.
+      }
+    }
+
     onLoginFailed(message = ':( Failed to login, please try again'): void {
         this.error = message;
         this.loading = false;

src/src/app/view/vm-manager/vm-manager.component.ts

@@ -18,8 +18,8 @@ import {ActionableDockerResource} from './interface/ActionableDockerResource';
   templateUrl: './vm-manager.component.html',
   styleUrl: './vm-manager.component.scss'
 })
-export class VmManagerComponent implements OnInit, OnDestroy {
-  private api = inject(NullinsideService);
+export class VmManagerComponent implements OnInit, OnDestroy {
+  private api = inject(NullinsideService);
 
   public vms: ActionableDockerResource[] | null = null;
   public error: string | null = null;
@@ -36,7 +36,7 @@ export class VmManagerComponent implements OnInit, OnDestroy {
         error: _ => {
           this.error = "Failed to refresh the list, the server may be down...";
         }
-      })
+      });
   }
 
   ngOnDestroy(): void {