From a21d69765ba59a8d83e82cc392524ba4249b1a55 Mon Sep 17 00:00:00 2001
From: bossenti <bossenti@posteo.de>
Date: Fri, 20 Jan 2023 20:26:28 +0100
Subject: [PATCH] [#877] apply formatting and linting to login module

---
 ui/.eslintignore                              |   1 -
 ui/.prettierignore                            |   1 -
 .../activate-account.component.html           |  13 +-
 .../activate-account.component.ts             |  61 ++++---
 .../components/auth-box/auth-box.component.ts |  23 +--
 .../components/login/login.component.html     |  82 ++++++---
 .../components/login/login.component.scss     |  20 +--
 .../login/components/login/login.component.ts |  75 ++++----
 .../app/login/components/login/login.model.ts |   4 +-
 .../register/register.component.html          |  62 +++++--
 .../components/register/register.component.ts |  95 +++++-----
 .../components/register/registration.model.ts |   4 +-
 .../restore-password.component.html           |  41 +++--
 .../restore-password.component.ts             |  72 ++++----
 .../set-new-password.component.html           |  61 +++++--
 .../set-new-password.component.ts             | 131 ++++++++------
 .../components/setup/setup.component.html     | 165 +++++++++++++-----
 .../components/setup/setup.component.scss     |  54 +++---
 .../login/components/setup/setup.component.ts | 113 ++++++------
 .../components/startup/startup.component.html |  40 ++++-
 .../components/startup/startup.component.scss |   5 +-
 .../components/startup/startup.component.ts   |  40 +++--
 ui/src/app/login/login.module.ts              |  11 +-
 .../services/account-activation.service.ts    |  18 +-
 ui/src/app/login/services/login.service.ts    |  69 +++++---
 .../services/restore-password.service.ts      |  30 ++--
 ui/src/app/login/utils/check-password.ts      |  16 +-
 27 files changed, 793 insertions(+), 514 deletions(-)

diff --git a/ui/.eslintignore b/ui/.eslintignore
index c980966c1a..40d6f53866 100644
--- a/ui/.eslintignore
+++ b/ui/.eslintignore
@@ -28,4 +28,3 @@ src/app/data-explorer
 src/app/editor
 src/app/files
 src/app/info
-src/app/login
diff --git a/ui/.prettierignore b/ui/.prettierignore
index 3930e91eeb..3ac17556ea 100644
--- a/ui/.prettierignore
+++ b/ui/.prettierignore
@@ -28,4 +28,3 @@ src/app/data-explorer
 src/app/editor
 src/app/files
 src/app/info
-src/app/login
diff --git a/ui/src/app/login/components/activate-account/activate-account.component.html b/ui/src/app/login/components/activate-account/activate-account.component.html
index 1dfef7fcd2..b9d61e8959 100644
--- a/ui/src/app/login/components/activate-account/activate-account.component.html
+++ b/ui/src/app/login/components/activate-account/activate-account.component.html
@@ -23,14 +23,19 @@ <h1>Account activation</h1>
     <div fxLayout="column" fxFlex="100">
         <div fxLayout="column" class="mt-10">
             <div>
-                <h5 *ngIf="!activationPerformed">Verifying account activation...</h5>
-                <h5 *ngIf="activationPerformed && activationSuccess">Account successfully activated.</h5>
-                <h5 *ngIf="activationPerformed && !activationSuccess">Your account could not be activated.</h5>
+                <h5 *ngIf="!activationPerformed">
+                    Verifying account activation...
+                </h5>
+                <h5 *ngIf="activationPerformed && activationSuccess">
+                    Account successfully activated.
+                </h5>
+                <h5 *ngIf="activationPerformed && !activationSuccess">
+                    Your account could not be activated.
+                </h5>
             </div>
             <div>
                 <a [routerLink]="['/login']">Go to login page</a>
             </div>
         </div>
     </div>
-
 </sp-auth-box>
diff --git a/ui/src/app/login/components/activate-account/activate-account.component.ts b/ui/src/app/login/components/activate-account/activate-account.component.ts
index 6608661273..8bc81272f7 100644
--- a/ui/src/app/login/components/activate-account/activate-account.component.ts
+++ b/ui/src/app/login/components/activate-account/activate-account.component.ts
@@ -21,38 +21,43 @@ import { AccountActivationService } from '../../services/account-activation.serv
 import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
-  selector: 'sp-activate-account',
-  templateUrl: './activate-account.component.html',
-  styleUrls: ['../login/login.component.scss']
+    selector: 'sp-activate-account',
+    templateUrl: './activate-account.component.html',
+    styleUrls: ['../login/login.component.scss'],
 })
 export class ActivateAccountComponent implements OnInit {
+    activationCode: string;
+    activationSuccess: boolean;
+    activationPerformed = false;
 
-  activationCode: string;
-  activationSuccess: boolean;
-  activationPerformed = false;
+    constructor(
+        private accountActivationService: AccountActivationService,
+        private route: ActivatedRoute,
+        private router: Router,
+    ) {}
 
-  constructor(private accountActivationService: AccountActivationService,
-              private route: ActivatedRoute,
-              private router: Router) {}
-
-  ngOnInit(): void {
-    this.route.queryParams.subscribe(params => {
-      this.activationCode = params['activationCode'];
-      if (this.activationCode) {
-        this.accountActivationService.activateAccount(this.activationCode).subscribe(success => {
-          this.activationPerformed = true;
-          this.activationSuccess = true;
-        }, error => {
-          this.activationPerformed = true;
+    ngOnInit(): void {
+        this.route.queryParams.subscribe(params => {
+            this.activationCode = params['activationCode'];
+            if (this.activationCode) {
+                this.accountActivationService
+                    .activateAccount(this.activationCode)
+                    .subscribe(
+                        success => {
+                            this.activationPerformed = true;
+                            this.activationSuccess = true;
+                        },
+                        error => {
+                            this.activationPerformed = true;
+                        },
+                    );
+            } else {
+                this.activationPerformed = true;
+            }
         });
-      } else {
-        this.activationPerformed = true;
-      }
-    });
-  }
-
-  navigateToLoginPage() {
-    this.router.navigate(['/login']);
-  }
+    }
 
+    navigateToLoginPage() {
+        this.router.navigate(['/login']);
+    }
 }
diff --git a/ui/src/app/login/components/auth-box/auth-box.component.ts b/ui/src/app/login/components/auth-box/auth-box.component.ts
index 6ad5ad11b9..c0b7210920 100644
--- a/ui/src/app/login/components/auth-box/auth-box.component.ts
+++ b/ui/src/app/login/components/auth-box/auth-box.component.ts
@@ -16,22 +16,15 @@
  *
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
-  selector: 'sp-auth-box',
-  templateUrl: './auth-box.component.html',
-  styleUrls: ['./auth-box.component.scss']
+    selector: 'sp-auth-box',
+    templateUrl: './auth-box.component.html',
+    styleUrls: ['./auth-box.component.scss'],
 })
-export class AuthBoxComponent implements OnInit {
-
-
-  ngOnInit(): void {
-  }
-
-  openDocumentation() {
-    window.open('https://streampipes.apache.org/docs', '_blank');
-  }
-
-
+export class AuthBoxComponent {
+    openDocumentation() {
+        window.open('https://streampipes.apache.org/docs', '_blank');
+    }
 }
diff --git a/ui/src/app/login/components/login/login.component.html b/ui/src/app/login/components/login/login.component.html
index afc06d0536..9dbe7a311f 100644
--- a/ui/src/app/login/components/login/login.component.html
+++ b/ui/src/app/login/components/login/login.component.html
@@ -21,49 +21,77 @@
         <h1>Login</h1>
     </div>
     <div fxFlex="100" fxLayout="column">
-        <form [formGroup]="parentForm" fxFlex="100" fxLayout="column" *ngIf="configReady">
+        <form
+            [formGroup]="parentForm"
+            fxFlex="100"
+            fxLayout="column"
+            *ngIf="configReady"
+        >
             <div fxFlex="100" fxLayout="column">
                 <mat-form-field fxFlex color="accent">
                     <mat-label>Email</mat-label>
-                    <input formControlName="username"
-                           matInput
-                           name="username"
-                           class="sp"
-                           required
-                           data-cy="login-email"/>
+                    <input
+                        formControlName="username"
+                        matInput
+                        name="username"
+                        class="sp"
+                        required
+                        data-cy="login-email"
+                    />
                 </mat-form-field>
                 <mat-form-field fxFlex color="accent">
                     <mat-label>Password</mat-label>
-                    <input formControlName="password"
-                           matInput
-                           name="password"
-                           type="password"
-                           class="sp"
-                           required
-                           data-cy="login-password"/>
+                    <input
+                        formControlName="password"
+                        matInput
+                        name="password"
+                        type="password"
+                        class="sp"
+                        required
+                        data-cy="login-password"
+                    />
                 </mat-form-field>
             </div>
-            <div class="form-actions" style="margin-top:20px;">
-                <button mat-button
-                        mat-raised-button
-                        color="accent"
-                        data-cy="login-button"
-                        (click)="logIn()"
-                        [disabled]="!parentForm.valid || loading">
+            <div class="form-actions" style="margin-top: 20px">
+                <button
+                    mat-button
+                    mat-raised-button
+                    color="accent"
+                    data-cy="login-button"
+                    (click)="logIn()"
+                    [disabled]="!parentForm.valid || loading"
+                >
                     <span *ngIf="loading">Logging in...</span>
                     <span *ngIf="!loading">Login</span>
                 </button>
-                <mat-spinner [mode]="'indeterminate'" color="accent" [diameter]="20"
-                             *ngIf="loading" style="margin-top:10px;"></mat-spinner>
+                <mat-spinner
+                    [mode]="'indeterminate'"
+                    color="accent"
+                    [diameter]="20"
+                    *ngIf="loading"
+                    style="margin-top: 10px"
+                ></mat-spinner>
                 <div class="md-warn" *ngIf="authenticationFailed">
-                    <h5 class="login-error">User not found or incorrect password provided.<br/>Please try again.</h5>
+                    <h5 class="login-error">
+                        User not found or incorrect password provided.<br />Please
+                        try again.
+                    </h5>
                 </div>
                 <div fxLayout="row" class="mt-10">
                     <div *ngIf="loginSettings.allowPasswordRecovery">
-                        <a [routerLink]="['/restore-password']">Forgot password?</a>
+                        <a [routerLink]="['/restore-password']"
+                            >Forgot password?</a
+                        >
                     </div>
-                    <span style="margin-left: 5px; margin-right: 5px;"
-                          *ngIf="loginSettings.allowSelfRegistration && loginSettings.allowPasswordRecovery"> | </span>
+                    <span
+                        style="margin-left: 5px; margin-right: 5px"
+                        *ngIf="
+                            loginSettings.allowSelfRegistration &&
+                            loginSettings.allowPasswordRecovery
+                        "
+                    >
+                        |
+                    </span>
                     <div *ngIf="loginSettings.allowSelfRegistration">
                         <a [routerLink]="['/register']">Create new account</a>
                     </div>
diff --git a/ui/src/app/login/components/login/login.component.scss b/ui/src/app/login/components/login/login.component.scss
index 44908d5c98..3b4edba73f 100644
--- a/ui/src/app/login/components/login/login.component.scss
+++ b/ui/src/app/login/components/login/login.component.scss
@@ -17,23 +17,23 @@
  */
 
 .login-error {
-  background: #ffa2a2;
-  padding: 8px;
-  color: #3e3e3e;
-  border-radius: 5px;
+    background: #ffa2a2;
+    padding: 8px;
+    color: #3e3e3e;
+    border-radius: 5px;
 }
 
 .info-box {
-  padding: 8px;
-  border-radius: 5px;
+    padding: 8px;
+    border-radius: 5px;
 }
 
 .register-error {
-  background: #ffa2a2;
-  color: #3e3e3e;
+    background: #ffa2a2;
+    color: #3e3e3e;
 }
 
 .register-success {
-  background: #a2ffa2;
-  color: #3e3e3e;
+    background: #a2ffa2;
+    color: #3e3e3e;
 }
diff --git a/ui/src/app/login/components/login/login.component.ts b/ui/src/app/login/components/login/login.component.ts
index 8ad2670a89..e02143d6c3 100644
--- a/ui/src/app/login/components/login/login.component.ts
+++ b/ui/src/app/login/components/login/login.component.ts
@@ -22,15 +22,19 @@ import { LoginService } from '../../services/login.service';
 import { Router } from '@angular/router';
 import { AuthService } from '../../../services/auth.service';
 import { LoginModel } from './login.model';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import {
+    UntypedFormBuilder,
+    UntypedFormControl,
+    UntypedFormGroup,
+    Validators,
+} from '@angular/forms';
 
 @Component({
-    selector: 'login',
+    selector: 'sp-login',
     templateUrl: './login.component.html',
-    styleUrls: ['./login.component.scss']
+    styleUrls: ['./login.component.scss'],
 })
 export class LoginComponent implements OnInit {
-
     parentForm: UntypedFormGroup;
     configReady = false;
     loading: boolean;
@@ -39,46 +43,55 @@ export class LoginComponent implements OnInit {
 
     loginSettings: LoginModel;
 
-    constructor(private loginService: LoginService,
-                private router: Router,
-                private shepherdService: ShepherdService,
-                private authService: AuthService,
-                private fb: UntypedFormBuilder) {
+    constructor(
+        private loginService: LoginService,
+        private router: Router,
+        private shepherdService: ShepherdService,
+        private authService: AuthService,
+        private fb: UntypedFormBuilder,
+    ) {
         this.loading = false;
         this.authenticationFailed = false;
         this.credentials = {};
     }
 
     ngOnInit() {
-      this.loginService.fetchLoginSettings().subscribe(result => {
-        this.loginSettings = result;
-        this.configReady = true;
-        this.parentForm = this.fb.group({});
-        this.parentForm.addControl('username', new UntypedFormControl('', Validators.required));
-        this.parentForm.addControl('password', new UntypedFormControl('', Validators.required));
+        this.loginService.fetchLoginSettings().subscribe(result => {
+            this.loginSettings = result;
+            this.configReady = true;
+            this.parentForm = this.fb.group({});
+            this.parentForm.addControl(
+                'username',
+                new UntypedFormControl('', Validators.required),
+            );
+            this.parentForm.addControl(
+                'password',
+                new UntypedFormControl('', Validators.required),
+            );
 
-        this.parentForm.valueChanges.subscribe(v => {
-          this.credentials.username = v.username;
-          this.credentials.password = v.password;
+            this.parentForm.valueChanges.subscribe(v => {
+                this.credentials.username = v.username;
+                this.credentials.password = v.password;
+            });
         });
-      });
     }
 
-
-
     logIn() {
         this.authenticationFailed = false;
         this.loading = true;
-        this.loginService.login(this.credentials)
-            .subscribe(response => { // success
-                    this.authService.login(response);
-                    this.loading = false;
-                    this.router.navigate(['']);
-                }, response => { // error
-                    this.loading = false;
-                    this.authenticationFailed = true;
-                }
-            );
+        this.loginService.login(this.credentials).subscribe(
+            response => {
+                // success
+                this.authService.login(response);
+                this.loading = false;
+                this.router.navigate(['']);
+            },
+            response => {
+                // error
+                this.loading = false;
+                this.authenticationFailed = true;
+            },
+        );
     }
 
     setSheperdServiceDelay() {
diff --git a/ui/src/app/login/components/login/login.model.ts b/ui/src/app/login/components/login/login.model.ts
index 6e7dcef110..15e2b3b6c4 100644
--- a/ui/src/app/login/components/login/login.model.ts
+++ b/ui/src/app/login/components/login/login.model.ts
@@ -17,6 +17,6 @@
  */
 
 export interface LoginModel {
-  allowSelfRegistration: boolean;
-  allowPasswordRecovery: boolean;
+    allowSelfRegistration: boolean;
+    allowPasswordRecovery: boolean;
 }
diff --git a/ui/src/app/login/components/register/register.component.html b/ui/src/app/login/components/register/register.component.html
index 19495031b9..3a5f40d23a 100644
--- a/ui/src/app/login/components/register/register.component.html
+++ b/ui/src/app/login/components/register/register.component.html
@@ -25,37 +25,61 @@ <h1>Register</h1>
             <div fxLayout="column">
                 <mat-form-field color="accent">
                     <mat-label>Email</mat-label>
-                    <input formControlName="username" fxFlex
-                           matInput>
-                    <mat-error *ngIf="parentForm.controls.username.errors">Must be an email address.</mat-error>
+                    <input formControlName="username" fxFlex matInput />
+                    <mat-error *ngIf="parentForm.controls.username.errors"
+                        >Must be an email address.</mat-error
+                    >
                 </mat-form-field>
                 <mat-form-field color="accent">
                     <mat-label>Initial password</mat-label>
-                    <input formControlName="password" fxFlex
-                           type="password"
-                           matInput
-                           required>
+                    <input
+                        formControlName="password"
+                        fxFlex
+                        type="password"
+                        matInput
+                        required
+                    />
                 </mat-form-field>
                 <mat-form-field color="accent">
                     <mat-label>Repeat password</mat-label>
-                    <input formControlName="repeatPassword" fxFlex
-                           type="password"
-                           matInput
-                           required>
+                    <input
+                        formControlName="repeatPassword"
+                        fxFlex
+                        type="password"
+                        matInput
+                        required
+                    />
                 </mat-form-field>
-                <mat-error *ngIf="parentForm.hasError('notMatching')">Passwords do not match.</mat-error>
-                <div class="form-actions" style="margin-top:20px;">
-                    <button mat-button mat-raised-button color="accent" (click)="registerUser()"
-                            [disabled]="!parentForm.valid" *ngIf="!registrationSuccess">
+                <mat-error *ngIf="parentForm.hasError('notMatching')"
+                    >Passwords do not match.</mat-error
+                >
+                <div class="form-actions" style="margin-top: 20px">
+                    <button
+                        mat-button
+                        mat-raised-button
+                        color="accent"
+                        (click)="registerUser()"
+                        [disabled]="!parentForm.valid"
+                        *ngIf="!registrationSuccess"
+                    >
                         <span>Register</span>
                     </button>
-                    <mat-spinner [mode]="'indeterminate'" color="accent" [diameter]="20"
-                                 *ngIf="registrationInProcess" style="margin-top:10px;"></mat-spinner>
+                    <mat-spinner
+                        [mode]="'indeterminate'"
+                        color="accent"
+                        [diameter]="20"
+                        *ngIf="registrationInProcess"
+                        style="margin-top: 10px"
+                    ></mat-spinner>
                     <div class="md-warn" *ngIf="registrationError">
-                        <h5 class="info-box register-error">{{registrationError}}</h5>
+                        <h5 class="info-box register-error">
+                            {{ registrationError }}
+                        </h5>
                     </div>
                     <div class="md-success" *ngIf="registrationSuccess">
-                        <h5 class="info-box register-success">We've sent out a confirmation mail to this address.</h5>
+                        <h5 class="info-box register-success">
+                            We've sent out a confirmation mail to this address.
+                        </h5>
                     </div>
                     <div class="mt-10">
                         <a [routerLink]="['/login']">Go to login page</a>
diff --git a/ui/src/app/login/components/register/register.component.ts b/ui/src/app/login/components/register/register.component.ts
index 33c88484a8..6be4c59838 100644
--- a/ui/src/app/login/components/register/register.component.ts
+++ b/ui/src/app/login/components/register/register.component.ts
@@ -18,60 +18,71 @@
 
 import { Component, OnInit } from '@angular/core';
 import {
-  UntypedFormBuilder,
-  UntypedFormControl,
-  UntypedFormGroup,
-  Validators
+    UntypedFormBuilder,
+    UntypedFormControl,
+    UntypedFormGroup,
+    Validators,
 } from '@angular/forms';
 import { RegistrationModel } from './registration.model';
 import { LoginService } from '../../services/login.service';
 import { checkPasswords } from '../../utils/check-password';
 
 @Component({
-  selector: 'sp-register-user',
-  templateUrl: './register.component.html',
-  styleUrls: ['../login/login.component.scss']
+    selector: 'sp-register-user',
+    templateUrl: './register.component.html',
+    styleUrls: ['../login/login.component.scss'],
 })
 export class RegisterComponent implements OnInit {
+    parentForm: UntypedFormGroup;
 
-  parentForm: UntypedFormGroup;
+    registrationData: RegistrationModel;
 
-  registrationData: RegistrationModel;
+    registrationInProcess = false;
+    registrationSuccess = false;
+    registrationError: string;
 
-  registrationInProcess = false;
-  registrationSuccess = false;
-  registrationError: string;
+    constructor(
+        private fb: UntypedFormBuilder,
+        private loginService: LoginService,
+    ) {}
 
-  constructor(private fb: UntypedFormBuilder,
-              private loginService: LoginService) {
-  }
+    ngOnInit(): void {
+        this.parentForm = this.fb.group({});
+        this.parentForm.addControl(
+            'username',
+            new UntypedFormControl('', [Validators.required, Validators.email]),
+        );
+        this.parentForm.addControl(
+            'password',
+            new UntypedFormControl('', Validators.required),
+        );
+        this.parentForm.addControl(
+            'repeatPassword',
+            new UntypedFormControl('', Validators.required),
+        );
+        this.parentForm.setValidators(checkPasswords);
 
-  ngOnInit(): void {
-    this.parentForm = this.fb.group({});
-    this.parentForm.addControl('username', new UntypedFormControl('', [Validators.required, Validators.email]));
-    this.parentForm.addControl('password', new UntypedFormControl('', Validators.required));
-    this.parentForm.addControl('repeatPassword', new UntypedFormControl('', Validators.required));
-    this.parentForm.setValidators(checkPasswords);
+        this.parentForm.valueChanges.subscribe(v => {
+            this.registrationData = {
+                username: v.username,
+                password: v.password,
+            };
+        });
+    }
 
-    this.parentForm.valueChanges.subscribe(v => {
-      this.registrationData = {
-        username: v.username,
-        password: v.password
-      };
-    });
-  }
-
-  registerUser() {
-    this.registrationError = undefined;
-    this.registrationInProcess = true;
-    this.loginService.registerUser(this.registrationData).subscribe(response => {
-      this.registrationInProcess = false;
-      this.registrationSuccess = true;
-    }, error => {
-      this.registrationInProcess = false;
-      this.registrationSuccess = false;
-      this.registrationError = error.error.notifications[0].title;
-    });
-  }
+    registerUser() {
+        this.registrationError = undefined;
+        this.registrationInProcess = true;
+        this.loginService.registerUser(this.registrationData).subscribe(
+            response => {
+                this.registrationInProcess = false;
+                this.registrationSuccess = true;
+            },
+            error => {
+                this.registrationInProcess = false;
+                this.registrationSuccess = false;
+                this.registrationError = error.error.notifications[0].title;
+            },
+        );
+    }
 }
-
diff --git a/ui/src/app/login/components/register/registration.model.ts b/ui/src/app/login/components/register/registration.model.ts
index 6f14b16a61..347cf60447 100644
--- a/ui/src/app/login/components/register/registration.model.ts
+++ b/ui/src/app/login/components/register/registration.model.ts
@@ -17,6 +17,6 @@
  */
 
 export interface RegistrationModel {
-  username: string;
-  password: string;
+    username: string;
+    password: string;
 }
diff --git a/ui/src/app/login/components/restore-password/restore-password.component.html b/ui/src/app/login/components/restore-password/restore-password.component.html
index 6aac568449..5d3cf40e55 100644
--- a/ui/src/app/login/components/restore-password/restore-password.component.html
+++ b/ui/src/app/login/components/restore-password/restore-password.component.html
@@ -16,30 +16,49 @@
   ~
   -->
 
-
 <sp-auth-box>
     <div fxFlex="100" fxLayout="column" fxLayoutAlign="center start">
         <h1>Restore password</h1>
-        <h5>Enter your mail address and we'll send you a link to restore your password.</h5>
+        <h5>
+            Enter your mail address and we'll send you a link to restore your
+            password.
+        </h5>
     </div>
     <div fxLayout="column" fxFlex="100">
         <form [formGroup]="parentForm">
             <div fxLayout="column">
                 <mat-form-field color="accent">
                     <mat-label>Email</mat-label>
-                    <input formControlName="username" fxFlex
-                           matInput>
+                    <input formControlName="username" fxFlex matInput />
                 </mat-form-field>
-                <div class="form-actions" style="margin-top:20px;">
-                    <button mat-button mat-raised-button color="accent" (click)="sendRestorePasswordLink()"
-                            [disabled]="!parentForm.valid" *ngIf="!restoreSuccess">
+                <div class="form-actions" style="margin-top: 20px">
+                    <button
+                        mat-button
+                        mat-raised-button
+                        color="accent"
+                        (click)="sendRestorePasswordLink()"
+                        [disabled]="!parentForm.valid"
+                        *ngIf="!restoreSuccess"
+                    >
                         <span>Reset password</span>
                     </button>
-                    <div class="md-warn" *ngIf="restoreCompleted && !restoreSuccess">
-                        <h5 class="info-box register-error">Unknown error - contact your administrator to check the mail settings.</h5>
+                    <div
+                        class="md-warn"
+                        *ngIf="restoreCompleted && !restoreSuccess"
+                    >
+                        <h5 class="info-box register-error">
+                            Unknown error - contact your administrator to check
+                            the mail settings.
+                        </h5>
                     </div>
-                    <div class="md-success" *ngIf="restoreCompleted && restoreSuccess">
-                        <h5 class="info-box register-success">In case this account exists, you'll receive a mail with instructions to restore your password shortly.</h5>
+                    <div
+                        class="md-success"
+                        *ngIf="restoreCompleted && restoreSuccess"
+                    >
+                        <h5 class="info-box register-success">
+                            In case this account exists, you'll receive a mail
+                            with instructions to restore your password shortly.
+                        </h5>
                     </div>
                     <div class="mt-10">
                         <a [routerLink]="['/login']">Go to login page</a>
diff --git a/ui/src/app/login/components/restore-password/restore-password.component.ts b/ui/src/app/login/components/restore-password/restore-password.component.ts
index d820fea0e5..53d2dbe764 100644
--- a/ui/src/app/login/components/restore-password/restore-password.component.ts
+++ b/ui/src/app/login/components/restore-password/restore-password.component.ts
@@ -17,46 +17,54 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import {
+    UntypedFormBuilder,
+    UntypedFormControl,
+    UntypedFormGroup,
+    Validators,
+} from '@angular/forms';
 import { LoginService } from '../../services/login.service';
 
 @Component({
-  selector: 'sp-restore-password',
-  templateUrl: './restore-password.component.html',
-  styleUrls: ['../login/login.component.scss']
+    selector: 'sp-restore-password',
+    templateUrl: './restore-password.component.html',
+    styleUrls: ['../login/login.component.scss'],
 })
 export class RestorePasswordComponent implements OnInit {
+    parentForm: UntypedFormGroup;
+    restoreSuccess = false;
+    restoreCompleted = false;
 
-  parentForm: UntypedFormGroup;
-  restoreSuccess = false;
-  restoreCompleted = false;
+    username: string;
 
-  username: string;
+    constructor(
+        private fb: UntypedFormBuilder,
+        private loginService: LoginService,
+    ) {}
 
-  constructor(private fb: UntypedFormBuilder,
-              private loginService: LoginService) {
-  }
-
-  ngOnInit(): void {
-    this.parentForm = this.fb.group({});
-    this.parentForm.addControl('username', new UntypedFormControl('', Validators.required));
-
-    this.parentForm.valueChanges.subscribe(result => {
-      this.username = result.username;
-    });
-  }
-
-  sendRestorePasswordLink() {
-    this.restoreCompleted = false;
-    this.loginService.sendRestorePasswordLink(this.username).subscribe(response => {
-      this.restoreSuccess = true;
-      this.restoreCompleted = true;
-    }, error => {
-      this.restoreSuccess = false;
-      this.restoreCompleted = true;
-    });
-  }
+    ngOnInit(): void {
+        this.parentForm = this.fb.group({});
+        this.parentForm.addControl(
+            'username',
+            new UntypedFormControl('', Validators.required),
+        );
 
+        this.parentForm.valueChanges.subscribe(result => {
+            this.username = result.username;
+        });
+    }
 
+    sendRestorePasswordLink() {
+        this.restoreCompleted = false;
+        this.loginService.sendRestorePasswordLink(this.username).subscribe(
+            response => {
+                this.restoreSuccess = true;
+                this.restoreCompleted = true;
+            },
+            error => {
+                this.restoreSuccess = false;
+                this.restoreCompleted = true;
+            },
+        );
+    }
 }
-
diff --git a/ui/src/app/login/components/set-new-password/set-new-password.component.html b/ui/src/app/login/components/set-new-password/set-new-password.component.html
index 95b159c17e..425f109784 100644
--- a/ui/src/app/login/components/set-new-password/set-new-password.component.html
+++ b/ui/src/app/login/components/set-new-password/set-new-password.component.html
@@ -25,30 +25,57 @@ <h1>Set new password</h1>
             <div fxLayout="column">
                 <mat-form-field color="accent">
                     <mat-label>New password</mat-label>
-                    <input formControlName="password" fxFlex
-                           type="password"
-                           matInput
-                           required>
+                    <input
+                        formControlName="password"
+                        fxFlex
+                        type="password"
+                        matInput
+                        required
+                    />
                 </mat-form-field>
                 <mat-form-field color="accent">
                     <mat-label>Repeat password</mat-label>
-                    <input formControlName="repeatPassword" fxFlex
-                           type="password"
-                           matInput
-                           required>
+                    <input
+                        formControlName="repeatPassword"
+                        fxFlex
+                        type="password"
+                        matInput
+                        required
+                    />
                 </mat-form-field>
-                <div class="form-actions" style="margin-top:20px;">
-                    <button mat-button mat-raised-button color="accent" (click)="setNewPassword()"
-                            [disabled]="!parentForm.valid" *ngIf="!resetSuccess">
+                <div class="form-actions" style="margin-top: 20px">
+                    <button
+                        mat-button
+                        mat-raised-button
+                        color="accent"
+                        (click)="setNewPassword()"
+                        [disabled]="!parentForm.valid"
+                        *ngIf="!resetSuccess"
+                    >
                         <span>Set password</span>
                     </button>
-                    <mat-spinner [mode]="'indeterminate'" color="accent" [diameter]="20"
-                                 *ngIf="resetInProgress" style="margin-top:10px;"></mat-spinner>
-                    <div class="md-warn" *ngIf="resetPerformed && !resetSuccess">
-                        <h5 class="info-box register-error">There was an error while resetting your password.</h5>
+                    <mat-spinner
+                        [mode]="'indeterminate'"
+                        color="accent"
+                        [diameter]="20"
+                        *ngIf="resetInProgress"
+                        style="margin-top: 10px"
+                    ></mat-spinner>
+                    <div
+                        class="md-warn"
+                        *ngIf="resetPerformed && !resetSuccess"
+                    >
+                        <h5 class="info-box register-error">
+                            There was an error while resetting your password.
+                        </h5>
                     </div>
-                    <div class="md-success" *ngIf="resetPerformed && resetSuccess">
-                        <h5 class="info-box register-success">Password successfully changed.</h5>
+                    <div
+                        class="md-success"
+                        *ngIf="resetPerformed && resetSuccess"
+                    >
+                        <h5 class="info-box register-success">
+                            Password successfully changed.
+                        </h5>
                     </div>
                     <div class="mt-10">
                         <a [routerLink]="['/login']">Go to login page</a>
diff --git a/ui/src/app/login/components/set-new-password/set-new-password.component.ts b/ui/src/app/login/components/set-new-password/set-new-password.component.ts
index 563108a33d..65d7eb15f4 100644
--- a/ui/src/app/login/components/set-new-password/set-new-password.component.ts
+++ b/ui/src/app/login/components/set-new-password/set-new-password.component.ts
@@ -18,75 +18,94 @@
 
 import { Component, OnInit } from '@angular/core';
 import { RestorePasswordService } from '../../services/restore-password.service';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import {
+    UntypedFormBuilder,
+    UntypedFormControl,
+    UntypedFormGroup,
+    Validators,
+} from '@angular/forms';
 import { checkPasswords } from '../../utils/check-password';
 import { RegistrationModel } from '../register/registration.model';
 import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
-  selector: 'sp-set-new-password',
-  templateUrl: './set-new-password.component.html',
-  styleUrls: ['../login/login.component.scss']
+    selector: 'sp-set-new-password',
+    templateUrl: './set-new-password.component.html',
+    styleUrls: ['../login/login.component.scss'],
 })
 export class SetNewPasswordComponent implements OnInit {
+    parentForm: UntypedFormGroup;
+    registrationModel: RegistrationModel;
+    recoveryCode: string;
 
-  parentForm: UntypedFormGroup;
-  registrationModel: RegistrationModel;
-  recoveryCode: string;
+    resetPerformed = false;
+    resetInProgress = false;
+    resetSuccess = false;
 
-  resetPerformed = false;
-  resetInProgress = false;
-  resetSuccess = false;
+    constructor(
+        private fb: UntypedFormBuilder,
+        private restorePasswordService: RestorePasswordService,
+        private route: ActivatedRoute,
+        private router: Router,
+    ) {}
 
-  constructor(private fb: UntypedFormBuilder,
-              private restorePasswordService: RestorePasswordService,
-              private route: ActivatedRoute,
-              private router: Router) {
-
-  }
-
-  ngOnInit(): void {
-    this.route.queryParams.subscribe(params => {
-      this.recoveryCode = params['recoveryCode'];
-      if (this.recoveryCode) {
-        this.restorePasswordService.checkRecoveryCode(this.recoveryCode).subscribe(success => {
-        }, error => {
-          this.navigateToLoginPage();
+    ngOnInit(): void {
+        this.route.queryParams.subscribe(params => {
+            this.recoveryCode = params['recoveryCode'];
+            if (this.recoveryCode) {
+                this.restorePasswordService
+                    .checkRecoveryCode(this.recoveryCode)
+                    .subscribe(
+                        success => {},
+                        error => {
+                            this.navigateToLoginPage();
+                        },
+                    );
+            } else {
+                this.navigateToLoginPage();
+            }
         });
-      } else {
-        this.navigateToLoginPage();
-      }
-    });
-    this.parentForm = this.fb.group({});
-    this.parentForm.addControl('password', new UntypedFormControl('', Validators.required));
-    this.parentForm.addControl('repeatPassword', new UntypedFormControl('', Validators.required));
-    this.parentForm.setValidators(checkPasswords);
-
-    this.parentForm.valueChanges.subscribe(v => {
-      this.registrationModel = {username: '', password: v.password};
-    });
-  }
+        this.parentForm = this.fb.group({});
+        this.parentForm.addControl(
+            'password',
+            new UntypedFormControl('', Validators.required),
+        );
+        this.parentForm.addControl(
+            'repeatPassword',
+            new UntypedFormControl('', Validators.required),
+        );
+        this.parentForm.setValidators(checkPasswords);
 
-  navigateToLoginPage() {
-    this.router.navigate(['/login']);
-  }
-
-  setNewPassword() {
-    this.updateStatus(true, false, false);
-    this.restorePasswordService.restorePassword(this.recoveryCode, this.registrationModel).subscribe(result => {
-      this.updateStatus(false, true, true);
-    }, error => {
-      this.updateStatus(false, false, true);
-    });
-  }
+        this.parentForm.valueChanges.subscribe(v => {
+            this.registrationModel = { username: '', password: v.password };
+        });
+    }
 
-  updateStatus(resetInProgress: boolean,
-               resetSuccess: boolean,
-               resetPerformed: boolean) {
-    this.resetInProgress = resetInProgress;
-    this.resetSuccess = resetSuccess;
-    this.resetPerformed = resetPerformed;
-  }
+    navigateToLoginPage() {
+        this.router.navigate(['/login']);
+    }
 
+    setNewPassword() {
+        this.updateStatus(true, false, false);
+        this.restorePasswordService
+            .restorePassword(this.recoveryCode, this.registrationModel)
+            .subscribe(
+                result => {
+                    this.updateStatus(false, true, true);
+                },
+                error => {
+                    this.updateStatus(false, false, true);
+                },
+            );
+    }
 
+    updateStatus(
+        resetInProgress: boolean,
+        resetSuccess: boolean,
+        resetPerformed: boolean,
+    ) {
+        this.resetInProgress = resetInProgress;
+        this.resetSuccess = resetSuccess;
+        this.resetPerformed = resetPerformed;
+    }
 }
diff --git a/ui/src/app/login/components/setup/setup.component.html b/ui/src/app/login/components/setup/setup.component.html
index c72adf1d09..c9b51af4b2 100644
--- a/ui/src/app/login/components/setup/setup.component.html
+++ b/ui/src/app/login/components/setup/setup.component.html
@@ -16,72 +16,148 @@
   ~
   -->
 
-<div class="full-background setup-container light-mode" fxLayout="row" fxLayoutAlign="center center">
+<div
+    class="full-background setup-container light-mode"
+    fxLayout="row"
+    fxLayoutAlign="center center"
+>
     <div fxFlex="80" fxLayout="column" fxLayoutAlign="center center">
         <div fxFlex="100" fxLayout="column" class="box-shadow-login setup-card">
             <form #setupForm="ngForm" fxFlex="100" fxLayout="column">
                 <div class="setup-header p-20">
-                    <img class="sp-logo" alt="icon" src="../../../../assets/img/sp/logo.png">
-                    <h2 class="text-center">Welcome to {{appConstants.APP_NAME}}!</h2>
-                    <span class="text-center">Create a user and you are ready to go (the initial setup might take some time)</span>
+                    <img
+                        class="sp-logo"
+                        alt="icon"
+                        src="../../../../assets/img/sp/logo.png"
+                    />
+                    <h2 class="text-center">
+                        Welcome to {{ appConstants.APP_NAME }}!
+                    </h2>
+                    <span class="text-center"
+                        >Create a user and you are ready to go (the initial
+                        setup might take some time)</span
+                    >
                 </div>
-                <div fxFlex="100" fxLayout="column" *ngIf="!installationRunning" >
-                        <div class="setup-inline-content">
-                            <h3>Initial User</h3>
-                            <div fxLayout="column">
-                                <mat-form-field fxFlex color="accent">
-                                    <mat-label>Email</mat-label>
-                                    <input [(ngModel)]="setup.adminEmail" matInput type="email" name="email" class="sp"
-                                           required/>
-                                </mat-form-field>
-                                <mat-form-field fxFlex color="accent">
-                                    <mat-label>Password</mat-label>
-                                    <input [(ngModel)]="setup.adminPassword" matInput type="password" name="password"
-                                           class="sp" required/>
-                                </mat-form-field>
-                                <mat-checkbox style="margin-bottom: 10px;" color="accent"
-                                              [(ngModel)]="setup.installPipelineElements" name="install"><span>Also install available data streams, processors and sinks.</span>
-                                </mat-checkbox>
-                            </div>
+                <div
+                    fxFlex="100"
+                    fxLayout="column"
+                    *ngIf="!installationRunning"
+                >
+                    <div class="setup-inline-content">
+                        <h3>Initial User</h3>
+                        <div fxLayout="column">
+                            <mat-form-field fxFlex color="accent">
+                                <mat-label>Email</mat-label>
+                                <input
+                                    [(ngModel)]="setup.adminEmail"
+                                    matInput
+                                    type="email"
+                                    name="email"
+                                    class="sp"
+                                    required
+                                />
+                            </mat-form-field>
+                            <mat-form-field fxFlex color="accent">
+                                <mat-label>Password</mat-label>
+                                <input
+                                    [(ngModel)]="setup.adminPassword"
+                                    matInput
+                                    type="password"
+                                    name="password"
+                                    class="sp"
+                                    required
+                                />
+                            </mat-form-field>
+                            <mat-checkbox
+                                style="margin-bottom: 10px"
+                                color="accent"
+                                [(ngModel)]="setup.installPipelineElements"
+                                name="install"
+                                ><span
+                                    >Also install available data streams,
+                                    processors and sinks.</span
+                                >
+                            </mat-checkbox>
                         </div>
+                    </div>
                 </div>
-                <div *ngIf="installationRunning" #scroll class="installation-status-container">
+                <div
+                    *ngIf="installationRunning"
+                    #scroll
+                    class="installation-status-container"
+                >
                     <div fxLayout="column" class="setup-inline-content">
                         <div *ngFor="let msg of installationResults">
                             <div fxFlex fxLayout="row">
-                                <div fxFlex="80" style="width:50%">
-                                    <h4>{{msg.notifications[0].title}}</h4></div>
-                                <div fxFlex="20" style="width:50%">
-                                    <mat-icon class="md-accent" color="accent" style="width: 36px; height: 36px"
-                                              *ngIf="msg.success">done
+                                <div fxFlex="80" style="width: 50%">
+                                    <h4>{{ msg.notifications[0].title }}</h4>
+                                </div>
+                                <div fxFlex="20" style="width: 50%">
+                                    <mat-icon
+                                        class="md-accent"
+                                        color="accent"
+                                        style="width: 36px; height: 36px"
+                                        *ngIf="msg.success"
+                                        >done
                                     </mat-icon>
-                                    <mat-icon class="md-accent" color="accent" style="width: 36px; height: 36px"
-                                              *ngIf="!(msg.success)">error
+                                    <mat-icon
+                                        class="md-accent"
+                                        color="accent"
+                                        style="width: 36px; height: 36px"
+                                        *ngIf="!msg.success"
+                                        >error
                                     </mat-icon>
                                 </div>
                             </div>
                         </div>
-                        <div fxFlex fxLayout="row" *ngIf="nextTaskTitle != ''">
-                            <div fxFlex="80" style="width:50%"><h4>{{nextTaskTitle}}</h4></div>
-                            <div fxFlex="20" style="width:50%">
-                                <mat-spinner class="md-accent" [mode]="'indeterminate'" [diameter]="20"
-                                             style="margin-top:10px;"
-                                             *ngIf="loading"></mat-spinner>
+                        <div fxFlex fxLayout="row" *ngIf="nextTaskTitle !== ''">
+                            <div fxFlex="80" style="width: 50%">
+                                <h4>{{ nextTaskTitle }}</h4>
+                            </div>
+                            <div fxFlex="20" style="width: 50%">
+                                <mat-spinner
+                                    class="md-accent"
+                                    [mode]="'indeterminate'"
+                                    [diameter]="20"
+                                    style="margin-top: 10px"
+                                    *ngIf="loading"
+                                ></mat-spinner>
                             </div>
                         </div>
                     </div>
                 </div>
                 <mat-divider></mat-divider>
                 <div fxLayout="row" fxLayoutAlign="center center">
-                    <div fxLayout="row" style="margin-top: 10px; margin-bottom: 10px;">
-                        <button mat-button mat-raised-button color="accent"
-                                [disabled]="!(setupForm.valid) || loading || installationFinished"
-                                (click)="configure(0)" *ngIf="!installationFinished">
-                            <span>{{!installationRunning ? 'Install' : 'Installing...'}}</span>
+                    <div
+                        fxLayout="row"
+                        style="margin-top: 10px; margin-bottom: 10px"
+                    >
+                        <button
+                            mat-button
+                            mat-raised-button
+                            color="accent"
+                            [disabled]="
+                                !setupForm.valid ||
+                                loading ||
+                                installationFinished
+                            "
+                            (click)="configure(0)"
+                            *ngIf="!installationFinished"
+                        >
+                            <span>{{
+                                !installationRunning
+                                    ? 'Install'
+                                    : 'Installing...'
+                            }}</span>
                         </button>
-                        <button mat-button mat-raised-button color="accent"
-                                (click)="openLoginPage()" *ngIf="installationFinished"
-                                data-cy="sp-button-finish-installation">
+                        <button
+                            mat-button
+                            mat-raised-button
+                            color="accent"
+                            (click)="openLoginPage()"
+                            *ngIf="installationFinished"
+                            data-cy="sp-button-finish-installation"
+                        >
                             <mat-icon>arrow_forward</mat-icon>
                             <span>Go to login page</span>
                         </button>
@@ -91,4 +167,3 @@ <h4>{{msg.notifications[0].title}}</h4></div>
         </div>
     </div>
 </div>
-
diff --git a/ui/src/app/login/components/setup/setup.component.scss b/ui/src/app/login/components/setup/setup.component.scss
index 2775e5c0cf..bbd0f00b9d 100644
--- a/ui/src/app/login/components/setup/setup.component.scss
+++ b/ui/src/app/login/components/setup/setup.component.scss
@@ -17,54 +17,54 @@
  */
 
 .setup-container {
-  min-height:100vh !important;
-  max-height: 100vh;
+    min-height: 100vh !important;
+    max-height: 100vh;
 }
 
 .setup-card {
-  max-height: 80vh;
-  height: 80vh;
-  width:55%;
-  overflow-y:auto;
+    max-height: 80vh;
+    height: 80vh;
+    width: 55%;
+    overflow-y: auto;
 }
 
 .setup-header {
-  margin-left:auto;
-  margin-right:auto;
-  height:300px;
+    margin-left: auto;
+    margin-right: auto;
+    height: 300px;
 }
 
 .setup-inline-content {
-  width:500px;
-  margin-left:auto;
-  margin-right:auto;
-  padding-bottom: 5%;
+    width: 500px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-bottom: 5%;
 }
 
 .installation-status-container {
-  height:100%;
-  max-height:100%;
-  overflow-y:auto;
+    height: 100%;
+    max-height: 100%;
+    overflow-y: auto;
 }
 
 .sp-logo {
-  display:block;
-  width:300px;
-  margin-left:auto;
-  margin-right:auto;
-  padding-top: 5%;
-  padding-bottom: 5%;
+    display: block;
+    width: 300px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 5%;
+    padding-bottom: 5%;
 }
 
 .text-center {
-  text-align:center;
+    text-align: center;
 }
 
 .p-20 {
-  padding: 20px;
+    padding: 20px;
 }
 
 .plr-20 {
-  padding-left:20px;
-  padding-right:20px;
-}
\ No newline at end of file
+    padding-left: 20px;
+    padding-right: 20px;
+}
diff --git a/ui/src/app/login/components/setup/setup.component.ts b/ui/src/app/login/components/setup/setup.component.ts
index 943b532c91..ef5f477291 100644
--- a/ui/src/app/login/components/setup/setup.component.ts
+++ b/ui/src/app/login/components/setup/setup.component.ts
@@ -23,66 +23,71 @@ import { Router } from '@angular/router';
 import { AppConstants } from '../../../services/app.constants';
 
 @Component({
-  selector: 'setup',
-  templateUrl: './setup.component.html',
-  styleUrls: ['./setup.component.scss']
+    selector: 'sp-setup',
+    templateUrl: './setup.component.html',
+    styleUrls: ['./setup.component.scss'],
 })
 export class SetupComponent {
+    @ViewChild('scroll') private scrollContainer: ElementRef;
 
-  @ViewChild('scroll') private scrollContainer: ElementRef;
+    installationFinished: boolean;
+    installationSuccessful: boolean;
+    installationResults: any;
+    loading: any;
+    setup: any = {
+        adminEmail: '',
+        adminPassword: '',
+        installPipelineElements: true,
+    };
+    installationRunning: any;
+    nextTaskTitle: any;
 
-  installationFinished: boolean;
-  installationSuccessful: boolean;
-  installationResults: any;
-  loading: any;
-  setup: any = {
-    adminEmail: '',
-    adminPassword: '',
-    installPipelineElements: true
-  };
-  installationRunning: any;
-  nextTaskTitle: any;
+    constructor(
+        private loginService: LoginService,
+        private restApi: RestApi,
+        private router: Router,
+        public appConstants: AppConstants,
+    ) {
+        this.installationFinished = false;
+        this.installationSuccessful = false;
+        this.installationResults = [];
+        this.loading = false;
+    }
 
-  constructor(private loginService: LoginService,
-              private restApi: RestApi,
-              private router: Router,
-              public appConstants: AppConstants) {
+    configure(currentInstallationStep) {
+        this.installationRunning = true;
+        this.loading = true;
 
-    this.installationFinished = false;
-    this.installationSuccessful = false;
-    this.installationResults = [];
-    this.loading = false;
-  }
-
-  configure(currentInstallationStep) {
-    this.installationRunning = true;
-    this.loading = true;
-
-    this.loginService.setupInstall(this.setup, currentInstallationStep).subscribe(data => {
-        this.installationResults = this.installationResults.concat(data.statusMessages);
-        this.nextTaskTitle = data.nextTaskTitle;
-        this.scrollContainer.nativeElement.scrollTop = this.scrollContainer.nativeElement.scrollHeight;
-        const nextInstallationStep = currentInstallationStep + 1;
-        if (nextInstallationStep > (data.installationStepCount - 1)) {
-            // eslint-disable-next-line no-sequences
-            this.restApi.configured()
-                .subscribe(res => {
-                    if (res.configured) {
-                        this.installationFinished = true;
-                        this.loading = false;
-                    }
-                    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                }), (() => {
-                this.loading = false;
-                // this.showToast("Fatal error, contact administrator");
+        this.loginService
+            .setupInstall(this.setup, currentInstallationStep)
+            .subscribe(data => {
+                this.installationResults = this.installationResults.concat(
+                    data.statusMessages,
+                );
+                this.nextTaskTitle = data.nextTaskTitle;
+                this.scrollContainer.nativeElement.scrollTop =
+                    this.scrollContainer.nativeElement.scrollHeight;
+                const nextInstallationStep = currentInstallationStep + 1;
+                if (nextInstallationStep > data.installationStepCount - 1) {
+                    // eslint-disable-next-line no-sequences
+                    this.restApi.configured().subscribe(res => {
+                        if (res.configured) {
+                            this.installationFinished = true;
+                            this.loading = false;
+                        }
+                        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                    }),
+                        () => {
+                            this.loading = false;
+                            // this.showToast("Fatal error, contact administrator");
+                        };
+                } else {
+                    this.configure(nextInstallationStep);
+                }
             });
-        } else {
-            this.configure(nextInstallationStep);
-        }
-    });
-  }
+    }
 
-  openLoginPage() {
-    this.router.navigate(['login']);
-  }
+    openLoginPage() {
+        this.router.navigate(['login']);
+    }
 }
diff --git a/ui/src/app/login/components/startup/startup.component.html b/ui/src/app/login/components/startup/startup.component.html
index 2a52c0ac5d..bb8d7b391d 100644
--- a/ui/src/app/login/components/startup/startup.component.html
+++ b/ui/src/app/login/components/startup/startup.component.html
@@ -16,22 +16,46 @@
   ~
   -->
 
-<div class="md-padding sp-fade" fxLayout="row" fxLayoutAlign="center center"
-     style="min-height:100vh !important; background:white;">
-    <div fxFlex="80" fxLayout="column" fxLayoutAlign="center center" style="display:flex;">
-        <img src="../../../../assets/img/sp/logo.png" style="max-width:500px;"/>
+<div
+    class="md-padding sp-fade"
+    fxLayout="row"
+    fxLayoutAlign="center center"
+    style="min-height: 100vh !important; background: white"
+>
+    <div
+        fxFlex="80"
+        fxLayout="column"
+        fxLayoutAlign="center center"
+        style="display: flex"
+    >
+        <img
+            src="../../../../assets/img/sp/logo.png"
+            style="max-width: 500px"
+        />
 
         <div fxFlex="100">
             <h2>Welcome!</h2>
         </div>
         <div fxFlex="100">
-            <h4 style="text-align:center;">Please wait while {{appConstants.APP_NAME}} is starting up.</h4>
-            <h5 style="text-align:center;"><i>On some systems, initial startup might take a few minutes. We'll automatically forward you once {{appConstants.APP_NAME}} is ready.</i></h5>
+            <h4 style="text-align: center">
+                Please wait while {{ appConstants.APP_NAME }} is starting up.
+            </h4>
+            <h5 style="text-align: center">
+                <i
+                    >On some systems, initial startup might take a few minutes.
+                    We'll automatically forward you once
+                    {{ appConstants.APP_NAME }} is ready.</i
+                >
+            </h5>
         </div>
 
         <div fxFlex="100" fxLayoutAlign="center center">
-            <mat-progress-bar class="sp-progress" mode="determinate" [value]="progress" color="accent"></mat-progress-bar>
+            <mat-progress-bar
+                class="sp-progress"
+                mode="determinate"
+                [value]="progress"
+                color="accent"
+            ></mat-progress-bar>
         </div>
     </div>
-
 </div>
diff --git a/ui/src/app/login/components/startup/startup.component.scss b/ui/src/app/login/components/startup/startup.component.scss
index 0b7bb3a41d..9ebbfd0cce 100644
--- a/ui/src/app/login/components/startup/startup.component.scss
+++ b/ui/src/app/login/components/startup/startup.component.scss
@@ -19,9 +19,10 @@
 @import '../../../../scss/_variables.scss';
 
 ::ng-deep .mat-progress-bar-fill::after {
-  background: $sp-color-accent;
+    background: $sp-color-accent;
 }
 
 .sp-progress {
-  margin-top:10px;width:800px;
+    margin-top: 10px;
+    width: 800px;
 }
diff --git a/ui/src/app/login/components/startup/startup.component.ts b/ui/src/app/login/components/startup/startup.component.ts
index d8e8f5c2ea..8a9833dc53 100644
--- a/ui/src/app/login/components/startup/startup.component.ts
+++ b/ui/src/app/login/components/startup/startup.component.ts
@@ -22,37 +22,41 @@ import { Router } from '@angular/router';
 import { AppConstants } from '../../../services/app.constants';
 
 @Component({
-    selector: 'startup',
+    selector: 'sp-startup',
     templateUrl: './startup.component.html',
-    styleUrls: ['./startup.component.scss']
+    styleUrls: ['./startup.component.scss'],
 })
 export class StartupComponent implements OnInit {
-
     progress = 0;
     currentStep = 0;
     maxLoadingTimeInSeconds = 100;
     loadingIntervalInSeconds = 1;
 
-    constructor(private authService: AuthService,
-                private router: Router,
-                public appConstants: AppConstants) {
-    }
+    constructor(
+        private authService: AuthService,
+        private router: Router,
+        public appConstants: AppConstants,
+    ) {}
 
     ngOnInit() {
         this.checkStatus();
     }
 
     checkStatus() {
-        this.authService.checkConfiguration().subscribe((configured) => {
-            this.progress = 100;
-            const target: string = configured ? 'login' : 'setup';
-            this.router.navigate([target]);
-        }, () => {
-            this.currentStep += this.loadingIntervalInSeconds;
-            this.progress = (this.currentStep / this.maxLoadingTimeInSeconds) * 100;
-            setTimeout(() => {
-                this.checkStatus();
-            }, this.loadingIntervalInSeconds * 1000);
-        });
+        this.authService.checkConfiguration().subscribe(
+            configured => {
+                this.progress = 100;
+                const target: string = configured ? 'login' : 'setup';
+                this.router.navigate([target]);
+            },
+            () => {
+                this.currentStep += this.loadingIntervalInSeconds;
+                this.progress =
+                    (this.currentStep / this.maxLoadingTimeInSeconds) * 100;
+                setTimeout(() => {
+                    this.checkStatus();
+                }, this.loadingIntervalInSeconds * 1000);
+            },
+        );
     }
 }
diff --git a/ui/src/app/login/login.module.ts b/ui/src/app/login/login.module.ts
index f6808c884a..8dc70548f9 100644
--- a/ui/src/app/login/login.module.ts
+++ b/ui/src/app/login/login.module.ts
@@ -61,7 +61,7 @@ import { PlatformServicesModule } from '@streampipes/platform-services';
         MatFormFieldModule,
         ReactiveFormsModule,
         MatProgressBarModule,
-        PlatformServicesModule
+        PlatformServicesModule,
     ],
     declarations: [
         ActivateAccountComponent,
@@ -73,11 +73,6 @@ import { PlatformServicesModule } from '@streampipes/platform-services';
         SetupComponent,
         StartupComponent,
     ],
-    providers: [
-        AccountActivationService,
-        LoginService,
-        RestorePasswordService
-    ]
+    providers: [AccountActivationService, LoginService, RestorePasswordService],
 })
-export class LoginModule {
-}
+export class LoginModule {}
diff --git a/ui/src/app/login/services/account-activation.service.ts b/ui/src/app/login/services/account-activation.service.ts
index 0f228b1c27..9346154e9e 100644
--- a/ui/src/app/login/services/account-activation.service.ts
+++ b/ui/src/app/login/services/account-activation.service.ts
@@ -23,14 +23,14 @@ import { Observable } from 'rxjs';
 
 @Injectable()
 export class AccountActivationService {
+    constructor(
+        private http: HttpClient,
+        private platformServicesCommons: PlatformServicesCommons,
+    ) {}
 
-  constructor(private http: HttpClient,
-              private platformServicesCommons: PlatformServicesCommons) {
-
-  }
-
-  activateAccount(activationToken: string): Observable<any> {
-    return this.http.get(`${this.platformServicesCommons.apiBasePath}/activate-account/${activationToken}`);
-  }
-
+    activateAccount(activationToken: string): Observable<any> {
+        return this.http.get(
+            `${this.platformServicesCommons.apiBasePath}/activate-account/${activationToken}`,
+        );
+    }
 }
diff --git a/ui/src/app/login/services/login.service.ts b/ui/src/app/login/services/login.service.ts
index 174ec377fa..b868e9f62d 100644
--- a/ui/src/app/login/services/login.service.ts
+++ b/ui/src/app/login/services/login.service.ts
@@ -26,36 +26,53 @@ import { RegistrationModel } from '../components/register/registration.model';
 
 @Injectable()
 export class LoginService {
+    constructor(
+        private http: HttpClient,
+        private platformServicesCommons: PlatformServicesCommons,
+    ) {}
 
-  constructor(private http: HttpClient,
-              private platformServicesCommons: PlatformServicesCommons) {
-  }
+    fetchLoginSettings(): Observable<LoginModel> {
+        return this.http
+            .get(`${this.platformServicesCommons.apiBasePath}/auth/settings`)
+            .pipe(map(res => res as LoginModel));
+    }
 
-  fetchLoginSettings(): Observable<LoginModel> {
-    return this.http.get(`${this.platformServicesCommons.apiBasePath}/auth/settings`).pipe(map(res => res as LoginModel));
-  }
+    login(credentials): Observable<any> {
+        return this.http.post(
+            this.platformServicesCommons.apiBasePath + '/auth/login',
+            credentials,
+        );
+    }
 
-  login(credentials): Observable<any> {
-    return this.http.post(this.platformServicesCommons.apiBasePath + '/auth/login', credentials);
-  }
+    renewToken(): Observable<any> {
+        return this.http.get(
+            this.platformServicesCommons.apiBasePath + '/auth/token/renew',
+            {
+                headers: { ignoreLoadingBar: '' },
+            },
+        );
+    }
 
-  renewToken(): Observable<any> {
-    return this.http.get(this.platformServicesCommons.apiBasePath + '/auth/token/renew', {
-      headers: { ignoreLoadingBar: '' }
-    });
-  }
-
-  setupInstall(setup, installationStep): Observable<any> {
-    return this.http.post(this.platformServicesCommons.apiBasePath + '/setup/install/' + installationStep, setup);
-  }
-
-  registerUser(registrationData: RegistrationModel) {
-    return this.http.post(this.platformServicesCommons.apiBasePath + '/auth/register', registrationData);
-  }
-
-  sendRestorePasswordLink(email: string): Observable<any> {
-    return this.http.post(`${this.platformServicesCommons.apiBasePath}/auth/restore/${email}`, {});
-  }
+    setupInstall(setup, installationStep): Observable<any> {
+        return this.http.post(
+            this.platformServicesCommons.apiBasePath +
+                '/setup/install/' +
+                installationStep,
+            setup,
+        );
+    }
 
+    registerUser(registrationData: RegistrationModel) {
+        return this.http.post(
+            this.platformServicesCommons.apiBasePath + '/auth/register',
+            registrationData,
+        );
+    }
 
+    sendRestorePasswordLink(email: string): Observable<any> {
+        return this.http.post(
+            `${this.platformServicesCommons.apiBasePath}/auth/restore/${email}`,
+            {},
+        );
+    }
 }
diff --git a/ui/src/app/login/services/restore-password.service.ts b/ui/src/app/login/services/restore-password.service.ts
index 7010b91f6a..de45d71fd7 100644
--- a/ui/src/app/login/services/restore-password.service.ts
+++ b/ui/src/app/login/services/restore-password.service.ts
@@ -24,18 +24,24 @@ import { RegistrationModel } from '../components/register/registration.model';
 
 @Injectable()
 export class RestorePasswordService {
+    constructor(
+        private http: HttpClient,
+        private platformServicesCommons: PlatformServicesCommons,
+    ) {}
 
-  constructor(private http: HttpClient,
-              private platformServicesCommons: PlatformServicesCommons) {
+    checkRecoveryCode(recoveryCode: string): Observable<any> {
+        return this.http.get(
+            `${this.platformServicesCommons.apiBasePath}/restore-password/${recoveryCode}`,
+        );
+    }
 
-  }
-
-  checkRecoveryCode(recoveryCode: string): Observable<any> {
-    return this.http.get(`${this.platformServicesCommons.apiBasePath}/restore-password/${recoveryCode}`);
-  }
-
-  restorePassword(recoveryCode: string,
-                  registrationModel: RegistrationModel): Observable<any> {
-    return this.http.post(`${this.platformServicesCommons.apiBasePath}/restore-password/${recoveryCode}`, registrationModel);
-  }
+    restorePassword(
+        recoveryCode: string,
+        registrationModel: RegistrationModel,
+    ): Observable<any> {
+        return this.http.post(
+            `${this.platformServicesCommons.apiBasePath}/restore-password/${recoveryCode}`,
+            registrationModel,
+        );
+    }
 }
diff --git a/ui/src/app/login/utils/check-password.ts b/ui/src/app/login/utils/check-password.ts
index 41ae62c9b3..af8b232a38 100644
--- a/ui/src/app/login/utils/check-password.ts
+++ b/ui/src/app/login/utils/check-password.ts
@@ -18,12 +18,14 @@
 
 import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
 
-export let checkPasswords: ValidatorFn = (group: AbstractControl):  ValidationErrors | null => {
-  const pass = group.get('password');
-  const confirmPass = group.get('repeatPassword');
+export let checkPasswords: ValidatorFn = (
+    group: AbstractControl,
+): ValidationErrors | null => {
+    const pass = group.get('password');
+    const confirmPass = group.get('repeatPassword');
 
-  if (!pass || !confirmPass) {
-    return null;
-  }
-  return pass.value === confirmPass.value ? null : { notMatching: true };
+    if (!pass || !confirmPass) {
+        return null;
+    }
+    return pass.value === confirmPass.value ? null : { notMatching: true };
 };