From b7e4cc6b6c10fcc9680ec58842b246ab4a19e903 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=E2=96=88=E2=96=88=E2=96=88=E2=96=88=E2=96=88?=
 <dev.nullinside@gmail.com>
Date: Fri, 13 Jun 2025 22:37:21 -0400
Subject: [PATCH] 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/twitch-streaming-tools#56
---
 .../login-landing-desktop.component.html      | 41 ++++++++++---------
 .../login-landing-desktop.component.ts        | 38 +++++++++++++++--
 .../view/vm-manager/vm-manager.component.ts   |  6 +--
 3 files changed, 60 insertions(+), 25 deletions(-)

diff --git a/src/src/app/view/login-landing-desktop/login-landing-desktop.component.html b/src/src/app/view/login-landing-desktop/login-landing-desktop.component.html
index e548212..9f9545d 100644
--- a/src/src/app/view/login-landing-desktop/login-landing-desktop.component.html
+++ b/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>
diff --git a/src/src/app/view/login-landing-desktop/login-landing-desktop.component.ts b/src/src/app/view/login-landing-desktop/login-landing-desktop.component.ts
index 2942af4..c2bff09 100644
--- a/src/src/app/view/login-landing-desktop/login-landing-desktop.component.ts
+++ b/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,8 +64,20 @@ export class LoginLandingDesktopComponent implements OnInit {
                     expiresUtc: oAuth.expiresUtc
                 };
 
-                navigator.clipboard.writeText(JSON.stringify(oAuth));
+                this.desktopData = JSON.stringify(oAuth);
+                navigator.clipboard.writeText(this.desktopData);
                 this.loading = false;
+                this.timer?.unsubscribe();
+
+                this.timer = interval(1000)
+                  .subscribe({
+                    next: _ => {
+                      this.runCheckForLogin();
+                    },
+                    error: e => {
+                      console.error(e);
+                    }
+                  });
             },
             error: (_: HttpErrorResponse) => {
                 this.onLoginFailed();
@@ -71,6 +85,24 @@ export class LoginLandingDesktopComponent implements OnInit {
         });
     }
 
+    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 (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;
diff --git a/src/src/app/view/vm-manager/vm-manager.component.ts b/src/src/app/view/vm-manager/vm-manager.component.ts
index 54dc47a..e6c2f2e 100644
--- a/src/src/app/view/vm-manager/vm-manager.component.ts
+++ b/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 {