snikket-im / snikket-web-portal

This is the web portal for Snikket Chat services. To learn more about what Snikket Chat services are, check the website.

Snikket Web Portal

Development quickstart

$ direnv allow
$ cp example.env .env
$ $EDITOR .env  # to adapt the configuration to your needs
$ pip install -r requirements.txt
$ pip install -r build-requirements.txt
$ make
$ quart run

Configuring

Purely via environment variables

For a list of required and understood environment variables as well as their semantics, please refer to example.env.

Via python code

In addition to statically setting environment variables, it is possible to initialise the environment variables in a python file. To do that, pass the path to the python file as SNIKKET_WEB_PYENV environment variable.

The python file is evaluated before further environment variable processing takes place. Every name defined in that file which begins with an upper case ASCII letter is included in the processing of environment variables for configuration purposes.

For a (non-productive) example of such a file, see example.env.py.

snikket-web-portal's Issues

View/manage push registrations

Protocol: ??
This probably falls under 'Manage devices', push registration should be displayed per device

Manage permissions on Profile (avatar, nickname, vcard)

via PEP permissions

Valid values:

• Everyone
• Friends only
• (cannot be set from the web UI) "Some people" (= whitelist with non-empty whitelist)
• Nobody (= whitelist, with empty whitelist)

Manage Nickname

Protocol: User Nickname

Maybea also allow to configure access model.

Button sizes sometimes differ

E.g. on the invite view, the revoke button is slightly larger:

add the possibility to manage snikket data and users data directly from the web portal

HI,

i wanted to share my idea about the web-portal, i think it would be cool to be able to manage all the files related to a circle-group discussion or from the server in general, controling how much days the messages stay before they are deleted for a cicle discussion or applied in general, also have the view of the current usage of Snikket on the instance.

Thanks.

Enable Italian translations by default

Not sure what the status is here, so this is either a request (for which I can easily submit a PR), or more of a discussion placeholder :)

Weblate says the translation is at 100% now.

CSS Dark mode

UX: Allow a fixed suffix on invite links (e.g. /show) to avoid issues with URL highlighters which do not extend to _ or -

I had an invite code which ended with _ and a recipient was unable to tap it because the URL highlighter did not include the _ in the link. To fight that, we should add a suffix (like /show) to the path in the web portal.

To not break existing links, we should redirect from the bare invite to the /show URL inside the portal.

docker: build from debian:buster-slim instead of debian:buster

All the other Snikket images are building from buster-slim, so it will save resources (e.g. bandwidth and disk space) for users if the portal uses the same base image.

UX: Going back (via browser) to a deleted invite should give proper error flash and redirect to invite list

Currently, a 500 happens, hotfix for 404 is on the way.

View security events

Protocol: ??

Manage Bookmarks

Protocol: XEP-0048 (and possibly others)

Untranslated and technical 'The CSRF token has expired.' message after failed login.

Accidentally I found that untranslated and highly technical message after failed login. In my case I had login page in one tab for a few days, than I tried to login in without reloading it.

UX: iOS onboarding flow

This is a general issue to track revisions to the iOS onboarding flow. It's a placeholder for user testing and feedback we may receive from beta/initial users.

Currently we present a button that links (or will link) to the app store. We do the same for Android, but the install referrer ensures the user is still on a straight path to registering an account.

iOS doesn't have that. After the app is installed they must return to the invite and click the button (which is a little de-emphasized currently because it's irrelevant to most Android users).

Possible future changes:

• Instead of taking the user directly to the app store, show a popup or second page with instructions
• Make the app install section a tabbed box (auto-selecting the current platform if known), with more detailed instructions about how to complete the registration process.
• Detect the invite somehow, some random ideas (not necessarily good ones):
  • Copy invite URI to clipboard in page, check clipboard at app launch
  • Attempt to open the URI periodically in a loop until successful (success can be detected on some platforms, is iOS one of them?). Also JS almost certainly doesn't run when browser isn't focused.
  • Use the web Credentials Management API to save the domain and invite token as username/password for a domain asserted by the app (e.g. invite.snikket.org). The app can then use Shared Web Credentials to access the info stored by the browser. This may be the most reliable/seamless experience. Downside, it probably requires executing Javascript from invite.snikket.org. But the JS will be public, open-source, zero-knowledge and should be no less trustworthy than the native app.

The app should also prompt the user more explicitly to return to the invite if they have one. That can be easily fixed in the next update.

User testing will indicate if there is even a problem to solve here (but I'm 90% sure there is, after similar testing on Android).

Unable to serve assets when running server locally

I'm currently trying to run snikket-web-portal locally to integrate it in a Dockerfile. I'm following the instructions to run the dev server, however I encountered this error message when running make:

python3 -m scss --load-path snikket_web/scss/ -o "snikket_web/static/css/app.css" "snikket_web/scss/app.scss"
[…]
FileNotFoundError: [Errno 2] No such file or directory: 'snikket_web/static/css/app.css'
make: *** [Makefile:16: snikket_web/static/css/app.css] Error 1

To let Make work, I had to do touch snikket_web/static/css/app.css

However, after running the server, I see the assets are not served correctly:

[2020-04-28 17:04:36,130] Running on 0.0.0.0:5000 over http (CTRL + C to quit)
[2020-04-28 17:04:38,745] 172.17.0.1:33502 GET /login 1.1 200 1156 24325
[2020-04-28 17:04:38,905] 172.17.0.1:33502 GET /static/css/app.css 1.1 404 103 4128
[2020-04-28 17:04:38,911] 172.17.0.1:33504 GET /static/css/common.css 1.1 404 103 7325
[2020-04-28 17:04:38,933] 172.17.0.1:33502 GET /favicon.ico 1.1 404 103 3212
[2020-04-28 17:04:39,762] 172.17.0.1:33502 GET /service-worker.js 1.1 404 103 2035
[2020-04-28 17:04:40,359] 172.17.0.1:33510 GET /login 1.1 200 1156 2939
[2020-04-28 17:04:40,441] 172.17.0.1:33510 GET /static/css/app.css 1.1 404 103 3154
[2020-04-28 17:04:40,448] 172.17.0.1:33514 GET /static/css/common.css 1.1 404 103 4843
[2020-04-28 17:04:40,459] 172.17.0.1:33514 GET /favicon.ico 1.1 404 103 1833

In the container I see not assets have been built:

# ls  snikket_web/static/css/
# 

Am I missing on something in the Dockerfile? Or is something missing in the Makefile?

Here is the work-in-progress Dockerfile I was trying:

FROM python:3.7-slim-buster

ENV DEBIAN_FRONTEND noninteractive

RUN apt-get update \
    && apt-get install -y --no-install-recommends \
    make \
    && apt-get clean

COPY Makefile /opt/snikket-web-portal/Makefile

COPY requirements.txt /opt/snikket-web-portal/requirements.txt

COPY build-requirements.txt /opt/snikket-web-portal/build-requirements.txt

COPY snikket_web/ /opt/snikket-web-portal/snikket_web

COPY web_config.py /opt/snikket-web-portal/web_config.py

COPY babel.cfg /opt/snikket-web-portal/babel.cfg

WORKDIR /opt/snikket-web-portal

RUN pip install -r requirements.txt \
    && pip install -r build-requirements.txt

RUN mkdir -p snikket_web/static/css \
    && make

ENV QUART_APP snikket_web:app
ENV QUART_ENV production
ENV SNIKKET_WEB_CONFIG "/opt/snikket-web-portal/web_config.py"

# For production
#RUN pip install hypercorn
#CMD ["hypercorn", "-b", "0.0.0.0:8000", "snikket_web:app"]

# For testing purpose
CMD ["quart", "run", "-h", "0.0.0.0"]

UX: QR code button text

"Not on mobile?" has been reported to be ambiguous (and I tend to agree).

Most people I've tested with are not familiar with the name or usage of QR codes. Rather than "Show QR code" we need to speak to the user's intent when they may want to tap the button. Some options:

• "Send to device"
• "Scan code with device"
• "Show code for mobile device"

The size of avatars is too big!

There should be a sensible limit on how large the avatar image may be.
Don't want to hit stanza size limits on server-to-server connections.

Currently it seems to be possible to upload avatars up to 1MB, which
becomes about 1.33MB with base64-encoding and transport overhead.

It remains unclear what constitutes a sensible limit though.

Apply translator feedback

• Language sometimes too complex
• Replace "apply" with something more specific (e.g. "Update circle")

Allow login via one-time-auth link which includes a token

Useful to open the interface from the app. Requires protocol for the app to retrieve the URL.

This should probably be a short-lived token which can then be upgraded to a long-lived token once.

Manage email address

Protocol: ??

Accessibility: Find a replacement for presentational-only CSS `content`

Problem: Some screenreaders read that.

Potential fixes:

• content: "presentational" / "alt". Doesn’t work except in chrome, and in other browsers this causes the "alt" to be rendered, which we’d want to be blank, thus breaking the layout for non-screenreader use.
• @media speech: Does not seem to work with the affected devices.
• Replace the content with SVG images (preferred), is a bit of work though.

User account actions

This is a brain dump to start a discussion rather than concrete goals right now:

Core actions

• Manage email address #2
• Reset/change password #3 #4
• Edit profile
  • Protocol: User Nickname #6
  • Protocol: User Avatar #5

Additional

• Manage bookmarks #7
• Manage devices #8
• View security events #9
• View/manage push registrations #10
• Enable/disable OMEMO #11
• Manage archive retention #12
• Purge archive #13
• Export data #14
• Import data #15

Use icons instead of unicode symbols

Icons produce a more consistent rendering, especially for users with or without emoji fonts (yes).

Reset forgotten password

If using XEP-0077, this’d require impersonation and an admin token to do. It would be nicer to have a separate API call for this.

Purge Archive

Protocol: Future XEP-0313

Add a "moderator" feature to allow users to manage circles without being admin

Idea: Add a user level for moderators, who cannot delete users or do other admin tasks, but moderate (their own) circles, i.e., invite new users into these circles and remove users from circles.

Use-Case: As a server admin, who likes people to use more XMPP, I want to invite a few people to create circles on my server, so these people can host group chats without asking me to create new invites to their circles.

There are more questions to decide about the exact permissions because such a moderator would, for example, allow people to create accounts without having the permission to delete them.
Also, a moderator should probably not see the full user list. On the other hand, an invite created by a moderator should not invite users to create a second account, but allow them to join a second circle.

Import data

Add an F-Droid button on invite page

Around here I guess:

snikket-web-portal/snikket_web/templates/invite_view.html

Line 27 in 1c4fa92

<li><a href="{{ play_store_url }}"><img alt='{% trans %}Get it on Google Play{% endtrans %}' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png' class="play"/></a></li>

Trademark notice missing in the footer

Manage avatar

Protocol: XEP-0153, User Avatar

Maybea also allow to configure access model.

Internal server error authenticating with incorrect domain

Step 1. Set up a Snikket service at example.com
Step 2. Open the login page of the web portal
Step 3. Enter '[email protected]' with any password

Instead of reporting incorrect credentials, an internal server error is triggered.

UX: Back button after invite create goes to manage, not to where one previously was

Display server version in dashboard

It would be great to know for sure that I am running the version of the server that I think I am and to do so from the dashboard.

No error message on wrong current password when changing password

Manage Devices

Protocol: ??

Temporary workaround for iOS/F-Droids lack of referral onboarding

See #37 and #52 for context.

Manage archive retention

Protocol: User Preferences

Enable/disable OMEMO

Protocol: User Preferences

Export data

Add support for changing the avatar of a Circle MUC from the web portal

Implement token revocation

Requires https://issues.prosody.im/1503

Re-test dark mode

Admin: User management

Admin should be able to:

• List current user accounts

• Generate a password reset link

• Delete a user account

• Create a new invite

• List pending invites

• Delete a pending invite

Working on an API spec.

Dark theme bugs

• Invite registration form hostname background is too bright (thanks @linkmauve)
• Login form heading is too dark

Change password

Protocol: XEP-0077

Snikket Android is confused when the HTTPS QR code instead of the XMPP QR code is scanned

Steps to reproduce

1. Open an invite in the broswer
2. Tap the "not on mobile?" button
3. Scan QR code with Snikket Android

What happened

It wants to add some contact to an existing account.

What should happen instead

It should register using the invitation.

Additional information

I think this should be improved in some way, because this might be the first instinct a user has (while other users may have the first instinct to scan the QR code with a dedicated scanner and open it in a browser, so we need something which works for both).

I would suggest to maybe add the XMPP URI to the HTTPS URL as anchor or something so that it can be extracted by the apps when they are faced with the HTTPS QR code.

Any reasons against that?

Add the ability to modify user roles

User objects in the API will gain a 'roles' array, but for Snikket purposes we can assume it will always consist of a single entry.

Planned possible roles:

• prosody:admin
• prosody:user
• prosody:restricted

These values would map to text strings such as "Admin", "Normal" and "Limited".

It potentially makes sense to choose the role that someone will be when they accept an invitation (invitations with attached roles are already supported, but possibly just need a couple of lines to expose them in the admin API).

Set up a build on docker hub

I seem to lack permissions to do so.

"Expires" not in Weblate

This "Expires" doesn't show up in Weblate so it's not translated:

snikket-web-portal/snikket_web/templates/admin_invites.html

Line 21 in e9d479a

<th>{% trans %}Expires{% endtrans %}</th>

Add link to invite users from 'Manage users' section

A first-time user may instinctively head to 'Manage users' to add first users to their server. Unfortunately this only contains controls for managing existing users. It would be good, especially if the user list is empty (apart from the admin), to show an info box and/or provide a path to create invites for new users.