Add language selector

frontend/next-i18next.config.js

@@ -2,8 +2,8 @@
 const path = require('path');
 module.exports = {
   i18n: {
-    locales: ['en', 'nl', 'zh'],
+    locales: ['en', 'nl', 'de', 'es', 'zh'],
     defaultLocale: 'en',
-    localePath: path.resolve('./public/locales')
   },
+  localePath: path.resolve('./public/locales')
 };

frontend/public/locales/en/common.json

@@ -79,6 +79,7 @@
     "duration_minutes_choose_title": "Please choose a duration of the matches",
     "edit_club_button": "Edit Club",
     "edit_details_tab_title": "Edit details",
+    "edit_language_tab_title": "Change language",
     "edit_match_modal_title": "Edit Match",
     "edit_name_button": "Edit Name",
     "edit_password_tab_title": "Edit password",
@@ -106,6 +107,7 @@
     "invalid_email_validation": "Invalid email",
     "invalid_password_validation": "Invalid password",
     "iterations_input_label": "Iterations",
+    "language": "Language",
     "login_success_title": "Login successful",
     "logo_settings_title": "Logo Settings",
     "logout_success_title": "Logout successful",

frontend/src/components/forms/user.tsx

@@ -1,7 +1,8 @@
-import { Button, Tabs, TextInput } from '@mantine/core';
+import { Button, Select, Tabs, TextInput } from '@mantine/core';
 import { useForm } from '@mantine/form';
+import { BiGlobe } from '@react-icons/all-files/bi/BiGlobe';
 import { IconHash, IconLogout, IconUser } from '@tabler/icons-react';
-import { useTranslation } from 'next-i18next';
+import assert from 'assert';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -10,9 +11,8 @@ import { performLogoutAndRedirect } from '../../services/local_storage';
 import { updatePassword, updateUser } from '../../services/user';
 import { PasswordStrength } from '../utils/password';
 
-export default function UserForm({ user }: { user: UserInterface }) {
+export default function UserForm({ user, t, i18n }: { user: UserInterface; t: any; i18n: any }) {
   const router = useRouter();
-  const { t } = useTranslation();
   const details_form = useForm({
     initialValues: {
       name: user != null ? user.name : '',
@@ -35,6 +35,20 @@ export default function UserForm({ user }: { user: UserInterface }) {
     },
   });
 
+  const locales = [
+    { value: 'de', label: '🇩🇪 German' },
+    { value: 'en', label: '🇺🇸 English' },
+    { value: 'es', label: '🇪🇸 Spanish' },
+    { value: 'nl', label: '🇳🇱 Dutch' },
+    { value: 'zh', label: '🇨🇳 Chinese' },
+  ];
+
+  const changeLanguage = (newLocale: string | null) => {
+    const { pathname, asPath, query } = router;
+    assert(newLocale != null);
+    router.push({ pathname, query }, asPath, { locale: newLocale });
+  };
+
   return (
     <Tabs defaultValue="details">
       <Tabs.List>
@@ -44,9 +58,9 @@ export default function UserForm({ user }: { user: UserInterface }) {
         <Tabs.Tab value="password" leftSection={<IconHash size="1.0rem" />}>
           {t('edit_password_tab_title')}
         </Tabs.Tab>
-        {/*<Tabs.Tab value="settings" icon={<IconSettings size="1.0rem" />}>*/}
-        {/*  Settings*/}
-        {/*</Tabs.Tab>*/}
+        <Tabs.Tab value="language" leftSection={<BiGlobe size="1.0rem" />}>
+          {t('edit_language_tab_title')}
+        </Tabs.Tab>
       </Tabs.List>
       <Tabs.Panel value="details" pt="xs">
         <form
@@ -94,6 +108,15 @@ export default function UserForm({ user }: { user: UserInterface }) {
           </Button>
         </form>
       </Tabs.Panel>
+      <Tabs.Panel value="language" pt="xs">
+        <Select
+          clearable={false}
+          value={i18n.language}
+          label={t('language')}
+          data={locales}
+          onChange={async (lng) => changeLanguage(lng)}
+        />
+      </Tabs.Panel>
     </Tabs>
   );
 }

frontend/src/pages/user.tsx

@@ -14,14 +14,13 @@ export const getServerSideProps = async ({ locale }: { locale: string }) => ({
 });
 
 export default function HomePage() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const swrUserResponse = getUser();
   checkForAuthError(swrUserResponse);
   const user = swrUserResponse.data != null ? swrUserResponse.data.data : null;
 
-  let content;
-  content = user != null ? <UserForm user={user} /> : null;
+  let content = user != null ? <UserForm user={user} i18n={i18n} t={t} /> : null;
 
   if (swrUserResponse.isLoading) {
     content = (
@@ -34,7 +33,7 @@ export default function HomePage() {
   return (
     <Layout>
       <Title>{t('edit_profile_title')}</Title>
-      <Stack style={{ maxWidth: '400px' }}>{content}</Stack>
+      <Stack style={{ maxWidth: '40rem' }}>{content}</Stack>
     </Layout>
   );
 }