🎉 Finally set the URL for the App Store

See-Also: https://snikket.org/blog/snikket-ios-public-release/

.github/workflows/build-portal-image.yml

@@ -1,23 +0,0 @@
-name: Docker image build
-
-on:
-  push:
-    branches:
-      - master
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-    - uses: actions/checkout@v2
-    - name: Build the Docker image
-      run: >-
-        docker build . \
-          --build-arg=BUILD_SERIES=dev \
-          --build-arg=BUILD_ID="$(echo "$GITHUB_SHA" | head -c 12)" \
-          --tag snikket/snikket-web-portal:dev
-    - name: Log into registry
-      run: echo "${{ secrets.DOCKER_HUB_ACCESS_TOKEN }}" | docker login -u snikket --password-stdin
-    - name: Push the Docker image
-      run: docker push snikket/snikket-web-portal:dev

.github/workflows/build-portal-release-image.yml

@@ -1,31 +0,0 @@
----
-name: Docker release image build
-
-"on":
-  push:
-    tags:
-      - release/*.*
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Build the Docker image
-        run: >-
-          echo "Building ref $GITHUB_REF...";
-          RELEASE_TAG="${GITHUB_REF#refs/tags/release/}";
-          RELEASE_SERIES="${RELEASE_TAG%.*}";
-          RELEASE_VER="${RELEASE_TAG#$RELEASE_SERIES.}";
-          docker build . \
-            --build-arg=BUILD_SERIES="$RELEASE_SERIES" \
-            --build-arg=BUILD_ID="$RELEASE_VER" \
-            --tag snikket/snikket-web-portal:"$RELEASE_SERIES"
-      - name: Log into registry
-        run: echo "${{ secrets.DOCKER_HUB_ACCESS_TOKEN }}" | docker login -u snikket --password-stdin
-      - name: Push the Docker image
-        run: >-
-          RELEASE_TAG="${GITHUB_REF#refs/tags/release/}";
-          RELEASE_SERIES="${RELEASE_TAG%.*}";
-          docker push snikket/snikket-web-portal:"$RELEASE_SERIES"

.github/workflows/main.yaml

@@ -27,6 +27,7 @@ jobs:
           set -euo pipefail
           pip install mypy
           pip install -r requirements.txt
+          pip install -r build-requirements.txt
       - name: Typecheck
         run: |
           python -m mypy --config mypy.ini -p snikket_web
@@ -48,3 +49,12 @@ jobs:
       - name: Linting
         run: |
           python -m flake8 snikket_web
+
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Build the Docker image
+        run: >-
+          docker build .

Dockerfile

@@ -1,46 +1,31 @@
-FROM debian:buster
+FROM debian:buster-slim
 
 ARG BUILD_SERIES=dev
 ARG BUILD_ID=0
 
-ENV DEBIAN_FRONTEND noninteractive
+COPY requirements.txt /opt/snikket-web-portal/requirements.txt
+COPY build-requirements.txt /opt/snikket-web-portal/build-requirements.txt
+COPY Makefile /opt/snikket-web-portal/Makefile
+COPY snikket_web/ /opt/snikket-web-portal/snikket_web
+COPY babel.cfg /opt/snikket-web-portal/babel.cfg
 
-# This Dockerfile attempts to strike a balance between image size and time it
-# takes to do an incremental build on changes.
-# Improvements welcome.
+WORKDIR /opt/snikket-web-portal
 
 RUN set -eu; \
+    export DEBIAN_FRONTEND=noninteractive ; \
     apt-get update ; \
     apt-get install -y --no-install-recommends \
         python3 python3-pip python3-setuptools python3-wheel \
         libpython3-dev \
         make build-essential \
+        netcat \
         ; \
-    apt-get clean ; rm -rf /var/lib/apt/lists
-
-COPY requirements.txt /opt/snikket-web-portal/requirements.txt
-COPY build-requirements.txt /opt/snikket-web-portal/build-requirements.txt
-
-WORKDIR /opt/snikket-web-portal
-
-RUN set -eu; \
     pip3 install -r requirements.txt; \
     pip3 install -r build-requirements.txt; \
-    rm -rf /root/.cache;
-
-COPY Makefile /opt/snikket-web-portal/Makefile
-COPY snikket_web/ /opt/snikket-web-portal/snikket_web
-COPY babel.cfg /opt/snikket-web-portal/babel.cfg
-
-# NOTE: abusing true(1) as a terrible way to disable a specific command. If
-# one merged all the RUN commands into one, one would want to run the
-# uninstall/remove commands there, but with the split up RUN commands it is
-# rather pointless.
-RUN set -eu; \
     make; \
-    true pip3 uninstall -yr build-requirements.txt; \
-    true apt-get remove -y build-essential make libpython3-dev; \
-    true apt-get autoremove -y; \
+    pip3 uninstall -yr build-requirements.txt; \
+    apt-get remove -y build-essential make libpython3-dev; \
+    apt-get autoremove -y; \
     pip3 install hypercorn; \
     rm -rf /root/.cache; \
     apt-get clean ; rm -rf /var/lib/apt/lists
@@ -50,5 +35,9 @@ ENV SNIKKET_WEB_PYENV=/etc/snikket-web-portal/env.py
 
 ENV SNIKKET_WEB_PROSODY_ENDPOINT=http://127.0.0.1:5280/
 
+HEALTHCHECK CMD nc -zv ${SNIKKET_TWEAK_PORTAL_INTERNAL_HTTP_INTERFACE:-127.0.0.1} ${SNIKKET_TWEAK_PORTAL_INTERNAL_HTTP_PORT:-5765}
+
+RUN echo "$BUILD_SERIES $BUILD_ID" > /opt/snikket-web-portal/.app_version
+
 ADD docker/entrypoint.sh /entrypoint.sh
 ENTRYPOINT ["/bin/sh", "/entrypoint.sh"]

build-requirements.txt

@@ -1,3 +1,4 @@
 pyscss~=1.3
 mypy
 python-dotenv~=0.15
+types-toml

docker/entrypoint.sh

@@ -2,4 +2,7 @@
 
 export SNIKKET_WEB_DOMAIN="$SNIKKET_DOMAIN"
 
-exec hypercorn -b "127.0.0.1:5765" 'snikket_web:create_app()'
+export SNIKKET_TWEAK_PORTAL_INTERNAL_HTTP_INTERFACE="${SNIKKET_TWEAK_PORTAL_INTERNAL_HTTP_INTERFACE-127.0.0.1}"
+export SNIKKET_TWEAK_PORTAL_INTERNAL_HTTP_PORT="${SNIKKET_TWEAK_PORTAL_INTERNAL_HTTP_PORT-5765}"
+
+exec hypercorn -b "${SNIKKET_TWEAK_PORTAL_INTERNAL_HTTP_INTERFACE}:${SNIKKET_TWEAK_PORTAL_INTERNAL_HTTP_PORT}" 'snikket_web:create_app()'

requirements.txt

@@ -1,5 +1,5 @@
 aiohttp~=3.6
-quart~=0.11
+quart~=0.11,<0.15
 flask-wtf~=0.14
 hsluv~=0.0.2
 flask-babel~=1.0

snikket_web/__init__.py

@@ -21,7 +21,7 @@ from quart import (
 import environ
 
 from . import colour, infra
-from ._version import version, version_info  # noqa:F401
+from ._version import version  # noqa:F401
 
 
 async def proc() -> typing.Dict[str, typing.Any]:
@@ -48,6 +48,7 @@ async def proc() -> typing.Dict[str, typing.Any]:
         "text_to_css": colour.text_to_css,
         "lang": infra.selected_locale(),
         "user_info": user_info,
+        "is_in_debug_mode": current_app.debug,
     }
 
 
@@ -143,8 +144,25 @@ class AppConfig:
     domain = environ.var()
     site_name = environ.var("")
     avatar_cache_ttl = environ.var(1800, converter=int)
-    languages = environ.var(["de", "en"], converter=autosplit)
-    apple_store_url = environ.var("")
+    languages = environ.var([
+        "da",
+        "de",
+        "en",
+        "fr",
+        "id",
+        "it",
+        "pl",
+        "sv",
+    ], converter=autosplit)
+    apple_store_url = environ.var(
+        "https://apps.apple.com/us/app/snikket/id1545164189",
+    )
+    # Default limit of 1 MiB is what was discovered to be the effective limit
+    # in #67, hence we set that here for now.
+    # Future versions may change this default, and the standard deployment
+    # tools may also very well override it.
+    max_avatar_size = environ.var(1024*1024, converter=int)
+    show_metrics = environ.bool_var(True)
 
 
 _UPPER_CASE = "".join(map(chr, range(ord("A"), ord("Z")+1)))
@@ -157,7 +175,7 @@ def create_app() -> quart.Quart:
         pass
     else:
         import runpy
-        init_vars = runpy.run_path(env_init)  # type:ignore
+        init_vars = runpy.run_path(env_init)
         for name, value in init_vars.items():
             if not name:
                 continue
@@ -175,6 +193,8 @@ def create_app() -> quart.Quart:
     app.config["SITE_NAME"] = config.site_name or config.domain
     app.config["AVATAR_CACHE_TTL"] = config.avatar_cache_ttl
     app.config["APPLE_STORE_URL"] = config.apple_store_url
+    app.config["MAX_AVATAR_SIZE"] = config.max_avatar_size
+    app.config["SHOW_METRICS"] = config.show_metrics
 
     app.context_processor(proc)
     app.register_error_handler(

snikket_web/_version.py

@@ -1,5 +1,15 @@
-version_info = (0, 1, 0, "a0")
-version = (
-    ".".join(map(str, version_info[:3])) +
-    (f"-{version_info[3]}" if version_info[3] else "")
-)
+import os
+import subprocess
+
+version = "(unknown)"
+
+if os.path.exists(".app_version"):
+    with open(".app_version") as f:
+        version = f.read().strip()
+elif os.path.exists(".git"):
+    try:
+        version = subprocess.check_output([
+            "git", "describe", "--always"
+        ]).strip().decode("utf8")
+    except OSError:
+        version = "dev (unknown)"

snikket_web/admin.py

@@ -1,5 +1,6 @@
-import asyncio
 import json
+import resource
+import time
 import typing
 
 from datetime import datetime
@@ -18,13 +19,14 @@ from quart import (
     url_for,
     request,
     abort,
+    flash,
+    current_app,
 )
-import flask_wtf
 
-from flask_babel import lazy_gettext as _l
+from flask_babel import lazy_gettext as _l, _
 
-from . import prosodyclient
-from .infra import client, circle_name
+from . import prosodyclient, _version
+from .infra import client, circle_name, BaseForm
 
 bp = Blueprint("admin", __name__, url_prefix="/admin")
 
@@ -32,11 +34,14 @@ bp = Blueprint("admin", __name__, url_prefix="/admin")
 @bp.route("/")
 @client.require_admin_session()
 async def index() -> str:
-    return await render_template("admin_home.html")
+    show_metrics = current_app.config["SHOW_METRICS"]
+    return await render_template(
+        "admin_home.html",
+        show_metrics=show_metrics,
+    )
 
 
-class PasswordResetLinkPost(flask_wtf.FlaskForm):  # type: ignore
-    action_create = wtforms.StringField()
+class PasswordResetLinkPost(BaseForm):
     action_revoke = wtforms.StringField()
 
 
@@ -47,15 +52,99 @@ async def users() -> str:
         await client.list_users(),
         key=lambda x: x.localpart
     )
+    invite_form = InvitePost()
+    await invite_form.init_choices()
     reset_form = PasswordResetLinkPost()
     return await render_template(
         "admin_users.html",
         users=users,
         reset_form=reset_form,
+        invite_form=invite_form,
     )
 
 
-class DeleteUserForm(flask_wtf.FlaskForm):  # type:ignore
+_LIMITED_ROLE_NAME = _("Limited")
+
+
+class EditUserForm(BaseForm):
+    localpart = wtforms.StringField(
+        _l("Login name"),
+    )
+
+    display_name = wtforms.StringField(
+        _l("Display name"),
+    )
+
+    role = wtforms.RadioField(
+        _l("Access Level"),
+        choices=[
+            # NOTE: enable this only after something has been done which
+            # actually enforces the described restrictions :).
+            # ("prosody:restricted", _LIMITED_ROLE_NAME),
+            ("prosody:normal", _l("Normal user")),
+            ("prosody:admin", _l("Administrator")),
+        ],
+    )
+
+    action_save = wtforms.SubmitField(
+        _l("Update user"),
+    )
+
+    action_create_reset = wtforms.SubmitField(
+        _l("Create password reset link"),
+    )
+
+
+@bp.route("/user/<localpart>/", methods=["GET", "POST"])
+@client.require_admin_session()
+async def edit_user(localpart: str) -> typing.Union[quart.Response, str]:
+    target_user_info = await client.get_user_by_localpart(localpart)
+
+    form = EditUserForm()
+    if form.validate_on_submit():
+        if form.action_create_reset.data:
+            target_user_info = await client.get_user_by_localpart(localpart)
+            reset_link = await client.create_password_reset_invite(
+                localpart=localpart,
+                ttl=86400,
+            )
+            await flash(
+                _("Password reset link created"),
+                "success",
+            )
+            return redirect(url_for(
+                ".user_password_reset_link",
+                id_=reset_link.id_,
+            ))
+
+        await client.update_user(
+            localpart,
+            display_name=form.display_name.data,
+            roles=[form.role.data],
+        )
+
+        await flash(
+            _("User information updated."),
+            "success",
+        )
+        return redirect(url_for(".edit_user", localpart=localpart))
+
+    elif request.method == "GET":
+        form.localpart.data = target_user_info.localpart
+        form.display_name.data = target_user_info.display_name
+        if target_user_info.roles:
+            form.role.data = target_user_info.roles[0]
+        else:
+            form.role.data = "prosody:normal"
+
+    return await render_template(
+        "admin_edit_user.html",
+        target_user=target_user_info,
+        form=form,
+    )
+
+
+class DeleteUserForm(BaseForm):
     action_delete = wtforms.SubmitField(
         _l("Delete user permanently")
     )
@@ -69,6 +158,10 @@ async def delete_user(localpart: str) -> typing.Union[str, quart.Response]:
     if form.validate_on_submit():
         if form.action_delete.data:
             await client.delete_user_by_localpart(localpart)
+            await flash(
+                _("User deleted"),
+                "success",
+            )
         return redirect(url_for(".users"))
 
     return await render_template(
@@ -94,37 +187,47 @@ async def debug_user(localpart: str) -> typing.Union[str, quart.Response]:
     )
 
 
-@bp.route("/users/password-reset/-", methods=["POST"])
+@bp.route("/users/password-reset/<id_>", methods=["GET", "POST"])
 @client.require_admin_session()
-async def create_password_reset_link() -> typing.Union[str, quart.Response]:
-    form = PasswordResetLinkPost()
-    if not form.validate_on_submit():
-        abort(400)
-
-    if form.action_create.data:
-        localpart = form.action_create.data
-        target_user_info = await client.get_user_by_localpart(localpart)
-        reset_link = await client.create_password_reset_invite(
-            localpart=localpart,
-            ttl=86400,
+async def user_password_reset_link(
+        id_: str,
+        ) -> typing.Union[str, quart.Response]:
+    invite_info = await client.get_invite_by_id(
+        id_,
+    )
+    if invite_info.jid is None:
+        await flash(
+            _("Password reset link not found"),
+            "alert",
         )
-    elif form.action_revoke.data:
-        await client.delete_invite(form.action_revoke.data)
         return redirect(url_for(".users"))
 
+    localpart = prosodyclient.split_jid(invite_info.jid)[0]
+
+    form = PasswordResetLinkPost()
+    if form.validate_on_submit():
+        if form.action_revoke.data:
+            await client.delete_invite(id_)
+            await flash(
+                _("Password reset link deleted"),
+                "success",
+            )
+            return redirect(url_for(".edit_user", localpart=localpart))
+        abort(400)
+
     return await render_template(
         "admin_reset_user_password.html",
-        target_user=target_user_info,
-        reset_link=reset_link,
+        localpart=localpart,
+        reset_link=invite_info,
         form=form,
     )
 
 
-class InvitesListForm(flask_wtf.FlaskForm):  # type:ignore
+class InvitesListForm(BaseForm):
     action_revoke = wtforms.StringField()
 
 
-class InvitePost(flask_wtf.FlaskForm):  # type:ignore
+class InvitePost(BaseForm):
     circles = wtforms.SelectMultipleField(
         _l("Invite to circle"),
         # NOTE: This is for when/if we ever support multi-group invites.
@@ -218,7 +321,7 @@ async def invitations() -> typing.Union[str, quart.Response]:
     )
 
 
-class InviteForm(flask_wtf.FlaskForm):  # type:ignore
+class InviteForm(BaseForm):
     action_revoke = wtforms.SubmitField(
         _l("Revoke")
     )
@@ -243,6 +346,10 @@ async def create_invite() -> typing.Union[str, quart.Response]:
                 group_ids=form.circles.data,
                 ttl=form.lifetime.data,
             )
+        await flash(
+            _("Invitation created"),
+            "success",
+        )
         return redirect(url_for(".edit_invite", id_=invite.id_))
     return await render_template("admin_create_invite.html",
                                  invite_form=form)
@@ -255,7 +362,11 @@ async def edit_invite(id_: str) -> typing.Union[str, quart.Response]:
         invite_info = await client.get_invite_by_id(id_)
     except aiohttp.ClientResponseError as exc:
         if exc.status == 404:
-            abort(404)
+            await flash(
+                _("No such invitation exists"),
+                "alert",
+            )
+            return redirect(url_for(".invitations"))
     circles = await client.list_groups()
     circle_map = {
         circle.id_: circle
@@ -266,6 +377,10 @@ async def edit_invite(id_: str) -> typing.Union[str, quart.Response]:
     if form.validate_on_submit():
         if form.action_revoke.data:
             await client.delete_invite(id_)
+            await flash(
+                _("Invitation revoked"),
+                "success",
+            )
             return redirect(url_for(".invitations"))
         return redirect(url_for(".edit_invite", id_=id_))
 
@@ -278,7 +393,7 @@ async def edit_invite(id_: str) -> typing.Union[str, quart.Response]:
     )
 
 
-class CirclePost(flask_wtf.FlaskForm):  # type:ignore
+class CirclePost(BaseForm):
     name = wtforms.StringField(
         _l("Name"),
         validators=[wtforms.validators.InputRequired()],
@@ -314,6 +429,10 @@ async def create_circle() -> typing.Union[str, quart.Response]:
         circle = await client.create_group(
             name=create_form.name.data,
         )
+        await flash(
+            _("Circle created"),
+            "success",
+        )
         return redirect(url_for(".edit_circle", id_=circle.id_))
 
     return await render_template(
@@ -322,7 +441,7 @@ async def create_circle() -> typing.Union[str, quart.Response]:
     )
 
 
-class EditCircleForm(flask_wtf.FlaskForm):  # type:ignore
+class EditCircleForm(BaseForm):
     name = wtforms.StringField(
         _l("Name"),
         validators=[wtforms.validators.InputRequired()],
@@ -359,27 +478,27 @@ async def edit_circle(id_: str) -> typing.Union[str, quart.Response]:
             )
         except aiohttp.ClientResponseError as exc:
             if exc.status == 404:
+                await flash(
+                    _("No such circle exists"),
+                    "alert",
+                )
                 return redirect(url_for(".circles"))
             raise
 
-        circle_members = await asyncio.gather(*(
-            client.get_user_by_localpart(
-                localpart,
-                session=session,
-            )
+        users = {
+            user.localpart: user
+            for user in await client.list_users()
+        }
+        circle_members = [
+            (localpart, users.get(localpart))
             for localpart in sorted(circle.members)
-        ))
-
-        users = await client.list_users()
+        ]
 
     form = EditCircleForm()
     form.user_to_add.choices = sorted(
-        (
-            (u.localpart, u.localpart)
-            for u in users
-            if u.localpart not in circle.members
-        ),
-        key=lambda x: x[1]
+        (localpart, localpart)
+        for localpart in users.keys()
+        if localpart not in circle.members
     )
     valid_users = [x[0] for x in form.user_to_add.choices]
 
@@ -396,21 +515,36 @@ async def edit_circle(id_: str) -> typing.Union[str, quart.Response]:
                 id_,
                 new_name=form.name.data,
             )
+            await flash(
+                _("Circle data updated"),
+                "success",
+            )
         elif form.action_delete.data:
             await client.delete_group(id_)
+            await flash(
+                _("Circle deleted"),
+                "success",
+            )
             return redirect(url_for(".circles"))
         elif form.action_add_user.data:
             if form.user_to_add.data in valid_users:
-                print("is valid")
                 await client.add_group_member(
                     id_,
                     form.user_to_add.data,
                 )
+                await flash(
+                    _("User added to circle"),
+                    "success",
+                )
         elif form.action_remove_user.data:
             await client.remove_group_member(
                 id_,
                 form.action_remove_user.data,
             )
+            await flash(
+                _("User removed from circle"),
+                "success",
+            )
 
         return redirect(url_for(".edit_circle", id_=id_))
     else:
@@ -423,3 +557,148 @@ async def edit_circle(id_: str) -> typing.Union[str, quart.Response]:
         circle_members=circle_members,
         invite_form=invite_form,
     )
+
+
+_CPU_EPOCH = time.process_time()
+_MONOTONIC_EPOCH = time.monotonic()
+
+
+def get_system_stats() -> typing.MutableMapping[
+        str,
+        typing.Optional[typing.Union[int, float]]]:
+    pagesize = resource.getpagesize()
+    my_rss: typing.Optional[int] = None
+    try:
+        with open("/proc/self/statm") as f:
+            stats = f.read().split()
+        my_rss = int(stats[1]) * pagesize
+    except (ValueError, IndexError, TypeError, OSError):
+        pass
+
+    my_cpu = (
+        (time.process_time() - _CPU_EPOCH) /
+        (time.monotonic() - _MONOTONIC_EPOCH)
+    )
+
+    mem_total, mem_available = None, None
+    load5: typing.Optional[float] = None
+
+    try:
+        with open("/proc/loadavg") as f:
+            stats = f.read().split()
+        load5 = float(stats[1])
+    except (ValueError, IndexError, TypeError, OSError):
+        pass
+
+    try:
+        with open("/proc/meminfo") as f:
+            for line in f:
+                if line.startswith("MemTotal"):
+                    mem_total = int(line.split()[1]) * 1024
+                elif line.startswith("MemAvailable"):
+                    mem_available = int(line.split()[1]) * 1024
+                if mem_total is not None and mem_available is not None:
+                    break
+    except (ValueError, TypeError, IndexError, OSError):
+        pass
+
+    return {
+        "portal_rss": my_rss,
+        "portal_cpu": my_cpu,
+        "load5": load5,
+        "mem_total": mem_total,
+        "mem_available": mem_available,
+    }
+
+
+class AnnouncementForm(BaseForm):
+    text = wtforms.StringField(
+        _("Message contents"),
+        widget=wtforms.widgets.TextArea(),
+        validators=[wtforms.validators.DataRequired()],
+    )
+
+    online_only = wtforms.BooleanField(
+        _("Only send to online users"),
+    )
+
+    action_post_all = wtforms.SubmitField(
+        _("Post to all users"),
+    )
+
+    action_send_preview = wtforms.SubmitField(
+        _("Send preview to yourself"),
+    )
+
+
+@bp.route("/system/", methods=["GET", "POST"])
+@client.require_admin_session()
+async def system() -> typing.Union[str, quart.Response]:
+    form = AnnouncementForm()
+
+    if form.validate_on_submit():
+        recipients = "self"
+        if form.action_post_all.data:
+            if form.online_only.data:
+                recipients = "online"
+            else:
+                recipients = "all"
+
+        await client.post_announcement(
+            form.text.data,
+            recipients=recipients,
+        )
+        await flash(
+            _("Announcement sent!"),
+            "success",
+        )
+        if recipients != "self":
+            # redirect only if not previewing
+            return redirect(url_for(".system"))
+
+    version = None
+    now = None
+    show_metrics = current_app.config["SHOW_METRICS"]
+    if show_metrics:
+        version = await client.get_server_version()
+        now = time.time()
+        try:
+            prosody_metrics = await client.get_system_metrics()
+        except quart.exceptions.NotFound:
+            # server does not offer the endpoint for whatever reason -- ignore
+            prosody_metrics = {}
+
+        metrics = get_system_stats()
+        try:
+            prosody_cpu_metrics = prosody_metrics["cpu"]
+        except KeyError:
+            pass
+        else:
+            metrics["prosody_cpu"] = (prosody_cpu_metrics["value"] /
+                                      (now - prosody_cpu_metrics["since"]))
+
+        try:
+            metrics["prosody_rss"] = prosody_metrics["memory"]
+        except KeyError:
+            pass
+
+        try:
+            metrics["prosody_devices"] = prosody_metrics["c2s"]
+        except KeyError:
+            pass
+
+        for k in list(metrics.keys()):
+            if metrics[k] is None:
+                # so that defaulting in jinja works
+                del metrics[k]
+    else:
+        metrics = {}
+
+    return await render_template(
+        "admin_system.html",
+        metrics=metrics,
+        version=_version.version,
+        prosody_version=version,
+        form=form,
+        show_metrics=show_metrics,
+    )

snikket_web/infra.py

@@ -1,5 +1,6 @@
 import base64
 import itertools
+import math
 import secrets
 import typing
 
@@ -10,6 +11,7 @@ from quart import (
 )
 
 import flask_babel
+import flask_wtf
 from flask_babel import _
 
 from . import prosodyclient
@@ -21,11 +23,20 @@ client.default_login_redirect = "main.login"
 babel = flask_babel.Babel()
 
 
+BYTE_UNIT_SCALE_MAP = [
+    "B",
+    "kiB",
+    "MiB",
+    "GiB",
+    "TiB",
+]
+
+
 @babel.localeselector  # type:ignore
 def selected_locale() -> str:
     selected = request.accept_languages.best_match(
         current_app.config['LANGUAGES']
-    )
+    ) or current_app.config['LANGUAGES'][0]
     return selected
 
 
@@ -41,12 +52,27 @@ def circle_name(c: typing.Any) -> str:
     return c.name
 
 
+def format_bytes(n: float) -> str:
+    scale = math.floor(math.log(n, 1024))
+    try:
+        unit = BYTE_UNIT_SCALE_MAP[scale]
+        factor = 1024**scale
+    except ValueError:
+        unit = "TiB"
+        factor = 1024**4
+    if factor > 1:
+        return "{:.1f} {}".format(n / factor, unit)
+    return "{} {}".format(n, unit)
+
+
 def init_templating(app: quart.Quart) -> None:
     app.template_filter("repr")(repr)
     app.template_filter("format_datetime")(flask_babel.format_datetime)
     app.template_filter("format_date")(flask_babel.format_date)
     app.template_filter("format_time")(flask_babel.format_time)
     app.template_filter("format_timedelta")(flask_babel.format_timedelta)
+    app.template_filter("format_percent")(flask_babel.format_percent)
+    app.template_filter("format_bytes")(format_bytes)
     app.template_filter("flatten")(flatten)
     app.template_filter("circle_name")(circle_name)
 
@@ -55,3 +81,14 @@ def generate_error_id() -> str:
     return base64.b32encode(secrets.token_bytes(8)).decode(
         "ascii"
     ).rstrip("=")
+
+
+class BaseForm(flask_wtf.FlaskForm):  # type:ignore
+    def __init__(self, *args: typing.Any, **kwargs: typing.Any):
+        meta = kwargs["meta"] = dict(kwargs.get("meta", {}))
+        if "locales" not in meta:
+            locale = flask_babel.get_locale()
+            if locale:
+                meta["locales"] = [str(locale)]
+
+        super().__init__(*args, **kwargs)

snikket_web/invite.py

@@ -16,10 +16,9 @@ from quart import (
 
 import wtforms
 
-import flask_wtf
 from flask_babel import lazy_gettext as _l
 
-from .infra import client, selected_locale
+from .infra import client, selected_locale, BaseForm
 
 
 bp = Blueprint("invite", __name__)
@@ -48,13 +47,20 @@ def context() -> typing.Mapping[str, typing.Any]:
 
 
 @bp.route("/<id_>")
-async def view(id_: str) -> str:
+async def view_old(id_: str) -> quart.Response:
+    return redirect(url_for(".view", id_=id_))
+
+
+@bp.route("/<id_>/")
+async def view(id_: str) -> typing.Union[quart.Response,
+                                         typing.Tuple[str, int],
+                                         str]:
     try:
         invite = await client.get_public_invite_by_id(id_)
     except aiohttp.ClientResponseError as exc:
         if exc.status == 404:
             # invite expired
-            return await render_template("invite_invalid.html")
+            return await render_template("invite_invalid.html"), 404
         raise
 
     if invite.reset_localpart is not None:
@@ -79,16 +85,23 @@ async def view(id_: str) -> str:
     )
     apple_store_url = current_app.config["APPLE_STORE_URL"]
 
-    return await render_template(
+    body = await render_template(
         "invite_view.html",
         invite=invite,
         play_store_url=play_store_url,
         apple_store_url=apple_store_url,
+        f_droid_url="market://details?id=org.snikket.android",
         invite_id=id_,
     )
+    return quart.Response(
+        body,
+        headers={
+            "Link": "<{}> rel=\"alternate\"".format(invite.xmpp_uri),
+        }
+    )
 
 
-class RegisterForm(flask_wtf.FlaskForm):  # type:ignore
+class RegisterForm(BaseForm):
     localpart = wtforms.StringField(
         _l("Username"),
     )
@@ -102,7 +115,7 @@ class RegisterForm(flask_wtf.FlaskForm):  # type:ignore
         validators=[wtforms.validators.InputRequired(),
                     wtforms.validators.EqualTo(
                         "password",
-                        _l("The passwords must match")
+                        _l("The passwords must match.")
                     )]
     )
 
@@ -134,15 +147,15 @@ async def register(id_: str) -> typing.Union[str, quart.Response]:
         except aiohttp.ClientResponseError as exc:
             if exc.status == 409:
                 form.localpart.errors.append(
-                    _l("That username is already taken")
+                    _l("That username is already taken.")
                 )
             elif exc.status == 403:
                 form.localpart.errors.append(
-                    _l("Registration was declined for unknown reasons")
+                    _l("Registration was declined for unknown reasons.")
                 )
             elif exc.status == 400:
                 form.localpart.errors.append(
-                    _l("The username is not valid")
+                    _l("The username is not valid.")
                 )
             elif exc.status == 404:
                 return redirect(url_for(".view", id_=id_))
@@ -159,7 +172,7 @@ async def register(id_: str) -> typing.Union[str, quart.Response]:
     )
 
 
-class ResetForm(flask_wtf.FlaskForm):  # type:ignore
+class ResetForm(BaseForm):
     password = wtforms.PasswordField(
         _l("Password"),
     )
@@ -169,7 +182,7 @@ class ResetForm(flask_wtf.FlaskForm):  # type:ignore
         validators=[wtforms.validators.InputRequired(),
                     wtforms.validators.EqualTo(
                         "password",
-                        _l("The passwords must match")
+                        _l("The passwords must match.")
                     )]
     )
 
@@ -202,7 +215,7 @@ async def reset(id_: str) -> typing.Union[str, quart.Response]:
         except aiohttp.ClientResponseError as exc:
             if exc.status == 403:
                 form.localpart.errors.append(
-                    _l("Registration was declined for unknown reasons")
+                    _l("Registration was declined for unknown reasons.")
                 )
             elif exc.status == 404:
                 return redirect(url_for(".view", id_=id_))

snikket_web/main.py

@@ -15,23 +15,23 @@ from quart import (
     render_template,
     request,
     Response,
+    flash,
 )
 
 import babel
 import wtforms
 
 import flask_wtf
-
 from flask_babel import lazy_gettext as _l, _
 
 from . import xmpputil, _version
-from .infra import client
+from .infra import client, BaseForm
 
 
 bp = quart.Blueprint("main", __name__)
 
 
-class LoginForm(flask_wtf.FlaskForm):  # type:ignore
+class LoginForm(BaseForm):
     address = wtforms.TextField(
         _l("Address"),
         validators=[wtforms.validators.InputRequired()],
@@ -52,6 +52,9 @@ async def index() -> quart.Response:
     return redirect(url_for("index"))
 
 
+ERR_CREDENTIALS_INVALID = _l("Invalid username or password.")
+
+
 @bp.route("/login", methods=["GET", "POST"])
 async def login() -> typing.Union[str, quart.Response]:
     if client.has_session and (await client.test_session()):
@@ -63,33 +66,48 @@ async def login() -> typing.Union[str, quart.Response]:
         localpart, domain, resource = xmpputil.split_jid(jid)
         if not localpart:
             localpart, domain = domain, current_app.config["SNIKKET_DOMAIN"]
-        jid = "{}@{}".format(localpart, domain)
-        password = form.password.data
-        try:
-            await client.login(jid, password)
-        except quart.exceptions.Unauthorized:
-            form.password.errors.append(
-                _("Invalid username or password.")
-            )
+        if domain != current_app.config["SNIKKET_DOMAIN"]:
+            # (a) prosody throws a 400 at us and I prefer to catch that here
+            # and (b) I don’t want to pass on this obviously not-for-here
+            # password further than necessary.
+            form.password.errors.append(ERR_CREDENTIALS_INVALID)
         else:
-            return redirect(url_for('user.index'))
+            jid = "{}@{}".format(localpart, domain)
+            password = form.password.data
+            try:
+                await client.login(jid, password)
+            except quart.exceptions.Unauthorized:
+                form.password.errors.append(ERR_CREDENTIALS_INVALID)
+            else:
+                await flash(
+                    _("Login successful!"),
+                    "success"
+                )
+                return redirect(url_for('user.index'))
 
     return await render_template("login.html", form=form)
 
 
 @bp.route("/meta/about.html")
 async def about() -> str:
+    version = None
     extra_versions = {}
-    if current_app.debug:
+
+    if current_app.debug or client.is_admin_session:
+        version = _version.version
         extra_versions["Quart"] = quart.__version__
         extra_versions["aiohttp"] = aiohttp.__version__
         extra_versions["babel"] = babel.__version__
         extra_versions["wtforms"] = wtforms.__version__
         extra_versions["flask-wtf"] = flask_wtf.__version__
+        try:
+            extra_versions["Prosody"] = await client.get_server_version()
+        except quart.exceptions.Unauthorized:
+            extra_versions["Prosody"] = "unknown"
 
     return await render_template(
         "about.html",
-        version=_version.version,
+        version=version,
         extra_versions=extra_versions,
     )
 
@@ -105,6 +123,7 @@ def repad(s: str) -> str:
 
 @bp.route("/avatar/<from_>/<code>")
 async def avatar(from_: str, code: str) -> quart.Response:
+    etag: typing.Optional[str]
     try:
         etag = request.headers["if-none-match"]
     except KeyError:
@@ -144,3 +163,8 @@ async def avatar(from_: str, code: str) -> quart.Response:
 
     response.set_data(data)
     return response
+
+
+@bp.route("/_health")
+async def health() -> Response:
+    return Response("STATUS OK", content_type="text/plain")

snikket_web/prosodyclient.py

@@ -44,6 +44,15 @@ class AdminUserInfo:
     display_name: typing.Optional[str]
     email: typing.Optional[str]
     phone: typing.Optional[str]
+    roles: typing.Optional[typing.List[str]]
+
+    @property
+    def has_admin_role(self) -> bool:
+        return bool(self.roles and "prosody:admin" in self.roles)
+
+    @property
+    def has_restricted_role(self) -> bool:
+        return bool(self.roles and "prosody:restricted" in self.roles)
 
     @classmethod
     def from_api_response(
@@ -55,6 +64,7 @@ class AdminUserInfo:
             display_name=data.get("display_name") or None,
             email=data.get("email") or None,
             phone=data.get("phone") or None,
+            roles=data.get("roles"),
         )
 
 
@@ -144,6 +154,7 @@ class HTTPSessionManager:
     async def _create(self) -> aiohttp.ClientSession:
         return aiohttp.ClientSession(headers={
             "Accept": "application/json",
+            "Host": current_app.config["SNIKKET_DOMAIN"],
         })
 
     async def teardown(self, exc: typing.Optional[BaseException]) -> None:
@@ -204,6 +215,7 @@ class HTTPAuthSessionManager(HTTPSessionManager):
             headers={
                 "Authorization": "Bearer {}".format(token),
                 "Accept": "application/json",
+                "Host": current_app.config["SNIKKET_DOMAIN"],
             }
         )
 
@@ -330,15 +342,18 @@ class ProsodyClient:
                 )
             )
 
+    def _store_token_in_session(self, token_info: TokenInfo) -> None:
+        http_session[self.SESSION_TOKEN] = token_info.token
+        http_session[self.SESSION_CACHED_SCOPE] = " ".join(token_info.scopes)
+
     async def login(self, jid: str, password: str) -> bool:
         async with self._plain_session as session:
             token_info = await self._oauth2_bearer_token(
                 session, jid, password,
             )
 
-        http_session[self.SESSION_TOKEN] = token_info.token
+        self._store_token_in_session(token_info)
         http_session[self.SESSION_ADDRESS] = jid
-        http_session[self.SESSION_CACHED_SCOPE] = " ".join(token_info.scopes)
         return True
 
     @property
@@ -443,6 +458,13 @@ class ProsodyClient:
                                 headers=final_headers,
                                 data=serialised) as resp:
             if resp.status != 200:
+                self.logger.debug(
+                    "IQ HTTP response (in-reply-to id=%s) with non-OK status "
+                    "%s: %s",
+                    id_,
+                    resp.status,
+                    resp.reason,
+                )
                 abort(resp.status)
             reply_payload = await resp.read()
             self.logger.debug(
@@ -488,9 +510,32 @@ class ProsodyClient:
             "to": self.session_address,
         }
 
-        async with session.post(self._rest_endpoint, data=req) as resp:
+        async with session.post(self._rest_endpoint, json=req) as resp:
             return resp.status == 200
 
+    @autosession
+    async def get_server_version(self, session: aiohttp.ClientSession) -> str:
+        _, domain, _ = split_jid(self.session_address)
+        req = {
+            "kind": "iq",
+            "type": "get",
+            "version": {},
+            "to": domain,
+        }
+
+        async with session.post(self._rest_endpoint, json=req) as resp:
+            if resp.status != 200:
+                return "unknwn"
+            try:
+                return (await resp.json())["version"]["version"]
+            except Exception as exc:
+                self.logger.debug(
+                    "failed to parse prosody version from response"
+                    " (%s: %s)",
+                    type(exc), exc,
+                )
+                return "unknown"
+
     @autosession
     async def get_user_nickname(
             self,
@@ -765,7 +810,7 @@ class ProsodyClient:
         # got there, replacing the current session token on the way.
 
         async with self._plain_session as session:
-            token = await self._oauth2_bearer_token(
+            token_info = await self._oauth2_bearer_token(
                 session,
                 self.session_address,
                 current_password,
@@ -777,14 +822,14 @@ class ProsodyClient:
                     new_password
                 ),
                 headers={
-                    "Authorization": "Bearer {}".format(token),
+                    "Authorization": "Bearer {}".format(token_info.token),
                 },
                 sensitive=True,
             )
             # TODO: error handling
             # TODO: obtain a new token using the new password to allow the
             # server to expire/revoke all tokens on password change.
-            http_session[self.SESSION_TOKEN] = token
+            self._store_token_in_session(token_info)
 
     def _raise_error_from_response(
             self,
@@ -823,6 +868,29 @@ class ProsodyClient:
             self._raise_error_from_response(resp)
             return AdminUserInfo.from_api_response(await resp.json())
 
+    @autosession
+    async def update_user(
+            self,
+            localpart: str,
+            *,
+            display_name: typing.Optional[str],
+            roles: typing.Optional[typing.Collection[str]],
+            session: aiohttp.ClientSession,
+            ) -> None:
+        payload: typing.Dict[str, typing.Any] = {
+            "username": localpart,
+        }
+        if display_name is not None:
+            payload["display_name"] = display_name
+        if roles is not None:
+            payload["roles"] = list(roles)
+
+        async with session.put(
+                self._admin_v1_endpoint("/users/{}".format(localpart)),
+                json=payload,
+                ) as resp:
+            self._raise_error_from_response(resp)
+
     @autosession
     async def get_user_debug_info(
             self,
@@ -1107,3 +1175,41 @@ class ProsodyClient:
                     json=payload) as resp:
                 resp.raise_for_status()
                 return (await resp.json())["jid"]
+
+    @autosession
+    async def get_system_metrics(
+            self,
+            *,
+            session: aiohttp.ClientSession) -> typing.Mapping:
+        async with session.get(
+                self._admin_v1_endpoint("/server/metrics"),
+                ) as resp:
+            if resp.status == 404:
+                return {}
+            self._raise_error_from_response(resp)
+            resp.raise_for_status()
+            return await resp.json()
+
+    @autosession
+    async def post_announcement(
+            self,
+            body: str,
+            recipients: str,
+            *,
+            session: aiohttp.ClientSession) -> None:
+        recipients_payload: typing.Union[str, typing.Sequence[str]]
+        if recipients == "self":
+            recipients_payload = [self.session_address]
+        else:
+            recipients_payload = recipients
+
+        payload = {
+            "recipients": recipients_payload,
+            "body": body,
+        }
+
+        async with session.post(
+                self._admin_v1_endpoint("/server/announcement"),
+                json=payload) as resp:
+            self._raise_error_from_response(resp)
+            resp.raise_for_status()

snikket_web/scss/_theme.scss

@@ -252,3 +252,4 @@ $h-sizes: [200.0%, 174.11011266%, 151.57165665%, 131.95079108%, 114.8698355%, 10
 $h-small-sizes: [150.0%, 138.31618672%, 127.54245006%, 117.60790225%, 108.44717712%, 100.0%];
 $small-screen-threshold: 40rem;
 $medium-screen-threshold: 60rem;
+$large-screen-threshold: 80rem;

snikket_web/scss/app.scss

@@ -33,13 +33,35 @@ body {
 
 main {
 	padding: $w-l1;
-	margin-left: auto;
-	max-width: 60rem;
-	margin-right: auto;
 }
 
 #mwrap {
 	flex: 1;
+	display: flex;
+	flex-direction: row-reverse;
+
+	> .filler, > .flashbox {
+		flex: 1 1 1rem;
+	}
+
+	> main {
+		flex: 0 1 60rem;
+	}
+}
+
+@media screen and (max-width: $large-screen-threshold) {
+	#mwrap {
+		display: block;
+
+		> main {
+			margin-left: auto;
+			margin-right: auto;
+		}
+	}
+}
+
+.flashbox > div.box > :first-child {
+	margin-top: 0;
 }
 
 /* top bar */
@@ -67,6 +89,10 @@ div#topbar {
 		font-size: $_top-h-size;
 		line-height: 1.5;
 
+		body.debug & {
+			color: red;
+		}
+
 		@media screen and (max-width: $small-screen-threshold) {
 			font-size: $_top-h-small-size;
 		}
@@ -134,22 +160,20 @@ body > footer {
 	background-color: $gray-100;
 	color: $gray-800;
 	padding: 0 $w-l1;
+	font-size: 92.21079115%;
 
 	ul {
 		display: block;
 		padding: 0;
 		margin: 0;
 		list-style-type: none;
+		text-align: center;
+		line-height: 1.6267076567643135;
 	}
 
 	li {
-		display: inline-block;
-		margin: $w-l1 0;
-	}
-
-	li:before {
-		content: '•';
-		padding-right: $w-s2;
+		display: block;
+		margin: $w-s1 0;
 	}
 
 	a, a:visited, a:hover, a:active, a:focus {
@@ -330,6 +354,15 @@ div.form.layout-expanded {
 		display: block;
 	}
 
+	.radio-button-ext > label > p {
+		margin-left: 1.75rem;
+		margin-top: 0;
+	}
+
+	.radio-button-ext > label .icon {
+		margin-left: 0.25em;
+	}
+
 	div.select-wrap {
 		display: block;
 		border-bottom: $w-s4 solid $primary-500;
@@ -993,6 +1026,23 @@ div.profile-card {
 			display: none;
 		}
 	}
+
+
+	input[type="submit"], button, .button {
+		&.slimmify {
+			> svg.icon {
+				margin-right: 0;
+			}
+
+			> span {
+				position: absolute;
+				width: 1px;
+				height: 1px;
+				overflow: hidden;
+				top: -100px;
+			}
+		}
+	}
 }
 
 /* clipboard button */

snikket_web/scss/invite.scss

@@ -54,6 +54,8 @@ div.install-buttons {
 	ul {
 		display: flex;
 		flex-direction: row;
+		flex-wrap: wrap;
+		justify-content: center;
 		list-style-type: none;
 		margin: $w-l1 0;
 		padding: 0;
@@ -74,6 +76,10 @@ img.play {
 	height: $w-l3;
 }
 
+img.fdroid {
+	height: $w-l3;
+}
+
 .tabbox {
 	display: flex;
 	flex-direction: column;

snikket_web/static/img/icons.svg

@@ -37,6 +37,11 @@ licensed under the terms of the Apache 2.0 License -->
 <path d="M0 0h24v24H0V0z" fill="none" />
 <path d="M10.79 16.29c.39.39 1.02.39 1.41 0l3.59-3.59c.39-.39.39-1.02 0-1.41L12.2 7.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L12.67 11H4c-.55 0-1 .45-1 1s.45 1 1 1h8.67l-1.88 1.88c-.39.39-.38 1.03 0 1.41zM19 3H5c-1.11 0-2 .9-2 2v3c0 .55.45 1 1 1s1-.45 1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1H6c-.55 0-1-.45-1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1v3c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
 </symbol>
+<!-- from: action/lock/materialiconsround/24px.svg -->
+<symbol id="icon-lock" viewBox="0 0 24 24">
+<g fill="none"><path d="M0 0h24v24H0V0z" /><path d="M0 0h24v24H0V0z" opacity=".87" /></g>
+<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z" />
+</symbol>
 <!-- from: communication/qr_code/materialiconsround/24px.svg -->
 <symbol id="icon-qrcode" viewBox="0 0 24 24">
 <g><rect fill="none" height="24" width="24" /><rect fill="none" height="24" width="24" /></g>
@@ -47,6 +52,12 @@ licensed under the terms of the Apache 2.0 License -->
 <path d="M0 0h24v24H0V0z" fill="none" />
 <path d="M12.65 10C11.7 7.31 8.9 5.5 5.77 6.12c-2.29.46-4.15 2.29-4.63 4.58C.32 14.57 3.26 18 7 18c2.61 0 4.83-1.67 5.65-4H17v2c0 1.1.9 2 2 2s2-.9 2-2v-2c1.1 0 2-.9 2-2s-.9-2-2-2h-8.35zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" />
 </symbol>
+<!-- from: communication/rss_feed/materialiconsround/24px.svg -->
+<symbol id="icon-broadcast" viewBox="0 0 24 24">
+<path d="M0 0h24v24H0V0z" fill="none" />
+<circle cx="6.18" cy="17.82" r="2.18" />
+<path d="M5.59 10.23c-.84-.14-1.59.55-1.59 1.4 0 .71.53 1.28 1.23 1.4 2.92.51 5.22 2.82 5.74 5.74.12.7.69 1.23 1.4 1.23.85 0 1.54-.75 1.41-1.59-.68-4.2-3.99-7.51-8.19-8.18zm-.03-5.71C4.73 4.43 4 5.1 4 5.93c0 .73.55 1.33 1.27 1.4 6.01.6 10.79 5.38 11.39 11.39.07.73.67 1.28 1.4 1.28.84 0 1.5-.73 1.42-1.56-.73-7.34-6.57-13.19-13.92-13.92z" />
+</symbol>
 <!-- from: content/add_circle_outline/materialiconsround/24px.svg -->
 <symbol id="icon-add" viewBox="0 0 24 24">
 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -72,6 +83,11 @@ licensed under the terms of the Apache 2.0 License -->
 <path d="M0 0h24v24H0V0z" fill="none" />
 <path d="M21.94 11.23C21.57 8.76 19.32 7 16.82 7h-2.87c-.52 0-.95.43-.95.95s.43.95.95.95h2.9c1.6 0 3.04 1.14 3.22 2.73.17 1.43-.64 2.69-1.85 3.22l1.4 1.4c1.63-1.02 2.64-2.91 2.32-5.02zM4.12 3.56c-.39-.39-1.02-.39-1.41 0s-.39 1.02 0 1.41l2.4 2.4c-1.94.8-3.27 2.77-3.09 5.04C2.23 15.05 4.59 17 7.23 17h2.82c.52 0 .95-.43.95-.95s-.43-.95-.95-.95H7.16c-1.63 0-3.1-1.19-3.25-2.82-.15-1.72 1.11-3.17 2.75-3.35l2.1 2.1c-.43.09-.76.46-.76.92v.1c0 .52.43.95.95.95h1.78L13 15.27V17h1.73l3.3 3.3c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L4.12 3.56zM16 11.95c0-.52-.43-.95-.95-.95h-.66l1.49 1.49c.07-.13.12-.28.12-.44v-.1z" />
 </symbol>
+<!-- from: content/send/materialiconsround/24px.svg -->
+<symbol id="icon-send" viewBox="0 0 24 24">
+<path d="M0 0h24v24H0V0z" fill="none" />
+<path d="M3.4 20.4l17.45-7.48c.81-.35.81-1.49 0-1.84L3.4 3.6c-.66-.29-1.39.2-1.39.91L2 9.12c0 .5.37.93.87.99L17 12 2.87 13.88c-.5.07-.87.5-.87 1l.01 4.61c0 .71.73 1.2 1.39.91z" />
+</symbol>
 <!-- from: navigation/arrow_back/materialiconsround/24px.svg -->
 <symbol id="icon-back" viewBox="0 0 24 24">
 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -137,4 +153,9 @@ licensed under the terms of the Apache 2.0 License -->
 <path d="M0 0h24v24H0V0z" fill="none" />
 <path d="M17 7h-3c-.55 0-1 .45-1 1s.45 1 1 1h3c1.65 0 3 1.35 3 3s-1.35 3-3 3h-3c-.55 0-1 .45-1 1s.45 1 1 1h3c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-9 5c0 .55.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1H9c-.55 0-1 .45-1 1zm2 3H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h3c.55 0 1-.45 1-1s-.45-1-1-1H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h3c.55 0 1-.45 1-1s-.45-1-1-1z" />
 </symbol>
+<!-- from: content/insights/materialiconsround/24px.svg -->
+<symbol id="icon-insights" viewBox="0 0 24 24">
+<g><rect fill="none" height="24" width="24" /><rect fill="none" height="24" width="24" /></g>
+<g><g><path d="M21,8c-1.45,0-2.26,1.44-1.93,2.51l-3.55,3.56c-0.3-0.09-0.74-0.09-1.04,0l-2.55-2.55C12.27,10.45,11.46,9,10,9 c-1.45,0-2.27,1.44-1.93,2.52l-4.56,4.55C2.44,15.74,1,16.55,1,18c0,1.1,0.9,2,2,2c1.45,0,2.26-1.44,1.93-2.51l4.55-4.56 c0.3,0.09,0.74,0.09,1.04,0l2.55,2.55C12.73,16.55,13.54,18,15,18c1.45,0,2.27-1.44,1.93-2.52l3.56-3.55 C21.56,12.26,23,11.45,23,10C23,8.9,22.1,8,21,8z" /><polygon points="15,9 15.94,6.93 18,6 15.94,5.07 15,3 14.08,5.07 12,6 14.08,6.93" /><polygon points="3.5,11 4,9 6,8.5 4,8 3.5,6 3,8 1,8.5 3,9" /></g></g>
+</symbol>
 </defs></svg>

snikket_web/templates/_footer.html

@@ -3,5 +3,7 @@
 		{#- -#}
 		<li>{% trans about_url=url_for('main.about') %}A <a href="{{ about_url }}">Snikket</a> service{% endtrans %}</li>
 		{#- -#}
+		<li>{% trans %}“Snikket” and the parrot logo are trademarks of Snikket Community Interest Company.{% endtrans %}</li>
+		{#- -#}
 	</ul>
 </footer>

snikket_web/templates/about.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% from "library.j2" import standard_button %}
 {% block head_lead %}
-<title>About Snikket</title>
+<title>{% trans %}About Snikket{% endtrans %}</title>
 {% endblock %}
 {% block body %}
 <main>
@@ -14,10 +14,12 @@
 		<p>{% trans agpl_url="https://www.gnu.org/licenses/agpl.html" %}The web portal software is licensed under the terms of the <a href="{{ agpl_url }}">Affero GNU General Public License, version 3.0 or later</a>. The full terms of the license can be reviewed using the aforementioned link.{% endtrans %}</p>
 		<p>{% trans source_url="https://github.com/snikket-im/snikket-web-portal/" %}The source code of the web portal can be downloaded and viewed in <a href="{{ source_url }}">its GitHub repository</a>.{% endtrans %}</p>
 		<p>{% trans source_url="https://material.io/resources/icons/", apache20_url="https://www.apache.org/licenses/LICENSE-2.0.txt" %}The icons used in the web portal are <a href="{{ source_url }}">Google’s Material Icons</a>, made available by Google under the terms of the <a href="{{ apache20_url }}">Apache 2.0 License</a>.{% endtrans %}</p>
+		<h3>{% trans %}Trademarks{% endtrans %}</h3>
+		<p>{% trans trademarks_url="https://snikket.org/about/trademarks/" %}“Snikket” and the parrot logo are trademarks of Snikket Community Interest Company. For more information about the trademarks, visit the <a href="{{ trademarks_url }}">Snikket Trademarks information page</a>.{% endtrans %}
 		<h3>{% trans %}Software Versions{% endtrans %}</h3>
 		<pre>Snikket Server
 Domain: {{ config["SNIKKET_DOMAIN"] }}
-Snikket Web Portal ({{ version }})
+Snikket Web Portal{% if version %} ({{ version }}){% endif %}
 {%- if extra_versions -%}
 {% for name, version in extra_versions.items() %}
 {{ name }} ({{ version }}){% endfor %}

snikket_web/templates/admin_delete_user.html

@@ -16,7 +16,7 @@
 	<p>{% trans %}The user and their data will be deleted irrevocably, permanently and immediately upon pushing the below button. <strong>There is no way back!</strong>{% endtrans %}</p>
 	{% endcall %}
 	<div class="f-bbox">
-		{%- call standard_button("back", url_for(".index"), class="secondary") %}{% trans %}Back{% endtrans %}{% endcall -%}
+		{%- call standard_button("back", url_for(".edit_user", localpart=target_user.localpart), class="tertiary") %}{% trans %}Back{% endtrans %}{% endcall -%}
 		{%- call form_button("delete", form.action_delete, class="primary danger") %}{% endcall -%}
 	</div>
 </form></div>

snikket_web/templates/admin_edit_circle.html

@@ -1,5 +1,5 @@
 {% extends "admin_app.html" %}
-{% from "library.j2" import form_button, standard_button, value_or_hint, custom_form_button, clipboard_button %}
+{% from "library.j2" import form_button, standard_button, value_or_hint, custom_form_button, clipboard_button, icon %}
 {% block head_lead %}
 {{ super() }}
 {% include "copy-snippet.html" %}
@@ -40,8 +40,8 @@
 		{%- endif -%}
 	</div>
 	<div class="f-bbox">
-		{%- call standard_button("back", url_for(".circles"), class="secondary") -%}
-			{% trans %}Back{% endtrans %}
+		{%- call standard_button("back", url_for(".circles"), class="tertiary") -%}
+			{% trans %}Return to circle list{% endtrans %}
 		{%- endcall -%}
 		{%- call form_button("done", form.action_save, class="primary") %}{% endcall -%}
 	</div>
@@ -56,14 +56,21 @@
 {%- if circle_members -%}
 <div class="el-2 elevated"><table>
 	<thead>
-		<th>Login name</th>
-		<th class="collapsible">Display name</th>
-		<th>Actions</th>
+		<th>{% trans %}Login name{% endtrans %}</th>
+		<th class="collapsible">{% trans %}Display name{% endtrans %}</th>
+		<th>{% trans %}Actions{% endtrans %}</th>
 	</thead>
 	<tbody>
-{%- for member in circle_members -%}
+{%- for localpart, member in circle_members -%}
 		<tr>
-			<td>{{ member.localpart }}</td>
+			<td>
+				{%- if member -%}
+				{{ localpart }}
+				{%- else -%}
+				{{ localpart }}
+				<span class="with-tooltip above" data-tooltip="{% trans %}The user has been deleted from the server.{% endtrans %}"><em> ({% trans %}deleted{% endtrans %})</em></span>
+				{%- endif -%}
+			</td>
 			<td class="collapsible">{% call value_or_hint(member.display_name) %}{% endcall %}</td>
 			<td class="nowrap">
 				{%- call custom_form_button("remove_user", form.action_remove_user.name, member.localpart, class="primary danger", slim=True) -%}

snikket_web/templates/admin_edit_invite.html

@@ -44,10 +44,10 @@
 		<dd>{{ invite.created_at | format_date }}</dd>
 	</dl>
 	<div class="f-bbox">
-		{%- call form_button("remove_link", form.action_revoke, class="secondary danger") %}{% endcall -%}
-		{%- call standard_button("back", url_for(".invitations"), class="primary") %}
-			{% trans %}Back{% endtrans %}
+		{%- call standard_button("back", url_for(".invitations"), class="tertiary") %}
+			{% trans %}Return to invitation list{% endtrans %}
 		{%- endcall %}
+		{%- call form_button("remove_link", form.action_revoke, class="primary danger") %}{% endcall -%}
 	</div>
 </div>
 </form>

snikket_web/templates/admin_edit_user.html

@@ -0,0 +1,78 @@
+{% extends "admin_app.html" %}
+{% from "library.j2" import box, form_button, standard_button, icon %}
+{% macro access_level_description(role, caller=None) %}
+{%- if role == "prosody:restricted" -%}
+{% trans %}Limited users can interact with users on the same Snikket service and be members of circles.{% endtrans %}
+{%- elif role == "prosody:normal" -%}
+{% trans %}Like limited users and can also interact with users on other Snikket services.{% endtrans %}
+{%- elif role == "prosody:admin" -%}
+{% trans %}Like normal users and can access the admin panel in the web portal.{% endtrans %}
+{%- endif -%}
+{% endmacro %}
+{% macro access_level_icon(role, caller=None) %}
+{%- if role == "prosody:restricted" -%}
+{% call icon("lock") %}{% endcall %}
+{%- elif role == "prosody:admin" -%}
+{% call icon("admin") %}{% endcall %}
+{%- endif -%}
+{% endmacro %}
+{% block content %}
+<h1>{% trans user_name=target_user.localpart %}Edit user {{ user_name }}{% endtrans %}</h1>
+<form method="POST">{{ form.csrf_token }}<div class="form layout-expanded">
+	<h2 class="form-title">{% trans %}Edit user{% endtrans %}</h2>
+	<div class="f-ebox">
+		{{ form.localpart.label }}
+		{{ form.localpart(readonly="readonly") }}
+		<p class="form-desc weak">{% trans %}The login name cannot be changed.{% endtrans %}</p>
+	</div>
+	<div class="f-ebox">
+		{{ form.display_name.label }}
+		{{ form.display_name }}
+	</div>
+	<h3 class="form-title">{% trans %}Access Level{% endtrans %}</h3>
+	<p class="form-descr weak">{% trans %}The access level of a user determines what interactions are allowed for them on your Snikket service.{% endtrans %}</p>
+	<div class="f-ebox">
+		<fieldset>{#- -#}
+			<legend class="a11y-only">{{ form.role.label.text }}</legend>
+			{%- for level in form.role -%}
+			<div class="radio-button-ext">
+				{{ level }}<label for="{{ level.id }}">
+					{%- trans title=level.label.text, icon=access_level_icon(level.data), description=access_level_description(level.data) -%}
+					<strong>{{ title }}{{ icon }}</strong><p>{{ description }}</p>
+					{%- endtrans -%}
+				</label>
+			</div>
+			{%- endfor -%}
+		</fieldset>
+	</div>
+	<div class="f-bbox">
+		{%- call standard_button("back", url_for(".users"), class="tertiary") -%}
+			{%- trans -%}Return to user list{%- endtrans -%}
+		{%- endcall -%}
+		{%- call standard_button("delete", url_for(".delete_user", localpart=target_user.localpart), class="secondary") -%}
+			{%- trans -%}Delete user{%- endtrans -%}
+		{%- endcall -%}
+		{%- call form_button("done", form.action_save, class="primary") %}{% endcall -%}
+	</div>
+</div>
+<h2>{% trans %}Further actions{% endtrans %}</h2>
+<div class="form layout-expanded">
+	<h2 class="form-title">{% trans %}Reset password{% endtrans %}</h2>
+	{{ form.csrf_token }}
+	<p class="form-desc">
+		{% trans %}If the user has lost their password, you can use the button below to create a special link which allows to change the password of the account, once.{% endtrans %}
+	</p>
+	<div class="f-bbox">
+		{%- call form_button("passwd", form.action_create_reset, class="primary") -%}{%- endcall -%}
+	</div>
+	<h2 class="form-title">{% trans %}Debug information{% endtrans %}</h2>
+	<p class="form-desc">
+		{% trans %}In some cases, extended information about the user account and the connected devices is necessary to troubleshoot issues. The button below reveals this (sensitive) information.{% endtrans %}
+	</p>
+	<div class="f-bbox">
+		{%- call standard_button("bug_report", url_for(".debug_user", localpart=target_user.localpart), class="primary") -%}
+			{%- trans -%}Show debug information{%- endtrans -%}
+		{%- endcall -%}
+	</div>
+</div></form>
+{% endblock %}

snikket_web/templates/admin_home.html

@@ -31,6 +31,18 @@
 			<div>{% call standard_button("link", url_for(".invitations"), class="primary") %}{% trans %}Manage invitations{% endtrans %}{% endcall %}</div>
 			{#- -#}
 		</li>
+		<li>
+			<h2>{% trans %}System health{% endtrans %}</h2>
+			{#- -#}
+			{%- if show_metrics -%}
+			<p>{% trans %}View the server status or send a broadcast message to all users.{% endtrans %}</p>
+			{%- else -%}
+			<p>{% trans %}Send a broadcast message to all users.{% endtrans %}</p>
+			{%- endif -%}
+			{#- -#}
+			<div>{% call standard_button("insights", url_for(".system"), class="primary") %}{% trans %}Manage system{% endtrans %}{% endcall %}</div>
+			{#- -#}
+		</li>
 		<li>
 			{#- -#}
 			<p>{% trans %}Go back to your user's web portal page.{% endtrans %}</p>

snikket_web/templates/admin_invites.html

@@ -18,7 +18,7 @@
 	<col/>
 	<thead>
 		<tr>
-			<th>{% trans %}Valid until{% endtrans %}</th>
+			<th>{% trans %}Expires{% endtrans %}</th>
 			<th class="collapsible">{% trans %}Type{% endtrans %}</th>
 			<th class="collapsible">{% trans %}Circle{% endtrans %}</th>
 			<th>{% trans %}Actions{% endtrans %}</th>

snikket_web/templates/admin_reset_user_password.html

@@ -9,7 +9,7 @@
 <form method="POST">
 {{- form.csrf_token -}}
 <div class="form layout-expanded">
-	<h2 class="form-title">{% trans user_name=target_user.localpart %}Password reset link for {{ user_name }}{% endtrans %}</h2>
+	<h2 class="form-title">{% trans user_name=localpart %}Password reset link for {{ user_name }}{% endtrans %}</h2>
 	<p class="form-desc">{% trans %}The following link will allow the user to reset their password on their device, once.{% endtrans %}</p>
 	<dd>
 		<dt>{% trans %}Valid until{% endtrans %}</dt>
@@ -21,7 +21,7 @@
 		{%- call custom_form_button("remove_link", form.action_revoke.name, reset_link.id_, class="secondary danger") -%}
 			{% trans %}Destroy link{% endtrans %}
 		{%- endcall -%}
-		{%- call standard_button("back", url_for(".users"), class="primary") -%}
+		{%- call standard_button("back", url_for(".edit_user", localpart=localpart), class="primary") -%}
 			{% trans %}Back{% endtrans %}
 		{%- endcall -%}
 	</div>

snikket_web/templates/admin_system.html

@@ -0,0 +1,97 @@
+{% extends "admin_app.html" %}
+{% from "library.j2" import form_button %}
+{% block content %}
+<h1>{% trans %}Manage system{% endtrans %}</h1>
+{% if show_metrics %}
+<h2>{% trans %}Overall system status{% endtrans %}</h2>
+<div class="elevated el-2">
+	<dl>
+		<dt>{% trans %}System load (5 minute average){% endtrans %}</dt>
+		<dd>
+			{%- if metrics.load5 -%}
+			{{ metrics.load5 }}
+			{%- else -%}
+			<em>{% trans %}unknown{% endtrans %}</em>
+			{%- endif -%}
+		</dd>
+		<dt>{% trans %}Memory use{% endtrans %}</dt>
+		<dd>
+			{%- if metrics.mem_total and metrics.mem_available -%}
+			{% trans percentage_global=((1 - (metrics.mem_available / metrics.mem_total)) | format_percent), percentage_snikket=((((metrics.prosody_rss | default(0)) + (metrics.portal_rss | default(0))) / metrics.mem_total) | format_percent), mem_available=(metrics.mem_total | format_bytes) %}{{ percentage_global }} of {{ mem_available }}. Of that, Snikket uses {{ percentage_snikket }}.{% endtrans %}
+			{%- else -%}
+			<em>{% trans %}unknown{% endtrans %}</em>
+			{%- endif -%}
+		</dd>
+	</dl>
+</div>
+<h2>{% trans %}Web portal status{% endtrans %}</h2>
+<div class="elevated el-2">
+	<dl>
+		<dt>{% trans %}Version{% endtrans %}</dt>
+		<dd>{{ version }} <a href="{{ url_for("main.about") }}">{% trans %}View all versions{% endtrans %}</a></dd>
+		<dt>{% trans %}Average CPU use{% endtrans %}</dt>
+		<dd>
+			{%- if metrics.portal_cpu -%}
+			{{ metrics.portal_cpu | format_percent }}
+			{%- else -%}
+			<em>{% trans %}unknown{% endtrans %}</em>
+			{%- endif -%}
+		</dd>
+		<dt>{% trans %}Current memory use{% endtrans %}</dt>
+		<dd>
+			{%- if metrics.portal_rss -%}
+			{{ metrics.portal_rss | format_bytes }}
+			{%- else -%}
+			<em>{% trans %}unknown{% endtrans %}</em>
+			{%- endif -%}
+		</dd>
+	</dl>
+</div>
+<h2>{% trans %}Snikket server status{% endtrans %}</h2>
+<div class="elevated el-2">
+	<dl>
+		<dt>{% trans %}Version{% endtrans %}</dt>
+		<dd>{{ prosody_version }} <a href="{{ url_for("main.about") }}">{% trans %}View all versions{% endtrans %}</a></dd>
+		<dt>{% trans %}Average CPU use{% endtrans %}</dt>
+		<dd>
+			{%- if metrics.prosody_cpu -%}
+			{{ metrics.prosody_cpu | format_percent }}
+			{%- else -%}
+			<em>{% trans %}unknown{% endtrans %}</em>
+			{%- endif -%}
+		</dd>
+		<dt>{% trans %}Current memory use{% endtrans %}</dt>
+		<dd>
+			{%- if metrics.prosody_rss -%}
+			{{ metrics.prosody_rss | format_bytes }}
+			{%- else -%}
+			<em>{% trans %}unknown{% endtrans %}</em>
+			{%- endif -%}
+		</dd>
+		<dt>{% trans %}Connected devices{% endtrans %}</dt>
+		<dd>
+			{%- if metrics.prosody_devices | default(None) is not none -%}
+			{{ metrics.prosody_devices }}
+			{%- else -%}
+			<em>{% trans %}unknown{% endtrans %}</em>
+			{%- endif -%}
+		</dd>
+	</dl>
+</div>
+{% endif %}
+<h2>{% trans %}Broadcast message{% endtrans %}</h2>
+<form method="POST">{{ form.csrf_token }}<div class="form layout-expanded">
+	<p class="form-desc">{% trans %}This form allows you to send a message to all users currently online on your Snikket server. Use it wisely.{% endtrans %}</p>
+	<div class="f-ebox">
+		{{ form.text.label }}
+		{{ form.text }}
+	</div>
+	<div class="f-ebox">
+		{{ form.online_only }}{{ form.online_only.label }}
+	</div>
+	<div class="f-bbox">
+		{%- call form_button("send", form.action_send_preview, class="primary") -%}{%- endcall -%}
+		{%- call form_button("broadcast", form.action_post_all, class="secondary accent") -%}{%- endcall -%}
+	</div>
+</div></form>
+{% endblock %}

snikket_web/templates/admin_users.html

@@ -1,9 +1,7 @@
 {% extends "admin_app.html" %}
-{% from "library.j2" import action_button, value_or_hint, custom_form_button %}
+{% from "library.j2" import action_button, icon, value_or_hint, custom_form_button %}
 {% block content %}
 <h1>{% trans %}Manage users{% endtrans %}</h1>
-<form method="POST" action="{{ url_for(".create_password_reset_link") }}">
-{{- reset_form.csrf_token -}}
 <div class="elevated el-2"><table>
 	<thead>
 		<tr>
@@ -15,17 +13,19 @@
 	<tbody>
 {% for user in users %}
 		<tr>
-			<td>{{ user.localpart }}</td>
+			<td>
+				{{- user.localpart -}}
+				{%- if user.has_admin_role -%}
+					<span class="with-tooltip above" data-tooltip="{% trans %}The user is an administrator.{% endtrans %}">{% call icon("admin") %}{% trans %} (Administrator){% endtrans %}{% endcall %}</span>
+				{%- endif -%}
+				{%- if user.has_restricted_role -%}
+					<span class="with-tooltip above" data-tooltip="{% trans %}The user is restricted.{% endtrans %}">{% call icon("lock") %}{% trans %} (Restricted){% endtrans %}{% endcall %}</span>
+				{%- endif -%}
+			</td>
 			<td>{% call value_or_hint(user.display_name) %}{% endcall %}</td>
 			<td class="nowrap">
-				{%- call action_button("delete", url_for(".delete_user", localpart=user.localpart), class="secondary") -%}
-					{% trans user_name=user.localpart %}Delete user {{ user_name }}{% endtrans %}
-				{%- endcall -%}
-				{%- call action_button("bug_report", url_for(".debug_user", localpart=user.localpart), class="secondary") -%}
-					{% trans user_name=user.localpart %}Show debug information for {{ user_name }}{% endtrans %}
-				{%- endcall -%}
-				{%- call custom_form_button("passwd", reset_form.action_create.name, user.localpart, class="secondary", slim=True) -%}
-					{% trans user_name=user.localpart %}Create password reset link for {{ user_name }}{% endtrans %}
+				{%- call action_button("edit", url_for(".edit_user", localpart=user.localpart), class="primary") -%}
+					{% trans user_name=user.localpart %}Edit user {{ user_name }}{% endtrans %}
 				{%- endcall -%}
 				</form>
 			</td>
@@ -33,5 +33,5 @@
 {% endfor %}
 	</tbody>
 </table></div>
-</form>
+{%- include "admin_create_invite_form.html" -%}
 {% endblock %}

snikket_web/templates/app.html

@@ -5,5 +5,5 @@
 {% endblock %}
 {% block topbar_right %}
 {{- super() -}}
-{% call standard_button("logout", url_for("user.logout"), class="tertiary") %}{% trans %}Log out{% endtrans %}{% endcall %}
+{% call standard_button("logout", url_for("user.logout"), class="tertiary slimmify") %}{% trans %}Log out{% endtrans %}{% endcall %}
 {%- endblock %}

snikket_web/templates/base.html

@@ -16,5 +16,5 @@
 		<meta name="msapplication-TileColor" content="#fbd308">
 		<meta name="theme-color" content="#fbd308">
 	</head>
-	<body{% if body_id | default(False) %} id="{{ body_id }}"{% endif %}{% if body_class | default(False) %} class="{{ body_class }}"{% endif %}{% if onload | default(False) %} onload="{{ onload }}"{% endif %}>{% block body %}{% endblock %}</body>
+	<body{% if body_id | default(False) %} id="{{ body_id }}"{% endif %} class="{% if is_in_debug_mode %}debug{% endif %}{% if body_class | default(False) %} {{ body_class }}{% endif %}"{% if onload | default(False) %} onload="{{ onload }}"{% endif %}>{% block body %}{% endblock %}</body>
 </html>

snikket_web/templates/invite.html

@@ -5,6 +5,6 @@
 <link rel="stylesheet" type="text/css" href="{{ url_for("static", filename="css/invite.css") }}">
 {% endblock %}
 {% block body %}
-<div id="mwrap"><main>{% block content %}{% endblock %}</main></div>
+<div id="mwrap"><div class="filler"></div><main>{% block content %}{% endblock %}</main><div class="filler"></div></div>
 {%- include "_footer.html" -%}
 {% endblock %}

snikket_web/templates/invite_view.html

@@ -6,6 +6,7 @@
 <title>{% trans site_name=config["SITE_NAME"] %}Invite to {{ site_name }} | Snikket{% endtrans %}</title>
 <script async type="text/javascript" src="{{ url_for("static", filename="js/invite-magic.js") }}"></script>
 <script async type="text/javascript" src="{{ url_for("static", filename="js/qrcode.min.js") }}"></script>
+<link rel="alternate" href="{{ invite.xmpp_uri }}">
 {% endblock %}
 {% block content %}
 <div class="elevated box el-3">
@@ -26,11 +27,12 @@
 		<ul>
 			<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>
 {%- if apple_store_url -%}
-			<li><a href="{{ apple_store_url }}"><img alt='{% trans %}Download on the App Store{% endtrans %}' src="{{ apple_store_badge() }}" class="apple"></a></li>
+			<li><a href="{{ apple_store_url }}" class="popover" data-popover-id="apple-popover"><img alt='{% trans %}Download on the App Store{% endtrans %}' src="{{ apple_store_badge() }}" class="apple"></a></li>
 {%- endif -%}
+			<li><a href="{{ f_droid_url }}" class="popover" data-popover-id="fdroid-popover"><img alt='{% trans %}Get it on F-Droid{% endtrans %}' src='{{ url_for('static', filename='img/f-droid-badge.png') }}' class="fdroid"/></a></li>
 		</ul>
 		{%- call standard_button("qrcode", "#qr-modal", class="primary", onclick="open_modal(this); return false;") -%}
-			{% trans %}Not on mobile?{% endtrans %}
+			{% trans %}Send to mobile device{% endtrans %}
 		{%- endcall -%}
 	</div>
 	<p>{% trans %}After installation the app should automatically open and prompt you to create an account. If not, simply click the button below.{% endtrans %}</p>
@@ -83,10 +85,77 @@
 		{%- endcall -%}
 	</div>
 </div>
+{%- if apple_store_url -%}
+<div id="apple-popover" class="modal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;" onclick="close_modal(this); return false;">
+	<div role="document" class="elevated box el-2" onclick="event.stopPropagation();">
+		<header class="modal-title">
+			{#- -#}
+			<span>{% trans %}Install on iOS{% endtrans %}</span>
+			{#- -#}
+			{%- call action_button("close", "#", onclick="close_modal(this.parentNode.parentNode.parentNode); return false;", class="tertiary") -%}
+				{% trans %}Close{% endtrans %}
+			{%- endcall -%}
+		</header>
+		<p>{% trans %}After downloading Snikket from the App Store, you have to return to this invite link and tap on "Open the app" to proceed.{% endtrans %}</p>
+		<ol>
+			<li><p>{% trans %}First download Snikket from the App Store using the button below:{% endtrans %}</p>
+			<p><a href="{{ apple_store_url }}"><img alt='{% trans %}Download on the App Store{% endtrans %}' src="{{ apple_store_badge() }}" class="apple"></a></p>
+			<li><p>{% trans %}After the installation is complete, you can return to this page and tap the "Open the app" button to continue with the setup:{% endtrans %}</p>
+			<p>
+			{%- call standard_button("exit_to_app", invite.xmpp_uri, class="primary") -%}
+				{% trans %}Open the app{% endtrans %}
+			{%- endcall -%}
+			</p></li>
+		</ol>
+		{#- -#}
+		{%- call standard_button("close", "#", onclick="close_modal(this.parentNode.parentNode); return false;", class="secondary") -%}
+			{% trans %}Close{% endtrans %}
+		{%- endcall -%}
+	</div>
+</div>
+{%- endif -%}
+<div id="fdroid-popover" class="modal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;" onclick="close_modal(this); return false;">
+	<div role="document" class="elevated box el-2" onclick="event.stopPropagation();">
+		<header class="modal-title">
+			{#- -#}
+			<span>{% trans %}Install via F-Droid{% endtrans %}</span>
+			{#- -#}
+			{%- call action_button("close", "#", onclick="close_modal(this.parentNode.parentNode.parentNode); return false;", class="tertiary") -%}
+				{% trans %}Close{% endtrans %}
+			{%- endcall -%}
+		</header>
+		<p>{% trans %}After installing Snikket via F-Droid, you have to return to this invite link and tap on "Open the app" to proceed.{% endtrans %}</p>
+		<ol>
+			<li><p>{% trans %}First install Snikket from F-Droid using the button below:{% endtrans %}</p>
+			<p><a href="{{ f_droid_url }}"><img alt='{% trans %}Install via F-Droid{% endtrans %}' src='{{ url_for('static', filename='img/f-droid-badge.png') }}' class="fdroid"/></a></p></li>
+			<li><p>{% trans %}After the installation is complete, you can return to this page and tap the "Open the app" button to continue with the setup:{% endtrans %}</p>
+			<p>
+			{%- call standard_button("exit_to_app", invite.xmpp_uri, class="primary") -%}
+				{% trans %}Open the app{% endtrans %}
+			{%- endcall -%}
+			</p></li>
+		</ol>
+		{#- -#}
+		{%- call standard_button("close", "#", onclick="close_modal(this.parentNode.parentNode); return false;", class="secondary") -%}
+			{% trans %}Close{% endtrans %}
+		{%- endcall -%}
+	</div>
+</div>
 <script type="text/javascript">
+	var catch_popover = function() {
+		open_modal(this);
+		return false;
+	}
+
 	var onload = function() {
 		apply_qr_code(document.getElementById("qr-invite-page"));
 		apply_qr_code(document.getElementById("qr-uri"));
+		var popover_as = document.getElementsByClassName("popover");
+		for (var i = 0; i < popover_as.length; ++i) {
+			var a = popover_as[i];
+			a.onclick = catch_popover;
+			a.href = "#" + a.dataset.popoverId;
+		}
 	};
 </script>
 {% endblock %}

snikket_web/templates/library.j2

@@ -80,7 +80,7 @@
 <div class="box warning">{#- -#}
 <header>{% trans %}Invalid input{% endtrans %}</header>
 {%- if error_list | length == 1 -%}
-<p>{{ error_list[0] }}.</p>
+<p>{{ error_list[0] }}</p>
 {%- else -%}
 <ul>
 {%- for error in error_list -%}

snikket_web/templates/login.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% from "library.j2" import box, form_button %}
+{% from "library.j2" import box, form_button, render_errors %}
 {% set body_id = "login" %}
 {% block head_lead %}
 <title>{{ _("Snikket Login") }}</title>
@@ -9,16 +9,16 @@
 {{ super() }}
 {% endblock %}
 {% block body %}
-<div id="mwrap"><main><div class="form layout-expanded">
+<div id="mwrap"><div class="filler"></div><main><div class="form layout-expanded">
 	<h1 class="form-title">{{ config["SITE_NAME"] }}</h1>
 	<p class="form-desc">{{ _("Enter your Snikket address and password to manage your account.") }}</p>
-	<form method="POST" action="{{ url_for('.login') }}" name="login">
+	<form method="POST" action="{{ url_for('.login') }}" name="login" id="login-form" onsubmit="return domainCheck();" data-addressid="{{ form.address.id }}" data-domain="{{ config["SNIKKET_DOMAIN"] }}">
 		{{ form.csrf_token }}
-		{% if form.errors %}
-		{% call box("alert", _("Login failed")) %}
-		<p>{{ form.errors.values() | flatten | join(", ")}}</p>
-		{% endcall %}
-		{% endif %}
+		{% call render_errors(form) %}{% endcall %}
+		<div class="box alert" role="alert" style="display: none;" id="id-warning">
+			<header>{% trans %}Incorrect address{% endtrans %}</header>
+			<p>{% trans snikket_domain=config["SNIKKET_DOMAIN"] %}This Snikket service only hosts addresses ending in <em>@{{ snikket_domain }}</em>. Your password was not sent.{% endtrans %}</p>
+		</div>
 		<div class="f-ebox">
 			{{ form.address.label(class="a11y-only") }}
 			{{ form.address(placeholder=form.address.label.text) }}
@@ -31,8 +31,22 @@
 			{%- call form_button("login", form.action_signin, class="primary") -%}{% endcall -%}
 		</div>
 	</from>
-</div></main></div>
-<footer>
-	<ul><li>{% trans about_url=url_for('.about') %}A <a href="{{ about_url }}">Snikket</a> service{% endtrans %}</li></ul>
-</footer>
+	<script type="text/javascript">
+var domainCheck = function() {
+	var form = document.getElementById("login-form");
+	var addressId = form.dataset.addressid;
+	var addressField = document.getElementById(addressId);
+	var domain = form.dataset.domain;
+	var address = addressField.value;
+	var errorBox = document.getElementById("id-warning");
+	if (address.includes("@") && !address.endsWith(domain)) {
+		errorBox.style.display = "block";
+		return false;
+	}
+	errorBox.style.display = "none";
+	return true;
+};
+	</script>
+</div></main><div class="filler"></div></div>
+{%- include "_footer.html" -%}
 {% endblock %}

snikket_web/templates/unauth.html

@@ -7,6 +7,25 @@
 	<div class="filler"></div>
 	{% block topbar_right %}{% endblock %}
 </div>
-<div id="mwrap"><main>{% block content %}{% endblock %}</main></div>
+<div id="mwrap">
+	{#- -#}
+	<div class="flashbox" id="flashbox">
+		{%- for category, message in get_flashed_messages(True) -%}
+		<div class="box {{ category }} el-5" role="alert">
+			{% if category == "success" %}
+			<header>{% trans %}Operation successful{% endtrans %}</header>
+			{% elif category == "alert" %}
+			<header>{% trans %}Error{% endtrans %}</header>
+			{% endif %}
+			<p>{{ message }}</p>
+		</div>
+		{%- endfor -%}
+	</div>
+	{#- -#}
+	<main>{% block content %}{% endblock %}</main>
+	{#- -#}
+	<div class="filler"></div>
+	{#- -#}
+</div>
 {%- include "_footer.html" -%}
 {% endblock %}

snikket_web/templates/user_logout.html

@@ -1,15 +1,12 @@
 {% extends "app.html" %}
 {% from "library.j2" import standard_button, form_button %}
-{% block head_lead %}
-<title>Snikket Web Portal</title>
-{% endblock %}
 {% block content %}
 <div class="form layout-expanded"><form method="POST">
 	<h2 class="form-title">{% trans %}Sign out of the Snikket Web Portal{% endtrans %}</h2>
 	<p class="form-desc">{% trans %}Click below to log yourself out of the web portal. This does not affect any other connected devices.{% endtrans %}</p>
 	{{ form.csrf_token }}
 	<div class="f-bbox">
-		{%- call standard_button("back", url_for("user.index"), class="secondary") -%}
+		{%- call standard_button("back", url_for("user.index"), class="tertiary") -%}
 			{% trans %}Back{% endtrans %}
 		{%- endcall -%}
 		{%- call form_button("logout", form.action_signout, class="primary") %}{% endcall -%}

snikket_web/templates/user_passwd.html

@@ -1,8 +1,5 @@
 {% extends "app.html" %}
 {% from "library.j2" import standard_button, custom_form_button, render_errors %}
-{% block head_lead %}
-<title>Snikket Web Portal</title>
-{% endblock %}
 {% block content %}
 <div class="form layout-expanded"><form method="POST">
 	<h1 class="form-title">{% trans %}Change your password{% endtrans %}</h1>
@@ -27,7 +24,7 @@
 		<p>{% trans %}After changing your password, you will have to enter the new password on all of your devices.{% endtrans %}</p>
 	</div>
 	<div class="f-bbox">
-		{%- call standard_button("back", url_for('.index'), class="secondary") %}{% trans %}Back{% endtrans %}{% endcall -%}
+		{%- call standard_button("back", url_for('.index'), class="tertiary") %}{% trans %}Back{% endtrans %}{% endcall -%}
 		{%- call custom_form_button("passwd", "", "", class="primary") -%}
 			{% trans %}Change password{% endtrans %}
 		{%- endcall -%}

snikket_web/templates/user_profile.html

@@ -1,13 +1,11 @@
 {% extends "app.html" %}
-{% from "library.j2" import standard_button, form_button, avatar with context %}
-{% block head_lead %}
-<title>Snikket Web Portal</title>
-{% endblock %}
+{% from "library.j2" import standard_button, form_button, render_errors, avatar with context %}
 {% block content %}
 <h1>{% trans %}Update your profile{% endtrans %}</h1>
 <div class="form layout-expanded"><form method="POST" enctype="multipart/form-data">
 	<h2 class="form-title">{% trans %}Profile{% endtrans %}</h2>
 	{{ form.csrf_token }}
+	{% call render_errors(form) %}{% endcall %}
 	<div class="f-ebox">
 		{{ form.nickname.label }}
 		{{ form.nickname(placeholder=user_info.username) }}
@@ -16,7 +14,10 @@
 		{{ form.avatar.label }}
 		<div class="avatar-wrap">
 		{%- call avatar(user_info.address, user_info.avatar_hash ) %}{% endcall -%}
-		{{ form.avatar }}
+		{{ form.avatar(accept="image/png",
+				 data_maxsize=max_avatar_size,
+				 data_warning_header=avatar_too_big_warning_header,
+				 data_maxsize_warning=avatar_too_big_warning) }}
 		</div>
 	</div>
 	<h3 class="form-title">{% trans %}Visibility{% endtrans %}</h3>
@@ -28,8 +29,27 @@
 		</fieldset>
 	</div>
 	<div class="f-bbox">
-		{%- call standard_button("back", url_for('.index'), class="secondary") %}{% trans %}Back{% endtrans %}{% endcall -%}
+		{%- call standard_button("back", url_for('.index'), class="tertiary") %}{% trans %}Back{% endtrans %}{% endcall -%}
 		{%- call form_button("done", form.action_save, class="primary") %}{% endcall -%}
 	</div>
+	<script type="text/javascript">
+	document.getElementById("{{ form.avatar.id }}").onchange = function() {
+		var maxsize_s = this.dataset.maxsize;
+		var maxsize = parseInt(maxsize_s);
+		var existing_alert = document.getElementById("avatar-alert");
+		if (existing_alert) {
+			existing_alert.parentNode.removeChild(existing_alert);
+		}
+		if (this.files[0].size > maxsize) {
+			var warning_header = this.dataset.warningHeader;
+			var warning_text = this.dataset.maxsizeWarning;
+			this.setCustomValidity(warning_text);
+			this.reportValidity();
+			this.value = null;
+		} else {
+			this.setCustomValidity("");
+		}
+	};
+	</script>
 </form></div>
 {% endblock %}

snikket_web/user.py

@@ -2,21 +2,27 @@ import asyncio
 import typing
 
 import quart.flask_patch
-from quart import Blueprint, render_template, request, redirect, url_for
+from quart import (
+    Blueprint,
+    render_template,
+    request,
+    redirect,
+    url_for,
+    flash,
+    current_app,
+)
 import quart.exceptions
 
 import wtforms
 
-import flask_wtf
-
 from flask_babel import lazy_gettext as _l, _
 
-from .infra import client
+from .infra import client, BaseForm
 
 bp = Blueprint('user', __name__)
 
 
-class ChangePasswordForm(flask_wtf.FlaskForm):  # type:ignore
+class ChangePasswordForm(BaseForm):
     current_password = wtforms.PasswordField(
         _l("Current password"),
         validators=[wtforms.validators.InputRequired()]
@@ -32,12 +38,12 @@ class ChangePasswordForm(flask_wtf.FlaskForm):  # type:ignore
         validators=[wtforms.validators.InputRequired(),
                     wtforms.validators.EqualTo(
                         "new_password",
-                        _l("The new passwords must match")
+                        _l("The new passwords must match.")
                     )]
     )
 
 
-class LogoutForm(flask_wtf.FlaskForm):  # type:ignore
+class LogoutForm(BaseForm):
     action_signout = wtforms.SubmitField(
         _l("Sign out"),
     )
@@ -50,7 +56,7 @@ _ACCESS_MODEL_CHOICES = [
 ]
 
 
-class ProfileForm(flask_wtf.FlaskForm):  # type:ignore
+class ProfileForm(BaseForm):
     nickname = wtforms.TextField(
         _l("Display name"),
     )
@@ -90,17 +96,29 @@ async def change_pw() -> typing.Union[str, quart.Response]:
                 quart.exceptions.Forbidden):
             # server refused current password, set an appropriate error
             form.current_password.errors.append(
-                _("Incorrect password"),
+                _("Incorrect password."),
             )
         else:
+            await flash(
+                _("Password changed"),
+                "success",
+            )
             return redirect(url_for("user.change_pw"))
 
     return await render_template("user_passwd.html", form=form)
 
 
+EAVATARTOOBIG = _l(
+    "The chosen avatar is too big. To be able to upload larger "
+    "avatars, please use the app."
+)
+
+
 @bp.route("/profile", methods=["GET", "POST"])
 @client.require_session()
 async def profile() -> typing.Union[str, quart.Response]:
+    max_avatar_size = current_app.config["MAX_AVATAR_SIZE"]
+
     form = ProfileForm()
     if request.method != "POST":
         user_info = await client.get_user_info()
@@ -114,26 +132,40 @@ async def profile() -> typing.Union[str, quart.Response]:
     if form.validate_on_submit():
         user_info = await client.get_user_info()
 
+        ok = True
         file_info = (await request.files).get(form.avatar.name)
         if file_info is not None:
             mimetype = file_info.mimetype
             data = file_info.stream.read()
-            if len(data) > 0:
+            if len(data) > max_avatar_size:
+                print(len(data), max_avatar_size)
+                form.avatar.errors.append(EAVATARTOOBIG)
+                ok = False
+            elif len(data) > 0:
                 await client.set_user_avatar(data, mimetype)
 
-        if user_info.get("nickname") != form.nickname.data:
-            await client.set_user_nickname(form.nickname.data)
+        if ok:
+            if user_info.get("nickname") != form.nickname.data:
+                await client.set_user_nickname(form.nickname.data)
 
-        access_model = form.profile_access_model.data
-        await asyncio.gather(
-            client.set_avatar_access_model(access_model),
-            client.set_vcard_access_model(access_model),
-            client.set_nickname_access_model(access_model),
-        )
+            access_model = form.profile_access_model.data
+            await asyncio.gather(
+                client.set_avatar_access_model(access_model),
+                client.set_vcard_access_model(access_model),
+                client.set_nickname_access_model(access_model),
+            )
 
-        return redirect(url_for(".profile"))
+            await flash(
+                _("Profile updated"),
+                "success",
+            )
+            return redirect(url_for(".profile"))
 
-    return await render_template("user_profile.html", form=form)
+    return await render_template("user_profile.html",
+                                 form=form,
+                                 max_avatar_size=max_avatar_size,
+                                 avatar_too_big_warning_header=_l("Error"),
+                                 avatar_too_big_warning=EAVATARTOOBIG)
 
 
 @bp.route("/logout", methods=["GET", "POST"])
@@ -142,6 +174,12 @@ async def logout() -> typing.Union[quart.Response, str]:
     form = LogoutForm()
     if form.validate_on_submit():
         await client.logout()
+        # No flashing here because we don’t collect flashes in the login page
+        # and it’d be weird.
+        # await flash(
+        #     _("Logged out"),
+        #     "success",
+        # )
         return redirect(url_for("main.index"))
 
     return await render_template("user_logout.html", form=form)

tools/icons.list

@@ -5,13 +5,16 @@ action/delete:delete
 action/logout:logout
 action/login:login
 action/exit_to_app:exit_to_app
+action/lock:lock
 communication/qr_code:qrcode
 communication/vpn_key:passwd
+communication/rss_feed:broadcast
 content/add_circle_outline:add
 content/add_link:create_link
 content/remove_circle_outline:remove
 content/content_copy:copy
 content/link_off:remove_link
+content/send:send
 navigation/arrow_back:back
 navigation/arrow_forward:forward
 navigation/cancel:cancel
@@ -25,3 +28,4 @@ navigation/close:close
 image/edit:edit
 action/admin_panel_settings:admin
 content/link:link
+content/insights:insights