diff --git a/app/soapbox/features/verification/__tests__/registration.test.tsx b/app/soapbox/features/verification/__tests__/registration.test.tsx
index b408947f6..e706b71c0 100644
--- a/app/soapbox/features/verification/__tests__/registration.test.tsx
+++ b/app/soapbox/features/verification/__tests__/registration.test.tsx
@@ -41,7 +41,11 @@ describe('', () => {
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();
@@ -55,6 +59,25 @@ describe('', () => {
});
});
+ 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();
+
+ 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, {});
diff --git a/app/soapbox/features/verification/registration.tsx b/app/soapbox/features/verification/registration.tsx
index d5acb1fb2..1c23018a3 100644
--- a/app/soapbox/features/verification/registration.tsx
+++ b/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));
}