feat: add next-international translations (#2)

* feat: add next-international translations
* chore: fix formatting
* chore: address pull request feedback

apps/nextjs/src/app/[locale]/init/user/_components/init-user-form.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Button, PasswordInput, Stack, TextInput } from "@mantine/core";
+import { useForm, zodResolver } from "@mantine/form";
+import type { z } from "zod";
+
+import { useScopedI18n } from "@alparr/translation/client";
+import { initUserSchema } from "@alparr/validation";
+
+import { showErrorNotification, showSuccessNotification } from "~/notification";
+import { api } from "~/utils/api";
+
+export const InitUserForm = () => {
+  const router = useRouter();
+  const t = useScopedI18n("user");
+  const { mutateAsync, error, isPending } = api.user.initUser.useMutation();
+  const form = useForm<FormType>({
+    validate: zodResolver(initUserSchema),
+    validateInputOnBlur: true,
+    validateInputOnChange: true,
+    initialValues: {
+      username: "",
+      password: "",
+      confirmPassword: "",
+    },
+  });
+
+  const handleSubmit = async (values: FormType) => {
+    console.log(values);
+    await mutateAsync(values, {
+      onSuccess: () => {
+        showSuccessNotification({
+          title: "User created",
+          message: "You can now log in",
+        });
+        router.push("/auth/login");
+      },
+      onError: () => {
+        showErrorNotification({
+          title: "User creation failed",
+          message: error?.message ?? "Unknown error",
+        });
+      },
+    });
+  };
+
+  return (
+    <Stack gap="xl">
+      <form
+        onSubmit={form.onSubmit(
+          (v) => void handleSubmit(v),
+          (err) => console.log(err),
+        )}
+      >
+        <Stack gap="lg">
+          <TextInput
+            label={t("field.username.label")}
+            {...form.getInputProps("username")}
+          />
+          <PasswordInput
+            label={t("field.password.label")}
+            {...form.getInputProps("password")}
+          />
+          <PasswordInput
+            label={t("field.passwordConfirm.label")}
+            {...form.getInputProps("confirmPassword")}
+          />
+          <Button type="submit" fullWidth loading={isPending}>
+            {t("action.create")}
+          </Button>
+        </Stack>
+      </form>
+    </Stack>
+  );
+};
+
+type FormType = z.infer<typeof initUserSchema>;

apps/nextjs/src/app/[locale]/init/user/page.tsx

@@ -0,0 +1,41 @@
+import { notFound } from "next/navigation";
+import { Card, Center, Stack, Text, Title } from "@mantine/core";
+
+import { db } from "@alparr/db";
+import { getScopedI18n } from "@alparr/translation/server";
+
+import { LogoWithTitle } from "~/components/layout/logo";
+import { InitUserForm } from "./_components/init-user-form";
+
+export default async function InitUser() {
+  const firstUser = await db.query.users.findFirst({
+    columns: {
+      id: true,
+    },
+  });
+
+  if (firstUser) {
+    notFound();
+  }
+
+  const t = await getScopedI18n("user.page.init");
+
+  return (
+    <Center>
+      <Stack align="center" mt="xl">
+        <LogoWithTitle />
+        <Stack gap={6} align="center">
+          <Title order={3} fw={400} ta="center">
+            {t("title")}
+          </Title>
+          <Text size="sm" c="gray.5" ta="center">
+            {t("subtitle")}
+          </Text>
+        </Stack>
+        <Card bg="dark.8" w={64 * 6} maw="90vw">
+          <InitUserForm />
+        </Card>
+      </Stack>
+    </Center>
+  );
+}