web: bump @lingui/cli from 3.17.2 to 4.0.0 in /web (#5387)

* web: bump @lingui/cli from 3.17.2 to 4.0.0 in /web

Bumps [@lingui/cli](https://github.com/lingui/js-lingui) from 3.17.2 to 4.0.0.
- [Release notes](https://github.com/lingui/js-lingui/releases)
- [Changelog](https://github.com/lingui/js-lingui/blob/main/CHANGELOG.md)
- [Commits](https://github.com/lingui/js-lingui/compare/v3.17.2...v4.0.0)

---
updated-dependencies:
- dependency-name: "@lingui/cli"
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* update

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* also bump typescript

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* fix logic error

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: dependabot[bot] <support@github.com>
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>

web/lingui.config.js

@@ -0,0 +1,31 @@
+import { formatter } from "@lingui/format-po-gettext";
+
+export default {
+    sourceLocale: "en",
+    locales: [
+        "en",
+        "pseudo-LOCALE",
+        "fr_FR",
+        "tr",
+        "es",
+        "pl",
+        "zh_TW",
+        "zh-Hans",
+        "zh-Hant",
+        "de",
+    ],
+    pseudoLocale: "pseudo-LOCALE",
+    fallbackLocales: {
+        "pseudo-LOCALE": "en",
+        "default": "en",
+    },
+    compileNamespace: "ts",
+    catalogs: [
+        {
+            path: "src/locales/{locale}",
+            include: ["src"],
+            exclude: ["**/node_modules/**", "**/dist/**"],
+        },
+    ],
+    format: formatter({ lineNumbers: false }),
+};

web/package.json

@@ -15,43 +15,6 @@
         "tsc": "lingui compile && tsc --noEmit -p .",
         "background-image": "npx @squoosh/cli -d src/assets/images --resize '{\"enabled\":true,\"width\":2560,\"method\":\"lanczos3\",\"fitMethod\":\"contain\",\"premultiply\":true,\"linearRGB\":true}' --mozjpeg '{\"quality\":75,\"baseline\":false,\"arithmetic\":false,\"progressive\":true,\"optimize_coding\":true,\"smoothing\":0,\"color_space\":3,\"quant_table\":3,\"trellis_multipass\":false,\"trellis_opt_zero\":false,\"trellis_opt_table\":false,\"trellis_loops\":1,\"auto_subsample\":true,\"chroma_subsample\":2,\"separate_chroma_quality\":false,\"chroma_quality\":75}' src/assets/images/flow_background.jpg"
     },
-    "lingui": {
-        "sourceLocale": "en",
-        "locales": [
-            "en",
-            "pseudo-LOCALE",
-            "fr_FR",
-            "tr",
-            "es",
-            "pl",
-            "zh_TW",
-            "zh-Hans",
-            "zh-Hant",
-            "de"
-        ],
-        "formatOptions": {
-            "lineNumbers": false
-        },
-        "pseudoLocale": "pseudo-LOCALE",
-        "fallbackLocales": {
-            "pseudo-LOCALE": "en",
-            "default": "en"
-        },
-        "format": "po-gettext",
-        "compileNamespace": "ts",
-        "catalogs": [
-            {
-                "path": "src/locales/{locale}",
-                "include": [
-                    "src"
-                ],
-                "exclude": [
-                    "**/node_modules/**",
-                    "**/dist/**"
-                ]
-            }
-        ]
-    },
     "dependencies": {
         "@babel/core": "^7.21.4",
         "@babel/plugin-proposal-decorators": "^7.21.0",
@@ -69,10 +32,11 @@
         "@goauthentik/api": "^2023.4.1-1681914191",
         "@hcaptcha/types": "^1.0.3",
         "@jackfranklin/rollup-plugin-markdown": "^0.4.0",
-        "@lingui/cli": "^3.17.2",
+        "@lingui/cli": "^4.0.0",
-        "@lingui/core": "^3.17.2",
+        "@lingui/core": "^4.0.0",
-        "@lingui/detect-locale": "^3.17.2",
+        "@lingui/detect-locale": "^4.0.0",
-        "@lingui/macro": "^3.17.2",
+        "@lingui/format-po-gettext": "^4.0.0",
+        "@lingui/macro": "^4.0.0",
         "@patternfly/patternfly": "^4.224.2",
         "@rollup/plugin-babel": "^6.0.3",
         "@rollup/plugin-commonjs": "^24.1.0",
@@ -117,7 +81,7 @@
         "ts-lit-plugin": "^1.2.1",
         "tslib": "^2.5.0",
         "turnstile-types": "^1.1.2",
-        "typescript": "^4.9.5",
+        "typescript": "^5.0.4",
         "webcomponent-qr-code": "^1.1.1",
         "yaml": "^2.2.2"
     }

web/src/common/ui/locale.ts

@@ -1,8 +1,6 @@
 import { EVENT_LOCALE_CHANGE } from "@goauthentik/common/constants";
 import { globalAK } from "@goauthentik/common/global";
 import { messages as enLocale } from "@goauthentik/locales/en";
-import { PluralCategory } from "make-plural";
-import { en } from "make-plural/plurals";
 
 import { Messages, i18n } from "@lingui/core";
 import { fromNavigator, fromUrl } from "@lingui/detect-locale";
@@ -10,7 +8,6 @@ import { t } from "@lingui/macro";
 
 interface Locale {
     locale: Messages;
-    plurals: (n: string | number, ord?: boolean | undefined) => PluralCategory;
 }
 
 export const LOCALES: {
@@ -24,7 +21,6 @@ export const LOCALES: {
         locale: async () => {
             return {
                 locale: enLocale,
-                plurals: en,
             };
         },
     },
@@ -34,7 +30,6 @@ export const LOCALES: {
         locale: async () => {
             return {
                 locale: (await import("@goauthentik/locales/pseudo-LOCALE")).messages,
-                plurals: en,
             };
         },
     },
@@ -44,7 +39,6 @@ export const LOCALES: {
         locale: async () => {
             return {
                 locale: (await import("@goauthentik/locales/fr_FR")).messages,
-                plurals: (await import("make-plural/plurals")).fr,
             };
         },
     },
@@ -54,7 +48,6 @@ export const LOCALES: {
         locale: async () => {
             return {
                 locale: (await import("@goauthentik/locales/tr")).messages,
-                plurals: (await import("make-plural/plurals")).tr,
             };
         },
     },
@@ -64,7 +57,6 @@ export const LOCALES: {
         locale: async () => {
             return {
                 locale: (await import("@goauthentik/locales/es")).messages,
-                plurals: (await import("make-plural/plurals")).es,
             };
         },
     },
@@ -74,7 +66,6 @@ export const LOCALES: {
         locale: async () => {
             return {
                 locale: (await import("@goauthentik/locales/pl")).messages,
-                plurals: (await import("make-plural/plurals")).pl,
             };
         },
     },
@@ -84,7 +75,6 @@ export const LOCALES: {
         locale: async () => {
             return {
                 locale: (await import("@goauthentik/locales/zh_TW")).messages,
-                plurals: (await import("make-plural/plurals")).zh,
             };
         },
     },
@@ -94,7 +84,6 @@ export const LOCALES: {
         locale: async () => {
             return {
                 locale: (await import("@goauthentik/locales/zh-Hans")).messages,
-                plurals: (await import("make-plural/plurals")).zh,
             };
         },
     },
@@ -104,7 +93,6 @@ export const LOCALES: {
         locale: async () => {
             return {
                 locale: (await import("@goauthentik/locales/zh-Hant")).messages,
-                plurals: (await import("make-plural/plurals")).zh,
             };
         },
     },
@@ -114,7 +102,6 @@ export const LOCALES: {
         locale: async () => {
             return {
                 locale: (await import("@goauthentik/locales/de")).messages,
-                plurals: (await import("make-plural/plurals")).de,
             };
         },
     },
@@ -124,7 +111,6 @@ const DEFAULT_FALLBACK = () => "en";
 
 export function autoDetectLanguage() {
     // Always load en locale at the start so we have something and don't error
-    i18n.loadLocaleData("en", { plurals: en });
     i18n.load("en", enLocale);
     i18n.activate("en");
 
@@ -180,7 +166,6 @@ export function activateLocale(code: string) {
         if (i18n.locale === code) {
             return;
         }
-        i18n.loadLocaleData(locale.code, { plurals: localeData.plurals });
         i18n.load(locale.code, localeData.locale);
         i18n.activate(locale.code);
         window.dispatchEvent(

web/src/flow/stages/authenticator_validate/AuthenticatorValidateStage.ts

@@ -199,7 +199,7 @@ export class AuthenticatorValidateStage
                     .host=${this}
                     .challenge=${this.challenge}
                     .deviceChallenge=${this.selectedDeviceChallenge}
-                    .showBackButton=${(this.challenge?.deviceChallenges.length || []) > 1}
+                    .showBackButton=${(this.challenge?.deviceChallenges || []).length > 1}
                 >
                 </ak-stage-authenticator-validate-code>`;
             case DeviceClassesEnum.Webauthn:
@@ -207,7 +207,7 @@ export class AuthenticatorValidateStage
                     .host=${this}
                     .challenge=${this.challenge}
                     .deviceChallenge=${this.selectedDeviceChallenge}
-                    .showBackButton=${(this.challenge?.deviceChallenges.length || []) > 1}
+                    .showBackButton=${(this.challenge?.deviceChallenges || []).length > 1}
                 >
                 </ak-stage-authenticator-validate-webauthn>`;
             case DeviceClassesEnum.Duo:
@@ -215,7 +215,7 @@ export class AuthenticatorValidateStage
                     .host=${this}
                     .challenge=${this.challenge}
                     .deviceChallenge=${this.selectedDeviceChallenge}
-                    .showBackButton=${(this.challenge?.deviceChallenges.length || []) > 1}
+                    .showBackButton=${(this.challenge?.deviceChallenges || []).length > 1}
                 >
                 </ak-stage-authenticator-validate-duo>`;
         }