Merge branch 'use-api-error' into 'develop'

Use human-readable message from the API as the default

See merge request soapbox-pub/soapbox!2126

app/soapbox/features/verification/__tests__/registration.test.tsx

@@ -41,7 +41,11 @@ describe('<Registration />', () => {
   describe('with invalid data', () => {
     it('handles 422 errors', async() => {
       __stub(mock => {
-        mock.onPost('/api/v1/pepe/accounts').reply(422, {});
+        mock.onPost('/api/v1/pepe/accounts').reply(
+          422, {
+            error: 'user_taken',
+          },
+        );
       });
 
       render(<Registration />);
@@ -55,6 +59,25 @@ describe('<Registration />', () => {
       });
     });
 
+    it('handles 422 errors with messages', async() => {
+      __stub(mock => {
+        mock.onPost('/api/v1/pepe/accounts').reply(
+          422, {
+            error: 'user_vip',
+            message: 'This username is unavailable.',
+          },
+        );
+      });
+
+      render(<Registration />);
+
+      await waitFor(() => {
+        fireEvent.submit(screen.getByTestId('button'), { preventDefault: () => {} });
+      });
+
+      expect(screen.getByTestId('toast')).toHaveTextContent(/this username is unavailable/i);
+    });
+
     it('handles generic errors', async() => {
       __stub(mock => {
         mock.onPost('/api/v1/pepe/accounts').reply(500, {});

app/soapbox/features/verification/registration.tsx

@@ -58,9 +58,11 @@ const Registration = () => {
           intl.formatMessage(messages.success, { siteTitle: instance.title }),
         );
       })
-      .catch((error: AxiosError) => {
-        if (error?.response?.status === 422) {
-          toast.error(intl.formatMessage(messages.usernameTaken));
+      .catch((errorResponse: AxiosError<{ error: string, message: string }>) => {
+        const error = errorResponse.response?.data?.error;
+
+        if (error) {
+          toast.error(errorResponse.response?.data?.message || intl.formatMessage(messages.usernameTaken));
         } else {
           toast.error(intl.formatMessage(messages.error));
         }