Create link error message and bug fix

Changed the error message from "Invalid key" to "Enter a valid short link".

Found a bug that the destination URL allowed spaces, and then those links went to 404 pages. So now it shows an error if the user tries to create a short link with spaces in the destination url.

Author: marcusljf

apps/web/ui/links/destination-url-input.tsx

@@ -97,7 +97,6 @@ export const DestinationUrlInput = forwardRef<
             {...(formContext && {
               onChange: (e) => {
                 const url = e.target.value;
-
                 formContext.setValue("url", url);
                 const parentParams = getParamsFromURL(url);
 

apps/web/ui/links/link-builder/controls/link-builder-destination-url-input.tsx

@@ -17,7 +17,7 @@ import { useAvailableDomains } from "../../use-available-domains";
  */
 export const LinkBuilderDestinationUrlInput = memo(
   forwardRef<HTMLInputElement>((_, ref) => {
-    const { control, setValue, clearErrors } = useFormContext<LinkFormData>();
+    const { control, setValue, clearErrors, setError } = useFormContext<LinkFormData>();
     0;
 
     const { errors } = useFormState({ control, name: ["url"] });
@@ -42,8 +42,13 @@ export const LinkBuilderDestinationUrlInput = memo(
             value={field.value}
             domains={domains}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              clearErrors("url");
-              field.onChange(e.target.value);
+              const value = e.target.value;
+              if (/\s/.test(value)) {
+                setError("url", { message: "Enter a valid URL" });
+              } else {
+                clearErrors("url");
+                field.onChange(value);
+              }
             }}
             required={key !== "_root"}
             error={errors.url?.message || undefined}

apps/web/ui/partners/add-partner-link-modal.tsx

@@ -40,7 +40,7 @@ const AddPartnerLinkModal = ({
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
-  const { register, handleSubmit, watch } = useForm<FormData>({
+  const { register, handleSubmit, watch, setError, clearErrors, formState } = useForm<FormData>({
     defaultValues: {
       url: "",
       key: "",
@@ -91,7 +91,11 @@ const AddPartnerLinkModal = ({
       copyToClipboard(data.shortLink);
     } catch (error) {
       setErrorMessage(
-        error instanceof Error ? error.message : "Failed to create link.",
+        error instanceof Error && error.message === "Invalid key."
+          ? "Enter a valid short link"
+          : error instanceof Error
+            ? error.message
+            : "Failed to create link."
       );
     } finally {
       setIsSubmitting(false);
@@ -188,9 +192,14 @@ const AddPartnerLinkModal = ({
                 <span className="inline-flex items-center rounded-l-md border border-r-0 border-neutral-300 bg-neutral-50 px-3 text-neutral-500 sm:text-sm">
                   {destinationDomain}
                 </span>
-
                 <input
-                  {...register("url", { required: false })}
+                  {...register("url", { 
+                    required: false,
+                    validate: value =>
+                      value && /\s/.test(value)
+                        ? "Enter a valid URL"
+                        : true
+                  })}
                   type="text"
                   id="url"
                   placeholder="(optional)"
@@ -209,6 +218,11 @@ const AddPartnerLinkModal = ({
                   }}
                 />
               </div>
+              {formState.errors.url && (
+                <span className="mt-1 block text-sm text-red-600 dark:text-red-400">
+                  {formState.errors.url.message}
+                </span>
+              )}
             </div>
           </div>
         </div>