Merge branch 'rec'

i18n-config.ts

@@ -0,0 +1,6 @@
+export const i18n = {
+  defaultLocale: "en",
+  locales: ["en", "fr"],
+} as const
+
+export type Locale = (typeof i18n)["locales"][number]

package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@auth/prisma-adapter": "^1.0.1",
+    "@formatjs/intl-localematcher": "^0.4.0",
     "@hookform/resolvers": "^3.2.0",
     "@next-auth/prisma-adapter": "^1.0.7",
     "@next/bundle-analyzer": "^13.4.13",
@@ -68,6 +69,7 @@
     "lodash": "^4.17.21",
     "lodash.isequal": "^4.5.0",
     "lucide-react": "^0.263.0",
+    "negotiator": "^0.6.3",
     "next": "^13.4.13",
     "next-auth": "^4.22.5",
     "next-compose-plugins": "^2.2.1",
@@ -102,6 +104,7 @@
     "@types/bcryptjs": "^2.4.2",
     "@types/crypto-js": "^4.1.1",
     "@types/lodash.isequal": "^4.5.6",
+    "@types/negotiator": "^0.6.1",
     "@types/node": "^20.4.9",
     "@types/react": "^18.2.19",
     "@types/react-dom": "^18.2.7",

renovate.json

@@ -4,8 +4,9 @@
   "dependencyDashboard": true,
   "packageRules": [
     {
-      "updateTypes": ["minor", "patch"],
+      "matchDepTypes": ["devDependencies"],
       "automerge": true
     }
-  ]
+  ],
+  "baseBranches": ["dev"]
 }

src/app/(not-protected)/page.tsx → src/app/[lang]/(not-protected)/page.tsx

@@ -2,27 +2,37 @@ import Link from "next/link"
 import { ThemeSwitch } from "@/components/theme/theme-switch"
 import { buttonVariants } from "@/components/ui/button"
 import { authRoutes } from "@/lib/auth/constants"
+import { getDictionary } from "@/lib/langs"
+import { Locale } from "i18n-config"
+
+export default async function Home({
+  params: { lang },
+}: {
+  params: {
+    lang: Locale
+  }
+}) {
+  const dictionary = await getDictionary(lang)
 
-export default function Home() {
   return (
     <>
       <main className="container flex flex-1 flex-col items-center justify-center gap-3">
-        <h1 className="text-4xl font-bold">Hello World</h1>
+        <h1 className="text-4xl font-bold">{dictionary.homePage.title}</h1>
         <nav className="flex flex-col items-center justify-center">
           <ul className="flex flex-row items-center justify-center gap-2">
             <li>
               <Link href={authRoutes.signIn[0]} className={buttonVariants({ variant: "ghost" })}>
-                Sign In
+                {dictionary.signIn}
               </Link>
             </li>
             <li>
               <Link href={authRoutes.signUp[0]} className={buttonVariants({ variant: "ghost" })}>
-                Sign Up
+                {dictionary.signUp}
               </Link>
             </li>
             <li>
               <Link href="/profile" className={buttonVariants({ variant: "ghost" })}>
-                Profile
+                {dictionary.profile}
               </Link>
             </li>
           </ul>

src/app/(protected)/profile/page.tsx → src/app/[lang]/(protected)/profile/page.tsx

@@ -2,29 +2,38 @@ import { getServerSession } from "next-auth"
 import SignoutButton from "@/components/auth/sign-out-button"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
 import { nextAuthOptions } from "@/lib/auth"
+import { getDictionary } from "@/lib/langs"
+import { Locale } from "i18n-config"
 import SeeDetailsToggle from "./see-details-toggle"
 
-export default async function Profile() {
+export default async function Profile({
+  params: { lang },
+}: {
+  params: {
+    lang: Locale
+  }
+}) {
+  const dictionary = await getDictionary(lang)
   const session = await getServerSession(nextAuthOptions)
 
   return (
     <main className="container flex flex-1 flex-col items-center justify-center p-6">
       <div>
         <Card className="relative z-10 m-auto max-w-full">
           <CardHeader>
-            <CardTitle>Profile</CardTitle>
+            <CardTitle>{dictionary.profile}</CardTitle>
           </CardHeader>
           <CardContent>
-            <p className="text-muted-foreground">The following data are retrieve server-side.</p>
+            <p className="text-muted-foreground">{dictionary.profilePage.serverSideData}</p>
             <pre className="mt-2 overflow-auto rounded bg-muted p-2">{JSON.stringify(session, null, 2)}</pre>
           </CardContent>
           <CardFooter>
             <div className="ml-auto">
-              <SignoutButton />
+              <SignoutButton>{dictionary.signOut}</SignoutButton>
             </div>
           </CardFooter>
         </Card>
-        <SeeDetailsToggle />
+        <SeeDetailsToggle dictionary={dictionary} />
       </div>
     </main>
   )

src/app/(protected)/profile/see-details-toggle.tsx → src/app/[lang]/(protected)/profile/see-details-toggle.tsx

@@ -1,16 +1,19 @@
 import ProfileDetails from "@/components/profile/profile-details"
 import UserActiveSessions from "@/components/profile/sessions/user-active-sessions"
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
+import { TDictionary } from "@/lib/langs"
 
-export default function SeeDetailsToggle() {
+export default function SeeDetailsToggle({ dictionary }: { dictionary: TDictionary }) {
   return (
     <div className="-mt-4 rounded-b-lg border bg-card p-2 pt-6 text-muted-foreground shadow-sm">
       <Accordion type="single" collapsible>
         <AccordionItem value="session-toggle" className="border-b-0">
-          <AccordionTrigger className="flex-none gap-1 p-0">See details</AccordionTrigger>
+          <AccordionTrigger className="flex-none gap-1 p-0">
+            {dictionary.profilePage.profileDetails.toggle}
+          </AccordionTrigger>
           <AccordionContent>
-            <UserActiveSessions />
-            <ProfileDetails />
+            <UserActiveSessions dictionary={dictionary} />
+            <ProfileDetails dictionary={dictionary} />
           </AccordionContent>
         </AccordionItem>
       </Accordion>

src/app/[lang]/(sys-auth)/privacy-acceptance.tsx

@@ -0,0 +1,18 @@
+import Link from "next/link"
+import { TDictionary } from "@/lib/langs"
+
+export default function PrivacyAcceptance({ dictionary }: { dictionary: TDictionary }) {
+  return (
+    <p className="px-8 text-center text-sm text-muted-foreground">
+      {dictionary.auth.clickingAggreement}{" "}
+      <Link href="/terms" className="underline underline-offset-4 hover:text-primary">
+        {dictionary.auth.termsOfService}
+      </Link>{" "}
+      {dictionary.and}{" "}
+      <Link href="/privacy" className="underline underline-offset-4 hover:text-primary">
+        {dictionary.auth.privacyPolicy}
+      </Link>
+      .
+    </p>
+  )
+}

src/app/[lang]/(sys-auth)/providers.tsx

@@ -0,0 +1,9 @@
+import { getProviders } from "next-auth/react"
+import GithubSignIn from "@/components/auth/github-sign-in"
+import { TDictionary } from "@/lib/langs"
+
+export default async function Providers({ dictionary }: { dictionary: TDictionary }) {
+  const providers = await getProviders()
+
+  return <>{providers?.github && <GithubSignIn provider={providers.github} dictionary={dictionary} />}</>
+}

src/app/(sys-auth)/sign-in/page.tsx → src/app/[lang]/(sys-auth)/sign-in/page.tsx

@@ -1,17 +1,23 @@
 import Link from "next/link"
-import { getProviders } from "next-auth/react"
-import GithubSignIn from "@/components/auth/github-sign-in"
 import { LoginUserAuthForm } from "@/components/auth/login-user-auth-form"
 import { buttonVariants } from "@/components/ui/button"
 import { authRoutes } from "@/lib/auth/constants"
+import { getDictionary } from "@/lib/langs"
 import { cn } from "@/lib/utils"
+import { Locale } from "i18n-config"
+import PrivacyAcceptance from "../privacy-acceptance"
+import Providers from "../providers"
 
 export default async function SignInPage({
   searchParams,
+  params: { lang },
 }: {
   searchParams: { [key: string]: string | string[] | undefined }
+  params: {
+    lang: Locale
+  }
 }) {
-  const providers = await getProviders()
+  const dictionary = await getDictionary(lang)
 
   return (
     <main className="container relative grid flex-1 flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0">
@@ -27,32 +33,22 @@ export default async function SignInPage({
       <div className="lg:p-8">
         <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
           <div className="flex flex-col space-y-2 text-center">
-            <h1 className="text-2xl font-semibold tracking-tight">Login to your account</h1>
-            <p className="text-sm text-muted-foreground">Enter your details below.</p>
+            <h1 className="text-2xl font-semibold tracking-tight">{dictionary.signInPage.loginToYourAccount}</h1>
+            <p className="text-sm text-muted-foreground">{dictionary.signInPage.enterDetails}</p>
           </div>
           <div className="grid gap-6">
-            <LoginUserAuthForm searchParams={searchParams} />
+            <LoginUserAuthForm searchParams={searchParams} dictionary={dictionary} />
             <div className="relative">
               <div className="absolute inset-0 flex items-center">
                 <span className="w-full border-t" />
               </div>
               <div className="relative flex justify-center text-xs uppercase">
-                <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
+                <span className="bg-background px-2 text-muted-foreground">{dictionary.auth.orContinueWith}</span>
               </div>
             </div>
-            {providers?.github && <GithubSignIn provider={providers.github} />}
+            <Providers dictionary={dictionary} />
           </div>
-          <p className="px-8 text-center text-sm text-muted-foreground">
-            By clicking continue, you agree to our{" "}
-            <Link href="/terms" className="underline underline-offset-4 hover:text-primary">
-              Terms of Service
-            </Link>{" "}
-            and{" "}
-            <Link href="/privacy" className="underline underline-offset-4 hover:text-primary">
-              Privacy Policy
-            </Link>
-            .
-          </p>
+          <PrivacyAcceptance dictionary={dictionary} />
         </div>
       </div>
     </main>

src/app/(sys-auth)/sign-up/credentials/page.tsx → src/app/[lang]/(sys-auth)/sign-up/credentials/page.tsx

@@ -2,12 +2,20 @@ import { redirect } from "next/navigation"
 import { RegisterUserAuthForm } from "@/components/auth/register-user-auth-form"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { authRoutes } from "@/lib/auth/constants"
+import { getDictionary } from "@/lib/langs"
+import { Locale } from "i18n-config"
 
-export default function SignupByCredentials({
+export default async function SignupByCredentials({
   searchParams,
+  params: { lang },
 }: {
   searchParams: { [key: string]: string | string[] | undefined }
+  params: {
+    lang: Locale
+  }
 }) {
+  const dictionary = await getDictionary(lang)
+
   //? If there is no email in the search params, redirect to the sign-up page
   if (!searchParams?.email) {
     redirect(authRoutes.signUp[0])
@@ -17,10 +25,10 @@ export default function SignupByCredentials({
     <main className="container relative flex flex-1 flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0">
       <Card className="w-[500px]">
         <CardHeader>
-          <CardTitle>Create an account</CardTitle>
+          <CardTitle>{dictionary.signUpPage.createAnAccount}</CardTitle>
         </CardHeader>
         <CardContent>
-          <RegisterUserAuthForm className="gap-3" searchParams={searchParams} />
+          <RegisterUserAuthForm className="gap-3" searchParams={searchParams} dictionary={dictionary} />
         </CardContent>
       </Card>
     </main>