I18n app other (#24)

* New translation keys in en-US locale

* New translation keys in de-DE locale

* New translation keys in fr-FR locale

* New translation keys in it-IT locale

* New translation keys in pl-PL locale

* New translation keys in pt-PT locale

* New translation keys in tr-TR locale

* Add translation keys in app/invite, app/setup and other files

* Fix build

---------

Co-authored-by: Lokowitz <marvinlokowitz@gmail.com>

src/app/[orgId]/settings/sites/CreateSiteForm.tsx

@@ -57,11 +57,9 @@ const createSiteFormSchema = z.object({
         .string()
         .min(2, {
             message: "Name must be at least 2 characters."
-            message: "Name must be at least 2 characters."
         })
         .max(30, {
             message: "Name must not be longer than 30 characters."
-            message: "Name must not be longer than 30 characters."
         }),
     method: z.enum(["wireguard", "newt", "local"])
 });

src/app/invite/InviteStatusCard.tsx

@@ -45,9 +45,9 @@ export default function InviteStatusCard({
                         {t('inviteErrorNotValid')}
                     </p>
                     <ul className="list-disc list-inside text-sm space-y-2">
-                        <li>The invite may have expired</li>
-                        <li>The invite might have been revoked</li>
-                        <li>There could be a typo in the invite link</li>
+                        <li>{t('inviteErrorExpired')}</li>
+                        <li>{t('inviteErrorRevoked')}</li>
+                        <li>{t('inviteErrorTypo')}</li>
                     </ul>
                 </div>
             );

src/app/invite/page.tsx

@@ -5,7 +5,10 @@ import { AcceptInviteResponse } from "@server/routers/user";
 import { AxiosResponse } from "axios";
 import { redirect } from "next/navigation";
 import InviteStatusCard from "./InviteStatusCard";
-import { formatAxiosError } from "@app/lib/api";;
+import { formatAxiosError } from "@app/lib/api";
+import { useTranslations } from "next-intl";
+
+;
 
 export default async function InvitePage(props: {
     searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
@@ -20,12 +23,14 @@ export default async function InvitePage(props: {
 
     const user = await verifySession();
 
+    const t = useTranslations();
+
     const parts = tokenParam.split("-");
     if (parts.length !== 2) {
         return (
             <>
-                <h1>Invalid Invite</h1>
-                <p>The invite link is invalid.</p>
+                <h1>{t('inviteInvalid')}</h1>
+                <p>{t('inviteInvalidDescription')}</p>
             </>
         );
     }
@@ -52,15 +57,13 @@ export default async function InvitePage(props: {
     }
 
     function cardType() {
-        if (error.includes("Invite is not for this user")) {
+        if (error.includes(t('inviteErrorWrongUser'))) {
             return "wrong_user";
         } else if (
-            error.includes(
-                "User does not exist. Please create an account first."
-            )
+            error.includes(t('inviteErrorUserNotExists'))
         ) {
             return "user_does_not_exist";
-        } else if (error.includes("You must be logged in to accept an invite")) {
+        } else if (error.includes(t('inviteErrorLoginRequired'))) {
             return "not_logged_in";
         } else {
             return "rejected";

src/app/navigation.tsx

@@ -10,6 +10,7 @@ import {
     KeyRound,
     TicketCheck
 } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 export const orgLangingNavItems: SidebarNavItem[] = [
     {

src/app/not-found.tsx

@@ -1,14 +1,16 @@
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 
 export default async function NotFound() {
+    const t = useTranslations();
     return (
         <div className="w-full max-w-md mx-auto p-3 md:mt-32 text-center">
             <h1 className="text-6xl font-bold mb-4">404</h1>
             <h2 className="text-2xl font-semibold text-neutral-500 mb-4">
-                Page Not Found
+                {t('pageNotFound')}
             </h2>
             <p className="text-neutral-500 dark:text-neutral-700 mb-8">
-                Oops! The page you're looking for doesn't exist.
+                {t('pageNotFoundDescription')}
             </p>
         </div>
     );

src/app/setup/layout.tsx

@@ -11,6 +11,7 @@ import { ListUserOrgsResponse } from "@server/routers/org";
 import { internal } from "@app/lib/api";
 import { AxiosResponse } from "axios";
 import { authCookieHeader } from "@app/lib/api/cookies";
+import { useTranslations } from "next-intl";
 
 export const metadata: Metadata = {
     title: `Setup - Pangolin`,