Merge pull request #100 from nullinside-development-group/feat/login

feat: making desktop login less confusing

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,45 @@ 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();
             }
         });
     }
 
+    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;

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 {