IPad Login Fix

apps/sales/src/app/app-routing.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
 import { LogInComponent } from './components/log-in/log-in.component';
 import { DashboardComponent } from './modules/dashboard/pages/dashboard.component';
+import { AuthenticationGuard } from './resolvers/authentication.guard';
 import { ProcessIdResolver } from './resolvers/process-id.resolver';
 
 const routes: Routes = [
@@ -12,32 +13,55 @@ const routes: Routes = [
       { path: ':token', component: LogInComponent },
     ],
   },
-  { path: 'dashboard', component: DashboardComponent },
+  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthenticationGuard] },
   {
     path: 'product',
     resolve: { processId: ProcessIdResolver },
     loadChildren: () => import('@page/catalog').then((m) => m.PageCatalogModule),
+    canActivate: [AuthenticationGuard],
   },
   {
     path: 'customer',
     resolve: { processId: ProcessIdResolver },
     loadChildren: () => import('@page/customer').then((m) => m.PageCustomerModule),
+    canActivate: [AuthenticationGuard],
   },
   {
     path: 'cart',
     resolve: { processId: ProcessIdResolver },
     loadChildren: () => import('@page/checkout').then((m) => m.PageCheckoutModule),
+    canActivate: [AuthenticationGuard],
   },
   {
     path: 'branch',
     loadChildren: () => import('./modules/branch/branch.module').then((m) => m.BranchModule),
+    canActivate: [AuthenticationGuard],
+  },
+  {
+    path: 'shelf',
+    loadChildren: () => import('./modules/shelf/shelf.module').then((m) => m.ShelfModule),
+    canActivate: [AuthenticationGuard],
+  },
+  {
+    path: 'debug',
+    loadChildren: () => import('./modules/debug/debug.module').then((m) => m.DebugModule),
+    canActivate: [AuthenticationGuard],
+  },
+  {
+    path: 'goodsin',
+    loadChildren: () => import('./modules/goods-in/goods-in.module').then((m) => m.GoodsInModule),
+    canActivate: [AuthenticationGuard],
+  },
+  {
+    path: 'remission',
+    loadChildren: () => import('./modules/remission/remission-client.module').then((m) => m.RemissionClientModule),
+    canActivate: [AuthenticationGuard],
+  },
+  {
+    path: 'task-calendar',
+    loadChildren: () => import('@page/task-calendar').then((m) => m.PageTaskCalendarModule),
+    canActivate: [AuthenticationGuard],
   },
-  { path: 'shelf', loadChildren: () => import('./modules/shelf/shelf.module').then((m) => m.ShelfModule) },
-  // { path: 'cart', loadChildren: () => import('./modules/cart/cart.module').then((m) => m.CartModule) },
-  { path: 'debug', loadChildren: () => import('./modules/debug/debug.module').then((m) => m.DebugModule) },
-  { path: 'goodsin', loadChildren: () => import('./modules/goods-in/goods-in.module').then((m) => m.GoodsInModule) },
-  { path: 'remission', loadChildren: () => import('./modules/remission/remission-client.module').then((m) => m.RemissionClientModule) },
-  { path: 'task-calendar', loadChildren: () => import('@page/task-calendar').then((m) => m.PageTaskCalendarModule) },
   { path: '**', redirectTo: 'dashboard' },
 ];
 

apps/sales/src/app/app.component.html

@@ -1,8 +1,7 @@
 <lib-offline-overlay>
   <!-- lib offline depends on these three elements to be present inside of it -->
   <app-header [ngClass]="{ loading: loading }" *ngIf="authenticated"></app-header>
-  <app-content [ngClass]="{ loading: loading }" *ngIf="authenticated"></app-content>
+  <app-content [ngClass]="{ loading: loading }"></app-content>
   <app-menu [ngClass]="{ loading: loading }" *ngIf="authenticated"></app-menu>
   <img *ngIf="loading" src="/assets/images/Icon_Loading.svg" class="app-loader" />
 </lib-offline-overlay>
-<router-outlet></router-outlet>

apps/sales/src/app/components/log-in/log-in.component.ts

@@ -12,10 +12,6 @@ export class LogInComponent implements OnInit {
 
   ngOnInit() {
     const token = this.route.snapshot.paramMap.get('token');
-    if (token === null) {
-      // this.ssoService.logoff();
-    }
-
     this.logIn(token);
   }
 

apps/sales/src/app/core/services/app.service.ts

@@ -72,18 +72,15 @@ export class AppService implements OnDestroy {
         // register sso authentication
       });
 
-    this.ssoService
-      .registerAuthentication()
-      .catch((error) => {
-        console.error(error);
-      })
-      .then(() => {
+    this.ssoService.registerAuthentication().then((authenticated) => {
+      if (authenticated) {
         this.loadState();
         this.loadVats();
         this.loadSuppliers();
         this.shouldRemindForRemissionAtAppStart();
         this.registerIdleManager();
-      });
+      }
+    });
   }
 
   getQueryParams() {

apps/sales/src/app/modules/dashboard/pages/dashboard.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { Subject } from 'rxjs';
 import { FeedCard } from '../../../core/models/feed-card.model';
 import { staggerAnimation } from '../stagger.animation';
@@ -16,7 +16,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   loading = true;
   destroy$ = new Subject();
 
-  constructor(private feedService: DashboardFeedService) {}
+  constructor(private feedService: DashboardFeedService, private cdr: ChangeDetectorRef) {}
 
   ngOnInit() {
     this.feedService
@@ -25,6 +25,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
       .subscribe((feeds: FeedCard[]) => {
         this.loading = false;
         this.feed = feeds;
+        this.cdr.markForCheck();
       });
   }
 

apps/sales/src/app/resolvers/authentication.guard.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
+import { tap } from 'rxjs/operators';
+import { SsoService } from 'sso';
+
+@Injectable({ providedIn: 'root' })
+export class AuthenticationGuard implements CanActivate {
+  constructor(private sso: SsoService) {}
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+    return this.sso.isAuthenticated$.pipe(
+      tap((isAuthenticated) => {
+        if (!isAuthenticated) {
+          this.sso.login();
+        }
+      })
+    );
+  }
+}

libs/sso/src/lib/sso.service.ts

@@ -3,11 +3,14 @@ import { OAuthService, JwksValidationHandler } from 'angular-oauth2-oidc';
 import { SsoInterface } from './sso.interface';
 import { isNullOrUndefined } from 'util';
 import { NativeContainerService } from 'native-container';
+import { ReplaySubject, Subject } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',
 })
 export class SsoService {
+  readonly isAuthenticated$ = new ReplaySubject<boolean>();
+
   constructor(private oauthService: OAuthService, private externalService: SsoInterface, private native: NativeContainerService) {}
 
   public registerAuthentication() {
@@ -18,16 +21,9 @@ export class SsoService {
       this.oauthService.setupAutomaticSilentRefresh();
     }
 
-    return this.oauthService.loadDiscoveryDocumentAndTryLogin().then((_) => {
-      const hasIdToken = !!this.getIdToken();
-      const hasAccessToken = !!this.getToken();
-      const isLoggedIn = hasIdToken && hasAccessToken;
-
-      if (!isLoggedIn) {
-        this.login();
-      }
-
-      return new Promise((resolve) => resolve());
+    return this.oauthService.loadDiscoveryDocumentAndTryLogin().then(() => {
+      this.isAuthenticated$.next(!!this.getIdToken() && !!this.getToken());
+      return !!this.getIdToken() && !!this.getToken();
     });
   }