web: Replace lingui.js with lit-localize (#5761)
* \#\# 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
@ -2,8 +2,7 @@ import { docLink } from "@goauthentik/common/global";
|
||||
import { ModalButton } from "@goauthentik/elements/buttons/ModalButton";
|
||||
import "@goauthentik/elements/buttons/TokenCopyButton";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
import { msg } from "@lit/localize";
|
||||
import { TemplateResult, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
@ -17,14 +16,14 @@ export class OutpostDeploymentModal extends ModalButton {
|
||||
|
||||
renderModalInner(): TemplateResult {
|
||||
return html`<div class="pf-c-modal-box__header">
|
||||
<h1 class="pf-c-title pf-m-2xl">${t`Outpost Deployment Info`}</h1>
|
||||
<h1 class="pf-c-title pf-m-2xl">${msg("Outpost Deployment Info")}</h1>
|
||||
</div>
|
||||
<div class="pf-c-modal-box__body">
|
||||
<p>
|
||||
<a
|
||||
target="_blank"
|
||||
href="${docLink("/docs/outposts?utm_source=authentik#deploy")}"
|
||||
>${t`View deployment documentation`}</a
|
||||
>${msg("View deployment documentation")}</a
|
||||
>
|
||||
</p>
|
||||
<form class="pf-c-form">
|
||||
@ -48,12 +47,14 @@ export class OutpostDeploymentModal extends ModalButton {
|
||||
class="pf-m-primary"
|
||||
identifier="${ifDefined(this.outpost?.tokenIdentifier)}"
|
||||
>
|
||||
${t`Click to copy token`}
|
||||
${msg("Click to copy token")}
|
||||
</ak-token-copy-button>
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
${t`If your authentik Instance is using a self-signed certificate, set this value.`}
|
||||
${msg(
|
||||
"If your authentik Instance is using a self-signed certificate, set this value.",
|
||||
)}
|
||||
</h3>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
@ -64,7 +65,9 @@ export class OutpostDeploymentModal extends ModalButton {
|
||||
${this.outpost?.type == OutpostTypeEnum.Proxy
|
||||
? html`
|
||||
<h3>
|
||||
${t`If your authentik_host setting does not match the URL you want to login with, add this setting.`}
|
||||
${msg(
|
||||
"If your authentik_host setting does not match the URL you want to login with, add this setting.",
|
||||
)}
|
||||
</h3>
|
||||
<div class="pf-c-form__group">
|
||||
<label class="pf-c-form__label">
|
||||
@ -90,7 +93,7 @@ export class OutpostDeploymentModal extends ModalButton {
|
||||
this.open = false;
|
||||
}}
|
||||
>
|
||||
${t`Close`}
|
||||
${msg("Close")}
|
||||
</button>
|
||||
</footer>`;
|
||||
}
|
||||
|
||||
@ -7,8 +7,7 @@ import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
import YAML from "yaml";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
import { msg } from "@lit/localize";
|
||||
import { TemplateResult, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
@ -80,9 +79,9 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
||||
|
||||
getSuccessMessage(): string {
|
||||
if (this.instance) {
|
||||
return t`Successfully updated outpost.`;
|
||||
return msg("Successfully updated outpost.");
|
||||
} else {
|
||||
return t`Successfully created outpost.`;
|
||||
return msg("Successfully created outpost.");
|
||||
}
|
||||
}
|
||||
|
||||
@ -101,7 +100,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
||||
|
||||
renderForm(): TemplateResult {
|
||||
return html`<form class="pf-c-form pf-m-horizontal">
|
||||
<ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
|
||||
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
@ -109,7 +108,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
||||
required
|
||||
/>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Type`} ?required=${true} name="type">
|
||||
<ak-form-element-horizontal label=${msg("Type")} ?required=${true} name="type">
|
||||
<select
|
||||
class="pf-c-form-control"
|
||||
@change=${(ev: Event) => {
|
||||
@ -122,23 +121,23 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
||||
value=${OutpostTypeEnum.Proxy}
|
||||
?selected=${this.instance?.type === OutpostTypeEnum.Proxy}
|
||||
>
|
||||
${t`Proxy`}
|
||||
${msg("Proxy")}
|
||||
</option>
|
||||
<option
|
||||
value=${OutpostTypeEnum.Ldap}
|
||||
?selected=${this.instance?.type === OutpostTypeEnum.Ldap}
|
||||
>
|
||||
${t`LDAP`}
|
||||
${msg("LDAP")}
|
||||
</option>
|
||||
<option
|
||||
value=${OutpostTypeEnum.Radius}
|
||||
?selected=${this.instance?.type === OutpostTypeEnum.Radius}
|
||||
>
|
||||
${t`Radius`}
|
||||
${msg("Radius")}
|
||||
</option>
|
||||
</select>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Integration`} name="serviceConnection">
|
||||
<ak-form-element-horizontal label=${msg("Integration")} name="serviceConnection">
|
||||
<ak-search-select
|
||||
.fetchObjects=${async (query?: string): Promise<ServiceConnection[]> => {
|
||||
const args: OutpostsServiceConnectionsAllListRequest = {
|
||||
@ -172,7 +171,9 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
||||
>
|
||||
</ak-search-select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Selecting an integration enables the management of the outpost by authentik.`}
|
||||
${msg(
|
||||
"Selecting an integration enables the management of the outpost by authentik.",
|
||||
)}
|
||||
</p>
|
||||
<p class="pf-c-form__helper-text">
|
||||
See
|
||||
@ -182,7 +183,7 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Applications`}
|
||||
label=${msg("Applications")}
|
||||
?required=${!this.embedded}
|
||||
name="providers"
|
||||
>
|
||||
@ -201,13 +202,13 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
||||
})}
|
||||
</select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`You can only select providers that match the type of the outpost.`}
|
||||
${msg("You can only select providers that match the type of the outpost.")}
|
||||
</p>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Hold control/command to select multiple items.`}
|
||||
${msg("Hold control/command to select multiple items.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Configuration`} name="config">
|
||||
<ak-form-element-horizontal label=${msg("Configuration")} name="config">
|
||||
<ak-codemirror
|
||||
mode="yaml"
|
||||
value="${YAML.stringify(
|
||||
@ -215,14 +216,14 @@ export class OutpostForm extends ModelForm<Outpost, string> {
|
||||
)}"
|
||||
></ak-codemirror>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Set custom attributes using YAML or JSON.`}
|
||||
${msg("Set custom attributes using YAML or JSON.")}
|
||||
</p>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`See more here:`}
|
||||
${msg("See more here:")}
|
||||
<a
|
||||
target="_blank"
|
||||
href="${docLink("/docs/outposts?utm_source=authentik#configuration")}"
|
||||
>${t`Documentation`}</a
|
||||
>${msg("Documentation")}</a
|
||||
>
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
|
||||
@ -2,8 +2,7 @@ import { AKElement } from "@goauthentik/elements/Base";
|
||||
import { PFColor } from "@goauthentik/elements/Label";
|
||||
import "@goauthentik/elements/Spinner";
|
||||
|
||||
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";
|
||||
|
||||
@ -43,7 +42,7 @@ export class OutpostHealthElement extends AKElement {
|
||||
return html`<dl class="pf-c-description-list pf-m-compact">
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${t`Last seen`}</span>
|
||||
<span class="pf-c-description-list__text">${msg("Last seen")}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
@ -55,13 +54,15 @@ export class OutpostHealthElement extends AKElement {
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${t`Version`}</span>
|
||||
<span class="pf-c-description-list__text">${msg("Version")}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">
|
||||
${this.outpostHealth.versionOutdated
|
||||
? html`<ak-label color=${PFColor.Red} ?compact=${true}
|
||||
>${t`${this.outpostHealth.version}, should be ${this.outpostHealth.versionShould}`}
|
||||
>${msg(
|
||||
str`${this.outpostHealth.version}, should be ${this.outpostHealth.versionShould}`,
|
||||
)}
|
||||
</ak-label>`
|
||||
: html`<ak-label color=${PFColor.Green} ?compact=${true}
|
||||
>${versionString}
|
||||
@ -71,7 +72,7 @@ export class OutpostHealthElement extends AKElement {
|
||||
</div>
|
||||
<div class="pf-c-description-list__group">
|
||||
<dt class="pf-c-description-list__term">
|
||||
<span class="pf-c-description-list__text">${t`Hostname`}</span>
|
||||
<span class="pf-c-description-list__text">${msg("Hostname")}</span>
|
||||
</dt>
|
||||
<dd class="pf-c-description-list__description">
|
||||
<div class="pf-c-description-list__text">${this.outpostHealth.hostname}</div>
|
||||
|
||||
@ -4,8 +4,7 @@ import { AKElement } from "@goauthentik/elements/Base";
|
||||
import { PFColor } from "@goauthentik/elements/Label";
|
||||
import "@goauthentik/elements/Spinner";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
import { msg, str } from "@lit/localize";
|
||||
import { CSSResult, TemplateResult, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
|
||||
@ -58,10 +57,10 @@ export class OutpostHealthSimpleElement extends AKElement {
|
||||
return html`<ak-spinner></ak-spinner>`;
|
||||
}
|
||||
if (!this.outpostHealth) {
|
||||
return html`<ak-label color=${PFColor.Grey}>${t`Not available`}</ak-label>`;
|
||||
return html`<ak-label color=${PFColor.Grey}>${msg("Not available")}</ak-label>`;
|
||||
}
|
||||
return html`<ak-label color=${PFColor.Green}>
|
||||
${t`Last seen: ${this.outpostHealth.lastSeen?.toLocaleTimeString()}`}</ak-label
|
||||
${msg(str`Last seen: ${this.outpostHealth.lastSeen?.toLocaleTimeString()}`)}</ak-label
|
||||
>`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,8 +14,7 @@ import { PaginatedResponse } from "@goauthentik/elements/table/Table";
|
||||
import { TableColumn } from "@goauthentik/elements/table/Table";
|
||||
import { TablePage } from "@goauthentik/elements/table/TablePage";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
import { msg, str } from "@lit/localize";
|
||||
import { CSSResult } from "lit";
|
||||
import { TemplateResult, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
@ -29,13 +28,13 @@ export function TypeToLabel(type?: OutpostTypeEnum): string {
|
||||
if (!type) return "";
|
||||
switch (type) {
|
||||
case OutpostTypeEnum.Proxy:
|
||||
return t`Proxy`;
|
||||
return msg("Proxy");
|
||||
case OutpostTypeEnum.Ldap:
|
||||
return t`LDAP`;
|
||||
return msg("LDAP");
|
||||
case OutpostTypeEnum.Radius:
|
||||
return t`Radius`;
|
||||
return msg("Radius");
|
||||
case OutpostTypeEnum.UnknownDefaultOpenApi:
|
||||
return t`Unknown type`;
|
||||
return msg("Unknown type");
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,10 +43,12 @@ export class OutpostListPage extends TablePage<Outpost> {
|
||||
expandable = true;
|
||||
|
||||
pageTitle(): string {
|
||||
return t`Outposts`;
|
||||
return msg("Outposts");
|
||||
}
|
||||
pageDescription(): string | undefined {
|
||||
return t`Outposts are deployments of authentik components to support different environments and protocols, like reverse proxies.`;
|
||||
return msg(
|
||||
"Outposts are deployments of authentik components to support different environments and protocols, like reverse proxies.",
|
||||
);
|
||||
}
|
||||
pageIcon(): string {
|
||||
return "pf-icon pf-icon-zone";
|
||||
@ -82,12 +83,12 @@ export class OutpostListPage extends TablePage<Outpost> {
|
||||
|
||||
columns(): TableColumn[] {
|
||||
return [
|
||||
new TableColumn(t`Name`, "name"),
|
||||
new TableColumn(t`Type`, "type"),
|
||||
new TableColumn(t`Providers`),
|
||||
new TableColumn(t`Integration`, "service_connection__name"),
|
||||
new TableColumn(t`Health and Version`),
|
||||
new TableColumn(t`Actions`),
|
||||
new TableColumn(msg("Name"), "name"),
|
||||
new TableColumn(msg("Type"), "type"),
|
||||
new TableColumn(msg("Providers")),
|
||||
new TableColumn(msg("Integration"), "service_connection__name"),
|
||||
new TableColumn(msg("Health and Version")),
|
||||
new TableColumn(msg("Actions")),
|
||||
];
|
||||
}
|
||||
|
||||
@ -105,10 +106,12 @@ export class OutpostListPage extends TablePage<Outpost> {
|
||||
html`<div>${item.name}</div>
|
||||
${item.config.authentik_host === ""
|
||||
? html`<ak-label color=${PFColor.Orange} ?compact=${true}>
|
||||
${t`Warning: authentik Domain is not configured, authentication will not work.`}
|
||||
${msg(
|
||||
"Warning: authentik Domain is not configured, authentication will not work.",
|
||||
)}
|
||||
</ak-label>`
|
||||
: html`<ak-label color=${PFColor.Green} ?compact=${true}>
|
||||
${t`Logging in via ${item.config.authentik_host}.`}
|
||||
${msg(str`Logging in via ${item.config.authentik_host}.`)}
|
||||
</ak-label>`}`,
|
||||
html`${TypeToLabel(item.type)}`,
|
||||
html`<ul>
|
||||
@ -118,13 +121,13 @@ export class OutpostListPage extends TablePage<Outpost> {
|
||||
</li>`;
|
||||
})}
|
||||
</ul>`,
|
||||
html`${item.serviceConnectionObj?.name || t`No integration active`}`,
|
||||
html`${item.serviceConnectionObj?.name || msg("No integration active")}`,
|
||||
html`<ak-outpost-health-simple
|
||||
outpostId=${ifDefined(item.pk)}
|
||||
></ak-outpost-health-simple>`,
|
||||
html`<ak-forms-modal>
|
||||
<span slot="submit"> ${t`Update`} </span>
|
||||
<span slot="header"> ${t`Update Outpost`} </span>
|
||||
<span slot="submit"> ${msg("Update")} </span>
|
||||
<span slot="header"> ${msg("Update Outpost")} </span>
|
||||
<ak-outpost-form
|
||||
slot="form"
|
||||
.instancePk=${item.pk}
|
||||
@ -138,7 +141,7 @@ export class OutpostListPage extends TablePage<Outpost> {
|
||||
${item.managed !== "goauthentik.io/outposts/embedded"
|
||||
? html`<ak-outpost-deployment-modal .outpost=${item} size=${PFSize.Medium}>
|
||||
<button slot="trigger" class="pf-c-button pf-m-tertiary">
|
||||
${t`View Deployment Info`}
|
||||
${msg("View Deployment Info")}
|
||||
</button>
|
||||
</ak-outpost-deployment-modal>`
|
||||
: html``}`,
|
||||
@ -149,7 +152,9 @@ export class OutpostListPage extends TablePage<Outpost> {
|
||||
return html`<td role="cell" colspan="5">
|
||||
<div class="pf-c-table__expandable-row-content">
|
||||
<h3>
|
||||
${t`Detailed health (one instance per column, data is cached so may be out of date)`}
|
||||
${msg(
|
||||
"Detailed health (one instance per column, data is cached so may be out of date)",
|
||||
)}
|
||||
</h3>
|
||||
<dl class="pf-c-description-list pf-m-3-col-on-lg">
|
||||
${this.health[item.pk].map((h) => {
|
||||
@ -169,7 +174,7 @@ export class OutpostListPage extends TablePage<Outpost> {
|
||||
renderToolbarSelected(): TemplateResult {
|
||||
const disabled = this.selectedElements.length < 1;
|
||||
return html`<ak-forms-delete-bulk
|
||||
objectLabel=${t`Outpost(s)`}
|
||||
objectLabel=${msg("Outpost(s)")}
|
||||
.objects=${this.selectedElements}
|
||||
.usedBy=${(item: Outpost) => {
|
||||
return new OutpostsApi(DEFAULT_CONFIG).outpostsInstancesUsedByList({
|
||||
@ -183,7 +188,7 @@ export class OutpostListPage extends TablePage<Outpost> {
|
||||
}}
|
||||
>
|
||||
<button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
|
||||
${t`Delete`}
|
||||
${msg("Delete")}
|
||||
</button>
|
||||
</ak-forms-delete-bulk>`;
|
||||
}
|
||||
@ -191,10 +196,10 @@ export class OutpostListPage extends TablePage<Outpost> {
|
||||
renderObjectCreate(): TemplateResult {
|
||||
return html`
|
||||
<ak-forms-modal>
|
||||
<span slot="submit"> ${t`Create`} </span>
|
||||
<span slot="header"> ${t`Create Outpost`} </span>
|
||||
<span slot="submit"> ${msg("Create")} </span>
|
||||
<span slot="header"> ${msg("Create Outpost")} </span>
|
||||
<ak-outpost-form slot="form"> </ak-outpost-form>
|
||||
<button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
|
||||
<button slot="trigger" class="pf-c-button pf-m-primary">${msg("Create")}</button>
|
||||
</ak-forms-modal>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -4,8 +4,7 @@ import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import "@goauthentik/elements/forms/SearchSelect";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
import { msg } from "@lit/localize";
|
||||
import { TemplateResult, html } from "lit";
|
||||
import { customElement } from "lit/decorators.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
@ -28,9 +27,9 @@ export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnecti
|
||||
|
||||
getSuccessMessage(): string {
|
||||
if (this.instance) {
|
||||
return t`Successfully updated integration.`;
|
||||
return msg("Successfully updated integration.");
|
||||
} else {
|
||||
return t`Successfully created integration.`;
|
||||
return msg("Successfully created integration.");
|
||||
}
|
||||
}
|
||||
|
||||
@ -49,7 +48,7 @@ export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnecti
|
||||
|
||||
renderForm(): TemplateResult {
|
||||
return html`<form class="pf-c-form pf-m-horizontal">
|
||||
<ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
|
||||
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
@ -69,13 +68,15 @@ export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnecti
|
||||
<i class="fas fa-check" aria-hidden="true"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span class="pf-c-switch__label">${t`Local`}</span>
|
||||
<span class="pf-c-switch__label">${msg("Local")}</span>
|
||||
</label>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`If enabled, use the local connection. Required Docker socket/Kubernetes Integration.`}
|
||||
${msg(
|
||||
"If enabled, use the local connection. Required Docker socket/Kubernetes Integration.",
|
||||
)}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Docker URL`} ?required=${true} name="url">
|
||||
<ak-form-element-horizontal label=${msg("Docker URL")} ?required=${true} name="url">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.url)}"
|
||||
@ -83,11 +84,13 @@ export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnecti
|
||||
required
|
||||
/>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Can be in the format of 'unix://' when connecting to a local docker daemon, using 'ssh://' to connect via SSH, or 'https://:2376' when connecting to a remote system.`}
|
||||
${msg(
|
||||
"Can be in the format of 'unix://' when connecting to a local docker daemon, using 'ssh://' to connect via SSH, or 'https://:2376' when connecting to a remote system.",
|
||||
)}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${t`TLS Verification Certificate`}
|
||||
label=${msg("TLS Verification Certificate")}
|
||||
name="tlsVerification"
|
||||
>
|
||||
<ak-search-select
|
||||
@ -118,11 +121,13 @@ export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnecti
|
||||
>
|
||||
</ak-search-select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`CA which the endpoint's Certificate is verified against. Can be left empty for no validation.`}
|
||||
${msg(
|
||||
"CA which the endpoint's Certificate is verified against. Can be left empty for no validation.",
|
||||
)}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${t`TLS Authentication Certificate/SSH Keypair`}
|
||||
label=${msg("TLS Authentication Certificate/SSH Keypair")}
|
||||
name="tlsAuthentication"
|
||||
>
|
||||
<ak-search-select
|
||||
@ -153,10 +158,12 @@ export class ServiceConnectionDockerForm extends ModelForm<DockerServiceConnecti
|
||||
>
|
||||
</ak-search-select>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Certificate/Key used for authentication. Can be left empty for no authentication.`}
|
||||
${msg(
|
||||
"Certificate/Key used for authentication. Can be left empty for no authentication.",
|
||||
)}
|
||||
</p>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`When connecting via SSH, this keypair is used for authentication.`}
|
||||
${msg("When connecting via SSH, this keypair is used for authentication.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
</form>`;
|
||||
|
||||
@ -5,8 +5,7 @@ import "@goauthentik/elements/forms/HorizontalFormElement";
|
||||
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
|
||||
import YAML from "yaml";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
import { msg } from "@lit/localize";
|
||||
import { TemplateResult, html } from "lit";
|
||||
import { customElement } from "lit/decorators.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
@ -26,9 +25,9 @@ export class ServiceConnectionKubernetesForm extends ModelForm<
|
||||
|
||||
getSuccessMessage(): string {
|
||||
if (this.instance) {
|
||||
return t`Successfully updated integration.`;
|
||||
return msg("Successfully updated integration.");
|
||||
} else {
|
||||
return t`Successfully created integration.`;
|
||||
return msg("Successfully created integration.");
|
||||
}
|
||||
}
|
||||
|
||||
@ -47,7 +46,7 @@ export class ServiceConnectionKubernetesForm extends ModelForm<
|
||||
|
||||
renderForm(): TemplateResult {
|
||||
return html`<form class="pf-c-form pf-m-horizontal">
|
||||
<ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
|
||||
<ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
|
||||
<input
|
||||
type="text"
|
||||
value="${ifDefined(this.instance?.name)}"
|
||||
@ -67,20 +66,22 @@ export class ServiceConnectionKubernetesForm extends ModelForm<
|
||||
<i class="fas fa-check" aria-hidden="true"></i>
|
||||
</span>
|
||||
</span>
|
||||
<span class="pf-c-switch__label">${t`Local`}</span>
|
||||
<span class="pf-c-switch__label">${msg("Local")}</span>
|
||||
</label>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`If enabled, use the local connection. Required Docker socket/Kubernetes Integration.`}
|
||||
${msg(
|
||||
"If enabled, use the local connection. Required Docker socket/Kubernetes Integration.",
|
||||
)}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal label=${t`Kubeconfig`} name="kubeconfig">
|
||||
<ak-form-element-horizontal label=${msg("Kubeconfig")} name="kubeconfig">
|
||||
<ak-codemirror
|
||||
mode="yaml"
|
||||
value="${YAML.stringify(first(this.instance?.kubeconfig, {}))}"
|
||||
>
|
||||
</ak-codemirror>
|
||||
<p class="pf-c-form__helper-text">
|
||||
${t`Set custom attributes using YAML or JSON.`}
|
||||
${msg("Set custom attributes using YAML or JSON.")}
|
||||
</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal name="verifySsl">
|
||||
@ -96,7 +97,7 @@ export class ServiceConnectionKubernetesForm extends ModelForm<
|
||||
</span>
|
||||
</span>
|
||||
<span class="pf-c-switch__label"
|
||||
>${t`Verify Kubernetes API SSL Certificate`}</span
|
||||
>${msg("Verify Kubernetes API SSL Certificate")}</span
|
||||
>
|
||||
</label>
|
||||
</ak-form-element-horizontal>
|
||||
|
||||
@ -13,8 +13,7 @@ import { PaginatedResponse } from "@goauthentik/elements/table/Table";
|
||||
import { TableColumn } from "@goauthentik/elements/table/Table";
|
||||
import { TablePage } from "@goauthentik/elements/table/TablePage";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
import { msg, str } from "@lit/localize";
|
||||
import { TemplateResult, html } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators.js";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
@ -66,11 +65,11 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
|
||||
|
||||
columns(): TableColumn[] {
|
||||
return [
|
||||
new TableColumn(t`Name`, "name"),
|
||||
new TableColumn(t`Type`),
|
||||
new TableColumn(t`Local`, "local"),
|
||||
new TableColumn(t`State`),
|
||||
new TableColumn(t`Actions`),
|
||||
new TableColumn(msg("Name"), "name"),
|
||||
new TableColumn(msg("Type")),
|
||||
new TableColumn(msg("Local"), "local"),
|
||||
new TableColumn(msg("State")),
|
||||
new TableColumn(msg("Actions")),
|
||||
];
|
||||
}
|
||||
|
||||
@ -83,14 +82,14 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
|
||||
html`${item.name}`,
|
||||
html`${item.verboseName}`,
|
||||
html`<ak-label color=${item.local ? PFColor.Grey : PFColor.Green}>
|
||||
${item.local ? t`Yes` : t`No`}
|
||||
${item.local ? msg("Yes") : msg("No")}
|
||||
</ak-label>`,
|
||||
html`${itemState?.healthy
|
||||
? html`<ak-label color=${PFColor.Green}>${ifDefined(itemState.version)}</ak-label>`
|
||||
: html`<ak-label color=${PFColor.Red}>${t`Unhealthy`}</ak-label>`}`,
|
||||
: html`<ak-label color=${PFColor.Red}>${msg("Unhealthy")}</ak-label>`}`,
|
||||
html` <ak-forms-modal>
|
||||
<span slot="submit"> ${t`Update`} </span>
|
||||
<span slot="header"> ${t`Update ${item.verboseName}`} </span>
|
||||
<span slot="submit"> ${msg("Update")} </span>
|
||||
<span slot="header"> ${msg(str`Update ${item.verboseName}`)} </span>
|
||||
<ak-proxy-form
|
||||
slot="form"
|
||||
.args=${{
|
||||
@ -109,7 +108,7 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
|
||||
renderToolbarSelected(): TemplateResult {
|
||||
const disabled = this.selectedElements.length < 1;
|
||||
return html`<ak-forms-delete-bulk
|
||||
objectLabel=${t`Outpost integration(s)`}
|
||||
objectLabel=${msg("Outpost integration(s)")}
|
||||
.objects=${this.selectedElements}
|
||||
.usedBy=${(item: ServiceConnection) => {
|
||||
return new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllUsedByList({
|
||||
@ -123,7 +122,7 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
|
||||
}}
|
||||
>
|
||||
<button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
|
||||
${t`Delete`}
|
||||
${msg("Delete")}
|
||||
</button>
|
||||
</ak-forms-delete-bulk>`;
|
||||
}
|
||||
|
||||
@ -7,8 +7,7 @@ import "@goauthentik/elements/wizard/FormWizardPage";
|
||||
import "@goauthentik/elements/wizard/Wizard";
|
||||
import { WizardPage } from "@goauthentik/elements/wizard/WizardPage";
|
||||
|
||||
import { t } from "@lingui/macro";
|
||||
|
||||
import { msg, str } from "@lit/localize";
|
||||
import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
|
||||
import { CSSResult, TemplateResult, html } from "lit";
|
||||
import { property } from "lit/decorators.js";
|
||||
@ -28,7 +27,7 @@ export class InitialServiceConnectionWizardPage extends WizardPage {
|
||||
static get styles(): CSSResult[] {
|
||||
return [PFBase, PFForm, PFButton, PFRadio];
|
||||
}
|
||||
sidebarLabel = () => t`Select type`;
|
||||
sidebarLabel = () => msg("Select type");
|
||||
|
||||
activeCallback: () => Promise<void> = async () => {
|
||||
this.host.isValid = false;
|
||||
@ -75,7 +74,7 @@ export class ServiceConnectionWizard extends AKElement {
|
||||
}
|
||||
|
||||
@property()
|
||||
createText = t`Create`;
|
||||
createText = msg("Create");
|
||||
|
||||
@property({ attribute: false })
|
||||
connectionTypes: TypeCreate[] = [];
|
||||
@ -90,8 +89,8 @@ export class ServiceConnectionWizard extends AKElement {
|
||||
return html`
|
||||
<ak-wizard
|
||||
.steps=${["initial"]}
|
||||
header=${t`New outpost integration`}
|
||||
description=${t`Create a new outpost integration.`}
|
||||
header=${msg("New outpost integration")}
|
||||
description=${msg("Create a new outpost integration.")}
|
||||
>
|
||||
<ak-service-connection-wizard-initial
|
||||
slot="initial"
|
||||
@ -102,7 +101,7 @@ export class ServiceConnectionWizard extends AKElement {
|
||||
return html`
|
||||
<ak-wizard-page-form
|
||||
slot=${`type-${type.component}-${type.modelName}`}
|
||||
.sidebarLabel=${() => t`Create ${type.name}`}
|
||||
.sidebarLabel=${() => msg(str`Create ${type.name}`)}
|
||||
>
|
||||
<ak-proxy-form type=${type.component}></ak-proxy-form>
|
||||
</ak-wizard-page-form>
|
||||
|
||||
Reference in New Issue
Block a user