From 294323e7f5a239fc0043a5bb001b205db41539ae Mon Sep 17 00:00:00 2001
From: Matthew White <matthew-white@users.noreply.github.com>
Date: Mon, 11 Dec 2023 22:18:35 -0500
Subject: [PATCH] Show custom alert message for duplicate email address (#912)

Closes getodk/central#144.
---
 src/components/user/edit/basic-details.vue    | 10 +++-
 src/components/user/new.vue                   | 17 +++++-
 .../user/edit/basic-details.spec.js           | 45 +++++++++++++++
 test/components/user/new.spec.js              | 57 +++++++++++++++++--
 transifex/strings_en.json                     | 10 ++++
 5 files changed, 130 insertions(+), 9 deletions(-)

diff --git a/src/components/user/edit/basic-details.vue b/src/components/user/edit/basic-details.vue
index 3eb9326ef..3e1e882ce 100644
--- a/src/components/user/edit/basic-details.vue
+++ b/src/components/user/edit/basic-details.vue
@@ -34,6 +34,7 @@ except according to the terms contained in the LICENSE file.
 
 <script setup>
 import { computed, inject, ref } from 'vue';
+import { equals } from 'ramda';
 import { useI18n } from 'vue-i18n';
 
 import FormGroup from '../../form-group.vue';
@@ -70,7 +71,11 @@ const submit = () => {
       user.email = data.email;
       user.displayName = data.displayName;
       user.updatedAt = data.updatedAt;
-    }
+    },
+    problemToAlert: ({ code, details }) =>
+      (code === 409.3 && equals(details.fields, ['email', 'deleted'])
+        ? t('problem.409_3', { email: details.values[0] })
+        : null)
   })
     .then(() => { alert.success(t('alert.success')); })
     .catch(noop);
@@ -86,6 +91,9 @@ const submit = () => {
     "action": {
       "update": "Update details"
     },
+    "problem": {
+      "409_3": "You cannot change your email to {email} because this account already exists. Please try another email address."
+    },
     "alert": {
       "success": "User details saved!"
     }
diff --git a/src/components/user/new.vue b/src/components/user/new.vue
index 949dafbc2..c2785060f 100644
--- a/src/components/user/new.vue
+++ b/src/components/user/new.vue
@@ -38,6 +38,8 @@ except according to the terms contained in the LICENSE file.
 </template>
 
 <script>
+import { equals } from 'ramda';
+
 import FormGroup from '../form-group.vue';
 import Modal from '../modal.vue';
 import Spinner from '../spinner.vue';
@@ -80,7 +82,15 @@ export default {
     submit() {
       const postData = { email: this.email };
       if (this.displayName !== '') postData.displayName = this.displayName;
-      this.request({ method: 'POST', url: '/v1/users', data: postData })
+      this.request({
+        method: 'POST',
+        url: '/v1/users',
+        data: postData,
+        problemToAlert: ({ code, details }) =>
+          (code === 409.3 && equals(details.fields, ['email', 'deleted'])
+            ? this.$t('problem.409_3', { email: details.values[0] })
+            : null)
+      })
         .then(response => {
           this.$emit('success', response.data);
         })
@@ -100,7 +110,10 @@ export default {
     ],
     "oidcIntroduction": [
       "Users on your login server must have a Central account to log in to Central. Once you create this account, the user on your login server with the email address you provide will be able to log in to Central."
-    ]
+    ],
+    "problem": {
+      "409_3": "It looks like {email} already has an account. Please try another email address."
+    }
   }
 }
 </i18n>
diff --git a/test/components/user/edit/basic-details.spec.js b/test/components/user/edit/basic-details.spec.js
index 9c5a8b3c7..ea5461cc7 100644
--- a/test/components/user/edit/basic-details.spec.js
+++ b/test/components/user/edit/basic-details.spec.js
@@ -96,6 +96,51 @@ describe('UserEditBasicDetails', () => {
       });
   });
 
+  describe('custom alert messages', () => {
+    beforeEach(() => {
+      mockLogin({ email: 'old@email.com' });
+    });
+
+    it('shows a custom message for a duplicate email', () =>
+      mockHttp()
+        .mount(UserEditBasicDetails, mountOptions())
+        .request(async (component) => {
+          await component.get('input[type="email"]').setValue('new@email.com');
+          return component.get('form').trigger('submit');
+        })
+        .respondWithProblem({
+          code: 409.3,
+          message: 'A resource already exists with email,deleted value(s) of new@email.com,false.',
+          details: {
+            fields: ['email', 'deleted'],
+            values: ['new@email.com', false]
+          }
+        })
+        .afterResponse(modal => {
+          modal.should.alert('danger', (message) => {
+            message.should.startWith('You cannot change your email to new@email.com');
+          });
+        }));
+
+    // I don't think a different uniqueness violation is currently possible.
+    // This is mostly about future-proofing.
+    it('shows the default message for a different uniqueness violation', () =>
+      mockHttp()
+        .mount(UserEditBasicDetails, mountOptions())
+        .request(async (component) => {
+          await component.get('input[type="email"]').setValue('new@email.com');
+          return component.get('form').trigger('submit');
+        })
+        .respondWithProblem({
+          code: 409.3,
+          message: 'A resource already exists with foo value(s) of bar.',
+          details: { fields: ['foo'], values: ['bar'] }
+        })
+        .afterResponse(modal => {
+          modal.should.alert('danger', 'A resource already exists with foo value(s) of bar.');
+        }));
+  });
+
   describe('after a successful response', () => {
     beforeEach(() => {
       mockLogin({ displayName: 'Old Name' });
diff --git a/test/components/user/new.spec.js b/test/components/user/new.spec.js
index 0b5625550..1707b7d58 100644
--- a/test/components/user/new.spec.js
+++ b/test/components/user/new.spec.js
@@ -69,12 +69,12 @@ describe('UserNew', () => {
           await modal.get('input[type="email"]').setValue('new@email.com');
           return modal.get('form').trigger('submit');
         })
-        .beforeEachResponse((_, { method, url, data }) => {
-          method.should.equal('POST');
-          url.should.equal('/v1/users');
-          data.should.eql({ email: 'new@email.com' });
-        })
-        .respondWithProblem());
+        .respondWithProblem()
+        .testRequests([{
+          method: 'POST',
+          url: '/v1/users',
+          data: { email: 'new@email.com' }
+        }]));
 
     it('sends the display name if there is one', () =>
       mockHttp()
@@ -107,6 +107,51 @@ describe('UserNew', () => {
         modal: true
       }));
 
+  describe('custom alert messages', () => {
+    it('shows a custom message for a duplicate email', () =>
+      mockHttp()
+        .mount(UserNew, {
+          props: { state: true }
+        })
+        .request(async (modal) => {
+          await modal.get('input[type="email"]').setValue('new@email.com');
+          return modal.get('form').trigger('submit');
+        })
+        .respondWithProblem({
+          code: 409.3,
+          message: 'A resource already exists with email,deleted value(s) of new@email.com,false.',
+          details: {
+            fields: ['email', 'deleted'],
+            values: ['new@email.com', false]
+          }
+        })
+        .afterResponse(modal => {
+          modal.should.alert('danger', (message) => {
+            message.should.startWith('It looks like new@email.com already has an account.');
+          });
+        }));
+
+    // I don't think a different uniqueness violation is currently possible.
+    // This is mostly about future-proofing.
+    it('shows the default message for a different uniqueness violation', () =>
+      mockHttp()
+        .mount(UserNew, {
+          props: { state: true }
+        })
+        .request(async (modal) => {
+          await modal.get('input[type="email"]').setValue('new@email.com');
+          return modal.get('form').trigger('submit');
+        })
+        .respondWithProblem({
+          code: 409.3,
+          message: 'A resource already exists with foo value(s) of bar.',
+          details: { fields: ['foo'], values: ['bar'] }
+        })
+        .afterResponse(modal => {
+          modal.should.alert('danger', 'A resource already exists with foo value(s) of bar.');
+        }));
+  });
+
   describe('after a successful response', () => {
     const submitWithSuccess = () => load('/users', { root: false })
       .complete()
diff --git a/transifex/strings_en.json b/transifex/strings_en.json
index af273294e..8ccea88dd 100644
--- a/transifex/strings_en.json
+++ b/transifex/strings_en.json
@@ -4280,6 +4280,11 @@
           "developer_comment": "This is the text for an action, for example, the text of a button."
         }
       },
+      "problem": {
+        "409_3": {
+          "string": "You cannot change your email to {email} because this account already exists. Please try another email address."
+        }
+      },
       "alert": {
         "success": {
           "string": "User details saved!"
@@ -4366,6 +4371,11 @@
         "0": {
           "string": "Users on your login server must have a Central account to log in to Central. Once you create this account, the user on your login server with the email address you provide will be able to log in to Central."
         }
+      },
+      "problem": {
+        "409_3": {
+          "string": "It looks like {email} already has an account. Please try another email address."
+        }
       }
     },
     "UserResetPassword": {