From e64e3a9e458c9f27d2d6a73b8f4821f8120d94d5 Mon Sep 17 00:00:00 2001
From: Gerard Burns <Ghrehh@users.noreply.github.com>
Date: Tue, 21 Feb 2023 15:03:58 +0000
Subject: [PATCH] New Onboarding URL Validation (#9507)

* New Onboarding URL Validation

* linting

* PR Feedback
---
 .../src/components/start/CreateAppModal.svelte   | 16 ++++++++++++++--
 .../src/components/start/UpdateAppModal.svelte   | 15 +++++++++++++--
 packages/builder/src/constants/index.js          |  2 +-
 .../builder/src/helpers/validation/yup/app.js    |  4 +---
 .../apps/onboarding/_components/NamePanel.svelte |  5 +++++
 5 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 9ebc046cdc..e3ce048a89 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/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() {
diff --git a/packages/builder/src/components/start/UpdateAppModal.svelte b/packages/builder/src/components/start/UpdateAppModal.svelte
index a41ebccaeb..4385175816 100644
--- a/packages/builder/src/components/start/UpdateAppModal.svelte
+++ b/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() {
diff --git a/packages/builder/src/constants/index.js b/packages/builder/src/constants/index.js
index 803cafcffb..f68202f81e 100644
--- a/packages/builder/src/constants/index.js
+++ b/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)",
diff --git a/packages/builder/src/helpers/validation/yup/app.js b/packages/builder/src/helpers/validation/yup/app.js
index 4e41576d46..8498255cc9 100644
--- a/packages/builder/src/helpers/validation/yup/app.js
+++ b/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.length > 1 // just '/' is not valid
+          !value.includes(".")
         )
       })
   )
diff --git a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/NamePanel.svelte b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/NamePanel.svelte
index 730cfbe4a2..1264b63531 100644
--- a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/NamePanel.svelte
+++ b/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>