From d0bfb99859e9329348128797c171817d1722b94e Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Fri, 24 Sep 2021 12:19:56 +0200
Subject: [PATCH] web/elements: improve error handling on forms

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 schema.yml                     |  3 ++
 web/src/elements/forms/Form.ts | 53 +++++++++++++++-------------------
 2 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/schema.yml b/schema.yml
index d12b473ac..037f8bc24 100644
--- a/schema.yml
+++ b/schema.yml
@@ -21580,6 +21580,7 @@ components:
           readOnly: true
         webhook_url:
           type: string
+          format: uri
         webhook_mapping:
           type: string
           format: uuid
@@ -21609,6 +21610,7 @@ components:
           $ref: '#/components/schemas/NotificationTransportModeEnum'
         webhook_url:
           type: string
+          format: uri
         webhook_mapping:
           type: string
           format: uuid
@@ -25808,6 +25810,7 @@ components:
           $ref: '#/components/schemas/NotificationTransportModeEnum'
         webhook_url:
           type: string
+          format: uri
         webhook_mapping:
           type: string
           format: uuid
diff --git a/web/src/elements/forms/Form.ts b/web/src/elements/forms/Form.ts
index da3c75133..b53e14165 100644
--- a/web/src/elements/forms/Form.ts
+++ b/web/src/elements/forms/Form.ts
@@ -199,41 +199,36 @@ export class Form<T> extends LitElement {
                 );
                 return r;
             })
-            .catch((ex: Response | Error) => {
+            .catch(async (ex: Response | Error) => {
                 if (ex instanceof Error) {
                     throw ex;
                 }
+                let msg = ex.statusText;
                 if (ex.status > 399 && ex.status < 500) {
-                    return ex.json().then((errorMessage: ValidationError) => {
-                        if (!errorMessage) return errorMessage;
-                        if (errorMessage instanceof Error) {
-                            throw errorMessage;
+                    const errorMessage: ValidationError = await ex.json();
+                    if (!errorMessage) return errorMessage;
+                    if (errorMessage instanceof Error) {
+                        throw errorMessage;
+                    }
+                    // assign all input-related errors to their elements
+                    const elements: PaperInputElement[] = ironForm._getSubmittableElements();
+                    elements.forEach((element) => {
+                        const elementName = element.name;
+                        if (!elementName) return;
+                        if (camelToSnake(elementName) in errorMessage) {
+                            element.errorMessage =
+                                errorMessage[camelToSnake(elementName)].join(", ");
+                            element.invalid = true;
                         }
-                        // assign all input-related errors to their elements
-                        const elements: PaperInputElement[] = ironForm._getSubmittableElements();
-                        elements.forEach((element) => {
-                            const elementName = element.name;
-                            if (!elementName) return;
-                            if (camelToSnake(elementName) in errorMessage) {
-                                element.errorMessage =
-                                    errorMessage[camelToSnake(elementName)].join(", ");
-                                element.invalid = true;
-                            }
-                        });
-                        if ("non_field_errors" in errorMessage) {
-                            this.nonFieldErrors = errorMessage["non_field_errors"];
-                        }
-                        throw new APIError(errorMessage);
                     });
-                }
-                throw ex;
-            })
-            .catch((ex: Error) => {
-                let msg = ex.toString();
-                // Only change the message when we have `detail`.
-                // Everything else is handled in the form.
-                if (ex instanceof APIError && "detail" in ex.response) {
-                    msg = ex.response.detail;
+                    if ("non_field_errors" in errorMessage) {
+                        this.nonFieldErrors = errorMessage["non_field_errors"];
+                    }
+                    // Only change the message when we have `detail`.
+                    // Everything else is handled in the form.
+                    if ("detail" in errorMessage) {
+                        msg = errorMessage.detail;
+                    }
                 }
                 // error is local or not from rest_framework
                 showMessage({