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

// Function to handle form submission
function LoginSubmitForm() {
 // Validate inputs before making API call
 if (validateInputs()) {
     const userId = userIdInput.value;
     const password = passwordInput.value;




     // Call the login API
     apiService.login(userId, password)
         .then(response => {
             if (response.status == 'connected') {
                 // Store user details and access token in local storage
                 localStorageService.setItem('userDetail',            JSON.stringify(response.user));
                 localStorageService.setItem('accessToken', response.accessToken);
                 // Redirect to customer page on successful login
                 window.location.href = '/app/customers/customer.html';
             } else {
                 // Display error message and toast on login failure
                 console.log(response.message);
                 showToast(response.message, 'danger');
             }
         })
         .catch(error => {
             // Display error toast on API call failure
             showToast(error.message, 'danger');
         });
 }
}

Code Description

The function LoginSubmitForm, facilitates secure user authentication. Upon submission, it triggers an API call to verify credentials, enhancing login security and enabling seamless integration with backend authentication services.

Input Validation

It begins by calling the validateInputs function to ensure that the required user inputs (presumably a userId and password) are valid.

API Call

• If the inputs are validated successfully, it retrieves the user ID and password from the respective input fields (userIdInput and passwordInput).

• It then invokes the apiService.login method, passing the user ID and password as parameters. This method is assumed to make an asynchronous API call to a login endpoint.

Handling API Response

Upon receiving the API response, it checks if the status in the response is 'connected'. If it is, the login is considered successful.

In the case of a successful login:

• User details and an access token are stored in the local storage using localStorageService.

• The page is redirected to '/app/customers/customer.html'.

• If the login is not successful,

• It logs the error message received from the API response and displays it as a toast with a danger alert.

Error Handling

If there's an error during the API call, it catches the error and displays an error toast.