adding a loading message to login page in angular

Question

I have a problem trying to display a loading message linked to the server response, I managed to do it right for the logout method but I don't know how to do it for the login. Here is the code for my account service.

login(email: string, password: string) {
        return this.http
            .post<User>(
                environment.apiUrl + '/auth/login',
                {
                    email: email,
                    password: password
                })
            .pipe(map(user => {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('scrb-user', JSON.stringify(user));
                this.userSubject.next(user);
                return user;
            }));
    }

    signup(user: User) {
        return this.http
            .post<User>(
                environment.apiUrl + '/auth/signup',
                user
            );
    }

    

    logout() {
        this.message
            .loading('Action in progress', { nzDuration: 2000 })
            .onClose!.pipe(
                concatMap(() => this.message.success('Loading finished', { nzDuration: 2000 }).onClose!),
                // concatMap(() => this.message.info('Loading finished is finished', { nzDuration: 2000 }).onClose!)
            )
            .subscribe(() => {
                localStorage.removeItem('scrb-user');
                this.userSubject.next(null);
                this.router.navigate(['/account/login']);
                console.log('All completed!');
            });
    }
}

Filippo Brigati · Accepted Answer · 2022-03-28 13:42:21Z

1

You can use a variable. Example:

login.component.html

      //...Your form
      <button type="submit" class="btn btn-primary shadow-none" #button>
        <span *ngIf="!this.isLoading">Login</span>
        //Bootstrap Spinner
        <div class="spinner-border spinner-border-sm text-light" role="status" *ngIf="this.isLoading">
        </div>
      </button>

login.component.ts

  sendLogin(form: NgForm) {
    this.isLoading = true;
    this.loginService
      //Your Login Method (I saved it in other file)
      .postLogin(form.value.username, form.value.password)
      .subscribe(
      (data) => {
         this.isLoading = false;
         this.router.navigateByUrl('index');
       },
       (err) => {
         this.isLoading = false;
         alert(err);
       })
       form.reset();
    }
  );

}

answered Mar 28, 2022 at 13:42

Filippo Brigati

1098 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

adding a loading message to login page in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related