New Onboarding URL Validation (#9507)

* New Onboarding URL Validation

* linting

* PR Feedback

packages/builder/src/components/start/CreateAppModal.svelte

@@ -26,7 +26,15 @@
 
   const values = writable({ name: "", url: null })
   const validation = createValidationStore()
-  $: validation.check($values)
+
+  $: {
+    const { name, url } = $values
+
+    validation.check({
+      name,
+      url: url?.[0] === "/" ? url.substring(1, url.length) : url,
+    })
+  }
 
   onMount(async () => {
     const lastChar = $auth.user?.firstName
@@ -87,7 +95,11 @@
     appValidation.url(validation, { apps: applications })
     appValidation.file(validation, { template })
     // init validation
-    validation.check($values)
+    const { name, url } = $values
+    validation.check({
+      name,
+      url: url?.[0] === "/" ? url.substring(1, url.length) : url,
+    })
   }
 
   async function createNewApp() {

packages/builder/src/components/start/UpdateAppModal.svelte

@@ -23,14 +23,25 @@
   })
   const validation = createValidationStore()
 
-  $: validation.check($values)
+  $: {
+    const { name, url } = $values
+
+    validation.check({
+      name,
+      url: url?.[0] === "/" ? url.substring(1, url.length) : url,
+    })
+  }
 
   const setupValidation = async () => {
     const applications = svelteGet(apps)
     appValidation.name(validation, { apps: applications, currentApp: app })
     appValidation.url(validation, { apps: applications, currentApp: app })
     // init validation
-    validation.check($values)
+    const { name, url } = $values
+    validation.check({
+      name,
+      url: url?.[0] === "/" ? url.substring(1, url.length) : url,
+    })
   }
 
   async function updateApp() {

packages/builder/src/constants/index.js

@@ -46,7 +46,7 @@ export const LAYOUT_NAMES = {
 // one or more word characters and whitespace
 export const APP_NAME_REGEX = /^[\w\s]+$/
 // zero or more non-whitespace characters
-export const APP_URL_REGEX = /^\S*$/
+export const APP_URL_REGEX = /^[0-9a-zA-Z-_]+$/
 
 export const DefaultAppTheme = {
   primaryColor: "var(--spectrum-global-color-blue-600)",

packages/builder/src/helpers/validation/yup/app.js

@@ -62,11 +62,9 @@ export const url = (validation, { apps, currentApp } = { apps: [] }) => {
         }
         // make it clear that this is a url path and cannot be a full url
         return (
-          value.startsWith("/") &&
           !value.includes("http") &&
           !value.includes("www") &&
-          !value.includes(".") &&
+          !value.includes(".")
-          value.length > 1 // just '/' is not valid
         )
       })
   )

packages/builder/src/pages/builder/portal/apps/onboarding/_components/NamePanel.svelte

@@ -1,6 +1,7 @@
 <script>
   import { Button, FancyForm, FancyInput } from "@budibase/bbui"
   import PanelHeader from "./PanelHeader.svelte"
+  import { APP_URL_REGEX } from "constants"
 
   export let name = ""
   export let url = ""
@@ -25,6 +26,10 @@
     if (url.length < 1) {
       return "URL must be provided"
     }
+
+    if (!APP_URL_REGEX.test(url)) {
+      return "Invalid URL"
+    }
   }
 </script>