From dc9ce5101c403eb2e59cbcbc9f198975e2458f70 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 13 Apr 2023 15:46:25 +0530
Subject: [PATCH] fix: workspace url error message (#809)

---
 .../app/components/workspace/create-workspace-form.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/apps/app/components/workspace/create-workspace-form.tsx b/apps/app/components/workspace/create-workspace-form.tsx
index a18d63840..65c365a1a 100644
--- a/apps/app/components/workspace/create-workspace-form.tsx
+++ b/apps/app/components/workspace/create-workspace-form.tsx
@@ -42,6 +42,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
   setDefaultValues,
 }) => {
   const [slugError, setSlugError] = useState(false);
+  const [invalidSlug, setInvalidSlug] = useState(false);
 
   const { setToastAlert } = useToast();
 
@@ -130,11 +131,20 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
                   name="slug"
                   register={register}
                   className="block w-full rounded-md bg-transparent py-2 px-0 text-sm"
+                  validations={{
+                    required: "Workspace URL is required",
+                  }}
+                  onChange={(e) =>
+                    /^[a-zA-Z0-9_-]+$/.test(e.target.value) ? setInvalidSlug(false) : setInvalidSlug(true)
+                  }
                 />
               </div>
               {slugError && (
                 <span className="-mt-3 text-sm text-red-500">Workspace URL is already taken!</span>
               )}
+              {invalidSlug && (
+                <span className="text-sm text-red-500">{`URL can only contain ( - ), ( _ ) & Alphanumeric characters.`}</span>
+              )}
             </div>
           </div>