habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/admin: implement groupform using webcomponents

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-03-28 22:07:11 +02:00
parent bd9c0efab7
commit 768d72ec24
6 changed files with 91 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
web/src/elements/forms/Form.ts
View File

@ -10,6 +10,7 @@ import AKGlobal from "../../authentik.css";
import PFForm from "@patternfly/patternfly/components/Form/form.css";
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
import { MessageLevel } from "../messages/Message";
import { IronFormElement } from "@polymer/iron-form/iron-form";
interface ErrorResponse {
[key: string]: string[];
@ -40,6 +41,23 @@ export class Form<T> extends LitElement {
`];
}
serializeForm(form: IronFormElement): T {
const elements = form._getSubmittableElements();
const json: { [key: string]: unknown } = {};
for (let i = 0; i < elements.length; i++) {
const element = elements[i] as HTMLInputElement;
const values = form._serializeElementValues(element);
if (element.tagName.toLowerCase() === "select" && "multiple" in element.attributes) {
json[element.name] = values;
} else {
for (let v = 0; v < values.length; v++) {
form._addSerializedElement(json, element.name, values[v]);
}
}
}
return json as unknown as T;
}
submit(ev: Event): Promise<T> | undefined {
ev.preventDefault();
const ironForm = this.shadowRoot?.querySelector("iron-form");
@ -47,7 +65,7 @@ export class Form<T> extends LitElement {
console.warn("authentik/forms: failed to find iron-form");
return;
}
const data = ironForm.serializeForm() as T;
const data = this.serializeForm(ironForm);
return this.send(data).then((r) => {
showMessage({
level: MessageLevel.success,
@ -56,24 +74,24 @@ export class Form<T> extends LitElement {
return r;
}).catch((ex: Response) => {
if (ex.status > 399 && ex.status < 500) {
return ex.json();
return ex.json().then((errorMessage: ErrorResponse) => {
if (!errorMessage) return errorMessage;
if (errorMessage instanceof Error) {
throw errorMessage;
}
const elements: PaperInputElement[] = ironForm._getSubmittableElements();
elements.forEach((element) => {
const elementName = element.name;
if (!elementName) return;
if (elementName in errorMessage) {
element.errorMessage = errorMessage[elementName].join(", ");
element.invalid = true;
}
});
throw new APIError(errorMessage);
});
}
return ex;
}).then((errorMessage: ErrorResponse | Error) => {
if (!errorMessage) return errorMessage;
if (errorMessage instanceof Error) {
throw errorMessage;
}
const elements: PaperInputElement[] = ironForm._getSubmittableElements();
elements.forEach((element) => {
const elementName = element.name;
if (!elementName) return;
if (elementName in errorMessage) {
element.errorMessage = errorMessage[elementName].join(", ");
element.invalid = true;
}
});
throw new APIError(errorMessage);
throw ex;
});
}