Handle waiting for google library

Frontend/src/app/auth/auth.guard.ts

@@ -20,7 +20,6 @@ export class AuthGuard  {
       }
       return true;
     } else {
-      console.log('Not auth try to wait');
       return this.tryWaitForAuthData();
     }
   }  
@@ -30,7 +29,6 @@ export class AuthGuard  {
         if (this.auth$.isAuthenticated()) {
           resolve(true);
         } else {
-          console.log('GoToLogin');
           this.loginUrl = window.location.pathname;
           this.router$.navigate(['']);
           resolve(false);

Frontend/src/app/auth/auth.service.ts

@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
 import moment, { Moment } from 'moment';
 import { environment } from 'src/environments/environment';
 import { User } from '../models/user.model';
-import { from, Observable } from 'rxjs';
+import { BehaviorSubject, from, Observable } from 'rxjs';
 import jwt_decode from "jwt-decode";
 
 @Injectable({
@@ -16,13 +16,20 @@ export class AuthService {
   user!: User;
   apiTokenExpirationTime!: Moment;
 
+  public isGoogleLibLoaded: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
   bc!: BroadcastChannel;
 
   constructor(
     private http$: HttpClient,
-  ) { 
+  ) {
     this.createBroadcastChannel();
     this.askForAuthData();
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    window.onGoogleLibraryLoad = () => {
+      this.isGoogleLibLoaded.next(true);
+    };
   }
 
   ping() {
@@ -46,7 +53,7 @@ export class AuthService {
       userName: `${responsePayload.given_name} ${responsePayload.family_name}`,
       email: responsePayload.email,
       avatar: responsePayload.picture
-    });   
+    });
   }
   getAPIToken(): Promise<void> {
     return new Promise((resolve, reject) => {
@@ -70,20 +77,16 @@ export class AuthService {
     return from(this.getAPIToken());
   }
   isAuthenticated(): boolean {
-    return !!this.apiToken && 
+    return !!this.apiToken &&
       !!this.webCredentials &&
       !!this.user &&
       this.apiTokenExpirationTime.isAfter(moment());
   }
   // broadcastChannel
   createBroadcastChannel() {
-    try {
+    this.bc = new BroadcastChannel('auth');
-      this.bc = new BroadcastChannel('auth');
+    this.bc.onmessage = (event: MessageEvent<AuthMessage>) => {
-      this.bc.onmessage = (event: MessageEvent<AuthMessage>) => { 
+      this.broadcastListener(event);
-        this.broadcastListener(event);
-      }
-    } catch (e) {
-      console.log('eee', e);
     }
   }
   broadcastListener(event: MessageEvent<AuthMessage>) {
@@ -101,12 +104,12 @@ export class AuthService {
     }
   }
   askForAuthData() {
-    this.bc.postMessage({ 
+    this.bc.postMessage({
       type: BroadcastType.REQUEST_AUTH_DATA
     });
   }
-  sendAuthData() { 
+  sendAuthData() {
-    this.bc.postMessage({ 
+    this.bc.postMessage({
       type: BroadcastType.SEND_AUTH_DATA,
       data: {
         webCredentials: this.webCredentials,
@@ -125,7 +128,7 @@ export class AuthService {
 
 enum BroadcastType {
   REQUEST_AUTH_DATA = 'request',
-  SEND_AUTH_DATA  = 'send',
+  SEND_AUTH_DATA = 'send',
   LOGOUT = 'logout'
 }
 interface AuthData {
@@ -135,7 +138,7 @@ interface AuthData {
 }
 interface AuthMessage {
   sender: string,
-  type: BroadcastType, 
+  type: BroadcastType,
   data?: AuthData
 }
 

Frontend/src/app/modules/layers/layer-edit/layer-edit.component.ts

@@ -48,7 +48,6 @@ export class LayerEditComponent implements OnInit {
 
   async ngOnInit() {
     this.document = await this.load();
-    console.log(this.document);
   }
 
   private async load(): Promise<Layer> {

Frontend/src/app/modules/layers/layers-list/layers-list.component.ts

@@ -69,7 +69,6 @@ export class LayersListComponent implements OnInit {
   }
 
   openInNewTab(element: Layer) {
-    console.log(element);
     const url = this._router.serializeUrl(
       this._router.createUrlTree([`/app/layers/Detail/${element.id}`])
     );

Frontend/src/app/views/login/login-view.component.html

@@ -1,3 +1,4 @@
+<script src="https://accounts.google.com/gsi/client" async="" defer=""></script>
 <div class="loading-container" *ngIf="loading">
     <img class="loading-img" src="../../assets/loader.gif" />
 </div>

Frontend/src/app/views/login/login-view.component.ts

@@ -8,11 +8,11 @@ import { NgIf } from '@angular/common';
 import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
 
 @Component({
-    selector: 'diunabi-view-page',
+  selector: 'diunabi-view-page',
-    templateUrl: './login-view.component.html',
+  templateUrl: './login-view.component.html',
-    styleUrls: ['./login-view.component.scss'],
+  styleUrls: ['./login-view.component.scss'],
-    standalone: true,
+  standalone: true,
-    imports: [NgIf, MatCardModule, MatBottomSheetModule]
+  imports: [NgIf, MatCardModule, MatBottomSheetModule]
 })
 
 export class LoginViewComponent implements OnInit {
@@ -26,32 +26,34 @@ export class LoginViewComponent implements OnInit {
   loading = false;
 
   ngOnInit(): void {
-    
+    this.auth$.isGoogleLibLoaded.subscribe((isLoaded) => {
+      if (isLoaded) {
+        this.initGoogleLogin();
+      }
+    });
+  }
+
+  initGoogleLogin() {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    window.onGoogleLibraryLoad = () => {
+    google.accounts.id.initialize({
+      client_id: environment.google.clientId,
+      callback: this.handleCredentialResponse.bind(this),
+      auto_select: true,
+      cancel_on_tap_outside: true
+    });
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+
+    google.accounts.id.renderButton(
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      
+      document.getElementById("google-button"),
-      google.accounts.id.initialize({
+      { theme: "outline", size: "large", width: "100%" }
-        client_id: environment.google.clientId,
+    );
-        callback: this.handleCredentialResponse.bind(this),
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        auto_select: true,
+    // @ts-ignore
-        cancel_on_tap_outside: true
+    google.accounts.id.prompt();
-      });
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      
-      google.accounts.id.renderButton(
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        document.getElementById("google-button"),
-        { theme: "outline", size: "large", width: "100%" }
-      );
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      google.accounts.id.prompt();
-    };
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -92,7 +94,7 @@ export class LoginViewComponent implements OnInit {
     } finally {
       this.loading = false;
     }
-    
+
   }
 }