web: add basic lingui

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/.babelrc

@@ -21,6 +21,7 @@
             {
                 "regenerator": true
             }
-        ]
+        ],
+        "macros"
     ]
 }

web/package.json

@@ -4,57 +4,80 @@
     "private": true,
     "license": "GNU GPLv3",
     "scripts": {
-        "build": "rollup -c ./rollup.config.js",
-        "watch": "rollup -c -w",
+        "extract": "lingui extract",
+        "build": "lingui compile && rollup -c ./rollup.config.js",
+        "watch": "lingui compile && rollup -c -w",
         "lint": "eslint . --max-warnings 0",
         "lit-analyse": "lit-analyzer src"
     },
+    "lingui": {
+        "sourceLocale": "en",
+        "locales": [
+            "en"
+        ],
+        "compileNamespace": "ts",
+        "catalogs": [
+            {
+                "path": "src/locales/{locale}",
+                "include": [
+                    "src"
+                ],
+                "exclude": [
+                    "**/node_modules/**",
+                    "**/dist/**"
+                ]
+            }
+        ]
+    },
     "dependencies": {
         "@babel/core": "^7.13.14",
         "@babel/plugin-proposal-decorators": "^7.13.5",
+        "@babel/plugin-transform-runtime": "^7.13.10",
         "@babel/preset-env": "^7.13.12",
         "@babel/preset-typescript": "^7.13.0",
         "@fortawesome/fontawesome-free": "^5.15.3",
+        "@lingui/cli": "^3.8.2",
+        "@lingui/core": "^3.8.2",
+        "@lingui/macro": "^3.8.2",
         "@patternfly/patternfly": "^4.96.2",
         "@polymer/iron-form": "^3.0.1",
         "@polymer/paper-input": "^3.2.1",
         "@rollup/plugin-babel": "^5.3.0",
+        "@rollup/plugin-replace": "^2.4.2",
+        "@rollup/plugin-typescript": "^8.2.1",
         "@sentry/browser": "^6.2.5",
         "@sentry/tracing": "^6.2.5",
         "@types/chart.js": "^2.9.31",
         "@types/codemirror": "0.0.108",
         "@types/grecaptcha": "^3.0.1",
+        "@typescript-eslint/eslint-plugin": "^4.20.0",
+        "@typescript-eslint/parser": "^4.20.0",
         "authentik-api": "file:api",
+        "babel-plugin-macros": "^3.0.1",
         "base64-js": "^1.5.1",
         "chart.js": "^2.9.4",
         "codemirror": "^5.60.0",
         "construct-style-sheets-polyfill": "^2.4.16",
+        "eslint-config-google": "^0.14.0",
+        "eslint-plugin-lit": "^1.3.0",
+        "eslint": "^7.23.0",
         "flowchart.js": "^1.15.0",
         "lit-element": "^2.4.0",
         "lit-html": "^1.3.0",
         "rapidoc": "^8.4.9",
-        "rollup": "^2.44.0",
+        "rollup-plugin-commonjs": "^10.1.0",
         "rollup-plugin-copy": "^3.4.0",
         "rollup-plugin-cssimport": "^1.0.2",
         "rollup-plugin-external-globals": "^0.6.1",
-        "tslib": "^2.1.0",
-        "webcomponent-qr-code": "^1.0.5",
-        "yaml": "^1.10.2"
-    },
-    "devDependencies": {
-        "@babel/plugin-transform-runtime": "^7.13.10",
-        "@rollup/plugin-typescript": "^8.2.1",
-        "@typescript-eslint/eslint-plugin": "^4.20.0",
-        "@typescript-eslint/parser": "^4.20.0",
-        "eslint": "^7.23.0",
-        "eslint-config-google": "^0.14.0",
-        "eslint-plugin-lit": "^1.3.0",
-        "rollup-plugin-commonjs": "^10.1.0",
         "rollup-plugin-minify-html-literals": "^1.2.6",
         "rollup-plugin-node-resolve": "^5.2.0",
         "rollup-plugin-sourcemaps": "^0.6.3",
         "rollup-plugin-terser": "^7.0.2",
+        "rollup": "^2.44.0",
         "ts-lit-plugin": "^1.2.1",
-        "typescript": "^4.2.3"
+        "tslib": "^2.1.0",
+        "typescript": "^4.2.3",
+        "webcomponent-qr-code": "^1.0.5",
+        "yaml": "^1.10.2"
     }
 }

web/rollup.config.js

@@ -7,6 +7,7 @@ import cssimport from "rollup-plugin-cssimport";
 import copy from "rollup-plugin-copy";
 import externalGlobals from "rollup-plugin-external-globals";
 import babel from '@rollup/plugin-babel';
+import replace from '@rollup/plugin-replace';
 
 const extensions = [
     '.js', '.jsx', '.ts', '.tsx',
@@ -107,6 +108,10 @@ export default [
                 babelHelpers: 'runtime',
                 include: ['src/**/*'],
             }),
+            replace({
+                'process.env.NODE_ENV': JSON.stringify(isProdBuild ? 'production' : "development"),
+                preventAssignment: true
+            }),
             externalGlobals({
                 django: "django",
             }),
@@ -138,6 +143,10 @@ export default [
                 babelHelpers: 'runtime',
                 include: ['src/**/*'],
             }),
+            replace({
+                'process.env.NODE_ENV': JSON.stringify(isProdBuild ? 'production' : "development"),
+                preventAssignment: true
+            }),
             externalGlobals({
                 django: "django"
             }),

web/src/interfaces/AdminInterface.ts

@@ -4,6 +4,7 @@ import { me } from "../api/Users";
 import { SidebarItem } from "../elements/sidebar/Sidebar";
 import { ID_REGEX, SLUG_REGEX, UUID_REGEX } from "../elements/router/Route";
 import { Interface } from "./Interface";
+import "./locale";
 
 export const SIDEBAR_ITEMS: SidebarItem[] = [
     new SidebarItem("Library", "/library"),

web/src/interfaces/FlowInterface.ts

@@ -1,4 +1,3 @@
-import "construct-style-sheets-polyfill";
-
+import "./locale";
 import "../elements/messages/MessageContainer";
 import "../flows/FlowExecutor";

web/src/interfaces/locale.ts

@@ -0,0 +1,7 @@
+import { i18n } from '@lingui/core'
+
+// messages.js is generated by the cli
+import { messages } from '../locales/en';
+
+i18n.load('en', messages)
+i18n.activate('en')

web/src/locales/.gitignore

@@ -0,0 +1 @@
+*.ts