Login API

A successful login process involves several steps, including front-end user interface (UI) interactions and back-end API calls.

User Input Credentials

• The user provides their login credentials, typically a combination of a username/email and password, in the login form on the UI.

Login Screen

Send Login Request (API Call)

• Initiate an API call to the server to authenticate the user's credentials. This typically involves sending a POST request to a login endpoint with the user's credentials in the request body.

• Request URL: https://api.eng-dev-1.trilloapps.com/ajaxLogin

Payload:

Login Payload

Preview:

Login Preview

Receive an Access Token (API Call)

• If the credentials are valid, generate an access token. The server responds with the access token, a secure and unique string used to authenticate subsequent API requests.

Login Code Snippet

sendLoginRequest() {
   if (this.loginForm.valid) {
     this.bLoader = true;
      this.authservice.AuthService_Login({
       j_username: this.loginForm.value.j_username,
       j_password: this.loginForm.value.j_password,
     }).subscribe({
       next: (result) => {
         if (result.status == 'connected') {
           localStorage.setItem("lsSampleAppAccessToken", JSON.stringify(result.accessToken));
           localStorage.setItem("userDetail", JSON.stringify(result.user));
           this.router.navigateByUrl('/app/customers');
         } else {
           console.error("SendLoginRequest: Error ===>>", result);
         }
       },
       error: (error) => {
         this.bLoader = false;
         console.error("SendLoginRequest: ERROR ===>>", error);
         this.displayAlertMessage('Bad Credentials!', 'error', 'danger');
       },
       complete: () => {
         // This block will be executed when the observable is completed
         this.bLoader = false;
       }
     });
   } else {
     this.loginForm.markAllAsTouched();
   }
 }

Code Description

The sendLoginRequest function is responsible for initiating a login request based on the validity of the login form. Here's an overview of its functionality:

Form Validation

• Check if the login form (this.loginForm) is valid.

Loader Flag

• Sets the bLoader flag to true to indicate that a login request is in progress.

API Request

• Calls the AuthService_Login method of the authservice service, passing the login credentials (j_username and j_password) obtained from the form.

• Subscribes to the observable returned by the login service.

Handling API Response

In the next block:

• Check if the response status is 'connected'. If true:

• Stores the access token and user details in the local storage.

• Navigate to the '/app/customers' route using the Angular router (this. router).

• If the response status is not 'connected', log the result as an error.

Error Handling

In the error block:

• Sets the bLoader flag to false to indicate the completion of the login request.

• Logs the error.

• Displays an alert message with the text 'Bad Credentials!' using the displayAlertMessage method.

Completion

In the complete block:

• Sets the bLoader flag to false to ensure it is updated regardless of success or failure.

• Form Marking:

  If the login form is not valid, mark all form controls as touched.