Manage error about register - #877

src/views/User/RegisterView.vue

@@ -88,6 +88,8 @@
         <o-notification variant="warning" v-if="config?.registrationsAllowlist">
           {{ t("Registrations are restricted by allowlisting.") }}
         </o-notification>
+        <o-field :variant="errorOtherType" :message="errorOtherMessage" />
+
         <form @submit.prevent="submit">
           <o-field
             :label="t('Email')"
@@ -288,6 +290,7 @@ const credentials = reactive<credentialsType>({
   locale: "en",
 });
 
+const otherErrors = ref<errorMessage[]>([]);
 const emailErrors = ref<errorMessage[]>([]);
 const passwordErrors = ref<errorMessage[]>([]);
 const moderationError = ref<errorMessage[]>([]);
@@ -316,26 +319,36 @@ onDone(() => {
 onError((error) => {
   (error.graphQLErrors as AbsintheGraphQLErrors).forEach(
     ({ field, message }) => {
+      let message_txt;
+      if (Array.isArray(message)) {
+        message_txt = message[0] as string;
+      } else {
+        message_txt = message as string;
+      }
       switch (field) {
         case "email":
           emailErrors.value.push({
             type: "danger" as errorType,
-            message: message[0] as string,
+            message: message_txt,
           });
           break;
         case "password":
           passwordErrors.value.push({
             type: "danger" as errorType,
-            message: message[0] as string,
+            message: message_txt,
           });
           break;
         case "moderation":
           moderationError.value.push({
             type: "danger" as errorType,
-            message: message[0] as string,
+            message: message_txt,
           });
           break;
         default:
+          otherErrors.value.push({
+            type: "danger" as errorType,
+            message: message_txt,
+          });
       }
     }
   );
@@ -378,6 +391,10 @@ const maxErrorType = (errors: errorMessage[]): errorType | undefined => {
   }, "warning");
 };
 
+const errorOtherType = computed((): errorType | undefined => {
+  return maxErrorType(otherErrors.value);
+});
+
 const errorEmailType = computed((): errorType | undefined => {
   return maxErrorType(emailErrors.value);
 });
@@ -389,6 +406,10 @@ const errorModerationType = computed((): errorType | undefined => {
   return maxErrorType(moderationError.value);
 });
 
+const errorOtherMessage = computed((): string => {
+  return otherErrors.value.map(({ message }) => message).join(" ");
+});
+
 const errorEmailMessage = computed((): string => {
   return emailErrors.value.map(({ message }) => message).join(" ");
 });

test/graphql/resolvers/user_test.exs

@@ -424,6 +424,7 @@ defmodule Mobilizon.GraphQL.Resolvers.UserTest do
           variables: @user_creation
         )
 
+      assert hd(res["errors"])["field"] == "email"
       assert hd(res["errors"])["message"] == ["Cette adresse e-mail est déjà utilisée."]
     end
 
@@ -439,6 +440,7 @@ defmodule Mobilizon.GraphQL.Resolvers.UserTest do
           variables: @user_creation
         )
 
+      assert hd(res["errors"])["field"] == nil
       assert hd(res["errors"])["message"] == "Registrations are not open"
       Config.put([:instance, :registrations_open], true)
       Config.put([:instance, :registrations_moderation], false)
@@ -455,6 +457,7 @@ defmodule Mobilizon.GraphQL.Resolvers.UserTest do
           variables: @user_creation
         )
 
+      assert hd(res["errors"])["field"] == nil
       assert hd(res["errors"])["message"] == "Moderation text must not be empty"
 
       Config.put([:instance, :registrations_open], true)
@@ -496,6 +499,7 @@ defmodule Mobilizon.GraphQL.Resolvers.UserTest do
           variables: @user_creation
         )
 
+      assert hd(res["errors"])["field"] == nil
       assert hd(res["errors"])["message"] == "Your email is not on the allowlist"
       Config.put([:instance, :registrations_open], true)
       Config.put([:instance, :registrations_moderation], false)
@@ -556,6 +560,8 @@ defmodule Mobilizon.GraphQL.Resolvers.UserTest do
           variables: @user_creation
         )
 
+      assert hd(res["errors"])["field"] == nil
+
       assert hd(res["errors"])["message"] ==
                "Your e-mail has been denied registration or uses a disallowed e-mail provider"
 
@@ -578,6 +584,8 @@ defmodule Mobilizon.GraphQL.Resolvers.UserTest do
           variables: @user_creation
         )
 
+      assert hd(res["errors"])["field"] == nil
+
       assert hd(res["errors"])["message"] ==
                "Your e-mail has been denied registration or uses a disallowed e-mail provider"
 
@@ -601,6 +609,8 @@ defmodule Mobilizon.GraphQL.Resolvers.UserTest do
           variables: Map.put(@user_creation, :email, "test+alias@demo.tld")
         )
 
+      assert hd(res["errors"])["field"] == nil
+
       assert hd(res["errors"])["message"] ==
                "Your e-mail has been denied registration or uses a disallowed e-mail provider"
 
@@ -635,6 +645,8 @@ defmodule Mobilizon.GraphQL.Resolvers.UserTest do
           variables: @user_creation_bad_email
         )
 
+      assert hd(res["errors"])["field"] == "email"
+
       assert hd(res["errors"])["message"] ==
                ["Email doesn't fit required format"]
     end

tests/unit/specs/components/User/RegisterView.spec.ts

@@ -159,7 +159,7 @@ describe("Register page", () => {
   it("shows error with moderation", async () => {
     const wrapper = generateWrapper(true, {
       createUserHandler: vi.fn().mockResolvedValue({
-        errors: [{ field: "moderation", message: ["Bad moderation."] }],
+        errors: [{ field: null, message: ["Bad moderation."] }],
       }),
     });
     await flushPromises();

tests/unit/specs/components/User/__snapshots__/RegisterView.spec.ts.snap

@@ -30,6 +30,10 @@ exports[`Register page > register with moderation 1`] = `
     </div>
     <div>
       <!--v-if-->
+      <div data-oruga="field" class="o-field">
+        <!---->
+        <!---->
+      </div>
       <form>
         <div data-oruga="field" class="o-field"><label for="email" class="o-field__label">Email</label>
           <div class="o-field__body">
@@ -114,6 +118,10 @@ exports[`Register page > register without moderation 1`] = `
     </div>
     <div>
       <!--v-if-->
+      <div data-oruga="field" class="o-field">
+        <!---->
+        <!---->
+      </div>
       <form>
         <div data-oruga="field" class="o-field"><label for="email" class="o-field__label">Email</label>
           <div class="o-field__body">