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

32
web/src/admin/providers/ProviderListPage.ts
View File

@ -15,8 +15,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 } from "lit/decorators.js";
@ -28,10 +27,10 @@ export class ProviderListPage extends TablePage<Provider> {
return true;
}
pageTitle(): string {
return t`Providers`;
return msg("Providers");
}
pageDescription(): string {
return t`Provide support for protocols like SAML and OAuth to assigned applications.`;
return msg("Provide support for protocols like SAML and OAuth to assigned applications.");
}
pageIcon(): string {
return "pf-icon pf-icon-integration";
@ -53,17 +52,17 @@ export class ProviderListPage extends TablePage<Provider> {
columns(): TableColumn[] {
return [
new TableColumn(t`Name`, "name"),
new TableColumn(t`Application`),
new TableColumn(t`Type`),
new TableColumn(t`Actions`),
new TableColumn(msg("Name"), "name"),
new TableColumn(msg("Application")),
new TableColumn(msg("Type")),
new TableColumn(msg("Actions")),
];
}
renderToolbarSelected(): TemplateResult {
const disabled = this.selectedElements.length < 1;
return html`<ak-forms-delete-bulk
objectLabel=${t`Provider(s)`}
objectLabel=${msg("Provider(s)")}
.objects=${this.selectedElements}
.usedBy=${(item: Provider) => {
return new ProvidersApi(DEFAULT_CONFIG).providersAllUsedByList({
@ -77,7 +76,7 @@ export class ProviderListPage extends TablePage<Provider> {
}}
>
<button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
${t`Delete`}
${msg("Delete")}
</button>
</ak-forms-delete-bulk>`;
}
@ -85,20 +84,21 @@ export class ProviderListPage extends TablePage<Provider> {
rowApp(item: Provider): TemplateResult {
if (item.assignedApplicationName) {
return html`<i class="pf-icon pf-icon-ok pf-m-success"></i>
${t`Assigned to application `}
${msg("Assigned to application ")}
<a href="#/core/applications/${item.assignedApplicationSlug}"
>${item.assignedApplicationName}</a
>`;
}
if (item.assignedBackchannelApplicationName) {
return html`<i class="pf-icon pf-icon-ok pf-m-success"></i>
${t`Assigned to application (backchannel) `}
${msg("Assigned to application (backchannel) ")}
<a href="#/core/applications/${item.assignedBackchannelApplicationSlug}"
>${item.assignedBackchannelApplicationName}</a
>`;
}
return html`<i class="pf-icon pf-icon-warning-triangle pf-m-warning"></i>
${t`Warning: Provider not assigned to any application.`}`;
return html`<i class="pf-icon pf-icon-warning-triangle pf-m-warning"></i> ${msg(
"Warning: Provider not assigned to any application.",
)}`;
}
row(item: Provider): TemplateResult[] {
@ -107,8 +107,8 @@ export class ProviderListPage extends TablePage<Provider> {
this.rowApp(item),
html`${item.verboseName}`,
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=${{

21
web/src/admin/providers/ProviderWizard.ts
View File

@ -11,8 +11,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";
@ -33,7 +32,7 @@ export class InitialProviderWizardPage extends WizardPage {
static get styles(): CSSResult[] {
return [PFBase, PFForm, PFHint, PFButton, PFRadio];
}
sidebarLabel = () => t`Select type`;
sidebarLabel = () => msg("Select type");
activeCallback: () => Promise<void> = async () => {
this.host.isValid = false;
@ -48,9 +47,11 @@ export class InitialProviderWizardPage extends WizardPage {
renderHint(): TemplateResult {
return html`<div class="pf-c-hint">
<div class="pf-c-hint__title">${t`Try the new application wizard`}</div>
<div class="pf-c-hint__title">${msg("Try the new application wizard")}</div>
<div class="pf-c-hint__body">
${t`The new application wizard greatly simplifies the steps required to create applications and providers.`}
${msg(
"The new application wizard greatly simplifies the steps required to create applications and providers.",
)}
</div>
<div class="pf-c-hint__footer">
<a
@ -58,7 +59,7 @@ export class InitialProviderWizardPage extends WizardPage {
href=${paramURL("/core/applications", {
createForm: true,
})}
>${t`Try it now`}</a
>${msg("Try it now")}</a
>
</div>
</div>
@ -94,7 +95,7 @@ export class ProviderWizard extends AKElement {
}
@property()
createText = t`Create`;
createText = msg("Create");
@property({ attribute: false })
providerTypes: TypeCreate[] = [];
@ -114,8 +115,8 @@ export class ProviderWizard extends AKElement {
return html`
<ak-wizard
.steps=${["initial"]}
header=${t`New provider`}
description=${t`Create a new provider.`}
header=${msg("New provider")}
description=${msg("Create a new provider.")}
.finalHandler=${() => {
return this.finalHandler();
}}
@ -126,7 +127,7 @@ export class ProviderWizard extends AKElement {
return html`
<ak-wizard-page-form
slot=${`type-${type.component}`}
.sidebarLabel=${() => t`Create ${type.name}`}
.sidebarLabel=${() => msg(str`Create ${type.name}`)}
>
<ak-proxy-form type=${type.component}></ak-proxy-form>
</ak-wizard-page-form>

9
web/src/admin/providers/RelatedApplicationButton.ts
View File

@ -3,8 +3,7 @@ import { AKElement } from "@goauthentik/elements/Base";
import "@goauthentik/elements/Spinner";
import "@goauthentik/elements/forms/ModalForm";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -29,10 +28,10 @@ export class RelatedApplicationButton extends AKElement {
</a>`;
}
return html`<ak-forms-modal>
<span slot="submit"> ${t`Create`} </span>
<span slot="header"> ${t`Create Application`} </span>
<span slot="submit"> ${msg("Create")} </span>
<span slot="header"> ${msg("Create Application")} </span>
<ak-application-form slot="form" .provider=${this.provider?.pk}> </ak-application-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>`;
}
}

85
web/src/admin/providers/ldap/LDAPProviderForm.ts
View File

@ -8,8 +8,7 @@ import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import "@goauthentik/elements/forms/Radio";
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";
@ -40,9 +39,9 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
getSuccessMessage(): string {
if (this.instance) {
return t`Successfully updated provider.`;
return msg("Successfully updated provider.");
} else {
return t`Successfully created provider.`;
return msg("Successfully created provider.");
}
}
@ -62,7 +61,7 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
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)}"
@ -71,7 +70,7 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Bind flow`}
label=${msg("Bind flow")}
?required=${true}
name="authorizationFlow"
>
@ -105,9 +104,9 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
}}
>
</ak-search-select>
<p class="pf-c-form__helper-text">${t`Flow used for users to authenticate.`}</p>
<p class="pf-c-form__helper-text">${msg("Flow used for users to authenticate.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Search group`} name="searchGroup">
<ak-form-element-horizontal label=${msg("Search group")} name="searchGroup">
<ak-search-select
.fetchObjects=${async (query?: string): Promise<Group[]> => {
const args: CoreGroupsListRequest = {
@ -132,57 +131,71 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
>
</ak-search-select>
<p class="pf-c-form__helper-text">
${t`Users in the selected group can do search queries. If no group is selected, no LDAP Searches are allowed.`}
${msg(
"Users in the selected group can do search queries. If no group is selected, no LDAP Searches are allowed.",
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Bind mode`} name="bindMode">
<ak-form-element-horizontal label=${msg("Bind mode")} name="bindMode">
<ak-radio
.options=${[
{
label: t`Cached binding`,
label: msg("Cached binding"),
value: LDAPAPIAccessMode.Cached,
default: true,
description: html`${t`Flow is executed and session is cached in memory. Flow is executed when session expires`}`,
description: html`${msg(
"Flow is executed and session is cached in memory. Flow is executed when session expires",
)}`,
},
{
label: t`Direct binding`,
label: msg("Direct binding"),
value: LDAPAPIAccessMode.Direct,
description: html`${t`Always execute the configured bind flow to authenticate the user`}`,
description: html`${msg(
"Always execute the configured bind flow to authenticate the user",
)}`,
},
]}
.value=${this.instance?.bindMode}
>
</ak-radio>
<p class="pf-c-form__helper-text">
${t`Configure how the outpost authenticates requests.`}
${msg("Configure how the outpost authenticates requests.")}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Search mode`} name="searchMode">
<ak-form-element-horizontal label=${msg("Search mode")} name="searchMode">
<ak-radio
.options=${[
{
label: t`Cached querying`,
label: msg("Cached querying"),
value: LDAPAPIAccessMode.Cached,
default: true,
description: html`${t`The outpost holds all users and groups in-memory and will refresh every 5 Minutes`}`,
description: html`${msg(
"The outpost holds all users and groups in-memory and will refresh every 5 Minutes",
)}`,
},
{
label: t`Direct querying`,
label: msg("Direct querying"),
value: LDAPAPIAccessMode.Direct,
description: html`${t`Always returns the latest data, but slower than cached querying`}`,
description: html`${msg(
"Always returns the latest data, but slower than cached querying",
)}`,
},
]}
.value=${this.instance?.searchMode}
>
</ak-radio>
<p class="pf-c-form__helper-text">
${t`Configure how the outpost queries the core authentik server's users.`}
${msg("Configure how the outpost queries the core authentik server's users.")}
</p>
</ak-form-element-horizontal>
<ak-form-group .expanded=${true}>
<span slot="header"> ${t`Protocol settings`} </span>
<span slot="header"> ${msg("Protocol settings")} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal label=${t`Base DN`} ?required=${true} name="baseDn">
<ak-form-element-horizontal
label=${msg("Base DN")}
?required=${true}
name="baseDn"
>
<input
type="text"
value="${first(this.instance?.baseDn, "DC=ldap,DC=goauthentik,DC=io")}"
@ -190,10 +203,12 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
required
/>
<p class="pf-c-form__helper-text">
${t`LDAP DN under which bind requests and search requests can be made.`}
${msg(
"LDAP DN under which bind requests and search requests can be made.",
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Certificate`} name="certificate">
<ak-form-element-horizontal label=${msg("Certificate")} name="certificate">
<ak-search-select
.fetchObjects=${async (
query?: string,
@ -224,14 +239,18 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
>
</ak-search-select>
<p class="pf-c-form__helper-text">
${t`Due to protocol limitations, this certificate is only used when the outpost has a single provider, or all providers use the same certificate.`}
${msg(
"Due to protocol limitations, this certificate is only used when the outpost has a single provider, or all providers use the same certificate.",
)}
</p>
<p class="pf-c-form__helper-text">
${t`If multiple providers share an outpost, a self-signed certificate is used.`}
${msg(
"If multiple providers share an outpost, a self-signed certificate is used.",
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`UID start number`}
label=${msg("UID start number")}
?required=${true}
name="uidStartNumber"
>
@ -242,11 +261,13 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
required
/>
<p class="pf-c-form__helper-text">
${t`The start for uidNumbers, this number is added to the user.Pk to make sure that the numbers aren't too low for POSIX users. Default is 2000 to ensure that we don't collide with local users uidNumber`}
${msg(
"The start for uidNumbers, this number is added to the user.Pk to make sure that the numbers aren't too low for POSIX users. Default is 2000 to ensure that we don't collide with local users uidNumber",
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`GID start number`}
label=${msg("GID start number")}
?required=${true}
name="gidStartNumber"
>
@ -257,7 +278,9 @@ export class LDAPProviderFormPage extends ModelForm<LDAPProvider, number> {
required
/>
<p class="pf-c-form__helper-text">
${t`The start for gidNumbers, this number is added to a number generated from the group.Pk to make sure that the numbers aren't too low for POSIX groups. Default is 4000 to ensure that we don't collide with local groups or users primary groups gidNumber`}
${msg(
"The start for gidNumbers, this number is added to a number generated from the group.Pk to make sure that the numbers aren't too low for POSIX groups. Default is 4000 to ensure that we don't collide with local groups or users primary groups gidNumber",
)}
</p>
</ak-form-element-horizontal>
</div>

37
web/src/admin/providers/ldap/LDAPProviderViewPage.ts
View File

@ -10,8 +10,7 @@ import "@goauthentik/elements/buttons/ModalButton";
import "@goauthentik/elements/buttons/SpinnerButton";
import "@goauthentik/elements/events/ObjectChangelog";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
@ -84,12 +83,12 @@ export class LDAPProviderViewPage extends AKElement {
return html``;
}
return html` <ak-tabs>
<section slot="page-overview" data-tab-title="${t`Overview`}">
<section slot="page-overview" data-tab-title="${msg("Overview")}">
${this.renderTabOverview()}
</section>
<section
slot="page-changelog"
data-tab-title="${t`Changelog`}"
data-tab-title="${msg("Changelog")}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-c-card">
@ -113,7 +112,7 @@ export class LDAPProviderViewPage extends AKElement {
${
this.provider?.outpostSet.length < 1
? html`<div slot="header" class="pf-c-banner pf-m-warning">
${t`Warning: Provider is not used by any Outpost.`}
${msg("Warning: Provider is not used by any Outpost.")}
</div>`
: html``
}
@ -123,7 +122,7 @@ export class LDAPProviderViewPage extends AKElement {
<dl class="pf-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${t`Name`}</span>
<span class="pf-c-description-list__text">${msg("Name")}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
@ -134,7 +133,7 @@ export class LDAPProviderViewPage extends AKElement {
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Assigned to application`}</span
>${msg("Assigned to application")}</span
>
</dt>
<dd class="pf-c-description-list__description">
@ -148,7 +147,7 @@ export class LDAPProviderViewPage extends AKElement {
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Base DN`}</span
>${msg("Base DN")}</span
>
</dt>
<dd class="pf-c-description-list__description">
@ -161,32 +160,32 @@ export class LDAPProviderViewPage extends AKElement {
</div>
<div class="pf-c-card__footer">
<ak-forms-modal>
<span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update LDAP Provider`} </span>
<span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update LDAP Provider")} </span>
<ak-provider-ldap-form slot="form" .instancePk=${this.provider.pk}>
</ak-provider-ldap-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
${msg("Edit")}
</button>
</ak-forms-modal>
</div>
</div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">
${t`How to connect`}
${msg("How to connect")}
</div>
<div class="pf-c-card__body">
<p>
${t`Connect to the LDAP Server on port 389:`}
${msg("Connect to the LDAP Server on port 389:")}
</p>
<ul class="pf-c-list">
<li>${t`Check the IP of the Kubernetes service, or`}</li>
<li>${t`The Host IP of the docker host`}</li>
<li>${msg("Check the IP of the Kubernetes service, or")}</li>
<li>${msg("The Host IP of the docker host")}</li>
</ul>
<form class="pf-c-form">
<div class="pf-c-form__group">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text">${t`Bind DN`}</span>
<span class="pf-c-form__label-text">${msg("Bind DN")}</span>
</label>
<input
class="pf-c-form-control"
@ -199,7 +198,9 @@ export class LDAPProviderViewPage extends AKElement {
</div>
<div class="pf-c-form__group">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text">${t`Bind Password`}</span>
<span class="pf-c-form__label-text">${msg(
"Bind Password",
)}</span>
</label>
<input
class="pf-c-form-control"
@ -210,7 +211,7 @@ export class LDAPProviderViewPage extends AKElement {
</div>
<div class="pf-c-form__group">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text">${t`Search base`}</span>
<span class="pf-c-form__label-text">${msg("Search base")}</span>
</label>
<input
class="pf-c-form-control"

139
web/src/admin/providers/oauth2/OAuth2ProviderForm.ts
View File

@ -8,8 +8,7 @@ import "@goauthentik/elements/forms/Radio";
import "@goauthentik/elements/forms/SearchSelect";
import "@goauthentik/elements/utils/TimeDeltaHelp";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { TemplateResult, html } from "lit";
import { customElement, state } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
@ -63,9 +62,9 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
getSuccessMessage(): string {
if (this.instance) {
return t`Successfully updated provider.`;
return msg("Successfully updated provider.");
} else {
return t`Successfully created provider.`;
return msg("Successfully created provider.");
}
}
@ -84,7 +83,7 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
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)}"
@ -92,7 +91,10 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
required
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Authentication flow`} name="authenticationFlow">
<ak-form-element-horizontal
label=${msg("Authentication flow")}
name="authenticationFlow"
>
<ak-search-select
.fetchObjects=${async (query?: string): Promise<Flow[]> => {
const args: FlowsInstancesListRequest = {
@ -120,11 +122,11 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
>
</ak-search-select>
<p class="pf-c-form__helper-text">
${t`Flow used when a user access this provider and is not authenticated.`}
${msg("Flow used when a user access this provider and is not authenticated.")}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Authorization flow`}
label=${msg("Authorization flow")}
?required=${true}
name="authorizationFlow"
>
@ -155,15 +157,15 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
>
</ak-search-select>
<p class="pf-c-form__helper-text">
${t`Flow used when authorizing this provider.`}
${msg("Flow used when authorizing this provider.")}
</p>
</ak-form-element-horizontal>
<ak-form-group .expanded=${true}>
<span slot="header"> ${t`Protocol settings`} </span>
<span slot="header"> ${msg("Protocol settings")} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal
label=${t`Client type`}
label=${msg("Client type")}
?required=${true}
name="clientType"
>
@ -177,15 +179,19 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
}}
.options=${[
{
label: t`Confidential`,
label: msg("Confidential"),
value: ClientTypeEnum.Confidential,
default: true,
description: html`${t`Confidential clients are capable of maintaining the confidentiality of their credentials such as client secrets`}`,
description: html`${msg(
"Confidential clients are capable of maintaining the confidentiality of their credentials such as client secrets",
)}`,
},
{
label: t`Public`,
label: msg("Public"),
value: ClientTypeEnum.Public,
description: html`${t`Public clients are incapable of maintaining the confidentiality and should use methods like PKCE. `}`,
description: html`${msg(
"Public clients are incapable of maintaining the confidentiality and should use methods like PKCE. ",
)}`,
},
]}
.value=${this.instance?.clientType}
@ -193,7 +199,7 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
</ak-radio>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Client ID`}
label=${msg("Client ID")}
?required=${true}
name="clientId"
>
@ -209,7 +215,7 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
</ak-form-element-horizontal>
<ak-form-element-horizontal
?hidden=${!this.showClientSecret}
label=${t`Client Secret`}
label=${msg("Client Secret")}
name="clientSecret"
>
<input
@ -222,23 +228,29 @@ export class OAuth2ProviderFormPage extends ModelForm<OAuth2Provider, number> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Redirect URIs/Origins (RegEx)`}
label=${msg("Redirect URIs/Origins (RegEx)")}
name="redirectUris"
>
<textarea class="pf-c-form-control">
${this.instance?.redirectUris}</textarea
>
<p class="pf-c-form__helper-text">
${t`Valid redirect URLs after a successful authorization flow. Also specify any origins here for Implicit flows.`}
${msg(
"Valid redirect URLs after a successful authorization flow. Also specify any origins here for Implicit flows.",
)}
</p>
<p class="pf-c-form__helper-text">
${t`If no explicit redirect URIs are specified, the first successfully used redirect URI will be saved.`}
${msg(
"If no explicit redirect URIs are specified, the first successfully used redirect URI will be saved.",
)}
</p>
<p class="pf-c-form__helper-text">
${t`To allow any redirect URI, set this value to ".*". Be aware of the possible security implications this can have.`}
${msg(
'To allow any redirect URI, set this value to ".*". Be aware of the possible security implications this can have.',
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Signing Key`} name="signingKey">
<ak-form-element-horizontal label=${msg("Signing Key")} name="signingKey">
<ak-search-select
.fetchObjects=${async (
query?: string,
@ -275,16 +287,16 @@ ${this.instance?.redirectUris}</textarea
?blankable=${true}
>
</ak-search-select>
<p class="pf-c-form__helper-text">${t`Key used to sign the tokens.`}</p>
<p class="pf-c-form__helper-text">${msg("Key used to sign the tokens.")}</p>
</ak-form-element-horizontal>
</div>
</ak-form-group>
<ak-form-group>
<span slot="header"> ${t`Advanced protocol settings`} </span>
<span slot="header"> ${msg("Advanced protocol settings")} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal
label=${t`Access code validity`}
label=${msg("Access code validity")}
?required=${true}
name="accessCodeValidity"
>
@ -295,12 +307,12 @@ ${this.instance?.redirectUris}</textarea
required
/>
<p class="pf-c-form__helper-text">
${t`Configure how long access codes are valid for.`}
${msg("Configure how long access codes are valid for.")}
</p>
<ak-utils-time-delta-help></ak-utils-time-delta-help>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Access Token validity`}
label=${msg("Access Token validity")}
?required=${true}
name="accessTokenValidity"
>
@ -311,12 +323,12 @@ ${this.instance?.redirectUris}</textarea
required
/>
<p class="pf-c-form__helper-text">
${t`Configure how long access tokens are valid for.`}
${msg("Configure how long access tokens are valid for.")}
</p>
<ak-utils-time-delta-help></ak-utils-time-delta-help>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Refresh Token validity`}
label=${msg("Refresh Token validity")}
?required=${true}
name="refreshTokenValidity"
>
@ -327,11 +339,11 @@ ${this.instance?.redirectUris}</textarea
required
/>
<p class="pf-c-form__helper-text">
${t`Configure how long refresh tokens are valid for.`}
${msg("Configure how long refresh tokens are valid for.")}
</p>
<ak-utils-time-delta-help></ak-utils-time-delta-help>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Scopes`} name="propertyMappings">
<ak-form-element-horizontal label=${msg("Scopes")} name="propertyMappings">
<select class="pf-c-form-control" multiple>
${this.propertyMappings?.results.map((scope) => {
let selected = false;
@ -356,52 +368,60 @@ ${this.instance?.redirectUris}</textarea
})}
</select>
<p class="pf-c-form__helper-text">
${t`Select which scopes can be used by the client. The client still has to specify the scope to access the data.`}
${msg(
"Select which scopes can be used by the client. The client still has to specify the scope to access the data.",
)}
</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`Subject mode`}
label=${msg("Subject mode")}
?required=${true}
name="subMode"
>
<ak-radio
.options=${[
{
label: t`Based on the User's hashed ID`,
label: msg("Based on the User's hashed ID"),
value: SubModeEnum.HashedUserId,
default: true,
},
{
label: t`Based on the User's ID`,
label: msg("Based on the User's ID"),
value: SubModeEnum.UserId,
},
{
label: t`Based on the User's UUID`,
label: msg("Based on the User's UUID"),
value: SubModeEnum.UserUuid,
},
{
label: t`Based on the User's username`,
label: msg("Based on the User's username"),
value: SubModeEnum.UserUsername,
},
{
label: t`Based on the User's Email`,
label: msg("Based on the User's Email"),
value: SubModeEnum.UserEmail,
description: html`${t`This is recommended over the UPN mode.`}`,
description: html`${msg(
"This is recommended over the UPN mode.",
)}`,
},
{
label: t`Based on the User's UPN`,
label: msg("Based on the User's UPN"),
value: SubModeEnum.UserUpn,
description: html`${t`Requires the user to have a 'upn' attribute set, and falls back to hashed user ID. Use this mode only if you have different UPN and Mail domains.`}`,
description: html`${msg(
"Requires the user to have a 'upn' attribute set, and falls back to hashed user ID. Use this mode only if you have different UPN and Mail domains.",
)}`,
},
]}
.value=${this.instance?.subMode}
>
</ak-radio>
<p class="pf-c-form__helper-text">
${t`Configure what data should be used as unique User Identifier. For most cases, the default should be fine.`}
${msg(
"Configure what data should be used as unique User Identifier. For most cases, the default should be fine.",
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="includeClaimsInIdToken">
@ -416,26 +436,32 @@ ${this.instance?.redirectUris}</textarea
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Include claims in id_token`}</span>
<span class="pf-c-switch__label"
>${msg("Include claims in id_token")}</span
>
</label>
<p class="pf-c-form__helper-text">
${t`Include User claims from scopes in the id_token, for applications that don't access the userinfo endpoint.`}
${msg(
"Include User claims from scopes in the id_token, for applications that don't access the userinfo endpoint.",
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Issuer mode`}
label=${msg("Issuer mode")}
?required=${true}
name="issuerMode"
>
<ak-radio
.options=${[
{
label: t`Each provider has a different issuer, based on the application slug`,
label: msg(
"Each provider has a different issuer, based on the application slug",
),
value: IssuerModeEnum.PerProvider,
default: true,
},
{
label: t`Same identifier is used for all providers`,
label: msg("Same identifier is used for all providers"),
value: IssuerModeEnum.Global,
},
]}
@ -443,16 +469,21 @@ ${this.instance?.redirectUris}</textarea
>
</ak-radio>
<p class="pf-c-form__helper-text">
${t`Configure how the issuer field of the ID Token should be filled.`}
${msg(
"Configure how the issuer field of the ID Token should be filled.",
)}
</p>
</ak-form-element-horizontal>
</div>
</ak-form-group>
<ak-form-group>
<span slot="header">${t`Machine-to-Machine authentication settings`}</span>
<span slot="header">${msg("Machine-to-Machine authentication settings")}</span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal label=${t`Trusted OIDC Sources`} name="jwksSources">
<ak-form-element-horizontal
label=${msg("Trusted OIDC Sources")}
name="jwksSources"
>
<select class="pf-c-form-control" multiple>
${this.oauthSources?.results.map((source) => {
const selected = (this.instance?.jwksSources || []).some((su) => {
@ -464,10 +495,12 @@ ${this.instance?.redirectUris}</textarea
})}
</select>
<p class="pf-c-form__helper-text">
${t`JWTs signed by certificates configured in the selected sources can be used to authenticate to this provider.`}
${msg(
"JWTs signed by certificates configured in the selected sources can be used to authenticate to this provider.",
)}
</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>
</div>

63
web/src/admin/providers/oauth2/OAuth2ProviderViewPage.ts
View File

@ -13,8 +13,7 @@ import "@goauthentik/elements/buttons/ModalButton";
import "@goauthentik/elements/buttons/SpinnerButton";
import "@goauthentik/elements/events/ObjectChangelog";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
@ -88,7 +87,7 @@ export class OAuth2ProviderViewPage extends AKElement {
return html` <ak-tabs>
<section
slot="page-overview"
data-tab-title="${t`Overview`}"
data-tab-title="${msg("Overview")}"
@activate=${() => {
new ProvidersApi(DEFAULT_CONFIG)
.providersOauth2SetupUrlsRetrieve({
@ -103,7 +102,7 @@ export class OAuth2ProviderViewPage extends AKElement {
</section>
<section
slot="page-preview"
data-tab-title="${t`Preview`}"
data-tab-title="${msg("Preview")}"
@activate=${() => {
new ProvidersApi(DEFAULT_CONFIG)
.providersOauth2PreviewUserRetrieve({
@ -116,7 +115,7 @@ export class OAuth2ProviderViewPage extends AKElement {
</section>
<section
slot="page-changelog"
data-tab-title="${t`Changelog`}"
data-tab-title="${msg("Changelog")}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-c-card">
@ -139,7 +138,7 @@ export class OAuth2ProviderViewPage extends AKElement {
return html` ${this.provider?.assignedApplicationName
? html``
: html`<div slot="header" class="pf-c-banner pf-m-warning">
${t`Warning: Provider is not used by an Application.`}
${msg("Warning: Provider is not used by an Application.")}
</div>`}
<div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">
<div
@ -149,7 +148,7 @@ export class OAuth2ProviderViewPage extends AKElement {
<dl class="pf-c-description-list">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${t`Name`}</span>
<span class="pf-c-description-list__text">${msg("Name")}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
@ -160,7 +159,7 @@ export class OAuth2ProviderViewPage extends AKElement {
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Assigned to application`}</span
>${msg("Assigned to application")}</span
>
</dt>
<dd class="pf-c-description-list__description">
@ -173,7 +172,7 @@ export class OAuth2ProviderViewPage extends AKElement {
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Client type`}</span
>${msg("Client type")}</span
>
</dt>
<dd class="pf-c-description-list__description">
@ -184,7 +183,9 @@ export class OAuth2ProviderViewPage 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`Client ID`}</span>
<span class="pf-c-description-list__text"
>${msg("Client ID")}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
@ -195,7 +196,7 @@ export class OAuth2ProviderViewPage extends AKElement {
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Redirect URIs`}</span
>${msg("Redirect URIs")}</span
>
</dt>
<dd class="pf-c-description-list__description">
@ -208,15 +209,15 @@ export class OAuth2ProviderViewPage extends AKElement {
</div>
<div class="pf-c-card__footer">
<ak-forms-modal>
<span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update OAuth2 Provider`} </span>
<span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update OAuth2 Provider")} </span>
<ak-provider-oauth2-form
slot="form"
.instancePk=${this.provider.pk || 0}
>
</ak-provider-oauth2-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
${msg("Edit")}
</button>
</ak-forms-modal>
</div>
@ -227,83 +228,87 @@ export class OAuth2ProviderViewPage extends AKElement {
<div class="pf-c-form__group">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text"
>${t`OpenID Configuration URL`}</span
>${msg("OpenID Configuration URL")}</span
>
</label>
<input
class="pf-c-form-control"
readonly
type="text"
value="${this.providerUrls?.providerInfo || t`-`}"
value="${this.providerUrls?.providerInfo || msg("-")}"
/>
</div>
<div class="pf-c-form__group">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text"
>${t`OpenID Configuration Issuer`}</span
>${msg("OpenID Configuration Issuer")}</span
>
</label>
<input
class="pf-c-form-control"
readonly
type="text"
value="${this.providerUrls?.issuer || t`-`}"
value="${this.providerUrls?.issuer || msg("-")}"
/>
</div>
<hr />
<div class="pf-c-form__group">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text">${t`Authorize URL`}</span>
<span class="pf-c-form__label-text"
>${msg("Authorize URL")}</span
>
</label>
<input
class="pf-c-form-control"
readonly
type="text"
value="${this.providerUrls?.authorize || t`-`}"
value="${this.providerUrls?.authorize || msg("-")}"
/>
</div>
<div class="pf-c-form__group">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text">${t`Token URL`}</span>
<span class="pf-c-form__label-text">${msg("Token URL")}</span>
</label>
<input
class="pf-c-form-control"
readonly
type="text"
value="${this.providerUrls?.token || t`-`}"
value="${this.providerUrls?.token || msg("-")}"
/>
</div>
<div class="pf-c-form__group">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text">${t`Userinfo URL`}</span>
<span class="pf-c-form__label-text"
>${msg("Userinfo URL")}</span
>
</label>
<input
class="pf-c-form-control"
readonly
type="text"
value="${this.providerUrls?.userInfo || t`-`}"
value="${this.providerUrls?.userInfo || msg("-")}"
/>
</div>
<div class="pf-c-form__group">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text">${t`Logout URL`}</span>
<span class="pf-c-form__label-text">${msg("Logout URL")}</span>
</label>
<input
class="pf-c-form-control"
readonly
type="text"
value="${this.providerUrls?.logout || t`-`}"
value="${this.providerUrls?.logout || msg("-")}"
/>
</div>
<div class="pf-c-form__group">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text">${t`JWKS URL`}</span>
<span class="pf-c-form__label-text">${msg("JWKS URL")}</span>
</label>
<input
class="pf-c-form-control"
readonly
type="text"
value="${this.providerUrls?.jwks || t`-`}"
value="${this.providerUrls?.jwks || msg("-")}"
/>
</div>
</form>
@ -341,7 +346,7 @@ export class OAuth2ProviderViewPage extends AKElement {
>
<div class="pf-c-card">
<div class="pf-c-card__title">
${t`Example JWT payload (for currently authenticated user)`}
${msg("Example JWT payload (for currently authenticated user)")}
</div>
<div class="pf-c-card__body">
${this.preview

146
web/src/admin/providers/proxy/ProxyProviderForm.ts
View File

@ -7,8 +7,7 @@ import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import "@goauthentik/elements/forms/SearchSelect";
import "@goauthentik/elements/utils/TimeDeltaHelp";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, css } from "lit";
import { TemplateResult, html } from "lit";
import { customElement, state } from "lit/decorators.js";
@ -84,9 +83,9 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
getSuccessMessage(): string {
if (this.instance) {
return t`Successfully updated provider.`;
return msg("Successfully updated provider.");
} else {
return t`Successfully created provider.`;
return msg("Successfully created provider.");
}
}
@ -109,7 +108,7 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
renderHttpBasic(): TemplateResult {
return html`<ak-form-element-horizontal
label=${t`HTTP-Basic Username Key`}
label=${msg("HTTP-Basic Username Key")}
name="basicAuthUserAttribute"
>
<input
@ -118,11 +117,13 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
class="pf-c-form-control"
/>
<p class="pf-c-form__helper-text">
${t`User/Group Attribute used for the user part of the HTTP-Basic Header. If not set, the user's Email address is used.`}
${msg(
"User/Group Attribute used for the user part of the HTTP-Basic Header. If not set, the user's Email address is used.",
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`HTTP-Basic Password Key`}
label=${msg("HTTP-Basic Password Key")}
name="basicAuthPasswordAttribute"
>
<input
@ -131,7 +132,9 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
class="pf-c-form-control"
/>
<p class="pf-c-form__helper-text">
${t`User/Group Attribute used for the password part of the HTTP-Basic Header.`}
${msg(
"User/Group Attribute used for the password part of the HTTP-Basic Header.",
)}
</p>
</ak-form-element-horizontal>`;
}
@ -147,7 +150,7 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
this.mode = ProxyMode.Proxy;
}}
>
<span class="pf-c-toggle-group__text">${t`Proxy`}</span>
<span class="pf-c-toggle-group__text">${msg("Proxy")}</span>
</button>
</div>
<div class="pf-c-divider pf-m-vertical" role="separator"></div>
@ -162,7 +165,7 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
}}
>
<span class="pf-c-toggle-group__text"
>${t`Forward auth (single application)`}</span
>${msg("Forward auth (single application)")}</span
>
</button>
</div>
@ -177,7 +180,9 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
this.mode = ProxyMode.ForwardDomain;
}}
>
<span class="pf-c-toggle-group__text">${t`Forward auth (domain level)`}</span>
<span class="pf-c-toggle-group__text"
>${msg("Forward auth (domain level)")}</span
>
</button>
</div>`;
}
@ -186,10 +191,12 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
switch (this.mode) {
case ProxyMode.Proxy:
return html`<p class="pf-u-mb-xl">
${t`This provider will behave like a transparent reverse-proxy, except requests must be authenticated. If your upstream application uses HTTPS, make sure to connect to the outpost using HTTPS as well.`}
${msg(
"This provider will behave like a transparent reverse-proxy, except requests must be authenticated. If your upstream application uses HTTPS, make sure to connect to the outpost using HTTPS as well.",
)}
</p>
<ak-form-element-horizontal
label=${t`External host`}
label=${msg("External host")}
?required=${true}
name="externalHost"
>
@ -200,11 +207,13 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
required
/>
<p class="pf-c-form__helper-text">
${t`The external URL you'll access the application at. Include any non-standard port.`}
${msg(
"The external URL you'll access the application at. Include any non-standard port.",
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Internal host`}
label=${msg("Internal host")}
?required=${true}
name="internalHost"
>
@ -215,7 +224,7 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
required
/>
<p class="pf-c-form__helper-text">
${t`Upstream host that the requests are forwarded to.`}
${msg("Upstream host that the requests are forwarded to.")}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="internalHostSslValidation">
@ -231,19 +240,21 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
</span>
</span>
<span class="pf-c-switch__label"
>${t`Internal host SSL Validation`}</span
>${msg("Internal host SSL Validation")}</span
>
</label>
<p class="pf-c-form__helper-text">
${t`Validate SSL Certificates of upstream servers.`}
${msg("Validate SSL Certificates of upstream servers.")}
</p>
</ak-form-element-horizontal>`;
case ProxyMode.ForwardSingle:
return html`<p class="pf-u-mb-xl">
${t`Use this provider with nginx's auth_request or traefik's forwardAuth. Each application/domain needs its own provider. Additionally, on each domain, /outpost.goauthentik.io must be routed to the outpost (when using a manged outpost, this is done for you).`}
${msg(
"Use this provider with nginx's auth_request or traefik's forwardAuth. Each application/domain needs its own provider. Additionally, on each domain, /outpost.goauthentik.io must be routed to the outpost (when using a manged outpost, this is done for you).",
)}
</p>
<ak-form-element-horizontal
label=${t`External host`}
label=${msg("External host")}
?required=${true}
name="externalHost"
>
@ -254,23 +265,29 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
required
/>
<p class="pf-c-form__helper-text">
${t`The external URL you'll access the application at. Include any non-standard port.`}
${msg(
"The external URL you'll access the application at. Include any non-standard port.",
)}
</p>
</ak-form-element-horizontal>`;
case ProxyMode.ForwardDomain:
return html`<p class="pf-u-mb-xl">
${t`Use this provider with nginx's auth_request or traefik's forwardAuth. Only a single provider is required per root domain. You can't do per-application authorization, but you don't have to create a provider for each application.`}
${msg(
"Use this provider with nginx's auth_request or traefik's forwardAuth. Only a single provider is required per root domain. You can't do per-application authorization, but you don't have to create a provider for each application.",
)}
</p>
<div class="pf-u-mb-xl">
${t`An example setup can look like this:`}
${msg("An example setup can look like this:")}
<ul class="pf-c-list">
<li>${t`authentik running on auth.example.com`}</li>
<li>${t`app1 running on app1.example.com`}</li>
<li>${msg("authentik running on auth.example.com")}</li>
<li>${msg("app1 running on app1.example.com")}</li>
</ul>
${t`In this case, you'd set the Authentication URL to auth.example.com and Cookie domain to example.com.`}
${msg(
"In this case, you'd set the Authentication URL to auth.example.com and Cookie domain to example.com.",
)}
</div>
<ak-form-element-horizontal
label=${t`Authentication URL`}
label=${msg("Authentication URL")}
?required=${true}
name="externalHost"
>
@ -281,11 +298,13 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
required
/>
<p class="pf-c-form__helper-text">
${t`The external URL you'll authenticate at. The authentik core server should be reachable under this URL.`}
${msg(
"The external URL you'll authenticate at. The authentik core server should be reachable under this URL.",
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Cookie domain`}
label=${msg("Cookie domain")}
name="cookieDomain"
?required=${true}
>
@ -296,17 +315,19 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
required
/>
<p class="pf-c-form__helper-text">
${t`Set this to the domain you wish the authentication to be valid for. Must be a parent domain of the URL above. If you're running applications as app1.domain.tld, app2.domain.tld, set this to 'domain.tld'.`}
${msg(
"Set this to the domain you wish the authentication to be valid for. Must be a parent domain of the URL above. If you're running applications as app1.domain.tld, app2.domain.tld, set this to 'domain.tld'.",
)}
</p>
</ak-form-element-horizontal>`;
case ProxyMode.UnknownDefaultOpenApi:
return html`<p>${t`Unknown proxy mode`}</p>`;
return html`<p>${msg("Unknown proxy mode")}</p>`;
}
}
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)}"
@ -315,7 +336,7 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Authentication flow`}
label=${msg("Authentication flow")}
?required=${false}
name="authenticationFlow"
>
@ -346,11 +367,11 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
>
</ak-search-select>
<p class="pf-c-form__helper-text">
${t`Flow used when a user access this provider and is not authenticated.`}
${msg("Flow used when a user access this provider and is not authenticated.")}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Authorization flow`}
label=${msg("Authorization flow")}
?required=${true}
name="authorizationFlow"
>
@ -381,7 +402,7 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
>
</ak-search-select>
<p class="pf-c-form__helper-text">
${t`Flow used when authorizing this provider.`}
${msg("Flow used when authorizing this provider.")}
</p>
</ak-form-element-horizontal>
@ -391,20 +412,22 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
</div>
<div class="pf-c-card__footer">${this.renderSettings()}</div>
</div>
<ak-form-element-horizontal label=${t`Token validity`} name="accessTokenValidity">
<ak-form-element-horizontal label=${msg("Token validity")} name="accessTokenValidity">
<input
type="text"
value="${first(this.instance?.accessTokenValidity, "hours=24")}"
class="pf-c-form-control"
/>
<p class="pf-c-form__helper-text">${t`Configure how long tokens are valid for.`}</p>
<p class="pf-c-form__helper-text">
${msg("Configure how long tokens are valid for.")}
</p>
<ak-utils-time-delta-help></ak-utils-time-delta-help>
</ak-form-element-horizontal>
<ak-form-group>
<span slot="header">${t`Advanced protocol settings`}</span>
<span slot="header">${msg("Advanced protocol settings")}</span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal label=${t`Certificate`} name="certificate">
<ak-form-element-horizontal label=${msg("Certificate")} name="certificate">
<ak-search-select
.fetchObjects=${async (
query?: string,
@ -436,7 +459,7 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
</ak-search-select>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Additional scopes`}
label=${msg("Additional scopes")}
name="propertyMappings"
>
<select class="pf-c-form-control" multiple>
@ -459,33 +482,37 @@ export class ProxyProviderFormPage extends ModelForm<ProxyProvider, number> {
})}
</select>
<p class="pf-c-form__helper-text">
${t`Additional scope mappings, which are passed to the proxy.`}
${msg("Additional scope mappings, which are passed to the proxy.")}
</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="${this.mode === ProxyMode.ForwardDomain
? t`Unauthenticated URLs`
: t`Unauthenticated Paths`}"
? msg("Unauthenticated URLs")
: msg("Unauthenticated Paths")}"
name="skipPathRegex"
>
<textarea class="pf-c-form-control">
${this.instance?.skipPathRegex}</textarea
>
<p class="pf-c-form__helper-text">
${t`Regular expressions for which authentication is not required. Each new line is interpreted as a new expression.`}
${msg(
"Regular expressions for which authentication is not required. Each new line is interpreted as a new expression.",
)}
</p>
<p class="pf-c-form__helper-text">
${t`When using proxy or forward auth (single application) mode, the requested URL Path is checked against the regular expressions. When using forward auth (domain mode), the full requested URL including scheme and host is matched against the regular expressions.`}
${msg(
"When using proxy or forward auth (single application) mode, the requested URL Path is checked against the regular expressions. When using forward auth (domain mode), the full requested URL including scheme and host is matched against the regular expressions.",
)}
</p>
</ak-form-element-horizontal>
</div>
</ak-form-group>
<ak-form-group>
<span slot="header">${t`Authentication settings`}</span>
<span slot="header">${msg("Authentication settings")}</span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal name="interceptHeaderAuth">
<label class="pf-c-switch">
@ -500,11 +527,13 @@ ${this.instance?.skipPathRegex}</textarea
</span>
</span>
<span class="pf-c-switch__label"
>${t`Intercept header authentication`}</span
>${msg("Intercept header authentication")}</span
>
</label>
<p class="pf-c-form__helper-text">
${t`When enabled, authentik will intercept the Authorization header to authenticate the request.`}
${msg(
"When enabled, authentik will intercept the Authorization header to authenticate the request.",
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal name="basicAuthEnabled">
@ -524,15 +553,20 @@ ${this.instance?.skipPathRegex}</textarea
</span>
</span>
<span class="pf-c-switch__label"
>${t`Send HTTP-Basic Authentication`}</span
>${msg("Send HTTP-Basic Authentication")}</span
>
</label>
<p class="pf-c-form__helper-text">
${t`Send a custom HTTP-Basic Authentication header based on values from authentik.`}
${msg(
"Send a custom HTTP-Basic Authentication header based on values from authentik.",
)}
</p>
</ak-form-element-horizontal>
${this.showHttpBasic ? this.renderHttpBasic() : html``}
<ak-form-element-horizontal label=${t`Trusted OIDC Sources`} name="jwksSources">
<ak-form-element-horizontal
label=${msg("Trusted OIDC Sources")}
name="jwksSources"
>
<select class="pf-c-form-control" multiple>
${this.oauthSources?.results.map((source) => {
const selected = (this.instance?.jwksSources || []).some((su) => {
@ -544,10 +578,12 @@ ${this.instance?.skipPathRegex}</textarea
})}
</select>
<p class="pf-c-form__helper-text">
${t`JWTs signed by certificates configured in the selected sources can be used to authenticate to this provider.`}
${msg(
"JWTs signed by certificates configured in the selected sources can be used to authenticate to this provider.",
)}
</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>
</div>

67
web/src/admin/providers/proxy/ProxyProviderViewPage.ts
View File

@ -23,8 +23,7 @@ import "@goauthentik/elements/buttons/SpinnerButton";
import "@goauthentik/elements/events/ObjectChangelog";
import { getURLParam } from "@goauthentik/elements/router/RouteMatch";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -46,13 +45,13 @@ export function ModeToLabel(action?: ProxyMode): string {
if (!action) return "";
switch (action) {
case ProxyMode.Proxy:
return t`Proxy`;
return msg("Proxy");
case ProxyMode.ForwardSingle:
return t`Forward auth (single application)`;
return msg("Forward auth (single application)");
case ProxyMode.ForwardDomain:
return t`Forward auth (domain-level)`;
return msg("Forward auth (domain-level)");
case ProxyMode.UnknownDefaultOpenApi:
return t`Unknown proxy mode`;
return msg("Unknown proxy mode");
}
}
@ -114,31 +113,31 @@ export class ProxyProviderViewPage extends AKElement {
renderConfig(): TemplateResult {
const serves = [
{
label: t`Nginx (Ingress)`,
label: msg("Nginx (Ingress)"),
md: MDNginxIngress,
},
{
label: t`Nginx (Proxy Manager)`,
label: msg("Nginx (Proxy Manager)"),
md: MDNginxPM,
},
{
label: t`Nginx (standalone)`,
label: msg("Nginx (standalone)"),
md: MDNginxStandalone,
},
{
label: t`Traefik (Ingress)`,
label: msg("Traefik (Ingress)"),
md: MDTraefikIngress,
},
{
label: t`Traefik (Compose)`,
label: msg("Traefik (Compose)"),
md: MDTraefikCompose,
},
{
label: t`Traefik (Standalone)`,
label: msg("Traefik (Standalone)"),
md: MDTraefikStandalone,
},
{
label: t`Caddy (Standalone)`,
label: msg("Caddy (Standalone)"),
md: MDCaddyStandalone,
},
];
@ -188,15 +187,15 @@ export class ProxyProviderViewPage extends AKElement {
return html``;
}
return html` <ak-tabs>
<section slot="page-overview" data-tab-title="${t`Overview`}">
<section slot="page-overview" data-tab-title="${msg("Overview")}">
${this.renderTabOverview()}
</section>
<section slot="page-authentication" data-tab-title="${t`Authentication`}">
<section slot="page-authentication" data-tab-title="${msg("Authentication")}">
${this.renderTabAuthentication()}
</section>
<section
slot="page-changelog"
data-tab-title="${t`Changelog`}"
data-tab-title="${msg("Changelog")}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-c-card">
@ -224,7 +223,7 @@ export class ProxyProviderViewPage extends AKElement {
<dl class="pf-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${t`Client ID`}</span>
<span class="pf-c-description-list__text">${msg("Client ID")}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
@ -250,11 +249,11 @@ export class ProxyProviderViewPage extends AKElement {
return html`${this.provider?.assignedApplicationName
? html``
: html`<div slot="header" class="pf-c-banner pf-m-warning">
${t`Warning: Provider is not used by an Application.`}
${msg("Warning: Provider is not used by an Application.")}
</div>`}
${this.provider?.outpostSet.length < 1
? html`<div slot="header" class="pf-c-banner pf-m-warning">
${t`Warning: Provider is not used by any Outpost.`}
${msg("Warning: Provider is not used by any Outpost.")}
</div>`
: html``}
<div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">
@ -263,7 +262,7 @@ export class ProxyProviderViewPage extends AKElement {
<dl class="pf-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${t`Name`}</span>
<span class="pf-c-description-list__text">${msg("Name")}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
@ -274,7 +273,7 @@ export class ProxyProviderViewPage extends AKElement {
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Assigned to application`}</span
>${msg("Assigned to application")}</span
>
</dt>
<dd class="pf-c-description-list__description">
@ -288,7 +287,7 @@ export class ProxyProviderViewPage extends AKElement {
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Internal Host`}</span
>${msg("Internal Host")}</span
>
</dt>
<dd class="pf-c-description-list__description">
@ -300,7 +299,7 @@ export class ProxyProviderViewPage extends AKElement {
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`External Host`}</span
>${msg("External Host")}</span
>
</dt>
<dd class="pf-c-description-list__description">
@ -314,7 +313,7 @@ export class ProxyProviderViewPage extends AKElement {
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Basic-Auth`}</span
>${msg("Basic-Auth")}</span
>
</dt>
<dd class="pf-c-description-list__description">
@ -324,14 +323,16 @@ export class ProxyProviderViewPage extends AKElement {
? PFColor.Green
: PFColor.Grey}
>
${this.provider.basicAuthEnabled ? t`Yes` : t`No`}
${this.provider.basicAuthEnabled
? msg("Yes")
: msg("No")}
</ak-label>
</div>
</dd>
</div>
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${t`Mode`}</span>
<span class="pf-c-description-list__text">${msg("Mode")}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
@ -343,27 +344,27 @@ export class ProxyProviderViewPage extends AKElement {
</div>
<div class="pf-c-card__footer">
<ak-forms-modal>
<span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update Proxy Provider`} </span>
<span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update Proxy Provider")} </span>
<ak-provider-proxy-form
slot="form"
.instancePk=${this.provider.pk || 0}
>
</ak-provider-proxy-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
${msg("Edit")}
</button>
</ak-forms-modal>
</div>
</div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">${t`Protocol Settings`}</div>
<div class="pf-c-card__title">${msg("Protocol Settings")}</div>
<div class="pf-c-card__body">
<dl class="pf-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Allowed Redirect URIs`}</span
>${msg("Allowed Redirect URIs")}</span
>
</dt>
<dd class="pf-c-description-list__description">
@ -380,11 +381,11 @@ export class ProxyProviderViewPage extends AKElement {
</div>
</div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">${t`Setup`}</div>
<div class="pf-c-card__title">${msg("Setup")}</div>
<div class="pf-c-card__body">
${isForward(this.provider?.mode || ProxyMode.Proxy)
? html` ${this.renderConfig()} `
: html` <p>${t`No additional setup is required.`}</p> `}
: html` <p>${msg("No additional setup is required.")}</p> `}
</div>
</div>
</div>`;

23
web/src/admin/providers/radius/RadiusProviderForm.ts
View File

@ -7,8 +7,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 { ifDefined } from "lit-html/directives/if-defined.js";
import { customElement } from "lit/decorators.js";
@ -32,9 +31,9 @@ export class RadiusProviderFormPage extends ModelForm<RadiusProvider, number> {
getSuccessMessage(): string {
if (this.instance) {
return t`Successfully updated provider.`;
return msg("Successfully updated provider.");
} else {
return t`Successfully created provider.`;
return msg("Successfully created provider.");
}
}
@ -53,7 +52,7 @@ export class RadiusProviderFormPage extends ModelForm<RadiusProvider, number> {
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)}"
@ -62,7 +61,7 @@ export class RadiusProviderFormPage extends ModelForm<RadiusProvider, number> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Authentication flow`}
label=${msg("Authentication flow")}
?required=${true}
name="authorizationFlow"
>
@ -96,14 +95,14 @@ export class RadiusProviderFormPage extends ModelForm<RadiusProvider, number> {
}}
>
</ak-search-select>
<p class="pf-c-form__helper-text">${t`Flow used for users to authenticate.`}</p>
<p class="pf-c-form__helper-text">${msg("Flow used for users to authenticate.")}</p>
</ak-form-element-horizontal>
<ak-form-group .expanded=${true}>
<span slot="header"> ${t`Protocol settings`} </span>
<span slot="header"> ${msg("Protocol settings")} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal
label=${t`Shared secret`}
label=${msg("Shared secret")}
?required=${true}
name="sharedSecret"
>
@ -118,7 +117,7 @@ export class RadiusProviderFormPage extends ModelForm<RadiusProvider, number> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Client Networks`}
label=${msg("Client Networks")}
?required=${true}
name="clientNetworks"
>
@ -129,9 +128,9 @@ export class RadiusProviderFormPage extends ModelForm<RadiusProvider, number> {
required
/>
<p class="pf-c-form__helper-text">
${t`List of CIDRs (comma-seperated) that clients can connect from. A more specific
${msg(`List of CIDRs (comma-seperated) that clients can connect from. A more specific
CIDR will match before a looser one. Clients connecting from a non-specified CIDR
will be dropped.`}
will be dropped.`)}
</p>
</ak-form-element-horizontal>
</div>

21
web/src/admin/providers/radius/RadiusProviderViewPage.ts
View File

@ -9,8 +9,7 @@ import "@goauthentik/elements/buttons/ModalButton";
import "@goauthentik/elements/buttons/SpinnerButton";
import "@goauthentik/elements/events/ObjectChangelog";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
@ -76,12 +75,12 @@ export class RadiusProviderViewPage extends AKElement {
return html`<ak-tabs>
<section
slot="page-overview"
data-tab-title="${t`Overview`}"
data-tab-title="${msg("Overview")}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
${this.provider?.outpostSet.length < 1
? html`<div slot="header" class="pf-c-banner pf-m-warning">
${t`Warning: Provider is not used by any Outpost.`}
${msg("Warning: Provider is not used by any Outpost.")}
</div>`
: html``}
<div class="pf-u-display-flex pf-u-justify-content-center">
@ -92,7 +91,7 @@ export class RadiusProviderViewPage extends AKElement {
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Name`}</span
>${msg("Name")}</span
>
</dt>
<dd class="pf-c-description-list__description">
@ -104,7 +103,7 @@ export class RadiusProviderViewPage extends AKElement {
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Assigned to application`}</span
>${msg("Assigned to application")}</span
>
</dt>
<dd class="pf-c-description-list__description">
@ -118,7 +117,7 @@ export class RadiusProviderViewPage extends AKElement {
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Client Networks`}</span
>${msg("Client Networks")}</span
>
</dt>
<dd class="pf-c-description-list__description">
@ -131,15 +130,15 @@ export class RadiusProviderViewPage extends AKElement {
</div>
<div class="pf-c-card__footer">
<ak-forms-modal>
<span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update Radius Provider`} </span>
<span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update Radius Provider")} </span>
<ak-provider-radius-form
slot="form"
.instancePk=${this.provider.pk}
>
</ak-provider-radius-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
${msg("Edit")}
</button>
</ak-forms-modal>
</div>
@ -149,7 +148,7 @@ export class RadiusProviderViewPage extends AKElement {
</section>
<section
slot="page-changelog"
data-tab-title="${t`Changelog`}"
data-tab-title="${msg("Changelog")}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-c-card">

88
web/src/admin/providers/saml/SAMLProviderForm.ts
View File

@ -7,8 +7,7 @@ import "@goauthentik/elements/forms/Radio";
import "@goauthentik/elements/forms/SearchSelect";
import "@goauthentik/elements/utils/TimeDeltaHelp";
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";
@ -52,9 +51,9 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
getSuccessMessage(): string {
if (this.instance) {
return t`Successfully updated provider.`;
return msg("Successfully updated provider.");
} else {
return t`Successfully created provider.`;
return msg("Successfully created provider.");
}
}
@ -73,7 +72,7 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
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)}"
@ -82,7 +81,7 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Authentication flow`}
label=${msg("Authentication flow")}
?required=${false}
name="authenticationFlow"
>
@ -113,11 +112,11 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
>
</ak-search-select>
<p class="pf-c-form__helper-text">
${t`Flow used when a user access this provider and is not authenticated.`}
${msg("Flow used when a user access this provider and is not authenticated.")}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Authorization flow`}
label=${msg("Authorization flow")}
?required=${true}
name="authorizationFlow"
>
@ -148,14 +147,18 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
>
</ak-search-select>
<p class="pf-c-form__helper-text">
${t`Flow used when authorizing this provider.`}
${msg("Flow used when authorizing this provider.")}
</p>
</ak-form-element-horizontal>
<ak-form-group .expanded=${true}>
<span slot="header"> ${t`Protocol settings`} </span>
<span slot="header"> ${msg("Protocol settings")} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal label=${t`ACS URL`} ?required=${true} name="acsUrl">
<ak-form-element-horizontal
label=${msg("ACS URL")}
?required=${true}
name="acsUrl"
>
<input
type="text"
value="${ifDefined(this.instance?.acsUrl)}"
@ -163,29 +166,33 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
required
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Issuer`} ?required=${true} name="issuer">
<ak-form-element-horizontal
label=${msg("Issuer")}
?required=${true}
name="issuer"
>
<input
type="text"
value="${this.instance?.issuer || "authentik"}"
class="pf-c-form-control"
required
/>
<p class="pf-c-form__helper-text">${t`Also known as EntityID.`}</p>
<p class="pf-c-form__helper-text">${msg("Also known as EntityID.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Service Provider Binding`}
label=${msg("Service Provider Binding")}
?required=${true}
name="spBinding"
>
<ak-radio
.options=${[
{
label: t`Redirect`,
label: msg("Redirect"),
value: SpBindingEnum.Redirect,
default: true,
},
{
label: t`Post`,
label: msg("Post"),
value: SpBindingEnum.Post,
},
]}
@ -193,10 +200,12 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
>
</ak-radio>
<p class="pf-c-form__helper-text">
${t`Determines how authentik sends the response back to the Service Provider.`}
${msg(
"Determines how authentik sends the response back to the Service Provider.",
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Audience`} name="audience">
<ak-form-element-horizontal label=${msg("Audience")} name="audience">
<input
type="text"
value="${ifDefined(this.instance?.audience)}"
@ -207,9 +216,12 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
</ak-form-group>
<ak-form-group>
<span slot="header"> ${t`Advanced protocol settings`} </span>
<span slot="header"> ${msg("Advanced protocol settings")} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal label=${t`Signing Certificate`} name="signingKp">
<ak-form-element-horizontal
label=${msg("Signing Certificate")}
name="signingKp"
>
<ak-search-select
.fetchObjects=${async (
query?: string,
@ -240,11 +252,13 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
>
</ak-search-select>
<p class="pf-c-form__helper-text">
${t`Certificate used to sign outgoing Responses going to the Service Provider.`}
${msg(
"Certificate used to sign outgoing Responses going to the Service Provider.",
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Verification Certificate`}
label=${msg("Verification Certificate")}
name="verificationKp"
>
<ak-search-select
@ -276,12 +290,14 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
>
</ak-search-select>
<p class="pf-c-form__helper-text">
${t`When selected, incoming assertion's Signatures will be validated against this certificate. To allow unsigned Requests, leave on default.`}
${msg(
"When selected, incoming assertion's Signatures will be validated against this certificate. To allow unsigned Requests, leave on default.",
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Property mappings`}
label=${msg("Property mappings")}
?required=${true}
name="propertyMappings"
>
@ -309,11 +325,11 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
})}
</select>
<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`NameID Property Mapping`}
label=${msg("NameID Property Mapping")}
name="nameIdMapping"
>
<ak-search-select
@ -346,12 +362,14 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
>
</ak-search-select>
<p class="pf-c-form__helper-text">
${t`Configure how the NameID value will be created. When left empty, the NameIDPolicy of the incoming request will be respected.`}
${msg(
"Configure how the NameID value will be created. When left empty, the NameIDPolicy of the incoming request will be respected.",
)}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Assertion valid not before`}
label=${msg("Assertion valid not before")}
?required=${true}
name="assertionValidNotBefore"
>
@ -362,12 +380,12 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
required
/>
<p class="pf-c-form__helper-text">
${t`Configure the maximum allowed time drift for an assertion.`}
${msg("Configure the maximum allowed time drift for an assertion.")}
</p>
<ak-utils-time-delta-help></ak-utils-time-delta-help>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Assertion valid not on or after`}
label=${msg("Assertion valid not on or after")}
?required=${true}
name="assertionValidNotOnOrAfter"
>
@ -378,12 +396,12 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
required
/>
<p class="pf-c-form__helper-text">
${t`Assertion not valid on or after current time + this value.`}
${msg("Assertion not valid on or after current time + this value.")}
</p>
<ak-utils-time-delta-help></ak-utils-time-delta-help>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Session valid not on or after`}
label=${msg("Session valid not on or after")}
?required=${true}
name="sessionValidNotOnOrAfter"
>
@ -394,13 +412,13 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
required
/>
<p class="pf-c-form__helper-text">
${t`Session not valid on or after current time + this value.`}
${msg("Session not valid on or after current time + this value.")}
</p>
<ak-utils-time-delta-help></ak-utils-time-delta-help>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Digest algorithm`}
label=${msg("Digest algorithm")}
?required=${true}
name="digestAlgorithm"
>
@ -429,7 +447,7 @@ export class SAMLProviderFormPage extends ModelForm<SAMLProvider, number> {
</ak-radio>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Signature algorithm`}
label=${msg("Signature algorithm")}
?required=${true}
name="signatureAlgorithm"
>

13
web/src/admin/providers/saml/SAMLProviderImportForm.ts
View File

@ -5,8 +5,7 @@ import { Form } from "@goauthentik/elements/forms/Form";
import "@goauthentik/elements/forms/HorizontalFormElement";
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";
@ -22,7 +21,7 @@ import {
@customElement("ak-provider-saml-import-form")
export class SAMLProviderImportForm extends Form<SAMLProvider> {
getSuccessMessage(): string {
return t`Successfully imported provider.`;
return msg("Successfully imported provider.");
}
async send(data: SAMLProvider): Promise<void> {
@ -39,11 +38,11 @@ export class SAMLProviderImportForm extends Form<SAMLProvider> {
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" class="pf-c-form-control" required />
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Authorization flow`}
label=${msg("Authorization flow")}
?required=${true}
name="authorizationFlow"
>
@ -71,11 +70,11 @@ export class SAMLProviderImportForm extends Form<SAMLProvider> {
>
</ak-search-select>
<p class="pf-c-form__helper-text">
${t`Flow used when authorizing this provider.`}
${msg("Flow used when authorizing this provider.")}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Metadata`} name="metadata">
<ak-form-element-horizontal label=${msg("Metadata")} name="metadata">
<input type="file" value="" class="pf-c-form-control" />
</ak-form-element-horizontal>
</form>`;

71
web/src/admin/providers/saml/SAMLProviderViewPage.ts
View File

@ -13,8 +13,7 @@ import "@goauthentik/elements/buttons/SpinnerButton";
import "@goauthentik/elements/events/ObjectChangelog";
import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
@ -123,7 +122,7 @@ export class SAMLProviderViewPage extends AKElement {
if (this.provider?.assignedApplicationName) {
relatedObjects.push(html`<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${t`Metadata`}</span>
<span class="pf-c-description-list__text">${msg("Metadata")}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
@ -132,7 +131,7 @@ export class SAMLProviderViewPage extends AKElement {
target="_blank"
href=${ifDefined(this.provider?.urlDownloadMetadata)}
>
${t`Download`}
${msg("Download")}
</a>
<ak-action-button
class="pf-m-secondary"
@ -150,7 +149,7 @@ export class SAMLProviderViewPage extends AKElement {
);
}}
>
${t`Copy download URL`}
${msg("Copy download URL")}
</ak-action-button>
</div>
</dd>
@ -160,7 +159,7 @@ export class SAMLProviderViewPage extends AKElement {
relatedObjects.push(html`<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Download signing certificate`}</span
>${msg("Download signing certificate")}</span
>
</dt>
<dd class="pf-c-description-list__description">
@ -168,14 +167,14 @@ export class SAMLProviderViewPage extends AKElement {
<a
class="pf-c-button pf-m-primary"
href=${this.signer.certificateDownloadUrl}
>${t`Download`}</a
>${msg("Download")}</a
>
</div>
</dd>
</div>`);
}
return html` <div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">${t`Related objects`}</div>
<div class="pf-c-card__title">${msg("Related objects")}</div>
<div class="pf-c-card__body">
<dl class="pf-c-description-list pf-m-2-col">
${relatedObjects.length > 0 ? relatedObjects : html`-`}
@ -189,13 +188,13 @@ export class SAMLProviderViewPage extends AKElement {
return html``;
}
return html` <ak-tabs>
<section slot="page-overview" data-tab-title="${t`Overview`}">
<section slot="page-overview" data-tab-title="${msg("Overview")}">
${this.renderTabOverview()}
</section>
${this.renderTabMetadata()}
<section
slot="page-preview"
data-tab-title="${t`Preview`}"
data-tab-title="${msg("Preview")}"
@activate=${() => {
new ProvidersApi(DEFAULT_CONFIG)
.providersSamlPreviewUserRetrieve({
@ -210,7 +209,7 @@ export class SAMLProviderViewPage extends AKElement {
</section>
<section
slot="page-changelog"
data-tab-title="${t`Changelog`}"
data-tab-title="${msg("Changelog")}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-c-card">
@ -234,7 +233,7 @@ export class SAMLProviderViewPage extends AKElement {
this.provider?.assignedApplicationName
? html``
: html`<div slot="header" class="pf-c-banner pf-m-warning">
${t`Warning: Provider is not used by an Application.`}
${msg("Warning: Provider is not used by an Application.")}
</div>`
}
<div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">
@ -243,7 +242,7 @@ export class SAMLProviderViewPage extends AKElement {
<dl class="pf-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${t`Name`}</span>
<span class="pf-c-description-list__text">${msg("Name")}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
@ -254,7 +253,7 @@ export class SAMLProviderViewPage extends AKElement {
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`Assigned to application`}</span
>${msg("Assigned to application")}</span
>
</dt>
<dd class="pf-c-description-list__description">
@ -267,7 +266,9 @@ export class SAMLProviderViewPage 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`ACS URL`}</span>
<span class="pf-c-description-list__text">${msg(
"ACS URL",
)}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
@ -277,7 +278,9 @@ export class SAMLProviderViewPage 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`Audience`}</span>
<span class="pf-c-description-list__text">${msg(
"Audience",
)}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
@ -287,7 +290,9 @@ export class SAMLProviderViewPage 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`Issuer`}</span>
<span class="pf-c-description-list__text">${msg(
"Issuer",
)}</span>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
@ -299,12 +304,12 @@ export class SAMLProviderViewPage extends AKElement {
</div>
<div class="pf-c-card__footer">
<ak-forms-modal>
<span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update SAML Provider`} </span>
<span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update SAML Provider")} </span>
<ak-provider-saml-form slot="form" .instancePk=${this.provider.pk || 0}>
</ak-provider-saml-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
${msg("Edit")}
</button>
</ak-forms-modal>
</div>
@ -313,13 +318,13 @@ export class SAMLProviderViewPage extends AKElement {
${
this.provider.assignedApplicationName
? html` <div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">${t`SAML Configuration`}</div>
<div class="pf-c-card__title">${msg("SAML Configuration")}</div>
<div class="pf-c-card__body">
<form class="pf-c-form">
<div class="pf-c-form__group">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text"
>${t`EntityID/Issuer`}</span
>${msg("EntityID/Issuer")}</span
>
</label>
<input
@ -332,7 +337,7 @@ export class SAMLProviderViewPage extends AKElement {
<div class="pf-c-form__group">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text"
>${t`SSO URL (Post)`}</span
>${msg("SSO URL (Post)")}</span
>
</label>
<input
@ -345,7 +350,7 @@ export class SAMLProviderViewPage extends AKElement {
<div class="pf-c-form__group">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text"
>${t`SSO URL (Redirect)`}</span
>${msg("SSO URL (Redirect)")}</span
>
</label>
<input
@ -358,7 +363,7 @@ export class SAMLProviderViewPage extends AKElement {
<div class="pf-c-form__group">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text"
>${t`SSO URL (IdP-initiated Login)`}</span
>${msg("SSO URL (IdP-initiated Login)")}</span
>
</label>
<input
@ -371,7 +376,7 @@ export class SAMLProviderViewPage extends AKElement {
<div class="pf-c-form__group">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text"
>${t`SLO URL (Post)`}</span
>${msg("SLO URL (Post)")}</span
>
</label>
<input
@ -384,7 +389,7 @@ export class SAMLProviderViewPage extends AKElement {
<div class="pf-c-form__group">
<label class="pf-c-form__label">
<span class="pf-c-form__label-text"
>${t`SLO URL (Redirect)`}</span
>${msg("SLO URL (Redirect)")}</span
>
</label>
<input
@ -411,7 +416,7 @@ export class SAMLProviderViewPage extends AKElement {
${this.provider.assignedApplicationName
? html` <section
slot="page-metadata"
data-tab-title="${t`Metadata`}"
data-tab-title="${msg("Metadata")}"
@activate=${() => {
new ProvidersApi(DEFAULT_CONFIG)
.providersSamlMetadataRetrieve({
@ -424,14 +429,14 @@ export class SAMLProviderViewPage extends AKElement {
class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter"
>
<div class="pf-c-card pf-l-grid__item pf-m-12-col">
<div class="pf-c-card__title">${t`SAML Metadata`}</div>
<div class="pf-c-card__title">${msg("SAML Metadata")}</div>
<div class="pf-c-card__body">
<a
class="pf-c-button pf-m-primary"
target="_blank"
href=${this.provider.urlDownloadMetadata}
>
${t`Download`}
${msg("Download")}
</a>
<ak-action-button
class="pf-m-secondary"
@ -450,7 +455,7 @@ export class SAMLProviderViewPage extends AKElement {
);
}}
>
${t`Copy download URL`}
${msg("Copy download URL")}
</ak-action-button>
</div>
<div class="pf-c-card__footer">
@ -475,13 +480,13 @@ export class SAMLProviderViewPage extends AKElement {
class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter"
>
<div class="pf-c-card">
<div class="pf-c-card__title">${t`Example SAML attributes`}</div>
<div class="pf-c-card__title">${msg("Example SAML attributes")}</div>
<div class="pf-c-card__body">
<dl class="pf-c-description-list pf-m-2-col-on-lg">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text"
>${t`NameID attribute`}</span
>${msg("NameID attribute")}</span
>
</dt>
<dd class="pf-c-description-list__description">

49
web/src/admin/providers/scim/SCIMProviderForm.ts
View File

@ -6,8 +6,7 @@ import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import "@goauthentik/elements/forms/Radio";
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";
@ -42,9 +41,9 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
getSuccessMessage(): string {
if (this.instance) {
return t`Successfully updated provider.`;
return msg("Successfully updated provider.");
} else {
return t`Successfully created provider.`;
return msg("Successfully created provider.");
}
}
@ -63,7 +62,7 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
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)}"
@ -72,9 +71,9 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
/>
</ak-form-element-horizontal>
<ak-form-group .expanded=${true}>
<span slot="header"> ${t`Protocol settings`} </span>
<span slot="header"> ${msg("Protocol settings")} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal label=${t`URL`} ?required=${true} name="url">
<ak-form-element-horizontal label=${msg("URL")} ?required=${true} name="url">
<input
type="text"
value="${first(this.instance?.url, "")}"
@ -82,10 +81,14 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
required
/>
<p class="pf-c-form__helper-text">
${t`SCIM base url, usually ends in /v2.`}
${msg("SCIM base url, usually ends in /v2.")}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Token`} ?required=${true} name="token">
<ak-form-element-horizontal
label=${msg("Token")}
?required=${true}
name="token"
>
<input
type="text"
value="${first(this.instance?.token, "")}"
@ -93,13 +96,15 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
required
/>
<p class="pf-c-form__helper-text">
${t`Token to authenticate with. Currently only bearer authentication is supported.`}
${msg(
"Token to authenticate with. Currently only bearer authentication is supported.",
)}
</p>
</ak-form-element-horizontal>
</div>
</ak-form-group>
<ak-form-group ?expanded=${true}>
<span slot="header">${t`User filtering`}</span>
<span slot="header">${msg("User filtering")}</span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal name="excludeUsersServiceAccount">
<label class="pf-c-switch">
@ -113,10 +118,12 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</span>
<span class="pf-c-switch__label">${t`Exclude service accounts`}</span>
<span class="pf-c-switch__label"
>${msg("Exclude service accounts")}</span
>
</label>
</ak-form-element-horizontal>
<ak-form-element-horizontal label=${t`Group`} name="filterGroup">
<ak-form-element-horizontal label=${msg("Group")} name="filterGroup">
<ak-search-select
.fetchObjects=${async (query?: string): Promise<Group[]> => {
const args: CoreGroupsListRequest = {
@ -143,16 +150,16 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
>
</ak-search-select>
<p class="pf-c-form__helper-text">
${t`Only sync users within the selected group.`}
${msg("Only sync users within the selected group.")}
</p>
</ak-form-element-horizontal>
</div>
</ak-form-group>
<ak-form-group ?expanded=${true}>
<span slot="header"> ${t`Attribute mapping`} </span>
<span slot="header"> ${msg("Attribute mapping")} </span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal
label=${t`User Property Mappings`}
label=${msg("User Property Mappings")}
?required=${true}
name="propertyMappings"
>
@ -179,14 +186,14 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
})}
</select>
<p class="pf-c-form__helper-text">
${t`Property mappings used to user mapping.`}
${msg("Property mappings used to user mapping.")}
</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`Group Property Mappings`}
label=${msg("Group Property Mappings")}
?required=${true}
name="propertyMappingsGroup"
>
@ -212,10 +219,10 @@ export class SCIMProviderFormPage extends ModelForm<SCIMProvider, number> {
})}
</select>
<p class="pf-c-form__helper-text">
${t`Property mappings used to group creation.`}
${msg("Property mappings used to group creation.")}
</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>
</div>

33
web/src/admin/providers/scim/SCIMProviderViewPage.ts
View File

@ -9,8 +9,7 @@ import "@goauthentik/elements/buttons/ActionButton";
import "@goauthentik/elements/buttons/ModalButton";
import "@goauthentik/elements/events/ObjectChangelog";
import { t } from "@lingui/macro";
import { msg } from "@lit/localize";
import { CSSResult, TemplateResult, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
@ -83,7 +82,7 @@ export class SCIMProviderViewPage extends AKElement {
return html` <ak-tabs>
<section
slot="page-overview"
data-tab-title="${t`Overview`}"
data-tab-title="${msg("Overview")}"
@activate=${() => {
new ProvidersApi(DEFAULT_CONFIG)
.providersScimSyncStatusRetrieve({
@ -101,7 +100,7 @@ export class SCIMProviderViewPage extends AKElement {
</section>
<section
slot="page-changelog"
data-tab-title="${t`Changelog`}"
data-tab-title="${msg("Changelog")}"
class="pf-c-page__main-section pf-m-no-padding-mobile"
>
<div class="pf-c-card">
@ -122,11 +121,13 @@ export class SCIMProviderViewPage extends AKElement {
return html``;
}
return html`<div slot="header" class="pf-c-banner pf-m-info">
${t`SCIM provider is in preview.`}
${msg("SCIM provider is in preview.")}
</div>
${!this.provider?.assignedBackchannelApplicationName
? html`<div slot="header" class="pf-c-banner pf-m-warning">
${t`Warning: Provider is not assigned to an application as backchannel provider.`}
${msg(
"Warning: Provider is not assigned to an application as backchannel provider.",
)}
</div>`
: html``}
<div class="pf-c-page__main-section pf-m-no-padding-mobile pf-l-grid pf-m-gutter">
@ -136,7 +137,9 @@ export class SCIMProviderViewPage extends AKElement {
<dl class="pf-c-description-list pf-m-3-col-on-lg">
<div class="pf-c-description-list__group">
<dt class="pf-c-description-list__term">
<span class="pf-c-description-list__text">${t`Name`}</span>
<span class="pf-c-description-list__text"
>${msg("Name")}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
@ -146,7 +149,9 @@ export class SCIMProviderViewPage 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`URL`}</span>
<span class="pf-c-description-list__text"
>${msg("URL")}</span
>
</dt>
<dd class="pf-c-description-list__description">
<div class="pf-c-description-list__text">
@ -158,19 +163,19 @@ export class SCIMProviderViewPage extends AKElement {
</div>
<div class="pf-c-card__footer">
<ak-forms-modal>
<span slot="submit"> ${t`Update`} </span>
<span slot="header"> ${t`Update SCIM Provider`} </span>
<span slot="submit"> ${msg("Update")} </span>
<span slot="header"> ${msg("Update SCIM Provider")} </span>
<ak-provider-scim-form slot="form" .instancePk=${this.provider.pk}>
</ak-provider-scim-form>
<button slot="trigger" class="pf-c-button pf-m-primary">
${t`Edit`}
${msg("Edit")}
</button>
</ak-forms-modal>
</div>
</div>
<div class="pf-c-card pf-l-grid__item pf-m-12-col pf-l-stack__item">
<div class="pf-c-card__title">
<p>${t`Sync status`}</p>
<p>${msg("Sync status")}</p>
</div>
<div class="pf-c-card__body">
${this.syncState
@ -179,7 +184,7 @@ export class SCIMProviderViewPage extends AKElement {
return html`<li>${m}</li>`;
})}
</ul>`
: html` ${t`Sync not run yet.`} `}
: html` ${msg("Sync not run yet.")} `}
</div>
<div class="pf-c-card__footer">
@ -201,7 +206,7 @@ export class SCIMProviderViewPage extends AKElement {
});
}}
>
${t`Run sync again`}
${msg("Run sync again")}
</ak-action-button>
</div>
</div>