Avii/Radicale
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Change new map to use dialog

Browse Source 
This allows setting additional properties
This commit is contained in:
Max Berger
2026-03-07 20:19:54 +01:00
parent 76abbf3115
commit ef30d89452
7 changed files with 610 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
integ_tests/test_sharing.py
View File

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

19
radicale/web/internal_data/CollectionsScene.js
View File

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

101
radicale/web/internal_data/NewShareScene.js Normal file
View File

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

45
radicale/web/internal_data/ShareCollectionScene.js
View File

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

373
radicale/web/internal_data/api.js
View File

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

10
radicale/web/internal_data/css/main.css
View File

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

487
radicale/web/internal_data/index.html
View File

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