Merge pull request #2022 from maxberger/master

Implement common error handling and share functionality updates

integ_tests/common.py

@@ -59,6 +59,7 @@ collection_by_map = true
 collection_by_token = true
 permit_create_token = true
 permit_create_map = true
+permit_properties_overlay = true
 
 """
         )

integ_tests/test_delete.py

@@ -0,0 +1,77 @@
+# This file is part of Radicale - CalDAV and CardDAV server
+# Copyright © 2026-2026 Max Berger <max@berger.name>
+#
+# This library 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 library 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 Radicale.  If not, see <http://www.gnu.org/licenses/>.
+
+"""
+Integration tests for delete collection scene
+"""
+
+import pathlib
+from typing import Any, Generator
+
+import pytest
+from playwright.sync_api import Page, expect
+
+from integ_tests.common import create_collection, login, start_radicale_server
+
+
+@pytest.fixture
+def radicale_server(tmp_path: pathlib.Path) -> Generator[str, Any, None]:
+    yield from start_radicale_server(tmp_path)
+
+
+def test_delete_wrong_confirmation(page: Page, radicale_server: str) -> None:
+    login(page, radicale_server)
+    create_collection(page, radicale_server)
+
+    # Open delete scene
+    page.hover("article:not(.hidden)")
+    page.click('article:not(.hidden) a[data-name="delete"]', force=True)
+
+    # Input wrong confirmation
+    page.fill('#deletecollectionscene input[data-name="confirmationtxt"]', "foo")
+    page.click('#deletecollectionscene button[data-name="delete"]')
+
+    # Check for error message
+    error_locator = page.locator('#deletecollectionscene span[data-name="error"]')
+    expect(error_locator).to_be_visible()
+    expect(error_locator).to_contain_text(
+        "Please type DELETE in the confirmation field"
+    )
+
+    # Scene should still be visible
+    expect(page.locator("#deletecollectionscene")).to_be_visible()
+
+
+def test_delete_correct_confirmation(page: Page, radicale_server: str) -> None:
+    login(page, radicale_server)
+    create_collection(page, radicale_server)
+
+    # Verify collection exists
+    expect(page.locator("article:not(.hidden)")).to_have_count(1)
+
+    # Open delete scene
+    page.hover("article:not(.hidden)")
+    page.click('article:not(.hidden) a[data-name="delete"]', force=True)
+
+    # Input correct confirmation
+    page.fill('#deletecollectionscene input[data-name="confirmationtxt"]', "DELETE")
+    page.click('#deletecollectionscene button[data-name="delete"]')
+
+    # Verify collection is gone
+    expect(page.locator("article:not(.hidden)")).to_have_count(0)
+
+    # Scene should be hidden
+    expect(page.locator("#deletecollectionscene")).to_be_hidden()

integ_tests/test_edit.py

@@ -0,0 +1,82 @@
+# This file is part of Radicale - CalDAV and CardDAV server
+# Copyright © 2026-2026 Max Berger <max@berger.name>
+#
+# This library 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 library 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 Radicale.  If not, see <http://www.gnu.org/licenses/>.
+
+"""
+Integration tests for edit collection scene
+"""
+
+import pathlib
+from typing import Any, Generator
+
+import pytest
+from playwright.sync_api import Page, expect
+
+from integ_tests.common import create_collection, login, start_radicale_server
+
+
+@pytest.fixture
+def radicale_server(tmp_path: pathlib.Path) -> Generator[str, Any, None]:
+    yield from start_radicale_server(tmp_path)
+
+
+def test_edit_save(page: Page, radicale_server: str) -> None:
+    login(page, radicale_server)
+    create_collection(page, radicale_server)
+
+    # Get original values
+    article = page.locator("article:not(.hidden)")
+
+    # Open edit scene
+    page.hover("article:not(.hidden)")
+    page.click('article:not(.hidden) a[data-name="edit"]', force=True)
+
+    # Update title and description
+    new_title = "Updated Title"
+    new_description = "Updated Description"
+    page.fill('#editcollectionscene input[data-name="displayname"]', new_title)
+    page.fill('#editcollectionscene input[data-name="description"]', new_description)
+    page.click('#editcollectionscene button[data-name="submit"]')
+
+    # Verify updates in the list
+    expect(article.locator('[data-name="title"]')).to_have_text(new_title)
+    expect(article.locator('[data-name="description"]')).to_have_text(new_description)
+
+
+def test_edit_cancel(page: Page, radicale_server: str) -> None:
+    login(page, radicale_server)
+    create_collection(page, radicale_server)
+
+    # Get original values
+    article = page.locator("article:not(.hidden)")
+    original_title = article.locator('[data-name="title"]').text_content()
+    original_description = article.locator('[data-name="description"]').text_content()
+
+    # Open edit scene
+    page.hover("article:not(.hidden)")
+    page.click('article:not(.hidden) a[data-name="edit"]', force=True)
+
+    # Update title and description but cancel
+    page.fill('#editcollectionscene input[data-name="displayname"]', "Changed Title")
+    page.fill(
+        '#editcollectionscene input[data-name="description"]', "Changed Description"
+    )
+    page.click('#editcollectionscene button[data-name="cancel"]')
+
+    # Verify values remain unchanged
+    expect(article.locator('[data-name="title"]')).to_have_text(original_title)
+    expect(article.locator('[data-name="description"]')).to_have_text(
+        original_description
+    )

integ_tests/test_sharing.py

@@ -112,3 +112,170 @@ def test_create_and_delete_share_by_map(page: Page, radicale_server: str) -> Non
     expect(
         page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden)")
     ).to_have_count(0)
+
+
+def test_share_with_property_overrides(page: Page, radicale_server: str) -> None:
+    login(page, radicale_server)
+    # Create a collection with specific details
+    page.click('a[data-name="new"]')
+    page.locator('#createcollectionscene input[data-name="displayname"]').fill(
+        "Test Collection"
+    )
+    page.locator('#createcollectionscene input[data-name="description"]').fill(
+        "Original Description"
+    )
+    page.locator('#createcollectionscene input[data-name="color"]').fill("#ff0000")
+    page.click('#createcollectionscene button[data-name="submit"]')
+
+    page.hover("article:not(.hidden)")
+    page.click('article:not(.hidden) a[data-name="share"]', force=True, strict=True)
+    page.click('button[data-name="sharebytoken"]')
+
+    # Verify defaults
+    expect(page.locator('input[data-name="description_override"]')).to_have_value(
+        "Original Description"
+    )
+    expect(page.locator('input[data-name="color_override"]')).to_have_value("#ff0000")
+    expect(page.locator('input[data-name="description_override"]')).to_be_disabled()
+    expect(page.locator('input[data-name="color_override"]')).to_be_disabled()
+
+    # Set overrides
+    page.click('label[for="newshare_attr_description_enabled"]')
+    page.locator('input[data-name="description_override"]').fill(
+        "Overridden Description"
+    )
+    page.click('label[for="newshare_attr_color_enabled"]')
+    page.locator('input[data-name="color_override"]').fill("#00ff00")
+
+    page.click('#newshare button[data-name="submit"]')
+
+    # Verify the share was created
+    expect(
+        page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden)")
+    ).to_have_count(1)
+
+
+def test_share_journal_no_overrides(page: Page, radicale_server: str) -> None:
+    login(page, radicale_server)
+    # Create a collection of type JOURNAL
+    page.click('a[data-name="new"]')
+    page.locator('#createcollectionscene select[data-name="type"]').select_option(
+        "JOURNAL"
+    )
+    page.locator('#createcollectionscene input[data-name="displayname"]').fill(
+        "Test Journal"
+    )
+    page.locator('#createcollectionscene input[data-name="description"]').fill(
+        "Journal Description"
+    )
+    page.click('#createcollectionscene button[data-name="submit"]')
+
+    page.hover("article:not(.hidden)")
+    page.click('article:not(.hidden) a[data-name="share"]', force=True, strict=True)
+    page.click('button[data-name="sharebytoken"]')
+
+    # Verify property override fieldset is hidden
+    expect(page.locator('fieldset[data-name="properties_override"]')).to_be_hidden()
+
+    # Create the share
+    page.click('#newshare button[data-name="submit"]')
+
+    # Verify the share was created
+    expect(
+        page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden)")
+    ).to_have_count(1)
+
+
+def test_edit_share_by_token(page: Page, radicale_server: str) -> None:
+    login(page, radicale_server)
+    create_collection(page, radicale_server)
+    page.hover("article:not(.hidden)")
+    page.click('article:not(.hidden) a[data-name="share"]', force=True, strict=True)
+
+    # Create RO share
+    page.click('button[data-name="sharebytoken"]')
+    page.click('#newshare button[data-name="submit"]')
+    expect(
+        page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden) img[alt='RO']")
+    ).to_be_visible()
+
+    # Edit to RW
+    page.click('tr:not(.hidden) button[data-name="edit"]')
+    expect(page.locator("#newshare h1")).to_have_text("Edit Share")
+    page.click('label[for="newshare_attr_permissions_rw"]')
+    page.click('#newshare button[data-name="submit"]')
+
+    # Verify RW
+    expect(
+        page.locator("tr[data-name='sharetokenrowtemplate']:not(.hidden) img[alt='RW']")
+    ).to_be_visible()
+
+
+def test_edit_share_by_map(page: Page, radicale_server: str) -> None:
+    login(page, radicale_server)
+    create_collection(page, radicale_server)
+    page.hover("article:not(.hidden)")
+    page.click('article:not(.hidden) a[data-name="share"]', force=True, strict=True)
+
+    # Create RO map share
+    page.click('button[data-name="sharebymap"]')
+    page.locator('input[data-name="shareuser"]').fill("max")
+    page.locator('input[data-name="sharehref"]').fill("mapped")
+    page.click('#newshare button[data-name="submit"]')
+    expect(
+        page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden) img[alt='RO']")
+    ).to_be_visible()
+
+    # Edit map share
+    page.click('tr:not(.hidden) button[data-name="edit"]')
+    expect(page.locator("#newshare h1")).to_have_text("Edit Share")
+    expect(page.locator('input[data-name="shareuser"]')).to_be_disabled()
+    expect(page.locator('input[data-name="sharehref"]')).to_be_disabled()
+
+    # Change permissions and enabled status
+    page.click('label[for="newshare_attr_permissions_rw"]')
+    page.uncheck('input[data-name="enabled"]')
+    page.click('#newshare button[data-name="submit"]')
+
+    # Verify changes
+    expect(
+        page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden) img[alt='RW']")
+    ).to_be_visible()
+    # If disabled, it might not show up or show differently, but our current UI doesn't visually distinguish enabled/disabled in the list yet
+    # Let's verify by re-opening edit scene
+    page.click('tr:not(.hidden) button[data-name="edit"]')
+    expect(page.locator('input[data-name="enabled"]')).not_to_be_checked()
+    page.click('#newshare button[data-name="cancel"]')
+
+
+def test_share_by_map_validation(page: Page, radicale_server: str) -> None:
+    login(page, radicale_server)
+    create_collection(page, radicale_server)
+    page.hover("article:not(.hidden)")
+    page.click('article:not(.hidden) a[data-name="share"]', force=True, strict=True)
+
+    page.click('button[data-name="sharebymap"]')
+
+    # Try empty user
+    page.locator('input[data-name="shareuser"]').fill("")
+    page.locator('input[data-name="sharehref"]').fill("1234")
+    page.click('#newshare button[data-name="submit"]')
+    expect(page.locator('#newshare [data-name="error"]:not(.hidden)')).to_contain_text(
+        "Share User is empty"
+    )
+
+    # Try logged in user
+    page.locator('input[data-name="shareuser"]').fill("admin")
+    page.click('#newshare button[data-name="submit"]')
+    expect(page.locator('#newshare [data-name="error"]:not(.hidden)')).to_contain_text(
+        "Share User cannot be admin"
+    )
+
+    # Valid user
+    page.locator('input[data-name="shareuser"]').fill("max")
+    page.click('#newshare button[data-name="submit"]')
+
+    # Verify success
+    expect(
+        page.locator("tr[data-name='sharemaprowtemplate']:not(.hidden)")
+    ).to_have_count(1)

integ_tests/test_upload.py

@@ -0,0 +1,119 @@
+# This file is part of Radicale - CalDAV and CardDAV server
+# Copyright © 2026-2026 Max Berger <max@berger.name>
+#
+# This library 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 library 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 Radicale.  If not, see <http://www.gnu.org/licenses/>.
+
+"""
+Integration tests for upload page
+"""
+
+import pathlib
+import re
+from typing import Any, Generator
+
+import pytest
+from playwright.sync_api import Page, expect
+
+from integ_tests.common import login, start_radicale_server
+
+
+@pytest.fixture
+def radicale_server(tmp_path: pathlib.Path) -> Generator[str, Any, None]:
+    yield from start_radicale_server(tmp_path)
+
+
+def test_upload_zero_files(page: Page, radicale_server: str) -> None:
+    login(page, radicale_server)
+    page.click('.fabcontainer a[data-name="upload"]')
+
+    # Click upload without selecting files
+    page.click('#uploadcollectionscene button[data-name="submit"]')
+
+    # Check for error message at the bottom of the scene
+    error_locator = page.locator('#uploadcollectionscene > span[data-name="error"]')
+    expect(error_locator).to_be_visible()
+    expect(error_locator).to_contain_text("Please select at least one file")
+
+
+def test_upload_one_file_custom_href(
+    page: Page, radicale_server: str, tmp_path: pathlib.Path
+) -> None:
+    login(page, radicale_server)
+
+    # Create a fake file to upload
+    test_file = tmp_path / "test.ics"
+    test_file.write_text("BEGIN:VCALENDAR\nVERSION:2.0\nEND:VCALENDAR")
+
+    page.click('.fabcontainer a[data-name="upload"]')
+
+    # Upload 1 file and set custom href
+    page.set_input_files(
+        '#uploadcollectionscene input[data-name="uploadfile"]', str(test_file)
+    )
+    page.fill('#uploadcollectionscene input[data-name="href"]', "testcollection")
+    page.click('#uploadcollectionscene button[data-name="submit"]')
+
+    # Wait for upload to complete in the list item
+    expect(
+        page.locator('#uploadcollectionscene li:not(.hidden) [data-name="success"]')
+    ).to_be_visible()
+
+    # Close scene
+    page.click('#uploadcollectionscene button[data-name="close"]')
+
+    # Verify 1 collection exists with "testcollection" in url
+    expect(page.locator("article:not(.hidden)")).to_have_count(1)
+    expect(page.locator('article:not(.hidden) input[data-name="url"]')).to_have_value(
+        re.compile(r".*testcollection/.*")
+    )
+
+
+def test_upload_two_files(
+    page: Page, radicale_server: str, tmp_path: pathlib.Path
+) -> None:
+    login(page, radicale_server)
+
+    # Create two fake files
+    file1 = tmp_path / "test1.ics"
+    file1.write_text("BEGIN:VCALENDAR\nVERSION:2.0\nEND:VCALENDAR")
+    file2 = tmp_path / "test2.ics"
+    file2.write_text("BEGIN:VCALENDAR\nVERSION:2.0\nEND:VCALENDAR")
+
+    page.click('.fabcontainer a[data-name="upload"]')
+
+    # Upload 2 files
+    page.set_input_files(
+        '#uploadcollectionscene input[data-name="uploadfile"]', [str(file1), str(file2)]
+    )
+
+    # HREF field should be hidden
+    expect(
+        page.locator('#uploadcollectionscene input[data-name="href"]')
+    ).to_be_hidden()
+    expect(
+        page.locator('#uploadcollectionscene [data-name="hreflimitmsg"]')
+    ).to_be_visible()
+
+    page.click('#uploadcollectionscene button[data-name="submit"]')
+
+    # Wait for uploads to complete
+    # Wait until 2 entries in the upload list show success
+    expect(
+        page.locator('#uploadcollectionscene li:not(.hidden) [data-name="success"]')
+    ).to_have_count(2)
+
+    # Close scene
+    page.click('#uploadcollectionscene button[data-name="close"]')
+    # Verify 2 collections exist
+    expect(page.locator("article:not(.hidden)")).to_have_count(2)

radicale/web/internal_data/css/main.css

@@ -356,13 +356,13 @@ img.loading {
 
 .error::before {
     content: "!";
-    height: 1em;
+    height: 1.4em;
     color: white;
     background: rgb(217, 48, 37);
     font-weight: bold;
     border-radius: 100%;
     display: inline-block;
-    width: 1.1em;
+    width: 1.4em;
     margin-right: 5px;
     font-size: 1em;
     text-align: center;

radicale/web/internal_data/index.html

@@ -153,17 +153,19 @@
           <tbody>
             <tr data-name="sharetokenrowtemplate" class="hidden">
               <td>
-                <button type="button" class="red inline" data-name="delete"><img src="css/icons/delete.svg"
+                <button type="button" class="blue inline" data-name="edit"><img src="css/icons/edit.svg"
-                    class="small_icon" alt="Delete"></button>
+                    class="small_icon" alt="Edit"></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>
+              <td>
+                <button type="button" class="red inline" data-name="delete"><img src="css/icons/delete.svg"
+                    class="small_icon" alt="Delete"></button>
+              </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>
@@ -177,17 +179,19 @@
           <tbody>
             <tr data-name="sharemaprowtemplate" class="hidden">
               <td>
-                <button type="button" class="red inline" data-name="delete"><img src="css/icons/delete.svg"
+                <button type="button" class="blue inline" data-name="edit"><img src="css/icons/edit.svg"
-                    class="small_icon" alt="Delete"></button>
+                    class="small_icon" alt="Edit"></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>
+              <td>
+                <button type="button" class="red inline" data-name="delete"><img src="css/icons/delete.svg"
+                    class="small_icon" alt="Delete"></button>
+              </td>
             </tr>
             <tr>
-              <td></td>
-              <td></td>
               <td>
                 <button type="button" class="blue inline" data-name="sharebymap">
                   <img src="css/icons/new.svg" class="small_icon" alt="New Share by Map">
@@ -200,6 +204,7 @@
       <form>
         <button type="button" class="green" data-name="cancel">Close</button>
       </form>
+      <span class="error hidden" data-name="error"></span>
     </section>
 
     <section id="newshare" class="container hidden">
@@ -226,13 +231,23 @@
           <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>
+        <fieldset data-name="properties_override">
           <legend>Properties override</legend>
-          <input type="text" data-name="properties" />
+          <div class="property-override">
+            <input type="checkbox" data-name="description_override_enabled" id="newshare_attr_description_enabled">
+            <label for="newshare_attr_description_enabled">Description:</label>
+            <input type="text" data-name="description_override" disabled>
+          </div>
+          <div class="property-override">
+            <input type="checkbox" data-name="color_override_enabled" id="newshare_attr_color_enabled">
+            <label for="newshare_attr_color_enabled">Color:</label>
+            <input type="color" data-name="color_override" disabled>
+          </div>
         </fieldset>
         <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>
     </section>
 
     <section id="createcollectionscene" class="container hidden">

radicale/web/internal_data/js/api/api.js

@@ -22,23 +22,7 @@
 import { COLOR_RE, ROOT_PATH, SERVER } from "../constants.js";
 import { Collection, CollectionType } from "../models/collection.js";
 import { escape_xml } from "../utils/misc.js";
-/**
- * @typedef {Object} SharingFeatures
- * @property {number} [ApiVersion]
- * @property {string} [Status]
- * @property {boolean} [FeatureEnabledCollectionByMap]
- * @property {boolean} [PermittedCreateCollectionByMap]
- * @property {boolean} [FeatureEnabledCollectionByToken]
- * @property {boolean} [PermittedCreateCollectionByToken]
- */
 
-/**
- * @typedef {Object} ServerFeatures
- * @property {SharingFeatures} [sharing]
- */
-
-/** @type {ServerFeatures} */
-export let server_features = {};
 
 /**
  * Find the principal collection.
@@ -360,267 +344,4 @@ export function create_collection(user, password, collection, callback) {
 export function edit_collection(user, password, collection, callback) {
     return create_edit_collection(user, password, collection, false, 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;
-}
-
-/**
- * @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);
-        },
-    );
-}
-
-/**
- * @typedef {Object} Share
- * @property {string} ShareType
- * @property {string} PathOrToken
- * @property {string} PathMapped
- * @property {string} Owner
- * @property {string} User
- * @property {string} Permissions
- * @property {boolean} EnabledByOwner
- * @property {boolean} EnabledByUser
- * @property {boolean} HiddenByOwner
- * @property {boolean} HiddenByUser
- * @property {number} TimestampCreated
- * @property {number} TimestampUpdated
- * @property {string} Properties
- */
-
-/**
- * @param {string} user
- * @param {string} password
- * @param {Collection} collection
- * @param {function(Array<Share>):void} callback
- */
-export function reload_sharing_list(user, password, collection, callback) {
-    call_sharing_api(
-        user,
-        password,
-        "all/list",
-        { PathMapped: collection.href },
-        function (response) {
-            let parsed = JSON.parse(response);
-            callback(parsed["Content"] || []);
-        },
-    );
-}
-
-/**
- * @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,
-    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} pathMapped
- * @param {string} permissions
- * @param {boolean} enabled
- * @param {boolean} hidden
- * @param {string} properties
- * @param {string} share_user
- * @param {string} href
- * @param {function():void} callback
- */
-export function add_share_by_map(
-    user,
-    password,
-    pathMapped,
-    permissions,
-    enabled,
-    hidden,
-    properties,
-    share_user,
-    href,
-    callback,
-) {
-    call_sharing_api(
-        user,
-        password,
-        "map/create",
-        {
-            PathMapped: pathMapped,
-            Permissions: permissions,
-            Enabled: enabled,
-            Hidden: hidden,
-            Properties: properties,
-            User: share_user,
-            PathOrToken: "/" + share_user + "/" + href,
-        },
-        function (response) {
-            let json_response = JSON.parse(response);
-            if (json_response["Status"] !== "success") {
-                console.error("Failed to create share map: " + (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();
-            }
-        },
-    );
-}
-
-/**
- * @param {string} user
- * @param {string} password
- * @param {string} pathortoken
- * @param {function():void} callback
- */
-export function delete_share_by_map(
-    user,
-    password,
-    pathortoken,
-    callback,
-) {
-    call_sharing_api(
-        user,
-        password,
-        "map/delete",
-        { PathOrToken: pathortoken },
-        function (response) {
-            let json_response = JSON.parse(response);
-            if (json_response["Status"] !== "success") {
-                console.error("Failed to delete map " + pathortoken + ": " + (json_response["Status"] || "Unknown error"));
-            } else {
-                callback();
-            }
-        },
-    );
-}

radicale/web/internal_data/js/api/sharing.js

@@ -0,0 +1,413 @@
+/**
+ * This file is part of Radicale Server - Calendar Server
+ * Copyright © 2026-2026 Max Berger <max@berger.name>
+ *
+ * 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 { ROOT_PATH, SERVER } from "../constants.js";
+import { CollectionType } from "../models/collection.js";
+
+/**
+ * @typedef {Object} SharingFeatures
+ * @property {number} [ApiVersion]
+ * @property {string} [Status]
+ * @property {boolean} [FeatureEnabledCollectionByMap]
+ * @property {boolean} [PermittedCreateCollectionByMap]
+ * @property {boolean} [FeatureEnabledCollectionByToken]
+ * @property {boolean} [PermittedCreateCollectionByToken]
+ */
+
+/**
+ * @typedef {Object} ServerFeatures
+ * @property {SharingFeatures} [sharing]
+ */
+
+/** @type {ServerFeatures} */
+export let server_features = {};
+
+/**
+ * @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;
+}
+
+/**
+ * @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);
+        },
+    );
+}
+
+export class Share {
+    /**
+     * @param {Object} [data]
+     */
+    constructor(data = {}) {
+        /** @type {string} */ this.ShareType = data.ShareType || "";
+        /** @type {string} */ this.PathOrToken = data.PathOrToken || "";
+        /** @type {string} */ this.PathMapped = data.PathMapped || "";
+        /** @type {string} */ this.Owner = data.Owner || "";
+        /** @type {string} */ this.User = data.User || "";
+        /** @type {string} */ this.Permissions = data.Permissions || "r";
+        /** @type {boolean} */ this.EnabledByOwner = data.EnabledByOwner ?? data.Enabled ?? false;
+        /** @type {?boolean} */ this.EnabledByUser = data.EnabledByUser ?? data.Enabled ?? null;
+        /** @type {boolean} */ this.HiddenByOwner = data.HiddenByOwner ?? data.Hidden ?? false;
+        /** @type {?boolean} */ this.HiddenByUser = data.HiddenByUser ?? data.Hidden ?? null;
+        /** @type {number} */ this.TimestampCreated = data.TimestampCreated || 0;
+        /** @type {number} */ this.TimestampUpdated = data.TimestampUpdated || 0;
+        /** @type {Object} */ this.Properties = data.Properties || {};
+    }
+}
+
+/**
+ * @param {string} user
+ * @param {string} password
+ * @param {import("../models/collection.js").Collection} collection
+ * @param {function(Array<Share>, ?string):void} callback
+ */
+export function reload_sharing_list(user, password, collection, callback) {
+    call_sharing_api(
+        user,
+        password,
+        "all/list",
+        { PathMapped: collection.href },
+        function (response) {
+            let parsed = JSON.parse(response);
+            let shares = (parsed["Content"] || []).map(data => new Share(data));
+            callback(shares, null);
+        },
+        null, // on_not_found
+        function (error) {
+            callback([], error);
+        }
+    );
+}
+
+/**
+ * Property keys for different collection types.
+ * Map to OVERLAY_PROPERTIES_WHITELIST in radicale/sharing/__init__.py
+ */
+export const OVERLAY_PROPERTIES = {
+    CALENDAR: {
+        DESCRIPTION: "C:calendar-description",
+        COLOR: "ICAL:calendar-color",
+    },
+    ADDRESSBOOK: {
+        DESCRIPTION: "CR:addressbook-description",
+        COLOR: "INF:addressbook-color",
+    }
+};
+
+/**
+ * Returns the correct internal property key for a given collection type and property name.
+ * @param {string} type Collection type (ADDRESSBOOK, CALENDAR, etc.)
+ * @param {"DESCRIPTION" | "COLOR"} property Property name
+ * @returns {string | null} Internal property key or null if not supported
+ */
+export function get_property_key(type, property) {
+    if (type === CollectionType.ADDRESSBOOK) {
+        return OVERLAY_PROPERTIES.ADDRESSBOOK[property];
+    } else if (CollectionType.is_subset(CollectionType.CALENDAR, type)) {
+        return OVERLAY_PROPERTIES.CALENDAR[property];
+    }
+    return null;
+}
+
+/**
+ * @param {string} user
+ * @param {string} password
+ * @param {Share} share
+ * @param {function(?string):void} callback
+ */
+export function add_share_by_token(
+    user,
+    password,
+    share,
+    callback,
+) {
+    call_sharing_api(
+        user,
+        password,
+        "token/create",
+        {
+            PathMapped: share.PathMapped,
+            Permissions: share.Permissions,
+            Enabled: share.EnabledByOwner,
+            Hidden: share.HiddenByOwner,
+            Properties: share.Properties,
+        },
+        function (response) {
+            let json_response = JSON.parse(response);
+            if (json_response["Status"] !== "success") {
+                callback(json_response["Status"] || "Unknown error");
+            } else {
+                callback(null);
+            }
+        },
+        null,
+        function (error) {
+            callback(error);
+        }
+    );
+}
+
+/**
+ * @param {string} user
+ * @param {string} password
+ * @param {Share} share
+ * @param {function(?string):void} callback
+ */
+export function add_share_by_map(
+    user,
+    password,
+    share,
+    callback,
+) {
+    call_sharing_api(
+        user,
+        password,
+        "map/create",
+        {
+            PathMapped: share.PathMapped,
+            Permissions: share.Permissions,
+            Enabled: share.EnabledByOwner,
+            Hidden: share.HiddenByOwner,
+            Properties: share.Properties,
+            User: share.User,
+            PathOrToken: share.PathOrToken,
+        },
+        function (response) {
+            let json_response = JSON.parse(response);
+            if (json_response["Status"] !== "success") {
+                callback(json_response["Status"] || "Unknown error");
+            } else {
+                callback(null);
+            }
+        },
+        null,
+        function (error) {
+            callback(error);
+        }
+    );
+}
+
+/**
+ * @param {string} user
+ * @param {string} password
+ * @param {Share} share
+ * @param {function(?string):void} callback
+ */
+export function delete_share_by_token(
+    user,
+    password,
+    share,
+    callback,
+) {
+    call_sharing_api(
+        user,
+        password,
+        "token/delete",
+        { PathOrToken: share.PathOrToken },
+        function (response) {
+            let json_response = JSON.parse(response);
+            if (json_response["Status"] !== "success") {
+                callback(json_response["Status"] || "Unknown error");
+            } else {
+                callback(null);
+            }
+        },
+        null,
+        function (error) {
+            callback(error);
+        }
+    );
+}
+
+/**
+ * @param {string} user
+ * @param {string} password
+ * @param {Share} share
+ * @param {function(?string):void} callback
+ */
+export function delete_share_by_map(
+    user,
+    password,
+    share,
+    callback,
+) {
+    call_sharing_api(
+        user,
+        password,
+        "map/delete",
+        { PathOrToken: share.PathOrToken },
+        function (response) {
+            let json_response = JSON.parse(response);
+            if (json_response["Status"] !== "success") {
+                callback(json_response["Status"] || "Unknown error");
+            } else {
+                callback(null);
+            }
+        },
+        null,
+        function (error) {
+            callback(error);
+        }
+    );
+}
+/**
+ * @param {string} user
+ * @param {string} password
+ * @param {Share} share
+ * @param {function(?string):void} callback
+ */
+export function update_share_by_token(
+    user,
+    password,
+    share,
+    callback,
+) {
+    call_sharing_api(
+        user,
+        password,
+        "token/update",
+        {
+            PathOrToken: share.PathOrToken,
+            Permissions: share.Permissions,
+            Enabled: share.EnabledByOwner,
+            Hidden: share.HiddenByOwner,
+            Properties: share.Properties,
+        },
+        function (response) {
+            let json_response = JSON.parse(response);
+            if (json_response["Status"] !== "success") {
+                callback(json_response["Status"] || "Unknown error");
+            } else {
+                callback(null);
+            }
+        },
+        null,
+        function (error) {
+            callback(error);
+        }
+    );
+}
+
+/**
+ * @param {string} user
+ * @param {string} password
+ * @param {Share} share
+ * @param {function(?string):void} callback
+ */
+export function update_share_by_map(
+    user,
+    password,
+    share,
+    callback,
+) {
+    call_sharing_api(
+        user,
+        password,
+        "map/update",
+        {
+            PathOrToken: share.PathOrToken,
+            PathMapped: share.PathMapped,
+            User: share.User,
+            Permissions: share.Permissions,
+            Enabled: share.EnabledByOwner,
+            Hidden: share.HiddenByOwner,
+            Properties: share.Properties,
+        },
+        function (response) {
+            let json_response = JSON.parse(response);
+            if (json_response["Status"] !== "success") {
+                callback(json_response["Status"] || "Unknown error");
+            } else {
+                callback(null);
+            }
+        },
+        null,
+        function (error) {
+            callback(error);
+        }
+    );
+}

radicale/web/internal_data/js/scenes/CollectionsScene.js

@@ -19,7 +19,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { discover_server_features, get_collections } from "../api/api.js";
+import { get_collections } from "../api/api.js";
+import { discover_server_features } from "../api/sharing.js";
+
 import { SERVER } from "../constants.js";
 import { Collection, CollectionType } from "../models/collection.js";
 import { bytesToHumanReadable } from "../utils/misc.js";

radicale/web/internal_data/js/scenes/CreateEditCollectionScene.js

@@ -22,7 +22,9 @@
 import { create_collection, edit_collection } from "../api/api.js";
 import { COLOR_RE } from "../constants.js";
 import { Collection, CollectionType } from "../models/collection.js";
-import { cleanHREFinput, isValidHREF, onCleanHREFinput, random_hex, random_uuid } from "../utils/misc.js";
+import { ErrorHandler } from "../utils/error.js";
+import { FormValidator, validate_color, validate_href } from "../utils/form_validator.js";
+import { cleanHREFinput, onCleanHREFinput, random_hex, random_uuid } from "../utils/misc.js";
 import { LoadingScene } from "./LoadingScene.js";
 import { Scene, pop_scene, push_scene, scene_stack } from "./scene_manager.js";
 
@@ -55,9 +57,16 @@ export class CreateEditCollectionScene {
 
         /** @type {?number} */ let scene_index = null;
         /** @type {?XMLHttpRequest} */ let create_edit_req = null;
-        let error = "";
         /** @type {?HTMLSelectElement} */ let saved_type_form = null;
 
+        let errorHandler = new ErrorHandler(error_form);
+        let validator = new FormValidator(errorHandler);
+
+        if (!edit) {
+            validator.addValidator(href_form, validate_href(href_form, "HREF"));
+        }
+        validator.addValidator(color_form, validate_color(color_form, "Color"));
+
         let href = edit ? collection.href : collection.href + random_uuid() + "/";
         let displayname = edit ? collection.displayname : "";
         let description = edit ? collection.description : "";
@@ -87,10 +96,6 @@ export class CreateEditCollectionScene {
             if (!edit) {
                 cleanHREFinput(href_form);
                 let newhreftxtvalue = href_form.value.trim().toLowerCase();
-                if (!isValidHREF(newhreftxtvalue)) {
-                    alert("You must enter a valid HREF");
-                    return false;
-                }
                 href = collection.href + newhreftxtvalue + "/";
             }
             displayname = displayname_form.value;
@@ -110,29 +115,19 @@ export class CreateEditCollectionScene {
             source_form.value = source;
             type_form.value = type;
             color_form.value = color;
-            if (error) {
-                error_form.textContent = "Error: " + error;
-                error_form.classList.remove("hidden");
-            }
-            error_form.classList.add("hidden");
             onTypeChange(null);
             type_form.addEventListener("change", onTypeChange);
         }
 
         function onsubmit() {
             try {
-                if (!read_form()) {
+                if (!validator.validate()) {
                     return false;
                 }
+                read_form();
                 let sane_color = color.trim();
                 if (sane_color) {
-                    let color_match = COLOR_RE.exec(sane_color);
+                    sane_color = COLOR_RE.exec(sane_color)[1];
-                    if (!color_match) {
-                        error = "Invalid color";
-                        fill_form();
-                        return false;
-                    }
-                    sane_color = color_match[1];
                 }
                 let loading_scene = new LoadingScene();
                 push_scene(loading_scene, false);
@@ -143,7 +138,7 @@ export class CreateEditCollectionScene {
                     }
                     create_edit_req = null;
                     if (error1) {
-                        error = error1;
+                        errorHandler.setError(error1);
                         pop_scene(scene_index);
                     } else {
                         pop_scene(scene_index - 1);
@@ -197,12 +192,7 @@ export class CreateEditCollectionScene {
             fill_form();
             submit_btn.onclick = onsubmit;
             cancel_btn.onclick = oncancel;
-            if (error) {
+            validator.validate();
-                error_form.textContent = "Error: " + error;
-                error_form.classList.remove("hidden");
-            } else {
-                error_form.classList.add("hidden");
-            }
         };
         this.hide = function () {
             read_form();

radicale/web/internal_data/js/scenes/CreateEditShareScene.js

@@ -0,0 +1,238 @@
+/**
+ * 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>
+ * Copyright © 2026-2026 Max Berger <max@berger.name>
+ *
+ * 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 { Share, add_share_by_map, add_share_by_token, get_property_key, update_share_by_map, update_share_by_token } from "../api/sharing.js";
+import { CollectionType } from "../models/collection.js";
+import { ErrorHandler } from "../utils/error.js";
+import { FormValidator, validate_href, validate_not_empty_or_equals } from "../utils/form_validator.js";
+import { onCleanHREFinput, random_uuid } from "../utils/misc.js";
+import { Scene, pop_scene, scene_stack } from "./scene_manager.js";
+
+/**
+ * @implements {Scene}
+ */
+export class CreateEditShareScene {
+    /**
+     * @param {string} user
+     * @param {string} password
+     * @param {import("../models/collection.js").Collection} collection
+     * @param {string} shareType
+     * @param {function():void} onclose
+     * @param {Share} [share] If provided, the scene will be in edit mode.
+     */
+    constructor(user, password, collection, shareType, onclose, share) {
+        let edit = !!share;
+        let pathMapped = collection.href;
+        /** @type {HTMLElement} */ let html_scene = document.getElementById("newshare");
+        /** @type {HTMLFormElement} */ let form = html_scene.querySelector("form");
+        /** @type {HTMLElement} */ let sharemapfields = html_scene.querySelector("[data-name=sharemapfields]");
+        /** @type {HTMLInputElement} */ let shareuser_input = html_scene.querySelector("[data-name=shareuser]");
+        /** @type {HTMLInputElement} */ let sharehref_input = html_scene.querySelector("[data-name=sharehref]");
+        /** @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 {HTMLElement} */ let properties_fieldset = html_scene.querySelector("[data-name=properties_override]");
+        /** @type {HTMLInputElement} */ let description_override_enabled = html_scene.querySelector("[data-name=description_override_enabled]");
+        /** @type {HTMLInputElement} */ let description_override_input = html_scene.querySelector("[data-name=description_override]");
+        /** @type {HTMLInputElement} */ let color_override_enabled = html_scene.querySelector("[data-name=color_override_enabled]");
+        /** @type {HTMLInputElement} */ let color_override_input = html_scene.querySelector("[data-name=color_override]");
+
+        /** @type {HTMLElement} */ let error_form = html_scene.querySelector("[data-name=error]");
+        /** @type {HTMLElement} */ let submit_btn = html_scene.querySelector("[data-name=submit]");
+        /** @type {HTMLElement} */ let cancel_btn = html_scene.querySelector("[data-name=cancel]");
+
+        let errorHandler = new ErrorHandler(error_form);
+        let map_validator = new FormValidator(errorHandler);
+
+        map_validator.addValidator(shareuser_input, validate_not_empty_or_equals(shareuser_input, user, "Share User"));
+        map_validator.addValidator(sharehref_input, validate_href(sharehref_input, "Share Href"));
+
+        sharehref_input.addEventListener("input", onCleanHREFinput);
+
+        description_override_enabled.onchange = function () {
+            description_override_input.disabled = !description_override_enabled.checked;
+        };
+        color_override_enabled.onchange = function () {
+            color_override_input.disabled = !color_override_enabled.checked;
+        };
+
+        /** @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 {
+                if (shareType === "map") {
+                    if (!map_validator.validate()) {
+                        return false;
+                    }
+                }
+                let enabled_by_owner = enabled_checkbox.checked;
+                let hidden_by_owner = hidden_checkbox.checked;
+                let permissions = permissions_rw_radio.checked ? "rw" : "r";
+
+                let properties = {};
+                if (description_override_enabled.checked) {
+                    let key = get_property_key(collection.type, "DESCRIPTION");
+                    if (key) properties[key] = description_override_input.value;
+                }
+                if (color_override_enabled.checked) {
+                    let key = get_property_key(collection.type, "COLOR");
+                    if (key) properties[key] = color_override_input.value + (color_override_input.value ? "ff" : "");
+                }
+
+                let callback = function (/** @type {string} */ error) {
+                    if (scene_index === null) {
+                        return;
+                    }
+                    if (error) {
+                        errorHandler.setError(error);
+                    } else {
+                        pop_scene(scene_index - 1);
+                        if (onclose) onclose();
+                    }
+                };
+
+                let new_share = new Share({
+                    ShareType: shareType,
+                    PathMapped: pathMapped,
+                    Permissions: permissions,
+                    EnabledByOwner: enabled_by_owner,
+                    EnabledByUser: edit ? share.EnabledByUser : null,
+                    HiddenByOwner: hidden_by_owner,
+                    HiddenByUser: edit ? share.HiddenByUser : null,
+                    Properties: properties,
+                    User: edit ? share.User : shareuser_input.value,
+                    PathOrToken: edit ? share.PathOrToken : (shareType === "map" ? "/" + shareuser_input.value + "/" + sharehref_input.value + "/" : ""),
+                });
+
+                if (edit) {
+                    if (shareType === "map") {
+                        update_share_by_map(user, password, new_share, callback);
+                    } else {
+                        update_share_by_token(user, password, new_share, callback);
+                    }
+                } else {
+                    if (shareType === "map") {
+                        add_share_by_map(user, password, new_share, callback);
+                    } else {
+                        add_share_by_token(user, password, new_share, callback);
+                    }
+                }
+            } 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;
+
+            html_scene.querySelector("h1").textContent = edit ? "Edit Share" : "New Share";
+            submit_btn.textContent = edit ? "Save" : "Create";
+
+            shareuser_input.value = edit ? share.User : "";
+            shareuser_input.disabled = edit;
+            enabled_checkbox.checked = edit ? share.EnabledByOwner : true;
+            hidden_checkbox.checked = edit ? share.HiddenByOwner : false;
+            permissions_ro_radio.checked = edit ? share.Permissions.toLowerCase() === "r" : true;
+            permissions_rw_radio.checked = edit ? share.Permissions.toLowerCase() === "rw" : false;
+
+            let description = collection.description || "";
+            let color = collection.color || "#ffffff";
+            let description_override_enabled_value = false;
+            let color_override_enabled_value = false;
+
+            if (edit && share.Properties) {
+                let description_key = get_property_key(collection.type, "DESCRIPTION");
+                if (description_key && share.Properties[description_key]) {
+                    description = share.Properties[description_key];
+                    description_override_enabled_value = true;
+                }
+                let color_key = get_property_key(collection.type, "COLOR");
+                if (color_key && share.Properties[color_key]) {
+                    color = share.Properties[color_key];
+                    if (color.length === 9 && color.endsWith("ff")) {
+                        color = color.substring(0, 7);
+                    }
+                    color_override_enabled_value = true;
+                }
+            }
+
+            description_override_enabled.checked = description_override_enabled_value;
+            description_override_input.value = description;
+            description_override_input.disabled = !description_override_enabled_value;
+
+            color_override_enabled.checked = color_override_enabled_value;
+            color_override_input.value = color;
+            color_override_input.disabled = !color_override_enabled_value;
+
+            let is_calendar = CollectionType.is_subset(CollectionType.CALENDAR, collection.type);
+            let is_addressbook = collection.type === CollectionType.ADDRESSBOOK;
+            if (is_calendar || is_addressbook) {
+                properties_fieldset.classList.remove("hidden");
+            } else {
+                properties_fieldset.classList.add("hidden");
+            }
+
+            if (shareType === "map") {
+                if (edit) {
+                    sharehref_input.value = share.PathOrToken.split("/").filter(Boolean).pop() || "";
+                } else {
+                    sharehref_input.value = random_uuid();
+                }
+                sharehref_input.disabled = edit;
+                sharemapfields.classList.remove("hidden");
+                map_validator.validate();
+            } else {
+                sharehref_input.value = "";
+                sharemapfields.classList.add("hidden");
+                errorHandler.clearError();
+            }
+        };
+
+        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/js/scenes/DeleteCollectionScene.js

@@ -22,16 +22,20 @@
 import { delete_collection } from "../api/api.js";
 import { DELETE_CONFIRMATION_TEXT } from "../constants.js";
 import { Collection } from "../models/collection.js";
+import { ErrorHandler } from "../utils/error.js";
+import { FormValidator, validate_equals } from "../utils/form_validator.js";
 import { LoadingScene } from "./LoadingScene.js";
 import { Scene, pop_scene, push_scene, scene_stack } from "./scene_manager.js";
 
 /**
  * @implements {Scene}
- * @param {string} user
- * @param {string} password
- * @param {Collection} collection
  */
 export class DeleteCollectionScene {
+    /**
+     * @param {string} user
+     * @param {string} password
+     * @param {Collection} collection
+     */
     constructor(user, password, collection) {
         /** @type {HTMLElement} */ let html_scene = document.getElementById("deletecollectionscene");
         /** @type {HTMLElement} */ let title_form = html_scene.querySelector("[data-name=title]");
@@ -47,13 +51,15 @@ export class DeleteCollectionScene {
 
         /** @type {?number} */ let scene_index = null;
         /** @type {?XMLHttpRequest} */ let delete_req = null;
-        let error = "";
+
+        let errorHandler = new ErrorHandler(error_form);
+        let validator = new FormValidator(errorHandler);
+
+        validator.addValidator(confirmation_txt, validate_equals(confirmation_txt, DELETE_CONFIRMATION_TEXT, "confirmation"));
 
         function ondelete() {
-            let confirmation_text_value = confirmation_txt.value;
+            if (!validator.validate()) {
-            if (confirmation_text_value != DELETE_CONFIRMATION_TEXT) {
+                return false;
-                alert("Please type the confirmation text to delete this collection.");
-                return;
             }
             try {
                 let loading_scene = new LoadingScene();
@@ -63,8 +69,9 @@ export class DeleteCollectionScene {
                         return;
                     }
                     delete_req = null;
+                    delete_req = null;
                     if (error1) {
-                        error = error1;
+                        errorHandler.setError(error1);
                         pop_scene(scene_index);
                     } else {
                         pop_scene(scene_index - 1);
@@ -99,13 +106,7 @@ export class DeleteCollectionScene {
             title_form.textContent = collection.displayname || collection.href;
             delete_btn.onclick = ondelete;
             cancel_btn.onclick = oncancel;
-            if (error) {
+            validator.validate();
-                error_form.textContent = "Error: " + error;
-                error_form.classList.remove("hidden");
-            } else {
-                error_form.classList.add("hidden");
-            }
-
         };
         this.hide = function () {
             html_scene.classList.add("hidden");

radicale/web/internal_data/js/scenes/LoginScene.js

@@ -23,7 +23,8 @@ import { get_principal } from "../api/api.js";
 import { CollectionsScene } from "./CollectionsScene.js";
 import { LoadingScene } from "./LoadingScene.js";
 import { Scene, pop_scene, push_scene, scene_stack } from "./scene_manager.js";
-
+import { ErrorHandler } from "../utils/error.js";
+import { FormValidator, validate_non_empty } from "../utils/form_validator.js";
 /**
  * @constructor
  * @implements {Scene}
@@ -42,8 +43,10 @@ export class LoginScene {
 
         /** @type {?number} */ let scene_index = null;
         let user = "";
-        let error = "";
         /** @type {?XMLHttpRequest} */ let principal_req = null;
+        let errorHandler = new ErrorHandler(error_form);
+        let validator = new FormValidator(errorHandler);
+        validator.addValidator(user_form, validate_non_empty(user_form, "Username"));
 
         function read_form() {
             user = user_form.value;
@@ -52,52 +55,43 @@ export class LoginScene {
         function fill_form() {
             user_form.value = user;
             password_form.value = "";
-            if (error) {
-                error_form.textContent = "Error: " + error;
-                error_form.classList.remove("hidden");
-            } else {
-                error_form.classList.add("hidden");
-            }
         }
 
         function onlogin() {
             try {
                 read_form();
                 let password = password_form.value;
-                if (user) {
+                if (!validator.validate()) {
-                    error = "";
+                    return false;
-                    // setup logout
-                    logout_view.classList.remove("hidden");
-                    logout_btn.onclick = onlogout;
-                    refresh_btn.onclick = refresh;
-                    logout_user_form.textContent = user + "'s Collections";
-                    // Fetch principal
-                    let loading_scene = new LoadingScene();
-                    push_scene(loading_scene, false);
-                    principal_req = get_principal(user, password, function (collection, error1) {
-                        if (scene_index === null) {
-                            return;
-                        }
-                        principal_req = null;
-                        if (error1) {
-                            error = error1;
-                            pop_scene(scene_index);
-                        } else {
-                            // show collections
-                            let saved_user = user;
-                            user = "";
-                            let collections_scene = new CollectionsScene(
-                                saved_user, password, collection, function (error1) {
-                                    error = error1;
-                                    user = saved_user;
-                                });
-                            push_scene(collections_scene, true);
-                        }
-                    });
-                } else {
-                    error = "Username is empty";
-                    fill_form();
                 }
+                // setup logout
+                logout_view.classList.remove("hidden");
+                logout_btn.onclick = onlogout;
+                refresh_btn.onclick = refresh;
+                logout_user_form.textContent = user + "'s Collections";
+                // Fetch principal
+                let loading_scene = new LoadingScene();
+                push_scene(loading_scene, false);
+                principal_req = get_principal(user, password, function (collection, error1) {
+                    if (scene_index === null) {
+                        return;
+                    }
+                    principal_req = null;
+                    if (error1) {
+                        errorHandler.setError(error1);
+                        pop_scene(scene_index);
+                    } else {
+                        // show collections
+                        let saved_user = user;
+                        user = "";
+                        let collections_scene = new CollectionsScene(
+                            saved_user, password, collection, function (error1) {
+                                errorHandler.setError(error1);
+                                user = saved_user;
+                            });
+                        push_scene(collections_scene, true);
+                    }
+                });
             } catch (err) {
                 console.error(err);
             }
@@ -117,6 +111,7 @@ export class LoginScene {
             return false;
         }
 
+
         function remove_logout() {
             logout_view.classList.add("hidden");
             logout_btn.onclick = null;

radicale/web/internal_data/js/scenes/NewShareScene.js

@@ -1,125 +0,0 @@
-/**
- * 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>
- * Copyright © 2026-2026 Max Berger <max@berger.name>
- *
- * 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_map, add_share_by_token } from "../api/api.js";
-import { onCleanHREFinput } from "../utils/misc.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 {string} shareType
-     * @param {function():void} onclose
-     */
-    constructor(user, password, pathMapped, shareType, onclose) {
-        /** @type {HTMLElement} */ let html_scene = document.getElementById("newshare");
-        /** @type {HTMLFormElement} */ let form = html_scene.querySelector("form");
-        /** @type {HTMLElement} */ let sharemapfields = html_scene.querySelector("[data-name=sharemapfields]");
-        /** @type {HTMLInputElement} */ let shareuser_input = html_scene.querySelector("[data-name=shareuser]");
-        /** @type {HTMLInputElement} */ let sharehref_input = html_scene.querySelector("[data-name=sharehref]");
-        /** @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]");
-
-        sharehref_input.addEventListener("input", onCleanHREFinput);
-
-        /** @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;
-
-                let callback = function () {
-                    if (scene_index !== null) {
-                        pop_scene(scene_index - 1);
-                    }
-                    if (onclose) onclose();
-                };
-
-                if (shareType === "map") {
-                    let share_user = shareuser_input.value;
-                    let href = sharehref_input.value;
-                    add_share_by_map(user, password, pathMapped, permissions, enabled, hidden, properties, share_user, href, callback);
-                } else {
-                    add_share_by_token(user, password, pathMapped, permissions, enabled, hidden, properties, callback);
-                }
-            } 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;
-
-            if (shareType === "map") {
-                sharemapfields.classList.remove("hidden");
-            } else {
-                sharemapfields.classList.add("hidden");
-            }
-
-            shareuser_input.value = "";
-            sharehref_input.value = "";
-            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/js/scenes/ShareCollectionScene.js

@@ -24,9 +24,10 @@ import {
   delete_share_by_token,
   reload_sharing_list,
   server_features,
-} from "../api/api.js";
+} from "../api/sharing.js";
 import { Collection } from "../models/collection.js";
-import { NewShareScene } from "./NewShareScene.js";
+import { ErrorHandler } from "../utils/error.js";
+import { CreateEditShareScene } from "./CreateEditShareScene.js";
 import { Scene, pop_scene, push_scene, scene_stack } from "./scene_manager.js";
 
 /**
@@ -56,8 +57,11 @@ export class ShareCollectionScene {
     /** @type {HTMLElement} */ let share_by_map_div = html_scene.querySelector(
       "div[data-name=sharebymap]"
     );
+    /** @type {HTMLElement} */ let error_form = html_scene.querySelector("[data-name=error]");
 
-        /** @type {HTMLElement} */ let title = html_scene.querySelector("[data-name=title]");
+    let errorHandler = new ErrorHandler(error_form);
+
+    /** @type {HTMLElement} */ let title = html_scene.querySelector("[data-name=title]");
 
     function oncancel() {
       try {
@@ -69,17 +73,17 @@ export class ShareCollectionScene {
     }
 
     function onsharebytoken() {
-      let new_share_scene = new NewShareScene(user, password, collection.href, "token", function () {
+      let create_edit_share_scene = new CreateEditShareScene(user, password, collection, "token", function () {
-        update_share_list(user, password, collection);
+        update_share_list(user, password, collection, errorHandler);
       });
-      push_scene(new_share_scene, false);
+      push_scene(create_edit_share_scene, false);
     }
 
     function onsharebymap() {
-      let new_share_scene = new NewShareScene(user, password, collection.href, "map", function () {
+      let create_edit_share_scene = new CreateEditShareScene(user, password, collection, "map", function () {
-        update_share_list(user, password, collection);
+        update_share_list(user, password, collection, errorHandler);
       });
-      push_scene(new_share_scene, false);
+      push_scene(create_edit_share_scene, false);
     }
 
     this.show = function () {
@@ -118,7 +122,7 @@ export class ShareCollectionScene {
       }
 
       title.textContent = collection.displayname || collection.href;
-      update_share_list(user, password, collection);
+      update_share_list(user, password, collection, errorHandler);
     };
     this.hide = function () {
       html_scene.classList.add("hidden");
@@ -134,8 +138,9 @@ export class ShareCollectionScene {
  * @param {string} user
  * @param {string} password
  * @param {Collection} collection
+ * @param {ErrorHandler} errorHandler
  */
-function update_share_list(user, password, collection) {
+function update_share_list(user, password, collection, errorHandler) {
   let share_rows = document.querySelectorAll(
     "[data-name=sharetokenrowtemplate], [data-name=sharemaprowtemplate]",
   );
@@ -145,8 +150,12 @@ function update_share_list(user, password, collection) {
     }
   });
 
-  reload_sharing_list(user, password, collection, function (shares) {
+  reload_sharing_list(user, password, collection, function (shares, error) {
-    add_share_rows(user, password, collection, shares);
+    if (error) {
+      errorHandler.setError(error);
+    } else {
+      add_share_rows(user, password, collection, shares, errorHandler);
+    }
   });
 }
 
@@ -155,12 +164,13 @@ function update_share_list(user, password, collection) {
  * @param {string} user 
  * @param {string} password 
  * @param {Collection} collection 
- * @param {import('../api/api.js').Share} share 
+ * @param {import('../api/sharing.js').Share} share 
  * @param {HTMLElement} template 
  * @param {string} delete_label 
- * @param {function(string, string, string, function():void):void} delete_action 
+ * @param {function(string, string, import('../api/sharing.js').Share, function(?string):void):void} delete_action 
+ * @param {ErrorHandler} errorHandler
  */
-function add_share_row_node(user, password, collection, share, template, delete_label, delete_action) {
+function add_share_row_node(user, password, collection, share, template, delete_label, delete_action, errorHandler) {
   let pathortoken = share["PathOrToken"] || "";
   let node = /** @type {HTMLElement} */ (template.cloneNode(true));
   node.classList.remove("hidden");
@@ -183,6 +193,14 @@ function add_share_row_node(user, password, collection, share, template, delete_
     console.warn("Unknown permissions", permissions);
   }
 
+  /** @type {HTMLElement} */ let edit_btn = node.querySelector("[data-name=edit]");
+  edit_btn.onclick = function () {
+    let create_edit_share_scene = new CreateEditShareScene(user, password, collection, share.ShareType, function () {
+      update_share_list(user, password, collection, errorHandler);
+    }, share);
+    push_scene(create_edit_share_scene, false);
+  };
+
   /** @type {HTMLElement} */ let delete_btn = node.querySelector("[data-name=delete]");
   delete_btn.onclick = function () {
     if (!confirm("Are you sure you want to delete " + delete_label + " " + pathortoken + "?")) {
@@ -191,9 +209,13 @@ function add_share_row_node(user, password, collection, share, template, delete_
     delete_action(
       user,
       password,
-      pathortoken,
+      share,
-      function () {
+      function (error) {
-        update_share_list(user, password, collection);
+        if (error) {
+          errorHandler.setError(error);
+        } else {
+          update_share_list(user, password, collection, errorHandler);
+        }
       },
     );
   };
@@ -205,9 +227,10 @@ function add_share_row_node(user, password, collection, share, template, delete_
  * @param {string} user 
  * @param {string} password 
  * @param {Collection} collection 
- * @param {Array<import('../api/api.js').Share>} shares 
+ * @param {Array<import('../api/sharing.js').Share>} shares 
+ * @param {ErrorHandler} errorHandler
  */
-function add_share_rows(user, password, collection, shares) {
+function add_share_rows(user, password, collection, shares, errorHandler) {
   /** @type {HTMLElement} */ let token_template = document.querySelector("[data-name=sharetokenrowtemplate]");
   /** @type {HTMLElement} */ let map_template = document.querySelector("[data-name=sharemaprowtemplate]");
   shares.forEach(function (share) {
@@ -218,9 +241,9 @@ function add_share_rows(user, password, collection, shares) {
       collection.href.includes(pathortoken)
     ) {
       if (share["ShareType"] === "token") {
-        add_share_row_node(user, password, collection, share, token_template, "share", delete_share_by_token);
+        add_share_row_node(user, password, collection, share, token_template, "share", delete_share_by_token, errorHandler);
       } else if (share["ShareType"] === "map") {
-        add_share_row_node(user, password, collection, share, map_template, "map", delete_share_by_map);
+        add_share_row_node(user, password, collection, share, map_template, "map", delete_share_by_map, errorHandler);
       }
     }
   });

radicale/web/internal_data/js/scenes/UploadCollectionScene.js

@@ -21,7 +21,9 @@
 
 import { upload_collection } from "../api/api.js";
 import { Collection } from "../models/collection.js";
-import { cleanHREFinput, isValidHREF, onCleanHREFinput, random_uuid } from "../utils/misc.js";
+import { ErrorHandler } from "../utils/error.js";
+import { FormValidator, validate_files, validate_href } from "../utils/form_validator.js";
+import { cleanHREFinput, onCleanHREFinput, random_uuid } from "../utils/misc.js";
 import { Scene, pop_scene, scene_stack } from "./scene_manager.js";
 
 /**
@@ -44,6 +46,7 @@ export class UploadCollectionScene {
         /** @type {HTMLElement} */ let href_label = html_scene.querySelector("label[for=href]");
         /** @type {HTMLElement} */ let hreflimitmsg_html = html_scene.querySelector("[data-name=hreflimitmsg]");
         /** @type {HTMLElement} */ let pending_html = html_scene.querySelector("[data-name=pending]");
+        /** @type {HTMLElement} */ let error_form = html_scene.querySelector(":scope > span[data-name=error]");
 
         let files = uploadfile_form.files;
         href_form.addEventListener("input", onCleanHREFinput);
@@ -53,6 +56,12 @@ export class UploadCollectionScene {
         href_form.value = "";
         let href = "";
 
+        let errorHandler = new ErrorHandler(error_form);
+        let validator = new FormValidator(errorHandler);
+
+        validator.addValidator(href_form, validate_href(href_form, "HREF"));
+        validator.addValidator(uploadfile_form, validate_files(uploadfile_form, "file"));
+
         /** @type {?number} */ let scene_index = null;
         /** @type {?XMLHttpRequest} */ let upload_req = null;
         /** @type {Array<string>} */ let results = [];
@@ -60,9 +69,10 @@ export class UploadCollectionScene {
 
         function upload_start() {
             try {
-                if (!read_form()) {
+                if (!validator.validate()) {
                     return false;
                 }
+                read_form();
                 uploadfile_form.classList.add("hidden");
                 uploadfile_lbl.classList.add("hidden");
                 href_form.classList.add("hidden");
@@ -125,40 +135,33 @@ export class UploadCollectionScene {
             return false;
         }
 
+        /**
+         * @param {number} i
+         */
         function updateFileStatus(i) {
             if (nodes === null) {
                 return;
             }
-            let success_form = nodes[i].querySelector("[data-name=success]");
+            /** @type {HTMLElement} */ let file_success_form = nodes[i].querySelector("[data-name=success]");
-            let error_form = nodes[i].querySelector("[data-name=error]");
+            /** @type {HTMLElement} */ let file_error_form = nodes[i].querySelector("[data-name=error]");
             if (results.length > i) {
                 if (results[i]) {
-                    success_form.classList.add("hidden");
+                    file_success_form.classList.add("hidden");
-                    error_form.textContent = "Error: " + results[i];
+                    file_error_form.textContent = "Error: " + results[i];
                     error_form.classList.remove("hidden");
                 } else {
-                    success_form.classList.remove("hidden");
+                    file_success_form.classList.remove("hidden");
-                    error_form.classList.add("hidden");
+                    file_error_form.classList.add("hidden");
                 }
             } else {
-                success_form.classList.add("hidden");
+                file_success_form.classList.add("hidden");
-                error_form.classList.add("hidden");
+                file_error_form.classList.add("hidden");
             }
         }
 
         function read_form() {
             cleanHREFinput(href_form);
-            let newhreftxtvalue = href_form.value.trim().toLowerCase();
+            href = href_form.value.trim().toLowerCase();
-            if (!isValidHREF(newhreftxtvalue)) {
-                alert("You must enter a valid HREF");
-                return false;
-            }
-            href = newhreftxtvalue;
-
-            if (uploadfile_form.files.length == 0) {
-                alert("You must select at least one file to upload");
-                return false;
-            }
             files = uploadfile_form.files;
             return true;
         }
@@ -169,12 +172,16 @@ export class UploadCollectionScene {
                 hreflimitmsg_html.classList.remove("hidden");
                 href_form.classList.add("hidden");
                 href_label.classList.add("hidden");
-                href_form.value = random_uuid(); // dummy, will be replaced on upload
+                href_form.value = random_uuid(); // fake HREF, will be replaced on upload
             } else {
                 hreflimitmsg_html.classList.add("hidden");
                 href_form.classList.remove("hidden");
                 href_label.classList.remove("hidden");
-                href_form.value = files[0].name.replace(/\.(ics|vcf)$/, '');
+                if (files && files.length > 0) {
+                    href_form.value = files[0].name.replace(/\.(ics|vcf)$/, '');
+                } else {
+                    href_form.value = "";
+                }
             }
             return false;
         }
@@ -195,6 +202,7 @@ export class UploadCollectionScene {
             href_label.classList.remove("hidden");
             hreflimitmsg_html.classList.add("hidden");
             pending_html.classList.add("hidden");
+            errorHandler.clearError();
             close_btn.onclick = null;
             upload_btn.onclick = null;
             href_form.value = "";

radicale/web/internal_data/js/utils/error.js

@@ -0,0 +1,74 @@
+/**
+ * This file is part of Radicale Server - Calendar Server
+ * Copyright © 2026-2026 Max Berger <max@berger.name>
+ *
+ * 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/>.
+ */
+
+/**
+ * ErrorHandler manages error messages for a HTMLElement.
+ */
+export class ErrorHandler {
+    /**
+     * @param {HTMLElement} element
+     */
+    constructor(element) {
+        /** @type {HTMLElement} */ this._element = element;
+        /** @type {string} */ this._lastHTML = "anything_but_blank";
+        this.clearError();
+    }
+
+    /**
+     * Sets an error message for a given key.
+     * @param {string} errorMessage
+     */
+    setError(errorMessage) {
+        this._update([errorMessage]);
+    }
+
+    /**
+     * Sets multiple error messages.
+     * @param {string[]} errorMessages
+     */
+    setErrors(errorMessages) {
+        this._update(errorMessages);
+    }
+
+    clearError() {
+        this._update([]);
+    }
+
+
+    /**
+     * Updates the element visibility and text content.
+     * @param {string[]} errorMessages
+     * @private
+     */
+    _update(errorMessages) {
+        let html = "";
+        if (errorMessages.length > 0) {
+            html = errorMessages.join("<br>");
+        }
+
+        if (html !== this._lastHTML) {
+            this._element.innerHTML = html;
+            if (html) {
+                this._element.classList.remove("hidden");
+            } else {
+                this._element.classList.add("hidden");
+            }
+            this._lastHTML = html;
+        }
+    }
+}

radicale/web/internal_data/js/utils/form_validator.js

@@ -0,0 +1,169 @@
+/**
+ * This file is part of Radicale Server - Calendar Server
+ * Copyright © 2026-2026 Max Berger <max@berger.name>
+ *
+ * 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 { COLOR_RE } from "../constants.js";
+import { ErrorHandler } from "./error.js";
+import { isValidHREF } from "./misc.js";
+
+/**
+ * Manages form validation by running validation functions on input fields.
+ */
+export class FormValidator {
+
+    /**
+     * @param {ErrorHandler} error_handler
+     */
+    constructor(error_handler) {
+        this.error_handler = error_handler;
+        this.validation_methods = [];
+    }
+
+    /**
+     * @param {HTMLInputElement} field
+     * @param {function(): ?string} validation_method
+     */
+    addValidator(field, validation_method) {
+        this.validation_methods.push({ field, validation_method });
+        field.addEventListener("input", () => {
+            this.validate();
+        });
+        this.validate();
+    }
+
+    /**
+     * Validates all added validators.
+     * @returns true if all validators are valid
+     */
+    validate() {
+        let errorMessages = [];
+        for (let { field, validation_method } of this.validation_methods) {
+            let errorMessage = validation_method(field);
+            if (errorMessage) {
+                errorMessages.push(errorMessage);
+            }
+        }
+        this.error_handler.setErrors(errorMessages);
+        return errorMessages.length === 0;
+    }
+}
+
+/**
+ * Validates that the input is not empty.
+ * @param {HTMLInputElement} input 
+ * @param {string} field_name 
+ * @returns{function(): ?string}
+ */
+export function validate_non_empty(input, field_name) {
+    return () => {
+        if (input.value) {
+            return null;
+        }
+        return field_name + " is empty";
+    };
+}
+
+/**
+ * Validates that the input is not empty and not equal to a target string.
+ * @param {HTMLInputElement} input
+ * @param {string} target
+ * @param {string} field_name
+ * @returns {function(): ?string}
+ */
+export function validate_not_empty_or_equals(input, target, field_name) {
+    return () => {
+        let value = input.value.trim();
+        if (!value) {
+            return field_name + " is empty";
+        }
+        if (value === target) {
+            return field_name + " cannot be " + target;
+        }
+        return null;
+    };
+}
+
+/**
+ * Validates that the input is a valid HREF.
+ * @param {HTMLInputElement} input
+ * @param {string} field_name
+ * @returns {function(): ?string}
+ */
+export function validate_href(input, field_name) {
+    return () => {
+        let value = input.value.trim();
+        if (!value) {
+            return field_name + " is empty";
+        }
+        if (value.startsWith("/")) {
+            return field_name + " cannot start with /";
+        }
+        if (!isValidHREF(value)) {
+            return field_name + " is invalid";
+        }
+        return null;
+    };
+}
+
+/**
+ * Validates that the input is a valid color.
+ * @param {HTMLInputElement} input
+ * @param {string} field_name
+ * @returns {function(): ?string}
+ */
+export function validate_color(input, field_name) {
+    return () => {
+        let value = input.value.trim();
+        if (!value) {
+            return null;
+        }
+        if (!COLOR_RE.exec(value)) {
+            return field_name + " is invalid";
+        }
+        return null;
+    };
+}/**
+ * Validates that the input matches a specific string.
+ * @param {HTMLInputElement} input
+ * @param {string} target
+ * @param {string} field_name
+ * @returns {function(): ?string}
+ */
+export function validate_equals(input, target, field_name) {
+    return () => {
+        let value = input.value;
+        if (value === target) {
+            return null;
+        }
+        return "Please type " + target + " in the " + field_name + " field";
+    };
+}
+
+/**
+ * Validates that at least one file is selected in a file input.
+ * @param {HTMLInputElement} input
+ * @param {string} field_name
+ * @returns {function(): ?string}
+ */
+export function validate_files(input, field_name) {
+    return () => {
+        if (input.files && input.files.length > 0) {
+            return null;
+        }
+        return "Please select at least one " + field_name;
+    };
+}