web: improve error handling
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
372cf4a8cb
commit
5b8e3b4189
|
@ -11,14 +11,12 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css";
|
||||||
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
|
import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
|
||||||
import { MessageLevel } from "../messages/Message";
|
import { MessageLevel } from "../messages/Message";
|
||||||
import { IronFormElement } from "@polymer/iron-form/iron-form";
|
import { IronFormElement } from "@polymer/iron-form/iron-form";
|
||||||
|
import { camelToSnake } from "../../utils";
|
||||||
interface ErrorResponse {
|
import { ValidationError } from "authentik-api/src";
|
||||||
[key: string]: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export class APIError extends Error {
|
export class APIError extends Error {
|
||||||
|
|
||||||
constructor(public response: ErrorResponse) {
|
constructor(public response: ValidationError) {
|
||||||
super();
|
super();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -31,7 +29,7 @@ export class Form<T> extends LitElement {
|
||||||
successMessage = "";
|
successMessage = "";
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
send!: (data: T) => Promise<T>;
|
send!: (data: T) => Promise<unknown>;
|
||||||
|
|
||||||
static get styles(): CSSResult[] {
|
static get styles(): CSSResult[] {
|
||||||
return [PFBase, PFCard, PFButton, PFForm, PFFormControl, AKGlobal, css`
|
return [PFBase, PFCard, PFButton, PFForm, PFFormControl, AKGlobal, css`
|
||||||
|
@ -62,7 +60,7 @@ export class Form<T> extends LitElement {
|
||||||
return json as unknown as T;
|
return json as unknown as T;
|
||||||
}
|
}
|
||||||
|
|
||||||
submit(ev: Event): Promise<T> | undefined {
|
submit(ev: Event): Promise<unknown> | undefined {
|
||||||
ev.preventDefault();
|
ev.preventDefault();
|
||||||
const ironForm = this.shadowRoot?.querySelector("iron-form");
|
const ironForm = this.shadowRoot?.querySelector("iron-form");
|
||||||
if (!ironForm) {
|
if (!ironForm) {
|
||||||
|
@ -78,7 +76,7 @@ export class Form<T> extends LitElement {
|
||||||
return r;
|
return r;
|
||||||
}).catch((ex: Response) => {
|
}).catch((ex: Response) => {
|
||||||
if (ex.status > 399 && ex.status < 500) {
|
if (ex.status > 399 && ex.status < 500) {
|
||||||
return ex.json().then((errorMessage: ErrorResponse) => {
|
return ex.json().then((errorMessage: ValidationError) => {
|
||||||
if (!errorMessage) return errorMessage;
|
if (!errorMessage) return errorMessage;
|
||||||
if (errorMessage instanceof Error) {
|
if (errorMessage instanceof Error) {
|
||||||
throw errorMessage;
|
throw errorMessage;
|
||||||
|
@ -87,8 +85,8 @@ export class Form<T> extends LitElement {
|
||||||
elements.forEach((element) => {
|
elements.forEach((element) => {
|
||||||
const elementName = element.name;
|
const elementName = element.name;
|
||||||
if (!elementName) return;
|
if (!elementName) return;
|
||||||
if (elementName in errorMessage) {
|
if (camelToSnake(elementName) in errorMessage) {
|
||||||
element.errorMessage = errorMessage[elementName].join(", ");
|
element.errorMessage = errorMessage[camelToSnake(elementName)].join(", ");
|
||||||
element.invalid = true;
|
element.invalid = true;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -51,3 +51,8 @@ export function loading<T>(v: T, actual: TemplateResult): TemplateResult {
|
||||||
}
|
}
|
||||||
return actual;
|
return actual;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function camelToSnake(key: string): string {
|
||||||
|
var result = key.replace(/([A-Z])/g, " $1");
|
||||||
|
return result.split(' ').join('_').toLowerCase();
|
||||||
|
}
|
||||||
|
|
Reference in New Issue