e077a5c18f
* web: Add InvalidationFlow to Radius Provider dialogues
## What
- Bugfix: adds the InvalidationFlow to the Radius Provider dialogues
- Repairs: `{"invalidation_flow":["This field is required."]}` message, which was *not* propagated
to the Notification.
- Nitpick: Pretties `?foo=${true}` expressions: `s/\?([^=]+)=\$\{true\}/\1/`
## Note
Yes, I know I'm going to have to do more magic when we harmonize the forms, and no, I didn't add the
Property Mappings to the wizard, and yes, I know I'm going to have pain with the *new* version of
the wizard. But this is a serious bug; you can't make Radius servers with *either* of the current
dialogues at the moment.
* Start of dual select revision process.
* Progress.
* Made the RuleFormHelper's dualselect conform.
* Providers and Selectors harmonized for sources.
* web/bugfix/dual-select-full-options
# What
- Replaces the dual-select "selected" list mechanism with a more comprehensive (if computationally
expensive) version that is correct.
# How
In the previous iteration, each dual select controller gets a *provider* and a *selector*; the
latter keeps the keys of all the objects a specific instance may have, and marks those objects as
"selected" when they appear in the dual-selects "selected" panel.
In order to distinguish between "selected on the existing instance" and "selected by the user," the
*selector* only runs at construction time, creating a unified "selected" list; this is standard and
allows for a uniform experience of adding and deleting items. Unfortunately, this means that the
"selected" items, because their displays are crafted bespoke, are only chosen from those available
at construction. If there are selected items later in the paginated collection, they will not be
marked as selected.
This defeats the purpose of having a paginated multi-select!
The correct way to do this is to retrieve every item pased to the *selector* and use the same
algorithm to craft the views in both windows.
For every instance of Dual Select with dynamic selection, the *provider* and *selector* have been
put in a separate file (usually suffixed as a `*FormHelper.ts` file); the algorithm by which an item is
crafted for use by DualSelect has been broken out into a small function (usually named
`*toSelect()`). The *provider* works as before. The *selector* takes every instance key passed to it
and runs a `Promise.allSettled(...*Retrieve({ uuid: instanceId }))` on them, mapping them onto the
`selected` collection using the same `*toSelect()`, so they resemble the possibilities in every way.
# Lessons
This exercise emphasizes just how much sheer *repetition* the Django REST API creates on the client
side. Every Helper file is a copy-pasta of a sibling, with only a few minor changes:
- How the objects are turned into displays for DualSelect
- The type and calls being used;
- The field on which retrival is defined
- The defaulting rule.
There are 19 `*FormHelper` files, and each one is 50 lines long. That's 950 lines of code.
Of those 950 lines of code, 874 of those lines are *complete duplicates* of those in the other
FormHelper files. Only 76 lines are unique.
This language really needs macros. That, or I need to seriously level up my Typescript and figure
out how to make this whole thing a lot smarter.
* order fields by field_key and order
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
---------
Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
436 lines
19 KiB
TypeScript
436 lines
19 KiB
TypeScript
import "@goauthentik/admin/common/ak-flow-search/ak-source-flow-search";
|
|
import { iconHelperText, placeholderHelperText } from "@goauthentik/admin/helperText";
|
|
import { BaseSourceForm } from "@goauthentik/admin/sources/BaseSourceForm";
|
|
import {
|
|
GroupMatchingModeToLabel,
|
|
UserMatchingModeToLabel,
|
|
} from "@goauthentik/admin/sources/oauth/utils";
|
|
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
|
|
import { PlexAPIClient, PlexResource, popupCenterScreen } from "@goauthentik/common/helpers/plex";
|
|
import { ascii_letters, digits, first, randomString } from "@goauthentik/common/utils";
|
|
import {
|
|
CapabilitiesEnum,
|
|
WithCapabilitiesConfig,
|
|
} from "@goauthentik/elements/Interface/capabilitiesProvider";
|
|
import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
|
|
import "@goauthentik/elements/ak-dual-select/ak-dual-select-dynamic-selected-provider.js";
|
|
import "@goauthentik/elements/ak-dual-select/ak-dual-select-provider.js";
|
|
import "@goauthentik/elements/forms/FormGroup";
|
|
import "@goauthentik/elements/forms/HorizontalFormElement";
|
|
import "@goauthentik/elements/forms/SearchSelect";
|
|
|
|
import { msg } from "@lit/localize";
|
|
import { TemplateResult, html } from "lit";
|
|
import { customElement, property, state } from "lit/decorators.js";
|
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
|
|
import {
|
|
FlowsInstancesListDesignationEnum,
|
|
GroupMatchingModeEnum,
|
|
PlexSource,
|
|
SourcesApi,
|
|
UserMatchingModeEnum,
|
|
} from "@goauthentik/api";
|
|
|
|
import { propertyMappingsProvider, propertyMappingsSelector } from "./PlexSourceFormHelpers.js";
|
|
|
|
@customElement("ak-source-plex-form")
|
|
export class PlexSourceForm extends WithCapabilitiesConfig(BaseSourceForm<PlexSource>) {
|
|
async loadInstance(pk: string): Promise<PlexSource> {
|
|
const source = await new SourcesApi(DEFAULT_CONFIG).sourcesPlexRetrieve({
|
|
slug: pk,
|
|
});
|
|
this.plexToken = source.plexToken;
|
|
this.loadServers();
|
|
this.clearIcon = false;
|
|
return source;
|
|
}
|
|
|
|
@state()
|
|
clearIcon = false;
|
|
|
|
@property()
|
|
plexToken?: string;
|
|
|
|
@property({ attribute: false })
|
|
plexResources?: PlexResource[];
|
|
|
|
get defaultInstance(): PlexSource | undefined {
|
|
return {
|
|
clientId: randomString(40, ascii_letters + digits),
|
|
} as PlexSource;
|
|
}
|
|
|
|
async send(data: PlexSource): Promise<PlexSource> {
|
|
data.plexToken = this.plexToken || "";
|
|
let source: PlexSource;
|
|
if (this.instance?.pk) {
|
|
source = await new SourcesApi(DEFAULT_CONFIG).sourcesPlexUpdate({
|
|
slug: this.instance.slug,
|
|
plexSourceRequest: data,
|
|
});
|
|
} else {
|
|
source = await new SourcesApi(DEFAULT_CONFIG).sourcesPlexCreate({
|
|
plexSourceRequest: data,
|
|
});
|
|
}
|
|
if (this.can(CapabilitiesEnum.CanSaveMedia)) {
|
|
const icon = this.getFormFiles()["icon"];
|
|
if (icon || this.clearIcon) {
|
|
await new SourcesApi(DEFAULT_CONFIG).sourcesAllSetIconCreate({
|
|
slug: source.slug,
|
|
file: icon,
|
|
clear: this.clearIcon,
|
|
});
|
|
}
|
|
} else {
|
|
await new SourcesApi(DEFAULT_CONFIG).sourcesAllSetIconUrlCreate({
|
|
slug: source.slug,
|
|
filePathRequest: {
|
|
url: data.icon || "",
|
|
},
|
|
});
|
|
}
|
|
return source;
|
|
}
|
|
|
|
async doAuth(): Promise<void> {
|
|
const authInfo = await PlexAPIClient.getPin(this.instance?.clientId || "");
|
|
const authWindow = await popupCenterScreen(authInfo.authUrl, "plex auth", 550, 700);
|
|
PlexAPIClient.pinPoll(this.instance?.clientId || "", authInfo.pin.id).then((token) => {
|
|
authWindow?.close();
|
|
this.plexToken = token;
|
|
this.loadServers();
|
|
});
|
|
}
|
|
|
|
async loadServers(): Promise<void> {
|
|
if (!this.plexToken) {
|
|
return;
|
|
}
|
|
this.plexResources = await new PlexAPIClient(this.plexToken).getServers();
|
|
}
|
|
|
|
renderSettings(): TemplateResult {
|
|
if (!this.plexToken) {
|
|
return html` <button
|
|
class="pf-c-button pf-m-primary"
|
|
type="button"
|
|
@click=${() => {
|
|
this.doAuth();
|
|
}}
|
|
>
|
|
${msg("Load servers")}
|
|
</button>`;
|
|
}
|
|
return html` <button
|
|
class="pf-c-button pf-m-secondary"
|
|
type="button"
|
|
@click=${() => {
|
|
this.doAuth();
|
|
}}
|
|
>
|
|
${msg("Re-authenticate with plex")}
|
|
</button>
|
|
<ak-form-element-horizontal name="allowFriends">
|
|
<label class="pf-c-switch">
|
|
<input
|
|
class="pf-c-switch__input"
|
|
type="checkbox"
|
|
?checked=${first(this.instance?.allowFriends, true)}
|
|
/>
|
|
<span class="pf-c-switch__toggle">
|
|
<span class="pf-c-switch__toggle-icon">
|
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
</span>
|
|
</span>
|
|
<span class="pf-c-switch__label"
|
|
>${msg(
|
|
"Allow friends to authenticate via Plex, even if you don't share any servers",
|
|
)}</span
|
|
>
|
|
</label>
|
|
</ak-form-element-horizontal>
|
|
<ak-form-element-horizontal
|
|
label=${msg("Allowed servers")}
|
|
?required=${true}
|
|
name="allowedServers"
|
|
>
|
|
<select class="pf-c-form-control" multiple>
|
|
${this.plexResources?.map((r) => {
|
|
const selected = Array.from(this.instance?.allowedServers || []).some(
|
|
(server) => {
|
|
return server == r.clientIdentifier;
|
|
},
|
|
);
|
|
return html`<option value=${r.clientIdentifier} ?selected=${selected}>
|
|
${r.name}
|
|
</option>`;
|
|
})}
|
|
</select>
|
|
<p class="pf-c-form__helper-text">
|
|
${msg(
|
|
"Select which server a user has to be a member of to be allowed to authenticate.",
|
|
)}
|
|
</p>
|
|
</ak-form-element-horizontal>`;
|
|
}
|
|
|
|
renderForm(): TemplateResult {
|
|
return html` <ak-form-element-horizontal label=${msg("Name")} ?required=${true} name="name">
|
|
<input
|
|
type="text"
|
|
value="${ifDefined(this.instance?.name)}"
|
|
class="pf-c-form-control"
|
|
required
|
|
/>
|
|
</ak-form-element-horizontal>
|
|
<ak-form-element-horizontal label=${msg("Slug")} ?required=${true} name="slug">
|
|
<input
|
|
type="text"
|
|
value="${ifDefined(this.instance?.slug)}"
|
|
class="pf-c-form-control"
|
|
required
|
|
/>
|
|
</ak-form-element-horizontal>
|
|
<ak-form-element-horizontal name="enabled">
|
|
<label class="pf-c-switch">
|
|
<input
|
|
class="pf-c-switch__input"
|
|
type="checkbox"
|
|
?checked=${first(this.instance?.enabled, true)}
|
|
/>
|
|
<span class="pf-c-switch__toggle">
|
|
<span class="pf-c-switch__toggle-icon">
|
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
</span>
|
|
</span>
|
|
<span class="pf-c-switch__label">${msg("Enabled")}</span>
|
|
</label>
|
|
</ak-form-element-horizontal>
|
|
<ak-form-element-horizontal
|
|
label=${msg("User matching mode")}
|
|
?required=${true}
|
|
name="userMatchingMode"
|
|
>
|
|
<select class="pf-c-form-control">
|
|
<option
|
|
value=${UserMatchingModeEnum.Identifier}
|
|
?selected=${this.instance?.userMatchingMode ===
|
|
UserMatchingModeEnum.Identifier}
|
|
>
|
|
${UserMatchingModeToLabel(UserMatchingModeEnum.Identifier)}
|
|
</option>
|
|
<option
|
|
value=${UserMatchingModeEnum.EmailLink}
|
|
?selected=${this.instance?.userMatchingMode ===
|
|
UserMatchingModeEnum.EmailLink}
|
|
>
|
|
${UserMatchingModeToLabel(UserMatchingModeEnum.EmailLink)}
|
|
</option>
|
|
<option
|
|
value=${UserMatchingModeEnum.EmailDeny}
|
|
?selected=${this.instance?.userMatchingMode ===
|
|
UserMatchingModeEnum.EmailDeny}
|
|
>
|
|
${UserMatchingModeToLabel(UserMatchingModeEnum.EmailDeny)}
|
|
</option>
|
|
<option
|
|
value=${UserMatchingModeEnum.UsernameLink}
|
|
?selected=${this.instance?.userMatchingMode ===
|
|
UserMatchingModeEnum.UsernameLink}
|
|
>
|
|
${UserMatchingModeToLabel(UserMatchingModeEnum.UsernameLink)}
|
|
</option>
|
|
<option
|
|
value=${UserMatchingModeEnum.UsernameDeny}
|
|
?selected=${this.instance?.userMatchingMode ===
|
|
UserMatchingModeEnum.UsernameDeny}
|
|
>
|
|
${UserMatchingModeToLabel(UserMatchingModeEnum.UsernameDeny)}
|
|
</option>
|
|
</select>
|
|
</ak-form-element-horizontal>
|
|
<ak-form-element-horizontal
|
|
label=${msg("Group matching mode")}
|
|
?required=${true}
|
|
name="groupMatchingMode"
|
|
>
|
|
<select class="pf-c-form-control">
|
|
<option
|
|
value=${GroupMatchingModeEnum.Identifier}
|
|
?selected=${this.instance?.groupMatchingMode ===
|
|
GroupMatchingModeEnum.Identifier}
|
|
>
|
|
${UserMatchingModeToLabel(UserMatchingModeEnum.Identifier)}
|
|
</option>
|
|
<option
|
|
value=${GroupMatchingModeEnum.NameLink}
|
|
?selected=${this.instance?.groupMatchingMode ===
|
|
GroupMatchingModeEnum.NameLink}
|
|
>
|
|
${GroupMatchingModeToLabel(GroupMatchingModeEnum.NameLink)}
|
|
</option>
|
|
<option
|
|
value=${GroupMatchingModeEnum.NameDeny}
|
|
?selected=${this.instance?.groupMatchingMode ===
|
|
GroupMatchingModeEnum.NameDeny}
|
|
>
|
|
${GroupMatchingModeToLabel(GroupMatchingModeEnum.NameDeny)}
|
|
</option>
|
|
</select>
|
|
</ak-form-element-horizontal>
|
|
<ak-form-element-horizontal label=${msg("User path")} name="userPathTemplate">
|
|
<input
|
|
type="text"
|
|
value="${first(
|
|
this.instance?.userPathTemplate,
|
|
"goauthentik.io/sources/%(slug)s",
|
|
)}"
|
|
class="pf-c-form-control"
|
|
/>
|
|
<p class="pf-c-form__helper-text">${placeholderHelperText}</p>
|
|
</ak-form-element-horizontal>
|
|
${this.can(CapabilitiesEnum.CanSaveMedia)
|
|
? html`<ak-form-element-horizontal label=${msg("Icon")} name="icon">
|
|
<input type="file" value="" class="pf-c-form-control" />
|
|
${this.instance?.icon
|
|
? html`
|
|
<p class="pf-c-form__helper-text">
|
|
${msg("Currently set to:")} ${this.instance?.icon}
|
|
</p>
|
|
`
|
|
: html``}
|
|
</ak-form-element-horizontal>
|
|
${this.instance?.icon
|
|
? html`
|
|
<ak-form-element-horizontal>
|
|
<label class="pf-c-switch">
|
|
<input
|
|
class="pf-c-switch__input"
|
|
type="checkbox"
|
|
@change=${(ev: Event) => {
|
|
const target = ev.target as HTMLInputElement;
|
|
this.clearIcon = target.checked;
|
|
}}
|
|
/>
|
|
<span class="pf-c-switch__toggle">
|
|
<span class="pf-c-switch__toggle-icon">
|
|
<i class="fas fa-check" aria-hidden="true"></i>
|
|
</span>
|
|
</span>
|
|
<span class="pf-c-switch__label">
|
|
${msg("Clear icon")}
|
|
</span>
|
|
</label>
|
|
<p class="pf-c-form__helper-text">
|
|
${msg("Delete currently set icon.")}
|
|
</p>
|
|
</ak-form-element-horizontal>
|
|
`
|
|
: html``}`
|
|
: html`<ak-form-element-horizontal label=${msg("Icon")} name="icon">
|
|
<input
|
|
type="text"
|
|
value="${first(this.instance?.icon, "")}"
|
|
class="pf-c-form-control"
|
|
/>
|
|
<p class="pf-c-form__helper-text">${iconHelperText}</p>
|
|
</ak-form-element-horizontal>`}
|
|
<ak-form-group .expanded=${true}>
|
|
<span slot="header"> ${msg("Protocol settings")} </span>
|
|
<div slot="body" class="pf-c-form">
|
|
<ak-form-element-horizontal
|
|
label=${msg("Client ID")}
|
|
?required=${true}
|
|
name="clientId"
|
|
>
|
|
<input
|
|
type="text"
|
|
value="${first(this.instance?.clientId, "")}"
|
|
class="pf-c-form-control"
|
|
required
|
|
/>
|
|
</ak-form-element-horizontal>
|
|
${this.renderSettings()}
|
|
</div>
|
|
</ak-form-group>
|
|
<ak-form-group>
|
|
<span slot="header"> ${msg("Flow settings")} </span>
|
|
<div slot="body" class="pf-c-form">
|
|
<ak-form-element-horizontal
|
|
label=${msg("Authentication flow")}
|
|
name="authenticationFlow"
|
|
>
|
|
<ak-source-flow-search
|
|
flowType=${FlowsInstancesListDesignationEnum.Authentication}
|
|
.currentFlow=${this.instance?.authenticationFlow}
|
|
.instanceId=${this.instance?.pk}
|
|
fallback="default-source-authentication"
|
|
></ak-source-flow-search>
|
|
<p class="pf-c-form__helper-text">
|
|
${msg("Flow to use when authenticating existing users.")}
|
|
</p>
|
|
</ak-form-element-horizontal>
|
|
<ak-form-element-horizontal
|
|
label=${msg("Enrollment flow")}
|
|
name="enrollmentFlow"
|
|
>
|
|
<ak-source-flow-search
|
|
flowType=${FlowsInstancesListDesignationEnum.Enrollment}
|
|
.currentFlow=${this.instance?.enrollmentFlow}
|
|
.instanceId=${this.instance?.pk}
|
|
fallback="default-source-enrollment"
|
|
></ak-source-flow-search>
|
|
<p class="pf-c-form__helper-text">
|
|
${msg("Flow to use when enrolling new users.")}
|
|
</p>
|
|
</ak-form-element-horizontal>
|
|
</div>
|
|
</ak-form-group>
|
|
<ak-form-group ?expanded=${true}>
|
|
<span slot="header"> ${msg("Plex Attribute mapping")} </span>
|
|
<div slot="body" class="pf-c-form">
|
|
<ak-form-element-horizontal
|
|
label=${msg("User Property Mappings")}
|
|
name="userPropertyMappings"
|
|
>
|
|
<ak-dual-select-dynamic-selected
|
|
.provider=${propertyMappingsProvider}
|
|
.selector=${propertyMappingsSelector(
|
|
this.instance?.userPropertyMappings,
|
|
)}
|
|
available-label="${msg("Available User Property Mappings")}"
|
|
selected-label="${msg("Selected User Property Mappings")}"
|
|
></ak-dual-select-dynamic-selected>
|
|
<p class="pf-c-form__helper-text">
|
|
${msg("Property mappings for user creation.")}
|
|
</p>
|
|
</ak-form-element-horizontal>
|
|
<ak-form-element-horizontal
|
|
label=${msg("Group Property Mappings")}
|
|
name="groupPropertyMappings"
|
|
>
|
|
<ak-dual-select-dynamic-selected
|
|
.provider=${propertyMappingsProvider}
|
|
.selector=${propertyMappingsSelector(
|
|
this.instance?.groupPropertyMappings,
|
|
)}
|
|
available-label="${msg("Available Group Property Mappings")}"
|
|
selected-label="${msg("Selected Group Property Mappings")}"
|
|
></ak-dual-select-dynamic-selected>
|
|
<p class="pf-c-form__helper-text">
|
|
${msg("Property mappings for group creation.")}
|
|
</p>
|
|
</ak-form-element-horizontal>
|
|
</div>
|
|
</ak-form-group>`;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"ak-source-plex-form": PlexSourceForm;
|
|
}
|
|
}
|