updated demo to use the new login redirect

src/app/app.routes.ts

@@ -1,7 +1,7 @@
 import { Routes } from '@angular/router';
 import { HelloWorld } from './components/hello-world/hello-world';
 import { ProductView } from './components/product-view/product-view';
-import { Login } from './login/login';
+import { Login } from './login';
 import { AuthGuard } from './auth-guard';
 import { environment } from '../environments/environment';
 import { AddressList } from './components/address-list/address-list';

src/app/auth-guard.ts

@@ -1,15 +1,16 @@
-import { inject, Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
 import { environment } from '../environments/environment';
 
 @Injectable()
 export class AuthGuard implements CanActivate {
-  private readonly router = inject(Router);
-
   canActivate(_route: ActivatedRouteSnapshot, _state: RouterStateSnapshot): boolean {
     const token = environment.apiKey??localStorage.getItem('api-key');
-    if (!environment.production && !token)
-      this.router.navigate(['login'], { queryParams: { redirectTo: btoa(window.location.pathname + window.location.search) } });
+    if (!environment.production && !token){
+      const redirectTo = encodeURIComponent(btoa(`${window.location.protocol}//${window.location.host}/login?redirectTo=${encodeURIComponent(btoa(window.location.href))}`));
+      window.location.href = `${environment.serverUrl}/login?redirectTo=${redirectTo}`;
+      return false;
+    }
     return true;
   }
 }

src/app/login.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-login',
+  imports: [],
+  template: `
+<div class="flex flex-col items-center justify-center h-screen w-screen opacity-20">
+  <div class="animate-fadein duration-1000 animate-infinite animate-alternate text-4xl">Signing in...</div>
+</div>
+  `,
+  styles: [`
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`],
+})
+export class Login {
+  constructor(
+    private readonly route: ActivatedRoute
+  ) {
+    this.route.queryParams.subscribe((params) => {
+      const token = params['authToken'];
+      if(token){
+        const redirectTo = decodeURIComponent(atob(params['redirectTo']));
+        localStorage.setItem('api-key', token);
+        //remove the authToken from the url but keep the redirectTo
+        window.history.replaceState({}, '', redirectTo);
+        window.location.href = redirectTo;
+      }
+    });
+  } 
+}

src/app/login/login.html

@@ -1,17 +0,0 @@
-<div class="min-h-screen flex items-center justify-center p-8">
-    <div class="border-2 rounded-2xl bg-gray-100/50 drop-shadow-2xl w-full mx-auto p-4" style="max-width: 300px;">
-        <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
-            <div class="flex flex-col gap-2">
-                <div class="flex flex-col">
-                    <label for="username">Username</label>
-                    <input type="text" pInputText id="username" formControlName="username" />
-                </div>
-                <div class="flex flex-col">
-                    <label for="password">Password</label>
-                    <input type="password" pInputText id="password" formControlName="password" />
-                </div>
-            </div>
-            <p-button type="submit" [loading]="loading()" label="Login" icon="fa fa-sign-in" class="w-full" styleClass="w-full mt-4" />
-        </form>
-    </div>
-</div>

src/app/login/login.ts

@@ -1,77 +0,0 @@
-import { Component, inject, signal } from '@angular/core';
-import { FormBuilder, FormsModule, Validators } from '@angular/forms';
-import { ReactiveFormsModule } from '@angular/forms';
-import { InputText } from 'primeng/inputtext';
-import { Button } from 'primeng/button';
-import { ApolloService } from '../services/apollo.service';
-import { LOGIN } from '../../graphql/base-definitions';
-import { LoginMutation } from '../generated';
-import { lastValueFrom } from 'rxjs';
-import { AuthenticationResult } from '../schema-types';
-import { ActivatedRoute, Router } from '@angular/router';
-
-@Component({
-  selector: 'app-login',
-  imports: [
-    FormsModule,
-    ReactiveFormsModule,
-    InputText,
-    Button,
-  ],
-  templateUrl: './login.html',
-  styles: [`
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-input[pInputText] {
-  padding: 0.5rem !important;
-  border-width: 2px !important;
-}
-`],
-})
-export class Login {
-  readonly apollo = inject(ApolloService);
-  readonly fb = inject(FormBuilder);
-  readonly router = inject(Router);
-
-  readonly loginForm = this.fb.group({
-    username: ['', Validators.required],
-    password: ['', Validators.required],
-  }); 
-
-  redirectTo = '/';
-
-  readonly loading = signal(false);
-
-  constructor(private readonly route: ActivatedRoute) {
-    this.route.queryParams.subscribe(params => {
-      if(params['redirectTo']) {
-        this.redirectTo = atob(params['redirectTo']);
-        console.log('redirectTo', this.redirectTo);
-      } else {
-        this.redirectTo = '/';
-      }
-    });
-  }
-
-  async onSubmit() {
-    this.loading.set(true);
-    try {
-      const result = await lastValueFrom(this.apollo.apollo().mutate<LoginMutation>({
-        mutation: LOGIN,
-        variables: {
-          username: this.loginForm.value.username,
-          password: this.loginForm.value.password,
-        },
-      }));
-      
-      const authResult = result.data?.login as AuthenticationResult;
-      if(authResult.__typename === 'CurrentUser')
-        this.router.navigate([this.redirectTo]);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      this.loading.set(false);
-    }
-  }
-}