diff options
Diffstat (limited to 'radicale_web')
| -rw-r--r-- | radicale_web/__init__.py | 74 | ||||
| -rw-r--r-- | radicale_web/web/css/fonts.css | 12 | ||||
| -rw-r--r-- | radicale_web/web/css/fonts/COPYRIGHT.txt | 1 | ||||
| -rw-r--r-- | radicale_web/web/css/fonts/LICENSE.txt | 202 | ||||
| -rw-r--r-- | radicale_web/web/css/fonts/Roboto-Light.woff2 | bin | 0 -> 62832 bytes | |||
| -rw-r--r-- | radicale_web/web/css/fonts/Roboto-Regular.woff2 | bin | 0 -> 63412 bytes | |||
| -rw-r--r-- | radicale_web/web/css/icon.png | bin | 0 -> 1069 bytes | |||
| -rw-r--r-- | radicale_web/web/css/main.css | 44 | ||||
| -rw-r--r-- | radicale_web/web/fn.js | 963 | ||||
| -rw-r--r-- | radicale_web/web/index.html | 105 |
10 files changed, 1401 insertions, 0 deletions
diff --git a/radicale_web/__init__.py b/radicale_web/__init__.py new file mode 100644 index 0000000..13aecd4 --- /dev/null +++ b/radicale_web/__init__.py @@ -0,0 +1,74 @@ +# This file is part of Radicale Web. +# Copyright © 2017 Unrud <unrud@openaliasbox.org> +# +# Radicale Web is free software: you can redistribute it and/or modify +# it under the terms of the GNU Affero General Public License as +# published by the Free Software Foundation, either version 3 of the +# License, or (at your option) any later version. +# +# Radicale Web 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 Affero General Public License for more details. +# +# You should have received a copy of the GNU Affero General Public License +# along with Radicale Web. If not, see <http://www.gnu.org/licenses/>. + +import os +import posixpath +import radicale +import time + +from http import client + +VERSION = "2.0.0" + +MIMETYPES = { + ".css": "text/css", + ".eot": "application/vnd.ms-fontobject", + ".gif": "image/gif", + ".html": "text/html", + ".js": "application/javascript", + ".manifest": "text/cache-manifest", + ".png": "image/png", + ".svg": "image/svg+xml", + ".ttf": "application/font-sfnt", + ".txt": "text/plain", + ".woff": "application/font-woff", + ".woff2": "font/woff2", + ".xml": "text/xml"} +FALLBACK_MIMETYPE = "application/octet-stream" + +class Web: + def __init__(self, configuration, logger): + self.configuration = configuration + self.logger = logger + self.folder = os.path.join(os.path.dirname(__file__), "web") + + def get(self, environ, base_prefix, path, user): + try: + filesystem_path = radicale.storage.path_to_filesystem( + self.folder, path[len("/.web"):]) + except ValueError as e: + self.logger.debug(e) + return radicale.NOT_FOUND + if os.path.isdir(filesystem_path) and not path.endswith("/"): + location = posixpath.basename(path) + "/" + return (client.SEE_OTHER, + {"Location": location, "Content-Type": "text/plain"}, + "Redirected to %s" % location) + if os.path.isdir(filesystem_path): + filesystem_path = os.path.join(filesystem_path, "index.html") + if not os.path.isfile(filesystem_path): + return radicale.NOT_FOUND + content_type = MIMETYPES.get( + os.path.splitext(filesystem_path)[1].lower(), FALLBACK_MIMETYPE) + with open(filesystem_path, "rb") as f: + answer = f.read() + last_modified = time.strftime( + "%a, %d %b %Y %H:%M:%S GMT", + time.gmtime(os.fstat(f.fileno()).st_mtime)) + headers = { + "Content-Type": content_type, + "Last-Modified": last_modified} + return client.OK, headers, answer diff --git a/radicale_web/web/css/fonts.css b/radicale_web/web/css/fonts.css new file mode 100644 index 0000000..297998e --- /dev/null +++ b/radicale_web/web/css/fonts.css @@ -0,0 +1,12 @@ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 300; + src: local('Roboto Light'), local('Roboto-Light'), url(fonts/Roboto-Light.woff2) format('woff2'); +} +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: local('Roboto'), local('Roboto-Regular'), url(fonts/Roboto-Light.woff2) format('woff2'); +} diff --git a/radicale_web/web/css/fonts/COPYRIGHT.txt b/radicale_web/web/css/fonts/COPYRIGHT.txt new file mode 100644 index 0000000..e69c54c --- /dev/null +++ b/radicale_web/web/css/fonts/COPYRIGHT.txt @@ -0,0 +1 @@ +Copyright 2011 Google Inc. All Rights Reserved. diff --git a/radicale_web/web/css/fonts/LICENSE.txt b/radicale_web/web/css/fonts/LICENSE.txt new file mode 100644 index 0000000..d645695 --- /dev/null +++ b/radicale_web/web/css/fonts/LICENSE.txt @@ -0,0 +1,202 @@ + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright [yyyy] [name of copyright owner] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. diff --git a/radicale_web/web/css/fonts/Roboto-Light.woff2 b/radicale_web/web/css/fonts/Roboto-Light.woff2 Binary files differnew file mode 100644 index 0000000..2882017 --- /dev/null +++ b/radicale_web/web/css/fonts/Roboto-Light.woff2 diff --git a/radicale_web/web/css/fonts/Roboto-Regular.woff2 b/radicale_web/web/css/fonts/Roboto-Regular.woff2 Binary files differnew file mode 100644 index 0000000..f966196 --- /dev/null +++ b/radicale_web/web/css/fonts/Roboto-Regular.woff2 diff --git a/radicale_web/web/css/icon.png b/radicale_web/web/css/icon.png Binary files differnew file mode 100644 index 0000000..a9c9c04 --- /dev/null +++ b/radicale_web/web/css/icon.png diff --git a/radicale_web/web/css/main.css b/radicale_web/web/css/main.css new file mode 100644 index 0000000..7b8330b --- /dev/null +++ b/radicale_web/web/css/main.css @@ -0,0 +1,44 @@ +@import url(fonts.css); +body { background: #e4e9f6; color: #424247; display: flex; flex-direction: column; font-family: Roboto, sans; font-size: 14pt; line-height: 1.4; margin: 0; min-height: 100vh; } + +a { color: inherit; } + +nav, footer { background: #a40000; color: white; padding: 0 20%; } +nav ul, footer ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; } +nav ul li, footer ul li { display: block; padding: 0 1em 0 0; } +nav ul li a, footer ul li a { color: inherit; display: block; padding: 1em 0.5em 1em 0; text-decoration: inherit; transition: 0.2s; } +nav ul li a:hover, nav ul li a:focus, footer ul li a:hover, footer ul li a:focus { color: black; outline: none; } + +header { background: url(logo.svg), linear-gradient(to bottom right, #050a02, black); background-position: 22% 45%; background-repeat: no-repeat; color: #efdddd; font-size: 1.5em; min-height: 250px; overflow: auto; padding: 3em 22%; text-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.5); } +header > * { padding-left: 220px; } +header h1 { font-size: 2.5em; font-weight: lighter; margin: 0.5em 0; } + +main { flex: 1; } + +section { padding: 0 20% 2em; } +section:not(:last-child) { border-bottom: 1px dashed #ccc; } +section h1 { background: linear-gradient(to bottom right, #050a02, black); color: #e5dddd; font-size: 2.5em; margin: 0 -33.33% 1em; padding: 1em 33.33%; } +section h2, section h3, section h4 { font-weight: lighter; margin: 1.5em 0 1em; } + +article { border-top: 1px solid transparent; position: relative; margin: 3em 0; } +article aside { box-sizing: border-box; color: #aaa; font-size: 0.8em; right: -30%; top: 0.5em; position: absolute; } +article:before { border-top: 1px dashed #ccc; content: ""; display: block; left: -33.33%; position: absolute; right: -33.33%; } + +pre { border-radius: 3px; background: black; color: #d3d5db; margin: 0 -1em; overflow-x: auto; padding: 1em; } + +table { border-collapse: collapse; font-size: 0.8em; margin: auto; } +table td { border: 1px solid #ccc; padding: 0.5em; } + +dl dt { margin-bottom: 0.5em; margin-top: 1em; } + +@media (max-width: 800px) { body { font-size: 12pt; } + header, section { padding-left: 2em; padding-right: 2em; } + nav, footer { padding-left: 0; padding-right: 0; } + nav ul, footer ul { justify-content: center; } + nav ul li, footer ul li { padding: 0 0.5em; } + nav ul li a, footer ul li a { padding: 1em 0; } + header { background-position: 50% 30px, 0 0; padding-bottom: 0; padding-top: 330px; text-align: center; } + header > * { margin: 0; padding-left: 0; } + section h1 { margin: 0 -0.8em 1.3em; padding: 0.5em 0; text-align: center; } + article aside { top: 0.5em; right: -1.5em; } + article:before { left: -2em; right: -2em; } } diff --git a/radicale_web/web/fn.js b/radicale_web/web/fn.js new file mode 100644 index 0000000..9e258e5 --- /dev/null +++ b/radicale_web/web/fn.js @@ -0,0 +1,963 @@ +/** + * This file is part of Radicale Web. + * Copyright © 2017 Unrud <unrud@openaliasbox.org> + * + * Radicale Web is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * Radicale Web 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 Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Radicale Web. If not, see <http://www.gnu.org/licenses/>. + */ + +/** + * Server address (must not end with /) + * @const + * @type {string} + */ +var SERVER = (location.protocol + '//' + location.hostname + + (location.port ? ':' + location.port : '') + + location.pathname.replace(new RegExp("/+[^/]+/*(/index\.html?)?$"), "")); + +/** + * time between updates of collections. + * @const + */ +var UPDATE_INTERVAL = 10000; + +/** + * Regex to match and normalize color + * @const + */ +var COLOR_RE = new RegExp("^(#[0-9A-Fa-f]{6})(?:[0-9A-Fa-f]{2})?$"); + +/** + * Escape string for usage in XML + * @param {string} s + * @return {string} + */ +function escape_xml(s) { + return (s + .replace("&", "&") + .replace('"', """) + .replace("'", "'") + .replace("<", "<") + .replace(">", ">")); +} + +/** + * @enum {string} + */ +var CollectionType = { + PRINCIPAL: "PRINCIPAL", + ADDRESSBOOK: "ADDRESSBOOK", + CALENDAR_JOURNAL_TASKS: "CALENDAR_JOURNAL_TASKS", + CALENDAR_JOURNAL: "CALENDAR_JOURNAL", + CALENDAR_TASKS: "CALENDAR_TASKS", + JOURNAL_TASKS: "JOURNAL_TASKS", + CALENDAR: "CALENDAR", + JOURNAL: "JOURNAL", + TASKS: "TASKS", + is_subset: function(a, b) { + var components = a.split("_"); + var i; + for (i = 0; i < components.length; i++) { + if (b.search(components[i]) === -1) { + return false; + } + } + return true; + }, + union: function(a, b) { + if (a.search(this.ADDRESSBOOK) !== -1 || b.search(this.ADDRESSBOOK) !== -1) { + if (a && a !== this.ADDRESSBOOK || b && b !== this.ADDRESSBOOK) { + throw "Invalid union: " + a + " " + b; + } + return this.ADDRESSBOOK; + } + var union = ""; + if (a.search(this.CALENDAR) !== -1 || b.search(this.CALENDAR) !== -1) { + union += (union ? "_" : "") + this.CALENDAR; + } + if (a.search(this.JOURNAL) !== -1 || b.search(this.JOURNAL) !== -1) { + union += (union ? "_" : "") + this.JOURNAL; + } + if (a.search(this.TASKS) !== -1 || b.search(this.TASKS) !== -1) { + union += (union ? "_" : "") + this.TASKS; + } + return union; + } +} + +/** + * @constructor + * @struct + * @param {string} href Must always start and end with /. + * @param {CollectionType} type + * @param {string} displayname + * @param {string} description + * @param {string} color + */ +function Collection(href, type, displayname, description, color) { + this.href = href; + this.type = type; + this.displayname = displayname; + this.color = color; + this.description = description; +} + +/** + * Find the principal collection. + * @param {string} user + * @param {string} password + * @param {function(?Collection, ?string)} callback Returns result or error + * @return {XMLHttpRequest} + */ +function get_principal(user, password, callback) { + var request = new XMLHttpRequest(); + request.open("PROPFIND", SERVER, true, user, password); + request.onreadystatechange = function() { + if (request.readyState !== 4) { + return; + } + if (request.status === 207) { + var xml = request.responseXML; + var principal_element = xml.querySelector("*|multistatus:root > *|response:first-of-type > *|propstat > *|prop > *|current-user-principal > *|href"); + var displayname_element = xml.querySelector("*|multistatus:root > *|response:first-of-type > *|propstat > *|prop > *|displayname"); + if (principal_element) { + callback(new Collection( + principal_element.textContent, + CollectionType.PRINCIPAL, + displayname_element ? displayname_element.textContent : "", + "", + ""), null); + } else { + callback(null, "Internal error"); + } + } else { + callback(null, request.status + " " + request.statusText); + } + } + request.send('<?xml version="1.0" encoding="utf-8" ?>' + + '<propfind xmlns="DAV:">' + + '<prop>' + + '<current-user-principal />' + + '<displayname />' + + '</prop>' + + '</propfind>'); + return request; +} + +/** + * Find all calendars and addressbooks in collection. + * @param {string} user + * @param {string} password + * @param {Collection} collection + * @param {function(?Array<Collection>, ?string)} callback Returns result or error + * @return {XMLHttpRequest} + */ +function get_collections(user, password, collection, callback) { + var request = new XMLHttpRequest(); + request.open("PROPFIND", SERVER + collection.href, true, user, password); + request.setRequestHeader("depth", "1"); + request.onreadystatechange = function() { + if (request.readyState !== 4) { + return; + } + if (request.status === 207) { + var xml = request.responseXML; + var collections = []; + var responses = xml.querySelectorAll("*|multistatus:root > *|response"); + var i; + for (i = 0; i < responses.length; i++) { + var response = responses[i]; + var href_element = response.querySelector(":scope > *|href"); + var resourcetype_element = response.querySelector(":scope > *|propstat > *|prop > *|resourcetype"); + var displayname_element = response.querySelector(":scope > *|propstat > *|prop > *|displayname"); + var calendarcolor_element = response.querySelector(":scope > *|propstat > *|prop > *|calendar-color"); + var addressbookcolor_element = response.querySelector(":scope > *|propstat > *|prop > *|addressbook-color"); + var calendardesc_element = response.querySelector(":scope > *|propstat > *|prop > *|calendar-description"); + var addressbookdesc_element = response.querySelector(":scope > *|propstat > *|prop > *|addressbook-description"); + var components_element = response.querySelector(":scope > *|propstat > *|prop > *|supported-calendar-component-set"); + var href = href_element ? href_element.textContent : ""; + var displayname = displayname_element ? displayname_element.textContent : ""; + var type = ""; + var color = ""; + var description = ""; + if (resourcetype_element) { + if (resourcetype_element.querySelector(":scope > *|addressbook")) { + type = CollectionType.ADDRESSBOOK; + color = addressbookcolor_element ? addressbookcolor_element.textContent : ""; + description = addressbookdesc_element ? addressbookdesc_element.textContent : ""; + } else if (resourcetype_element.querySelector(":scope > *|calendar")) { + if (components_element) { + if (components_element.querySelector(":scope > *|comp[name=VEVENT]")) { + type = CollectionType.union(type, CollectionType.CALENDAR); + } + if (components_element.querySelector(":scope > *|comp[name=VJOURNAL]")) { + type = CollectionType.union(type, CollectionType.JOURNAL); + } + if (components_element.querySelector(":scope > *|comp[name=VTODO]")) { + type = CollectionType.union(type, CollectionType.TASKS); + } + } + color = calendarcolor_element ? calendarcolor_element.textContent : ""; + description = calendardesc_element ? calendardesc_element.textContent : ""; + } + } + // Quirks + if (href === (displayname ? "/" + displayname + "/" : "/")) { + displayname = ""; + } + var sane_color = color.trim(); + if (sane_color) { + var color_match = COLOR_RE.exec(sane_color); + if (color_match) { + sane_color = color_match[1]; + } else { + sane_color = ""; + } + } + if (href.substr(-1) === "/" && href !== collection.href && type) { + collections.push(new Collection(href, type, displayname, description, sane_color)); + } + } + collections.sort(function(a, b) { + /** @type {string} */ var ca = a.displayname || a.href; + /** @type {string} */ var cb = b.displayname || b.href; + return ca.localeCompare(cb); + }); + callback(collections, null); + } else { + callback(null, request.status + " " + request.statusText); + } + }; + request.send('<?xml version="1.0" encoding="utf-8" ?>' + + '<propfind xmlns="DAV:" xmlns:C="urn:ietf:params:xml:ns:caldav" xmlns:CR="urn:ietf:params:xml:ns:carddav" xmlns:I="http://apple.com/ns/ical/" xmlns:INF="http://inf-it.com/ns/ab/">' + + '<prop>' + + '<resourcetype />' + + '<displayname />' + + '<I:calendar-color />' + + '<INF:addressbook-color />' + + '<C:calendar-description />' + + '<C:supported-calendar-component-set />' + + '<CR:addressbook-description />' + + '</prop>' + + '</propfind>'); + return request; +} + +/** + * @param {string} user + * @param {string} password + * @param {Collection} collection + * @param {function(?string)} callback Returns error or null + * @return {XMLHttpRequest} + */ +function delete_collection(user, password, collection, callback) { + var request = new XMLHttpRequest(); + request.open("DELETE", SERVER + collection.href, true, user, password); + request.onreadystatechange = function() { + if (request.readyState !== 4) { + return; + } + if (200 <= request.status && request.status < 300) { + callback(null); + } else { + callback(request.status + " " + request.statusText); + } + }; + request.send(); + return request; +} + +/** + * @param {string} user + * @param {string} password + * @param {Collection} collection + * @param {boolean} create + * @param {function(?string)} callback Returns error or null + * @return {XMLHttpRequest} + */ +function create_edit_collection(user, password, collection, create, callback) { + var request = new XMLHttpRequest(); + request.open(create ? "MKCOL" : "PROPPATCH", SERVER + collection.href, true, user, password); + request.onreadystatechange = function() { + if (request.readyState !== 4) { + return; + } + if (200 <= request.status && request.status < 300) { + callback(null); + } else { + callback(request.status + " " + request.statusText); + } + }; + var displayname = escape_xml(collection.displayname); + var calendar_color = ""; + var addressbook_color = ""; + var calendar_description = ""; + var addressbook_description = ""; + var resourcetype; + var components = ""; + if (collection.type === CollectionType.ADDRESSBOOK) { + addressbook_color = escape_xml(collection.color + (collection.color ? "ff" : "")); + addressbook_description = escape_xml(collection.description); + resourcetype = '<CR:addressbook />'; + } else { + calendar_color = escape_xml(collection.color + (collection.color ? "ff" : "")); + calendar_description = escape_xml(collection.description); + resourcetype = '<C:calendar />'; + if (CollectionType.is_subset(CollectionType.CALENDAR, collection.type)) { + components += '<C:comp name="VEVENT" />'; + } + if (CollectionType.is_subset(CollectionType.JOURNAL, collection.type)) { + components += '<C:comp name="VJOURNAL" />'; + } + if (CollectionType.is_subset(CollectionType.TASKS, collection.type)) { + components += '<C:comp name="VTODO" />'; + } + } + var xml_request = create ? "mkcol" : "propertyupdate"; + request.send('<?xml version="1.0" encoding="UTF-8" ?>' + + '<' + xml_request + ' xmlns="DAV:" xmlns:C="urn:ietf:params:xml:ns:caldav" xmlns:CR="urn:ietf:params:xml:ns:carddav" xmlns:I="http://apple.com/ns/ical/" xmlns:INF="http://inf-it.com/ns/ab/">' + + '<set>' + + '<prop>' + + (create ? '<resourcetype><collection />' + resourcetype + '</resourcetype>' : '') + + '<C:supported-calendar-component-set>' + components + '</C:supported-calendar-component-set>' + + '<displayname>' + displayname + '</displayname>' + + '<I:calendar-color>' + calendar_color + '</I:calendar-color>' + + '<INF:addressbook-color>' + addressbook_color + '</INF:addressbook-color>' + + '<CR:addressbook-description>' + addressbook_description + '</CR:addressbook-description>' + + '<C:calendar-description>' + calendar_description + '</C:calendar-description>' + + '</prop>' + + '</set>' + + '</' + xml_request + '>'); + return request; +} + +/** + * @param {string} user + * @param {string} password + * @param {Collection} collection + * @param {function(?string)} callback Returns error or null + * @return {XMLHttpRequest} + */ +function create_collection(user, password, collection, callback) { + return create_edit_collection(user, password, collection, true, callback); +} + +/** + * @param {string} user + * @param {string} password + * @param {Collection} collection + * @param {function(?string)} callback Returns error or null + * @return {XMLHttpRequest} + */ +function edit_collection(user, password, collection, callback) { + return create_edit_collection(user, password, collection, false, callback); +} + +/** + * @interface + */ +function Scene() {} +/** + * Scene is on top of stack and visible. + */ +Scene.prototype.show = function() {}; +/** + * Scene is no longer visible. + */ +Scene.prototype.hide = function() {}; +/** + * Scene is removed from scene stack. + */ +Scene.prototype.release = function() {}; + + +/** + * @type {Array<Scene>} + */ +var scene_stack = []; + +/** + * Push scene onto stack. + * @param {Scene} scene + * @param {boolean} replace Replace the scene on top of the stack. + */ +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 + */ +function pop_scene(index) { + if (scene_stack.length - 1 <= index) { + return; + } + scene_stack[scene_stack.length - 1].hide(); + while (scene_stack.length - 1 > index) { + var old_length = scene_stack.length; + scene_stack.pop().release(); + if (old_length - 1 === index + 1) { + break; + } + } + if (scene_stack.length >= 1) { + var scene = scene_stack[scene_stack.length - 1]; + scene.show(); + } else { + throw "Scene stack is empty"; + } +} + +/** + * @constructor + * @implements {Scene} + */ +function LoginScene() { + var othis = this; + var html_scene = document.getElementById("loginscene"); + var form = html_scene.querySelector("[name=form]"); + var user_form = html_scene.querySelector("[name=user]"); + var password_form = html_scene.querySelector("[name=password]"); + var error_form = html_scene.querySelector("[name=error]"); + var logout_view = document.getElementById("logoutview"); + var logout_user_form = logout_view.querySelector("[name=user]"); + var logout_btn = logout_view.querySelector("[name=link]"); + + /** @type {?number} */ var scene_index = null; + var user = ""; + var error = ""; + /** @type {?XMLHttpRequest} */ var principal_req = null; + + function read_form() { + user = user_form.value; + } + + function fill_form() { + user_form.value = user; + password_form.value = ""; + error_form.textContent = error ? "Error: " + error : ""; + } + + function onlogin() { + try { + read_form(); + var password = password_form.value; + if (user) { + error = ""; + // setup logout + logout_view.style.display = "block"; + logout_btn.onclick = onlogout; + logout_user_form.textContent = user; + // Fetch principal + var 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 + var saved_user = user; + user = ""; + var 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; + } + + this.show = function() { + this.release(); + fill_form(); + form.onsubmit = onlogin; + html_scene.style.display = "block"; + user_form.focus(); + scene_index = scene_stack.length - 1; + }; + this.hide = function() { + read_form(); + html_scene.style.display = "none"; + form.onsubmit = null; + }; + this.release = function() { + scene_index = null; + // cancel pending requests + if (principal_req !== null) { + principal_req.abort(); + principal_req = null; + } + // remove logout + logout_view.style.display = "none"; + logout_btn.onclick = null; + logout_user_form.textContent = ""; + }; +} + +/** + * @constructor + * @implements {Scene} + */ +function LoadingScene() { + var html_scene = document.getElementById("loadingscene"); + this.show = function() { + html_scene.style.display = "block"; + }; + this.hide = function() { + html_scene.style.display = "none"; + }; + this.release = function() {}; +} + +/** + * @constructor + * @implements {Scene} + * @param {string} user + * @param {string} password + * @param {Collection} collection The principal collection. + * @param {function(string)} onerror Called when an error occurs, before the + * scene is popped. + */ +function CollectionsScene(user, password, collection, onerror) { + var othis = this; + var html_scene = document.getElementById("collectionsscene"); + var template = html_scene.querySelector("[name=collectiontemplate]"); + var new_btn = html_scene.querySelector("[name=new]"); + + /** @type {?number} */ var scene_index = null; + var saved_template_display = null; + /** @type {?XMLHttpRequest} */ var collections_req = null; + var timer = null; + /** @type {?Array<Collection>} */ var collections = null; + /** @type {Array<Node>} */ nodes = []; + + function onnew() { + try { + var create_collection_scene = new CreateEditCollectionScene(user, password, collection); + push_scene(create_collection_scene, false); + } catch(err) { + console.error(err); + } + return false; + } + + function onedit(collection) { + try { + var edit_collection_scene = new CreateEditCollectionScene(user, password, collection); + push_scene(edit_collection_scene, false); + } catch(err) { + console.error(err); + } + return false; + } + + function ondelete(collection) { + try { + var 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) { + nodes.forEach(function(node) { + template.parentNode.removeChild(node); + }); + nodes = []; + collections.forEach(function (collection) { + var node = template.cloneNode(true); + var title_form = node.querySelector("[name=title]"); + var description_form = node.querySelector("[name=description]"); + var url_form = node.querySelector("[name=url]"); + var color_form = node.querySelector("[name=color]"); + var delete_btn = node.querySelector("[name=delete]"); + var edit_btn = node.querySelector("[name=edit]"); + if (collection.color) { + color_form.style.color = collection.color; + } else { + color_form.style.display = "none"; + } + var possible_types = [CollectionType.ADDRESSBOOK]; + [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("[name=" + e + "]").style.display = "none"; + } + }); + title_form.textContent = collection.displayname || collection.href; + description_form.textContent = collection.description; + href = SERVER.replace("//", "//" + user + "@") + collection.href; + url_form.href = href; + url_form.textContent = href; + delete_btn.onclick = function(ev) {return ondelete(collection);}; + edit_btn.onclick = function(ev) {return onedit(collection);}; + node.style.display = saved_template_display; + nodes.push(node); + template.parentNode.insertBefore(node, template); + }); + } + + function update() { + if (collections === null) { + var 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 { + var old_collections = collections; + collections = collections1; + timer = window.setTimeout(update, UPDATE_INTERVAL); + if (old_collections === null) { + pop_scene(scene_index); + } else { + show_collections(collections); + } + } + }); + } + + this.show = function() { + saved_template_display = template.style.display; + template.style.display = "none"; + html_scene.style.display = "block"; + new_btn.onclick = onnew; + if (scene_index === null) { + scene_index = scene_stack.length - 1; + if (collections === null && collections_req !== null) { + pop_scene(scene_index - 1); + return; + } + update(); + } else if (collections === null) { + pop_scene(scene_index - 1); + } else { + if (timer !== null) { + show_collections(collections); + } else { + collections = null; + update(); + } + } + }; + this.hide = function() { + html_scene.style.display = "none"; + template.style.display = saved_template_display; + new_btn.onclick = null; + if (timer !== null) { + window.clearTimeout(timer); + timer = null; + } + if (collections !== null && collections_req !== null) { + collections_req.abort(); + collections_req = null; + } + show_collections([]); + }; + this.release = function() { + scene_index = null; + if (collections_req !== null) { + collections_req.abort(); + collections_req = null; + } + }; +} + +/** + * @constructor + * @implements {Scene} + * @param {string} user + * @param {string} password + * @param {Collection} collection + */ +function DeleteCollectionScene(user, password, collection) { + var html_scene = document.getElementById("deletecollectionscene"); + var title_form = html_scene.querySelector("[name=title]"); + var error_form = html_scene.querySelector("[name=error]"); + var delete_btn = html_scene.querySelector("[name=delete]"); + var cancel_btn = html_scene.querySelector("[name=cancel]"); + var no_btn = html_scene.querySelector("[name=no]"); + + /** @type {?number} */ var scene_index = null; + /** @type {?XMLHttpRequest} */ var delete_req = null; + var error = ""; + + function ondelete() { + try { + var loading_scene = new LoadingScene(); + push_scene(loading_scene); + 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; + } + + this.show = function() { + this.release(); + scene_index = scene_stack.length - 1; + html_scene.style.display = "block"; + title_form.textContent = collection.displayname || collection.href; + error_form.textContent = error ? "Error: " + error : ""; + delete_btn.onclick = ondelete; + cancel_btn.onclick = oncancel; + }; + this.hide = function() { + html_scene.style.display = "none"; + cancel_btn.onclick = null; + delete_btn.onclick = null; + }; + this.release = function() { + scene_index = null; + if (delete_req !== null) { + delete_req.abort(); + delete_req = null; + } + }; +} + +/** + * Generate random hex number. + * @param {number} length + * @return {string} + */ +function randHex(length) { + var s = Math.floor(Math.random() * Math.pow(16, length)).toString(16); + while (s.length < length) { + s = "0" + s; + } + return s; +} + +/** + * @constructor + * @implements {Scene} + * @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. + */ +function CreateEditCollectionScene(user, password, collection) { + var edit = collection.type !== CollectionType.PRINCIPAL; + var html_scene = document.getElementById(edit ? "editcollectionscene" : "createcollectionscene"); + var title_form = edit ? html_scene.querySelector("[name=title]") : null; + var error_form = html_scene.querySelector("[name=error]"); + var displayname_form = html_scene.querySelector("[name=displayname]"); + var description_form = html_scene.querySelector("[name=description]"); + var type_form = html_scene.querySelector("[name=type]"); + var color_form = html_scene.querySelector("[name=color]"); + var submit_btn = html_scene.querySelector("[name=submit]"); + var cancel_btn = html_scene.querySelector("[name=cancel]"); + + /** @type {?number} */ var scene_index = null; + /** @type {?XMLHttpRequest} */ var create_edit_req = null; + var error = ""; + /** @type {?Element} */ var saved_type_form = null; + + var href = edit ? collection.href : ( + collection.href + randHex(8) + "-" + randHex(4) + "-" + randHex(4) + + "-" + randHex(4) + "-" + randHex(12) + "/"); + var displayname = edit ? collection.displayname : ""; + var description = edit ? collection.description : ""; + var type = edit ? collection.type : CollectionType.CALENDAR_JOURNAL_TASKS; + var color = edit && collection.color ? collection.color : "#" + randHex(6); + + function remove_invalid_types() { + if (!edit) { + return; + } + /** @type {HTMLOptionsCollection} */ var options = type_form.options; + // remove all options that are not supersets + var i; + for (i = options.length - 1; i >= 0; i--) { + if (!CollectionType.is_subset(type, options[i].value)) { + options.remove(i); + } + } + } + + function read_form() { + displayname = displayname_form.value; + description = description_form.value; + type = type_form.value; + color = color_form.value; + } + + function fill_form() { + displayname_form.value = displayname; + description_form.value = description; + type_form.value = type; + color_form.value = color; + error_form.textContent = error ? "Error: " + error : ""; + } + + function onsubmit() { + try { + read_form(); + var sane_color = color.trim(); + if (sane_color) { + var color_match = COLOR_RE.exec(sane_color); + if (!color_match) { + error = "Invalid color"; + fill_form(); + return false; + } + sane_color = color_match[1]; + } + var loading_scene = new LoadingScene(); + push_scene(loading_scene); + var collection = new Collection(href, type, displayname, description, sane_color); + var 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; + } + + 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_form.cloneNode(true); + saved_type_form.parentNode.replaceChild(type_form, saved_type_form); + remove_invalid_types(); + html_scene.style.display = "block"; + if (edit) { + title_form.textContent = collection.displayname || collection.href; + } + fill_form(); + submit_btn.onclick = onsubmit; + cancel_btn.onclick = oncancel; + }; + this.hide = function() { + read_form(); + html_scene.style.display = "none"; + // 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; + } + }; +} + +function main() { + push_scene(new LoginScene(), false); +} + +window.addEventListener("load", main); diff --git a/radicale_web/web/index.html b/radicale_web/web/index.html new file mode 100644 index 0000000..adb1742 --- /dev/null +++ b/radicale_web/web/index.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<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" /> + <script src="fn.js"></script> + <title>Web interface for Radicale</title> + <link href="css/main.css" media="screen" rel="stylesheet" /> + <link href="css/icon.png" type="image/png" rel="shortcut icon" /> + </head> + <body> + <nav> + <ul> + <li id="logoutview" style="display: none;"><a href="" name="link">Logout [<span name="user"></span>]</a></li> + </ul> + </nav> + <section id="loginscene" style="display: none;"> + <h1>Login</h1> + <form name="form"> + <input name="user" type="text" placeholder="Username"><br> + <input name="password" type="password" placeholder="Password"><br> + <span style="color: #A40000;" name="error"></span><br> + <button type="submit">Next</button> + </form> + </section> + <section id="loadingscene" style="display: none;"> + <h1>Loading</h1> + Please wait... + </section> + <section id="collectionsscene" style="display: none;"> + <h1>Collections</h1> + <a href="" name="new">Create new addressbook or calendar</a> + <article name="collectiontemplate"> + <h2><span name="color">█ </span><span name="title">Title</span> <small>[<span name="ADDRESSBOOK">addressbook</span><span name="CALENDAR_JOURNAL_TASKS">calendar, journal and tasks</span><span name="CALENDAR_JOURNAL">calendar and journal</span><span name="CALENDAR_TASKS">calendar and tasks</span><span name="JOURNAL_TASKS">journal and tasks</span><span name="CALENDAR">calendar</span><span name="JOURNAL">journal</span><span name="TASKS">tasks</span>]</small></h2> + <span name="description">Description</span> + <ul> + <li>URL: <a name="url">url</a></li> + <li><a href="" name="edit">Edit</a></li> + <li><a href="" name="delete">Delete</a></li> + </ul> + </article> + </section> + <section id="editcollectionscene" style="display: none;"> + <h1>Edit collection</h1> + <h2>Edit <span name="title">title</span>:</h2> + <form> + Title:<br> + <input name="displayname" type="text"><br> + Description:<br> + <input name="description" type="text"><br> + Type:<br> + <select 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> + </select><br> + Color:<br> + <input name="color" type="color"><br> + <span style="color: #A40000;" name="error"></span><br> + <button type="submit" name="submit">Save</button> + <button type="button" name="cancel">Cancel</button> + </form> + </section> + <section id="createcollectionscene" style="display: none;"> + <h1>Create new collection</h1> + <form> + Title:<br> + <input name="displayname" type="text"><br> + Description:<br> + <input name="description" type="text"><br> + Type:<br> + <select 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> + </select><br> + Color:<br> + <input name="color" type="color"><br> + <span style="color: #A40000;" name="error"></span><br> + <button type="submit" name="submit">Create</button> + <button type="button" name="cancel">Cancel</button> + </form> + </section> + <section id="deletecollectionscene" style="display: none;"> + <h1>Delete collection</h1> + <h2>Delete <span name="title">title</span>?</h2> + <span style="color: #A40000;" name="error"></span><br> + <form> + <button type="button" name="delete">Yes</button> + <button type="button" name="cancel">No</button> + </form> + </section> + </body> +</html> |
