feat: Implement i18n. Fixed #58

ui/package.json

@@ -25,11 +25,15 @@
     "graphql-request": "^5.1.0",
     "graphql-tag": "^2.12.6",
     "http-proxy-middleware": "^2.0.6",
+    "i18next": "^22.4.9",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-http-backend": "^2.1.1",
     "notistack": "^2.0.8",
     "oidc-client-ts": "^2.1.0",
     "react": "^18.2.0",
     "react-admin": "^4.4.4",
     "react-dom": "^18.2.0",
+    "react-i18next": "^12.1.5",
     "react-oidc-context": "^2.2.0",
     "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
@@ -65,4 +69,4 @@
     ]
   },
   "proxy": "http://localhost:8080"
-}
+}

ui/public/static/langs/en.json

@@ -0,0 +1,60 @@
+{
+	"login_local": "Local Sign In",
+	"login_signin": "Sign In",
+	"login_forgot_password": "Forgot password?",
+	"login_remember": "Remember me",
+	"login_signup": "Don't have an account? Sign Up",
+	"login_password": "Password",
+	"login_email": "Email Address",
+	"login_oidc": "OIDC Sign In",
+	"app_signin_silent": "Signing you in...",
+	"app_signout_redirect": "Signing you out...",
+	"app_loading": "Loading...",
+	"app_error": "Oops... {{error}}",
+	"type_environment": "Environment",
+	"type_application": "Application",
+	"type_location": "Location",
+	"type_version": "Version",
+	"type_date": "Date",
+	"dashboard_title": "Dashboard",
+	"dashboard_welcome": "Hello {{username}}, welcome to your dashboard",
+	"dashboard_versions_title": "Total",
+	"dashboard_versions_description": "Total number of versions",
+	"dashboard_applications_title": "Applications",
+	"dashboard_applications_description": "Unique applications",
+	"dashboard_environments_title": "Environments",
+	"dashboard_environments_description": "Unique environments",
+	"dashboard_locations_title": "Locations",
+	"dashboard_locations_description": "Unique locations",
+	"table_version_timestamp": "Timestamp",
+	"table_version_application": "Application",
+	"table_version_environment": "Environment",
+	"table_version_location": "Location",
+	"table_version_version": "Version",
+	"chart_title": "Deploy",
+	"chart_subtitle": "{{type}} deploys per day",
+	"chart_group_by": "Group by",
+	"feed_title": "Feed",
+	"feed_subtitle": "Live feed",
+	"feed_item_deployed": "Deployed <b>{{item}}</b> to <b>{{target}}</b>",
+	"profile_token": "Token dump",
+	"settings_title": "Settings",
+	"settings_subtitle": "Application settings",
+	"settings_notifications": "Notifications",
+	"settings_notifications_toggle": "Enable browser notifications",
+	"versions_title": "Versions",
+	"versions_subtitle": "List of versions",
+	"form_version_title": "Add version",
+	"form_version_description": "Fill out the form below to add a new version.",
+	"form_version_submit": "Add version",
+	"form_version_cancel": "Cancel",
+	"menu_dashboard": "Dashboard",
+	"menu_chart": "Chart",
+	"menu_versions": "Versions",
+	"menu_last": "Last",
+	"menu_feed": "Feed",
+	"menu_settings": "Settings",
+	"app_my_account": "My Account",
+	"app_profile": "Profile",
+	"app_logout": "Logout"
+}

ui/public/static/langs/nl.json

@@ -0,0 +1,57 @@
+{
+	"login_local": "Local Sign In",
+	"login_signin": "Log In",
+	"login_forgot_password": "Wachtwoord vergeten?",
+	"login_remember": "Herinner me",
+	"login_signup": "Heb je nog geen account? Registreer",
+	"login_password": "Wachtwoord",
+	"login_email": "E-mail adres",
+	"login_oidc": "OIDC Log In",
+	"app_loading": "Laden...",
+	"app_error": "Oeps... {{error}}",
+	"type_environment": "Omgeving",
+	"type_application": "Applicatie",
+	"type_location": "Locatie",
+	"type_version": "Versie",
+	"type_date": "Datum",
+	"dashboard_title": "Dashboard",
+	"dashboard_welcome": "Hallo {{username}}, welkom op je dashboard",
+	"dashboard_versions_title": "Totaal",
+	"dashboard_versions_description": "Totaal aantal versions",
+	"dashboard_applications_title": "Applicaties",
+	"dashboard_applications_description": "Unieke applicaties",
+	"dashboard_environments_title": "Omgevingen",
+	"dashboard_environments_description": "Unieke omgevingen",
+	"dashboard_locations_title": "Locaties",
+	"dashboard_locations_description": "Unieke locaties",
+	"table_version_timestamp": "Datum",
+	"table_version_application": "Applicatie",
+	"table_version_environment": "Omgeving",
+	"table_version_location": "Locatie",
+	"table_version_version": "Versie",
+	"chart_title": "Deploy",
+	"chart_subtitle": "{{type}} deploys per dag",
+	"chart_group_by": "Groepeer met",
+	"feed_title": "Feed",
+	"feed_subtitle": "Live feed",
+	"feed_item_deployed": "Deployed <b>{{item}}</b> to <b>{{target}}</b>",
+	"settings_title": "Instellingen",
+	"settings_subtitle": "Applicatie instellingen",
+	"settings_notifications": "Meldingen",
+	"settings_notifications_toggle": "Zet browser meldingen aan",
+	"versions_title": "Versies",
+	"versions_subtitle": "Versielijst",
+	"form_version_title": "Nieuwe versie",
+	"form_version_description": "Vul het onderstaande formulier om een nieuwe versie aan te maken.",
+	"form_version_submit": "Nieuwe versie",
+	"form_version_cancel": "Annuleren",
+	"menu_dashboard": "Dashboard",
+	"menu_chart": "Grafiek",
+	"menu_versions": "Versies",
+	"menu_last": "Laatste",
+	"menu_feed": "Feed",
+	"menu_settings": "Instellingen",
+	"app_my_account": "Mijn Account",
+	"app_profile": "Profiel",
+	"app_logout": "Uitloggen"
+}

ui/src/App.tsx

@@ -16,26 +16,29 @@ import Toolbar from "@mui/material/Toolbar";
 import { useAuth } from "react-oidc-context";
 import { SnackbarProvider } from "notistack";
 import Websockets from "./components/Websocket";
+import "./components/I18n";
+import { useTranslation } from "react-i18next";
 
 const App = () => {
   const auth = useAuth();
+  const { t } = useTranslation("aa");
 
   switch (auth.activeNavigator) {
     case "signinSilent":
-      return <div>Signing you in...</div>;
+      return <div>{t("signin_silent")}</div>;
     case "signoutRedirect":
-      return <div>Signing you out...</div>;
+      return <div>{t("app_signout_redirect")}</div>;
   }
 
   if (auth.isLoading) {
-    return <div>Loading...</div>;
+    return <div>{t("app_loading")}</div>;
   }
 
   if (auth.error) {
     if (auth.error.message === "Token is not active") {
       window.location.reload();
     }
-    return <div>Oops... {auth.error.message}</div>;
+    return <div>{t("app_error", { error: auth.error.message })}</div>;
   }
 
   if (auth.isAuthenticated) {