From 946445a1423a79ece1c28177abe310924e88655c Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@gmail.com>
Date: Wed, 21 Feb 2024 18:39:39 +0100
Subject: [PATCH] Fix missing validation error message when creating an
 organization (#4024)

---
 .../api/src/modules/organization/resolvers.ts |  2 +-
 .../v2/modals/create-organization.tsx         | 19 ++++++++++++++++---
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/services/api/src/modules/organization/resolvers.ts b/packages/services/api/src/modules/organization/resolvers.ts
index 1fb0a829d..368474502 100644
--- a/packages/services/api/src/modules/organization/resolvers.ts
+++ b/packages/services/api/src/modules/organization/resolvers.ts
@@ -96,7 +96,7 @@ export const resolvers: OrganizationModule.Resolvers = {
           error: {
             message: 'Please check your input.',
             inputErrors: {
-              name: organizationNameResult.error.formErrors.fieldErrors?.[0]?.[0] ?? null,
+              name: organizationNameResult.error.issues[0].message ?? null,
             },
           },
         };
diff --git a/packages/web/app/src/components/v2/modals/create-organization.tsx b/packages/web/app/src/components/v2/modals/create-organization.tsx
index b60142101..72b87a219 100644
--- a/packages/web/app/src/components/v2/modals/create-organization.tsx
+++ b/packages/web/app/src/components/v2/modals/create-organization.tsx
@@ -31,11 +31,18 @@ export const CreateOrganizationMutation = graphql(`
 export const CreateOrganizationForm = () => {
   const [mutation, mutate] = useMutation(CreateOrganizationMutation);
   const { push } = useRouter();
-  const { handleSubmit, values, handleChange, handleBlur, isSubmitting, errors, touched } =
+  const { handleSubmit, values, handleChange, handleBlur, isSubmitting, errors, touched, isValid } =
     useFormik({
       initialValues: { name: '' },
       validationSchema: Yup.object().shape({
-        name: Yup.string().required('Organization name is required'),
+        name: Yup.string()
+          .min(2, 'Name must be at least 2 characters long')
+          .max(50, 'Name must be at most 50 characters long')
+          .matches(
+            /^([a-z]|[0-9]|\s|\.|,|_|-|\/|&)+$/i,
+            'Name restricted to alphanumerical characters, spaces and . , _ - / &',
+          )
+          .required('Organization name is required'),
       }),
       async onSubmit(values) {
         const mutation = await mutate({
@@ -78,7 +85,13 @@ export const CreateOrganizationForm = () => {
         </div>
       )}
       <div className="flex gap-2">
-        <Button type="submit" size="large" block variant="primary" disabled={isSubmitting}>
+        <Button
+          type="submit"
+          size="large"
+          block
+          variant="primary"
+          disabled={isSubmitting || !isValid}
+        >
           {isSubmitting ? (
             <>
               <Spinner className="size-6 text-white" />