web: start implementing translation in JS

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 %}

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:

web/.prettierignore

@@ -1,3 +0,0 @@
-# Ignore artifacts:
-dist/
-coverage

web/.prettierrc.json

@@ -1,4 +0,0 @@
-{
-    "printWidth": 100,
-    "jsxBracketSameLine": true
-}

web/rollup.config.js

@@ -39,5 +39,6 @@ export default [
         watch: {
             clearScreen: false,
         },
+        external: ['django']
     },
 ];

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;
+}

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">

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();
     }
 }

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>> {