providers/oauth2: migrate scope mapping to web

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-03-31 23:07:57 +02:00
parent 656fe00302
commit 6a69425688
9 changed files with 126 additions and 103 deletions

View File

@ -8,10 +8,6 @@ export class AdminURLManager {
return `/administration/providers/${rest}`;
}
static propertyMappings(rest: string): string {
return `/administration/property-mappings/${rest}`;
}
static stages(rest: string): string {
return `/administration/stages/${rest}`;
}

View File

@ -8,13 +8,16 @@ import "../../elements/buttons/Dropdown";
import "../../elements/buttons/SpinnerButton";
import "../../elements/forms/DeleteForm";
import "../../elements/forms/ModalForm";
import "../../elements/forms/ProxyForm";
import "./PropertyMappingTestForm";
import "./PropertyMappingScopeForm";
import "./PropertyMappingLDAPForm";
import { TableColumn } from "../../elements/table/Table";
import { until } from "lit-html/directives/until";
import { PAGE_SIZE } from "../../constants";
import { PropertyMapping, PropertymappingsApi } from "authentik-api";
import { DEFAULT_CONFIG } from "../../api/Config";
import { AdminURLManager } from "../../api/legacy";
import { ifDefined } from "lit-html/directives/if-defined";
@customElement("ak-property-mapping-list")
export class PropertyMappingListPage extends TablePage<PropertyMapping> {
@ -60,12 +63,28 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
html`${item.name}`,
html`${item.verboseName}`,
html`
<ak-modal-button href="${AdminURLManager.propertyMappings(`${item.pk}/update/`)}">
<ak-spinner-button slot="trigger" class="pf-m-secondary">
<ak-forms-modal>
<span slot="submit">
${gettext("Update")}
</span>
<span slot="header">
${gettext(`Update ${item.verboseName}`)}
</span>
<ak-proxy-form
slot="form"
.args=${{
"mappingUUID": item.pk
}}
type=${ifDefined(item.objectType)}
.typeMap=${{
"scopemapping": "ak-property-mapping-scope-form",
"ldap": "ak-property-mapping-ldap-form",
}}>
</ak-proxy-form>
<button slot="trigger" class="pf-c-button pf-m-secondary">
${gettext("Edit")}
</ak-spinner-button>
<div slot="modal"></div>
</ak-modal-button>
</button>
</ak-forms-modal>
<ak-forms-modal .closeAfterSuccessfulSubmit=${false}>
<span slot="submit">
${gettext("Test")}
@ -105,12 +124,22 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
${until(new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsAllTypes({}).then((types) => {
return types.map((type) => {
return html`<li>
<ak-modal-button href="${type.link}">
<button slot="trigger" class="pf-c-dropdown__menu-item">${type.name}<br>
<ak-forms-modal>
<span slot="submit">
${gettext("Create")}
</span>
<span slot="header">
${gettext(`Create ${type.name}`)}
</span>
<ak-proxy-form
slot="form"
type=${type.link}>
</ak-proxy-form>
<button slot="trigger" class="pf-c-dropdown__menu-item">
${type.name}<br>
<small>${type.description}</small>
</button>
<div slot="modal"></div>
</ak-modal-button>
</ak-forms-modal>
</li>`;
});
}), html`<ak-spinner></ak-spinner>`)}

View File

@ -0,0 +1,79 @@
import { ScopeMapping, PropertymappingsApi } from "authentik-api";
import { gettext } from "django";
import { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../api/Config";
import { Form } from "../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined";
import "../../elements/forms/HorizontalFormElement";
@customElement("ak-property-mapping-scope-form")
export class PropertyMappingScopeForm extends Form<ScopeMapping> {
set mappingUUID(value: string) {
new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsScopeRead({
pmUuid: value,
}).then(mapping => {
this.mapping = mapping;
});
}
@property({attribute: false})
mapping?: ScopeMapping;
getSuccessMessage(): string {
if (this.mapping) {
return gettext("Successfully updated mapping.");
} else {
return gettext("Successfully created mapping.");
}
}
send = (data: ScopeMapping): Promise<ScopeMapping> => {
if (this.mapping) {
return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsScopeUpdate({
pmUuid: this.mapping.pk || "",
data: data
});
} else {
return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsScopeCreate({
data: data
});
}
};
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<ak-form-element-horizontal
label=${gettext("Name")}
?required=${true}
name="name">
<input type="text" value="${ifDefined(this.mapping?.name)}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("Scope name")}
?required=${true}
name="scopeName">
<input type="text" value="${ifDefined(this.mapping?.scopeName)}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${gettext("Scope which the client can specify to access these properties.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("Description")}
?required=${true}
name="description">
<input type="text" value="${ifDefined(this.mapping?.description)}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${gettext("Description shown to the user when consenting. If left empty, the user won't be informed.")}</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("Expression")}
name="expression">
<ak-codemirror mode="python" value="${this.mapping?.expression}">
</ak-codemirror>
<p class="pf-c-form__helper-text">
Expression using Python. See <a href="https://goauthentik.io/docs/property-mappings/expression/">here</a> for a list of all variables.
</p>
</ak-form-element-horizontal>
</form>`;
}
}