Merge pull request #202 from snikket-im/ka/oauthtweaks

OAuth tweaks

.github/workflows/main.yaml

@@ -48,7 +48,30 @@ jobs:
           pip install flake8 flake8-print
       - name: Linting
         run: |
-          python -m flake8 snikket_web
+          make flake8
+
+  translation-check:
+    runs-on: ubuntu-latest
+
+    name: 'lint: i18n'
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-python@v2
+        with:
+          python-version: '3.9'
+      - name: Install
+        run: |
+          set -euo pipefail
+          pip install flask-babel
+      - name: Linting
+        run: |
+          sed -ri '/^"POT-Creation-Date: /d;/^"Generated-By: /d' snikket_web/translations/messages.pot
+          git add snikket_web/translations/messages.pot
+          make extract_translations
+          sed -ri '/^"POT-Creation-Date: /d;/^"Generated-By: /d' snikket_web/translations/messages.pot
+          git diff --exit-code --color -- snikket_web/translations/messages.pot
+
 
   build:
     runs-on: ubuntu-latest

Dockerfile

@@ -1,28 +1,22 @@
-FROM debian:bullseye-slim AS build
+FROM debian:bookworm-slim AS build
 
 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;
+        python3 python3-mypy python3-dotenv python3-toml python3-babel python3-distutils \
+        sassc make;
 
-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
 
 WORKDIR /opt/snikket-web-portal
 
-RUN set -eu; \
-    pip3 install -r requirements.txt; \
-    pip3 install -r build-requirements.txt; \
-    make;
+RUN make
 
 
-FROM debian:bullseye-slim
+FROM debian:bookworm-slim
 
 ARG BUILD_SERIES=dev
 ARG BUILD_ID=0
@@ -33,19 +27,19 @@ ENV SNIKKET_WEB_PYENV=/etc/snikket-web-portal/env.py
 
 ENV SNIKKET_WEB_PROSODY_ENDPOINT=http://127.0.0.1:5280/
 
-COPY requirements.txt /opt/snikket-web-portal/requirements.txt
-
 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 build-essential libpython3-dev netcat; \
-    pip3 install -r requirements.txt; \
-    apt-get remove -y --autoremove build-essential libpython3-dev; \
+      netcat-traditional python3 python3-setuptools python3-pip \
+      python3-aiohttp python3-email-validator python3-flask-babel \
+      python3-flaskext.wtf python3-hsluv python3-hypercorn \
+      python3-quart python3-typing-extensions python3-wtforms ; \
+      pip3 install --break-system-packages environ-config ; \
+    apt-get remove -y --purge python3-pip python3-setuptools; \
     apt-get clean ; rm -rf /var/lib/apt/lists; \
-    pip3 install hypercorn; \
     rm -rf /root/.cache;
 
 HEALTHCHECK CMD nc -zv ${SNIKKET_TWEAK_PORTAL_INTERNAL_HTTP_INTERFACE:-127.0.0.1} ${SNIKKET_TWEAK_PORTAL_INTERNAL_HTTP_PORT:-5765}

Makefile

@@ -5,8 +5,10 @@ generated_css_files = $(patsubst snikket_web/scss/%.scss,snikket_web/static/css/
 translation_basepath = snikket_web/translations
 pot_file = $(translation_basepath)/messages.pot
 
+black_formatted_py = snikket_web/prosodyclient.py
+
 PYTHON3 ?= python3
-SCSSC ?= $(PYTHON3) -m scss --load-path snikket_web/scss/
+SCSSC ?= sassc --load-path snikket_web/scss/
 
 all: build_css compile_translations
 
@@ -14,7 +16,7 @@ build_css: $(generated_css_files)
 
 $(generated_css_files): snikket_web/static/css/%.css: snikket_web/scss/%.scss $(scss_files) $(scss_includes)
 	mkdir -p snikket_web/static/css/
-	$(SCSSC) -o "$@" "$<"
+	$(SCSSC) "$<" "$@"
 
 clean:
 	rm -f $(generated_css_files)
@@ -34,4 +36,20 @@ compile_translations:
 	-pybabel compile -d $(translation_basepath)
 
 
+.PHONY: lint
+lint: format flake8
+
+.PHONY: format
+format:
+	$(PYTHON3) -m black $(black_formatted_py)
+
+.PHONY: flake8
+flake8:
+	$(PYTHON3) -m flake8 --exclude=$(subst $(space),$(comma),$(strip $(black_formatted_py))) snikket_web
+	$(PYTHON3) -m flake8 --ignore=E501,W503 $(black_formatted_py)
+
+.PHONY: mypy
+mypy:
+	$(PYTHON3) -m mypy --python-version 3.11 snikket_web
+
 .PHONY: build_css clean update_translations compile_translations extract_translations force_update_translations

babel.cfg

@@ -1,4 +1,3 @@
 [python: snikket_web/**.py]
 [jinja2: snikket_web/templates/**.html]
 [jinja2: snikket_web/templates/**.j2]
-extensions=jinja2.ext.autoescape,jinja2.ext.with_

build-requirements.txt

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

docker/entrypoint.sh

@@ -1,8 +1,16 @@
 #!/bin/sh
 
 export SNIKKET_WEB_DOMAIN="$SNIKKET_DOMAIN"
+if [ -n "${SNIKKET_SITE_NAME:-}" ]; then
+    export SNIKKET_WEB_SITE_NAME="$SNIKKET_SITE_NAME"
+fi
+
+export SNIKKET_WEB_TOS_URI="${SNIKKET_TOS_URI}"
+export SNIKKET_WEB_PRIVACY_URI="${SNIKKET_PRIVACY_URI}"
+export SNIKKET_WEB_ABUSE_EMAIL="${SNIKKET_ABUSE_EMAIL}"
+export SNIKKET_WEB_SECURITY_EMAIL="${SNIKKET_SECURITY_EMAIL}"
 
 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()'
+exec hypercorn -b "${SNIKKET_TWEAK_PORTAL_INTERNAL_HTTP_INTERFACE}:${SNIKKET_TWEAK_PORTAL_INTERNAL_HTTP_PORT}" --access-logfile=- --log-file=- 'snikket_web:create_app()'

requirements.txt

@@ -1,9 +1,10 @@
-aiohttp~=3.6
-quart~=0.17
-flask-wtf~=0.14
+aiohttp~=3.8,<3.9
+quart~=0.18,<0.19
+flask-wtf~=1.1,<1.2
 hsluv~=5.0
-flask-babel~=1.0
-email-validator~=1.1
+flask-babel~=2.0,<3
+email-validator~=1.3
 environ-config~=20.0
-wtforms~=2.3
+wtforms~=3.0,<4
 typing-extensions
+werkzeug~=2.2,<3

snikket_web/__init__.py

@@ -147,14 +147,20 @@ class AppConfig:
     site_name = environ.var("")
     avatar_cache_ttl = environ.var(1800, converter=int)
     languages = environ.var([
+        # Keep `en` as the first language, because it is used as a fallback
+        # if the language negotiation cannot find another match. It is more
+        # likely that users are able to read english (or find a suitable
+        # online translator) than, for instance, danish.
+        "en",
         "da",
         "de",
-        "en",
         "fr",
         "id",
         "it",
         "pl",
+        "ru",
         "sv",
+        "uk",
         "zh_Hans_CN",
     ], converter=autosplit)
     apple_store_url = environ.var(
@@ -166,6 +172,10 @@ class AppConfig:
     # tools may also very well override it.
     max_avatar_size = environ.var(1024*1024, converter=int)
     show_metrics = environ.bool_var(True)
+    tos_uri = environ.var("")
+    privacy_uri = environ.var("")
+    abuse_email = environ.var("")
+    security_email = environ.var("")
 
 
 _UPPER_CASE = "".join(map(chr, range(ord("A"), ord("Z")+1)))
@@ -198,6 +208,12 @@ def create_app() -> quart.Quart:
     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.config["TOS_URI"] = config.tos_uri
+    app.config["PRIVACY_URI"] = config.privacy_uri
+    app.config["ABUSE_EMAIL"] = config.abuse_email
+    app.config["SECURITY_EMAIL"] = config.security_email
+    app.config["SESSION_COOKIE_SECURE"] = True
+    app.config["SESSION_COOKIE_SAMESITE"] = "Lax"
 
     app.context_processor(proc)
     app.register_error_handler(

snikket_web/admin.py

@@ -12,7 +12,6 @@ import werkzeug.exceptions
 import quart.flask_patch
 
 import wtforms
-import wtforms.fields.html5
 
 from quart import (
     Blueprint,
@@ -77,16 +76,25 @@ class EditUserForm(BaseForm):
     role = wtforms.RadioField(
         _l("Access Level"),
         choices=[
-            ("prosody:restricted", _("Limited")),
-            ("prosody:normal", _l("Normal user")),
+            ("prosody:restricted", _l("Limited")),
+            ("prosody:registered", _l("Normal user")),
             ("prosody:admin", _l("Administrator")),
         ],
+        default="prosody:registered",
     )
 
     action_save = wtforms.SubmitField(
         _l("Update user"),
     )
 
+    action_restore = wtforms.SubmitField(
+        _l("Restore account"),
+    )
+
+    action_enable = wtforms.SubmitField(
+        _l("Unlock account"),
+    )
+
     action_create_reset = wtforms.SubmitField(
         _l("Create password reset link"),
     )
@@ -113,18 +121,44 @@ async def edit_user(localpart: str) -> typing.Union[werkzeug.Response, str]:
                 ".user_password_reset_link",
                 id_=reset_link.id_,
             ))
+        elif form.action_restore.data or form.action_enable.data:
+            await client.enable_user_account(localpart)
+            try:
+                if form.action_restore.data:
+                    await flash(
+                        _("User account restored"),
+                        "success",
+                    )
+                else:
+                    await flash(
+                        _("User account unlocked"),
+                        "success",
+                    )
+                return redirect(url_for(".users"))
+            except aiohttp.ClientResponseError:
+                if form.action_restore.data:
+                    await flash(
+                        _("Could not restore user account"),
+                        "alert",
+                    )
+                else:
+                    await flash(
+                        _("Could not unlock user account"),
+                        "alert",
+                    )
+                return redirect(url_for(".edit_user", localpart=localpart))
 
         await client.update_user(
             localpart,
             display_name=form.display_name.data,
-            roles=[form.role.data],
+            role=form.role.data,
         )
 
         await flash(
             _("User information updated."),
             "success",
         )
-        return redirect(url_for(".edit_user", localpart=localpart))
+        return redirect(url_for(".users"))
 
     elif request.method == "GET":
         form.localpart.data = target_user_info.localpart
@@ -132,7 +166,7 @@ async def edit_user(localpart: str) -> typing.Union[werkzeug.Response, str]:
         if target_user_info.roles:
             form.role.data = target_user_info.roles[0]
         else:
-            form.role.data = "prosody:normal"
+            form.role.data = "prosody:registered"
 
     return await render_template(
         "admin_edit_user.html",
@@ -257,6 +291,20 @@ class InvitePost(BaseForm):
         default="account",
     )
 
+    role = wtforms.RadioField(
+        _l("Access Level"),
+        choices=[
+            ("prosody:restricted", _l("Limited")),
+            ("prosody:registered", _l("Normal user")),
+            ("prosody:admin", _l("Administrator")),
+        ],
+        default="prosody:registered",
+    )
+
+    note = wtforms.StringField(
+        _l("Comment (optional)"),
+    )
+
     action_create_invite = wtforms.SubmitField(
         _l("New invitation link")
     )
@@ -336,12 +384,16 @@ async def create_invite() -> typing.Union[str, werkzeug.Response]:
         if form.type_.data == "group":
             invite = await client.create_group_invite(
                 group_ids=form.circles.data,
+                role_names=[form.role.data],
                 ttl=form.lifetime.data,
+                note=form.note.data,
             )
         else:
             invite = await client.create_account_invite(
                 group_ids=form.circles.data,
+                role_names=[form.role.data],
                 ttl=form.lifetime.data,
+                note=form.note.data,
             )
         await flash(
             _("Invitation created"),
@@ -453,16 +505,14 @@ class EditCircleForm(BaseForm):
         _l("Update circle")
     )
 
-    action_delete = wtforms.SubmitField(
-        _l("Delete circle permanently")
-    )
-
     action_remove_user = wtforms.StringField()
 
     action_add_user = wtforms.SubmitField(
         _l("Add user")
     )
 
+    action_remove_group_chat = wtforms.StringField()
+
 
 @bp.route("/circle/<id_>", methods=["GET", "POST"])
 @client.require_admin_session()
@@ -516,13 +566,6 @@ async def edit_circle(id_: str) -> typing.Union[str, werkzeug.Response]:
                 _("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:
                 await client.add_group_member(
@@ -542,6 +585,15 @@ async def edit_circle(id_: str) -> typing.Union[str, werkzeug.Response]:
                 _("User removed from circle"),
                 "success",
             )
+        elif form.action_remove_group_chat.data:
+            await client.remove_group_chat(
+                id_,
+                form.action_remove_group_chat.data,
+            )
+            await flash(
+                _("Chat removed from circle"),
+                "success",
+            )
 
         return redirect(url_for(".edit_circle", id_=id_))
 
@@ -549,11 +601,103 @@ async def edit_circle(id_: str) -> typing.Union[str, werkzeug.Response]:
         "admin_edit_circle.html",
         target_circle=circle,
         form=form,
+        circle_chats=circle.chats,
         circle_members=circle_members,
         invite_form=invite_form,
     )
 
 
+class DeleteCircleForm(BaseForm):
+    action_delete = wtforms.SubmitField(
+        _l("Delete circle permanently")
+    )
+
+
+@bp.route("/circle/<id_>/delete", methods=["GET", "POST"])
+@client.require_admin_session()
+async def delete_circle(id_: str) -> typing.Union[str, werkzeug.Response]:
+    async with client.authenticated_session() as session:
+        try:
+            circle = await client.get_group_by_id(
+                id_,
+                session=session,
+            )
+        except aiohttp.ClientResponseError as exc:
+            if exc.status == 404:
+                await flash(
+                    _("No such circle exists"),
+                    "alert",
+                )
+                return redirect(url_for(".circles"))
+            raise
+
+    form = DeleteCircleForm()
+    if form.validate_on_submit():
+        if form.action_delete.data:
+            await client.delete_group(id_)
+            await flash(
+                _("Circle deleted"),
+                "success",
+            )
+        return redirect(url_for(".circles"))
+
+    return await render_template(
+        "admin_delete_circle.html",
+        target_circle=circle,
+        form=form,
+    )
+
+
+class AddCircleChatForm(BaseForm):
+    name = wtforms.StringField(
+        _l("Group chat name"),
+        validators=[wtforms.validators.InputRequired()],
+    )
+
+    action_save = wtforms.SubmitField(
+        _l("Create group chat")
+    )
+
+
+@bp.route("/circle/<id_>/add_chat", methods=["GET", "POST"])
+@client.require_admin_session()
+async def edit_circle_add_chat(
+    id_: str
+) -> typing.Union[str, werkzeug.Response]:
+    async with client.authenticated_session() as session:
+        try:
+            circle = await client.get_group_by_id(
+                id_,
+                session=session,
+            )
+        except aiohttp.ClientResponseError as exc:
+            if exc.status == 404:
+                await flash(
+                    _("No such circle exists"),
+                    "alert",
+                )
+                return redirect(url_for(".circles"))
+            raise
+
+    form = AddCircleChatForm()
+
+    if form.validate_on_submit():
+        if form.action_save.data:
+            await client.add_group_chat(id_, form.name.data)
+            await flash(
+                _("New group chat added to circle"),
+                "success",
+            )
+
+            return redirect(url_for(".edit_circle", id_=id_))
+
+    return await render_template(
+        "admin_create_circle_chat.html",
+        target_circle=circle,
+        group_chat_form=form,
+    )
+
+
 _CPU_EPOCH = time.process_time()
 _MONOTONIC_EPOCH = time.monotonic()
 
@@ -608,21 +752,21 @@ def get_system_stats() -> typing.MutableMapping[
 
 class AnnouncementForm(BaseForm):
     text = wtforms.StringField(
-        _("Message contents"),
+        _l("Message contents"),
         widget=wtforms.widgets.TextArea(),
         validators=[wtforms.validators.DataRequired()],
     )
 
     online_only = wtforms.BooleanField(
-        _("Only send to online users"),
+        _l("Only send to online users"),
     )
 
     action_post_all = wtforms.SubmitField(
-        _("Post to all users"),
+        _l("Post to all users"),
     )
 
     action_send_preview = wtforms.SubmitField(
-        _("Send preview to yourself"),
+        _l("Send preview to yourself"),
     )
 
 
@@ -687,6 +831,11 @@ async def system() -> typing.Union[str, werkzeug.Response]:
         except KeyError:
             pass
 
+        try:
+            metrics["users"] = prosody_metrics["users"]
+        except KeyError:
+            pass
+
         for k in list(metrics.keys()):
             if metrics[k] is None:
                 # so that defaulting in jinja works

snikket_web/infra.py

@@ -4,15 +4,19 @@ import math
 import secrets
 import typing
 
+from datetime import datetime, timedelta, timezone
+
 import quart.flask_patch  # noqa:F401
 from quart import (
     current_app,
     request,
+    g,
 )
 
 import flask_babel
 import flask_wtf
-from flask_babel import _
+from flask_babel import lazy_gettext as _l
+import flask_babel as _
 
 from . import prosodyclient
 
@@ -34,6 +38,7 @@ BYTE_UNIT_SCALE_MAP = [
 
 @babel.localeselector  # type:ignore
 def selected_locale() -> str:
+    g.language_header_accessed = True
     selected = request.accept_languages.best_match(
         current_app.config['LANGUAGES']
     ) or current_app.config['LANGUAGES'][0]
@@ -48,7 +53,7 @@ def flatten(a: typing.Iterable, levels: int = 1) -> typing.Iterable:
 
 def circle_name(c: typing.Any) -> str:
     if c.id_ == "default" and c.name == "default":
-        return _("Main")
+        return _l("Main")
     return c.name
 
 
@@ -68,6 +73,49 @@ def format_bytes(n: float) -> str:
     return "{} {}".format(n, unit)
 
 
+def format_last_activity(timestamp: typing.Optional[int]) -> str:
+    if timestamp is None:
+        return _l("Never")
+
+    last_active = datetime.fromtimestamp(timestamp, tz=timezone.utc)
+    # TODO: This 'now' should use the user's local time zone, but we
+    # don't have that information. Thus 'today'/'yesterday' may be
+    # slightly inaccurate, but compared to alternative solutions it
+    # should hopefully be "good enough".
+    now = datetime.now(tz=timezone.utc)
+    time_ago = now - last_active
+
+    yesterday = now - timedelta(days=1)
+
+    if (
+        last_active.year == now.year
+        and last_active.month == now.month
+        and last_active.day == now.day
+    ):
+        return _l("Today")
+    elif (
+        last_active.year == yesterday.year
+        and last_active.month == yesterday.month
+        and last_active.day == yesterday.day
+    ):
+        return _l("Yesterday")
+
+    return _.gettext(
+        "%(time)s ago",
+        time=flask_babel.format_timedelta(time_ago, granularity="day"),
+    )
+
+
+def template_now() -> typing.Dict[str, typing.Any]:
+    return dict(now=lambda: datetime.now(timezone.utc))
+
+
+def add_vary_language_header(resp: quart.Response) -> quart.Response:
+    if getattr(g, "language_header_accessed", False):
+        resp.vary.add("Accept-Language")
+    return resp
+
+
 def init_templating(app: quart.Quart) -> None:
     app.template_filter("repr")(repr)
     app.template_filter("format_datetime")(flask_babel.format_datetime)
@@ -78,6 +126,9 @@ def init_templating(app: quart.Quart) -> None:
     app.template_filter("format_bytes")(format_bytes)
     app.template_filter("flatten")(flatten)
     app.template_filter("circle_name")(circle_name)
+    app.template_filter("format_last_activity")(format_last_activity)
+    app.context_processor(template_now)
+    app.after_request(add_vary_language_header)
 
 
 def generate_error_id() -> str:

snikket_web/invite.py

@@ -47,10 +47,20 @@ def apple_store_badge() -> str:
     return url_for("static", filename="img/apple/en.svg")
 
 
+def play_store_badge() -> str:
+    locale = selected_locale()
+    filename = "{}_badge_web_generic.png".format(locale)
+    static_path = pathlib.Path(__file__).parent / "static" / "img" / "google"
+    if (static_path / filename).exists():
+        return url_for("static", filename="img/google/{}".format(filename))
+    return url_for("static", filename="img/google/en_badge_web_generic.png")
+
+
 @bp.context_processor
 def context() -> typing.Dict[str, typing.Any]:
     return {
         "apple_store_badge": apple_store_badge,
+        "play_store_badge": play_store_badge,
     }
 
 
@@ -104,7 +114,7 @@ async def view(id_: str) -> typing.Union[quart.Response,
     return quart.Response(
         body,
         headers={
-            "Link": "<{}> rel=\"alternate\"".format(invite.xmpp_uri),
+            "Link": "<{}>; rel=\"alternate\"".format(invite.xmpp_uri),
         }
     )
 
@@ -116,6 +126,10 @@ class RegisterForm(BaseForm):
 
     password = wtforms.PasswordField(
         _l("Password"),
+        validators=[
+            wtforms.validators.InputRequired(),
+            wtforms.validators.Length(min=10),
+        ],
     )
 
     password_confirm = wtforms.PasswordField(
@@ -184,6 +198,10 @@ async def register(id_: str) -> typing.Union[str, werkzeug.Response]:
 class ResetForm(BaseForm):
     password = wtforms.PasswordField(
         _l("Password"),
+        validators=[
+            wtforms.validators.InputRequired(),
+            wtforms.validators.Length(min=10),
+        ],
     )
 
     password_confirm = wtforms.PasswordField(

snikket_web/main.py

@@ -34,7 +34,7 @@ bp = quart.Blueprint("main", __name__)
 
 
 class LoginForm(BaseForm):
-    address = wtforms.TextField(
+    address = wtforms.StringField(
         _l("Address"),
         validators=[wtforms.validators.InputRequired()],
     )
@@ -93,10 +93,16 @@ async def login() -> typing.Union[str, werkzeug.Response]:
 @bp.route("/meta/about.html")
 async def about() -> str:
     version = None
+    core_versions = {}
     extra_versions = {}
-
     if current_app.debug or client.is_admin_session:
         version = _version.version
+        try:
+            core_versions["Prosody"] = await client.get_server_version()
+        except werkzeug.exceptions.Unauthorized:
+            core_versions["Prosody"] = "unknown"
+
+    if current_app.debug:
         extra_versions["aiohttp"] = aiohttp.__version__
         extra_versions["babel"] = babel.__version__
         extra_versions["wtforms"] = wtforms.__version__
@@ -110,6 +116,7 @@ async def about() -> str:
         "about.html",
         version=version,
         extra_versions=extra_versions,
+        core_versions=core_versions,
     )
 
 
@@ -166,6 +173,42 @@ async def avatar(from_: str, code: str) -> quart.Response:
     return response
 
 
+@bp.route("/terms")
+async def terms() -> Response:
+    if not current_app.config["TOS_URI"]:
+        return Response("", 404)
+
+    return Response("", status=303, headers={
+        "Location": current_app.config["TOS_URI"],
+    })
+
+
+@bp.route("/privacy")
+async def privacy() -> Response:
+    if not current_app.config["PRIVACY_URI"]:
+        return Response("", 404)
+
+    return Response("", status=303, headers={
+        "Location": current_app.config["PRIVACY_URI"],
+    })
+
+
+# This is linked from the iOS app and about page
+@bp.route("/policies/")
+async def policies() -> str:
+    return await render_template(
+        "policies.html",
+    )
+
+
+@bp.route("/.well-known/security.txt")
+async def securitytxt() -> Response:
+    return Response(
+        await render_template("security.txt"),
+        mimetype="text/plain;charset=UTF-8",
+    )
+
+
 @bp.route("/_health")
 async def health() -> Response:
     return Response("STATUS OK", content_type="text/plain")

snikket_web/scss/app.scss

@@ -259,6 +259,13 @@ div.form.layout-expanded {
 		margin: 0;
 	}
 
+	fieldset.descriptive-radio-selection {
+		p {
+			margin-top: 0;
+			margin-bottom: $w-s2;
+		}
+	}
+
 	input[type="radio"] + label, input[type="checkbox"] + label {
 		font-weight: inherit;
 		color: inherit;
@@ -275,22 +282,22 @@ div.form.layout-expanded {
 	}
 
 	@each $type in $text-entry-inputs {
-		input[type=$type] {
+		input[type=#{$type}] {
 			width: 100%;
 			border: none;
 			border-bottom: $w-s4 solid $primary-500;
 			margin-bottom: -$w-s4;
 		}
 
-		input[type=$type].has-error {
+		input[type=#{$type}].has-error {
 			border-right: $w-s4 solid $alert-500;
 		}
 
-		input[type=$type]:hover {
+		input[type=#{$type}]:hover {
 			border-bottom-color: $primary-700;
 		}
 
-		input[type=$type]:focus {
+		input[type=#{$type}]:focus {
 			border-bottom-color: $primary-800;
 		}
 	}
@@ -363,6 +370,10 @@ div.form.layout-expanded {
 		margin-left: 0.25em;
 	}
 
+	.radio-button-ext {
+		margin-left: 0.5rem;
+	}
+
 	div.select-wrap {
 		display: block;
 		border-bottom: $w-s4 solid $primary-500;
@@ -646,69 +657,6 @@ input[type="submit"], button, .button {
 
 
 
-/* button, .button {
-	margin: 0 $w-s2;
-}
-
-button.lv-primary, .button.lv-primary {
-	background-color: $gray-500;
-	color: $gray-900;
-	border-radius: $w-s4;
-	border: $w-s4 solid $gray-400;
-
-	@each $type, $values in $colours {
-		&.c-#{$type} {
-			border-color: nth($values, 4);
-			background-color: nth($values, 5);
-			color: nth($values, 9);
-		}
-
-		&.c-#{$type}:hover {
-			background-color: nth($values, 4);
-		}
-	}
-}
-
-button.lv-secondary, .button.lv-secondary {
-	background-color: $gray-700;
-	color: $gray-100;
-	border-radius: $w-s4;
-
-	@each $type, $values in $colours {
-		&.c-#{$type} {
-			background-color: nth($values, 7);
-			color: nth($values, 1);
-		}
-	}
-}
-
-button.lv-tertiary, .button.lv-tertiary {
-	background-color: inherit;
-	color: $gray-300;
-	border-radius: $w-s4;
-	text-decoration: underline;
-
-	@each $type, $values in $colours {
-		&.c-#{$type} {
-			color: nth($values, 3);
-		}
-	}
-}
-*/
-
-/*
-	button.lv-secondary.c-#{$type}, .button.lv-secondary.c-#{$type} {
-		background-color: nth($values, 7);
-		color: nth($values, 1);
-	}
-
-	button.lv-tertiary.c-#{$type}, .button.lv-tertiary.c-#{$type} {
-		color: nth($values, 3);
-		text-decoration: underline;
-		background-color: transparent;
-	}
-}*/
-
 /* boxes */
 
 .box {
@@ -771,8 +719,7 @@ button.lv-tertiary, .button.lv-tertiary {
 	height: 1.5em;
 	vertical-align: middle;
 	background-size: cover;
-	box-shadow: inset 0px 0px 0px 2px rgba(0, 0, 0, 0.2);
-	border-radius: $w-s4;
+	border-radius: 10%;
 
 	margin: 0 0.25em;
 
@@ -1045,19 +992,18 @@ div.profile-card {
 	}
 }
 
-/* clipboard button */
+/* clipboard and share buttons */
 
-.copy-to-clipboard {
+.copy-to-clipboard, .share-button {
 	cursor: pointer;
 	font-style: normal;
 	text-decoration: none;
 }
 
-body.no-copy .copy-to-clipboard {
+body.no-copy .copy-to-clipboard, body.no-share .share-button {
 	display: none !important;
 }
 
-
 /* magic */
 
 pre.guru-meditation {
@@ -1121,7 +1067,7 @@ pre.guru-meditation {
 		}
 
 		@each $type in $text-entry-inputs {
-			input[type=$type] {
+			input[type=#{$type}] {
 				background-color: black;
 			}
 
@@ -1131,6 +1077,10 @@ pre.guru-meditation {
 		}
 	}
 
+	label, legend {
+		color: $gray-800 !important;
+	}
+
 	.box {
 		background-color: black;
 		border-color: $gray-800;
@@ -1265,6 +1215,13 @@ pre.guru-meditation {
 	p.form-desc.weak, p.field-desc.weak {
 		color: $gray-700;
 	}
+
+	.user-badge-icon {
+		color: $gray-900 !important;
+		background-color: $gray-100 !important;
+		border-color: $gray-300 !important;
+		box-shadow: black 0 0 2px !important;
+	}
 }
 
 /* tooltip magic */
@@ -1315,3 +1272,53 @@ pre.guru-meditation {
 .with-tooltip:hover:before, .with-tooltip:hover:after {
 	display: block;
 }
+
+.username-with-avatar {
+	display: flex;
+	align-items: center;
+
+	.avatar-container {
+		position: relative;
+
+		.avatar {
+			margin-left: 0;
+		}
+	}
+
+	.user-badge-icon {
+		position: absolute;
+		bottom: -10px;
+		right: 0px;
+		background: white;
+		border-radius: 50%;
+		width: 1.2em;
+		height: 1.2em;
+		border-color: $gray-500;
+		border-width: 1px;
+		border-style: solid;
+		text-align: center;
+		margin: 0;
+		padding: 0;
+		margin: 0;
+		padding: 0;
+		box-shadow: $gray-500 0px 0px 2px;
+
+		line-height: 1;
+		.icon {
+			/* vertical-align: text-bottom; */
+			padding: 0.1em;
+		}
+	}
+
+	.user-info-container {
+		margin-left: 0.5em;
+	}
+
+	.user-display-name {
+		font-size: 110%;
+	}
+
+	.user-jid {
+		font-size: 90%;
+	}
+}

snikket_web/scss/invite.scss

@@ -80,60 +80,6 @@ img.fdroid {
 	height: $w-l3;
 }
 
-.tabbox {
-	display: flex;
-	flex-direction: column;
-	margin: $w-l1 0;
-
-	> nav.tabs {
-		display: flex;
-		flex-direction: row;
-
-		> a {
-			display: inline-block;
-			padding: $w-s2;
-			border-top-left-radius: $w-s4;
-			border-top-right-radius: $w-s4;
-
-			&, &:visited {
-				color: inherit;
-				text-decoration: underline;
-				text-decoration-color: $accent-500;
-			}
-
-			&:hover {
-				background: $accent-900;
-				border-color: $accent-800;
-				color: black;
-			}
-
-			&.active {
-				text-decoration: none;
-				background: linear-gradient(0deg, $accent-600, $accent-700);
-				color: $accent-200;
-
-				&:hover, &:focus {
-					background: linear-gradient(0deg, $accent-700, $accent-800);
-				}
-
-				&:active {
-					background: $accent-600;
-				}
-			}
-		}
-	}
-
-	> .tab-pane {
-		display: none;
-		padding: 0 $w-0;
-		background: $accent-900;
-
-		&.active {
-			display: block;
-		}
-	}
-}
-
 .qr {
 	margin: $w-l1 0;
 	display: flex;

snikket_web/static/img/icons.svg

@@ -42,6 +42,16 @@ licensed under the terms of the Apache 2.0 License -->
 <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: action/lock_open/materialiconsround/24px.svg -->
+<symbol id="icon-lock_open" viewBox="0 0 24 24">
+<path d="M0 0h24v24H0V0z" fill="none" />
+<path d="M12 13c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6-5h-1V6c0-2.76-2.24-5-5-5-2.28 0-4.27 1.54-4.84 3.75-.14.54.18 1.08.72 1.22.53.14 1.08-.18 1.22-.72C9.44 3.93 10.63 3 12 3c1.65 0 3 1.35 3 3v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 11c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-8c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v8z" />
+</symbol>
+<!-- from: action/restore_from_trash/materialiconsround/24px.svg -->
+<symbol id="icon-restore_from_trash" viewBox="0 0 24 24">
+<path d="M0 0h24v24H0V0z" fill="none" />
+<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v10zm5.65-8.65c.2-.2.51-.2.71 0L16 14h-2v4h-4v-4H8l3.65-3.65zM15.5 4l-.71-.71c-.18-.18-.44-.29-.7-.29H9.91c-.26 0-.52.11-.7.29L8.5 4H6c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1h-2.5z" />
+</symbol>
 <!-- from: communication/import_export/materialiconsround/24px.svg -->
 <symbol id="icon-import_export" viewBox="0 0 24 24">
 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -138,6 +148,11 @@ licensed under the terms of the Apache 2.0 License -->
 <path d="M0 0h24v24H0V0z" fill="none" />
 <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V18c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-1.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05.02.01.03.03.04.04 1.14.83 1.93 1.94 1.93 3.41V18c0 .35-.07.69-.18 1H22c.55 0 1-.45 1-1v-1.5c0-2.33-4.67-3.5-7-3.5z" />
 </symbol>
+<!-- from: social/person/materialiconsround/24px.svg -->
+<symbol id="icon-person" viewBox="0 0 24 24">
+<path d="M0 0h24v24H0V0z" fill="none" />
+<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v1c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-1c0-2.66-5.33-4-8-4z" />
+</symbol>
 <!-- from: social/group_add/materialiconsround/24px.svg -->
 <symbol id="icon-create_group" viewBox="0 0 24 24">
 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -178,4 +193,9 @@ licensed under the terms of the Apache 2.0 License -->
 <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>
+<!-- from: social/share/materialiconsround/24px.svg -->
+<symbol id="icon-share" viewBox="0 0 24 24">
+<path d="M0 0h24v24H0V0z" fill="none" />
+<path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z" />
+</symbol>
 </defs></svg>

snikket_web/templates/about.html

@@ -6,24 +6,32 @@
 {% block body %}
 <main>
 	<div class="box el-2">
-		<h1>{% trans %}About Snikket{% endtrans %}</h1>
-		<p>{% trans snikket_url="https://snikket.org" %}To learn more about Snikket, visit the <a href="{{ snikket_url}}">Snikket website</a>.{% endtrans %}</p>
 		<h2>{% trans %}About this Service{% endtrans %}</h2>
-		<p>{% trans site_name=config["SITE_NAME"] %}This is the Snikket service <em>{{ site_name }}</em>.{% endtrans %}</p>
+		<p>{% trans site_name=config["SITE_NAME"] %}This is the Snikket service <em>{{ site_name }}</em>, running open-source software from the Snikket project.{% endtrans %}</p>
+		<p>{% trans snikket_url="https://snikket.org" %}To learn more about Snikket, visit the <a href="{{ snikket_url}}">Snikket website</a>.{% endtrans %}</p>
+
+		<p><a href="/policies/">{% trans %}View service policies{% endtrans %}</a>
+
 		<h3>{% trans %}Licenses{% endtrans %}</h3>
 		<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{% if version %} ({{ version }}){% endif %}
+		<pre>Domain: {{ config["SNIKKET_DOMAIN"] }}
+Web Portal{% if version %} ({{ version }}){% endif %}
+{%- if core_versions -%}
+{% for name, version in core_versions.items() %}
+{{ name }} ({{ version }}){% endfor %}
+{%- endif -%}
 {%- if extra_versions -%}
 {% for name, version in extra_versions.items() %}
 {{ name }} ({{ version }}){% endfor %}
 {%- endif -%}</pre>
+
 		<p>
 			{%- call standard_button("back", url_for("index"), class="primary") -%}
 				{% trans %}Back to the main page{% endtrans %}

snikket_web/templates/admin_circles.html

@@ -3,7 +3,7 @@
 {% block content %}
 <h1>{% trans %}Manage circles{% endtrans %}</h1>
 <p>{% trans %}<em>Circles</em> aim to help people who are in the same social circle find each other on your service.{% endtrans %}</p>
-<p>{% trans %}Users who are in the same circle will see each other in their contact list. In addition, each circle has a group chat where the circle members are included.{% endtrans %}</p>
+<p>{% trans %}Users who are in the same circle will see each other in their contact list. In addition, each circle may have group chats where the circle members are included.{% endtrans %}</p>
 {%- if circles -%}
 <form method="POST" action="{{ url_for(".create_invite") }}">
 {{- invite_form.csrf_token -}}

snikket_web/templates/admin_create_circle_chat.html

@@ -0,0 +1,5 @@
+{% extends "admin_app.html" %}
+{% block content %}
+<h1>{{ target_circle.name }}</h1>
+{%- include "admin_create_circle_group_chat_form.html" -%}
+{% endblock %}

snikket_web/templates/admin_create_circle_group_chat_form.html

@@ -0,0 +1,15 @@
+{% from "library.j2" import form_button, render_errors %}
+<form method="POST" action="{{ url_for(".edit_circle_add_chat", id_=target_circle.id_) }}">
+{{- group_chat_form.csrf_token -}}
+<div class="form layout-expanded">
+	<h2 class="form-title">{% trans %}Create new circle group chat{% endtrans %}</h2>
+	<p class="form-descr weak">{% trans %}Add a chat to your circle so its members can hold group discussions.{% endtrans %}</p>
+	<p class="form-descr weak"><strong>{% trans %}Tip:{% endtrans %}</strong> {% trans %}This is only for creating group chats that automatically include <em>all</em> members of the circle. If you want a normal group chat, create it in the Snikket app instead.{% endtrans %}</p>
+	<div class="f-ebox">
+		{{ group_chat_form.name.label }}
+		{{ group_chat_form.name }}
+	</div>
+	<div class="f-bbox">
+		{%- call form_button("add", group_chat_form.action_save, class="primary") %}{% endcall -%}
+	</div>
+</div></form>

snikket_web/templates/admin_create_invite_form.html

@@ -1,19 +1,57 @@
-{% from "library.j2" import form_button, render_errors %}
+{% from "library.j2" import form_button,
+                            render_errors,
+                            access_level_description, access_level_icon,
+                            invite_type_description, invite_type_icon
+%}
 <form method="POST" action="{{ url_for(".create_invite") }}">
 {{- invite_form.csrf_token -}}
 <div class="form layout-expanded">
 	<h2 class="form-title">{% trans %}Create new invitation{% endtrans %}</h2>
 	<p class="form-descr weak">{% trans %}Create a new invitation link to invite more users to your Snikket service by clicking the button below.{% endtrans %}</p>
+
+	<!-- Invitation type -->
 	<div class="f-ebox">
-		<fieldset>{#- -#}
+		<fieldset class="descriptive-radio-selection">{#- -#}
 			<legend>{{ invite_form.type_.label.text }}</legend>
-			{{- invite_form.type_ -}}
+			<p>{% trans %}Choose whether this invitation link will allow more than one person to join.{% endtrans %}</p>
+
+			{%- for invite_type in invite_form.type_ -%}
+			<div class="radio-button-ext">
+				{{ invite_type }}<label for="{{ invite_type.id }}">
+					{%- trans title=invite_type.label.text, icon=invite_type_icon(invite_type.data), description=invite_type_description(invite_type.data) -%}
+					<span class="invite-type">{{ title }}{{ icon }}</span><p>{{ description }}</p>
+					{%- endtrans -%}
+				</label>
+			</div>
+			{%- endfor -%}
 		</fieldset>
 	</div>
+
+	<!-- Access level -->
+	<div class="f-ebox">
+		<fieldset class="descriptive-radio-selection">{#- -#}
+			<legend>{{ invite_form.role.label.text }}</legend>
+			<p>{% trans %}The access level of a user determines what interactions are allowed for them on your Snikket service.{% endtrans %}</p>
+			{%- for level in invite_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) -%}
+					<span class="access-level">{{ title }}{{ icon }}</span><p>{{ description }}</p>
+					{%- endtrans -%}
+				</label>
+			</div>
+			{%- endfor -%}
+		</fieldset>
+	</div>
+
+
+	<!-- Valid for -->
 	<div class="f-ebox">
 		{{ invite_form.lifetime.label }}
 		<div class="select-wrap">{{ invite_form.lifetime }}</div>
 	</div>
+
+	<!-- Invite to circle -->
 	<div class="f-ebox">
 {#
 	NOTE: This is for when/if we ever support multi-group invites.
@@ -27,6 +65,13 @@
 		<div class="select-wrap">{{ invite_form.circles }}</div>
 		{%- call render_errors(invite_form.circles) -%}{%- endcall -%}
 	</div>
+
+	<!-- Comment -->
+	<div class="f-ebox">
+		{{ invite_form.note.label }}
+		{{ invite_form.note }}
+	</div>
+
 	<div class="f-bbox">
 		{%- call form_button("create_link", invite_form.action_create_invite, class="primary") %}{% endcall -%}
 	</div>

snikket_web/templates/admin_delete_circle.html

@@ -0,0 +1,21 @@
+{% extends "admin_app.html" %}
+{% from "library.j2" import box, form_button, standard_button %}
+{% block content %}
+<h1>{% trans circle_name=target_circle.name %}Delete circle {{ circle_name }}{% endtrans %}</h1>
+<div class="form layout-expanded"><form method="POST">
+	<h2 class="form-title">{% trans %}Delete circle{% endtrans %}</h2>
+	{{ form.csrf_token }}
+	<p class="form-descr">{% trans %}Are you sure you want to delete the following circle?{% endtrans %}</p>
+	<dl>
+		<dt>{% trans %}Name{% endtrans %}</dt>
+		<dd>{{ target_circle.name }}</dd>
+	</dl>
+	{% call box("alert", _("Danger")) %}
+	<p>{% trans %}The circle and the corresponding chat will be deleted, 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(".edit_circle", id_=target_circle.id_), class="tertiary") %}{% trans %}Back{% endtrans %}{% endcall -%}
+		{%- call form_button("delete", form.action_delete, class="primary danger") %}{% endcall -%}
+	</div>
+</form></div>
+{% endblock %}

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, icon %}
+{% from "library.j2" import form_button, standard_button, value_or_hint, custom_form_button, clipboard_button, icon, render_user with context %}
 {% block head_lead %}
 {{ super() }}
 {% include "copy-snippet.html" %}
@@ -13,13 +13,6 @@
 <div class="box hint form layout-expanded">
 	<header>{% trans %}This is your main circle{% endtrans %}</header>
 	<p>{% trans %}This circle is managed automatically and cannot be removed or renamed.{% endtrans %}</p>
-	{%- if target_circle.muc_jid -%}
-	<div><label for="circle-muc-jid">{% trans %}Group chat address{% endtrans %}</label></div>
-	<div><input type="text" readonly="readonly" id="circle-muc-jid" value="{{ target_circle.muc_jid }}"></div>
-	{%- call clipboard_button(target_circle.muc_jid, show_label=True) -%}
-		{%- trans -%}Copy address{%- endtrans -%}
-	{%- endcall -%}
-	{%- endif -%}
 </div>
 {%- else -%}
 <div class="form layout-expanded">
@@ -28,17 +21,6 @@
 		{{ form.name.label }}
 		{{ form.name }}
 	</div>
-	<div class="f-ebox">
-		{%- if target_circle.muc_jid -%}
-		<label for="circle-muc-jid">{% trans %}Group chat address{% endtrans %}</label>
-		<input type="text" readonly="readonly" id="circle-muc-jid" value="{{ target_circle.muc_jid }}">
-		{%- call clipboard_button(target_circle.muc_jid, show_label=True) -%}
-			{%- trans -%}Copy address{%- endtrans -%}
-		{%- endcall -%}
-		{%- else -%}
-		<p>{% trans %}This circle has no group chat associated.{% endtrans %}<p>
-		{%- endif -%}
-	</div>
 	<div class="f-bbox">
 		{%- call standard_button("back", url_for(".circles"), class="tertiary") -%}
 			{% trans %}Return to circle list{% endtrans %}
@@ -48,16 +30,47 @@
 	<h3 class="form-title">{% trans %}Delete circle{% endtrans %}</h3>
 	<p class="form-desc">{% trans %}Deleting a circle does not delete any users in the circle.{% endtrans %}</p>
 	<div class="f-bbox">
-		{%- call form_button("delete", form.action_delete, class="secondary danger") %}{% endcall -%}
+		{%- call standard_button("delete", url_for(".delete_circle", id_=target_circle.id_), class="secondary danger") %}{% trans %}Delete circle{% endtrans %}{% endcall -%}
 	</div>
 </div>
 {%- endif -%}
+
+<h2 id="chats">{% trans %}Group chats{% endtrans %}</h2>
+<p>{% trans %}These group chats will be available to all members of the circle.{% endtrans %}</p>
+
+{%- if circle_chats -%}
+<div class="el-2 elevated"><table>
+	<thead>
+		<th>{% trans %}Name{% endtrans %}</th>
+		<th>{% trans %}Actions{% endtrans %}</th>
+	</thead>
+	<tbody>
+{%- for chat in circle_chats -%}
+		<tr>
+			<td>{% call value_or_hint(chat.name) %}{% endcall %}</td>
+			<td class="nowrap">
+				{%- call custom_form_button("delete", form.action_remove_group_chat.name, chat.id_, class="primary danger", slim=True) -%}
+					{% trans name=chat.name %}Delete group chat '{{ name }}'{% endtrans %}
+				{%- endcall -%}
+			</td>
+		</tr>
+{%- endfor -%}
+	</tbody>
+</table></div>
+{%- else -%}
+<p>{% trans %}This circle currently has no group chats.{% endtrans %}</p>
+{%- endif -%}
+{%- call standard_button("add", url_for(".edit_circle_add_chat", id_=target_circle.id_), class="secondary") -%}
+	{% trans %}Add group chat{% endtrans %}
+{%- endcall -%}
+
 <h2 id="members">{% trans %}Circle members{% endtrans %}</h2>
+<p>{% trans %}All members of the circle will see each other in their contact list.{% endtrans %}</p>
+
 {%- if circle_members -%}
 <div class="el-2 elevated"><table>
 	<thead>
 		<th>{% trans %}Login name{% endtrans %}</th>
-		<th class="collapsible">{% trans %}Display name{% endtrans %}</th>
 		<th>{% trans %}Actions{% endtrans %}</th>
 	</thead>
 	<tbody>
@@ -65,13 +78,12 @@
 		<tr>
 			<td>
 				{%- if member -%}
-				{{ localpart }}
+				{%- call render_user(member) -%}{%- endcall -%}
 				{%- 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) -%}
 					{% trans username=member.localpart %}Remove user {{ username }} from circle{% endtrans %}

snikket_web/templates/admin_edit_invite.html

@@ -1,5 +1,5 @@
 {% extends "admin_app.html" %}
-{% from "library.j2" import showuri, form_button, standard_button, extract_circle_name, invite_type_description %}
+{% from "library.j2" import showuri, form_button, standard_button, extract_circle_name, invite_type_name, invite_type_description %}
 {% block head_lead %}
 {{ super() }}
 {% include "copy-snippet.html" %}
@@ -13,9 +13,10 @@
 		<dt>{% trans %}Valid until{% endtrans %}</dt>
 		<dd>{{ invite.expires | format_date }}</dd>
 		<dt><label for="link-field">{% trans %}Link{% endtrans %}</label></dt>
-		<dd>{% call showuri(invite.landing_page, id_="link-field") %}{% endcall %}</dd>
+		<dd>{% call showuri(invite.landing_page, id_="link-field") %}{% trans %}Invitation to Snikket{% endtrans %}{% endcall %}</dd>
 		<dt>{% trans %}Invitation type{% endtrans %}</dt>
-		<dd>{% call invite_type_description(invite) %}{% endcall %}</dd>
+		{% set invite_type = invite.reusable and "group" or "account" %}
+		<dd><span class="with-tooltip above" data-tooltip="{% call invite_type_description(invite_type) %}{% endcall %}">{% call invite_type_name(invite_type) %}{% endcall %}</span></dd>
 		{%- set ngroups = invite.group_ids | length -%}
 		{%- if ngroups > 1 -%}
 		{#- not supported via the web UI, but we should still display it properly -#}

snikket_web/templates/admin_edit_user.html

@@ -1,30 +1,35 @@
 {% 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 %}
+{% from "library.j2" import box, form_button, standard_button, icon, access_level_description, access_level_icon %}
 {% 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">
+	{% if target_user.deletion_request %}
+	<div class="box alert">
+		<header>{% trans %}This user account is pending deletion{% endtrans %}</header>
+		<p>{% trans date=target_user.deletion_request.deleted_at | format_datetime %}The owner of the account sent a deletion request on {{ date }} using their app.{% endtrans %}
+		<p>{% trans time=(target_user.deletion_request.pending_until - now())|format_timedelta %}The account has been locked, and will be automatically deleted permanently in {{ time }}.{% endtrans %}</p>
+
+		<p>{% trans %}If this was a mistake, you can cancel the deletion and restore the account.{% endtrans %}</p>
+
+		{%- call form_button("restore_from_trash", form.action_restore, class="secondary") %}{% endcall %}
+	</div>
+	{% elif not target_user.enabled %}
+	<div class="box alert">
+		<header>{% trans %}This user account is locked{% endtrans %}</header>
+		<p>{% trans %}The user will not be able to log in to their account until it is unlocked again.{% endtrans %}</p>
+
+		{%- call form_button("lock_open", form.action_enable, class="secondary") %}{% endcall %}
+	</div>
+	{% endif %}
+
 	<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 }}
@@ -63,14 +68,14 @@
 		{% 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 -%}
+		{%- call form_button("passwd", form.action_create_reset, class="secondary") -%}{%- 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") -%}
+		{%- call standard_button("bug_report", url_for(".debug_user", localpart=target_user.localpart), class="secondary") -%}
 			{%- trans -%}Show debug information{%- endtrans -%}
 		{%- endcall -%}
 	</div>

snikket_web/templates/admin_invites.html

@@ -1,5 +1,5 @@
 {% extends "admin_app.html" %}
-{% from "library.j2" import action_button, icon, clipboard_button, form_button, custom_form_button, extract_circle_name, invite_type_name, invite_type_description %}
+{% from "library.j2" import action_button, icon, clipboard_button, share_button, form_button, custom_form_button, extract_circle_name, invite_type_name, invite_type_description %}
 {% block head_lead %}
 {{ super() }}
 {% include "copy-snippet.html" %}
@@ -18,17 +18,18 @@
 	<col/>
 	<thead>
 		<tr>
-			<th>{% trans %}Expires{% endtrans %}</th>
 			<th class="collapsible">{% trans %}Type{% endtrans %}</th>
 			<th class="collapsible">{% trans %}Circle{% endtrans %}</th>
+			<th>{% trans %}Expires{% endtrans %}</th>
+			<th>{% trans %}Comment{% endtrans %}</th>
 			<th>{% trans %}Actions{% endtrans %}</th>
 		</tr>
 	</thead>
 	<tbody>
 {% for invite in invites %}
+		{% set invite_type = invite.reusable and "group" or "account" %}
 		<tr>
-			<td>{{ (invite.expires - now) | format_timedelta(add_direction=True) }}</td>
-			<td class="collapsible"><span class="with-tooltip above" data-tooltip="{% call invite_type_description(invite) %}{% endcall %}">{% call invite_type_name(invite) %}{% endcall %}</span></td>
+			<td class="collapsible"><span class="with-tooltip above" data-tooltip="{% call invite_type_description(invite_type) %}{% endcall %}">{% call invite_type_name(invite_type) %}{% endcall %}</span></td>
 			<td class="collapsible">
 				{#- -#}
 				<ul class="inline">
@@ -38,6 +39,8 @@
 				</ul>
 				{#- -#}
 			</td>
+			<td>{{ (invite.expires - now) | format_timedelta(add_direction=True) }}</td>
+			<td>{% if invite.note is not none %}{{ invite.note }}{% endif %}</td>
 			<td class="nowrap">
 				{%- call action_button("more", url_for(".edit_invite", id_=invite.id_), class="secondary") -%}
 					{% trans %}Show invite details{% endtrans %}
@@ -45,6 +48,9 @@
 				{%- call clipboard_button(invite.landing_page, class="primary") -%}
 					{% trans %}Copy invite link to clipboard{% endtrans %}
 				{%- endcall -%}
+				{%- call share_button("Invitation to Snikket", invite.landing_page, class="primary") -%}
+					{% trans %}Share invitation link{% endtrans %}
+				{%- endcall -%}
 				{%- call custom_form_button("remove_link", form.action_revoke.name, invite.id_, class="secondary danger", slim=True) -%}
 					{% trans %}Delete invitation{% endtrans %}
 				{%- endcall -%}

snikket_web/templates/admin_reset_user_password.html

@@ -15,7 +15,7 @@
 		<dt>{% trans %}Valid until{% endtrans %}</dt>
 		<dd>{{ reset_link.expires | format_date }}</dd>
 		<dt><label for="link-field">{% trans %}Link{% endtrans %}</label></dt>
-		<dd>{% call showuri(reset_link.landing_page, id_="link-field") %}{% endcall %}</dd>
+		<dd>{% call showuri(reset_link.landing_page, id_="link-field") %}Reset your Snikket password{% endcall %}</dd>
 	</dd>
 	<div class="f-bbox">
 		{%- call custom_form_button("remove_link", form.action_revoke.name, reset_link.id_, class="secondary danger") -%}

snikket_web/templates/admin_system.html

@@ -76,13 +76,20 @@
 			<em>{% trans %}unknown{% endtrans %}</em>
 			{%- endif -%}
 		</dd>
-		<dt>{% trans %}Connected devices{% endtrans %}</dt>
+		<dt>{% trans %}Active users{% endtrans %}</dt>
 		<dd>
+			<ul>
 			{%- if metrics.prosody_devices | default(None) is not none -%}
-			{{ metrics.prosody_devices }}
+			<li>{% trans %}Connected now:{% endtrans %} {{ metrics.prosody_devices }}</li>
 			{%- else -%}
-			<em>{% trans %}unknown{% endtrans %}</em>
+			<li><em>{% trans %}unknown{% endtrans %}</em></li>
 			{%- endif -%}
+			{%- if metrics.users | default(None) is not none -%}
+			<li>{% trans %}Past 24 hours:{% endtrans %} {{ metrics.users.active_1d }}</li>
+			<li>{% trans %}Past 7 days:{% endtrans %} {{ metrics.users.active_7d }}</li>
+			<li>{% trans %}Past 30 days:{% endtrans %} {{ metrics.users.active_30d }}</li>
+			{%- endif -%}
+			</ul>
 		</dd>
 	</dl>
 </div>

snikket_web/templates/admin_users.html

@@ -1,12 +1,12 @@
 {% extends "admin_app.html" %}
-{% from "library.j2" import action_button, icon, value_or_hint, custom_form_button %}
+{% from "library.j2" import action_button, avatar, icon, render_user, value_or_hint, custom_form_button with context %}
 {% block content %}
 <h1>{% trans %}Manage users{% endtrans %}</h1>
 <div class="elevated el-2"><table>
 	<thead>
 		<tr>
-			<th>{% trans %}Login name{% endtrans %}</th>
-			<th>{% trans %}Display name{% endtrans %}</th>
+			<th>{% trans %}User{% endtrans %}</th>
+			<th>{% trans %}Last active{% endtrans %}</th>
 			<th>{% trans %}Actions{% endtrans %}</th>
 		</tr>
 	</thead>
@@ -14,20 +14,19 @@
 {% for user in users %}
 		<tr>
 			<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 -%}
+				{%- call render_user(user) -%}{%- endcall -%}
 			</td>
-			<td>{% call value_or_hint(user.display_name) %}{% endcall %}</td>
+			{% if user.enabled %}
+			<td>{{ user.last_active | format_last_activity }}</td>
+			{% elif user.deletion_request %}
+			<td>{% trans %}Deleted{% endtrans %}</td>
+			{% else %}
+			<td>{% trans %}Locked{% endtrans %}</td>
+			{% endif %}
 			<td class="nowrap">
 				{%- 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>
 		</tr>
 {% endfor %}

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 %} 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>
+	<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 %} no-copy no-share"{% if onload | default(False) %} onload="{{ onload }}"{% endif %}>{% block body %}{% endblock %}</body>
 </html>

snikket_web/templates/copy-snippet.html

@@ -115,8 +115,63 @@ var copy_to_clipboard_btn = function(el) {
   });
 };
 
+var copy_to_clipboard_btn = function(el) {
+  var text = el.dataset.cliptext;
+  if (!text) {
+	console.error('copy_to_clipboard used on element without text to copy');
+  }
+  copyTextToClipboard(text, el, function(success) {
+	var existing_result_el = document.getElementById("clipboard-result");
+	if (existing_result_el !== null) {
+	  existing_result_el.parentNode.removeChild(existing_result_el);
+	}
+
+	var icon = "done";
+	if (!success) {
+		icon = "cancel";
+	}
+	var icon_bak = get_current_icon(el.firstChild);
+	change_icon(el.firstChild, icon);
+	setTimeout(function() {
+		change_icon(el.firstChild, icon_bak);
+	  el.blur();
+	}, 1500);
+  });
+};
+
+var share_url_btn = function(el) {
+	let data = {
+		"title": el.dataset.shareTitle,
+		"url": el.dataset.shareUrl,
+	}
+
+	let icon_bak = get_current_icon(el.firstChild);
+
+	new Promise(function (resolve, reject) {
+		if(!navigator.canShare || !navigator.canShare(data)) {
+			return reject();
+		}
+		return resolve(navigator.share(data));
+	}).then(function () {
+		// Success
+		change_icon(el.firstChild, "done");
+	}, function () {
+		// Failure
+		change_icon(el.firstChild, "cancel");
+	}).finally(function () {
+		// Either way, clear status icon after 1.5s
+		setTimeout(function() {
+			change_icon(el.firstChild, icon_bak);
+			el.blur();
+		}, 1500);
+	});
+}
+
 window.addEventListener('load', function() {
 	document.body.classList.remove("no-copy");
+	if(navigator.share) {
+		document.body.classList.remove("no-share");
+	}
 });
 </script>
 

snikket_web/templates/invite_reset.html

@@ -7,7 +7,6 @@
 {% block head_lead %}
 {{ super() }}
 <title>{% trans %}Reset your password | Snikket{% endtrans %}</title>
-<script async type="text/javascript" src="{{ url_for("static", filename="js/qrcode.min.js") }}"></script>
 {% endblock %}
 {% block content %}
 <form method="POST"><div class="form layout-expanded">
@@ -27,9 +26,4 @@
 		{%- call form_button("passwd", form.action_reset, class="primary") -%}{%- endcall -%}
 	</div>
 </div></form>
-<script type="text/javascript">
-	var onload = function() {
-		apply_qr_code(document.getElementById("qr-uri"));
-	};
-</script>
 {% endblock %}

snikket_web/templates/invite_view.html

@@ -17,6 +17,13 @@
 	{%- else -%}
 	<p>{% trans site_name=config["SITE_NAME"] %}You have been invited to chat on {{ site_name }} using Snikket, a secure, privacy-friendly chat app.{% endtrans %}</p>
 	{%- endif -%}
+
+	{%- if config["TOS_URI"] and config["PRIVACY_URI"] -%}
+	<p>
+	  {% trans site_name=config["SITE_NAME"], tos_uri=config["TOS_URI"], privacy_uri=config["PRIVACY_URI"] %}By continuing, you agree to the <a href="{{tos_uri}}">Terms of Service</a> and <a href="{{privacy_uri}}">Privacy Policy</a>.{% endtrans %}
+	</p>
+	{%- endif -%}
+
 	<h2>{% trans %}Get started{% endtrans %}</h2>
 {%- if apple_store_url -%}
 	<p>{% trans %}Install the Snikket App on your Android or iOS device.{% endtrans %}</p>
@@ -25,7 +32,7 @@
 {%- endif -%}
 	<div class="install-buttons">
 		<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>
+			<li><a href="{{ play_store_url }}"><img alt='{% trans %}Get it on Google Play{% endtrans %}' src='{{ play_store_badge() }}' class="play"/></a></li>
 {%- if apple_store_url -%}
 			<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 -%}
@@ -56,29 +63,7 @@
 			{%- endcall -%}
 		</header>
 		<p>{% trans %}You can transfer this invite to your mobile device by scanning a code with your camera. You can use either a QR scanner app or the Snikket app itself.{% endtrans %}</p>
-		<div class="tabbox">
-			{#- -#}
-			<nav class="tabs" role="tablist">
-				{#- -#}
-				<a href="#qr-info-url" class="active" role="tab" aria-controls="qr-info-url" aria-selected="true" onclick="select_tab(this); return false;">{% trans %}Using a QR code scanner{% endtrans %}</a>
-				{#- -#}
-				<a href="#qr-info-uri" role="tab" aria-controls="qr-info-uri" aria-selected="false" onclick="select_tab(this); return false;">{% trans %}Using the Snikket app{% endtrans %}</a>
-				{#- -#}
-			</nav>
-			{#- -#}
-			<div id="qr-info-url" class="tab-pane active">
-				<p>{% trans %}Use a <em>QR code</em> scanner on your mobile device to scan the code below:{% endtrans %}</p>
-				<div id="qr-invite-page" data-qrdata="{{ url_for(".view", id_=invite_id, _external=True, _scheme="https") }}" class="qr"></div>
-			</div>
-			{#- -#}
-			<div id="qr-info-uri" class="tab-pane">
-				<img class="float-right" id="tutorial-scan" aria-hidden="true" alt="" src="{{ url_for("static", filename="img/tutorial-scan.png") }}">
-				<p>{% trans %}Install the Snikket app on your mobile device, open it, and tap the 'Scan' button at the top.{% endtrans %}</p>
-				<p>{% trans %}Your camera will turn on. Point it at the square code below until it is within the highlighted square on your screen, and wait until the app recognises it.{% endtrans %}</p>
-				<div id="qr-uri" data-qrdata="{{ invite.xmpp_uri }}" class="qr"></div>
-			</div>
-			{#- -#}
-		</div>
+		<div id="qr-invite-page" data-qrdata="{{ url_for(".view", id_=invite_id, _external=True, _scheme="https") }}" class="qr"></div>
 		{#- -#}
 		{%- call standard_button("close", "#", onclick="close_modal(this.parentNode.parentNode); return false;", class="primary") -%}
 			{% trans %}Close{% endtrans %}
@@ -149,7 +134,6 @@
 
 	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];

snikket_web/templates/library.j2

@@ -10,12 +10,38 @@
 {%- endif -%}
 {%- endmacro %}
 
+{% macro render_user(user, caller=None) -%}
+<div class="username-with-avatar">
+	<div class="avatar-container">
+		{%- call avatar(user.localpart+"@"+config["SNIKKET_DOMAIN"], user.avatar_info[0].hash if user.avatar_info | length > 0 else None ) %}{% endcall -%}
+		{%- if user.has_admin_role -%}
+		<div class="user-badge-icon">
+			<span class="with-tooltip above" data-tooltip="{% trans %}The user is an administrator.{% endtrans %}">{% call icon("admin") %}{% trans %} (Administrator){% endtrans %}{% endcall %}</span>
+		</div>
+		{%- elif user.has_restricted_role -%}
+		<div class="user-badge-icon">
+			<span class="with-tooltip above" data-tooltip="{% trans %}The user is restricted.{% endtrans %}">{% call icon("lock") %}{% trans %} (Restricted){% endtrans %}{% endcall %}</span>
+		</div>
+		{%- endif -%}
+	</div>
+	<div class="user-info-container">
+		{%- if user.display_name %}
+		<div class="user-display-name">{{- user.display_name -}}</div>
+		{%- endif %}
+		<div class="user-jid"><span class="user-jid-localpart">{{- user.localpart -}}</span><span class="user-jid-at">@</span><span class="user-jid-domain">{{- config["SNIKKET_DOMAIN"] -}}</span></div>
+	</div>
+</div>
+{%- endmacro -%}
+
 {% macro showuri(uri, caller=None, id_=None) %}
 {%- if uri is none -%}
 <em>—</em>
 {%- else -%}
 <div><input type="text" {% if id_ %}id="{{ id_ }}" {% endif %}readonly="readonly" value="{{ uri }}"></div>
-<div>{% call clipboard_button(uri, show_label=True) %}{% trans %}Copy link{% endtrans %}{% endcall %}</div>
+<div>
+  {% call clipboard_button(uri, show_label=True) %}{% trans %}Copy link{% endtrans %}{% endcall %}
+  {% call share_button(caller() if caller is not none else None, uri, show_label=True) %}{% trans %}Share{% endtrans %}{% endcall %}
+</div>
 {%- endif -%}
 {% endmacro %}
 
@@ -59,7 +85,7 @@
 
 {% macro clipboard_button(data, show_label=False, caller=None, class=None) -%}
 {%- set label = caller() -%}
-<a class="button{% if class %} {{ class }}{% endif %}"
+<a class="button copy-to-clipboard{% if class %} {{ class }}{% endif %}"
 	href="#"
 {% if not show_label %}
 	aria-label="{{ label }}"
@@ -74,6 +100,24 @@
 </a>
 {%- endmacro %}
 
+{% macro share_button(title, url, show_label=False, caller=None, class=None) -%}
+{%- set label = caller() -%}
+<a class="button share-button{% if class %} {{ class }}{% endif %}"
+	href="#"
+{% if not show_label %}
+	aria-label="{{ label }}"
+	title="{{ label }}"
+{% endif %}
+	data-share-title="{{ title }}"
+	data-share-url="{{ url }}"
+	onclick="share_url_btn(this); return false;">
+	{%- call icon("share") %}{% endcall -%}
+{%- if show_label %}
+	<span>{{ label }}</span>
+{% endif -%}
+</a>
+{%- endmacro %}
+
 {% macro render_errors(field, caller=None) -%}
 {%- set error_list = field.errors if field.errors is not mapping else (field.errors.values() | flatten | list) -%}
 {%- if error_list -%}
@@ -109,18 +153,44 @@
 {%- endif -%}
 {% endmacro %}
 
-{%- macro invite_type_name(invite_info, caller=None) -%}
-{%- if invite_info.reusable -%}
-{% trans %}Group{% endtrans %}
-{%- else -%}
+{%- macro invite_type_name(invite_type, caller=None) -%}
+{%- if invite_type == "account" -%}
 {% trans %}Individual{% endtrans %}
+{%- else -%}
+{% trans %}Group{% endtrans %}
 {%- endif -%}
 {%- endmacro -%}
 
-{%- macro invite_type_description(invite_info, caller=None) -%}
-{%- if invite_info.reusable -%}
-{% trans %}Can be used multiple times to create accounts on this Snikket service.{% endtrans %}
-{%- else -%}
-{% trans %}Can be used once to create an account on this Snikket service.{% endtrans %}
+{% 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:registered" -%}
+{% 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 -%}
+{% 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 %}
+
+{% macro invite_type_description(invite_type, caller=None) %}
+{%- if invite_type == "account" -%}
+{% trans %}Invite a single person (invitation link can only be used once).{% endtrans %}
+{%- elif invite_type == "group" -%}
+{% trans %}Invite a group of people (invitation link can be used multiple times).{% endtrans %}
+{%- endif -%}
+{% endmacro %}
+
+{% macro invite_type_icon(invite_type, caller=None) %}
+{%- if invite_type == "account" -%}
+{% call icon("person") %}{% endcall %}
+{%- elif invite_type == "group" -%}
+{% call icon("people") %}{% endcall %}
+{%- endif -%}
+{% endmacro %}

snikket_web/templates/login.html

@@ -30,7 +30,7 @@
 		<div class="f-bbox">
 			{%- call form_button("login", form.action_signin, class="primary") -%}{% endcall -%}
 		</div>
-	</from>
+	</form>
 	<script type="text/javascript">
 var domainCheck = function() {
 	var form = document.getElementById("login-form");

snikket_web/templates/policies.html

@@ -0,0 +1,39 @@
+{% extends "base.html" %}
+{% from "library.j2" import standard_button %}
+{% block head_lead %}
+<title>{% trans %}Policies{% endtrans %} - {{ config["SITE_NAME"] }}</title>
+{% endblock %}
+{% block body %}
+<main>
+	<div class="box el-2">
+		<h1>{{ config["SITE_NAME"] }}</h1>
+		<h2>{% trans %}Policies{% endtrans %}</h2>
+
+		{% if config["TOS_URI"] or config["PRIVACY_URI"] -%}
+		<p>{% trans %}Use of this service is subject to the following policies:{% endtrans %}</p>
+		<ul>
+		{%- if config["TOS_URI"] %}
+			<li><a href="{{ config["TOS_URI"] }}">{% trans %}Terms of Service{% endtrans %}</a></li>
+		{%- endif %}
+		{%- if config["PRIVACY_URI"] %}
+			<li><a href="{{ config["PRIVACY_URI"] }}">{% trans %}Privacy Policy{% endtrans %}</a></li>
+		{%- endif %}
+		</ul>
+		{%- else -%}
+		<p>{% trans %}Please contact the administrator of this instance if you have questions about policies.{% endtrans %}</p>
+		{% endif -%}
+
+		<p>{% trans url="https://snikket.org/app/privacy/" %}Use of the Snikket apps is subject to the <a href="{{url}}">Snikket Apps Privacy Policy</a>.{% endtrans %}</p>
+		
+		{%- if config["ABUSE_EMAIL"] %}
+		<p>{% trans email=config["ABUSE_EMAIL"], domain=config["SNIKKET_DOMAIN"] %}To report policy violations or other abuse from this service, please send an email to {{email}}. Specify the domain name of this instance ({{domain}}) and include details of the incident(s).{% endtrans %}</p>
+		{%- endif %}
+
+		<p>
+			{%- call standard_button("back", url_for("index"), class="primary") -%}
+				{% trans %}Back to the main page{% endtrans %}
+			{%- endcall -%}
+		</p>
+	</div>
+</main>
+{% endblock %}

snikket_web/templates/security.txt

@@ -0,0 +1,16 @@
+# {{ config["SNIKKET_DOMAIN"] }} is running open-source software
+# from the Snikket project: https://snikket.org/
+
+{% if config["SECURITY_EMAIL"] -%}
+# Security issues related to this service should be addressed to the
+# following security contact:
+Contact: mailto:{{ config["SECURITY_EMAIL"] }}
+{% else -%}
+# This service does not have a public security contact. You might find
+# more information about the service at the following link:
+Contact: https://{{ config["SNIKKET_DOMAIN"] }}/policies/
+{%- endif %}
+
+# Please report software defects to the project developers, per the
+# instructions at the following link:
+Contact: https://snikket.org/security/

snikket_web/templates/user_home.html

@@ -6,8 +6,13 @@
 {% include "copy-snippet.html" %}
 {% endblock %}
 {% block content %}
-<h1>{% trans %}Welcome!{% endtrans %}</h1>
-<p>{% trans user_name=user_info.display_name %}Welcome home, {{ user_name }}.{% endtrans %}</p>
+{% if user_info.is_admin and metrics.users and metrics.users.active_1d <= 1 %}
+<aside class="box hint">
+  <header>{% trans %}Welcome to Snikket!{% endtrans %}</header>
+  <p>{% trans %}Now your Snikket instance is up and running, the next step is to invite people to join it. Family, friends, colleagues... you choose!{% endtrans %}</p>
+  <a href="/admin/invitations">{% trans %}Create new invitation{% endtrans %}</a>
+</aside>
+{% endif %}
 <nav class="welcome">
 	<ul>
 		<li class="wide">

snikket_web/templates/user_manage_data.html

@@ -11,6 +11,8 @@
 			{% call render_errors(form) %}{% endcall %}
 
 			<div class="f-bbox">
+				{%- call standard_button("back", url_for('.index'), class="tertiary") %}{% trans %}Back{% endtrans %}{% endcall -%}
+
 				<form method="POST">
 					{{ form.csrf_token }}
 					{%- call form_button("download", form.action_export, class="primary") %}{% endcall -%}

snikket_web/user.py

@@ -32,16 +32,22 @@ class ChangePasswordForm(BaseForm):
 
     new_password = wtforms.PasswordField(
         _l("New password"),
-        validators=[wtforms.validators.InputRequired()]
+        validators=[
+            wtforms.validators.InputRequired(),
+            wtforms.validators.Length(min=10),
+        ]
     )
 
     new_password_confirm = wtforms.PasswordField(
         _l("Confirm new password"),
-        validators=[wtforms.validators.InputRequired(),
-                    wtforms.validators.EqualTo(
-                        "new_password",
-                        _l("The new passwords must match.")
-                    )]
+        validators=[
+            wtforms.validators.InputRequired(),
+            wtforms.validators.EqualTo(
+                "new_password",
+                _l("The new passwords must match.")
+            ),
+            wtforms.validators.Length(min=10),
+        ]
     )
 
 
@@ -59,7 +65,7 @@ _ACCESS_MODEL_CHOICES = [
 
 
 class ProfileForm(BaseForm):
-    nickname = wtforms.TextField(
+    nickname = wtforms.StringField(
         _l("Display name"),
     )
 
@@ -91,7 +97,15 @@ class ImportAccountDataForm(BaseForm):
 @client.require_session()
 async def index() -> str:
     user_info = await client.get_user_info()
-    return await render_template("user_home.html", user_info=user_info)
+    try:
+        metrics = await client.get_system_metrics()
+    except (werkzeug.exceptions.Unauthorized, werkzeug.exceptions.Forbidden):
+        metrics = {}
+    return await render_template(
+        "user_home.html",
+        user_info=user_info,
+        metrics=metrics,
+    )
 
 
 @bp.route('/passwd', methods=["GET", "POST"])

tools/icons.list

@@ -6,6 +6,8 @@ action/logout:logout
 action/login:login
 action/exit_to_app:exit_to_app
 action/lock:lock
+action/lock_open:lock_open
+action/restore_from_trash:restore_from_trash
 communication/import_export:import_export
 communication/qr_code:qrcode
 communication/vpn_key:passwd
@@ -25,6 +27,7 @@ navigation/cancel:cancel
 navigation/more_vert:more
 social/groups:groups
 social/people:people
+social/person:person
 social/group_add:create_group
 social/person_add:add_user
 social/person_remove:remove_user
@@ -33,3 +36,4 @@ image/edit:edit
 action/admin_panel_settings:admin
 content/link:link
 content/insights:insights
+social/share:share

tools/import-icons.sh

@@ -9,9 +9,9 @@ set -euo pipefail
 #   FLAVOR    one of '', 'round', 'sharp', 'outlined', 'twoshade'
 #   SVGOUT    path to the newly created SVG file
 root="$1/src"
-iconlist_file="$2"
-flavor="$3"
-output_file="$4"
+iconlist_file="${2-tools/icons.list}"
+flavor="${3-round}"
+output_file="${4-snikket_web/static/img/icons.svg}"
 
 printf '<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n<defs>\n' > "$output_file"
 printf '<!-- These icons are sourced from Google’s Material Icons set,\nlicensed under the terms of the Apache 2.0 License -->\n' >> "$output_file"