Update Error Handling in `VerificationForm` Component

[aamirxshaikh]

We need to refactor the VerificationCode Controller to remove try-catch blocks and rely on the GlobalExceptionHandler for error handling. This change will improve code consistency and centralize our error handling logic. Additionally, we need to update the corresponding unit tests and make changes to the UI to align with the new error response format.

This issue involves updating the VerificationForm component to handle error messages with the new key errorMessage and adjusting TypeScript interfaces accordingly.

The global exception handler will return errors in the ErrorResponseDto format:

{
  "apiPath": "uri=/api/verification/verify",
  "httpStatusCode": 409,
  "errorMessage": "VerificationCode with code 080906 has already been used",
  "errorTimestamp": "2024-08-14T22:11:52.451261424"
}

Frontend Changes

1. Update TypeScript Interfaces:

   • Rename the error field to errorMessage in the ErrorResponse and VerificationStatusErrorResponse interfaces.

2. Update Error Handling in VerificationForm:

   • For error messages in handleSubmit() and checkVerificationStatus(), ensure that error handling checks for errorMessage instead of error.
   • Update the code to use errorMessage when setting error states:

     if (responseData.errorMessage) {
     setError(responseData.errorMessage);
     }

Additional Notes

• Make sure to test all changes thoroughly to confirm that error handling is working correctly both on the backend and frontend.
• This issue is related to backend modifications described in #67 (Refactor Exception Handling in VerificationCodeController).