Show custom alert message for duplicate email address (#912)

Closes getodk/central#144.

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!"
     }

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>

test/components/user/edit/basic-details.spec.js

@@ -96,6 +96,51 @@ describe('UserEditBasicDetails', () => {
       });
   });
 
+  describe('custom alert messages', () => {
+    beforeEach(() => {
+      mockLogin({ email: '[email protected]' });
+    });
+
+    it('shows a custom message for a duplicate email', () =>
+      mockHttp()
+        .mount(UserEditBasicDetails, mountOptions())
+        .request(async (component) => {
+          await component.get('input[type="email"]').setValue('[email protected]');
+          return component.get('form').trigger('submit');
+        })
+        .respondWithProblem({
+          code: 409.3,
+          message: 'A resource already exists with email,deleted value(s) of [email protected],false.',
+          details: {
+            fields: ['email', 'deleted'],
+            values: ['[email protected]', false]
+          }
+        })
+        .afterResponse(modal => {
+          modal.should.alert('danger', (message) => {
+            message.should.startWith('You cannot change your email to [email protected]');
+          });
+        }));
+
+    // 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('[email protected]');
+          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' });

test/components/user/new.spec.js

@@ -69,12 +69,12 @@ describe('UserNew', () => {
           await modal.get('input[type="email"]').setValue('[email protected]');
           return modal.get('form').trigger('submit');
         })
-        .beforeEachResponse((_, { method, url, data }) => {
-          method.should.equal('POST');
-          url.should.equal('/v1/users');
-          data.should.eql({ email: '[email protected]' });
-        })
-        .respondWithProblem());
+        .respondWithProblem()
+        .testRequests([{
+          method: 'POST',
+          url: '/v1/users',
+          data: { email: '[email protected]' }
+        }]));
 
     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('[email protected]');
+          return modal.get('form').trigger('submit');
+        })
+        .respondWithProblem({
+          code: 409.3,
+          message: 'A resource already exists with email,deleted value(s) of [email protected],false.',
+          details: {
+            fields: ['email', 'deleted'],
+            values: ['[email protected]', false]
+          }
+        })
+        .afterResponse(modal => {
+          modal.should.alert('danger', (message) => {
+            message.should.startWith('It looks like [email protected] 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('[email protected]');
+          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()

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": {