From c3f68f3d477bd4f36cf0fb5db28ed2f1fda24360 Mon Sep 17 00:00:00 2001
From: zermelo-wisen <zermelo@wisen.tech>
Date: Sat, 15 Jun 2024 21:00:12 +0300
Subject: [PATCH] feat: Present activate with email errors to the user

---
 packages/components/src/components/SignIn.vue |  9 +++---
 .../tests/e2e/specs/sidebarSignIn.spec.js     | 28 +++++++++----------
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/packages/components/src/components/SignIn.vue b/packages/components/src/components/SignIn.vue
index 29ec126049..cca55aee4e 100644
--- a/packages/components/src/components/SignIn.vue
+++ b/packages/components/src/components/SignIn.vue
@@ -186,12 +186,11 @@ export default {
       if (response.status === 201) {
         this.error = '';
         this.submitted = true;
-      } else if (response.status < 500 && response.status >= 400) {
-        this.email = '';
-        this.error = this.generateInvalidFieldMsg('email address');
       } else {
         this.email = '';
-        this.error = GENERIC_ERROR_MSG;
+        const body = await response.json();
+        if ('error' in body) this.error = body.error;
+        this.error ??= GENERIC_ERROR_MSG;
       }
     },
     async completeActivation() {
@@ -355,6 +354,8 @@ export default {
       color: $hotpink;
       font-size: 0.9rem;
       margin: 0;
+      max-height: 4rem;
+      overflow-y: scroll;
     }
 
     .accept-tos {
diff --git a/packages/components/tests/e2e/specs/sidebarSignIn.spec.js b/packages/components/tests/e2e/specs/sidebarSignIn.spec.js
index f9dda73054..b52e6bcc61 100644
--- a/packages/components/tests/e2e/specs/sidebarSignIn.spec.js
+++ b/packages/components/tests/e2e/specs/sidebarSignIn.spec.js
@@ -34,21 +34,19 @@ describe('Sidebar activation page', () => {
       .should('contain.text', expectedText2);
   });
 
-  it('shows an error message for an invalid email', () => {
-    cy.intercept('POST', 'https://getappmap.com/api/activations*', {
-      statusCode: 422,
-    });
-    cy.get('[data-cy="email-activation-button"]').click();
-    cy.get('.error').should('contain.text', INVALID_EMAIL_MSG);
-  });
-
-  it('shows an error message for a server error', () => {
-    cy.intercept('POST', 'https://getappmap.com/api/activations*', {
-      statusCode: 500,
-    });
-    cy.get('[data-cy="email-activation-button"]').click();
-    cy.get('.error').should('contain.text', GENERIC_ERROR_MSG);
-  });
+  [422, 500].forEach((code) =>
+    it('presents the error directly to the user for response ' + code, () => {
+      const errorMessage = 'An error occurred.';
+      cy.intercept('POST', 'https://getappmap.com/api/activations*', {
+        statusCode: 500,
+        body: {
+          error: errorMessage,
+        },
+      });
+      cy.get('[data-cy="email-activation-button"]').click();
+      cy.get('.error').should('contain.text', errorMessage);
+    })
+  );
 
   it('shows verification code page upon successful email submission', () => {
     cy.intercept('POST', 'https://getappmap.com/api/activations*', {