You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by bo...@apache.org on 2023/01/21 10:06:57 UTC
[streampipes] branch dev updated: [#877] apply formatting and linting to login module (#1134)
This is an automated email from the ASF dual-hosted git repository.
bossenti pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 4db932538 [#877] apply formatting and linting to login module (#1134)
4db932538 is described below
commit 4db9325386d9fd361de723843ac976742feb9bc8
Author: Tim <50...@users.noreply.github.com>
AuthorDate: Sat Jan 21 11:06:52 2023 +0100
[#877] apply formatting and linting to login module (#1134)
---
ui/.eslintignore | 1 -
ui/.prettierignore | 1 -
.../activate-account.component.html | 13 +-
.../activate-account/activate-account.component.ts | 61 ++++----
.../components/auth-box/auth-box.component.ts | 23 +--
.../login/components/login/login.component.html | 82 ++++++----
.../login/components/login/login.component.scss | 20 +--
.../app/login/components/login/login.component.ts | 75 ++++++----
ui/src/app/login/components/login/login.model.ts | 4 +-
.../components/register/register.component.html | 62 +++++---
.../components/register/register.component.ts | 95 ++++++------
.../components/register/registration.model.ts | 4 +-
.../restore-password.component.html | 41 +++--
.../restore-password/restore-password.component.ts | 72 +++++----
.../set-new-password.component.html | 61 +++++---
.../set-new-password/set-new-password.component.ts | 131 +++++++++-------
.../login/components/setup/setup.component.html | 165 +++++++++++++++------
.../login/components/setup/setup.component.scss | 54 +++----
.../app/login/components/setup/setup.component.ts | 113 +++++++-------
.../components/startup/startup.component.html | 40 ++++-
.../components/startup/startup.component.scss | 5 +-
.../login/components/startup/startup.component.ts | 40 ++---
ui/src/app/login/login.module.ts | 11 +-
.../login/services/account-activation.service.ts | 18 +--
ui/src/app/login/services/login.service.ts | 69 +++++----
.../app/login/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 863fdd210..b2ad5adce 100644
--- a/ui/.eslintignore
+++ b/ui/.eslintignore
@@ -27,4 +27,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 56eb2ea5a..b82be30b9 100644
--- a/ui/.prettierignore
+++ b/ui/.prettierignore
@@ -27,4 +27,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 1dfef7fcd..b9d61e895 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 @@
<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 660866127..8bc81272f 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 6ad5ad11b..c0b721092 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 afc06d053..9dbe7a311 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 44908d5c9..3b4edba73 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 8ad2670a8..e02143d6c 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 6e7dcef11..15e2b3b6c 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 19495031b..3a5f40d23 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 @@
<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 33c88484a..6be4c5983 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 6f14b16a6..347cf6044 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 6aac56844..5d3cf40e5 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 d820fea0e..53d2dbe76 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 95b159c17..425f10978 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 @@
<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 563108a33..65d7eb15f 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 c72adf1d0..c9b51af4b 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 @@
</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 2775e5c0c..bbd0f00b9 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 943b532c9..ef5f47729 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 2a52c0ac5..bb8d7b391 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 0b7bb3a41..9ebbfd0cc 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 d8e8f5c2e..8a9833dc5 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 f6808c884..8dc70548f 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 0f228b1c2..9346154e9 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 174ec377f..b868e9f62 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 7010b91f6..de45d71fd 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 41ae62c9b..af8b232a3 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 };
};