Change new map to use dialog

This allows setting additional properties

integ_tests/test_sharing.py

@@ -22,7 +22,8 @@ def test_create_and_delete_share_by_key(page: Page, radicale_server: str) -> Non
         page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden)")
     ).to_have_count(0)
 
-    page.click('button[data-name="sharebytoken_ro"]')
+    page.click('button[data-name="sharebytoken"]')
+    page.click('#newshare button[data-name="submit"]')
     expect(
         page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden)")
     ).to_have_count(1)
@@ -34,7 +35,9 @@ def test_create_and_delete_share_by_key(page: Page, radicale_server: str) -> Non
     expect(
         page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden)")
     ).to_have_count(0)
-    page.click('button[data-name="sharebytoken_rw"]')
+    page.click('button[data-name="sharebytoken"]')
+    page.click('label[for="newshare_attr_permissions_rw"]')
+    page.click('#newshare button[data-name="submit"]')
     expect(
         page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden)")
     ).to_have_count(1)

radicale/web/internal_data/CollectionsScene.js

@@ -21,7 +21,7 @@
 import { CreateEditCollectionScene } from "./CreateEditCollectionScene.js";
 import { DeleteCollectionScene } from "./DeleteCollectionScene.js";
 import { LoadingScene } from "./LoadingScene.js";
-import { CreateShareCollectionScene, maybe_enable_sharing_options } from "./ShareCollectionScene.js";
+import { ShareCollectionScene, maybe_enable_sharing_options } from "./ShareCollectionScene.js";
 import { UploadCollectionScene } from "./UploadCollectionScene.js";
 import { discover_server_features, get_collections } from "./api.js";
 import { SERVER } from "./constants.js";
@@ -30,15 +30,16 @@ import { Scene, pop_scene, push_scene, scene_stack } from "./scene_manager.js";
 import { bytesToHumanReadable } from "./utils.js";
 
 /**
- * @constructor
  * @implements {Scene}
- * @param {string} user
- * @param {string} password
- * @param {Collection} collection The principal collection.
- * @param {function(string):void} onerror Called when an error occurs, before the
- *                                   scene is popped.
  */
 export class CollectionsScene {
+    /**
+     * @param {string} user
+     * @param {string} password
+     * @param {Collection} collection The collection to show sharing options for.
+     * @param {function(string):void} onerror Called when an error occurs, before the
+     *                                   scene is popped.
+     */
     constructor(user, password, collection, onerror) {
         /** @type {HTMLElement} */ let html_scene = document.getElementById("collectionsscene");
         /** @type {HTMLElement} */ let template = html_scene.querySelector("[data-name=collectiontemplate]");
@@ -82,7 +83,7 @@ export class CollectionsScene {
 
         function onshare(collection) {
             try {
-                let share_collection_scene = new CreateShareCollectionScene(user, password, collection);
+                let share_collection_scene = new ShareCollectionScene(user, password, collection);
                 push_scene(share_collection_scene, false);
             } catch (err) {
                 console.error(err);
@@ -189,7 +190,7 @@ export class CollectionsScene {
             upload_btn.onclick = onupload;
             if (collections === null) {
                 update();
-                discover_server_features(user, password, maybe_enable_sharing_options);            
+                discover_server_features(user, password, maybe_enable_sharing_options);
             } else {
                 // from update loading scene
                 show_collections(collections);

radicale/web/internal_data/NewShareScene.js

@@ -0,0 +1,101 @@
+/**
+ * This file is part of Radicale Server - Calendar Server
+ * Copyright © 2017-2024 Unrud <unrud@outlook.com>
+ * Copyright © 2023-2024 Matthew Hana <matthew.hana@gmail.com>
+ * Copyright © 2024-2025 Peter Bieringer <pb@bieringer.de>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { add_share_by_token } from "./api.js";
+import { Scene, pop_scene, scene_stack } from "./scene_manager.js";
+
+/**
+ * @implements {Scene}
+ */
+export class NewShareScene {
+    /**
+     * @param {string} user
+     * @param {string} password
+     * @param {string} pathMapped
+     * @param {function():void} onclose
+     */
+    constructor(user, password, pathMapped, onclose) {
+        /** @type {HTMLElement} */ let html_scene = document.getElementById("newshare");
+        /** @type {HTMLFormElement} */ let form = html_scene.querySelector("form");
+        /** @type {HTMLInputElement} */ let enabled_checkbox = html_scene.querySelector("[data-name=enabled]");
+        /** @type {HTMLInputElement} */ let hidden_checkbox = html_scene.querySelector("[data-name=hidden]");
+        let permissions_ro_radio = /** @type {HTMLInputElement} */ (document.getElementById("newshare_attr_permissions_ro"));
+        let permissions_rw_radio = /** @type {HTMLInputElement} */ (document.getElementById("newshare_attr_permissions_rw"));
+        /** @type {HTMLInputElement} */ let properties_input = html_scene.querySelector("[data-name=properties]");
+        /** @type {HTMLElement} */ let cancel_btn = html_scene.querySelector("[data-name=cancel]");
+
+        /** @type {?number} */ let scene_index = null;
+
+        function oncancel() {
+            try {
+                if (scene_index !== null) {
+                    pop_scene(scene_index - 1);
+                }
+                if (onclose) onclose();
+            } catch (err) {
+                console.error(err);
+            }
+            return false;
+        }
+
+        function onsubmit() {
+            try {
+                let enabled = enabled_checkbox.checked;
+                let hidden = hidden_checkbox.checked;
+                let permissions = permissions_rw_radio.checked ? "rw" : "r";
+                let properties = properties_input.value;
+
+                add_share_by_token(user, password, pathMapped, permissions, enabled, hidden, properties, function () {
+                    if (scene_index !== null) {
+                        pop_scene(scene_index - 1);
+                    }
+                    if (onclose) onclose();
+                });
+            } catch (err) {
+                console.error(err);
+            }
+            return false;
+        }
+
+        this.show = function () {
+            this.release();
+            scene_index = scene_stack.length - 1;
+            html_scene.classList.remove("hidden");
+            cancel_btn.onclick = oncancel;
+            form.onsubmit = onsubmit;
+
+            enabled_checkbox.checked = true;
+            hidden_checkbox.checked = false;
+            permissions_ro_radio.checked = true;
+            permissions_rw_radio.checked = false;
+            properties_input.value = "";
+        };
+
+        this.hide = function () {
+            html_scene.classList.add("hidden");
+            cancel_btn.onclick = null;
+            form.onsubmit = null;
+        };
+
+        this.release = function () {
+            scene_index = null;
+        };
+    }
+}

radicale/web/internal_data/ShareCollectionScene.js

@@ -19,32 +19,31 @@
  */
 
 import {
-  add_share_by_token,
   delete_share_by_token,
   reload_sharing_list,
   server_features,
 } from "./api.js";
 import { Collection } from "./models.js";
-import { Scene, pop_scene, scene_stack } from "./scene_manager.js";
+import { NewShareScene } from "./NewShareScene.js";
+import { Scene, pop_scene, push_scene, scene_stack } from "./scene_manager.js";
 
 /**
  * @implements {Scene}
- * @param {string} user
- * @param {string} password
- * @param {Collection} collection The collection on which to edit sharing setting. Must exist.
  */
-export class CreateShareCollectionScene {
+export class ShareCollectionScene {
+  /**
+   * @param {string} user
+   * @param {string} password
+   * @param {Collection} collection The collection on which to edit sharing setting. Must exist.
+   */
   constructor(user, password, collection) {
-        /** @type {?number} */ let scene_index = null;
+    /** @type {?number} */ let scene_index = null;
 
     let html_scene = document.getElementById("sharecollectionscene");
 
-        /** @type {HTMLElement} */ let cancel_btn = html_scene.querySelector("[data-name=cancel]");
-        /** @type {HTMLElement} */ let share_by_token_btn_ro = html_scene.querySelector(
-      "[data-name=sharebytoken_ro]"
-    );
-        /** @type {HTMLElement} */ let share_by_token_btn_rw = html_scene.querySelector(
-      "[data-name=sharebytoken_rw]"
+    /** @type {HTMLElement} */ let cancel_btn = html_scene.querySelector("[data-name=cancel]");
+    /** @type {HTMLElement} */ let share_by_token_btn = html_scene.querySelector(
+      "[data-name=sharebytoken]"
     );
 
         /** @type {HTMLElement} */ let title = html_scene.querySelector("[data-name=title]");
@@ -58,16 +57,11 @@ export class CreateShareCollectionScene {
       return false;
     }
 
-    function onsharebytoken_rw() {
-      add_share_by_token(user, password, collection, "rw", function () {
-        update_share_list(user, password, collection);
-      });
-    }
-
-    function onsharebytoken_ro() {
-      add_share_by_token(user, password, collection, "r", function () {
+    function onsharebytoken() {
+      let new_share_scene = new NewShareScene(user, password, collection.href, function () {
         update_share_list(user, password, collection);
       });
+      push_scene(new_share_scene, false);
     }
 
     this.show = function () {
@@ -76,13 +70,10 @@ export class CreateShareCollectionScene {
       html_scene.classList.remove("hidden");
       cancel_btn.onclick = oncancel;
       if (server_features["sharing"]["PermittedCreateCollectionByToken"]) {
-        share_by_token_btn_ro.classList.remove("hidden");
-        share_by_token_btn_rw.classList.remove("hidden");
-        share_by_token_btn_ro.onclick = onsharebytoken_ro;
-        share_by_token_btn_rw.onclick = onsharebytoken_rw;
+        share_by_token_btn.classList.remove("hidden");
+        share_by_token_btn.onclick = onsharebytoken;
       } else {
-        share_by_token_btn_ro.classList.add("hidden");
-        share_by_token_btn_rw.classList.add("hidden");
+        share_by_token_btn.classList.add("hidden");
       }
       title.textContent = collection.displayname || collection.href;
       update_share_list(user, password, collection);

radicale/web/internal_data/api.js

@@ -18,8 +18,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { COLOR_RE, ROOT_PATH, SERVER } from "./constants.js";
 import { Collection, CollectionType } from "./models.js";
-import { SERVER, ROOT_PATH, COLOR_RE } from "./constants.js";
 import { escape_xml } from "./utils.js";
 
 export let server_features = {};
@@ -34,7 +34,7 @@ export let server_features = {};
 export function get_principal(user, password, callback) {
     let request = new XMLHttpRequest();
     request.open("PROPFIND", SERVER + ROOT_PATH, true, user, encodeURIComponent(password));
-    request.onreadystatechange = function() {
+    request.onreadystatechange = function () {
         if (request.readyState !== 4) {
             return;
         }
@@ -59,12 +59,12 @@ export function get_principal(user, password, callback) {
         }
     };
     request.send('<?xml version="1.0" encoding="utf-8" ?>' +
-                 '<propfind xmlns="DAV:">' +
-                     '<prop>' +
-                         '<current-user-principal />' +
-                         '<displayname />' +
-                     '</prop>' +
-                 '</propfind>');
+        '<propfind xmlns="DAV:">' +
+        '<prop>' +
+        '<current-user-principal />' +
+        '<displayname />' +
+        '</prop>' +
+        '</propfind>');
     return request;
 }
 
@@ -80,7 +80,7 @@ export function get_collections(user, password, collection, callback) {
     let request = new XMLHttpRequest();
     request.open("PROPFIND", SERVER + collection.href, true, user, encodeURIComponent(password));
     request.setRequestHeader("depth", "1");
-    request.onreadystatechange = function() {
+    request.onreadystatechange = function () {
         if (request.readyState !== 4) {
             return;
         }
@@ -155,7 +155,7 @@ export function get_collections(user, password, collection, callback) {
                     collections.push(new Collection(href, type, displayname, description, sane_color, count, size, source));
                 }
             }
-            collections.sort(function(a, b) {
+            collections.sort(function (a, b) {
                 /** @type {string} */ let ca = a.displayname || a.href;
                 /** @type {string} */ let cb = b.displayname || b.href;
                 return ca.localeCompare(cb);
@@ -166,28 +166,28 @@ export function get_collections(user, password, collection, callback) {
         }
     };
     request.send('<?xml version="1.0" encoding="utf-8" ?>' +
-                 '<propfind ' +
-                         'xmlns="DAV:" ' +
-                         'xmlns:C="urn:ietf:params:xml:ns:caldav" ' +
-                         'xmlns:CR="urn:ietf:params:xml:ns:carddav" ' +
-                         'xmlns:CS="http://calendarserver.org/ns/" ' +
-                         'xmlns:I="http://apple.com/ns/ical/" ' +
-                         'xmlns:INF="http://inf-it.com/ns/ab/" ' +
-                         'xmlns:RADICALE="http://radicale.org/ns/"' +
-                         '>' +
-                     '<prop>' +
-                         '<resourcetype />' +
-                         '<RADICALE:displayname />' +
-                         '<I:calendar-color />' +
-                         '<INF:addressbook-color />' +
-                         '<C:calendar-description />' +
-                         '<C:supported-calendar-component-set />' +
-                         '<CR:addressbook-description />' +
-                         '<CS:source />' +
-                         '<RADICALE:getcontentcount />' +
-                         '<getcontentlength />' +
-                     '</prop>' +
-                 '</propfind>');
+        '<propfind ' +
+        'xmlns="DAV:" ' +
+        'xmlns:C="urn:ietf:params:xml:ns:caldav" ' +
+        'xmlns:CR="urn:ietf:params:xml:ns:carddav" ' +
+        'xmlns:CS="http://calendarserver.org/ns/" ' +
+        'xmlns:I="http://apple.com/ns/ical/" ' +
+        'xmlns:INF="http://inf-it.com/ns/ab/" ' +
+        'xmlns:RADICALE="http://radicale.org/ns/"' +
+        '>' +
+        '<prop>' +
+        '<resourcetype />' +
+        '<RADICALE:displayname />' +
+        '<I:calendar-color />' +
+        '<INF:addressbook-color />' +
+        '<C:calendar-description />' +
+        '<C:supported-calendar-component-set />' +
+        '<CR:addressbook-description />' +
+        '<CS:source />' +
+        '<RADICALE:getcontentcount />' +
+        '<getcontentlength />' +
+        '</prop>' +
+        '</propfind>');
     return request;
 }
 
@@ -202,7 +202,7 @@ export function get_collections(user, password, collection, callback) {
 export function upload_collection(user, password, collection_href, file, callback) {
     let request = new XMLHttpRequest();
     request.open("PUT", SERVER + collection_href, true, user, encodeURIComponent(password));
-    request.onreadystatechange = function() {
+    request.onreadystatechange = function () {
         if (request.readyState !== 4) {
             return;
         }
@@ -227,7 +227,7 @@ export function upload_collection(user, password, collection_href, file, callbac
 export function delete_collection(user, password, collection, callback) {
     let request = new XMLHttpRequest();
     request.open("DELETE", SERVER + collection.href, true, user, encodeURIComponent(password));
-    request.onreadystatechange = function() {
+    request.onreadystatechange = function () {
         if (request.readyState !== 4) {
             return;
         }
@@ -252,7 +252,7 @@ export function delete_collection(user, password, collection, callback) {
 function create_edit_collection(user, password, collection, create, callback) {
     let request = new XMLHttpRequest();
     request.open(create ? "MKCOL" : "PROPPATCH", SERVER + collection.href, true, user, encodeURIComponent(password));
-    request.onreadystatechange = function() {
+    request.onreadystatechange = function () {
         if (request.readyState !== 4) {
             return;
         }
@@ -295,30 +295,30 @@ function create_edit_collection(user, password, collection, create, callback) {
     }
     let xml_request = create ? "mkcol" : "propertyupdate";
     request.send('<?xml version="1.0" encoding="UTF-8" ?>' +
-                 '<' + xml_request + ' xmlns="DAV:" xmlns:C="urn:ietf:params:xml:ns:caldav" xmlns:CR="urn:ietf:params:xml:ns:carddav" xmlns:CS="http://calendarserver.org/ns/" xmlns:I="http://apple.com/ns/ical/" xmlns:INF="http://inf-it.com/ns/ab/">' +
-                     '<set>' +
-                         '<prop>' +
-                             (create ? '<resourcetype><collection />' + resourcetype + '</resourcetype>' : '') +
-                             (components ? '<C:supported-calendar-component-set>' + components + '</C:supported-calendar-component-set>' : '') +
-                             (displayname ? '<displayname>' + displayname + '</displayname>' : '') +
-                             (calendar_color ? '<I:calendar-color>' + calendar_color + '</I:calendar-color>' : '') +
-                             (addressbook_color ? '<INF:addressbook-color>' + addressbook_color + '</INF:addressbook-color>' : '') +
-                             (addressbook_description ? '<CR:addressbook-description>' + addressbook_description + '</CR:addressbook-description>' : '') +
-                             (calendar_description ? '<C:calendar-description>' + calendar_description + '</C:calendar-description>' : '') +
-                             (calendar_source ? '<CS:source>' + calendar_source + '</CS:source>' : '') +
-                         '</prop>' +
-                     '</set>' +
-                     (!create ? ('<remove>' +
-                         '<prop>' +
-                             (!components ? '<C:supported-calendar-component-set />' : '') +
-                             (!displayname ? '<displayname />' : '') +
-                             (!calendar_color ? '<I:calendar-color />' : '') +
-                             (!addressbook_color ? '<INF:addressbook-color />' : '') +
-                             (!addressbook_description ? '<CR:addressbook-description />' : '') +
-                             (!calendar_description ? '<C:calendar-description />' : '') +
-                         '</prop>' +
-                     '</remove>'): '') +
-                 '</' + xml_request + '>');
+        '<' + xml_request + ' xmlns="DAV:" xmlns:C="urn:ietf:params:xml:ns:caldav" xmlns:CR="urn:ietf:params:xml:ns:carddav" xmlns:CS="http://calendarserver.org/ns/" xmlns:I="http://apple.com/ns/ical/" xmlns:INF="http://inf-it.com/ns/ab/">' +
+        '<set>' +
+        '<prop>' +
+        (create ? '<resourcetype><collection />' + resourcetype + '</resourcetype>' : '') +
+        (components ? '<C:supported-calendar-component-set>' + components + '</C:supported-calendar-component-set>' : '') +
+        (displayname ? '<displayname>' + displayname + '</displayname>' : '') +
+        (calendar_color ? '<I:calendar-color>' + calendar_color + '</I:calendar-color>' : '') +
+        (addressbook_color ? '<INF:addressbook-color>' + addressbook_color + '</INF:addressbook-color>' : '') +
+        (addressbook_description ? '<CR:addressbook-description>' + addressbook_description + '</CR:addressbook-description>' : '') +
+        (calendar_description ? '<C:calendar-description>' + calendar_description + '</C:calendar-description>' : '') +
+        (calendar_source ? '<CS:source>' + calendar_source + '</CS:source>' : '') +
+        '</prop>' +
+        '</set>' +
+        (!create ? ('<remove>' +
+            '<prop>' +
+            (!components ? '<C:supported-calendar-component-set />' : '') +
+            (!displayname ? '<displayname />' : '') +
+            (!calendar_color ? '<I:calendar-color />' : '') +
+            (!addressbook_color ? '<INF:addressbook-color />' : '') +
+            (!addressbook_description ? '<CR:addressbook-description />' : '') +
+            (!calendar_description ? '<C:calendar-description />' : '') +
+            '</prop>' +
+            '</remove>') : '') +
+        '</' + xml_request + '>');
     return request;
 }
 
@@ -345,128 +345,171 @@ export function edit_collection(user, password, collection, callback) {
 }
 /* Sharing API */
 
+/**
+ * @param {string} user
+ * @param {string} password
+ * @param {string} path
+ * @param {object} body
+ * @param {function(string):void} on_success
+ * @param {function():void} on_not_found
+ * @param {function(string):void} on_error
+ * @returns {XMLHttpRequest}
+ */
 function call_sharing_api(
-  user,
-  password,
-  path,
-  body,
-  on_success,
-  on_not_found = null,
-  on_error = null,
-) {
-  let request = new XMLHttpRequest();
-  request.open(
-    "POST",
-    SERVER + ROOT_PATH + ".sharing/v1/" + path,
-    true,
     user,
-    encodeURIComponent(password),
-  );
-  request.onreadystatechange = function () {
-    if (request.readyState !== 4) {
-      return;
-    }
-    if (200 <= request.status && request.status < 300) {
-      on_success(request.responseText);
-    } else if (request.status === 404) {
-      if (on_not_found) {
-        on_not_found();
-      } else if (on_error) {
-        on_error("Not found");
-      } else {
-        console.error("Not found");
-      }
-    } else {
-      if (on_error) {
-        on_error(request.status + " " + request.statusText);
-      } else {
-        console.error(request.status + " " + request.statusText);
-      }
-    }
-  };
-  request.setRequestHeader("Accept", "application/json");
-  request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
-  request.send(body ? JSON.stringify(body) : null);
-  return request;
+    password,
+    path,
+    body,
+    on_success,
+    on_not_found = null,
+    on_error = null,
+) {
+    let request = new XMLHttpRequest();
+    request.open(
+        "POST",
+        SERVER + ROOT_PATH + ".sharing/v1/" + path,
+        true,
+        user,
+        encodeURIComponent(password),
+    );
+    request.onreadystatechange = function () {
+        if (request.readyState !== 4) {
+            return;
+        }
+        if (200 <= request.status && request.status < 300) {
+            on_success(request.responseText);
+        } else if (request.status === 404) {
+            if (on_not_found) {
+                on_not_found();
+            } else if (on_error) {
+                on_error("Not found");
+            } else {
+                console.error("Not found");
+            }
+        } else {
+            if (on_error) {
+                on_error(request.status + " " + request.statusText);
+            } else {
+                console.error(request.status + " " + request.statusText);
+            }
+        }
+    };
+    request.setRequestHeader("Accept", "application/json");
+    request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+    request.send(body ? JSON.stringify(body) : null);
+    return request;
 }
 
+/**
+ * @param {string} user
+ * @param {string} password
+ * @param {function():void} callback
+ */
 export function discover_server_features(user, password, callback) {
-  call_sharing_api(
-    user,
-    password,
-    "all/info",
-    {},
-    function (response) {
-      server_features["sharing"] = JSON.parse(response);
-      callback();
-    },
-    function () {
-      // sharing is disabled on the server
-      server_features["sharing"] = {};
-      callback();
-    },
-    function (error) {
-      console.error("Failed to discover sharing features: " + error);
-    },
-  );
+    call_sharing_api(
+        user,
+        password,
+        "all/info",
+        {},
+        function (response) {
+            server_features["sharing"] = JSON.parse(response);
+            callback();
+        },
+        function () {
+            // sharing is disabled on the server
+            server_features["sharing"] = {};
+            callback();
+        },
+        function (error) {
+            console.error("Failed to discover sharing features: " + error);
+        },
+    );
 }
 
+/**
+ * @param {string} user
+ * @param {string} password
+ * @param {Collection} collection
+ * @param {function(object):void} callback
+ */
 export function reload_sharing_list(user, password, collection, callback) {
-  call_sharing_api(
-    user,
-    password,
-    "all/list",
-    { PathMapped: collection.href },
-    function (response) {
-      callback(JSON.parse(response));
-    },
-  );
+    call_sharing_api(
+        user,
+        password,
+        "all/list",
+        { PathMapped: collection.href },
+        function (response) {
+            callback(JSON.parse(response));
+        },
+    );
 }
 
+/**
+ * @param {string} user
+ * @param {string} password
+ * @param {string} pathMapped
+ * @param {string} permissions
+ * @param {boolean} enabled
+ * @param {boolean} hidden
+ * @param {string} properties
+ * @param {function():void} callback
+ */
 export function add_share_by_token(
-  user,
-  password,
-  collection,
-  permissions,
-  callback,
-) {
-  call_sharing_api(
     user,
     password,
-    "token/create",
-    {
-      PathMapped: collection.href,
-      Permissions: permissions,
-    },
-    function (response) {
-        let json_response = JSON.parse(response);
-        if (json_response["Status"] !== "success") {
-            console.error("Failed to create share token: " + (json_response["Status"] || "Unknown error"));
-        } else {
-            callback();
-        }
-    },
-  );
+    pathMapped,
+    permissions,
+    enabled,
+    hidden,
+    properties,
+    callback,
+) {
+    call_sharing_api(
+        user,
+        password,
+        "token/create",
+        {
+            PathMapped: pathMapped,
+            Permissions: permissions,
+            Enabled: enabled,
+            Hidden: hidden,
+            Properties: properties,
+        },
+        function (response) {
+            let json_response = JSON.parse(response);
+            if (json_response["Status"] !== "success") {
+                console.error("Failed to create share token: " + (json_response["Status"] || "Unknown error"));
+            } else {
+                callback();
+            }
+        },
+    );
 }
 
+/**
+ * @param {string} user
+ * @param {string} password
+ * @param {string} token
+ * @param {function():void} callback
+ */
 export function delete_share_by_token(
-  user,
-  password,
-  token,
-  callback,
-) {
-  call_sharing_api(
     user,
     password,
-    "token/delete",
-    { PathOrToken: token },
-    function (response) {
-        let json_response = JSON.parse(response);
-        if (json_response["Status"] !== "success") {
-            console.error("Failed to create delete token " + token + ": " + (json_response["Status"] || "Unknown error"));
-        } else {
-            callback();
-        }
-    },
-  );
+    token,
+    callback,
+) {
+    call_sharing_api(
+        user,
+        password,
+        "token/delete",
+        { PathOrToken: token },
+        function (response) {
+            let json_response = JSON.parse(response);
+            if (json_response["Status"] !== "success") {
+                console.error("Failed to create delete token " + token + ": " + (json_response["Status"] || "Unknown error"));
+            } else {
+                callback();
+            }
+        },
+    );
 }

radicale/web/internal_data/css/main.css

@@ -44,7 +44,7 @@ main {
     width: 100%;
     text-align: left;
     color: #484848;
-    font-size: 1.5em;
+    font-size: 14pt;
 }
 
 #loginscene .infcloudlink {
@@ -405,6 +405,14 @@ input:focus-visible {
     border-width: 1px !important;
 }
 
+input[type=radio],
+input[type=checkbox] {
+    width: auto;
+    height: 1.5em;
+    padding: 0;
+    margin: 2px;
+}
+
 p.red,
 span.red {
     color: #b50202;

radicale/web/internal_data/index.html

@@ -6,244 +6,275 @@
  * Copyright © 2024-2025 Peter Bieringer <pb@bieringer.de>
 -->
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Radicale Web Interface</title>
-    <link href="css/main.css" type="text/css" media="screen" rel="stylesheet">
-    <link href="css/icon.png" type="image/png" rel="icon">
-    <style>.hidden {display: none !important;}</style>
-    <script type="module" src="main.js"></script>
-  </head>
 
-  <body>
-    <nav id="logoutview" class="hidden">
-      <span data-name="user" style="word-wrap:break-word;"></span>
-      <a href="#" class="green" data-name="refresh" title="Refresh">Refresh</a>
-      <a href="#" class="red" data-name="logout" title="Logout">Logout</a>
-    </nav>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Radicale Web Interface</title>
+  <link href="css/main.css" type="text/css" media="screen" rel="stylesheet">
+  <link href="css/icon.png" type="image/png" rel="icon">
+  <style>
+    .hidden {
+      display: none !important;
+    }
+  </style>
+  <script type="module" src="main.js"></script>
+</head>
 
-    <main>
-      <section id="loadingscene">
-        <img src="css/loading.svg" alt="Loading..." class="loading">
-        <h2>Loading</h2>
-        <p>Please wait...</p>
-        <noscript>JavaScript is required</noscript>
-      </section>
+<body>
+  <nav id="logoutview" class="hidden">
+    <span data-name="user" style="word-wrap:break-word;"></span>
+    <a href="#" class="green" data-name="refresh" title="Refresh">Refresh</a>
+    <a href="#" class="red" data-name="logout" title="Logout">Logout</a>
+  </nav>
 
-      <section id="loginscene" class="container hidden">
-        <div class="infcloudlink-hidden">
-	  <form action="infcloud/" method="get" target="_blank">
-            <button class="blue" type="submit">Collection content<br>(InfCloud web client)</button>
-	  </form>
-        </div>
-        <div class="logocontainer">
-          <img src="css/logo.svg" alt="Radicale">
-	  <br>
-	  Collection management
-        </div>
-        <h1>Sign in</h1>
+  <main>
+    <section id="loadingscene">
+      <img src="css/loading.svg" alt="Loading..." class="loading">
+      <h2>Loading</h2>
+      <p>Please wait...</p>
+      <noscript>JavaScript is required</noscript>
+    </section>
+
+    <section id="loginscene" class="container hidden">
+      <div class="infcloudlink-hidden">
+        <form action="infcloud/" method="get" target="_blank">
+          <button class="blue" type="submit">Collection content<br>(InfCloud web client)</button>
+        </form>
+      </div>
+      <div class="logocontainer">
+        <img src="css/logo.svg" alt="Radicale">
         <br>
-        <form data-name="form">
-          <input data-name="user" type="text" placeholder="Username">
-          <input data-name="password" type="password" placeholder="Password">
-          <button class="green" type="submit">Next</button>
-          <span class="error" data-name="error"></span>
-        </form>
-      </section>
+        Collection management
+      </div>
+      <h1>Sign in</h1>
+      <br>
+      <form data-name="form">
+        <input data-name="user" type="text" placeholder="Username">
+        <input data-name="password" type="password" placeholder="Password">
+        <button class="green" type="submit">Next</button>
+        <span class="error" data-name="error"></span>
+      </form>
+    </section>
 
-      <section id="collectionsscene" class="hidden">
-        <div class="fabcontainer">
-          <a href="" class="green" data-name="new" title="Create a new addressbook or calendar">
-            <img src="css/icons/new.svg" class="icon" alt="➕">
-          </a>
-          <a href="" class="blue" data-name="upload" title="Upload an addressbook or calendar">
-            <img src="css/icons/upload.svg" class="icon" alt="⬆️">
-          </a>
-        </div>
-        <article data-name="collectiontemplate" class="hidden">
-          <div class="colorbar" data-name="color"></div>
-          <h3 class="title" data-name="title">Title</h3>
-          <small>
-            <span data-name="ADDRESSBOOK">Address book</span>
-            <span data-name="CALENDAR_JOURNAL_TASKS">Calendar, journal and tasks</span>
-            <span data-name="CALENDAR_JOURNAL">Calendar and journal</span>
-            <span data-name="CALENDAR_TASKS">Calendar and tasks</span>
-            <span data-name="JOURNAL_TASKS">Journal and tasks</span>
-            <span data-name="CALENDAR">Calendar</span>
-            <span data-name="JOURNAL">Journal</span>
-            <span data-name="TASKS">Tasks</span>
-            <span data-name="WEBCAL">Webcal</span>
-          </small>
-          <small data-name="contentcount"></small>
-          <input type="text" data-name="url" value="" readonly="" onfocus="this.setSelectionRange(0, 99999);">
-          <p data-name="description" style="word-wrap:break-word;">Description</p>
-          <ul>
-            <li>
-              <a href="" title="Download" class="green" data-name="download">
-                <img src="css/icons/download.svg" class="icon" alt="🔗">
-              </a>
-            </li>
-            <li>
-              <a href="" title="Edit" class="blue" data-name="edit">
-                <img src="css/icons/edit.svg" class="icon" alt="✏️">
-              </a>
-            </li>
-            <li class="hidden" data-name="shareoption">
-              <a href="" title="Share" class="blue" data-name="share">
-                <img src="css/icons/share.svg" class="icon" alt="🔗">
-              </a>
-            </li>
-            <li>
-              <a href="" title="Delete" class="red" data-name="delete">
-                <img src="css/icons/delete.svg" class="icon" alt="❌">
-              </a>
-            </li>
-          </ul>
-        </article>
-      </section>
-
-      <section id="editcollectionscene" class="container hidden">
-        <h1>Edit Collection</h1>
-        <p>Editing collection <span class="title" data-name="title">title</span>
-        </p>
-        <form> Type: <br>
-          <select data-name="type">
-            <option value="ADDRESSBOOK">addressbook</option>
-            <option value="CALENDAR_JOURNAL_TASKS">calendar, journal and tasks</option>
-            <option value="CALENDAR_JOURNAL">calendar and journal</option>
-            <option value="CALENDAR_TASKS">calendar and tasks</option>
-            <option value="JOURNAL_TASKS">journal and tasks</option>
-            <option value="CALENDAR">calendar</option>
-            <option value="JOURNAL">journal</option>
-            <option value="TASKS">tasks</option>
-            <option value="WEBCAL">webcal</option>
-          </select>
-          <label for="displayname">Title:</label>
-          <input data-name="displayname" type="text">
-          <label for="description">Description:</label>
-          <input data-name="description" type="text">
-          <label for="source">Source:</label>
-          <input data-name="source" type="url">
-          <label for="color">Color:</label>
-          <input data-name="color" type="color">
-          <br>
-          <span class="error hidden" data-name="error"></span>
-          <br>
-          <button type="submit" class="green" data-name="submit">Save</button>
-          <button type="button" class="red" data-name="cancel">Cancel</button>
-        </form>
-        <span class="error hidden" data-name="error"></span>
-        <br>
-      </section>
-
-      <section id="sharecollectionscene" class="container hidden">
-        <h1>Sharing</h1>
-        <p>Manage sharing for collection <span class="title" data-name="title">title</span>
-        </p>
-        <h2>By Token</h2>
-        <table>
-          <tbody>
-            <tr data-name="sharetokenrowtemplate" class="hidden">
-              <td>
-              <button type="button" class="red inline" data-name="delete"><img src="css/icons/delete.svg" class="small_icon" alt="Share"></button>
-              </td>
-              <td><img
-                src="css/icons/edit.svg" class="med_icon" alt="RW" data-name="rw"/><img
-                src="css/icons/eye.svg" class="med_icon" alt="RO" data-name="ro"/></td>
-              <td><input type="text" data-name="pathortoken" value="" readonly="" onfocus="this.setSelectionRange(0, 99999);" class="inline"></td>
-            </tr>
-            <tr>
-              <td></td>
-              <td></td>
-              <td><button type="button" class="blue inline" data-name="sharebytoken_ro"><img
-                  src="css/icons/eye.svg" class="small_icon" alt="RO"><img
-                  src="css/icons/new.svg" class="badge_icon" alt="New"></button>&nbsp;
-                <button type="button" class="blue inline" data-name="sharebytoken_rw"><img
-                  src="css/icons/edit.svg" class="small_icon" alt="RW"><img
-                  src="css/icons/new.svg" class="badge_icon" alt="New"></button></td>
-            </tr>
-          </tbody>
-        </table>
-        <form>
-          <button type="button" class="green" data-name="cancel">Close</button>
-        </form>
-      </section>
-
-      <section id="createcollectionscene" class="container hidden">
-        <h1>Create a new Collection</h1>
-        <p>Enter the details of your new collection.</p>
-        <form> Type: <br>
-          <select data-name="type">
-            <option value="ADDRESSBOOK">Address book</option>
-            <option value="CALENDAR_JOURNAL_TASKS">Calendar, journal and tasks</option>
-            <option value="CALENDAR_JOURNAL">Calendar and journal</option>
-            <option value="CALENDAR_TASKS">Calendar and tasks</option>
-            <option value="JOURNAL_TASKS">Journal and tasks</option>
-            <option value="CALENDAR">Calendar</option>
-            <option value="JOURNAL">Journal</option>
-            <option value="TASKS">Tasks</option>
-            <option value="WEBCAL">Webcal</option>
-          </select>
-          <label for="href">HREF:</label>
-          <input data-name="href" type="text">
-          <label for="displayname">Title:</label>
-          <input data-name="displayname" type="text">
-          <label for="description">Description:</label>
-          <input data-name="description" type="text">
-          <label for="source">Source:</label>
-          <input data-name="source" type="url">
-          <label for="color">Color:</label>
-          <input data-name="color" type="color">
-          <br>
-          <span class="error" data-name="error"></span>
-          <br>
-          <button type="submit" class="green" data-name="submit">Create</button>
-          <button type="button" class="red" data-name="cancel">Cancel</button>
-        </form>
-        <span class="error hidden" data-name="error"></span>
-        <br>
-      </section>
-
-      <section id="uploadcollectionscene" class="container hidden">
-        <h1>Upload Collection</h1>
+    <section id="collectionsscene" class="hidden">
+      <div class="fabcontainer">
+        <a href="" class="green" data-name="new" title="Create a new addressbook or calendar">
+          <img src="css/icons/new.svg" class="icon" alt="➕">
+        </a>
+        <a href="" class="blue" data-name="upload" title="Upload an addressbook or calendar">
+          <img src="css/icons/upload.svg" class="icon" alt="⬆️">
+        </a>
+      </div>
+      <article data-name="collectiontemplate" class="hidden">
+        <div class="colorbar" data-name="color"></div>
+        <h3 class="title" data-name="title">Title</h3>
+        <small>
+          <span data-name="ADDRESSBOOK">Address book</span>
+          <span data-name="CALENDAR_JOURNAL_TASKS">Calendar, journal and tasks</span>
+          <span data-name="CALENDAR_JOURNAL">Calendar and journal</span>
+          <span data-name="CALENDAR_TASKS">Calendar and tasks</span>
+          <span data-name="JOURNAL_TASKS">Journal and tasks</span>
+          <span data-name="CALENDAR">Calendar</span>
+          <span data-name="JOURNAL">Journal</span>
+          <span data-name="TASKS">Tasks</span>
+          <span data-name="WEBCAL">Webcal</span>
+        </small>
+        <small data-name="contentcount"></small>
+        <input type="text" data-name="url" value="" readonly="" onfocus="this.setSelectionRange(0, 99999);">
+        <p data-name="description" style="word-wrap:break-word;">Description</p>
         <ul>
-          <li data-name="filetemplate" class="hidden"> Uploading <span data-name="name">name</span>
-            <br>
-            <span class="successmessage" data-name="success">Uploaded Successfully!</span>
-            <span class="error" data-name="error"></span>
+          <li>
+            <a href="" title="Download" class="green" data-name="download">
+              <img src="css/icons/download.svg" class="icon" alt="🔗">
+            </a>
+          </li>
+          <li>
+            <a href="" title="Edit" class="blue" data-name="edit">
+              <img src="css/icons/edit.svg" class="icon" alt="✏️">
+            </a>
+          </li>
+          <li class="hidden" data-name="shareoption">
+            <a href="" title="Share" class="blue" data-name="share">
+              <img src="css/icons/share.svg" class="icon" alt="🔗">
+            </a>
+          </li>
+          <li>
+            <a href="" title="Delete" class="red" data-name="delete">
+              <img src="css/icons/delete.svg" class="icon" alt="❌">
+            </a>
           </li>
         </ul>
-        <div data-name="pending" class="hidden">
-          <img src="css/loading.svg" class="loading" alt="Please wait..."/>
-        </div>
-        <form>
-          <label for="uploadfile">File:</label>
-          <input data-name="uploadfile" type="file" accept=".ics, .vcf" multiple>
-          <label for="href">HREF:</label>
-          <input data-name="href" type="text">
-          <small data-name="hreflimitmsg" class="hidden">You can only specify the HREF if you upload 1 file.</small>
-          <button type="submit" class="green" data-name="submit">Upload</button>
-          <button type="button" class="red" data-name="close">Close</button>
-        </form>
+      </article>
+    </section>
+
+    <section id="editcollectionscene" class="container hidden">
+      <h1>Edit Collection</h1>
+      <p>Editing collection <span class="title" data-name="title">title</span>
+      </p>
+      <form> Type: <br>
+        <select data-name="type">
+          <option value="ADDRESSBOOK">addressbook</option>
+          <option value="CALENDAR_JOURNAL_TASKS">calendar, journal and tasks</option>
+          <option value="CALENDAR_JOURNAL">calendar and journal</option>
+          <option value="CALENDAR_TASKS">calendar and tasks</option>
+          <option value="JOURNAL_TASKS">journal and tasks</option>
+          <option value="CALENDAR">calendar</option>
+          <option value="JOURNAL">journal</option>
+          <option value="TASKS">tasks</option>
+          <option value="WEBCAL">webcal</option>
+        </select>
+        <label for="displayname">Title:</label>
+        <input data-name="displayname" type="text">
+        <label for="description">Description:</label>
+        <input data-name="description" type="text">
+        <label for="source">Source:</label>
+        <input data-name="source" type="url">
+        <label for="color">Color:</label>
+        <input data-name="color" type="color">
+        <br>
         <span class="error hidden" data-name="error"></span>
         <br>
-      </section>
+        <button type="submit" class="green" data-name="submit">Save</button>
+        <button type="button" class="red" data-name="cancel">Cancel</button>
+      </form>
+      <span class="error hidden" data-name="error"></span>
+      <br>
+    </section>
 
-      <section id="deletecollectionscene" class="container hidden">
-        <h1>Delete Collection</h1>
-        <p>To delete the collection <span class="title" data-name="title">title</span> please enter the phrase <strong data-name="deleteconfirmationtext"></strong> in the box below:</p>
-        <input type="text" class="deleteconfirmationtxt" data-name="confirmationtxt" />
-        <p class="red">WARNING: This action cannot be reversed.</p>
-        <form>
-          <button type="button" class="red" data-name="delete">Delete</button>
-          <button type="button" class="blue" data-name="cancel">Cancel</button>
-        </form>
-        <span class="error hidden" data-name="error"></span>
+    <section id="sharecollectionscene" class="container hidden">
+      <h1>Sharing</h1>
+      <p>Manage sharing for collection <span class="title" data-name="title">title</span>
+      </p>
+      <h2>By Token</h2>
+      <table>
+        <tbody>
+          <tr data-name="sharetokenrowtemplate" class="hidden">
+            <td>
+              <button type="button" class="red inline" data-name="delete"><img src="css/icons/delete.svg"
+                  class="small_icon" alt="Share"></button>
+            </td>
+            <td><img src="css/icons/edit.svg" class="med_icon" alt="RW" data-name="rw" /><img src="css/icons/eye.svg"
+                class="med_icon" alt="RO" data-name="ro" /></td>
+            <td><input type="text" data-name="pathortoken" value="" readonly=""
+                onfocus="this.setSelectionRange(0, 99999);" class="inline"></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td><button type="button" class="blue inline" data-name="sharebytoken"><img src="css/icons/new.svg"
+                  class="small_icon" alt="New Share by Token"></button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <form>
+        <button type="button" class="green" data-name="cancel">Close</button>
+      </form>
+    </section>
+
+    <section id="newshare" class="container hidden">
+      <h1>New Share</h1>
+      <form>
+        <fieldset>
+          <legend>Attributes</legend>
+          <input type="checkbox" data-name="enabled" checked="true" id="newshare_attr_enabled" /><label
+            for="newshare_attr_enabled">Enabled</label>
+          <input type="checkbox" data-name="hidden" checked="false" id="newshare_attr_hidden" /><label
+            for="newshare_attr_hidden">Hidden</label>
+        </fieldset>
+        <fieldset>
+          <legend>Permissions</legend>
+          <input type="radio" data-name="permissions" checked="true" id="newshare_attr_permissions_ro"
+            name="newshare_permissions"><label for="newshare_attr_permissions_ro">Readonly</label>
+          <input type="radio" data-name="permissions" checked="false" id="newshare_attr_permissions_rw"
+            name="newshare_permissions" /><label for="newshare_attr_permissions_rw">Read/Write</label>
+        </fieldset>
+        <fieldset>
+          <legend>Properties override</legend>
+          <input type="text" data-name="properties" />
+        </fieldset>
+        <button type="submit" class="green" data-name="submit">Create</button>
+        <button type="button" class="red" data-name="cancel">Cancel</button>
+      </form>
+    </section>
+
+    <section id="createcollectionscene" class="container hidden">
+      <h1>Create a new Collection</h1>
+      <p>Enter the details of your new collection.</p>
+      <form> Type: <br>
+        <select data-name="type">
+          <option value="ADDRESSBOOK">Address book</option>
+          <option value="CALENDAR_JOURNAL_TASKS">Calendar, journal and tasks</option>
+          <option value="CALENDAR_JOURNAL">Calendar and journal</option>
+          <option value="CALENDAR_TASKS">Calendar and tasks</option>
+          <option value="JOURNAL_TASKS">Journal and tasks</option>
+          <option value="CALENDAR">Calendar</option>
+          <option value="JOURNAL">Journal</option>
+          <option value="TASKS">Tasks</option>
+          <option value="WEBCAL">Webcal</option>
+        </select>
+        <label for="href">HREF:</label>
+        <input data-name="href" type="text">
+        <label for="displayname">Title:</label>
+        <input data-name="displayname" type="text">
+        <label for="description">Description:</label>
+        <input data-name="description" type="text">
+        <label for="source">Source:</label>
+        <input data-name="source" type="url">
+        <label for="color">Color:</label>
+        <input data-name="color" type="color">
         <br>
-      </section>
+        <span class="error" data-name="error"></span>
+        <br>
+        <button type="submit" class="green" data-name="submit">Create</button>
+        <button type="button" class="red" data-name="cancel">Cancel</button>
+      </form>
+      <span class="error hidden" data-name="error"></span>
+      <br>
+    </section>
 
-    </main>
-  </body>
-</html>
+    <section id="uploadcollectionscene" class="container hidden">
+      <h1>Upload Collection</h1>
+      <ul>
+        <li data-name="filetemplate" class="hidden"> Uploading <span data-name="name">name</span>
+          <br>
+          <span class="successmessage" data-name="success">Uploaded Successfully!</span>
+          <span class="error" data-name="error"></span>
+        </li>
+      </ul>
+      <div data-name="pending" class="hidden">
+        <img src="css/loading.svg" class="loading" alt="Please wait..." />
+      </div>
+      <form>
+        <label for="uploadfile">File:</label>
+        <input data-name="uploadfile" type="file" accept=".ics, .vcf" multiple>
+        <label for="href">HREF:</label>
+        <input data-name="href" type="text">
+        <small data-name="hreflimitmsg" class="hidden">You can only specify the HREF if you upload 1 file.</small>
+        <button type="submit" class="green" data-name="submit">Upload</button>
+        <button type="button" class="red" data-name="close">Close</button>
+      </form>
+      <span class="error hidden" data-name="error"></span>
+      <br>
+    </section>
+
+    <section id="deletecollectionscene" class="container hidden">
+      <h1>Delete Collection</h1>
+      <p>To delete the collection <span class="title" data-name="title">title</span> please enter the phrase <strong
+          data-name="deleteconfirmationtext"></strong> in the box below:</p>
+      <input type="text" class="deleteconfirmationtxt" data-name="confirmationtxt" />
+      <p class="red">WARNING: This action cannot be reversed.</p>
+      <form>
+        <button type="button" class="red" data-name="delete">Delete</button>
+        <button type="button" class="blue" data-name="cancel">Cancel</button>
+      </form>
+      <span class="error hidden" data-name="error"></span>
+      <br>
+    </section>
+
+  </main>
+</body>
+
+</html>