web: separate forms into dedicated file
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
		@ -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 {
 | 
			
		||||
 | 
			
		||||
		Reference in New Issue
	
	Block a user