feat: rewrite setup wizard

src/pages/setup/setup.component.ts

@@ -1,12 +1,13 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 import {MatSidenavModule} from "@angular/material/sidenav";
-import {Router, RouterLink, RouterOutlet} from "@angular/router";
+import {Router, RouterOutlet} from "@angular/router";
 import {MatCard} from "@angular/material/card";
 import {MatButton} from "@angular/material/button";
 import {NavigationService} from "@service/navigation.service";
 import {catchError, Observable} from "rxjs";
 import {DataSpinnerComponent} from "@component/common/data-spinner/data-spinner.component";
 import SetupService from "@api/v1/setup.service";
+import {ToastrService} from "ngx-toastr";
 
 @Component({
   selector: 'app-setup',
@@ -16,7 +17,6 @@ import SetupService from "@api/v1/setup.service";
     RouterOutlet,
     MatCard,
     MatButton,
-    RouterLink,
     DataSpinnerComponent
   ],
   templateUrl: './setup.component.html',
@@ -26,76 +26,103 @@ import SetupService from "@api/v1/setup.service";
 })
 
 export class SetupComponent {
-  protected previousButtonDisabled: boolean = false;
-  protected previousButtonRoute: string = '';
-
   protected nextButtonDisabled: boolean = false;
-  protected nextButtonRoute!: string;
-
+  protected skipButtonDisabled: boolean = false;
   protected loaderActive: boolean = false;
 
-  protected routes: Array<string> = ['', 'welcome', 'database', 'cache', 'create-admin', 'schedule', 'logging', 'summary'];
+  protected routes: Array<string> = ['', 'welcome', 'database', 'cache', 'password-policy', 'schedule', 'logging', 'create-admin', 'two-factor', 'summary'];
   private index: number = 1;
 
   protected get getIndex() {
     return this.index;
   }
 
-  constructor(private router: Router, private navigationService: NavigationService, api: SetupService) {
+  constructor(private router: Router, private navigationService: NavigationService, api: SetupService, private notify: ToastrService) {
     api.isConfigured().subscribe(x => {
-      if (x)
-        this.router.navigate(['/']).then();
+      if (x) this.router.navigate(['/']).then();
     });
 
-    if (!this.router.url.includes(this.routes[this.index]))
+    if (!this.router.url.includes(this.routes[this.index])) {
       this.router.navigate(['setup/', this.routes[this.index]]).then();
+    }
 
-    this.setRoutes();
+    this.initializeButtonSubscriptions();
+
+    this.navigationService.autoSkipNavigation$.subscribe(action => {
+      if (!this.navigationService.isNavigationUserInitiated) {
+        this.executeAction(action);
+      }
+    });
+  }
+
+  private initializeButtonSubscriptions() {
     this.navigationService.nextButtonState$.subscribe(state => {
       this.nextButtonDisabled = !state;
     });
 
-    this.navigationService.skipNavigation.subscribe(action => {
-      this.executeAction(action);
+    this.navigationService.skipButtonState$.subscribe(state => {
+      this.skipButtonDisabled = !state;
     });
   }
 
-  private setRoutes() {
-    this.previousButtonRoute = this.routes[this.index - 1];
-    this.nextButtonRoute = this.routes[this.index + 1];
-  }
-
   private executeAction(action: () => Observable<boolean>) {
     this.loaderActive = true;
-    action().pipe(
-      catchError(error => {
-        this.nextButtonDisabled = true;
-        this.loaderActive = false;
-        throw error;
-      })
-    )
-      .subscribe(x => {
-        this.nextButtonDisabled = x;
-        this.loaderActive = !x;
-        if (x) {
-          if (this.index < this.routes.length - 1) {
-            this.router.navigate(['setup/', this.nextButtonRoute]).then();
-            this.index++;
-            this.setRoutes();
-          } else
-            this.router.navigate(['/']).then();
+    action()
+      .pipe(
+        catchError(error => {
+          this.nextButtonDisabled = true;
+          this.loaderActive = false;
+          throw error;
+        })
+      )
+      .subscribe(success => {
+        if (success) {
+          this.moveToNextPage();
+        } else {
+          this.notify.error('Некорректно введены данные');
+          this.nextButtonDisabled = true;
         }
+
+        this.loaderActive = false;
       });
   }
 
+  protected onSkipClick() {
+    this.navigationService.skipButtonAction().subscribe(success => {
+      if (success) {
+        this.moveToNextPage();
+      }
+    });
+  }
+
   protected onNextClick() {
     this.executeAction(this.navigationService.nextButtonAction);
   }
 
   protected onPreviousClick() {
-    if (this.index - 1 > 0) {
-      this.index--;
-      this.setRoutes();
+    this.navigationService.setUserInitiatedNavigation(true);
+    this.moveToPreviousPage();
+  }
+
+  private moveToNextPage() {
+    if (this.index < this.routes.length - 1) {
+      this.index++;
+      this.router.navigate(['setup/', this.routes[this.index]]).then();
+      this.initializePage();
+    } else {
+      this.router.navigate(['/']).then();
     }
   }
+
+  private moveToPreviousPage() {
+    if (this.index > 0) {
+      this.index--;
+      this.router.navigate(['setup/', this.routes[this.index]]).then();
+      this.initializePage();
+    }
+  }
+
+  private initializePage() {
+    this.navigationService.resetButtonStates();
+  }
 }