From c914ac64cfbaacaf5fe3c7486ea9901ce4828387 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Wed, 11 Oct 2023 17:04:54 +0200
Subject: [PATCH] fix(frontend): add a validation for base url (#2434)

* fix(frontend): add a validation for base url

* fix(frontend): simplify regex

* fix(frontend): fix style
---
 .../lib/components/InstanceSettings.svelte    | 19 +++++++++++++++++--
 .../lib/components/SuperadminSettings.svelte  |  2 +-
 .../src/lib/components/instanceSettings.ts    |  1 +
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/InstanceSettings.svelte b/frontend/src/lib/components/InstanceSettings.svelte
index a68b4dba8eca7..709ce62b784b5 100644
--- a/frontend/src/lib/components/InstanceSettings.svelte
+++ b/frontend/src/lib/components/InstanceSettings.svelte
@@ -27,7 +27,9 @@
 				key: 'base_url',
 				fieldType: 'text',
 				placeholder: 'https://windmill.com',
-				storage: 'setting'
+				storage: 'setting',
+				isValid: (value: string | undefined) =>
+					value ? value?.startsWith('http') && !value?.endsWith('/') : true
 			},
 			{
 				label: 'Request Size Limit In MB',
@@ -288,11 +290,15 @@
 											<Tooltip>{setting.tooltip}</Tooltip>
 										{/if}
 										{#if values}
+											{@const hasError = setting.isValid && !setting.isValid(values[setting.key])}
 											{#if setting.fieldType == 'text'}
 												<input
 													disabled={setting.ee_only != undefined && !$enterpriseLicense}
 													type="text"
 													placeholder={setting.placeholder}
+													class={hasError
+														? 'border !border-red-700 !border-opacity-30 !focus:border-red-700 !focus:border-opacity-30 !bg-red-100'
+														: ''}
 													bind:value={values[setting.key]}
 												/>
 											{:else if setting.fieldType == 'textarea'}
@@ -353,6 +359,13 @@
 													<SecondsInput bind:seconds={values[setting.key]} />
 												</div>
 											{/if}
+
+											{#if hasError}
+												<span class="text-red-500 text-xs">
+													Base url must start with http:// or https:// and must not end with a
+													trailing slash.
+												</span>
+											{/if}
 										{:else}
 											<input disabled placeholder="Loading..." />
 										{/if}
@@ -491,6 +504,8 @@
 	on:click={async () => {
 		await saveSettings()
 		sendUserToast('Settings updated')
-	}}>Save</Button
+	}}
 >
+	Save
+</Button>
 <div class="pb-8" />
diff --git a/frontend/src/lib/components/SuperadminSettings.svelte b/frontend/src/lib/components/SuperadminSettings.svelte
index 20d646e56a5a2..7742cf1dadc78 100644
--- a/frontend/src/lib/components/SuperadminSettings.svelte
+++ b/frontend/src/lib/components/SuperadminSettings.svelte
@@ -139,7 +139,7 @@
 							</div>
 						</TabContent>
 						<TabContent value="settings">
-							<div class="h-full overflow-auto"> <InstanceSettings /> </div>
+							<div class="h-full"> <InstanceSettings /> </div>
 						</TabContent>
 					</svelte:fragment>
 				</Tabs>
diff --git a/frontend/src/lib/components/instanceSettings.ts b/frontend/src/lib/components/instanceSettings.ts
index 4dae6f3c82665..02857bf3162b1 100644
--- a/frontend/src/lib/components/instanceSettings.ts
+++ b/frontend/src/lib/components/instanceSettings.ts
@@ -17,6 +17,7 @@ export interface Setting {
 		| 'email'
 		| 'license_key'
 	storage: SettingStorage
+	isValid?: (value: any) => boolean
 }
 
 export type SettingStorage = 'setting' | 'config'