Face setup wizard (#17203)

* Fix login page

* Increase face image size and add time ago

* Add component for indicating steps in a wizard

* Split out form inputs from dialog

* Add wizard for adding new face to library

* Simplify dialog

* Translations

* Fix scaling bug

* Fix key missing

* Improve multi select

* Adjust wording and spacing

* Add tip for face training

* Fix padding

* Remove text for buttons on mobile

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

@@ -1,3 +1,4 @@
+import TextEntry from "@/components/input/TextEntry";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -7,15 +8,8 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useCallback, useEffect } from "react";
-import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
-import { z } from "zod";
-
 type TextEntryDialogProps = {
   open: boolean;
   title: string;
@@ -35,35 +29,7 @@ export default function TextEntryDialog({
   defaultValue = "",
   allowEmpty = false,
 }: TextEntryDialogProps) {
-  const formSchema = z.object({
-    text: z.string(),
-  });
-
-  const { t } = useTranslation("components/dialog");
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: { text: defaultValue },
-  });
-  const fileRef = form.register("text");
-
-  // upload handler
-
-  const onSubmit = useCallback(
-    (data: z.infer<typeof formSchema>) => {
-      if (!allowEmpty && !data["text"]) {
-        return;
-      }
-      onSave(data["text"]);
-    },
-    [onSave, allowEmpty],
-  );
-
-  useEffect(() => {
-    if (open) {
-      form.reset({ text: defaultValue });
-    }
-  }, [open, defaultValue, form]);
+  const { t } = useTranslation("common");
 
   return (
     <Dialog open={open} defaultOpen={false} onOpenChange={setOpen}>
@@ -72,33 +38,20 @@ export default function TextEntryDialog({
           <DialogTitle>{title}</DialogTitle>
           {description && <DialogDescription>{description}</DialogDescription>}
         </DialogHeader>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)}>
-            <FormField
-              control={form.control}
-              name="text"
-              render={() => (
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      className="aspect-video h-8 w-full"
-                      type="text"
-                      {...fileRef}
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-            <DialogFooter className="pt-4">
-              <Button type="button" onClick={() => setOpen(false)}>
-                {t("button.cancel", { ns: "common" })}
-              </Button>
-              <Button variant="select" type="submit">
-                {t("button.save", { ns: "common" })}
-              </Button>
-            </DialogFooter>
-          </form>
-        </Form>
+        <TextEntry
+          defaultValue={defaultValue}
+          allowEmpty={allowEmpty}
+          onSave={onSave}
+        >
+          <DialogFooter className="pt-4">
+            <Button type="button" onClick={() => setOpen(false)}>
+              {t("button.cancel")}
+            </Button>
+            <Button variant="select" type="submit">
+              {t("button.save")}
+            </Button>
+          </DialogFooter>
+        </TextEntry>
       </DialogContent>
     </Dialog>
   );