fix: manage backend authXService errors (#3190)

site/src/util/formUtils.ts

@@ -1,3 +1,4 @@
+import { hasApiFieldErrors, isApiError, mapApiErrorToFieldErrors } from "api/errors"
 import { FormikContextType, FormikErrors, getIn } from "formik"
 import { ChangeEvent, ChangeEventHandler, FocusEventHandler, ReactNode } from "react"
 import * as Yup from "yup"
@@ -45,6 +46,17 @@ export const getFormHelpers =
     }
   }
 
+export const getFormHelpersWithError = <T>(
+  form: FormikContextType<T>,
+  error?: Error | unknown,
+): ((name: keyof T, HelperText?: ReactNode) => FormHelpers) => {
+  const apiValidationErrors =
+    isApiError(error) && hasApiFieldErrors(error)
+      ? (mapApiErrorToFieldErrors(error.response.data) as FormikErrors<T>)
+      : undefined
+  return getFormHelpers(form, apiValidationErrors)
+}
+
 export const onChangeTrimmed =
   <T>(form: FormikContextType<T>) =>
   (event: ChangeEvent<HTMLInputElement>): void => {