New Web UI

[MatthewHana]

Updated web UI to a more modern interface while keeping the HTML structure as similar to the original as possible. Fewest possible modifications were made to fn.js and only in relation to UI enhancements.

This PR incorporates pull requests #1305 and #1306.

Updates include:
-Mobile view compatibility
-New light color scheme using primary colors based off Radicale's official colors
-Dialog theme for most sections
-Floating Action Buttons (FAB's) for creating and uploading a new collection
-Commands to edit/delete a collection have become buttons that only show on hover.
-Improved loading screen
-New loading circle with consistent color scheme
-More explanation for dialog text
-Added warning to delete screen
-Consistent capitalisation
-Moved styling from HTML to CSS
-Support for Webcal subscriptions (support added in PR #1229) (NEW)

[MatthewHana]

Attached screenshots of new UI.

Login

Loading

Collections

Collections (when hovering)

Create

Edit

Delete

Upload

Mobile View

Loading spinner

[samip5]

I merged it into my fork, but it seems that the icons will not load. 🤔

[MatthewHana]

I merged it into my fork, but it seems that the icons will not load. 🤔

Do they 404 or is it something else? The icons are SVG so they should render on all modern browsers. Which browser are you using?

[samip5]

I merged it into my fork, but it seems that the icons will not load. 🤔

Do they 404 or is it something else? The icons are SVG so they should render on all modern browsers. Which browser are you using?

404, and Opera.

[pbiering]

@MatthewHana : please rebase this to v3.2-devel branch

[MatthewHana]

@MatthewHana : please rebase this to v3.2-devel branch

I will rebase this in a few days and also add support for PR #1229

[pbiering]

@MatthewHana : can you also work on optional CAPTCHA support like already discussed here: #1257 - best in an abstract way so at least the 4 known ones can be used + potential upcoming ones easily added.

If you need help, I can potentially support here as having implemented or extended CAPTCHA support in native Phyton / Python+Django / PHP / Perl already.

[MatthewHana]

@MatthewHana : can you also work on optional CAPTCHA support like already discussed here: #1257 - best in an abstract way so at least the 4 known ones can be used + potential upcoming ones easily added.

If you need help, I can potentially support here as having implemented or extended CAPTCHA support in native Phyton / Python+Django / PHP / Perl already.

Sure, I'll have a look into it.

[MatthewHana]

• Rebased to v3.2-devel
• Further UI improvements
• Add Webcal subscriptions UI
• Add CAPTCHA

[samip5]

While adding a captcha, please don't use Google's.

[return42]

While adding a captcha, please don't use Google's.

There is a simple captcha solution available from pypi --> https://captcha.lepture.com/

[pbiering]

While adding a captcha, please don't use Google's.

I would suggest keeping it flexible and implement

• hCaptcha
• reCaptcha (at least v3)
• FriendlyCaptcha
• Cloudflare's Turnstile

I have implementations running supporting all 4 by simple toggles, would recommend having this also for "Radicale".

Only for hints:

python/Django: https://github.com/pbiering/mailman3-rpm/blob/main/django_multi_captcha_support.py

python(Mailman2/reCaptcha extension with FriendlyCaptcha+hCaptcha): https://launchpadlibrarian.net/596731924/mailman-2.1-hCaptcha-FriendyCaptcha-20220415.diff

[pbiering]

While adding a captcha, please don't use Google's.

There is a simple captcha solution available from pypi --> https://captcha.lepture.com/

They dropped support for Python 3.7 in latest release, this would lead to question which Python versions should be supported at all.

[return42]

They dropped support for Python 3.7 in latest release, this would lead to question which Python versions should be supported at all.

This is what most of regularly updated packages do / Python EOL was in 2023-06-27 .. about vobject see comment from @da4089 --> py-vobject/vobject#1 (comment)

[MatthewHana]

Update: Added Webcal support in web UI ✔️
You can now add and edit Webcals in the web UI.

[MatthewHana]

Hi all, please see discussion #1402 regarding CAPTCHA. It unfortunately can not be handled in this PR.

[MatthewHana]

I merged it into my fork, but it seems that the icons will not load. 🤔

Do they 404 or is it something else? The icons are SVG so they should render on all modern browsers. Which browser are you using?

404, and Opera.

Hi @samip5, I couldn't get it to 404. Any possibility of sharing your Devtools network log or anything that could help me to replicate? Is it a possibly a content security policy issue?

[pbiering]

Only code review, functional tests will be done later

[pbiering]

Merged, please let test further

[pbiering]

looks all fine now, minor candidates for improvement found:

• "HREF" should have some explanation of it's meaning, the resulting directory name on server side.
• "Copy URL to Clipboard" symbol/support on the URL box
• "Mouseover" on the URL box displaying the whole URL

[MatthewHana]

• "HREF" should have some explanation of it's meaning, the resulting directory name on server side.
• "Mouseover" on the URL box displaying the whole URL
  Could be implemented. Will do it in a few weeks when I have time.

• "Copy URL to Clipboard" symbol/support on the URL box
  More complicated to implement and could only work on HTTPS. Would welcome community input on the demand for this feature.

What I would like to do next is a holistic refactoring of the web client JavaScript to make it easier to add functionality into the future. I also want to split it into multiple JS to make it easier to make and track changes to the code. Currently UI, DAV, and Helper functions are all in the same file- I would like to split them up and eventually implement JS testing.

[pbiering]

What I would like to do next is a holistic refactoring of the web client JavaScript

That is a very good idea, do you suggest starting 3.2.0 before or postpone until this is done? In principle, there is no hurry for 3.2.0 at the moment anyhow.