Don't allow # in face name

web/public/locales/en/views/faceLibrary.json

@@ -2,7 +2,8 @@
   "description": {
     "addFace": "Add a new collection to the Face Library by uploading your first image.",
     "placeholder": "Enter a name for this collection",
-    "invalidName": "Invalid name. Names can only include letters, numbers, spaces, apostrophes, underscores, and hyphens."
+    "invalidName": "Invalid name. Names can only include letters, numbers, spaces, apostrophes, underscores, and hyphens.",
+    "nameCannotContainHash": "Name cannot contain #."
   },
   "details": {
     "timestamp": "Timestamp",

web/src/components/input/TextEntry.tsx

@@ -20,6 +20,8 @@ type TextEntryProps = {
   children?: React.ReactNode;
   regexPattern?: RegExp;
   regexErrorMessage?: string;
+  forbiddenPattern?: RegExp;
+  forbiddenErrorMessage?: string;
 };
 
 export default function TextEntry({
@@ -30,11 +32,16 @@ export default function TextEntry({
   children,
   regexPattern,
   regexErrorMessage = "Input does not match the required format",
+  forbiddenPattern,
+  forbiddenErrorMessage = "Input contains invalid characters",
 }: TextEntryProps) {
   const formSchema = z.object({
     text: z
       .string()
       .optional()
+      .refine((val) => !val || !forbiddenPattern?.test(val), {
+        message: forbiddenErrorMessage,
+      })
       .refine(
         (val) => {
           if (!allowEmpty && !val) return false;

web/src/components/overlay/detail/FaceCreateWizardDialog.tsx

@@ -128,6 +128,8 @@ export default function CreateFaceWizardDialog({
             }}
             regexPattern={/^[\p{L}\p{N}\s'_-]{1,50}$/u}
             regexErrorMessage={t("description.invalidName")}
+            forbiddenPattern={/#/}
+            forbiddenErrorMessage={t("description.nameCannotContainHash")}
           >
             <div className="flex justify-end py-2">
               <Button variant="select" type="submit">

web/src/components/overlay/dialog/TextEntryDialog.tsx

@@ -22,6 +22,8 @@ type TextEntryDialogProps = {
   allowEmpty?: boolean;
   regexPattern?: RegExp;
   regexErrorMessage?: string;
+  forbiddenPattern?: RegExp;
+  forbiddenErrorMessage?: string;
 };
 
 export default function TextEntryDialog({
@@ -34,6 +36,8 @@ export default function TextEntryDialog({
   allowEmpty = false,
   regexPattern,
   regexErrorMessage,
+  forbiddenPattern,
+  forbiddenErrorMessage,
 }: TextEntryDialogProps) {
   const { t } = useTranslation("common");
 
@@ -50,6 +54,8 @@ export default function TextEntryDialog({
           onSave={onSave}
           regexPattern={regexPattern}
           regexErrorMessage={regexErrorMessage}
+          forbiddenPattern={forbiddenPattern}
+          forbiddenErrorMessage={forbiddenErrorMessage}
         >
           <DialogFooter className={cn("pt-4", isMobile && "gap-2")}>
             <Button type="button" onClick={() => setOpen(false)}>

web/src/pages/FaceLibrary.tsx

@@ -560,6 +560,8 @@ function LibrarySelector({
         defaultValue={renameFace || ""}
         regexPattern={/^[\p{L}\p{N}\s'_-]{1,50}$/u}
         regexErrorMessage={t("description.invalidName")}
+        forbiddenPattern={/#/}
+        forbiddenErrorMessage={t("description.nameCannotContainHash")}
       />
 
       <DropdownMenu modal={false}>