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/20 19:31:22 UTC
[streampipes] branch chore/formatting-linting-login created (now a21d69765)
This is an automated email from the ASF dual-hosted git repository.
bossenti pushed a change to branch chore/formatting-linting-login
in repository https://gitbox.apache.org/repos/asf/streampipes.git
at a21d69765 [#877] apply formatting and linting to login module
This branch includes the following new commits:
new a21d69765 [#877] apply formatting and linting to login module
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[streampipes] 01/01: [#877] apply formatting and linting to login module
Posted by bo...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
bossenti pushed a commit to branch chore/formatting-linting-login
in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit a21d69765ba59a8d83e82cc392524ba4249b1a55
Author: bossenti <bo...@posteo.de>
AuthorDate: Fri Jan 20 20:26:28 2023 +0100
[#877] apply formatting and linting to login module
---
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 c980966c1..40d6f5386 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 3930e91ee..3ac17556e 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 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 };
};