fix: localize API error messages

frontend/app/javascript/v3/api/apiClient.js

@@ -1,6 +1,19 @@
 import axios from 'axios';
+import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
 
 const { apiHost = '' } = window.chatwootConfig || {};
 const wootAPI = axios.create({ baseURL: `${apiHost}/`, withCredentials: true });
 
+if (wootAPI?.interceptors?.response) {
+  wootAPI.interceptors.response.use(
+    response => response,
+    error => {
+      if (error && typeof error === 'object') {
+        error.message = parseAPIErrorResponse(error);
+      }
+      return Promise.reject(error);
+    }
+  );
+}
+
 export default wootAPI;

frontend/app/javascript/v3/views/login/Index.vue

@@ -2,23 +2,17 @@
 // utils and composables
 import { login } from '../../api/auth';
 import { useAlert } from 'dashboard/composables';
+import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
 import { required, email } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { SESSION_STORAGE_KEYS } from 'dashboard/constants/sessionStorage';
 import SessionStorage from 'shared/helpers/sessionStorage';
 
 // components
-import SimpleDivider from '../../components/Divider/SimpleDivider.vue';
 import FormInput from '../../components/Form/Input.vue';
 import Spinner from 'shared/components/Spinner.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
-const ERROR_MESSAGES = {
-  'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
-  'business-account-only': 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY',
-};
-
 const IMPERSONATION_URL_SEARCH_KEY = 'impersonation';
 const USER_NOT_CONFIRMED_ERROR_CODE = 'user_not_confirmed';
 
@@ -27,8 +21,6 @@ export default {
     FormInput,
     Spinner,
     NextButton,
-    SimpleDivider,
-    Icon,
   },
   props: {
     ssoAuthToken: { type: String, default: '' },
@@ -91,7 +83,7 @@ export default {
     },
     showAlertMessage(message) {
       this.loginApi.showLoading = false;
-      this.loginApi.message = message;
+      this.loginApi.message = parseAPIErrorResponse(message);
       useAlert(this.loginApi.message);
     },
     handleImpersonation() {
@@ -134,9 +126,13 @@ export default {
             window.location = '/app/login';
           }
           this.loginApi.hasErrored = true;
-          this.showAlertMessage(
-            response?.message || this.$t('LOGIN.API.UNAUTH')
-          );
+          let errorMessage = this.$t('LOGIN.API.ERROR_MESSAGE');
+          if (response?.response?.status === 401) {
+            errorMessage = this.$t('LOGIN.API.UNAUTH');
+          } else if (response) {
+            errorMessage = parseAPIErrorResponse(response);
+          }
+          this.showAlertMessage(errorMessage);
         });
     },
     submitFormLogin() {
@@ -157,9 +153,8 @@ export default {
   >
     <!-- Regular Login Section -->
     <section
-      class="bg-white shadow sm:mx-auto mt-11 sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
+      class="bg-white shadow sm:mx-auto mb-8 mt-15 sm:w-full sm:max-w-lg dark:bg-n-solid-2 p-11 sm:shadow-lg sm:rounded-lg"
       :class="{
-        'mb-8 mt-15': true,
         'animate-wiggle': loginApi.hasErrored,
       }"
     >