Add new languages (#716)

* some translation updates

* Add a note about the weblate

* Add the newly supported languages

* get stuff working

* address feedback

Author: teelur

client/public/locales/de/translation.json

@@ -1,13 +1,13 @@
 {
   "10_months": "10 Months",
   "11_months": "11 Months",
-  "12_months": "12 months",
+  "12_months": "12 Months",
   "1_month": "1 Month",
   "2_months": "2 Months",
-  "3_months": "3 months",
+  "3_months": "3 Months",
   "4_months": "4 Months",
   "5_months": "5 Months",
-  "6_months": "6 months",
+  "6_months": "6 Months",
   "7_months": "7 Months",
   "8_months": "8 Months",
   "9_months": "9 Months",
@@ -120,6 +120,7 @@
   "date_is_required": "Date is required.",
   "date_range": "Date Range",
   "days_since_deleted": "{{days}} days since deleted",
+  "de": "German",
   "decimal_separator": "Decimal Separator",
   "decimal_separator_required_message": "Decimal separator is required.",
   "delete": "Delete",
@@ -321,6 +322,7 @@
   "please_select_valid_csv_file_message": "Please select a valid CSV file.",
   "preferred_currency": "Preferred Currency",
   "preferred_language": "Preferred Language",
+  "preferred_language_description": "Translations may be incorrect or incomplete. If you notice any issues, please consider contributing a fix on <0>Weblate</0>.",
   "purchase_date": "Purchase Date",
   "purchase_price": "Purchase Price",
   "purchased_on_for": "Purchased on {{date}} for {{price}}.",
@@ -437,5 +439,6 @@
   "view_and_restore_deleted_assets": "View and restore deleted assets.",
   "view_and_restore_deleted_transactions": "View and restore deleted transactions.",
   "welcome_to": "Welcome to",
-  "widget_no_items_configured_message": "No items are configured for this widget."
+  "widget_no_items_configured_message": "No items are configured for this widget.",
+  "zh_hans": "Chinese (Simplified)"
 }

client/public/locales/en-us/translation.json

@@ -1,29 +1,29 @@
 {
-    "10_months": "10 Mois",
-    "11_months": "11 Mois",
-    "12_months": "12 Mois",
-    "1_month": "1 Mois",
-    "2_months": "2 Mois",
-    "4_months": "4 mois",
-    "5_months": "5 mois",
-    "6_months": "6 mois",
-    "7_months": "7 mois",
-    "3_months": "3 mois",
-    "8_months": "8 mois",
-    "9_months": "9 mois",
-    "account": "Compte",
-    "a_simple_app_for_managing_monthly_budgets": "Une application simple pour gérer vos budgets mensuels.",
-    "account_column_is_required_message": "La colonne « Compte » est obligatoire.",
-    "account_created_email_verification_message": "Compte créé. Vérifiez votre boîte mail pour trouver le message de vérification.",
-    "account_created_successfully_message": "Compte créé avec succès.",
-    "account_details": "Détails du compte",
-    "account_is_required": "Un compte est nécessaire.",
-    "account_mapping": "Cartographie des comptes",
-    "account_name": "Nom du compte",
-    "account_trends": "Tendances du compte",
-    "account_type": "Type de compte",
-    "accounts": "Comptes",
-    "accounts_settings": "Paramètres des comptes",
-    "add_balance": "Ajouter un solde",
-    "add_category": "Ajouter une catégorie"
+  "10_months": "10 Mois",
+  "11_months": "11 Mois",
+  "12_months": "12 Mois",
+  "1_month": "1 Mois",
+  "2_months": "2 Mois",
+  "3_months": "3 Mois",
+  "4_months": "4 Mois",
+  "5_months": "5 Mois",
+  "6_months": "6 Mois",
+  "7_months": "7 Mois",
+  "8_months": "8 Mois",
+  "9_months": "9 Mois",
+  "a_simple_app_for_managing_monthly_budgets": "Une application simple pour gérer vos budgets mensuels.",
+  "account": "Compte",
+  "account_column_is_required_message": "La colonne « Compte » est obligatoire.",
+  "account_created_email_verification_message": "Compte créé. Vérifiez votre boîte mail pour trouver le message de vérification.",
+  "account_created_successfully_message": "Compte créé avec succès.",
+  "account_details": "Détails du compte",
+  "account_is_required": "Un compte est nécessaire.",
+  "account_mapping": "Cartographie des comptes",
+  "account_name": "Nom du compte",
+  "account_trends": "Tendances du compte",
+  "account_type": "Type de compte",
+  "accounts": "Comptes",
+  "accounts_settings": "Paramètres des comptes",
+  "add_balance": "Ajouter un solde",
+  "add_category": "Ajouter une catégorie"
 }

client/public/locales/fr/translation.json

@@ -4,6 +4,7 @@ import { notifications } from "@mantine/notifications";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { AxiosResponse } from "axios";
 import React from "react";
+import { Trans, useTranslation } from "react-i18next";
 import { useAuth } from "~/providers/AuthProvider/AuthProvider";
 import { translateAxiosError } from "~/helpers/requests";
 import {
@@ -15,7 +16,7 @@ import {
 import Card from "~/components/core/Card/Card";
 import PrimaryText from "~/components/core/Text/PrimaryText/PrimaryText";
 import Select from "~/components/core/Select/Select/Select";
-import { useTranslation } from "react-i18next";
+import DimmedText from "~/components/core/Text/DimmedText/DimmedText";
 
 const UserSettings = (): React.ReactNode => {
   const currencyField = useField({
@@ -108,7 +109,28 @@ const UserSettings = (): React.ReactNode => {
               />
               <Select
                 label={
-                  <PrimaryText size="sm">{t("preferred_language")}</PrimaryText>
+                  <Stack gap="0">
+                    <PrimaryText size="sm">
+                      {t("preferred_language")}
+                    </PrimaryText>
+                    <DimmedText size="xs">
+                      <Trans
+                        i18nKey="preferred_language_description"
+                        components={[
+                          <a
+                            key="link"
+                            href="https://hosted.weblate.org/engage/budget-board/"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            style={{
+                              color: "inherit",
+                              textDecoration: "underline",
+                            }}
+                          />,
+                        ]}
+                      />
+                    </DimmedText>
+                  </Stack>
                 }
                 placeholder={t("select_your_preferred_language")}
                 data={Languages.map((lang: LanguageItem) => ({

…/public/locales/zh_Hans/translation.json …/public/locales/zh-hans/translation.jsonclient/public/locales/zh_Hans/translation.json renamed to client/public/locales/zh-hans/translation.json client/public/locales/zh_Hans/translation.json renamed to client/public/locales/zh-hans/translation.json

@@ -34,4 +34,6 @@ export class LanguageItem {
 export const Languages: LanguageItem[] = [
   { value: "default", label: "system_default" },
   { value: "en-us", label: "en_us" },
+  { value: "de", label: "de" },
+  { value: "zh-hans", label: "zh_hans" },
 ];

client/src/app/Authorized/PageContent/Settings/UserSettings/UserSettings.tsx

@@ -23,7 +23,14 @@ public static class SupportedLanguages
 {
     public const string SystemDefault = "default";
     public const string EnglishUnitedStates = "en-us";
-    public static List<string> AllLanguages { get; } = [SystemDefault, EnglishUnitedStates];
+    public const string German = "de";
+    public const string ChineseSimplified = "zh-hans";
+
+    public static List<string> SupportedCultureNames { get; } =
+    [EnglishUnitedStates, German, ChineseSimplified];
+
+    public static List<string> AllUserLanguageOptions { get; } =
+    [SystemDefault, .. SupportedCultureNames];
 }
 
 public class UserSettings

client/src/models/userSettings.ts

@@ -64,7 +64,7 @@ public async Task UpdateUserSettingsAsync(Guid userGuid, IUserSettingsUpdateRequ
 
         if (!string.IsNullOrEmpty(request.Language))
         {
-            var isValidLanguage = SupportedLanguages.AllLanguages.Contains(
+            var isValidLanguage = SupportedLanguages.AllUserLanguageOptions.Contains(
                 request.Language.ToLower()
             );
             if (!isValidLanguage)

server/BudgetBoard.Database/Models/UserSettings.cs

@@ -299,25 +299,26 @@
 // Activate the CORS policy
 app.UseCors(MyAllowSpecificOrigins);
 
-// Add localization support
-var supportedCultures = new[] { "en-US" };
+// Enable authentication and authorization after CORS Middleware
+// processing (UseCors) in case the Authorization Middleware tries
+// to initiate a challenge before the CORS Middleware has a chance
+// to set the appropriate headers.
+app.UseAuthentication();
+app.UseAuthorization();
+
+// Add localization support after authentication so user identity is available
+var supportedCultures = SupportedLanguages.SupportedCultureNames.ToArray();
 var localizationOptions = new RequestLocalizationOptions()
     .SetDefaultCulture(supportedCultures[0])
     .AddSupportedCultures(supportedCultures)
     .AddSupportedUICultures(supportedCultures);
 
 // Insert custom user language provider at the beginning of the list
+// Falls back to browser locale if user hasn't configured a language
 localizationOptions.RequestCultureProviders.Insert(0, new UserLanguageCultureProvider());
 
 app.UseRequestLocalization(localizationOptions);
 
-// Enable authentication and authorization after CORS Middleware
-// processing (UseCors) in case the Authorization Middleware tries
-// to initiate a challenge before the CORS Middleware has a chance
-// to set the appropriate headers.
-app.UseAuthentication();
-app.UseAuthorization();
-
 app.MapControllers();
 
 // Automatically apply any Db changes

server/BudgetBoard.Service/UserSettingsService.cs

@@ -63,6 +63,7 @@ HttpContext httpContext
             // If there's any error reading the database, fall through to the next provider
         }
 
+        // User has no language preference or set to "default", fall back to browser locale
         return null;
     }
 }