frontend: Add error handling to collection forms

crates/frontend/js-components/lib/create-addressbook-form.ts

@@ -1,7 +1,6 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { Ref, createRef, ref } from 'lit/directives/ref.js';
-import { createClient } from "webdav";
 import { escapeXml } from ".";
 
 @customElement("create-addressbook-form")
@@ -15,8 +14,6 @@ export class CreateAddressbookForm extends LitElement {
     return this
   }
 
-  client = createClient("/carddav")
-
   @property()
   user: string = ''
   @property()
@@ -80,8 +77,12 @@ export class CreateAddressbookForm extends LitElement {
       alert("Empty displayname")
       return
     }
-    await this.client.createDirectory(`/principal/${this.principal || this.user}/${this.addr_id}`, {
-      data: `
+    let response = await fetch(`/carddav/principal/${this.principal || this.user}/${this.addr_id}`, {
+      method: 'MKCOL',
+      headers: {
+        'Content-Type': 'application/xml'
+      },
+      body: `
       <mkcol xmlns="DAV:" xmlns:CARD="urn:ietf:params:xml:ns:carddav">
         <set>
           <prop>
@@ -91,7 +92,14 @@ export class CreateAddressbookForm extends LitElement {
         </set>
       </mkcol>
       `
+
     })
+
+    if (response.status >= 400) {
+      alert(`Error ${response.status}: ${await response.text()}`)
+      return null
+    }
+
     window.location.reload()
     return null
   }

crates/frontend/js-components/lib/create-calendar-form.ts

@@ -1,7 +1,6 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { Ref, createRef, ref } from 'lit/directives/ref.js';
-import { createClient } from "webdav";
 import { escapeXml } from ".";
 
 @customElement("create-calendar-form")
@@ -14,8 +13,6 @@ export class CreateCalendarForm extends LitElement {
     return this
   }
 
-  client = createClient("/caldav")
-
   @property()
   user: string = ''
   @property()
@@ -126,8 +123,13 @@ export class CreateCalendarForm extends LitElement {
       alert("No calendar components selected")
       return
     }
-    await this.client.createDirectory(`/principal/${this.principal || this.user}/${this.cal_id}`, {
-      data: `
+
+    let response = await fetch(`/caldav/principal/${this.principal || this.user}/${this.cal_id}`, {
+      method: 'MKCOL',
+      headers: {
+        'Content-Type': 'application/xml'
+      },
+      body: `
       <mkcol xmlns="DAV:" xmlns:CAL="urn:ietf:params:xml:ns:caldav" xmlns:CS="http://calendarserver.org/ns/" xmlns:ICAL="http://apple.com/ns/ical/">
         <set>
           <prop>
@@ -144,6 +146,11 @@ export class CreateCalendarForm extends LitElement {
       </mkcol>
       `
     })
+
+    if (response.status >= 400) {
+      alert(`Error ${response.status}: ${await response.text()}`)
+      return null
+    }
     window.location.reload()
     return null
   }

crates/frontend/js-components/lib/edit-addressbook-form.ts

@@ -63,7 +63,7 @@ export class EditAddressbookForm extends LitElement {
       alert("Empty displayname")
       return
     }
-    await fetch(`/carddav/principal/${this.principal}/${this.addr_id}`, {
+    let response = await fetch(`/carddav/principal/${this.principal}/${this.addr_id}`, {
       method: 'PROPPATCH',
       headers: {
         'Content-Type': 'application/xml'
@@ -85,6 +85,12 @@ export class EditAddressbookForm extends LitElement {
       `
 
     })
+
+    if (response.status >= 400) {
+      alert(`Error ${response.status}: ${await response.text()}`)
+      return null
+    }
+
     window.location.reload()
     return null
   }

crates/frontend/js-components/lib/edit-calendar-form.ts

@@ -97,7 +97,7 @@ export class EditCalendarForm extends LitElement {
       alert("No calendar components selected")
       return
     }
-    await fetch(`/caldav/principal/${this.principal}/${this.cal_id}`, {
+    let response = await fetch(`/caldav/principal/${this.principal}/${this.cal_id}`, {
       method: 'PROPPATCH',
       headers: {
         'Content-Type': 'application/xml'
@@ -124,6 +124,12 @@ export class EditCalendarForm extends LitElement {
       </propertyupdate>
       `
     })
+
+    if (response.status >= 400) {
+      alert(`Error ${response.status}: ${await response.text()}`)
+      return null
+    }
+
     window.location.reload()
     return null
   }