Handle invalid error in the request form

Signed-off-by: Émile Ré <nemile.re@gmail.com>

apps/trust/src/components/RequestAccessDialog.tsx

@@ -17,6 +17,7 @@ import { useMutationWithToasts } from "/hooks/useMutationWithToast";
 import { useTrustCenter } from "/hooks/useTrustCenter";
 import { type FormEventHandler, type PropsWithChildren } from "react";
 import { useIsAuthenticated } from "/hooks/useIsAuthenticated.ts";
+import { InvalidError } from "/providers/RelayProviders";
 
 type Props = PropsWithChildren<{
   documentId?: string;
@@ -40,7 +41,7 @@ export function RequestAccessDialog({
   const trustCenter = useTrustCenter();
   const { toast } = useToast();
   const { __ } = useTranslate();
-  const { handleSubmit, register } = useFormWithSchema(schema, {
+  const { handleSubmit, register, setError, formState } = useFormWithSchema(schema, {
     defaultValues: {
       name: "",
       email: "",
@@ -62,7 +63,11 @@ export function RequestAccessDialog({
         dialogRef.current?.close();
       })
       .catch((error) => {
-        console.error(error);
+        if (error instanceof InvalidError) {
+          if (error.field === "email") {
+            setError(error.field, {message: error.message})
+          }
+        }
         toast({
           title: __("Error"),
           description: __("Cannot request access"),
@@ -109,6 +114,7 @@ export function RequestAccessDialog({
                 placeholder="john.doe@acme.com"
                 {...register("email")}
                 type="email"
+                error={formState.errors.email?.message}
               />
             </div>
           )}

apps/trust/src/providers/RelayProviders.tsx

@@ -16,6 +16,18 @@ export class UnAuthenticatedError extends Error {
   }
 }
 
+export class InvalidError extends Error {
+  field?: string;
+  cause?: string;
+
+  constructor(message?: string, field?: string, cause?: string) {
+    super(message || "INVALID");
+    this.name = "InvalidError";
+    this.field = field;
+    this.cause = cause;
+  }
+}
+
 export class InternalServerError extends Error {
   constructor() {
     super("INTERNAL_SERVER_ERROR");
@@ -47,6 +59,9 @@ export function buildEndpoint(path: string): string {
 const hasUnauthenticatedError = (error: GraphQLError) =>
   error.extensions?.code == "UNAUTHENTICATED";
 
+const hasInvalidError = (error: GraphQLError) =>
+  error.extensions?.code == "INVALID_REQUEST";
+
 const fetchRelay: FetchFunction = async (
   request,
   variables,
@@ -125,6 +140,15 @@ const fetchRelay: FetchFunction = async (
       throw new UnAuthenticatedError();
     }
 
+    const invalidError = errors.find(hasInvalidError);
+    if (invalidError) {
+      throw new InvalidError(
+        invalidError.message,
+        invalidError.extensions.field as string ?? "",
+        invalidError.extensions.cause as string ?? "",
+      );
+    }
+
     throw new Error(`Error fetching GraphQL query '${request.name}'`);
   }