Merge pull request #14704 from vvlladd28/bug/login-pages/loading

Fixed loading state in login pages

ui-ngx/src/app/modules/login/pages/login/create-password.component.ts

@@ -20,6 +20,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { UserPasswordPolicy } from '@shared/models/settings.models';
 import { passwordsMatchValidator, passwordStrengthValidator } from '@shared/models/password.models';
+import { finalize } from 'rxjs/operators';
 
 @Component({
   selector: 'tb-create-password',
@@ -60,11 +61,10 @@ export class CreatePasswordComponent {
     if (this.createPassword.invalid) {
       this.createPassword.markAllAsTouched();
     } else {
-      this.isLoading = true
-      this.authService.activate(this.activateToken, this.createPassword.get('newPassword').value, true)
-        .subscribe({
-          error: () => {this.isLoading = false;}
-        });
+      this.isLoading = true;
+      this.authService.activate(this.activateToken, this.createPassword.get('newPassword').value, true).pipe(
+        finalize(() => {this.isLoading = false;})
+      ).subscribe(() => {});
     }
   }
 }

ui-ngx/src/app/modules/login/pages/login/login.component.html

@@ -22,9 +22,9 @@
         <div class="flex flex-col items-center justify-start" style="padding: 16px 0;">
           <tb-logo link="https://thingsboard.io" target="_blank" class="login-logo"></tb-logo>
         </div>
-        <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading">
+        <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading || (isLoading$ | async)">
         </mat-progress-bar>
-        <span style="height: 4px;" *ngIf="!isLoading"></span>
+        <span style="height: 4px;" *ngIf="!isLoading && !(isLoading$ | async)"></span>
         <span tb-toast style="height: 20px;"></span>
         <div class="flex flex-col">
           @if(oauth2Clients?.length) {
@@ -70,7 +70,7 @@
             <tb-toggle-password matSuffix></tb-toggle-password>
             <mat-icon matPrefix>lock</mat-icon>
           </mat-form-field>
-          <button mat-flat-button color="accent" [disabled]="isLoading"
+          <button mat-flat-button color="accent" [disabled]="isLoading || (isLoading$ | async)"
                   class="tb-action-button" type="submit">{{ 'login.sign-in' | translate }}</button>
           <div class="forgot-password flex items-center justify-end gap-5">
             <button class="tb-reset-password" mat-button type="button" routerLink="/login/resetPasswordRequest">

ui-ngx/src/app/modules/login/pages/login/login.component.ts

@@ -22,13 +22,15 @@ import { Constants } from '@shared/models/constants';
 import { Router } from '@angular/router';
 import { OAuth2ClientLoginInfo } from '@shared/models/oauth2.models';
 import { validateEmail } from '@app/core/utils';
+import { PageComponent } from '@shared/components/page.component';
+import { finalize } from 'rxjs/operators';
 
 @Component({
   selector: 'tb-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
 })
-export class LoginComponent implements OnInit {
+export class LoginComponent extends PageComponent implements OnInit {
 
   passwordViolation = false;
   isLoading = false;
@@ -42,6 +44,7 @@ export class LoginComponent implements OnInit {
   constructor(private authService: AuthService,
               public fb: UntypedFormBuilder,
               private router: Router) {
+    super();
   }
 
   ngOnInit() {
@@ -51,10 +54,10 @@ export class LoginComponent implements OnInit {
   login(): void {
     if (this.loginFormGroup.valid) {
       this.isLoading = true;
-      this.authService.login(this.loginFormGroup.value).subscribe({
-        next: () => {},
+      this.authService.login(this.loginFormGroup.value).pipe(
+        finalize(() => {this.isLoading = false;})
+      ).subscribe({
         error: (error: HttpErrorResponse) => {
-          this.isLoading = false;
           if (error && error.error && error.error.errorCode) {
             if (error.error.errorCode === Constants.serverErrorCode.credentialsExpired) {
               this.router.navigateByUrl(`login/resetExpiredPassword?resetToken=${error.error.resetToken}`);

ui-ngx/src/app/modules/login/pages/login/reset-password.component.ts

@@ -20,6 +20,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { UserPasswordPolicy } from '@shared/models/settings.models';
 import { passwordsMatchValidator, passwordStrengthValidator } from '@shared/models/password.models';
+import { finalize } from 'rxjs/operators';
 
 @Component({
   selector: 'tb-reset-password',
@@ -64,10 +65,9 @@ export class ResetPasswordComponent {
       this.resetPassword.markAllAsTouched();
     } else {
       this.isLoading = true;
-      this.authService.resetPassword(this.resetToken, this.resetPassword.get('newPassword').value).subscribe({
-        next: () => this.router.navigateByUrl('login'),
-        error: () => {this.isLoading = false;}
-      });
+      this.authService.resetPassword(this.resetToken, this.resetPassword.get('newPassword').value).pipe(
+        finalize(() => {this.isLoading = false})
+      ).subscribe(() => this.router.navigateByUrl('login'));
     }
   }
 }