Change new map to use dialog

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

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

View File

@@ -21,7 +21,7 @@
import { CreateEditCollectionScene } from "./CreateEditCollectionScene.js";
import { DeleteCollectionScene } from "./DeleteCollectionScene.js";
import { LoadingScene } from "./LoadingScene.js";
import { CreateShareCollectionScene, maybe_enable_sharing_options } from "./ShareCollectionScene.js";
import { ShareCollectionScene, maybe_enable_sharing_options } from "./ShareCollectionScene.js";
import { UploadCollectionScene } from "./UploadCollectionScene.js";
import { discover_server_features, get_collections } from "./api.js";
import { SERVER } from "./constants.js";
@@ -30,15 +30,16 @@ import { Scene, pop_scene, push_scene, scene_stack } from "./scene_manager.js";
import { bytesToHumanReadable } from "./utils.js";
/**
* @constructor
* @implements {Scene}
*/
export class CollectionsScene {
/**
* @param {string} user
* @param {string} password
* @param {Collection} collection The principal collection.
* @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.
*/
export class CollectionsScene {
constructor(user, password, collection, onerror) {
/** @type {HTMLElement} */ let html_scene = document.getElementById("collectionsscene");
/** @type {HTMLElement} */ let template = html_scene.querySelector("[data-name=collectiontemplate]");
@@ -82,7 +83,7 @@ export class CollectionsScene {
function onshare(collection) {
try {
let share_collection_scene = new CreateShareCollectionScene(user, password, collection);
let share_collection_scene = new ShareCollectionScene(user, password, collection);
push_scene(share_collection_scene, false);
} catch (err) {
console.error(err);

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;
};
}
}

View File

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

View File

@@ -18,8 +18,8 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { COLOR_RE, ROOT_PATH, SERVER } from "./constants.js";
import { Collection, CollectionType } from "./models.js";
import { SERVER, ROOT_PATH, COLOR_RE } from "./constants.js";
import { escape_xml } from "./utils.js";
export let server_features = {};
@@ -345,6 +345,16 @@ export function edit_collection(user, password, collection, callback) {
}
/* Sharing API */
/**
* @param {string} user
* @param {string} password
* @param {string} path
* @param {object} body
* @param {function(string):void} on_success
* @param {function():void} on_not_found
* @param {function(string):void} on_error
* @returns {XMLHttpRequest}
*/
function call_sharing_api(
user,
password,
@@ -390,6 +400,11 @@ function call_sharing_api(
return request;
}
/**
* @param {string} user
* @param {string} password
* @param {function():void} callback
*/
export function discover_server_features(user, password, callback) {
call_sharing_api(
user,
@@ -411,6 +426,12 @@ export function discover_server_features(user, password, callback) {
);
}
/**
* @param {string} user
* @param {string} password
* @param {Collection} collection
* @param {function(object):void} callback
*/
export function reload_sharing_list(user, password, collection, callback) {
call_sharing_api(
user,
@@ -423,11 +444,24 @@ export function reload_sharing_list(user, password, collection, callback) {
);
}
/**
* @param {string} user
* @param {string} password
* @param {string} pathMapped
* @param {string} permissions
* @param {boolean} enabled
* @param {boolean} hidden
* @param {string} properties
* @param {function():void} callback
*/
export function add_share_by_token(
user,
password,
collection,
pathMapped,
permissions,
enabled,
hidden,
properties,
callback,
) {
call_sharing_api(
@@ -435,8 +469,11 @@ export function add_share_by_token(
password,
"token/create",
{
PathMapped: collection.href,
PathMapped: pathMapped,
Permissions: permissions,
Enabled: enabled,
Hidden: hidden,
Properties: properties,
},
function (response) {
let json_response = JSON.parse(response);
@@ -449,6 +486,12 @@ export function add_share_by_token(
);
}
/**
* @param {string} user
* @param {string} password
* @param {string} token
* @param {function():void} callback
*/
export function delete_share_by_token(
user,
password,

View File

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

View File

@@ -6,6 +6,7 @@
* Copyright © 2024-2025 Peter Bieringer <pb@bieringer.de>
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -13,7 +14,11 @@
<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>
<style>
.hidden {
display: none !important;
}
</style>
<script type="module" src="main.js"></script>
</head>
@@ -147,22 +152,20 @@
<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>
<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>
<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>
<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>
@@ -171,6 +174,32 @@
</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>
@@ -233,7 +262,8 @@
<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>
<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>
@@ -246,4 +276,5 @@
</main>
</body>
</html>