Fixes (#18275)

web/src/components/indicators/StepIndicator.tsx

@@ -16,7 +16,7 @@ export default function StepIndicator({
   return (
     <div className="flex flex-row justify-evenly">
       {steps.map((name, idx) => (
-        <div className="flex flex-col items-center gap-2">
+        <div key={idx} className="flex flex-col items-center gap-2">
           <div
             className={cn(
               "flex size-16 items-center justify-center rounded-full",

web/src/components/input/TextEntry.tsx

@@ -18,18 +18,33 @@ type TextEntryProps = {
   allowEmpty?: boolean;
   onSave: (text: string) => void;
   children?: React.ReactNode;
+  regexPattern?: RegExp;
+  regexErrorMessage?: string;
 };
+
 export default function TextEntry({
   defaultValue = "",
   placeholder,
   allowEmpty = false,
   onSave,
   children,
+  regexPattern,
+  regexErrorMessage = "Input does not match the required format",
 }: TextEntryProps) {
   const formSchema = z.object({
-    text: allowEmpty
-      ? z.string().optional()
-      : z.string().min(1, "Field is required"),
+    text: z
+      .string()
+      .optional()
+      .refine(
+        (val) => {
+          if (!allowEmpty && !val) return false;
+          if (val && regexPattern) return regexPattern.test(val);
+          return true;
+        },
+        {
+          message: regexPattern ? regexErrorMessage : "Field is required",
+        },
+      ),
   });
 
   const form = useForm<z.infer<typeof formSchema>>({

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

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

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

@@ -20,6 +20,8 @@ type TextEntryDialogProps = {
   onSave: (text: string) => void;
   defaultValue?: string;
   allowEmpty?: boolean;
+  regexPattern?: RegExp;
+  regexErrorMessage?: string;
 };
 
 export default function TextEntryDialog({
@@ -30,6 +32,8 @@ export default function TextEntryDialog({
   onSave,
   defaultValue = "",
   allowEmpty = false,
+  regexPattern,
+  regexErrorMessage,
 }: TextEntryDialogProps) {
   const { t } = useTranslation("common");
 
@@ -44,6 +48,8 @@ export default function TextEntryDialog({
           defaultValue={defaultValue}
           allowEmpty={allowEmpty}
           onSave={onSave}
+          regexPattern={regexPattern}
+          regexErrorMessage={regexErrorMessage}
         >
           <DialogFooter className={cn("pt-4", isMobile && "gap-2")}>
             <Button type="button" onClick={() => setOpen(false)}>

web/src/pages/FaceLibrary.tsx

@@ -499,6 +499,8 @@ function LibrarySelector({
           setRenameFace(null);
         }}
         defaultValue={renameFace || ""}
+        regexPattern={/^[\p{L}\p{N}\s'_-]{1,50}$/u}
+        regexErrorMessage={t("description.invalidName")}
       />
 
       <DropdownMenu>
@@ -538,7 +540,7 @@ function LibrarySelector({
               className="group flex items-center justify-between"
             >
               <div
-                className="flex-grow cursor-pointer smart-capitalize"
+                className="flex-grow cursor-pointer"
                 onClick={() => setPageToggle(face)}
               >
                 {face}