Fix routing loop on localhost

src/app/services/util/onboarding.service.ts

@@ -5,9 +5,13 @@ import { EventService } from './event.service';
 import { AuthenticationService } from '../http/authentication.service';
 import { Router } from '@angular/router';
 import { DataStoreService } from './data-store.service';
-import { Subscription } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { initDefaultTour, OnboardingTour, OnboardingTourStepInteraction } from './onboarding.tours';
 import { JoyrideStepInfo } from 'ngx-joyride/lib/models/joyride-step-info.class';
+import { NotificationService } from './notification.service';
+import { RoomService } from '../http/room.service';
+import { TranslateService } from '@ngx-translate/core';
+import { LanguageService } from './language.service';
 
 @Injectable({
   providedIn: 'root'
@@ -23,12 +27,20 @@ export class OnboardingService {
               private eventService: EventService,
               private dataStoreService: DataStoreService,
               private authenticationService: AuthenticationService,
-              private router: Router) {
+              private router: Router,
+              private notificationService: NotificationService,
+              private roomService: RoomService,
+              private translateService: TranslateService,
+              private langService: LanguageService) {
+    this.langService.langEmitter.subscribe(lang => {
+      this.translateService.use(lang);
+    });
+    this.translateService.use(localStorage.getItem('currentLang'));
   }
 
   startDefaultTour(ignoreDone = false): boolean {
     return this.startOnboardingTour(
-      initDefaultTour(this.authenticationService, this.dataStoreService, this.router), ignoreDone);
+      initDefaultTour(this.authenticationService, this.dataStoreService, this.router, this.roomService), ignoreDone);
   }
 
   doStep(stepDirection: number): boolean {
@@ -49,20 +61,29 @@ export class OnboardingService {
     }
     if (previous.length < current.length || previous[1] !== current[1]) {
       //Route gets switched
-      this.dataStoreService.set('onboarding_' + this._activeTour.name, JSON.stringify({
+      const name = this._activeTour.name;
+      const routeChecker = this._activeTour.checkIfRouteCanBeAccessed;
+      this.cancelTour(false);
+      this.dataStoreService.set('onboarding_' + name, JSON.stringify({
         state: 'running',
         step: this._currentStep + stepDirection
       }));
-      this.cleanup();
-      document.querySelector('joyride-step').remove();
-      document.querySelector('body > div.backdrop-container').remove();
-      this.joyrideService.closeTour();
-      this.router.navigate([current[1]]);
+      this.tryNavigate(name, current[1], routeChecker);
       return true;
     }
     return false;
   }
 
+  cancelTour(writeCanceled = true) {
+    if (writeCanceled) {
+      this.dataStoreService.set('onboarding_' + this._activeTour.name, JSON.stringify({ state: 'canceled' }));
+    }
+    this.cleanup();
+    document.querySelector('joyride-step').remove();
+    document.querySelector('body > div.backdrop-container').remove();
+    this.joyrideService.closeTour();
+  }
+
   private startOnboardingTour(tour: OnboardingTour, ignoreDone = false): boolean {
     if (this._activeTour) {
       this.cleanup();
@@ -79,7 +100,7 @@ export class OnboardingService {
     this._currentStep = tourInfo && tourInfo.step ? tourInfo.step : 1;
     const firstStepRoute = tour.tour[this._currentStep - 1].split('@');
     if (firstStepRoute.length > 1 && !this.router.url.endsWith('/' + firstStepRoute[1])) {
-      this.router.navigate([firstStepRoute[1]]);
+      this.tryNavigate(tour.name, firstStepRoute[1], tour.checkIfRouteCanBeAccessed);
       return false;
     }
     this._activeTour = tour;
@@ -123,6 +144,23 @@ export class OnboardingService {
     }
   }
 
+  private tryNavigate(tourName: string, route: string, routeChecker: (string) => Observable<boolean>) {
+    if (routeChecker) {
+      routeChecker(route).subscribe(canAccess => {
+        if (canAccess) {
+          this.router.navigate([route]);
+        } else {
+          this.dataStoreService.set('onboarding_' + tourName, JSON.stringify({ state: 'canceled' }));
+          this.translateService.get('joyride.cantAccessRoute').subscribe(message => {
+            this.notificationService.show(message);
+          });
+        }
+      });
+    } else {
+      this.router.navigate([route]);
+    }
+  }
+
   private emulateWalkthrough() {
     if (!this._activeTour.tourActions) {
       return;

src/app/services/util/onboarding.tours.ts

@@ -2,6 +2,8 @@ import { AuthenticationService } from '../http/authentication.service';
 import { UserRole } from '../../models/user-roles.enum';
 import { DataStoreService } from './data-store.service';
 import { Router } from '@angular/router';
+import { RoomService } from '../http/room.service';
+import { Observable, of, Subject } from 'rxjs';
 
 export interface OnboardingTourStepInteraction {
   beforeLoad?: (isNext: boolean) => void;
@@ -20,11 +22,22 @@ export interface OnboardingTour {
   tourActions?: OnboardingTourStepInteractionObject;
   startupAction?: () => void;
   doneAction?: (finished: boolean) => void;
+  checkIfRouteCanBeAccessed?: (route: string) => Observable<boolean>;
 }
 
+const roomChecker = (roomService: RoomService, roomUrl: string): Observable<boolean> => {
+  const index = roomUrl.indexOf('room/') + 5;
+  const shortId = roomUrl.substring(index, roomUrl.indexOf('/', index));
+  const sub = new Subject<boolean>();
+  roomService.getRoomByShortId(shortId)
+    .subscribe(room => sub.next(room != null), () => sub.next(false));
+  return sub.asObservable();
+};
+
 export const initDefaultTour = (authenticationService: AuthenticationService,
                                 dataStoreService: DataStoreService,
-                                router: Router): OnboardingTour => ({
+                                router: Router,
+                                roomService: RoomService): OnboardingTour => ({
   name: 'default',
   tour: [
     'greeting@home',
@@ -67,5 +80,11 @@ export const initDefaultTour = (authenticationService: AuthenticationService,
   },
   startupAction: () => {
     dataStoreService.set('onboarding-default-meta', String(authenticationService.isLoggedIn()));
+  },
+  checkIfRouteCanBeAccessed: (route: string) => {
+    if (route.endsWith('home')) {
+      return of(true);
+    }
+    return roomChecker(roomService, route);
   }
 });

src/assets/i18n/home/de.json

@@ -169,6 +169,7 @@
     "prev": "Zurück",
     "step": "{{step}} / {{total}}",
     "done": "Fertig",
+    "cantAccessRoute": "Diese Route ist nicht verfügbar. Die Tour wird abgebrochen.",
     "greeting": "Die Tour führt dich zu den wichtigsten Stellen in unserem Audience-Response-System »frag.jetzt«. Das dauert nicht mehr als eine Minute.",
     "greetingTitle": "Willkommen!",
     "loginButtonHeader": "Nicht nötig, es sei denn du willst deine besuchten oder selbst erstellten Räume auf unserem Server speichern.",

src/assets/i18n/home/en.json

@@ -170,6 +170,7 @@
     "prev": "Previous",
     "step": "{{step}} / {{total}}",
     "done": "Finish",
+    "cantAccessRoute": "This route is not available. The tour is canceled.",
     "greeting": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem.",
     "greetingTitle": "Welcome",
     "loginButtonHeader": "Here you can log in. When you are logged in, you can manage your rooms safely without worries of data loss.",