Move JavaScript files into subdirectories

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

@@ -0,0 +1,221 @@
+/**
+ * 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 { discover_server_features, get_collections } from "../api/api.js";
+import { SERVER } from "../constants.js";
+import { Collection, CollectionType } from "../models/collection.js";
+import { bytesToHumanReadable } from "../utils/misc.js";
+import { CreateEditCollectionScene } from "./CreateEditCollectionScene.js";
+import { DeleteCollectionScene } from "./DeleteCollectionScene.js";
+import { LoadingScene } from "./LoadingScene.js";
+import { Scene, pop_scene, push_scene, scene_stack } from "./scene_manager.js";
+import { ShareCollectionScene, maybe_enable_sharing_options } from "./ShareCollectionScene.js";
+import { UploadCollectionScene } from "./UploadCollectionScene.js";
+
+/**
+ * @implements {Scene}
+ */
+export class CollectionsScene {
+    /**
+     * @param {string} user
+     * @param {string} password
+     * @param {Collection} collection The collection to show sharing options for.
+     * @param {function(string):void} onerror Called when an error occurs, before the
+     *                                   scene is popped.
+     */
+    constructor(user, password, collection, onerror) {
+        /** @type {HTMLElement} */ let html_scene = document.getElementById("collectionsscene");
+        /** @type {HTMLElement} */ let template = html_scene.querySelector("[data-name=collectiontemplate]");
+        /** @type {HTMLElement} */ let new_btn = html_scene.querySelector("[data-name=new]");
+        /** @type {HTMLElement} */ let upload_btn = html_scene.querySelector("[data-name=upload]");
+
+        /** @type {?number} */ let scene_index = null;
+        /** @type {?XMLHttpRequest} */ let collections_req = null;
+        /** @type {?Array<Collection>} */ let collections = null;
+        /** @type {Array<HTMLElement>} */ let nodes = [];
+
+        function onnew() {
+            try {
+                let create_collection_scene = new CreateEditCollectionScene(user, password, collection);
+                push_scene(create_collection_scene, false);
+            } catch (err) {
+                console.error(err);
+            }
+            return false;
+        }
+
+        function onupload() {
+            try {
+                let upload_scene = new UploadCollectionScene(user, password, collection);
+                push_scene(upload_scene, false);
+            } catch (err) {
+                console.error(err);
+            }
+            return false;
+        }
+
+        function onedit(collection) {
+            try {
+                let edit_collection_scene = new CreateEditCollectionScene(user, password, collection);
+                push_scene(edit_collection_scene, false);
+            } catch (err) {
+                console.error(err);
+            }
+            return false;
+        }
+
+        function onshare(collection) {
+            try {
+                let share_collection_scene = new ShareCollectionScene(user, password, collection);
+                push_scene(share_collection_scene, false);
+            } catch (err) {
+                console.error(err);
+            }
+            return false;
+        }
+
+        function ondelete(collection) {
+            try {
+                let delete_collection_scene = new DeleteCollectionScene(user, password, collection);
+                push_scene(delete_collection_scene, false);
+            } catch (err) {
+                console.error(err);
+            }
+            return false;
+        }
+
+        function show_collections(collections) {
+            /** @type {HTMLElement} */ let navBar = document.querySelector("#logoutview");
+            let heightOfNavBar = navBar.offsetHeight + "px";
+            html_scene.style.marginTop = heightOfNavBar;
+            html_scene.style.height = "calc(100vh - " + heightOfNavBar + ")";
+            collections.forEach(function (collection) {
+                /** @type {HTMLElement} */ let node = /** @type {HTMLElement} */(template.cloneNode(true));
+                node.classList.remove("hidden");
+                /** @type {HTMLElement} */ let title_form = node.querySelector("[data-name=title]");
+                /** @type {HTMLElement} */ let description_form = node.querySelector("[data-name=description]");
+                /** @type {HTMLElement} */ let contentcount_form = node.querySelector("[data-name=contentcount]");
+                /** @type {HTMLInputElement} */ let url_form = node.querySelector("[data-name=url]");
+                /** @type {HTMLElement} */ let color_form = node.querySelector("[data-name=color]");
+                /** @type {HTMLElement} */ let delete_btn = node.querySelector("[data-name=delete]");
+                /** @type {HTMLElement} */ let edit_btn = node.querySelector("[data-name=edit]");
+                /** @type {HTMLElement} */ let share_btn = node.querySelector("[data-name=share]");
+                /** @type {HTMLAnchorElement} */ let download_btn = node.querySelector("[data-name=download]");
+                if (collection.color) {
+                    color_form.style.background = collection.color;
+                }
+                let possible_types = [CollectionType.ADDRESSBOOK, CollectionType.WEBCAL];
+                [CollectionType.CALENDAR, ""].forEach(function (e) {
+                    [CollectionType.union(e, CollectionType.JOURNAL), e].forEach(function (e) {
+                        [CollectionType.union(e, CollectionType.TASKS), e].forEach(function (e) {
+                            if (e) {
+                                possible_types.push(e);
+                            }
+                        });
+                    });
+                });
+                possible_types.forEach(function (e) {
+                    if (e !== collection.type) {
+                        node.querySelector("[data-name=" + e + "]").classList.add("hidden");
+                    }
+                });
+                title_form.textContent = collection.displayname || collection.href;
+                if (title_form.textContent.length > 30) {
+                    title_form.classList.add("smalltext");
+                }
+                description_form.textContent = collection.description;
+                if (description_form.textContent.length > 150) {
+                    description_form.classList.add("smalltext");
+                }
+                if (collection.type != CollectionType.WEBCAL) {
+                    let contentcount_form_txt = (collection.contentcount > 0 ? Number(collection.contentcount).toLocaleString() : "No") + " item" + (collection.contentcount == 1 ? "" : "s") + " in collection";
+                    if (collection.contentcount > 0) {
+                        contentcount_form_txt += " (" + bytesToHumanReadable(collection.size) + ")";
+                    }
+                    contentcount_form.textContent = contentcount_form_txt;
+                }
+                let href = SERVER + collection.href;
+                url_form.value = href;
+                download_btn.href = href;
+                if (collection.type == CollectionType.WEBCAL) {
+                    download_btn.parentElement.classList.add("hidden");
+                }
+                delete_btn.onclick = function () { return ondelete(collection); };
+                edit_btn.onclick = function () { return onedit(collection); };
+                share_btn.onclick = function () { return onshare(collection); };
+                node.classList.remove("hidden");
+                nodes.push(node);
+                template.parentNode.insertBefore(node, template);
+            });
+        }
+
+        function update() {
+            let loading_scene = new LoadingScene();
+            push_scene(loading_scene, false);
+            collections_req = get_collections(user, password, collection, function (collections1, error) {
+                if (scene_index === null) {
+                    return;
+                }
+                collections_req = null;
+                if (error) {
+                    onerror(error);
+                    pop_scene(scene_index - 1);
+                } else {
+                    collections = collections1;
+                    pop_scene(scene_index);
+                }
+            });
+        }
+
+        this.show = function () {
+            html_scene.classList.remove("hidden");
+            new_btn.onclick = onnew;
+            upload_btn.onclick = onupload;
+            if (collections === null) {
+                update();
+                discover_server_features(user, password, maybe_enable_sharing_options);
+            } else {
+                // from update loading scene
+                show_collections(collections);
+            }
+        };
+        this.hide = function () {
+            html_scene.classList.add("hidden");
+            scene_index = scene_stack.length - 1;
+            new_btn.onclick = null;
+            upload_btn.onclick = null;
+            collections = null;
+            // remove collection
+            nodes.forEach(function (node) {
+                node.parentNode.removeChild(node);
+            });
+            nodes = [];
+        };
+        this.release = function () {
+            scene_index = null;
+            if (collections_req !== null) {
+                collections_req.abort();
+                collections_req = null;
+            }
+            collections = null;
+        };
+    }
+}

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

@@ -0,0 +1,225 @@
+/**
+ * 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 { 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 { LoadingScene } from "./LoadingScene.js";
+import { Scene, pop_scene, push_scene, scene_stack } from "./scene_manager.js";
+
+/**
+ * @implements {Scene}
+ */
+export class CreateEditCollectionScene {
+    /**
+     * @param {string} user
+     * @param {string} password
+     * @param {Collection} collection if it's a principal collection, a new
+     *                                collection will be created inside of it.
+     *                                Otherwise the collection will be edited.
+     */
+    constructor(user, password, collection) {
+        let edit = collection.type !== CollectionType.PRINCIPAL;
+        let html_scene = document.getElementById(edit ? "editcollectionscene" : "createcollectionscene");
+        /** @type {HTMLElement} */ let title_form = edit ? html_scene.querySelector("[data-name=title]") : null;
+        /** @type {HTMLElement} */ let error_form = html_scene.querySelector("[data-name=error]");
+        /** @type {HTMLInputElement} */ let href_form = html_scene.querySelector("[data-name=href]");
+        /** @type {HTMLInputElement} */ let displayname_form = html_scene.querySelector("[data-name=displayname]");
+        /** @type {HTMLInputElement} */ let description_form = html_scene.querySelector("[data-name=description]");
+        /** @type {HTMLInputElement} */ let source_form = html_scene.querySelector("[data-name=source]");
+        /** @type {HTMLElement} */ let source_label = html_scene.querySelector("label[for=source]");
+        /** @type {HTMLSelectElement} */ let type_form = html_scene.querySelector("[data-name=type]");
+        /** @type {HTMLInputElement} */ let color_form = html_scene.querySelector("[data-name=color]");
+        /** @type {HTMLElement} */ let submit_btn = html_scene.querySelector("[data-name=submit]");
+        /** @type {HTMLElement} */ let cancel_btn = html_scene.querySelector("[data-name=cancel]");
+
+
+        /** @type {?number} */ let scene_index = null;
+        /** @type {?XMLHttpRequest} */ let create_edit_req = null;
+        let error = "";
+        /** @type {?HTMLSelectElement} */ let saved_type_form = null;
+
+        let href = edit ? collection.href : collection.href + random_uuid() + "/";
+        let displayname = edit ? collection.displayname : "";
+        let description = edit ? collection.description : "";
+        let source = edit ? collection.source : "";
+        let type = edit ? collection.type : CollectionType.CALENDAR_JOURNAL_TASKS;
+        let color = edit && collection.color ? collection.color : "#" + random_hex(6);
+
+        if (!edit) {
+            href_form.addEventListener("input", onCleanHREFinput);
+        }
+
+        function remove_invalid_types() {
+            if (!edit) {
+                return;
+            }
+            /** @type {HTMLOptionsCollection} */ let options = type_form.options;
+            // remove all options that are not supersets
+            let valid_type_options = CollectionType.valid_options_for_type(type);
+            for (let i = options.length - 1; i >= 0; i--) {
+                if (valid_type_options.indexOf(options[i].value) < 0) {
+                    options.remove(i);
+                }
+            }
+        }
+
+        function read_form() {
+            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;
+            description = description_form.value;
+            source = source_form.value;
+            type = type_form.value;
+            color = color_form.value;
+            return true;
+        }
+
+        function fill_form() {
+            if (!edit) {
+                href_form.value = random_uuid();
+            }
+            displayname_form.value = displayname;
+            description_form.value = description;
+            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()) {
+                    return false;
+                }
+                let sane_color = color.trim();
+                if (sane_color) {
+                    let color_match = COLOR_RE.exec(sane_color);
+                    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);
+                let collection = new Collection(href, type, displayname, description, sane_color, 0, 0, source);
+                let callback = function (error1) {
+                    if (scene_index === null) {
+                        return;
+                    }
+                    create_edit_req = null;
+                    if (error1) {
+                        error = error1;
+                        pop_scene(scene_index);
+                    } else {
+                        pop_scene(scene_index - 1);
+                    }
+                };
+                if (edit) {
+                    create_edit_req = edit_collection(user, password, collection, callback);
+                } else {
+                    create_edit_req = create_collection(user, password, collection, callback);
+                }
+            } catch (err) {
+                console.error(err);
+            }
+            return false;
+        }
+
+        function oncancel() {
+            try {
+                pop_scene(scene_index - 1);
+            } catch (err) {
+                console.error(err);
+            }
+            return false;
+        }
+
+        /** 
+         * @param {Event} _e
+         */
+        function onTypeChange(_e) {
+            if (type_form.value == CollectionType.WEBCAL) {
+                source_label.classList.remove("hidden");
+                source_form.classList.remove("hidden");
+            } else {
+                source_label.classList.add("hidden");
+                source_form.classList.add("hidden");
+            }
+        }
+
+        this.show = function () {
+            this.release();
+            scene_index = scene_stack.length - 1;
+            // Clone type_form because it's impossible to hide options without removing them
+            saved_type_form = type_form;
+            type_form = /** @type {HTMLSelectElement} */ (type_form.cloneNode(true));
+            saved_type_form.parentNode.replaceChild(type_form, saved_type_form);
+            remove_invalid_types();
+            html_scene.classList.remove("hidden");
+            if (edit) {
+                title_form.textContent = collection.displayname || collection.href;
+            }
+            fill_form();
+            submit_btn.onclick = onsubmit;
+            cancel_btn.onclick = oncancel;
+            if (error) {
+                error_form.textContent = "Error: " + error;
+                error_form.classList.remove("hidden");
+            } else {
+                error_form.classList.add("hidden");
+            }
+        };
+        this.hide = function () {
+            read_form();
+            html_scene.classList.add("hidden");
+            // restore type_form
+            type_form.parentNode.replaceChild(saved_type_form, type_form);
+            type_form = saved_type_form;
+            saved_type_form = null;
+            submit_btn.onclick = null;
+            cancel_btn.onclick = null;
+        };
+        this.release = function () {
+            scene_index = null;
+            if (create_edit_req !== null) {
+                create_edit_req.abort();
+                create_edit_req = null;
+            }
+        };
+    }
+}

radicale/web/internal_data/js/scenes/DeleteCollectionScene.js

@@ -0,0 +1,123 @@
+/**
+ * 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 { delete_collection } from "../api/api.js";
+import { DELETE_CONFIRMATION_TEXT } from "../constants.js";
+import { Collection } from "../models/collection.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 {
+    constructor(user, password, collection) {
+        /** @type {HTMLElement} */ let html_scene = document.getElementById("deletecollectionscene");
+        /** @type {HTMLElement} */ let title_form = html_scene.querySelector("[data-name=title]");
+        /** @type {HTMLElement} */ let error_form = html_scene.querySelector("[data-name=error]");
+        /** @type {HTMLInputElement} */ let confirmation_txt = html_scene.querySelector("[data-name=confirmationtxt]");
+        /** @type {HTMLElement} */ let delete_confirmation_lbl = html_scene.querySelector("[data-name=deleteconfirmationtext]");
+        /** @type {HTMLElement} */ let delete_btn = html_scene.querySelector("[data-name=delete]");
+        /** @type {HTMLElement} */ let cancel_btn = html_scene.querySelector("[data-name=cancel]");
+
+        delete_confirmation_lbl.innerHTML = DELETE_CONFIRMATION_TEXT;
+        confirmation_txt.value = "";
+        confirmation_txt.addEventListener("keydown", onkeydown);
+
+        /** @type {?number} */ let scene_index = null;
+        /** @type {?XMLHttpRequest} */ let delete_req = null;
+        let error = "";
+
+        function ondelete() {
+            let confirmation_text_value = confirmation_txt.value;
+            if (confirmation_text_value != DELETE_CONFIRMATION_TEXT) {
+                alert("Please type the confirmation text to delete this collection.");
+                return;
+            }
+            try {
+                let loading_scene = new LoadingScene();
+                push_scene(loading_scene, false);
+                delete_req = delete_collection(user, password, collection, function (error1) {
+                    if (scene_index === null) {
+                        return;
+                    }
+                    delete_req = null;
+                    if (error1) {
+                        error = error1;
+                        pop_scene(scene_index);
+                    } else {
+                        pop_scene(scene_index - 1);
+                    }
+                });
+            } catch (err) {
+                console.error(err);
+            }
+            return false;
+        }
+
+        function oncancel() {
+            try {
+                pop_scene(scene_index - 1);
+            } catch (err) {
+                console.error(err);
+            }
+            return false;
+        }
+
+        function onkeydown(event) {
+            if (event.keyCode !== 13) {
+                return;
+            }
+            ondelete();
+        }
+
+        this.show = function () {
+            this.release();
+            scene_index = scene_stack.length - 1;
+            html_scene.classList.remove("hidden");
+            title_form.textContent = collection.displayname || collection.href;
+            delete_btn.onclick = ondelete;
+            cancel_btn.onclick = oncancel;
+            if (error) {
+                error_form.textContent = "Error: " + error;
+                error_form.classList.remove("hidden");
+            } else {
+                error_form.classList.add("hidden");
+            }
+
+        };
+        this.hide = function () {
+            html_scene.classList.add("hidden");
+            cancel_btn.onclick = null;
+            delete_btn.onclick = null;
+        };
+        this.release = function () {
+            scene_index = null;
+            if (delete_req !== null) {
+                delete_req.abort();
+                delete_req = null;
+            }
+        };
+    }
+}

radicale/web/internal_data/js/scenes/LoadingScene.js

@@ -0,0 +1,38 @@
+/**
+ * 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 { Scene } from "./scene_manager.js";
+
+/**
+ * @implements {Scene}
+ */
+export class LoadingScene {
+    constructor() {
+        let html_scene = document.getElementById("loadingscene");
+        this.show = function () {
+            html_scene.classList.remove("hidden");
+        };
+        this.hide = function () {
+            html_scene.classList.add("hidden");
+        };
+        this.release = function () { };
+    }
+}

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

@@ -0,0 +1,157 @@
+/**
+ * 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 { 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";
+
+/**
+ * @constructor
+ * @implements {Scene}
+ */
+export class LoginScene {
+    constructor() {
+        /** @type {HTMLElement} */ let html_scene = document.getElementById("loginscene");
+        /** @type {HTMLElement} */ let form = html_scene.querySelector("[data-name=form]");
+        /** @type {HTMLInputElement} */ let user_form = html_scene.querySelector("[data-name=user]");
+        /** @type {HTMLInputElement} */ let password_form = html_scene.querySelector("[data-name=password]");
+        /** @type {HTMLElement} */ let error_form = html_scene.querySelector("[data-name=error]");
+        /** @type {HTMLElement} */ let logout_view = document.getElementById("logoutview");
+        /** @type {HTMLElement} */ let logout_user_form = logout_view.querySelector("[data-name=user]");
+        /** @type {HTMLElement} */ let logout_btn = logout_view.querySelector("[data-name=logout]");
+        /** @type {HTMLElement} */ let refresh_btn = logout_view.querySelector("[data-name=refresh]");
+
+        /** @type {?number} */ let scene_index = null;
+        let user = "";
+        let error = "";
+        /** @type {?XMLHttpRequest} */ let principal_req = null;
+
+        function read_form() {
+            user = user_form.value;
+        }
+
+        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) {
+                    error = "";
+                    // 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();
+                }
+            } catch (err) {
+                console.error(err);
+            }
+            return false;
+        }
+
+        function onlogout() {
+            try {
+                if (scene_index === null) {
+                    return false;
+                }
+                user = "";
+                pop_scene(scene_index);
+            } catch (err) {
+                console.error(err);
+            }
+            return false;
+        }
+
+        function remove_logout() {
+            logout_view.classList.add("hidden");
+            logout_btn.onclick = null;
+            refresh_btn.onclick = null;
+            logout_user_form.textContent = "";
+        }
+
+        function refresh() {
+            //The easiest way to refresh is to push a LoadingScene onto the stack and then pop it
+            //forcing the scene below it, the Collections Scene to refresh itself.
+            push_scene(new LoadingScene(), false);
+            pop_scene(scene_stack.length - 2);
+        }
+
+        this.show = function () {
+            remove_logout();
+            fill_form();
+            form.onsubmit = onlogin;
+            html_scene.classList.remove("hidden");
+            scene_index = scene_stack.length - 1;
+            user_form.focus();
+        };
+        this.hide = function () {
+            read_form();
+            html_scene.classList.add("hidden");
+            form.onsubmit = null;
+        };
+        this.release = function () {
+            scene_index = null;
+            // cancel pending requests
+            if (principal_req !== null) {
+                principal_req.abort();
+                principal_req = null;
+            }
+            remove_logout();
+        };
+    }
+}

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

@@ -0,0 +1,125 @@
+/**
+ * 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

@@ -0,0 +1,240 @@
+/**
+ * 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 {
+  delete_share_by_map,
+  delete_share_by_token,
+  reload_sharing_list,
+  server_features,
+} from "../api/api.js";
+import { Collection } from "../models/collection.js";
+import { NewShareScene } from "./NewShareScene.js";
+import { Scene, pop_scene, push_scene, scene_stack } from "./scene_manager.js";
+
+/**
+ * @implements {Scene}
+ */
+export class ShareCollectionScene {
+  /**
+   * @param {string} user
+   * @param {string} password
+   * @param {Collection} collection The collection on which to edit sharing setting. Must exist.
+   */
+  constructor(user, password, collection) {
+    /** @type {?number} */ let scene_index = null;
+
+    let html_scene = document.getElementById("sharecollectionscene");
+
+    /** @type {HTMLElement} */ let cancel_btn = html_scene.querySelector("[data-name=cancel]");
+    /** @type {HTMLElement} */ let share_by_token_btn = html_scene.querySelector(
+      "button[data-name=sharebytoken]"
+    );
+     /** @type {HTMLElement} */ let share_by_map_btn = html_scene.querySelector(
+      "button[data-name=sharebymap]"
+    );
+    /** @type {HTMLElement} */ let share_by_token_div = html_scene.querySelector(
+      "div[data-name=sharebytoken]"
+    );
+    /** @type {HTMLElement} */ let share_by_map_div = html_scene.querySelector(
+      "div[data-name=sharebymap]"
+    );
+
+        /** @type {HTMLElement} */ let title = html_scene.querySelector("[data-name=title]");
+
+    function oncancel() {
+      try {
+        pop_scene(scene_index - 1);
+      } catch (err) {
+        console.error(err);
+      }
+      return false;
+    }
+
+    function onsharebytoken() {
+      let new_share_scene = new NewShareScene(user, password, collection.href, "token", function () {
+        update_share_list(user, password, collection);
+      });
+      push_scene(new_share_scene, false);
+    }
+
+    function onsharebymap() {
+      let new_share_scene = new NewShareScene(user, password, collection.href, "map", function () {
+        update_share_list(user, password, collection);
+      });
+      push_scene(new_share_scene, false);
+    }
+
+    this.show = function () {
+      this.release();
+      scene_index = scene_stack.length - 1;
+      html_scene.classList.remove("hidden");
+      cancel_btn.onclick = oncancel;
+      if (server_features.sharing && server_features.sharing.PermittedCreateCollectionByToken) {
+        if (share_by_token_btn) {
+          share_by_token_btn.classList.remove("hidden");
+          share_by_token_btn.onclick = onsharebytoken;
+        }
+      } else {
+        if (share_by_token_btn) share_by_token_btn.classList.add("hidden");
+      }
+
+      if (server_features.sharing && server_features.sharing.FeatureEnabledCollectionByToken) {
+        if (share_by_token_div) share_by_token_div.classList.remove("hidden");
+      } else {
+        if (share_by_token_div) share_by_token_div.classList.add("hidden");
+      }
+
+      if (server_features.sharing && server_features.sharing.PermittedCreateCollectionByMap) {
+        if (share_by_map_btn) {
+          share_by_map_btn.classList.remove("hidden");
+          share_by_map_btn.onclick = onsharebymap;
+        }
+      } else {
+        if (share_by_map_btn) share_by_map_btn.classList.add("hidden");
+      }
+
+      if (server_features.sharing && server_features.sharing.FeatureEnabledCollectionByMap) {
+        if (share_by_map_div) share_by_map_div.classList.remove("hidden");
+      } else {
+        if (share_by_map_div) share_by_map_div.classList.add("hidden");
+      }
+
+      title.textContent = collection.displayname || collection.href;
+      update_share_list(user, password, collection);
+    };
+    this.hide = function () {
+      html_scene.classList.add("hidden");
+      cancel_btn.onclick = null;
+    };
+    this.release = function () {
+      scene_index = null;
+    };
+  }
+}
+
+/**
+ * @param {string} user
+ * @param {string} password
+ * @param {Collection} collection
+ */
+function update_share_list(user, password, collection) {
+  let share_rows = document.querySelectorAll(
+    "[data-name=sharetokenrowtemplate], [data-name=sharemaprowtemplate]",
+  );
+  share_rows.forEach(function (row) {
+    if (!row.classList.contains("hidden")) {
+      row.parentNode.removeChild(row);
+    }
+  });
+
+  reload_sharing_list(user, password, collection, function (shares) {
+    add_share_rows(user, password, collection, shares);
+  });
+}
+
+/**
+ * 
+ * @param {string} user 
+ * @param {string} password 
+ * @param {Collection} collection 
+ * @param {import('../api/api.js').Share} share 
+ * @param {HTMLElement} template 
+ * @param {string} delete_label 
+ * @param {function(string, string, string, function():void):void} delete_action 
+ */
+function add_share_row_node(user, password, collection, share, template, delete_label, delete_action) {
+  let pathortoken = share["PathOrToken"] || "";
+  let node = /** @type {HTMLElement} */ (template.cloneNode(true));
+  node.classList.remove("hidden");
+
+  /** @type {HTMLInputElement} */ let pathortoken_form = node.querySelector("[data-name=pathortoken]");
+  if (pathortoken_form) {
+    pathortoken_form.value = pathortoken;
+  }
+
+  let permissions = (share["Permissions"] || "").toLowerCase();
+  if (permissions === "rw") {
+    node
+      .querySelector("[data-name=ro]")
+      .parentNode.removeChild(node.querySelector("[data-name=ro]"));
+  } else if (permissions === "r") {
+    node
+      .querySelector("[data-name=rw]")
+      .parentNode.removeChild(node.querySelector("[data-name=rw]"));
+  } else {
+    console.warn("Unknown permissions", permissions);
+  }
+
+  /** @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 + "?")) {
+      return;
+    }
+    delete_action(
+      user,
+      password,
+      pathortoken,
+      function () {
+        update_share_list(user, password, collection);
+      },
+    );
+  };
+
+  template.parentNode.insertBefore(node, template);
+}
+
+/**
+ * @param {string} user 
+ * @param {string} password 
+ * @param {Collection} collection 
+ * @param {Array<import('../api/api.js').Share>} shares 
+ */
+function add_share_rows(user, password, collection, shares) {
+  /** @type {HTMLElement} */ let token_template = document.querySelector("[data-name=sharetokenrowtemplate]");
+  /** @type {HTMLElement} */ let map_template = document.querySelector("[data-name=sharemaprowtemplate]");
+  shares.forEach(function (share) {
+    let pathortoken = share["PathOrToken"] || "";
+    let pathmapped = share["PathMapped"] || "";
+    if (
+      collection.href.includes(pathmapped) ||
+      collection.href.includes(pathortoken)
+    ) {
+      if (share["ShareType"] === "token") {
+        add_share_row_node(user, password, collection, share, token_template, "share", delete_share_by_token);
+      } else if (share["ShareType"] === "map") {
+        add_share_row_node(user, password, collection, share, map_template, "map", delete_share_by_map);
+      }
+    }
+  });
+}
+
+export function maybe_enable_sharing_options() {
+  if (!server_features.sharing) return;
+  let map_is_enabled = server_features.sharing.FeatureEnabledCollectionByMap || false;
+  let token_is_enabled = server_features.sharing.FeatureEnabledCollectionByToken || false;
+  if (map_is_enabled || token_is_enabled) {
+    let share_options = document.querySelectorAll("[data-name=shareoption]");
+    for (let i = 0; i < share_options.length; i++) {
+      let share_option = share_options[i];
+      share_option.classList.remove("hidden");
+    }
+  }
+}

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

@@ -0,0 +1,218 @@
+/**
+ * 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 { upload_collection } from "../api/api.js";
+import { Collection } from "../models/collection.js";
+import { cleanHREFinput, isValidHREF, onCleanHREFinput, random_uuid } from "../utils/misc.js";
+import { Scene, pop_scene, scene_stack } from "./scene_manager.js";
+
+/**
+ * @implements {Scene}
+ */
+export class UploadCollectionScene {
+    /**
+     * @param {string} user
+     * @param {string} password
+     * @param {Collection} collection parent collection
+     */
+    constructor(user, password, collection) {
+        /** @type {HTMLElement} */ let html_scene = document.getElementById("uploadcollectionscene");
+        /** @type {HTMLElement} */ let template = html_scene.querySelector("[data-name=filetemplate]");
+        /** @type {HTMLElement} */ let upload_btn = html_scene.querySelector("[data-name=submit]");
+        /** @type {HTMLElement} */ let close_btn = html_scene.querySelector("[data-name=close]");
+        /** @type {HTMLInputElement} */ let uploadfile_form = html_scene.querySelector("[data-name=uploadfile]");
+        /** @type {HTMLElement} */ let uploadfile_lbl = html_scene.querySelector("label[for=uploadfile]");
+        /** @type {HTMLInputElement} */ let href_form = html_scene.querySelector("[data-name=href]");
+        /** @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]");
+
+        let files = uploadfile_form.files;
+        href_form.addEventListener("input", onCleanHREFinput);
+        upload_btn.onclick = upload_start;
+        uploadfile_form.onchange = onfileschange;
+
+        href_form.value = "";
+        let href = "";
+
+        /** @type {?number} */ let scene_index = null;
+        /** @type {?XMLHttpRequest} */ let upload_req = null;
+        /** @type {Array<string>} */ let results = [];
+        /** @type {?Array<HTMLElement>} */ let nodes = null;
+
+        function upload_start() {
+            try {
+                if (!read_form()) {
+                    return false;
+                }
+                uploadfile_form.classList.add("hidden");
+                uploadfile_lbl.classList.add("hidden");
+                href_form.classList.add("hidden");
+                href_label.classList.add("hidden");
+                hreflimitmsg_html.classList.add("hidden");
+                upload_btn.classList.add("hidden");
+                close_btn.classList.add("hidden");
+
+                pending_html.classList.remove("hidden");
+
+                nodes = [];
+                for (let i = 0; i < files.length; i++) {
+                    let file = files[i];
+                    let node = /** @type {HTMLElement} */ (template.cloneNode(true));
+                    node.classList.remove("hidden");
+                    let name_form = node.querySelector("[data-name=name]");
+                    name_form.textContent = file.name;
+                    node.classList.remove("hidden");
+                    nodes.push(node);
+                    updateFileStatus(i);
+                    template.parentNode.insertBefore(node, template);
+                }
+                upload_next();
+            } catch (err) {
+                console.error(err);
+            }
+            return false;
+        }
+
+        function upload_next() {
+            try {
+                if (files.length === results.length) {
+                    pending_html.classList.add("hidden");
+                    close_btn.classList.remove("hidden");
+                    return;
+                } else {
+                    let file = files[results.length];
+                    if (files.length > 1 || href.length == 0) {
+                        href = random_uuid();
+                    }
+                    let upload_href = collection.href + href + "/";
+                    upload_req = upload_collection(user, password, upload_href, file, function (result) {
+                        upload_req = null;
+                        results.push(result);
+                        updateFileStatus(results.length - 1);
+                        upload_next();
+                    });
+                }
+            } catch (err) {
+                console.error(err);
+            }
+        }
+
+        function onclose() {
+            try {
+                pop_scene(scene_index - 1);
+            } catch (err) {
+                console.error(err);
+            }
+            return false;
+        }
+
+        function updateFileStatus(i) {
+            if (nodes === null) {
+                return;
+            }
+            let success_form = nodes[i].querySelector("[data-name=success]");
+            let error_form = nodes[i].querySelector("[data-name=error]");
+            if (results.length > i) {
+                if (results[i]) {
+                    success_form.classList.add("hidden");
+                    error_form.textContent = "Error: " + results[i];
+                    error_form.classList.remove("hidden");
+                } else {
+                    success_form.classList.remove("hidden");
+                    error_form.classList.add("hidden");
+                }
+            } else {
+                success_form.classList.add("hidden");
+                error_form.classList.add("hidden");
+            }
+        }
+
+        function read_form() {
+            cleanHREFinput(href_form);
+            let newhreftxtvalue = 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;
+        }
+
+        function onfileschange() {
+            files = uploadfile_form.files;
+            if (files.length > 1) {
+                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
+            } 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)$/, '');
+            }
+            return false;
+        }
+
+        this.show = function () {
+            scene_index = scene_stack.length - 1;
+            html_scene.classList.remove("hidden");
+            close_btn.onclick = onclose;
+        };
+
+        this.hide = function () {
+            html_scene.classList.add("hidden");
+            close_btn.classList.remove("hidden");
+            upload_btn.classList.remove("hidden");
+            uploadfile_form.classList.remove("hidden");
+            uploadfile_lbl.classList.remove("hidden");
+            href_form.classList.remove("hidden");
+            href_label.classList.remove("hidden");
+            hreflimitmsg_html.classList.add("hidden");
+            pending_html.classList.add("hidden");
+            close_btn.onclick = null;
+            upload_btn.onclick = null;
+            href_form.value = "";
+            uploadfile_form.value = "";
+            if (nodes == null) {
+                return;
+            }
+            nodes.forEach(function (node) {
+                node.parentNode.removeChild(node);
+            });
+            nodes = null;
+        };
+        this.release = function () {
+            scene_index = null;
+            if (upload_req !== null) {
+                upload_req.abort();
+                upload_req = null;
+            }
+        };
+    }
+}

radicale/web/internal_data/js/scenes/scene_manager.js

@@ -0,0 +1,85 @@
+/**
+ * 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/>.
+ */
+
+/**
+ * @interface
+ */
+export class Scene {
+    constructor() { }
+    /**
+     * Scene is on top of stack and visible.
+     */
+    show() { }
+    /**
+     * Scene is no longer visible.
+     */
+    hide() { }
+    /**
+     * Scene is removed from scene stack.
+     */
+    release() { }
+}
+
+
+/**
+ * @type {Array<Scene>}
+ */
+export let scene_stack = [];
+
+/**
+ * Push scene onto stack.
+ * @param {Scene} scene
+ * @param {boolean} replace Replace the scene on top of the stack.
+ */
+export function push_scene(scene, replace) {
+    if (scene_stack.length >= 1) {
+        scene_stack[scene_stack.length - 1].hide();
+        if (replace) {
+            scene_stack.pop().release();
+        }
+    }
+    scene_stack.push(scene);
+    scene.show();
+}
+
+/**
+ * Remove scenes from stack.
+ * @param {number} index New top of stack
+ */
+export function pop_scene(index) {
+    if (scene_stack.length - 1 <= index) {
+        return;
+    }
+    scene_stack[scene_stack.length - 1].hide();
+    while (scene_stack.length - 1 > index) {
+        let old_length = scene_stack.length;
+        scene_stack.pop().release();
+        if (old_length - 1 === index + 1) {
+            break;
+        }
+    }
+    if (scene_stack.length >= 1) {
+        let scene = scene_stack[scene_stack.length - 1];
+        scene.show();
+    } else {
+        throw "Scene stack is empty";
+    }
+}