web/admin: migrate application form to web
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
@ -1,9 +1,5 @@
|
||||
export class AdminURLManager {
|
||||
|
||||
static applications(rest: string): string {
|
||||
return `/administration/applications/${rest}`;
|
||||
}
|
||||
|
||||
static policies(rest: string): string {
|
||||
return `/administration/policies/${rest}`;
|
||||
}
|
||||
|
||||
@ -54,11 +54,18 @@ export class ModalButton extends LitElement {
|
||||
super();
|
||||
window.addEventListener("keyup", (e) => {
|
||||
if (e.code === "Escape") {
|
||||
this.resetForms();
|
||||
this.open = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
resetForms(): void {
|
||||
this.querySelectorAll<HTMLFormElement>("[slot=form]").forEach(form => {
|
||||
form.reset();
|
||||
});
|
||||
}
|
||||
|
||||
updateHandlers(): void {
|
||||
// Ensure links close the modal
|
||||
this.shadowRoot?.querySelectorAll<HTMLAnchorElement>("a").forEach((a) => {
|
||||
|
||||
@ -43,6 +43,40 @@ export class Form<T> extends LitElement {
|
||||
return this.successMessage;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset the inner iron-form
|
||||
*/
|
||||
reset(): void {
|
||||
const ironForm = this.shadowRoot?.querySelector("iron-form");
|
||||
if (!ironForm) {
|
||||
return;
|
||||
}
|
||||
ironForm.reset();
|
||||
}
|
||||
|
||||
/**
|
||||
* If this form contains a file input, and the input as been filled, this function returns
|
||||
* said file.
|
||||
* @returns File object or undefined
|
||||
*/
|
||||
getFormFile(): File | undefined {
|
||||
const ironForm = this.shadowRoot?.querySelector("iron-form");
|
||||
if (!ironForm) {
|
||||
return;
|
||||
}
|
||||
const elements = ironForm._getSubmittableElements();
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
const element = elements[i] as HTMLInputElement;
|
||||
if (element.tagName.toLowerCase() === "input" && element.type === "file") {
|
||||
if ((element.files || []).length < 1) {
|
||||
continue;
|
||||
}
|
||||
// We already checked the length
|
||||
return (element.files || [])[0];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
serializeForm(form: IronFormElement): T {
|
||||
const elements = form._getSubmittableElements();
|
||||
const json: { [key: string]: unknown } = {};
|
||||
|
||||
@ -15,6 +15,7 @@ export class ModalForm extends ModalButton {
|
||||
}
|
||||
formPromise.then(() => {
|
||||
this.open = false;
|
||||
form.reset();
|
||||
this.dispatchEvent(
|
||||
new CustomEvent(EVENT_REFRESH, {
|
||||
bubbles: true,
|
||||
|
||||
124
web/src/pages/applications/ApplicationForm.ts
Normal file
124
web/src/pages/applications/ApplicationForm.ts
Normal file
@ -0,0 +1,124 @@
|
||||
import { CoreApi, Application, ProvidersApi, Provider } 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 { until } from "lit-html/directives/until";
|
||||
import { ifDefined } from "lit-html/directives/if-defined";
|
||||
import "../../elements/forms/HorizontalFormElement";
|
||||
import "../../elements/CodeMirror";
|
||||
|
||||
@customElement("ak-application-form")
|
||||
export class ApplicationForm extends Form<Application> {
|
||||
|
||||
@property({ attribute: false })
|
||||
application?: Application;
|
||||
|
||||
@property({ attribute: false })
|
||||
provider?: number;
|
||||
|
||||
getSuccessMessage(): string {
|
||||
if (this.application) {
|
||||
return gettext("Successfully updated application.");
|
||||
} else {
|
||||
return gettext("Successfully created application.");
|
||||
}
|
||||
}
|
||||
|
||||
send = (data: Application): Promise<Application> => {
|
||||
let writeOp: Promise<Application>;
|
||||
if (this.application) {
|
||||
writeOp = new CoreApi(DEFAULT_CONFIG).coreApplicationsUpdate({
|
||||
slug: this.application.slug,
|
||||
data: data
|
||||
});
|
||||
} else {
|
||||
writeOp = new CoreApi(DEFAULT_CONFIG).coreApplicationsCreate({
|
||||
data: data
|
||||
});
|
||||
}
|
||||
const icon = this.getFormFile();
|
||||
if (icon) {
|
||||
return writeOp.then(app => {
|
||||
return new CoreApi(DEFAULT_CONFIG).coreApplicationsSetIcon({
|
||||
slug: app.slug,
|
||||
file: icon
|
||||
});
|
||||
});
|
||||
}
|
||||
return writeOp;
|
||||
};
|
||||
|
||||
groupProviders(providers: Provider[]): TemplateResult {
|
||||
const m = new Map<string, Provider[]>();
|
||||
providers.forEach(p => {
|
||||
if (!m.has(p.verboseName || "")) {
|
||||
m.set(p.verboseName || "", []);
|
||||
}
|
||||
const tProviders = m.get(p.verboseName || "") || [];
|
||||
tProviders.push(p);
|
||||
});
|
||||
return html`
|
||||
${Array.from(m).map(([group, providers]) => {
|
||||
return html`<optgroup label=${group}>
|
||||
${providers.map(p => {
|
||||
const selected = (this.application?.provider?.pk === p.pk) || (this.provider === p.pk)
|
||||
return html`<option ?selected=${selected} value=${ifDefined(p.pk)}>${p.name}</option>`;
|
||||
})}
|
||||
</optgroup>`;
|
||||
})}
|
||||
`;
|
||||
}
|
||||
|
||||
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.application?.name)}" class="pf-c-form-control" required>
|
||||
<p class="pf-c-form__helper-text">${gettext("Application's display Name.")}</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${gettext("Slug")}
|
||||
?required=${true}
|
||||
name="slug">
|
||||
<input type="text" value="${ifDefined(this.application?.slug)}" class="pf-c-form-control" required>
|
||||
<p class="pf-c-form__helper-text">${gettext("Internal application name, used in URLs.")}</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${gettext("Provider")}
|
||||
name="parent">
|
||||
<select class="pf-c-form-control">
|
||||
<option value="" ?selected=${this.application?.provider === undefined}>---------</option>
|
||||
${until(new ProvidersApi(DEFAULT_CONFIG).providersAllList({}).then(providers => {
|
||||
return this.groupProviders(providers.results);
|
||||
}), html``)}
|
||||
</select>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${gettext("Launch URL")}
|
||||
name="launchUrl">
|
||||
<input type="text" value="${ifDefined(this.application?.launchUrl)}" class="pf-c-form-control">
|
||||
<p class="pf-c-form__helper-text">${gettext("If left empty, authentik will try to extract the launch URL based on the selected provider.")}</p>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${gettext("Icon")}
|
||||
name="metaIcon">
|
||||
<input type="file" value="${ifDefined(this.application?.metaIcon)}" class="pf-c-form-control">
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${gettext("Description")}
|
||||
name="metaDescription">
|
||||
<textarea class="pf-c-form-control">${ifDefined(this.application?.metaDescription)}</textarea>
|
||||
</ak-form-element-horizontal>
|
||||
<ak-form-element-horizontal
|
||||
label=${gettext("Publisher")}
|
||||
name="metaPublisher">
|
||||
<input type="text" value="${ifDefined(this.application?.metaPublisher)}" class="pf-c-form-control">
|
||||
</ak-form-element-horizontal>
|
||||
</form>`;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,17 +1,17 @@
|
||||
import { gettext } from "django";
|
||||
import { css, CSSResult, customElement, html, property, TemplateResult } from "lit-element";
|
||||
import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
|
||||
import { AKResponse } from "../../api/Client";
|
||||
import { TablePage } from "../../elements/table/TablePage";
|
||||
|
||||
import "../../elements/buttons/ModalButton";
|
||||
import "../../elements/forms/ModalForm";
|
||||
import "../../elements/forms/DeleteForm";
|
||||
import "../../elements/buttons/SpinnerButton";
|
||||
import { TableColumn } from "../../elements/table/Table";
|
||||
import { PAGE_SIZE } from "../../constants";
|
||||
import { Application, CoreApi } from "authentik-api";
|
||||
import { DEFAULT_CONFIG } from "../../api/Config";
|
||||
import { AdminURLManager } from "../../api/legacy";
|
||||
import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
|
||||
import "./ApplicationForm";
|
||||
|
||||
@customElement("ak-application-list")
|
||||
export class ApplicationListPage extends TablePage<Application> {
|
||||
@ -74,15 +74,22 @@ export class ApplicationListPage extends TablePage<Application> {
|
||||
${item.metaPublisher ? html`<small>${item.metaPublisher}</small>` : html``}
|
||||
</a>`,
|
||||
html`<code>${item.slug}</code>`,
|
||||
html`${item.provider?.name}`,
|
||||
html`${item.provider?.verboseName}`,
|
||||
html`${item.provider?.name || "-"}`,
|
||||
html`${item.provider?.verboseName || "-"}`,
|
||||
html`
|
||||
<ak-modal-button href="${AdminURLManager.applications(`${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 Application")}
|
||||
</span>
|
||||
<ak-application-form slot="form" .application=${item}>
|
||||
</ak-application-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-delete
|
||||
.obj=${item}
|
||||
objectLabel=${gettext("Application")}
|
||||
@ -100,12 +107,19 @@ export class ApplicationListPage extends TablePage<Application> {
|
||||
|
||||
renderToolbar(): TemplateResult {
|
||||
return html`
|
||||
<ak-modal-button href=${AdminURLManager.applications("create/")}>
|
||||
<ak-spinner-button slot="trigger" class="pf-m-primary">
|
||||
<ak-forms-modal>
|
||||
<span slot="submit">
|
||||
${gettext("Create")}
|
||||
</ak-spinner-button>
|
||||
<div slot="modal"></div>
|
||||
</ak-modal-button>
|
||||
</span>
|
||||
<span slot="header">
|
||||
${gettext("Create Application")}
|
||||
</span>
|
||||
<ak-application-form slot="form">
|
||||
</ak-application-form>
|
||||
<button slot="trigger" class="pf-c-button pf-m-primary">
|
||||
${gettext("Create")}
|
||||
</button>
|
||||
</ak-forms-modal>
|
||||
${super.renderToolbar()}
|
||||
`;
|
||||
}
|
||||
|
||||
@ -10,7 +10,6 @@ import { TableColumn } from "../../elements/table/Table";
|
||||
import { PAGE_SIZE } from "../../constants";
|
||||
import { EventsApi, NotificationRule } from "authentik-api";
|
||||
import { DEFAULT_CONFIG } from "../../api/Config";
|
||||
import { AdminURLManager } from "../../api/legacy";
|
||||
import "../../elements/forms/DeleteForm";
|
||||
import "./RuleForm";
|
||||
|
||||
|
||||
@ -1,14 +1,21 @@
|
||||
import { gettext } from "django";
|
||||
import { customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
||||
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
||||
import { Provider } from "authentik-api";
|
||||
import { AdminURLManager } from "../../api/legacy";
|
||||
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||||
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||||
|
||||
import "../../elements/buttons/ModalButton";
|
||||
import "../../elements/Spinner";
|
||||
import "../../elements/forms/ModalForm";
|
||||
import "../../pages/applications/ApplicationForm";
|
||||
|
||||
@customElement("ak-provider-related-application")
|
||||
export class RelatedApplicationButton extends LitElement {
|
||||
|
||||
static get styles(): CSSResult[] {
|
||||
return [PFBase, PFButton];
|
||||
}
|
||||
|
||||
@property({attribute: false})
|
||||
provider?: Provider;
|
||||
|
||||
@ -18,12 +25,19 @@ export class RelatedApplicationButton extends LitElement {
|
||||
${this.provider.assignedApplicationName}
|
||||
</a>`;
|
||||
}
|
||||
return html`<ak-modal-button href=${AdminURLManager.applications(`create/?provider=${this.provider ? this.provider.pk : ""}`)}>
|
||||
<ak-spinner-button slot="trigger" class="pf-m-primary">
|
||||
${gettext("Create")}
|
||||
</ak-spinner-button>
|
||||
<div slot="modal"></div>
|
||||
</ak-modal-button>`;
|
||||
return html`<ak-forms-modal>
|
||||
<span slot="submit">
|
||||
${gettext("Create")}
|
||||
</span>
|
||||
<span slot="header">
|
||||
${gettext("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">
|
||||
${gettext("Create")}
|
||||
</button>
|
||||
</ak-forms-modal>`;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user