chore: multistage setup reverted

configurations/docker/Dockerfile.dev

@@ -7,16 +7,13 @@ COPY . /app
 WORKDIR /app
 
 FROM base
-ARG API_URL
-ENV API_URL "$API_URL"
 
 RUN apt-get update
 RUN apt-get install -y gettext
 
 WORKDIR /app
 COPY package.json /app/package.json
 COPY . /app
-RUN envsubst < /app/projects/multidirectory-app/src/assets/env.template.js > /app/projects/multidirectory-app/src/assets/env.js
 RUN pnpm install -g @angular/cli@18 &&\
     pnpm install &&\
     ng build multidirectory-ui-kit &&\

docker-compose.dev.yml

@@ -6,26 +6,24 @@ services:
     build:
       context: ./
       dockerfile: configurations/docker/Dockerfile.dev
-      args:
-        - API_URL=http://md.localhost/api
     restart: 'no'
     hostname: interface
     environment:
-      - HUSKY=0
-      - NODE_ENV=development
+      API_URL: http://md.localhost2/api
     ports:
       - 9080:80
     working_dir: /app
     volumes:
       - '.:/app'
       - '/app/node_modules'
-      - '/app/projects/multidirectory-app/src/assets'
     labels:
       - 'traefik.enable=true'
       - 'traefik.http.routers.interface.rule=Host(`md.localhost`)'
       - 'traefik.http.routers.interface.entrypoints=web'
       - 'traefik.http.services.interface.loadbalancer.server.port=80'
-    command: ng serve --host 0.0.0.0 --port 80 --poll 2000
+    command: bash -c '
+      sed "s,[$]{API_URL},"$$API_URL",g" /app/projects/multidirectory-app/src/assets/env.template.js > /app/projects/multidirectory-app/src/assets/env.js &&
+      ng serve --host 0.0.0.0 --port 80 --poll 2000'
 
   multidirectory-storybook:
     build:

projects/multidirectory-app/src/app/features/setup/setup/setup.component.html

@@ -28,33 +28,29 @@
       </div>
     </div>
     <div class="w-100">
-      <md-stepper #stepper (nextStep)="onNext($event)" (finish)="onFinish()">
-        <ng-template mdStep>
-          <app-domain-settings [setupRequest]="setupRequest"></app-domain-settings>
-        </ng-template>
-        <app-admin-settings *mdStep [setupRequest]="setupRequest"></app-admin-settings>
-        <ng-template mdStep [stepComplete]="onInitialSetup.bind(this)">
-          <app-admin-settings-second [setupRequest]="setupRequest"></app-admin-settings-second>
-        </ng-template>
+      <md-stepper #stepper (nextStep)="onNext($event)" (finish)="onSetup()">
+        <app-domain-settings *mdStep [setupRequest]="setupRequest"></app-domain-settings>
         @if (setupRequest.setupDns) {
-          <ng-template mdStep [stepComplete]="onDnsSetup.bind(this)">
-            <app-dns-setup-settings [setupRequest]="setupRequest"></app-dns-setup-settings>
-          </ng-template>
+          <app-dns-setup-settings *mdStep [setupRequest]="setupRequest"></app-dns-setup-settings>
         }
         @if (setupRequest.setupKdc && !setupRequest.generateKdcPasswords) {
-          <ng-template mdStep [stepComplete]="onKerberosSetup.bind(this)">
-            <app-kerberos-settings [setupRequest]="setupRequest"></app-kerberos-settings>
-          </ng-template>
+          <app-kerberos-settings *mdStep [setupRequest]="setupRequest"></app-kerberos-settings>
         }
+        <app-admin-settings *mdStep [setupRequest]="setupRequest"></app-admin-settings>
+        <app-admin-settings-second
+          *mdStep
+          [setupRequest]="setupRequest"
+        ></app-admin-settings-second>
       </md-stepper>
     </div>
     <ng-container class="app-modal-footer">
       <div class="flex-row flex-center flex-gap-20">
-        @if (stepper.currentIndex > 0) {
-          <md-button [primary]="false" (click)="stepper.previous()">{{
-            'setup.back' | transloco
-          }}</md-button>
-        }
+        <md-button
+          [primary]="false"
+          *ngIf="stepper.currentIndex > 0"
+          (click)="stepper.previous()"
+          >{{ 'setup.back' | transloco }}</md-button
+        >
         <md-button [primary]="true" (click)="showNextStep()">{{
           'setup.next' | transloco
         }}</md-button>

projects/multidirectory-app/src/app/features/setup/setup/setup.component.ts

@@ -73,62 +73,26 @@ export class SetupComponent implements OnInit, AfterViewInit, OnDestroy {
     this.modal.resizeToContentHeight();
   }
 
-  onInitialSetup() {
-    this.modal.showSpinner();
-    return this.setup.initialSetup(this.setupRequest).pipe(
-      catchError((err) => {
-        this.modal.hideSpinner();
-        this.toastr.error(translate('setup.setup-failed'));
-        return of(null);
-      }),
-      switchMap((res) => {
-        this.modal.hideSpinner();
-        this.toastr.success(translate('setup.setup-complete'));
-        return this.setupRequest.generateKdcPasswords && this.setupRequest.setupKdc
-          ? this.onKerberosSetup()
-          : of(null);
-      }),
-    );
-  }
-
-  onDnsSetup() {
-    this.modal.showSpinner();
-    return this.setup.dnsSetup(this.setupRequest).pipe(
-      catchError((err) => {
-        this.modal.hideSpinner();
-        this.toastr.error(translate('setup.dns-setup-failed'));
-        return of(null);
-      }),
-      switchMap((res) => {
-        this.modal.hideSpinner();
-        this.toastr.success(translate('setup.dns-setup-complete'));
-        return of(null);
-      }),
-    );
-  }
-
-  onKerberosSetup() {
+  onSetup() {
     if (this.setupRequest.setupKdc && this.setupRequest.generateKdcPasswords) {
       this.downloadPasswords();
     }
 
     this.modal.showSpinner();
-    return this.setup.kerberosSetup(this.setupRequest).pipe(
-      catchError((err) => {
+    this.setup
+      .setup(this.setupRequest)
+      .pipe(
+        catchError((err) => {
+          this.modal.hideSpinner();
+          this.router.navigate(['/']);
+          throw err;
+        }),
+      )
+      .subscribe((res) => {
         this.modal.hideSpinner();
-        this.toastr.error(translate('setup.kerberos-setup-failed'));
-        return of(null);
-      }),
-      switchMap((res) => {
-        this.modal.hideSpinner();
-        this.toastr.success(translate('setup.kerberos-setup-complete'));
-        return of(null);
-      }),
-    );
-  }
-
-  onFinish() {
-    this.router.navigate(['/']);
+        this.toastr.success(translate('setup.setup-complete'));
+        this.router.navigate(['/']);
+      });
   }
 
   showNextStep() {

projects/multidirectory-app/src/app/services/setup.service.ts

@@ -19,6 +19,24 @@ export class SetupService {
     private loginService: LoginService,
   ) {}
 
+  setup(setupRequest: SetupRequest): Observable<boolean> {
+    return this.api.setup(setupRequest).pipe(
+      switchMap((success) =>
+        this.loginService.login(setupRequest.user_principal_name, setupRequest.password),
+      ),
+      switchMap((success) => {
+        return iif(
+          () => setupRequest.setupDns,
+          this.dns.setup(setupRequest.setupDnsRequest),
+          of(!!success),
+        );
+      }),
+      switchMap((success) => {
+        return iif(() => setupRequest.setupKdc, this.kerberosSetup(setupRequest), of(!!success));
+      }),
+    );
+  }
+
   kerberosSetup(setupRequest: SetupRequest) {
     return this.api
       .kerberosTreeSetup(new KerberosTreeSetupRequest({}).flll_from_setup_request(setupRequest))
@@ -49,16 +67,4 @@ export class SetupService {
         }),
       );
   }
-
-  initialSetup(setupRequest: SetupRequest): Observable<LoginResponse> {
-    return this.api.setup(setupRequest).pipe(
-      switchMap((success) => {
-        return this.loginService.login(setupRequest.user_principal_name, setupRequest.password);
-      }),
-    );
-  }
-
-  dnsSetup(setupRequest: SetupRequest): Observable<boolean> {
-    return this.dns.setup(setupRequest.setupDnsRequest);
-  }
 }

projects/multidirectory-ui-kit/src/lib/components/stepper/step.directive.ts

@@ -5,6 +5,5 @@ import { Observable, of } from 'rxjs';
   selector: '[mdStep]',
 })
 export class StepDirective {
-  @Input() stepComplete: () => Observable<void | null> = () => of(null);
   constructor(public templateRef: TemplateRef<unknown>) {}
 }

projects/multidirectory-ui-kit/src/lib/components/stepper/stepper.component.ts

@@ -28,25 +28,13 @@ export class StepperComponent {
   constructor(private cdr: ChangeDetectorRef) {}
 
   next(count: number = 1) {
-    const step = this.steps.get(this.currentIndex);
-    if (!step) {
-      throw 'Step was lost';
+    if (this.currentIndex + count == this.steps.length) {
+      this.finish.emit();
+    } else {
+      this.currentIndex += 1;
+      this.nextStep.emit(this.steps.get(this.currentIndex)?.templateRef);
     }
-    const stepSwitcher = () => {
-      if (this.currentIndex + count == this.steps.length) {
-        this.finish.emit();
-      } else {
-        this.currentIndex += 1;
-        this.nextStep.emit(this.steps.get(this.currentIndex)?.templateRef);
-      }
-    };
-    step
-      .stepComplete()
-      .pipe(take(1))
-      .subscribe(() => {
-        stepSwitcher.call(this);
-        this.cdr.detectChanges();
-      });
+    this.cdr.detectChanges();
   }
 
   previous(count: number = 1) {

projects/multidirectory-ui-kit/src/lib/components/stepper/stepperttest.component.ts

@@ -6,7 +6,6 @@ import { ThirdStepComponent } from './steps/third-step.component';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { MultidirectoryUiKitModule } from '../../multidirectory-ui-kit.module';
-import { delay, Observable, of, tap } from 'rxjs';
 
 export class TestData {
   firstStep: string = '';
@@ -17,21 +16,24 @@ export class TestData {
 @Component({
   selector: 'md-stepper-test',
   template: `
-    <md-stepper #stepper (finish)="onFinish()">
+    <md-stepper #stepper (onFinish)="onFinish()">
       <ng-template mdStep>
         <test-first-step [context]="data"></test-first-step>
       </ng-template>
-      <test-second-step *mdStep [context]="data"></test-second-step>
-      <test-third-step *mdStep [context]="data"></test-third-step>
+      <ng-template mdStep>
+        <test-second-step [context]="data"></test-second-step>
+      </ng-template>
+      <ng-template mdStep>
+        <test-third-step [context]="data"></test-third-step>
+      </ng-template>
     </md-stepper>
-    <button #nextBtn (click)="stepper.next()">Next</button>
-    @if (finishedData) {
-      <div>
-        <div>firstStep: {{ finishedData!.firstStep }}</div>
-        <div>secondStep: {{ finishedData!.secondStep }}</div>
-        <div>thirdStep: {{ finishedData!.thirdStep }}</div>
-      </div>
-    }
+    <button *ngIf="!finishedData" #nextBtn (click)="stepper.next()">Next</button>
+    <div *ngIf="finishedData">
+      <div>firstStep: {{ finishedData!.firstStep }}</div>
+      <div>secondStep: {{ finishedData!.secondStep }}</div>
+      <div>thirdStep: {{ finishedData!.thirdStep }}</div>
+      <button (click)="stepper.next()">Restart</button>
+    </div>
   `,
 })
 export class StepperTestComponent {
@@ -42,16 +44,6 @@ export class StepperTestComponent {
   onFinish() {
     this.finishedData = Object.assign({}, this.data);
     this.data = {} as TestData;
-    alert('finished');
-  }
-
-  firstStepComplete(): Observable<void | null> {
-    return of(null).pipe(
-      delay(1000),
-      tap((x) => {
-        alert('step complete');
-      }),
-    );
   }
 }