add language selection to the settings page

lib/api/controllers/users/userId/updateUserById.ts

@@ -5,6 +5,7 @@ import removeFile from "@/lib/api/storage/removeFile";
 import createFile from "@/lib/api/storage/createFile";
 import createFolder from "@/lib/api/storage/createFolder";
 import sendChangeEmailVerificationRequest from "@/lib/api/sendChangeEmailVerificationRequest";
+import { i18n } from "next-i18next.config";
 
 const emailEnabled =
   process.env.EMAIL_FROM && process.env.EMAIL_SERVER ? true : false;
@@ -204,6 +205,7 @@ export default async function updateUserById(
       collectionOrder: data.collectionOrder.filter(
         (value, index, self) => self.indexOf(value) === index
       ),
+      locale: i18n.locales.includes(data.locale) ? data.locale : "en",
       archiveAsScreenshot: data.archiveAsScreenshot,
       archiveAsPDF: data.archiveAsPDF,
       archiveAsWaybackMachine: data.archiveAsWaybackMachine,

lib/client/getServerSideProps.ts

@@ -24,7 +24,7 @@ const getServerSideProps: GetServerSideProps = async (ctx) => {
     if (user) {
       return {
         props: {
-          ...(await serverSideTranslations(user.locale, ["common"])),
+          ...(await serverSideTranslations(user.locale ?? "en", ["common"])),
         },
       };
     }

pages/settings/account.tsx

@@ -14,6 +14,7 @@ import Checkbox from "@/components/Checkbox";
 import { dropdownTriggerer } from "@/lib/client/utils";
 import EmailChangeVerificationModal from "@/components/ModalContent/EmailChangeVerificationModal";
 import Button from "@/components/ui/Button";
+import { i18n } from "next-i18next.config";
 
 const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
 
@@ -200,6 +201,28 @@ export default function Account() {
                 />
               </div>
             ) : undefined}
+
+            <div>
+              <p className="mb-2">Language</p>
+              <select
+                onChange={(e) => {
+                  setUser({ ...user, locale: e.target.value });
+                }}
+                className="select border border-neutral-content focus:outline-none focus:border-primary duration-100 w-full bg-base-200 rounded-[0.375rem] min-h-0 h-[2.625rem] leading-4 p-2"
+              >
+                {i18n.locales.map((locale) => (
+                  <option
+                    key={locale}
+                    value={locale}
+                    selected={user.locale === locale}
+                  >
+                    {new Intl.DisplayNames(locale, { type: "language" }).of(
+                      locale
+                    ) || ""}
+                  </option>
+                ))}
+              </select>
+            </div>
           </div>
 
           <div className="sm:row-span-2 sm:justify-self-center my-3">