Show custom alert message for duplicate email address

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: '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' });

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()

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