web: improve error handling

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-29 18:18:25 +02:00
parent 372cf4a8cb
commit 5b8e3b4189
2 changed files with 13 additions and 10 deletions

View File

@ -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;
} }
}); });

View File

@ -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();
}