From a777ecc933d4008ae3b4dbab2cdf72414d1d7607 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Tue, 1 Dec 2020 09:46:59 +0100
Subject: [PATCH] web: start implementing translation in JS

---
 passbook/core/templates/base/skeleton.html        |  1 +
 passbook/root/urls.py                             |  2 ++
 web/.prettierignore                               |  3 ---
 web/.prettierrc.json                              |  4 ----
 web/rollup.config.js                              |  1 +
 web/src/django.d.ts                               | 10 ++++++++++
 web/src/elements/table/Table.ts                   | 11 +++++------
 web/src/pages/RouterOutlet.ts                     |  3 ++-
 web/src/pages/applications/ApplicationListPage.ts |  7 ++++---
 9 files changed, 25 insertions(+), 17 deletions(-)
 delete mode 100644 web/.prettierignore
 delete mode 100644 web/.prettierrc.json
 create mode 100644 web/src/django.d.ts

diff --git a/passbook/core/templates/base/skeleton.html b/passbook/core/templates/base/skeleton.html
index bd2d6c9c0..a132af44e 100644
--- a/passbook/core/templates/base/skeleton.html
+++ b/passbook/core/templates/base/skeleton.html
@@ -17,6 +17,7 @@
         <link rel="stylesheet" type="text/css" href="{% static 'node_modules/@patternfly/patternfly/patternfly-addons.css' %}">
         <link rel="stylesheet" type="text/css" href="{% static 'node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css' %}">
         <link rel="stylesheet" type="text/css" href="{% static 'dist/passbook.css' %}">
+        <script src="{% url 'javascript-catalog' %}"></script>
         <script src="{% static 'dist/main.js' %}" type="module"></script>
         {% block head %}
         {% endblock %}
diff --git a/passbook/root/urls.py b/passbook/root/urls.py
index 1cb733aaa..cdedb8d8e 100644
--- a/passbook/root/urls.py
+++ b/passbook/root/urls.py
@@ -5,6 +5,7 @@ from django.contrib import admin
 from django.urls import include, path
 from django.views.generic import RedirectView
 from structlog import get_logger
+from django.views.i18n import JavaScriptCatalog
 
 from passbook.core.views import error
 from passbook.lib.utils.reflection import get_apps
@@ -56,6 +57,7 @@ for _passbook_app in get_apps():
 urlpatterns += [
     path("administration/django/", admin.site.urls),
     path("metrics/", MetricsView.as_view(), name="metrics"),
+    path("-/jsi18n/", JavaScriptCatalog.as_view(), name='javascript-catalog'),
 ]
 
 if settings.DEBUG:
diff --git a/web/.prettierignore b/web/.prettierignore
deleted file mode 100644
index 777860bfc..000000000
--- a/web/.prettierignore
+++ /dev/null
@@ -1,3 +0,0 @@
-# Ignore artifacts:
-dist/
-coverage
diff --git a/web/.prettierrc.json b/web/.prettierrc.json
deleted file mode 100644
index a0e24ebd2..000000000
--- a/web/.prettierrc.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-    "printWidth": 100,
-    "jsxBracketSameLine": true
-}
diff --git a/web/rollup.config.js b/web/rollup.config.js
index 2bdd41896..5b26fb941 100644
--- a/web/rollup.config.js
+++ b/web/rollup.config.js
@@ -39,5 +39,6 @@ export default [
         watch: {
             clearScreen: false,
         },
+        external: ['django']
     },
 ];
diff --git a/web/src/django.d.ts b/web/src/django.d.ts
new file mode 100644
index 000000000..e6c6a9329
--- /dev/null
+++ b/web/src/django.d.ts
@@ -0,0 +1,10 @@
+declare module 'django' {
+    export = django;
+}
+declare namespace django {
+    function gettext(name: string): string;
+    function ngettext(singular: string, plural: string, count: number): string;
+    function gettext_noop(msgid: string): string;
+    function pgettext(context: string, msgid: string): string;
+    function interpolate(fmt: string, obj: any, named: boolean): string;
+}
diff --git a/web/src/elements/table/Table.ts b/web/src/elements/table/Table.ts
index 925ef969b..42fdbf4d3 100644
--- a/web/src/elements/table/Table.ts
+++ b/web/src/elements/table/Table.ts
@@ -1,3 +1,4 @@
+import { gettext } from "django";
 import { html, LitElement, property, TemplateResult } from "lit-element";
 import { until } from "lit-html/directives/until.js";
 import { PBResponse } from "../../api/client";
@@ -70,12 +71,10 @@ export abstract class Table<T> extends LitElement {
                     <div class="pf-c-toolbar__bulk-select">
                         <slot name="create-button"></slot>
                         <button
-                            @click=${() => {
-        this.fetch();
-    }}
+                            @click=${() => {this.fetch();}}
                             class="pf-c-button pf-m-primary"
                         >
-                            Refresh
+                            ${gettext("Refresh")}
                         </button>
                     </div>
                     <pb-table-pagination
@@ -88,8 +87,8 @@ export abstract class Table<T> extends LitElement {
                 <thead>
                     <tr role="row">
                         ${this.columns().map(
-        (col) => html`<th role="columnheader" scope="col">${col}</th>`
-    )}
+                            (col) => html`<th role="columnheader" scope="col">${gettext(col)}</th>`
+                        )}
                     </tr>
                 </thead>
                 <tbody role="rowgroup">
diff --git a/web/src/pages/RouterOutlet.ts b/web/src/pages/RouterOutlet.ts
index 814e97fc6..863d3d03d 100644
--- a/web/src/pages/RouterOutlet.ts
+++ b/web/src/pages/RouterOutlet.ts
@@ -141,7 +141,8 @@ export class RouterOutlet extends LitElement {
         this.current = matchedRoute;
     }
 
-    render(): TemplateResult {
+    render(): TemplateResult | undefined {
+        // TODO: Render 404 when current Route is empty
         return this.current?.render();
     }
 }
diff --git a/web/src/pages/applications/ApplicationListPage.ts b/web/src/pages/applications/ApplicationListPage.ts
index 8a580295c..7a48108d3 100644
--- a/web/src/pages/applications/ApplicationListPage.ts
+++ b/web/src/pages/applications/ApplicationListPage.ts
@@ -1,3 +1,4 @@
+import { gettext } from "django";
 import { customElement } from "lit-element";
 import { Application } from "../../api/application";
 import { PBResponse } from "../../api/client";
@@ -6,13 +7,13 @@ import { TablePage } from "../../elements/table/TablePage";
 @customElement("pb-application-list")
 export class ApplicationList extends TablePage<Application> {
     pageTitle(): string {
-        return "Applications";
+        return gettext("Applications");
     }
     pageDescription(): string {
-        return "External Applications which use passbook as Identity-Provider, utilizing protocols like OAuth2 and SAML.";
+        return gettext("External Applications which use passbook as Identity-Provider, utilizing protocols like OAuth2 and SAML.");
     }
     pageIcon(): string {
-        return "pf-icon pf-icon-applications";
+        return gettext("pf-icon pf-icon-applications");
     }
 
     apiEndpoint(page: number): Promise<PBResponse<Application>> {