Fixes navigation to restricted routes for logged out users

src/app/root.module.ts

@@ -35,18 +35,16 @@ import { SharedModule } from './shared/shared.module';
 const appRoutes: Routes = [
   {
     path: 'admin',
-    canLoad: [StaticLoginService],
     loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
-    canActivate: [InitDbGuard],
+    canActivate: [InitDbGuard, StaticLoginService],
   }, {
     path: 'info',
     loadChildren: () => import('./root/info/info.module').then(m => m.InfoModule),
     canActivate: [InitDbGuard],
   }, {
     path: 'i18n-manager',
-    canLoad: [StaticLoginService],
     loadChildren: () => import('./i18n-manager/i18n-manager.module').then(m => m.I18nManagerModule),
-    canActivate: [InitDbGuard],
+    canActivate: [InitDbGuard, StaticLoginService],
   }, {
     path: 'quiz/manager',
     loadChildren: () => import('./quiz/quiz-manager/quiz-manager.module').then(m => m.QuizManagerModule),

src/app/root/root/root.component.ts

 import { isPlatformBrowser, isPlatformServer } from '@angular/common';
 import { AfterViewInit, Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
-import { ActivatedRoute, NavigationEnd, RouteConfigLoadEnd, RouteConfigLoadStart, Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, RouteConfigLoadStart, Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { RxStompService } from '@stomp/ng2-stompjs';
 import { IMessage } from '@stomp/stompjs/esm6';
@@ -88,9 +88,10 @@ export class RootComponent implements OnInit, AfterViewInit {
     this.router.events.pipe(takeUntil(this._destroy)).subscribe((event: any) => {
       if (event instanceof RouteConfigLoadStart) {
         this.sharedService.isLoadingEmitter.next(true);
-      } else if (event instanceof RouteConfigLoadEnd || event instanceof NavigationEnd) {
-        this.sharedService.isLoadingEmitter.next(false);
+        return;
       }
+
+      this.sharedService.isLoadingEmitter.next(false);
     });
 
     this.themeService.initTheme();
@@ -149,7 +150,13 @@ export class RootComponent implements OnInit, AfterViewInit {
     });
 
     this.router.events.pipe(takeUntil(this._destroy), filter(nav => nav instanceof NavigationEnd)).subscribe(() => {
-      this.isInQuizManager = [QuizManagerComponent.TYPE].includes(this.fetchChildComponent(this.activatedRoute).TYPE);
+      const currentComponent = this.fetchChildComponent(this.activatedRoute);
+      if (!currentComponent) {
+        this.router.navigate(['/']);
+        return;
+      }
+
+      this.isInQuizManager = [QuizManagerComponent.TYPE].includes(currentComponent.TYPE);
     });
   }
 

src/app/service/login/static-login.service.ts

 import { Injectable } from '@angular/core';
-import { CanLoad, Route, Router, UrlSegment } from '@angular/router';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
 import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, take } from 'rxjs/operators';
 import { UserRole } from '../../lib/enums/UserRole';
 import { UserService } from '../user/user.service';
 
 @Injectable({
   providedIn: 'root',
 })
-export class StaticLoginService implements CanLoad {
+export class StaticLoginService implements CanActivate {
 
   constructor(private router: Router, private userService: UserService) { }
 
-  public canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> {
-    return new Observable<boolean>(subscriber => {
-      this.isAllowedToProceed(route).pipe(map(isAllowedToProceed => {
-        if (isAllowedToProceed) {
-          return true;
-        }
+  public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {
+    const url = route.url.map(u => u.path).join('/');
 
-        this.router.navigate(['/login'], {
-          queryParams: {
-            return: segments.map(segment => segment.path).join('/'),
-          },
-        });
-        return false;
-      })).subscribe(isAllowedToProceed => {
-        subscriber.next(isAllowedToProceed);
-        subscriber.complete();
+    return this.isAllowedToProceed(url).pipe(map(isAllowedToProceed => {
+      if (isAllowedToProceed) {
+        return true;
+      }
+
+      return this.router.createUrlTree(['/login'], {
+        queryParams: {
+          return: url,
+        },
       });
-    });
+    }), take(1));
   }
 
-  private isAllowedToProceed(route: Route): Observable<boolean> {
+  private isAllowedToProceed(url: string): Observable<boolean> {
     return this.userService.loginNotifier.pipe(map(isLoggedIn => {
       if (!isLoggedIn) {
         return false;
       }
 
-      switch (route.path) {
+      switch (url) {
         case 'i18n-manager':
           return this.userService.isAuthorizedFor(UserRole.EditI18n);
         case 'admin':

src/styles/_custom.scss

@@ -45,6 +45,10 @@ img[alt*="emoji_"] {
   width: 24px;
 }
 
+iframe {
+  max-width: 100%;
+}
+
 @include media-breakpoint-only(xs) {
   .btn-header {
     width: calc(100% + 30px);