Add reason for registration mode = "moderate" - #877

src/graphql/user.ts

@@ -2,8 +2,18 @@ import gql from "graphql-tag";
 import { ACTOR_FRAGMENT } from "./actor";
 
 export const CREATE_USER = gql`
-  mutation CreateUser($email: String!, $password: String!, $locale: String) {
-    createUser(email: $email, password: $password, locale: $locale) {
+  mutation CreateUser(
+    $email: String!
+    $password: String!
+    $moderation: String!
+    $locale: String
+  ) {
+    createUser(
+      email: $email
+      password: $password
+      moderation: $moderation
+      locale: $locale
+    ) {
       email
       confirmationSentAt
     }

src/i18n/en_US.json

@@ -976,6 +976,7 @@
   "Registration is closed.": "Registration is closed.",
   "Registration is currently closed.": "Registration is currently closed.",
   "Registration is moderated, new user must be validated.": "Registration is moderated, new user must be validated.",
+  "Registration is subject to moderation, indicate your motivation.": "Registration is subject to moderation, indicate your motivation.",
   "Registrations": "Registrations",
   "Registrations are restricted by allowlisting.": "Registrations are restricted by allowlisting.",
   "Reject": "Reject",

src/views/User/RegisterView.vue

@@ -107,7 +107,7 @@
 
           <o-field
             :label="t('Password')"
-            :type="errorPasswordType"
+            :variant="errorPasswordType"
             :message="errorPasswordMessage"
             label-for="password"
           >
@@ -123,6 +123,28 @@
             />
           </o-field>
 
+          <o-field
+            v-if="config?.registrationsModeration"
+            :label="
+              t(
+                'Registration is subject to moderation, indicate your motivation.'
+              )
+            "
+            :variant="errorModerationType"
+            :message="errorModerationMessage"
+            label-for="moderation"
+          >
+            <o-input
+              aria-required="true"
+              required
+              :autosize="false"
+              id="moderation"
+              type="textarea"
+              v-model="credentials.moderation"
+              expanded
+            />
+          </o-field>
+
           <div class="flex items-start mb-6 mt-2">
             <div class="flex items-center h-5">
               <input
@@ -184,6 +206,7 @@
                 query: {
                   email: credentials.email,
                   password: credentials.password,
+                  moderation: credentials.moderation,
                 },
               }"
               >{{ t("Login") }}</o-button
@@ -241,7 +264,12 @@ import { AbsintheGraphQLErrors } from "@/types/errors.model";
 
 type errorType = "danger" | "warning";
 type errorMessage = { type: errorType; message: string };
-type credentialsType = { email: string; password: string; locale: string };
+type credentialsType = {
+  email: string;
+  password: string;
+  moderation: string;
+  locale: string;
+};
 
 const { t, locale } = useI18n({ useScope: "global" });
 const route = useRoute();
@@ -255,11 +283,14 @@ const credentials = reactive<credentialsType>({
   email: typeof route.query.email === "string" ? route.query.email : "",
   password:
     typeof route.query.password === "string" ? route.query.password : "",
+  moderation:
+    typeof route.query.moderation === "string" ? route.query.moderation : "",
   locale: "en",
 });
 
 const emailErrors = ref<errorMessage[]>([]);
 const passwordErrors = ref<errorMessage[]>([]);
+const moderationError = ref<errorMessage[]>([]);
 
 const sendingForm = ref(false);
 
@@ -298,6 +329,12 @@ onError((error) => {
             message: message[0] as string,
           });
           break;
+        case "moderation":
+          moderationError.value.push({
+            type: "danger" as errorType,
+            message: message[0] as string,
+          });
+          break;
         default:
       }
     }
@@ -311,6 +348,7 @@ const submit = async (): Promise<void> => {
   try {
     emailErrors.value = [];
     passwordErrors.value = [];
+    moderationError.value = [];
 
     mutate(credentials);
   } catch (error: any) {
@@ -343,11 +381,14 @@ const maxErrorType = (errors: errorMessage[]): errorType | undefined => {
 const errorEmailType = computed((): errorType | undefined => {
   return maxErrorType(emailErrors.value);
 });
-
 const errorPasswordType = computed((): errorType | undefined => {
   return maxErrorType(passwordErrors.value);
 });
 
+const errorModerationType = computed((): errorType | undefined => {
+  return maxErrorType(moderationError.value);
+});
+
 const errorEmailMessage = computed((): string => {
   return emailErrors.value.map(({ message }) => message).join(" ");
 });
@@ -355,4 +396,8 @@ const errorEmailMessage = computed((): string => {
 const errorPasswordMessage = computed((): string => {
   return passwordErrors.value?.map(({ message }) => message).join(" ");
 });
+
+const errorModerationMessage = computed((): string => {
+  return moderationError.value?.map(({ message }) => message).join(" ");
+});
 </script>