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

web: separate forms into dedicated file

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-03-25 09:52:19 +01:00
parent fe4791c216
commit cfcf7aa2ae
2 changed files with 59 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
web/src/elements/forms/Form.ts Normal file
View File

@ -0,0 +1,58 @@
import "@polymer/paper-input/paper-input";
import "@polymer/iron-form/iron-form";
import { PaperInputElement } from "@polymer/paper-input/paper-input";
import { showMessage } from "../../elements/messages/MessageContainer";
import { customElement, html, LitElement, property, TemplateResult } from "lit-element";
export interface ErrorResponse {
[key: string]: string[];
}
@customElement("ak-form")
export class Form extends LitElement {
@property()
successMessage = "";
@property()
send!: (data: Record<string, unknown>) => Promise<unknown>;
submit(ev: Event): void {
ev.preventDefault();
const ironForm = this.shadowRoot?.querySelector("iron-form");
if (!ironForm) {
return;
}
const data = ironForm.serializeForm();
this.send(data).then(() => {
showMessage({
level_tag: "success",
message: this.successMessage
});
}).catch((ex: Response) => {
if (ex.status > 399 && ex.status < 500) {
return ex.json();
}
return ex;
}).then((errorMessage?: ErrorResponse) => {
if (!errorMessage) return;
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;
}
});
});
}
render(): TemplateResult {
return html`<iron-form
@iron-form-presubmit=${(ev: Event) => { this.submit(ev); }}>
<slot></slot>
</iron-form>`;
}
}

56
web/src/pages/users/UserDetailsPage.ts
View File

@ -14,61 +14,7 @@ import { FlowURLManager } from "../../api/legacy";
import "@polymer/paper-input/paper-input";
import "@polymer/iron-form/iron-form";
import { DEFAULT_CONFIG } from "../../api/Config";
import { PaperInputElement } from "@polymer/paper-input/paper-input";
import { showMessage } from "../../elements/messages/MessageContainer";
export interface ErrorResponse {
[key: string]: string[];
}
@customElement("ak-form")
export class Form extends LitElement {
@property()
successMessage = "";
@property()
send!: (data: Record<string, unknown>) => Promise<unknown>;
submit(ev: Event): void {
ev.preventDefault();
const ironForm = this.shadowRoot?.querySelector("iron-form");
if (!ironForm) {
return;
}
const data = ironForm.serializeForm();
this.send(data).then(() => {
showMessage({
level_tag: "success",
message: this.successMessage
});
}).catch((ex: Response) => {
if (ex.status > 399 && ex.status < 500) {
return ex.json();
}
return ex;
}).then((errorMessage?: ErrorResponse) => {
if (!errorMessage) return;
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;
}
});
});
}
render(): TemplateResult {
return html`<iron-form
@iron-form-presubmit=${(ev: Event) => { this.submit(ev); }}>
<slot></slot>
</iron-form>`;
}
}
import "../../elements/forms/Form";
@customElement("ak-user-details")
export class UserDetailsPage extends LitElement {