Merge pull request #309 from RaafatDev/#289-Settings-Links--Invalid-URLs-break-form-submit-and-don't-show-proper-errors

#289

src/lib/components/ui/form/form-field-errors.svelte

@@ -28,7 +28,7 @@
       {@render childrenProp({ errors, errorProps })}
     {:else}
       <Text style="xs">
-        {#each errors as error (error)}
+        {#each errors as error, index (error + index)}
           <div {...errorProps} class={cn(errorClasses)}>{error}</div>
         {/each}
       </Text>

src/routes/(pages)/dashboard/settings/(components)/edit-settings-form/schema.ts

@@ -5,11 +5,24 @@ const optionalUrl = (errorMessage: string) =>
   z
     .union([
       z.literal(""),
-      z
-        .url({ message: errorMessage })
-        .refine((url) => url.startsWith("http://") || url.startsWith("https://"), {
-          message: errorMessage,
-        }),
+      // z
+      //   .url({ message: errorMessage })
+      //   .refine((url) => url.startsWith("http://") || url.startsWith("https://"), {
+      //     message: errorMessage,
+      //   }),
+      z.string().refine(
+        (val) => {
+          try {
+            // 1. Check if it's a valid URL structure
+            const url = new URL(val);
+            // 2. Check if it uses the correct HTTP protocols
+            return url.protocol === "http:" || url.protocol === "https:";
+          } catch {
+            return false; // Fails if not a valid URL structure
+          }
+        },
+        { message: errorMessage },
+      ),
     ])
     .optional();