habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: Replace lingui.js with lit-localize (#5761)

Browse Source 
* \#\# Details

web: replace lingui with lit/localize

\#\# Changes

This rather massive shift replaces the lingui and `t()` syntax with lit-localize, XLIFF, and the `msg()`
syntax used by lit-localize.  90% of this work was mechanized; simple perl scripts found and replaced
all uses of `t()` with the appropriate corresponding syntax for `msg()` and `msg(str())`.

The XLIFF files were auto-generated from the PO files.  They have not been audited, and they should be
checked over by professional translators.  The actual _strings_ have not been changed, but as this was
a mechanized change there is always the possibility of mis-translation-- not by the translator, but by
the script.

* web: revise lit/localize: fix two installation issues.

* web: revise localization

TL;DR:

- Replaced all of Lingui's `t()` syntax with `msg()` syntax.
- Mechanically (i.e with a script) converted all of the PO files to XLIFF files
- Refactored the localization code to be a bit smarter:
  - the function `getBestMatchLocale` takes the locale lists and a requested locale, and returns the
    first match of:
    - The locale's code exactly matches the requested locale
    - The locale code exactly matches the prefix of the requested locale (i.e the "en" part of "en-US")
    - the locale code's prefix exactly matches the prefix of the requested locale
    This function is passed to lit-locate's `loadLocale()`.
  - `activateLocale()` just calls `loadLocale()` now.
  - `autodetectLanguage` searches the following, and picks the first that returns a valid locale
    object, before passing it to `loadLocale()`:
    - The User's settings
    - A `?locale=` component found in `window.location.search`
    - The `window.navigator.language` field
    - English

The `msg()` only runs when it's run.  This seems obvious, but it means that you cannot cache
strings at load time; they must be kept inside functions that are re-run so that the `msg()` engine
can look up the strings in the preferred language of the user at that moment.

You can use thunks-of-strings if you really need them that way.

* Including the 'xliff-converter' in case anyone wants to review it.

* The xliff-converter is tagged as 'xliff-converter', but has been
deleted.

\#\# Details

-   Resolves #5171

\#\# Changes

\#\#\# New Features

-   Adds a "Add an Application" to the LibraryView if there are no applications and the user is an administrator.

\#\#\# Breaking Changes

-   Adds breaking change which causes \<issue\>.

\#\# Checklist

-   [ ] Local tests pass (`ak test authentik/`)
-   [ ] The code has been formatted (`make lint-fix`)

If an API change has been made

-   [ ] The API schema has been updated (`make gen-build`)

If changes to the frontend have been made

-   [ ] The code has been formatted (`make web`)
-   [ ] The translation files have been updated (`make i18n-extract`)

If applicable

-   [ ] The documentation has been updated
-   [ ] The documentation has been formatted (`make website`)

* web: fix redundant locales for zh suite.

* web: prettier pass for locale update

* web: localization moderization

Changed the names of the lit-localize commands to make it clear they're
part of the localization effort, and not just "build" and "extract".

* update transifex config

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

* fix package lock?

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

* use build not compile

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

* web: conversion to lit-localize

The CI produced a list of problems that I hadn't caught earlier,
due to a typo ("localize build" is correct, "localize compile" is
not) I had left in package.json.  They were minor and linty, but
it was still wise to fix them.

* web: replace lingui with lit/locale

This commit fixes some minor linting issues that were hidden by a typo in package.json.  The
issues were not apparently problematic from a Javascript point of view, but they pointed
to sloppy thinking in the progression of types through the system, so I cleaned them
up and formalized the types from LocaleModule to AkLocale.

* web: replace lingui with lit/localize

One problem that has repeatedly come up is that localize's templates do not produce
JavaScript that conforms with our shop style.  I've replaced `build-locale` with
a two-step that builds the locale *and* ensures that it conforms to the shop style
via `prettier` every time.

* web: replace lingui with lit-locale

This commit applies the most recent bundle of translations to the
new lit-locale aspect component.  It also revises the algorithm
for *finding* the correct locale, replacing the complex fall-back
with some rather straightforward regular expressions.

In the case of Chinese, the fallback comes at the end of the
selection list, which may not be, er, politically valuable
(since Taiwan and Hong Kong come before, being exceptions that
need to be tested).  If we need a different order for presentation,
that'll be a future feature.

* web: replace lingui with lit/locale

Well, that was embarassing.

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
Ken Sternberg
2023-06-02 08:08:36 -07:00
committed by GitHub
parent afa8a505ee
commit 44a057ed9c
273 changed files with 64104 additions and 117217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/elements/Expand.ts
View File

@ -1,7 +1,6 @@
import { AKElement } from "@goauthentik/elements/Base";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -14,10 +13,10 @@ export class Expand extends AKElement {
expanded = false;
@property()
textOpen = t`Show less`;
textOpen = msg("Show less");
@property()
textClosed = t`Show more`;
textClosed = msg("Show more");
static get styles(): CSSResult[] {
return [PFBase, PFExpandableSection];
@ -41,7 +40,7 @@ export class Expand extends AKElement {
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<span class="pf-c-expandable-section__toggle-text"
>${this.expanded ? t`${this.textOpen}` : t`${this.textClosed}`}</span
>${this.expanded ? this.textOpen : this.textClosed}</span
>
</button>
<div class="pf-c-expandable-section__content" ?hidden=${!this.expanded}>

5
web/src/elements/PageHeader.ts
View File

@ -10,8 +10,7 @@ import { currentInterface } from "@goauthentik/common/sentry";
import { me } from "@goauthentik/common/users";
import { AKElement, rootInterface } from "@goauthentik/elements/Base";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -39,7 +38,7 @@ export class PageHeader extends AKElement {
const currentIf = currentInterface();
let title = tenant?.brandingTitle || TITLE_DEFAULT;
if (currentIf === "admin") {
title = `${t`Admin`} - ${title}`;
title = `${msg("Admin")} - ${title}`;
}
if (value !== "") {
title = `${value} - ${title}`;

5
web/src/elements/Spinner.ts
View File

@ -1,7 +1,6 @@
import { AKElement } from "@goauthentik/elements/Base";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -27,7 +26,7 @@ export class Spinner extends AKElement {
return html`<span
class="pf-c-spinner ${this.size.toString()}"
role="progressbar"
aria-valuetext="${t`Loading...`}"
aria-valuetext="${msg("Loading...")}"
>
<span class="pf-c-spinner__clipper"></span>
<span class="pf-c-spinner__lead-ball"></span>

5
web/src/elements/Tabs.ts
View File

@ -2,8 +2,7 @@ import { CURRENT_CLASS, EVENT_REFRESH, ROUTE_SEPARATOR } from "@goauthentik/comm
import { AKElement } from "@goauthentik/elements/Base";
import { getURLParams, updateURLParams } from "@goauthentik/elements/router/RouteMatch";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
@ -99,7 +98,7 @@ export class Tabs extends AKElement {
}
if (!this.currentPage) {
if (pages.length < 1) {
return html`<h1>${t`no tabs defined`}</h1>`;
return html`<h1>${msg("no tabs defined")}</h1>`;
}
const wantedPage = pages[0].attributes.getNamedItem("slot")?.value;
this.onClick(wantedPage);

5
web/src/elements/TreeView.ts
View File

@ -2,8 +2,7 @@ import { EVENT_REFRESH } from "@goauthentik/common/constants";
import { AKElement } from "@goauthentik/elements/Base";
import { setURLParams } from "@goauthentik/elements/router/RouteMatch";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
@ -180,7 +179,7 @@ export class TreeView extends AKElement {
parse(data: string[]): TreeViewItem {
const rootItem: TreeViewItem = {
id: undefined,
label: t`Root`,
label: msg("Root"),
childItems: [],
level: -1,
};

5
web/src/elements/charts/Chart.ts
View File

@ -18,8 +18,7 @@ import { ArcElement, BarElement } from "chart.js";
import { LinearScale, TimeScale } from "chart.js";
import "chartjs-adapter-moment";
import { t } from "@lingui/macro";
import { msg, str } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit";
import { property, state } from "lit/decorators.js";
@ -152,7 +151,7 @@ export abstract class AKChart<T> extends AKElement {
const valueStamp = ticks[index];
const delta = Date.now() - valueStamp.value;
const ago = Math.round(delta / 1000 / 3600);
return t`${ago} hour(s) ago`;
return msg(str`${ago} hour(s) ago`);
}
getOptions(): ChartOptions {

21
web/src/elements/events/ObjectChangelog.ts
View File

@ -9,8 +9,7 @@ import "@goauthentik/elements/buttons/SpinnerButton";
import { PaginatedResponse } from "@goauthentik/elements/table/Table";
import { Table, TableColumn } from "@goauthentik/elements/table/Table";
import { t } from "@lingui/macro";
import { msg, str } from "@lit/localize";
import { TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -65,10 +64,10 @@ export class ObjectChangelog extends Table<Event> {
columns(): TableColumn[] {
return [
new TableColumn(t`Action`, "action"),
new TableColumn(t`User`, "enabled"),
new TableColumn(t`Creation Date`, "created"),
new TableColumn(t`Client IP`, "client_ip"),
new TableColumn(msg("Action"), "action"),
new TableColumn(msg("User"), "enabled"),
new TableColumn(msg("Creation Date"), "created"),
new TableColumn(msg("Client IP"), "client_ip"),
];
}
@ -77,10 +76,12 @@ export class ObjectChangelog extends Table<Event> {
html`${item.action}`,
html`<div>${item.user?.username}</div>
${item.user.on_behalf_of
? html`<small> ${t`On behalf of ${item.user.on_behalf_of.username}`} </small>`
? html`<small>
${msg(str`On behalf of ${item.user.on_behalf_of.username}`)}
</small>`
: html``}`,
html`<span>${item.created?.toLocaleString()}</span>`,
html`<span>${item.clientIp || t`-`}</span>`,
html`<span>${item.clientIp || msg("-")}</span>`,
];
}
@ -96,8 +97,8 @@ export class ObjectChangelog extends Table<Event> {
}
renderEmpty(): TemplateResult {
return super.renderEmpty(html`<ak-empty-state header=${t`No Events found.`}>
<div slot="body">${t`No matching events could be found.`}</div>
return super.renderEmpty(html`<ak-empty-state header=${msg("No Events found.")}>
<div slot="body">${msg("No matching events could be found.")}</div>
</ak-empty-state>`);
}
}

21
web/src/elements/events/UserEvents.ts
View File

@ -11,8 +11,7 @@ import "@goauthentik/elements/buttons/SpinnerButton";
import { PaginatedResponse } from "@goauthentik/elements/table/Table";
import { Table, TableColumn } from "@goauthentik/elements/table/Table";
import { t } from "@lingui/macro";
import { msg, str } from "@lit/localize";
import { TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -39,10 +38,10 @@ export class UserEvents extends Table<Event> {
columns(): TableColumn[] {
return [
new TableColumn(t`Action`, "action"),
new TableColumn(t`User`, "enabled"),
new TableColumn(t`Creation Date`, "created"),
new TableColumn(t`Client IP`, "client_ip"),
new TableColumn(msg("Action"), "action"),
new TableColumn(msg("User"), "enabled"),
new TableColumn(msg("Creation Date"), "created"),
new TableColumn(msg("Client IP"), "client_ip"),
];
}
@ -51,10 +50,12 @@ export class UserEvents extends Table<Event> {
html`${ActionToLabel(item.action)}`,
html`<div>${item.user?.username}</div>
${item.user.on_behalf_of
? html`<small> ${t`On behalf of ${item.user.on_behalf_of.username}`} </small>`
? html`<small>
${msg(str`On behalf of ${item.user.on_behalf_of.username}`)}
</small>`
: html``}`,
html`<span>${item.created?.toLocaleString()}</span>`,
html`<span>${item.clientIp || t`-`}</span>`,
html`<span>${item.clientIp || msg("-")}</span>`,
];
}
@ -70,8 +71,8 @@ export class UserEvents extends Table<Event> {
}
renderEmpty(): TemplateResult {
return super.renderEmpty(html`<ak-empty-state header=${t`No Events found.`}>
<div slot="body">${t`No matching events could be found.`}</div>
return super.renderEmpty(html`<ak-empty-state header=${msg("No Events found.")}>
<div slot="body">${msg("No matching events could be found.")}</div>
</ak-empty-state>`);
}
}

7
web/src/elements/forms/ConfirmationForm.ts
View File

@ -4,8 +4,7 @@ import { ModalButton } from "@goauthentik/elements/buttons/ModalButton";
import "@goauthentik/elements/buttons/SpinnerButton";
import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
import { t } from "@lingui/macro";
import { msg, str } from "@lit/localize";
import { TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -49,7 +48,7 @@ export class ConfirmationForm extends ModalButton {
onError(e: Error): void {
showMessage({
message: t`${this.errorMessage}: ${e.toString()}`,
message: msg(str`${this.errorMessage}: ${e.toString()}`),
level: MessageLevel.error,
});
}
@ -82,7 +81,7 @@ export class ConfirmationForm extends ModalButton {
}}
class="pf-m-secondary"
>
${t`Cancel`}
${msg("Cancel")}
</ak-spinner-button>
</footer>`;
}

35
web/src/elements/forms/DeleteBulkForm.ts
View File

@ -7,8 +7,7 @@ import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
import { PaginatedResponse } from "@goauthentik/elements/table/Table";
import { Table, TableColumn } from "@goauthentik/elements/table/Table";
import { t } from "@lingui/macro";
import { msg, str } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { until } from "lit/directives/until.js";
@ -87,26 +86,26 @@ export class DeleteObjectsTable<T> extends Table<T> {
renderUsedBy(usedBy: UsedBy[]): TemplateResult {
if (usedBy.length < 1) {
return html`<span>${t`Not used by any other object.`}</span>`;
return html`<span>${msg("Not used by any other object.")}</span>`;
}
return html`<ul class="pf-c-list">
${usedBy.map((ub) => {
let consequence = "";
switch (ub.action) {
case UsedByActionEnum.Cascade:
consequence = t`object will be DELETED`;
consequence = msg("object will be DELETED");
break;
case UsedByActionEnum.CascadeMany:
consequence = t`connection will be deleted`;
consequence = msg("connection will be deleted");
break;
case UsedByActionEnum.SetDefault:
consequence = t`reference will be reset to default value`;
consequence = msg("reference will be reset to default value");
break;
case UsedByActionEnum.SetNull:
consequence = t`reference will be set to an empty value`;
consequence = msg("reference will be set to an empty value");
break;
}
return html`<li>${t`${ub.name} (${consequence})`}</li>`;
return html`<li>${msg(str`${ub.name} (${consequence})`)}</li>`;
})}
</ul>`;
}
@ -131,10 +130,10 @@ export class DeleteBulkForm<T> extends ModalButton {
const rec = item as Record<string, unknown>;
const meta = [];
if (Object.prototype.hasOwnProperty.call(rec, "name")) {
meta.push({ key: t`Name`, value: rec.name as string });
meta.push({ key: msg("Name"), value: rec.name as string });
}
if (Object.prototype.hasOwnProperty.call(rec, "pk")) {
meta.push({ key: t`ID`, value: rec.pk as string });
meta.push({ key: msg("ID"), value: rec.pk as string });
}
return meta;
};
@ -168,14 +167,14 @@ export class DeleteBulkForm<T> extends ModalButton {
onSuccess(): void {
showMessage({
message: t`Successfully deleted ${this.objects.length} ${this.objectLabel}`,
message: msg(str`Successfully deleted ${this.objects.length} ${this.objectLabel}`),
level: MessageLevel.success,
});
}
onError(e: Error): void {
showMessage({
message: t`Failed to delete ${this.objectLabel}: ${e.toString()}`,
message: msg(str`Failed to delete ${this.objectLabel}: ${e.toString()}`),
level: MessageLevel.error,
});
}
@ -184,7 +183,9 @@ export class DeleteBulkForm<T> extends ModalButton {
return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">
${this.actionLabel ? this.actionLabel : t`Delete ${this.objectLabel}`}
${this.actionLabel
? this.actionLabel
: msg(str`Delete ${this.objectLabel}`)}
</h1>
</div>
</section>
@ -193,7 +194,9 @@ export class DeleteBulkForm<T> extends ModalButton {
<p class="pf-c-title">
${this.actionSubtext
? this.actionSubtext
: t`Are you sure you want to delete ${this.objects.length} ${this.objectLabel}?`}
: msg(
str`Are you sure you want to delete ${this.objects.length} ${this.objectLabel}?`,
)}
</p>
<slot name="notice"></slot>
</form>
@ -213,7 +216,7 @@ export class DeleteBulkForm<T> extends ModalButton {
}}
class="pf-m-danger"
>
${t`Delete`} </ak-spinner-button
${msg("Delete")} </ak-spinner-button
>&nbsp;
<ak-spinner-button
.callAction=${async () => {
@ -221,7 +224,7 @@ export class DeleteBulkForm<T> extends ModalButton {
}}
class="pf-m-secondary"
>
${t`Cancel`}
${msg("Cancel")}
</ak-spinner-button>
</footer>`;
}

35
web/src/elements/forms/DeleteForm.ts
View File

@ -4,8 +4,7 @@ import { ModalButton } from "@goauthentik/elements/buttons/ModalButton";
import "@goauthentik/elements/buttons/SpinnerButton";
import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
import { t } from "@lingui/macro";
import { msg, str } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { until } from "lit/directives/until.js";
@ -52,14 +51,14 @@ export class DeleteForm extends ModalButton {
onSuccess(): void {
showMessage({
message: t`Successfully deleted ${this.objectLabel} ${this.obj?.name}`,
message: msg(str`Successfully deleted ${this.objectLabel} ${this.obj?.name}`),
level: MessageLevel.success,
});
}
onError(e: Error): void {
showMessage({
message: t`Failed to delete ${this.objectLabel}: ${e.toString()}`,
message: msg(str`Failed to delete ${this.objectLabel}: ${e.toString()}`),
level: MessageLevel.error,
});
}
@ -73,12 +72,14 @@ export class DeleteForm extends ModalButton {
}
return html`<section class="pf-c-modal-box__header pf-c-page__main-section pf-m-light">
<div class="pf-c-content">
<h1 class="pf-c-title pf-m-2xl">${t`Delete ${this.objectLabel}`}</h1>
<h1 class="pf-c-title pf-m-2xl">${msg(str`Delete ${this.objectLabel}`)}</h1>
</div>
</section>
<section class="pf-c-modal-box__body pf-m-light">
<form class="pf-c-form pf-m-horizontal">
<p>${t`Are you sure you want to delete ${this.objectLabel} ${objName} ?`}</p>
<p>
${msg(str`Are you sure you want to delete ${this.objectLabel} ${objName}?`)}
</p>
</form>
</section>
${this.usedBy
@ -90,26 +91,32 @@ export class DeleteForm extends ModalButton {
return html`
<section class="pf-c-modal-box__body pf-m-light">
<form class="pf-c-form pf-m-horizontal">
<p>${t`The following objects use ${objName} `}</p>
<p>${msg(str`The following objects use ${objName}`)}</p>
<ul class="pf-c-list">
${usedBy.map((ub) => {
let consequence = "";
switch (ub.action) {
case UsedByActionEnum.Cascade:
consequence = t`object will be DELETED`;
consequence = msg("object will be DELETED");
break;
case UsedByActionEnum.CascadeMany:
consequence = t`connecting object will be deleted`;
consequence = msg(
"connecting object will be deleted",
);
break;
case UsedByActionEnum.SetDefault:
consequence = t`reference will be reset to default value`;
consequence = msg(
"reference will be reset to default value",
);
break;
case UsedByActionEnum.SetNull:
consequence = t`reference will be set to an empty value`;
consequence = msg(
"reference will be set to an empty value",
);
break;
}
return html`<li>
${t`${ub.name} (${consequence})`}
${msg(str`${ub.name} (${consequence})`)}
</li>`;
})}
</ul>
@ -126,7 +133,7 @@ export class DeleteForm extends ModalButton {
}}
class="pf-m-danger"
>
${t`Delete`} </ak-spinner-button
${msg("Delete")} </ak-spinner-button
>&nbsp;
<ak-spinner-button
.callAction=${async () => {
@ -134,7 +141,7 @@ export class DeleteForm extends ModalButton {
}}
class="pf-m-secondary"
>
${t`Cancel`}
${msg("Cancel")}
</ak-spinner-button>
</footer>`;
}

5
web/src/elements/forms/HorizontalFormElement.ts
View File

@ -2,8 +2,7 @@ import { convertToSlug } from "@goauthentik/common/utils";
import { AKElement } from "@goauthentik/elements/Base";
import { FormGroup } from "@goauthentik/elements/forms/FormGroup";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, css } from "lit";
import { TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -137,7 +136,7 @@ export class HorizontalFormElement extends AKElement {
<div class="pf-c-form__horizontal-group">
${this.writeOnly
? html`<p class="pf-c-form__helper-text" aria-live="polite">
${t`Click to change value`}
${msg("Click to change value")}
</p>`
: html``}
${this.errorMessages.map((message) => {

9
web/src/elements/forms/ModalForm.ts
View File

@ -4,8 +4,7 @@ import { ModalButton } from "@goauthentik/elements/buttons/ModalButton";
import "@goauthentik/elements/buttons/SpinnerButton";
import { Form } from "@goauthentik/elements/forms/Form";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -21,16 +20,16 @@ export class ModalForm extends ModalButton {
loading = false;
@property({ type: String })
cancelText = t`Cancel`;
cancelText = msg("Cancel");
async confirm(): Promise<void> {
const form = this.querySelector<Form<unknown>>("[slot=form]");
if (!form) {
return Promise.reject(t`No form found`);
return Promise.reject(msg("No form found"));
}
const formPromise = form.submit(new Event("submit"));
if (!formPromise) {
return Promise.reject(t`Form didn't return a promise for submitting`);
return Promise.reject(msg("Form didn't return a promise for submitting"));
}
return formPromise
.then(() => {

9
web/src/elements/forms/SearchSelect.ts
View File

@ -3,8 +3,7 @@ import { ascii_letters, digits, groupBy, randomString } from "@goauthentik/commo
import { AKElement } from "@goauthentik/elements/Base";
import { PreventFormSubmit } from "@goauthentik/elements/forms/Form";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html, render } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -35,7 +34,7 @@ export class SearchSelect<T> extends AKElement {
blankable = false;
@property()
placeholder: string = t`Select an object.`;
placeholder: string = msg("Select an object.");
static get styles(): CSSResult[] {
return [PFBase, PFForm, PFFormControl, PFSelect];
@ -94,7 +93,7 @@ export class SearchSelect<T> extends AKElement {
toForm(): unknown {
if (!this.objects) {
throw new PreventFormSubmit(t`Loading options...`);
throw new PreventFormSubmit(msg("Loading options..."));
}
return this.value(this.selectedObject) || "";
}
@ -258,7 +257,7 @@ export class SearchSelect<T> extends AKElement {
this.renderMenu();
let value = "";
if (!this.objects) {
value = t`Loading...`;
value = msg("Loading...");
} else if (this.selectedObject) {
value = this.renderElement(this.selectedObject);
} else if (this.blankable) {

4
web/src/elements/messages/Middleware.ts
View File

@ -1,7 +1,7 @@
import { MessageLevel } from "@goauthentik/common/messages";
import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { Middleware, ResponseContext } from "@goauthentik/api";
@ -10,7 +10,7 @@ export class MessageMiddleware implements Middleware {
if (context.response.status >= 500) {
showMessage({
level: MessageLevel.error,
message: t`API request failed`,
message: msg("API request failed"),
description: `${context.init.method} ${context.url}: ${context.response.status}`,
});
}

9
web/src/elements/notifications/APIDrawer.ts
View File

@ -2,8 +2,7 @@ import { RequestInfo } from "@goauthentik/common/api/middleware";
import { EVENT_API_DRAWER_TOGGLE, EVENT_REQUEST_POST } from "@goauthentik/common/constants";
import { AKElement } from "@goauthentik/elements/Base";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -75,8 +74,10 @@ export class APIDrawer extends AKElement {
<div class="pf-c-notification-drawer">
<div class="pf-c-notification-drawer__header">
<div class="text">
<h1 class="pf-c-notification-drawer__header-title">${t`API Requests`}</h1>
<a href="/api/v3/" target="_blank">${t`Open API Browser`}</a>
<h1 class="pf-c-notification-drawer__header-title">
${msg("API Requests")}
</h1>
<a href="/api/v3/" target="_blank">${msg("Open API Browser")}</a>
</div>
<div class="pf-c-notification-drawer__header-action">
<div class="pf-c-notification-drawer__header-action-close">

17
web/src/elements/notifications/NotificationDrawer.ts
View File

@ -7,8 +7,7 @@ import { AKElement } from "@goauthentik/elements/Base";
import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
import { PaginatedResponse } from "@goauthentik/elements/table/Table";
import { t } from "@lingui/macro";
import { msg, str } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -145,8 +144,10 @@ export class NotificationDrawer extends AKElement {
<div class="pf-c-notification-drawer">
<div class="pf-c-notification-drawer__header">
<div class="text">
<h1 class="pf-c-notification-drawer__header-title">${t`Notifications`}</h1>
<span> ${t`${this.unread} unread`} </span>
<h1 class="pf-c-notification-drawer__header-title">
${msg("Notifications")}
</h1>
<span> ${msg(str`${this.unread} unread`)} </span>
</div>
<div class="pf-c-notification-drawer__header-action">
<div class="pf-c-notification-drawer__header-action-close">
@ -161,7 +162,7 @@ export class NotificationDrawer extends AKElement {
}}
class="pf-c-button pf-m-plain"
type="button"
aria-label=${t`Close`}
aria-label=${msg("Close")}
>
<i class="fas fa-times" aria-hidden="true"></i>
</button>
@ -181,7 +182,7 @@ export class NotificationDrawer extends AKElement {
.then(() => {
showMessage({
level: MessageLevel.success,
message: t`Successfully cleared notifications`,
message: msg("Successfully cleared notifications"),
});
this.firstUpdated();
this.dispatchEvent(
@ -200,9 +201,9 @@ export class NotificationDrawer extends AKElement {
}}
class="pf-c-button pf-m-primary pf-m-block"
type="button"
aria-label=${t`Clear all`}
aria-label=${msg("Clear all")}
>
${t`Clear all`}
${msg("Clear all")}
</button>
</div>
</div>

19
web/src/elements/oauth/UserRefreshList.ts
View File

@ -5,8 +5,7 @@ import "@goauthentik/elements/forms/DeleteBulkForm";
import { PaginatedResponse } from "@goauthentik/elements/table/Table";
import { Table, TableColumn } from "@goauthentik/elements/table/Table";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -39,10 +38,10 @@ export class UserOAuthRefreshList extends Table<TokenModel> {
columns(): TableColumn[] {
return [
new TableColumn(t`Provider`, "provider"),
new TableColumn(t`Revoked?`, "revoked"),
new TableColumn(t`Expires`, "expires"),
new TableColumn(t`Scopes`, "scope"),
new TableColumn(msg("Provider"), "provider"),
new TableColumn(msg("Revoked?"), "revoked"),
new TableColumn(msg("Expires"), "expires"),
new TableColumn(msg("Scopes"), "scope"),
];
}
@ -51,7 +50,7 @@ export class UserOAuthRefreshList extends Table<TokenModel> {
<div class="pf-c-table__expandable-row-content">
<div class="pf-l-flex">
<div class="pf-l-flex__item">
<h3>${t`ID Token`}</h3>
<h3>${msg("ID Token")}</h3>
<pre>${item.idToken}</pre>
</div>
</div>
@ -64,7 +63,7 @@ export class UserOAuthRefreshList extends Table<TokenModel> {
renderToolbarSelected(): TemplateResult {
const disabled = this.selectedElements.length < 1;
return html`<ak-forms-delete-bulk
objectLabel=${t`Refresh Tokens(s)`}
objectLabel=${msg("Refresh Tokens(s)")}
.objects=${this.selectedElements}
.usedBy=${(item: ExpiringBaseGrantModel) => {
return new Oauth2Api(DEFAULT_CONFIG).oauth2RefreshTokensUsedByList({
@ -78,7 +77,7 @@ export class UserOAuthRefreshList extends Table<TokenModel> {
}}
>
<button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
${t`Delete`}
${msg("Delete")}
</button>
</ak-forms-delete-bulk>`;
}
@ -87,7 +86,7 @@ export class UserOAuthRefreshList extends Table<TokenModel> {
return [
html`<a href="#/core/providers/${item.provider?.pk}"> ${item.provider?.name} </a>`,
html`<ak-label color=${item.revoked ? PFColor.Orange : PFColor.Green}>
${item.revoked ? t`Yes` : t`No`}
${item.revoked ? msg("Yes") : msg("No")}
</ak-label>`,
html`${item.expires?.toLocaleString()}`,
html`${item.scope.join(", ")}`,

13
web/src/elements/router/Router404.ts
View File

@ -1,7 +1,6 @@
import { AKElement } from "@goauthentik/elements/Base";
import { t } from "@lingui/macro";
import { msg, str } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -22,9 +21,13 @@ export class Router404 extends AKElement {
return html`<div class="pf-c-empty-state pf-m-full-height">
<div class="pf-c-empty-state__content">
<i class="fas fa-question-circle pf-c-empty-state__icon" aria-hidden="true"></i>
<h1 class="pf-c-title pf-m-lg">${t`Not found`}</h1>
<div class="pf-c-empty-state__body">${t`The URL "${this.url}" was not found.`}</div>
<a href="#/" class="pf-c-button pf-m-primary" type="button">${t`Return home`}</a>
<h1 class="pf-c-title pf-m-lg">${msg("Not found")}</h1>
<div class="pf-c-empty-state__body">
${msg(str`The URL "${this.url}" was not found.`)}
</div>
<a href="#/" class="pf-c-button pf-m-primary" type="button"
>${msg("Return home")}</a
>
</div>
</div>`;
}

13
web/src/elements/table/Table.ts
View File

@ -10,8 +10,7 @@ import "@goauthentik/elements/table/TablePagination";
import { Pagination } from "@goauthentik/elements/table/TablePagination";
import "@goauthentik/elements/table/TableSearch";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit";
import { property, state } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
@ -236,7 +235,7 @@ export abstract class Table<T> extends AKElement {
return html`<tr role="row">
<td role="cell" colspan="25">
<div class="pf-l-bullseye">
<ak-empty-state ?loading="${true}" header=${t`Loading`}> </ak-empty-state>
<ak-empty-state ?loading="${true}" header=${msg("Loading")}> </ak-empty-state>
</div>
</td>
</tr>`;
@ -250,7 +249,7 @@ export abstract class Table<T> extends AKElement {
${inner
? inner
: html`<ak-empty-state
header="${t`No objects found.`}"
header="${msg("No objects found.")}"
></ak-empty-state>`}
</div>
</td>
@ -259,7 +258,7 @@ export abstract class Table<T> extends AKElement {
}
renderError(): TemplateResult {
return html`<ak-empty-state header="${t`Failed to fetch objects.`}" icon="fa-times">
return html`<ak-empty-state header="${msg("Failed to fetch objects.")}" icon="fa-times">
<div slot="body">${this.hasError?.toString()}</div>
</ak-empty-state>`;
}
@ -401,7 +400,7 @@ export abstract class Table<T> extends AKElement {
}}
class="pf-m-secondary"
>
${t`Refresh`}</ak-spinner-button
${msg("Refresh")}</ak-spinner-button
>`;
}
@ -480,7 +479,7 @@ export abstract class Table<T> extends AKElement {
<input
name="select-all"
type="checkbox"
aria-label=${t`Select all rows`}
aria-label=${msg("Select all rows")}
.checked=${this.selectedElements.length ===
this.data?.results.length &&
this.selectedElements.length > 0}

7
web/src/elements/table/TablePage.ts
View File

@ -2,8 +2,7 @@ import "@goauthentik/elements/PageHeader";
import { updateURLParams } from "@goauthentik/elements/router/RouteMatch";
import { Table } from "@goauthentik/elements/table/Table";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult } from "lit";
import { TemplateResult, html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
@ -33,7 +32,7 @@ export abstract class TablePage<T> extends Table<T> {
return super.renderEmpty(html`
${inner
? inner
: html`<ak-empty-state icon=${this.pageIcon()} header="${t`No objects found.`}">
: html`<ak-empty-state icon=${this.pageIcon()} header="${msg("No objects found.")}">
<div slot="body">
${this.searchEnabled() ? this.renderEmptyClearSearch() : html``}
</div>
@ -57,7 +56,7 @@ export abstract class TablePage<T> extends Table<T> {
}}
class="pf-c-button pf-m-link"
>
${t`Clear search`}
${msg("Clear search")}
</button>`;
}

11
web/src/elements/table/TablePagination.ts
View File

@ -1,7 +1,6 @@
import { AKElement } from "@goauthentik/elements/Base";
import { t } from "@lingui/macro";
import { msg, str } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -54,7 +53,9 @@ export class TablePagination extends AKElement {
<div class="pf-c-options-menu">
<div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
<span class="pf-c-options-menu__toggle-text">
${t`${this.pages?.startIndex} - ${this.pages?.endIndex} of ${this.pages?.count}`}
${msg(
str`${this.pages?.startIndex} - ${this.pages?.endIndex} of ${this.pages?.count}`,
)}
</span>
</div>
</div>
@ -66,7 +67,7 @@ export class TablePagination extends AKElement {
this.pageChangeHandler(this.pages?.previous || 0);
}}
?disabled="${(this.pages?.previous || 0) < 1}"
aria-label="${t`Go to previous page`}"
aria-label="${msg("Go to previous page")}"
>
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
@ -78,7 +79,7 @@ export class TablePagination extends AKElement {
this.pageChangeHandler(this.pages?.next || 0);
}}
?disabled="${(this.pages?.next || 0) <= 0}"
aria-label="${t`Go to next page`}"
aria-label="${msg("Go to next page")}"
>
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>

5
web/src/elements/table/TableSearch.ts
View File

@ -1,7 +1,6 @@
import { AKElement } from "@goauthentik/elements/Base";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
@ -52,7 +51,7 @@ export class TableSearch extends AKElement {
class="pf-c-form-control"
name="search"
type="search"
placeholder=${t`Search...`}
placeholder=${msg("Search...")}
value="${ifDefined(this.value)}"
@search=${(ev: Event) => {
if (!this.onSearch) return;

18
web/src/elements/user/SessionList.ts
View File

@ -4,8 +4,7 @@ import "@goauthentik/elements/forms/DeleteBulkForm";
import { PaginatedResponse } from "@goauthentik/elements/table/Table";
import { Table, TableColumn } from "@goauthentik/elements/table/Table";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -29,18 +28,21 @@ export class AuthenticatedSessionList extends Table<AuthenticatedSession> {
order = "-expires";
columns(): TableColumn[] {
return [new TableColumn(t`Last IP`, "last_ip"), new TableColumn(t`Expires`, "expires")];
return [
new TableColumn(msg("Last IP"), "last_ip"),
new TableColumn(msg("Expires"), "expires"),
];
}
renderToolbarSelected(): TemplateResult {
const disabled = this.selectedElements.length < 1;
return html`<ak-forms-delete-bulk
objectLabel=${t`Session(s)`}
objectLabel=${msg("Session(s)")}
.objects=${this.selectedElements}
.metadata=${(item: AuthenticatedSession) => {
return [
{ key: t`Last IP`, value: item.lastIp },
{ key: t`Expiry`, value: item.expires?.toLocaleString() || t`-` },
{ key: msg("Last IP"), value: item.lastIp },
{ key: msg("Expiry"), value: item.expires?.toLocaleString() || msg("-") },
];
}}
.usedBy=${(item: AuthenticatedSession) => {
@ -55,7 +57,7 @@ export class AuthenticatedSessionList extends Table<AuthenticatedSession> {
}}
>
<button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
${t`Delete`}
${msg("Delete")}
</button>
</ak-forms-delete-bulk>`;
}
@ -63,7 +65,7 @@ export class AuthenticatedSessionList extends Table<AuthenticatedSession> {
row(item: AuthenticatedSession): TemplateResult[] {
return [
html`<div>
${item.current ? html`${t`(Current session)`}&nbsp;` : html``}${item.lastIp}
${item.current ? html`${msg("(Current session)")}&nbsp;` : html``}${item.lastIp}
</div>
<small>${item.userAgent.userAgent?.family}, ${item.userAgent.os?.family}</small>`,
html`${item.expires?.toLocaleString()}`,

13
web/src/elements/user/UserConsentList.ts
View File

@ -4,8 +4,7 @@ import "@goauthentik/elements/forms/DeleteBulkForm";
import { PaginatedResponse } from "@goauthentik/elements/table/Table";
import { Table, TableColumn } from "@goauthentik/elements/table/Table";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -30,16 +29,16 @@ export class UserConsentList extends Table<UserConsent> {
columns(): TableColumn[] {
return [
new TableColumn(t`Application`, "application"),
new TableColumn(t`Expires`, "expires"),
new TableColumn(t`Permissions`, "permissions"),
new TableColumn(msg("Application"), "application"),
new TableColumn(msg("Expires"), "expires"),
new TableColumn(msg("Permissions"), "permissions"),
];
}
renderToolbarSelected(): TemplateResult {
const disabled = this.selectedElements.length < 1;
return html`<ak-forms-delete-bulk
objectLabel=${t`Consent(s)`}
objectLabel=${msg("Consent(s)")}
.objects=${this.selectedElements}
.usedBy=${(item: UserConsent) => {
return new CoreApi(DEFAULT_CONFIG).coreUserConsentUsedByList({
@ -53,7 +52,7 @@ export class UserConsentList extends Table<UserConsent> {
}}
>
<button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
${t`Delete`}
${msg("Delete")}
</button>
</ak-forms-delete-bulk>`;
}

13
web/src/elements/user/UserDevicesList.ts
View File

@ -4,8 +4,7 @@ import { PaginatedResponse } from "@goauthentik/elements/table/Table";
import { TableColumn } from "@goauthentik/elements/table/Table";
import { MFADevicesPage, deviceTypeName } from "@goauthentik/user/user-settings/mfa/MFADevicesPage";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -64,9 +63,9 @@ export class UserDeviceList extends MFADevicesPage {
columns(): TableColumn[] {
return [
new TableColumn(t`Name`, ""),
new TableColumn(t`Type`, ""),
new TableColumn(t`Confirmed`, ""),
new TableColumn(msg("Name"), ""),
new TableColumn(msg("Type"), ""),
new TableColumn(msg("Confirmed"), ""),
];
}
@ -77,7 +76,7 @@ export class UserDeviceList extends MFADevicesPage {
}}
class="pf-m-secondary"
>
${t`Refresh`}</ak-spinner-button
${msg("Refresh")}</ak-spinner-button
>`;
}
@ -85,7 +84,7 @@ export class UserDeviceList extends MFADevicesPage {
return [
html`${item.name}`,
html`${deviceTypeName(item)}`,
html`${item.confirmed ? t`Yes` : t`No`}`,
html`${item.confirmed ? msg("Yes") : msg("No")}`,
];
}
}

9
web/src/elements/utils/TimeDeltaHelp.ts
View File

@ -1,8 +1,7 @@
import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/Tooltip";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -23,13 +22,13 @@ export class TimeDeltaHelp extends AKElement {
return html` <ak-tooltip>
<p class="pf-c-form__helper-text" slot="trigger">
${this.negative
? t`(Format: hours=-1;minutes=-2;seconds=-3).`
: t`(Format: hours=1;minutes=2;seconds=3).`}
? msg("(Format: hours=-1;minutes=-2;seconds=-3).")
: msg("(Format: hours=1;minutes=2;seconds=3).")}
<i class="pf-icon fa fa-question-circle" aria-hidden="true"></i>
</p>
<div slot="tooltip">
${t`The following keywords are supported:`}
${msg("The following keywords are supported:")}
<ul class="pf-c-list">
<li><pre>microseconds</pre></li>
<li><pre>milliseconds</pre></li>

5
web/src/elements/wizard/ActionWizardPage.ts
View File

@ -2,8 +2,7 @@ import { EVENT_REFRESH } from "@goauthentik/common/constants";
import { WizardAction } from "@goauthentik/elements/wizard/Wizard";
import { WizardPage } from "@goauthentik/elements/wizard/WizardPage";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -56,7 +55,7 @@ export class ActionWizardPage extends WizardPage {
this.host.isValid = true;
};
sidebarLabel = () => t`Apply changes`;
sidebarLabel = () => msg("Apply changes");
async run(): Promise<void> {
this.currentStep = this.states[0];

7
web/src/elements/wizard/FormWizardPage.ts
View File

@ -1,8 +1,7 @@
import { Form } from "@goauthentik/elements/forms/Form";
import { WizardPage } from "@goauthentik/elements/wizard/WizardPage";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { customElement } from "lit/decorators.js";
/**
@ -23,11 +22,11 @@ export class FormWizardPage extends WizardPage {
nextCallback = async () => {
const form = this.querySelector<Form<unknown>>("*");
if (!form) {
return Promise.reject(t`No form found`);
return Promise.reject(msg("No form found"));
}
const formPromise = form.submit(new Event("submit"));
if (!formPromise) {
return Promise.reject(t`Form didn't return a promise for submitting`);
return Promise.reject(msg("Form didn't return a promise for submitting"));
}
return formPromise
.then((data) => {

11
web/src/elements/wizard/Wizard.ts
View File

@ -2,8 +2,7 @@ import { ModalButton } from "@goauthentik/elements/buttons/ModalButton";
import "@goauthentik/elements/wizard/ActionWizardPage";
import { WizardPage } from "@goauthentik/elements/wizard/WizardPage";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
import { property } from "@lit/reactive-element/decorators/property.js";
import { CSSResult, TemplateResult, html } from "lit";
@ -134,7 +133,7 @@ export class Wizard extends ModalButton {
? html`<button
class="pf-c-button pf-m-plain pf-c-wizard__close"
type="button"
aria-label="${t`Close`}"
aria-label="${msg("Close")}"
@click=${() => {
this.reset();
}}
@ -207,7 +206,7 @@ export class Wizard extends ModalButton {
}
}}
>
${lastPage ? t`Finish` : t`Next`}
${lastPage ? msg("Finish") : msg("Next")}
</button>
${(this.currentStep ? this.steps.indexOf(this.currentStep.slot) : 0) > 0 &&
this.canBack
@ -224,7 +223,7 @@ export class Wizard extends ModalButton {
}
}}
>
${t`Back`}
${msg("Back")}
</button>
`
: html``}
@ -237,7 +236,7 @@ export class Wizard extends ModalButton {
this.reset();
}}
>
${t`Cancel`}
${msg("Cancel")}
</button>
</div>`
: html``}