From 47ba90f191bd0ef9e74bb5ab52e5daf95e87a7be Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Sun, 9 Nov 2025 10:47:30 +0100
Subject: [PATCH] refactor: ensure preset names are url safe

---
 .../feature-panel/composite/URLPresetForm.tsx  | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/features/app-settings/panel/feature-panel/composite/URLPresetForm.tsx b/apps/client/src/features/app-settings/panel/feature-panel/composite/URLPresetForm.tsx
index f242a5183..d8b9cd512 100644
--- a/apps/client/src/features/app-settings/panel/feature-panel/composite/URLPresetForm.tsx
+++ b/apps/client/src/features/app-settings/panel/feature-panel/composite/URLPresetForm.tsx
@@ -9,6 +9,8 @@ import Textarea from '../../../../../common/components/input/textarea/Textarea';
 import Select, { SelectOption } from '../../../../../common/components/select/Select';
 import { useUpdateUrlPreset } from '../../../../../common/hooks-query/useUrlPresets';
 import { preventEscape } from '../../../../../common/utils/keyEvent';
+import { isUrlSafe } from '../../../../../common/utils/regex';
+import { enDash } from '../../../../../common/utils/styleUtils';
 import { generateUrlPresetOptions } from '../../../../../common/utils/urlPresets';
 import * as Panel from '../../../panel-utils/PanelUtils';
 
@@ -52,6 +54,7 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
     formState: { errors, isSubmitting, isValid, isDirty },
   } = useForm<URLPreset>({
     defaultValues: urlPreset ?? defaultValues,
+    mode: 'onChange',
     resetOptions: {
       keepDirtyValues: true,
     },
@@ -110,7 +113,15 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
       <Panel.InlineElements>
         <div>
           <Panel.Description>Alias</Panel.Description>
-          <Input {...register('alias', { required: 'Alias is required' })} />
+          <Input
+            {...register('alias', {
+              required: 'Alias is required',
+              pattern: {
+                value: isUrlSafe,
+                message: 'Field can only contain URL safe characters (a-z, 0-9, _ and -)',
+              },
+            })}
+          />
         </div>
         <div className={style.expand}>
           <Panel.Description>Generate options (paste URL to generate options)</Panel.Description>
@@ -120,7 +131,10 @@ export default function URLPresetForm({ urlPreset, onClose }: URLPresetFormProps
           </Panel.InlineElements>
         </div>
       </Panel.InlineElements>
-      <div> - or -</div>
+      {errors.alias?.message && <Panel.Error>{errors.alias.message}</Panel.Error>}
+      <div>
+        {enDash} or {enDash}
+      </div>
       <div>2. Choose a view and its parameters</div>
       <div>
         <Panel.Description>Target</Panel.Description>