feat: client-side input validation for platform urls

Author: prplwtf

apps/frontend/src/components/ui/app/extensions/Platformsmodal.vue

@@ -29,7 +29,11 @@
             label="Product URL"
             name="builtbybit_url"
             type="url"
-            :rules="[rules.required(), rules.url()]"
+            :rules="[
+              validationRules.required(),
+              validationRules.url(),
+              validationRules.platformUrl('BUILTBYBIT'),
+            ]"
             :required="localEnabled.BUILTBYBIT"
             placeholder="https://builtbybit.com/resources/..."
             class="mt-3"
@@ -62,7 +66,11 @@
             label="Product URL"
             name="sourcexchange_url"
             type="url"
-            :rules="[rules.required(), rules.url()]"
+            :rules="[
+              validationRules.required(),
+              validationRules.url(),
+              validationRules.platformUrl('SOURCEXCHANGE'),
+            ]"
             :required="localEnabled.SOURCEXCHANGE"
             placeholder="https://sourcexchange.net/products/..."
             class="mt-3"
@@ -95,7 +103,11 @@
             label="Repository URL"
             name="github_url"
             type="url"
-            :rules="[rules.required(), rules.url()]"
+            :rules="[
+              validationRules.required(),
+              validationRules.url(),
+              validationRules.platformUrl('GITHUB'),
+            ]"
             :required="localEnabled.GITHUB"
             placeholder="https://github.com/user/repo"
             class="mt-3"
@@ -118,7 +130,7 @@
 </template>
 
 <script setup lang="ts">
-const { rules } = useFormValidation()
+const { rules: validationRules } = useFormValidation()
 
 interface Props {
   isOpen: boolean
@@ -177,23 +189,29 @@ const handleClose = () => {
     localUrls.value.BUILTBYBIT &&
     fieldValidation.value.builtbybit_url !== false
   ) {
-    platforms.BUILTBYBIT = localUrls.value.BUILTBYBIT
+    platforms.BUILTBYBIT = localUrls.value.BUILTBYBIT.endsWith('/')
+      ? localUrls.value.BUILTBYBIT.slice(0, -1)
+      : localUrls.value.BUILTBYBIT
   }
 
   if (
     localEnabled.value.SOURCEXCHANGE &&
     localUrls.value.SOURCEXCHANGE &&
     fieldValidation.value.sourcexchange_url !== false
   ) {
-    platforms.SOURCEXCHANGE = localUrls.value.SOURCEXCHANGE
+    platforms.SOURCEXCHANGE = localUrls.value.SOURCEXCHANGE.endsWith('/')
+      ? localUrls.value.SOURCEXCHANGE.slice(0, -1)
+      : localUrls.value.SOURCEXCHANGE
   }
 
   if (
     localEnabled.value.GITHUB &&
     localUrls.value.GITHUB &&
     fieldValidation.value.github_url !== false
   ) {
-    platforms.GITHUB = localUrls.value.GITHUB
+    platforms.GITHUB = localUrls.value.GITHUB.endsWith('/')
+      ? localUrls.value.GITHUB.slice(0, -1)
+      : localUrls.value.GITHUB
   }
 
   emit('save', platforms)

apps/frontend/src/composables/useFormValidation.ts

@@ -144,6 +144,46 @@ export const useFormValidation = () => {
         message || 'Identifier is already taken by a published extension',
       trigger: 'blur',
     }),
+
+    platformUrl: (
+      platform: 'GITHUB' | 'BUILTBYBIT' | 'SOURCEXCHANGE',
+      message?: string
+    ): ValidationRule => ({
+      validator: (value: string) => {
+        if (!value) {
+          return false
+        }
+
+        try {
+          const url = new URL(value)
+          const hostname = url.hostname
+
+          switch (platform) {
+            case 'GITHUB':
+              return (
+                hostname === 'github.com' &&
+                url.pathname.split('/').filter(Boolean).length >= 2
+              )
+            case 'BUILTBYBIT':
+              return (
+                hostname === 'builtbybit.com' &&
+                /^\/resources\/[\w.-]+(\.\d+)?\/?$/.test(url.pathname)
+              )
+            case 'SOURCEXCHANGE':
+              return (
+                hostname === 'www.sourcexchange.net' &&
+                /^\/products\/[\w.-]+\/?$/.test(url.pathname)
+              )
+            default:
+              return false
+          }
+        } catch {
+          return false
+        }
+      },
+      message: message || 'Please enter a valid platform URL',
+      trigger: 'blur',
+    }),
   }
 
   const debounce = (func: Function, delay: number) => {

apps/frontend/src/pages/app/extensions/[id].vue

@@ -310,7 +310,7 @@
               class="font-mono"
               :supports-images="true"
               :rows="10"
-              :placeholder="`(ﾉ*･_･)ﾉ \\\n**markdown** is supported`"
+              :placeholder="`\`[  > <]\` \\\n**markdown** is supported`"
               :richtext="true"
             />
           </div>
@@ -320,7 +320,8 @@
             class="border-neutral-700 bg-neutral-950 p-4 xl:-mb-[2px] xl:border-b"
           >
             <template v-if="!form.description || form.description == ''">
-              <p>(ﾉ*･_･)ﾉ</p>
+              <!-- prettier-ignore -->
+              <pre><ProseCode>[  > <]</ProseCode></pre>
               <p><b>markdown</b> is supported</p>
             </template>
             <client-only v-else>