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 <[email protected]> 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 }; };
