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/input/ImageEntry.tsx

@@ -0,0 +1,58 @@
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useCallback } from "react";
+import { useForm } from "react-hook-form";
+
+import { z } from "zod";
+
+type ImageEntryProps = {
+  onSave: (file: File) => void;
+  children?: React.ReactNode;
+};
+export default function ImageEntry({ onSave, children }: ImageEntryProps) {
+  const formSchema = z.object({
+    file: z.instanceof(FileList, { message: "Please select an image file." }),
+  });
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  });
+  const fileRef = form.register("file");
+
+  // upload handler
+
+  const onSubmit = useCallback(
+    (data: z.infer<typeof formSchema>) => {
+      if (!data["file"] || Object.keys(data.file).length == 0) {
+        return;
+      }
+
+      onSave(data["file"]["0"]);
+    },
+    [onSave],
+  );
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField
+          control={form.control}
+          name="file"
+          render={() => (
+            <FormItem>
+              <FormControl>
+                <Input
+                  className="aspect-video h-40 w-full"
+                  type="file"
+                  {...fileRef}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+        {children}
+      </form>
+    </Form>
+  );
+}

web/src/components/input/TextEntry.tsx

@@ -0,0 +1,68 @@
+import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useCallback } from "react";
+import { useForm } from "react-hook-form";
+
+import { z } from "zod";
+
+type TextEntryProps = {
+  defaultValue?: string;
+  placeholder?: string;
+  allowEmpty?: boolean;
+  onSave: (text: string) => void;
+  children?: React.ReactNode;
+};
+export default function TextEntry({
+  defaultValue,
+  placeholder,
+  allowEmpty,
+  onSave,
+  children,
+}: TextEntryProps) {
+  const formSchema = z.object({
+    text: z.string(),
+  });
+
+  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],
+  );
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField
+          control={form.control}
+          name="text"
+          render={() => (
+            <FormItem>
+              <FormControl>
+                <Input
+                  className="aspect-video h-8 w-full"
+                  placeholder={placeholder}
+                  type="text"
+                  {...fileRef}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+        {children}
+      </form>
+    </Form>
+  );
+}