Login

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

Below is the login code snippet.

const handleSubmit = async (e) =>{
   e.preventDefault();
  const validationErrors = {};
   if (!username.trim()) {
    validationErrors.username = 'Username is required';
   }
   if (!password.trim()) {
     validationErrors.password = 'Password is required';
   }
   if (Object.keys(validationErrors).length === 0) {
     // Form is valid, proceed with submission
     // You can add your login logic here
     console.log('Form submitted');
     try{
       const response = await fetch('https://api.eng-dev-1.trilloapps.com/ajaxLogin', {
         method: 'POST',
         headers: {
           'Accept':'*/*',
           'x-app-name':'main',
           'x-org-name':'cloud',
           'content-type':'application/json',
         },
         body: JSON.stringify({
           j_username: username,
           j_password: password
         })
       });
       const data = await response.json();
      
       if(data.status === 'connected'){
         window.location.href=('/customers');
         localStorage.setItem('accessToken',data.accessToken);
         localStorage.setItem('userDetails',JSON.stringify(data.user));
       }
       else{
         toast.error(`${data.message}`, {
           position: 'top-right',
           autoClose: 5000,
           hideProgressBar: false,
           closeOnClick: true,
           pauseOnHover: true,
           draggable: true,
         });
       }
       
     }
     catch(error)
     {
       toast.error(`API call failed: ${error.message}`, {
         position: 'top-right',
         autoClose: 5000,
         hideProgressBar: false,
         closeOnClick: true,
         pauseOnHover: true,
         draggable: true,
       });
       console.error('Error during login:', error);
     }
   } else {
     // Update state with validation errors
     setErrors(validationErrors);
   }
 
 }

Code Description

This function, handleSubmit, handles the submission of a login form. Here's

a breakdown of its functionality:

Prevent Default Behavior

• Calls e.preventDefault() to prevent the default form submission behavior.

Form Validation

• Check if the username and password values are empty.

• If either field is empty, add an error message to the validationErrors object.

Form Submission

• If there are no validation errors (Object.keys(validationErrors).length === 0):

Sends a POST request to the 'https://api.eng-dev-1.trilloapps.com/ajaxLogin' endpoint using the Fetch API.

• Includes necessary headers and the username and password in the request body.

• Awaits the response and parses it as JSON.

Response Handling

• Check if the response status is 'connected.'

If true:

Redirects to '/customers'

Stores the accessToken and user details in localStorage.

If false:

• Displays an error toast message with the message from the API response.

Error Handling

• Catches errors that occur during the API call.

• Displays an error toast message with information about the failure.

• Logs the error to the console.

Validation Errors Handling

• If there are validation errors:

Sets the validation errors using setErrors(validationErrors).