Invite users improvements (#31)

* Translated version of the project settings page

* Added messages in different languages

* Added dutch support to the app

* Smaller condition fix

* PR comments

* Translations added

* PR comments

* PR comments

* PR comments

* PR comments

* PR comments

* Test

* Test

* Test

* Test

* Test

* PR comments

Author: lumburovskalina

i18n/i18n.ts

@@ -0,0 +1,27 @@
+import i18n from 'i18next'
+import settingsEN from './locales/en/settings.json'
+
+import settingsDE from './locales/de/settings.json'
+
+import settingsNL from './locales/nl/settings.json'
+
+i18n.init({
+    resources: {
+        en: {
+            settings: settingsEN
+        },
+        de: {
+            settings: settingsDE,
+        },
+        nl: {
+            settings: settingsNL,
+        },
+    },
+    ns: ["settings"],
+    fallbackLng: 'en',
+    interpolation: {
+        escapeValue: false // not needed for react as it escapes by default
+    },
+});
+
+export default i18n

i18n/locales/de/settings.json

@@ -0,0 +1,19 @@
+{
+    "title": "Kontoeinstellungen",
+    "heading": "Profilverwaltung und Sicherheitseinstellungen",
+    "subtitle": "Profileinstellungen",
+    "changePassword": "Passwort ändern",
+    "setPassword": "Passwort festlegen",
+    "backUpCodes": "Verwalten von 2FA-Backup-Wiederherstellungscodes",
+    "backUpCodesDescription": "Wiederherstellungscodes können in Paniksituationen verwendet werden, wenn Sie den Zugriff auf Ihr 2FA-Gerät verloren haben.",
+    "totpAuthenticator": "2FA TOTP Authenticator App verwalten",
+    "addTotpAuthenticator": "Fügen Sie Ihrem Konto eine TOTP-Authentifikator-App hinzu, um die Sicherheit Ihres Kontos zu verbessern.",
+    "popularAuthenticatorApps": "Beliebte Authenticator-Apps sind",
+    "and": "und",
+    "back": "Zurück",
+    "email": "E-Mail",
+    "firstName": "Vorname",
+    "lastName": "Nachname",
+    "password": "Passwort",
+    "save": "Speichern"
+}

i18n/locales/en/settings.json

@@ -0,0 +1,19 @@
+{
+    "title": "Account settings",
+    "heading": "Profile management and security settings",
+    "subtitle": "Profile Settings",
+    "changePassword": "Change Password",
+    "setPassword": "Set Password",
+    "backUpCodes": "Manage 2FA backup recovery codes",
+    "backUpCodesDescription": "Recovery codes can be used in panic situations where you have lost access to your 2FA device.",
+    "totpAuthenticator": "Manage 2FA TOTP Authenticator App",
+    "addTotpAuthenticator": "Add a TOTP Authenticator App to your account to improve your account security.",
+    "popularAuthenticatorApps": "Popular Authenticator Apps are",
+    "and": "and",
+    "back": "Back",
+    "email": "E-Mail",
+    "firstName": "First Name",
+    "lastName": "Last Name",
+    "password": "Password",
+    "save": "Save"
+}

i18n/locales/nl/settings.json

@@ -0,0 +1,19 @@
+{
+    "title": "Accountinstellingen",
+    "heading": "Profielbeheer en beveiligingsinstellingen",
+    "subtitle": "Profielinstellingen",
+    "changePassword": "Wachtwoord wijzigen",
+    "setPassword": "Wachtwoord instellen",
+    "backUpCodes": "Beheer 2FA-back-upherstelcodes",
+    "backUpCodesDescription": "Herstelcodes kunnen worden gebruikt in panieksituaties waarin u geen toegang meer hebt tot uw 2FA-apparaat.",
+    "totpAuthenticator": "Beheer 2FA TOTP Authenticator-app",
+    "addTotpAuthenticator": "Voeg een TOTP Authenticator-app toe aan uw account om de beveiliging ervan te verbeteren.",
+    "popularAuthenticatorApps": "Populaire authenticatie-apps zijn",
+    "and": "En",
+    "back": "Rug",
+    "email": "E-mail",
+    "firstName": "Voornaam",
+    "lastName": "Achternaam",
+    "password": "Wachtwoord",
+    "save": "Redden"
+}

package.json

@@ -25,6 +25,7 @@
     "eslint": "8.38.0",
     "eslint-config-next": "13.3.0",
     "express": "^4.18.2",
+    "i18next": "^25.3.2",
     "next": "^12.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -42,4 +43,4 @@
     "postcss": "^8.4.23",
     "tailwindcss": "^3.4.4"
   }
-}
+}

pages/_app.tsx

@@ -1,8 +1,10 @@
+import i18n from "@/i18n/i18n";
 import "../styles/tailwind.css"
 import '@/submodules/tailwind-config/global.css';
 import { theme, globalStyles, ThemeProps } from "@ory/themes"
 import type { AppProps } from "next/app"
 import Head from "next/head"
+import { I18nextProvider } from "react-i18next";
 import { ToastContainer } from "react-toastify"
 import "react-toastify/dist/ReactToastify.css"
 import { ThemeProvider } from "styled-components"
@@ -14,7 +16,7 @@ const GlobalStyle = createGlobalStyle((props: ThemeProps) =>
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
-    <>
+    <I18nextProvider i18n={i18n}>
       <Head>
         <title>kern</title>
         <link rel="icon" type="image/x-icon"
@@ -27,7 +29,7 @@ function MyApp({ Component, pageProps }: AppProps) {
           <ToastContainer />
         </ThemeProvider>
       </div>
-    </>
+    </I18nextProvider>
 
   )
 }