feat: adding landing page for desktop application

Author: ProgrammingByPermutation

src/src/app/app.routes.ts

@@ -9,12 +9,14 @@ import {TwitchBotIndexComponent} from './view/twitch/twitch-bot-index/twitch-bot
 import {TwitchBotConfigComponent} from './view/twitch/twitch-bot-config/twitch-bot-config.component';
 import {ImdbSearchComponent} from './view/imdb-search/imdb-search.component';
 import {BackgroundWebglExampleComponent} from "./view/background-webgl-example/background-webgl-example.component";
+import {LoginLandingDesktopComponent} from "./view/login-landing-desktop/login-landing-desktop.component";
 
 export const routes: Routes = [
   {path: '', component: HomeComponent},
   {path: 'background', component: BackgroundWebglExampleComponent},
   {path: 'user/auth', component: LoginComponent},
   {path: 'user/login', component: LoginLandingComponent},
+  {path: 'user/login/desktop', component: LoginLandingDesktopComponent},
   {path: 'home', component: HomeComponent},
   {path: 'vm-admin', component: VmManagerComponent, canActivate: [authGuard]},
   {path: 'twitch-bot', component: TwitchBotIndexComponent},

src/src/app/common/interface/oauth.ts

@@ -0,0 +1,5 @@
+export interface OAuth {
+  bearer: string,
+  refresh: string,
+  expiresUtc: string
+}

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

@@ -0,0 +1,21 @@
+<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>
+    } @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>
+</div>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginLandingDesktopComponent } from './login-landing-desktop.component';
+
+describe('LoginLandingDesktopComponent', () => {
+  let component: LoginLandingDesktopComponent;
+  let fixture: ComponentFixture<LoginLandingDesktopComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoginLandingDesktopComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoginLandingDesktopComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,80 @@
+import {Component, OnInit} 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";
+import {LoadingIconComponent} from "../../common/components/loading-icon/loading-icon.component";
+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";
+
+@Component({
+  selector: 'app-login-landing-desktop',
+  imports: [
+    LoadingIconComponent,
+    LogoComponent,
+    MatButton,
+    CdkCopyToClipboard
+  ],
+  templateUrl: './login-landing-desktop.component.html',
+  styleUrl: './login-landing-desktop.component.scss'
+})
+export class LoginLandingDesktopComponent implements OnInit {
+  error: string = '';
+  oAuth: OAuth | null = null;
+  loading: boolean = true;
+
+  constructor(private api: NullinsideService, private route: ActivatedRoute) {
+  }
+
+  ngOnInit(): void {
+    this.route.queryParamMap.subscribe({
+      next: (params: ParamMap) => {
+        const error = params.get('error');
+        if (null !== error) {
+          const errorNum = +error;
+          if (Errors.TwitchAccountHasNoEmail === errorNum) {
+            this.onLoginFailed('Your Twitch account must have a valid e-mail address, please add one and try again')
+          } else if (Errors.TwitchErrorWithToken === errorNum) {
+            this.onLoginFailed('Twitch failed to give us a valid token, please try again')
+          } else {
+            this.onLoginFailed('Sorry we did something wrong trying to log you in, please try again')
+          }
+
+          return;
+        }
+
+        const oAuth = {
+          bearer: params.get('bearer'),
+          refresh: params.get('refresh'),
+          expiresUtc: params.get('expiresUtc'),
+        };
+
+        if (null === oAuth.bearer || null === oAuth.refresh || null === oAuth.expiresUtc) {
+          this.onLoginFailed();
+          return;
+        }
+
+        this.oAuth = {
+          bearer: oAuth.bearer,
+          refresh: oAuth.refresh,
+          expiresUtc: oAuth.expiresUtc
+        };
+
+        navigator.clipboard.writeText(JSON.stringify(oAuth));
+        this.loading = false;
+      },
+      error: (_: HttpErrorResponse) => {
+        this.onLoginFailed();
+      }
+    });
+  }
+
+  onLoginFailed(message = ':( Failed to login, please try again'): void {
+    this.error = message;
+    this.loading = false;
+  }
+
+  protected readonly JSON = JSON;
+}

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

@@ -7,14 +7,14 @@ import { environment } from "../../../environments/environment";
 import { HttpErrorResponse } from "@angular/common/http";
 import { Errors } from "./errors";
 
-@Component({
-    selector: 'app-login-landing',
-    imports: [
-        LogoComponent,
-        LoadingIconComponent
-    ],
-    templateUrl: './login-landing.component.html',
-    styleUrl: './login-landing.component.scss'
+@Component({
+    selector: 'app-login-landing',
+    imports: [
+        LogoComponent,
+        LoadingIconComponent
+    ],
+    templateUrl: './login-landing.component.html',
+    styleUrl: './login-landing.component.scss'
 })
 export class LoginLandingComponent implements OnInit, OnDestroy {
   timerId: number = -1;
@@ -38,9 +38,9 @@ export class LoginLandingComponent implements OnInit, OnDestroy {
           if (Errors.TwitchAccountHasNoEmail === errorNum) {
             this.onLoginFailed('Your Twitch account must have a valid e-mail address, please add one and try again', false)
           } else if (Errors.TwitchErrorWithToken === errorNum) {
-            this.onLoginFailed('Twitch failed to give us a valid token, please add one and try again', false)
+            this.onLoginFailed('Twitch failed to give us a valid token, please try again', false)
           } else {
-            this.onLoginFailed('Sorry we did something wrong trying to log you in, please add one and try again', false)
+            this.onLoginFailed('Sorry we did something wrong trying to log you in, please try again', false)
           }
 
           return;