fix: groupsio error messages upon connection [CM-2276]

Return proper error code & message for :
- Invalid email/password
- 2FA required
- Invalid 2FA

Author: mbani01

backend/src/services/integrationService.ts

@@ -1438,11 +1438,21 @@ export default class IntegrationService {
         groupsioCookie: cookie,
         groupsioCookieExpiry: cookieExpiry,
       }
-    } catch (err) {
-      if ('two_factor_required' in response.data) {
-        throw new Error400(this.options.language, 'errors.groupsio.twoFactorRequired')
+    } catch (error) {
+      this.options.log.error(error.response.data, 'Error while login into GroupsIo!')
+      const errorType = String(error.response.data.type)
+      const isTwoFactorRequired =
+        errorType.includes('two_factor_required') || errorType.includes('2nd_factor_required')
+      if (isTwoFactorRequired) {
+        throw new Error400(this.options.language, 'Two-factor authentication code is required')
       }
-      throw new Error400(this.options.language, 'errors.groupsio.invalidCredentials')
+      const invalidCredentials =
+        errorType.includes('invalid password') || errorType.includes('invalid email')
+      if (invalidCredentials) throw new Error400(this.options.language, 'Invalid email or password')
+      const invalid2FA = errorType.includes('2nd_factor_wrong')
+      if (invalid2FA)
+        throw new Error400(this.options.language, 'Invalid Two-factor authentication code')
+      throw error
     }
   }
 

frontend/src/config/integrations/groupsio/components/groupsio-settings-drawer.vue

@@ -113,7 +113,7 @@
               :size="14"
               class="text-red-500 mr-2"
             />
-            <span class="text-red-500 text-sm">Authentication failed</span>
+            <span class="text-red-500 text-sm">{{ errorMessage || "Authentication failed" }}</span>
           </div>
         </div>
       </el-form>
@@ -321,6 +321,7 @@ const isVerificationEnabled = ref(false);
 const isVerifyingAccount = ref(false);
 const isAPIConnectionValid = ref(false);
 const accountVerificationFailed = ref(false);
+const errorMessage = ref('');
 const cookie = ref('');
 const cookieExpiry = ref('');
 const loading = ref(false);
@@ -370,6 +371,7 @@ const $v = useVuelidate(rules, form, { $stopPropagation: true });
 const validateAccount = async () => {
   isVerifyingAccount.value = true;
   accountVerificationFailed.value = false;
+  errorMessage.value = '';
   try {
     const response = await IntegrationService.groupsioGetToken(
       form.email,
@@ -382,9 +384,16 @@ const validateAccount = async () => {
     cookieExpiry.value = groupsioCookieExpiry;
     isAPIConnectionValid.value = true;
     getUserSubscriptions();
-  } catch (e) {
+  } catch (error) {
     isAPIConnectionValid.value = false;
     accountVerificationFailed.value = true;
+
+    // Only display API error message for status code 400
+    if (error?.response?.status === 400 && typeof error?.response?.data === 'string') {
+      errorMessage.value = error.response.data;
+    } else {
+      errorMessage.value = 'Authentication failed';
+    }
   }
   isVerifyingAccount.value = false;
 };
@@ -491,6 +500,7 @@ const handleCancel = () => {
     isAPIConnectionValid.value = false;
     isVerifyingAccount.value = false;
     accountVerificationFailed.value = false;
+    errorMessage.value = '';
     $v.value.$reset();
   } else {
     form.email = props.integration?.settings?.email;
@@ -504,6 +514,7 @@ const handleCancel = () => {
     isAPIConnectionValid.value = true;
     isVerifyingAccount.value = false;
     accountVerificationFailed.value = false;
+    errorMessage.value = '';
     $v.value.$reset();
   }
   userSubscriptions.value = [];