feat: add next-international translations (#2)

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

apps/nextjs/src/app/[locale]/auth/login/_components/login-form.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Alert,
+  Button,
+  PasswordInput,
+  rem,
+  Stack,
+  TextInput,
+} from "@mantine/core";
+import { useForm, zodResolver } from "@mantine/form";
+import { IconAlertTriangle } from "@tabler/icons-react";
+import type { z } from "zod";
+
+import { signIn } from "@alparr/auth/client";
+import { useScopedI18n } from "@alparr/translation/client";
+import { signInSchema } from "@alparr/validation";
+
+export const LoginForm = () => {
+  const t = useScopedI18n("user");
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string>();
+  const form = useForm<FormType>({
+    validate: zodResolver(signInSchema),
+    initialValues: {
+      name: "",
+      password: "",
+    },
+  });
+
+  const handleSubmit = async (values: FormType) => {
+    setIsLoading(true);
+    setError(undefined);
+    await signIn("credentials", {
+      ...values,
+      redirect: false,
+      callbackUrl: "/",
+    })
+      .then((response) => {
+        if (!response?.ok) {
+          throw response?.error;
+        }
+
+        void router.push("/");
+      })
+      .catch((error: Error | string) => {
+        setIsLoading(false);
+        setError(error.toString());
+      });
+  };
+
+  return (
+    <Stack gap="xl">
+      <form onSubmit={form.onSubmit((v) => void handleSubmit(v))}>
+        <Stack gap="lg">
+          <TextInput
+            label={t("field.username.label")}
+            {...form.getInputProps("name")}
+          />
+          <PasswordInput
+            label={t("field.password.label")}
+            {...form.getInputProps("password")}
+          />
+          <Button type="submit" fullWidth loading={isLoading}>
+            {t("action.login")}
+          </Button>
+        </Stack>
+      </form>
+
+      {error && (
+        <Alert icon={<IconAlertTriangle size={rem(16)} />} color="red">
+          {error}
+        </Alert>
+      )}
+    </Stack>
+  );
+};
+
+type FormType = z.infer<typeof signInSchema>;

apps/nextjs/src/app/[locale]/auth/login/page.tsx

@@ -0,0 +1,29 @@
+import { Card, Center, Stack, Text, Title } from "@mantine/core";
+
+import { getScopedI18n } from "@alparr/translation/server";
+
+import { LogoWithTitle } from "~/components/layout/logo";
+import { LoginForm } from "./_components/login-form";
+
+export default async function Login() {
+  const t = await getScopedI18n("user.page.login");
+
+  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">
+          <LoginForm />
+        </Card>
+      </Stack>
+    </Center>
+  );
+}