Add custom homepage template

OAuth tweaks

.djlintrc

@@ -0,0 +1,4 @@
+{
+  "extension": "html",
+  "profile": "django"
+}

.editorconfig

@@ -0,0 +1,15 @@
+# Stop the editor from looking for .editorconfig files in the parent directories
+root = true
+
+[*]
+# Non-configurable Prettier behaviors
+charset = utf-8
+insert_final_newline = true
+# Caveat: Prettier won’t trim trailing whitespace inside template strings, but your editor might.
+trim_trailing_whitespace = true
+
+# Configurable Prettier behaviors
+end_of_line = lf
+indent_style = space
+indent_size = 2
+max_line_length = 80

.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
@@ -44,7 +45,39 @@ jobs:
       - name: Install
         run: |
           set -euo pipefail
-          pip install flake8
+          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
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Build the Docker image
+        run: >-
+          docker build .

.gitignore

@@ -4,3 +4,4 @@ __pycache__
 /snikket_web/static/css/*.css
 /snikket_web/translations/*/LC_MESSAGES/*.mo
 /.env
+node_modules

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [],
+  "overrides": [],
+  "proseWrap": "always"
+}

.python-version

@@ -0,0 +1 @@
+3.13

.stylelintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": ["stylelint-config-standard-scss"],
+  "rules": {
+    "color-hex-length": "long",
+    "color-function-notation": "legacy",
+    "alpha-value-notation": "number"
+  }
+}

Dockerfile

@@ -1,54 +1,53 @@
-FROM debian:buster
-
-ARG BUILD_SERIES=dev
-ARG BUILD_ID=0
-
-ENV DEBIAN_FRONTEND noninteractive
-
-# This Dockerfile attempts to strike a balance between image size and time it
-# takes to do an incremental build on changes.
-# Improvements welcome.
+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 \
-        ; \
-    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;
+        python3 python3-mypy python3-dotenv python3-toml python3-babel python3-distutils \
+        sassc make;
 
 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 install hypercorn; \
-    rm -rf /root/.cache; \
-    apt-get clean ; rm -rf /var/lib/apt/lists
+WORKDIR /opt/snikket-web-portal
+
+RUN make
+
+
+FROM debian:bookworm-slim
+
+ARG BUILD_SERIES=dev
+ARG BUILD_ID=0
 
 COPY docker/env.py /etc/snikket-web-portal/env.py
+
 ENV SNIKKET_WEB_PYENV=/etc/snikket-web-portal/env.py
 
 ENV SNIKKET_WEB_PROSODY_ENDPOINT=http://127.0.0.1:5280/
 
+WORKDIR /opt/snikket-web-portal
+
+RUN set -eu; \
+    export DEBIAN_FRONTEND=noninteractive ; \
+    apt-get update ; \
+    apt-get install -y --no-install-recommends \
+      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; \
+    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}
+
+COPY --from=build /opt/snikket-web-portal/snikket_web/ /opt/snikket-web-portal/snikket_web
+COPY babel.cfg /opt/snikket-web-portal/babel.cfg
+
+RUN echo "$BUILD_SERIES $BUILD_ID" > /opt/snikket-web-portal/.app_version
+
 ADD docker/entrypoint.sh /entrypoint.sh
 ENTRYPOINT ["/bin/sh", "/entrypoint.sh"]

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,3 +1,3 @@
-pyscss~=1.3
 mypy
 python-dotenv~=0.15
+types-toml

docker/entrypoint.sh

@@ -1,5 +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
 
-exec hypercorn -b "127.0.0.1:5765" 'snikket_web:create_app()'
+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}" --access-logfile=- --log-file=- 'snikket_web:create_app()'

example.env

@@ -37,7 +37,6 @@ SNIKKET_WEB_DOMAIN='localhost'
 #
 #SNIKKET_WEB_SITE_NAME
 
-
 # OPTIONAL SETTINGS
 # =================
 
@@ -48,3 +47,7 @@ SNIKKET_WEB_DOMAIN='localhost'
 # not re-transferred.
 #
 #SNIKKET_WEB_AVATAR_CACHE_TTL=1800
+
+# Your XMPP account name and email address, to be shown on
+# the homepage.
+#SNIKKET_WEB_ADMIN_CONTACT=""

mypy.ini

@@ -1,5 +1,5 @@
 [mypy]
-python_version = 3.7
+python_version = 3.13
 #warn_return_any = True
 warn_unused_configs = True
 disallow_untyped_calls = True

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "snikket-web-portal",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "packageManager": "pnpm@10.12.2",
+  "devDependencies": {
+    "prettier": "^3.6.0",
+    "stylelint": "^16.21.0",
+    "stylelint-config-standard-scss": "^15.0.1"
+  }
+}

pnpm-lock.yaml

@@ -0,0 +1,971 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      prettier:
+        specifier: ^3.6.0
+        version: 3.6.0
+      stylelint:
+        specifier: ^16.21.0
+        version: 16.21.0
+      stylelint-config-standard-scss:
+        specifier: ^15.0.1
+        version: 15.0.1(postcss@8.5.6)(stylelint@16.21.0)
+
+packages:
+
+  '@babel/code-frame@7.27.1':
+    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.27.1':
+    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
+    engines: {node: '>=6.9.0'}
+
+  '@csstools/css-parser-algorithms@3.0.5':
+    resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-tokenizer@3.0.4':
+    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
+    engines: {node: '>=18'}
+
+  '@csstools/media-query-list-parser@4.0.3':
+    resolution: {integrity: sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/selector-specificity@5.0.0':
+    resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss-selector-parser: ^7.0.0
+
+  '@dual-bundle/import-meta-resolve@4.1.0':
+    resolution: {integrity: sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==}
+
+  '@keyv/serialize@1.0.3':
+    resolution: {integrity: sha512-qnEovoOp5Np2JDGonIDL6Ayihw0RhnRh6vxPuHo4RDn1UOzwEo4AeIfpL6UGIrsceWrCMiVPgwRjbHu4vYFc3g==}
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  ajv@8.17.1:
+    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+
+  astral-regex@2.0.0:
+    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
+    engines: {node: '>=8'}
+
+  balanced-match@2.0.0:
+    resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
+
+  base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  buffer@6.0.3:
+    resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
+
+  cacheable@1.10.0:
+    resolution: {integrity: sha512-SSgQTAnhd7WlJXnGlIi4jJJOiHzgnM5wRMEPaXAU4kECTAMpBoYKoZ9i5zHmclIEZbxcu3j7yY/CF8DTmwIsHg==}
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  colord@2.9.3:
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+
+  cosmiconfig@9.0.0:
+    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  css-functions-list@3.2.3:
+    resolution: {integrity: sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==}
+    engines: {node: '>=12 || >=16'}
+
+  css-tree@3.1.0:
+    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  debug@4.4.1:
+    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+
+  error-ex@1.3.2:
+    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-uri@3.0.6:
+    resolution: {integrity: sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==}
+
+  fastest-levenshtein@1.0.16:
+    resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
+    engines: {node: '>= 4.9.1'}
+
+  fastq@1.19.1:
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+
+  file-entry-cache@10.1.1:
+    resolution: {integrity: sha512-zcmsHjg2B2zjuBgjdnB+9q0+cWcgWfykIcsDkWDB4GTPtl1eXUA+gTI6sO0u01AqK3cliHryTU55/b2Ow1hfZg==}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  flat-cache@6.1.10:
+    resolution: {integrity: sha512-B6/v1f0NwjxzmeOhzfXPGWpKBVA207LS7lehaVKQnFrVktcFRfkzjZZ2gwj2i1TkEUMQht7ZMJbABUT5N+V1Nw==}
+
+  flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  global-modules@2.0.0:
+    resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==}
+    engines: {node: '>=6'}
+
+  global-prefix@3.0.0:
+    resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
+    engines: {node: '>=6'}
+
+  globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+
+  globjoin@0.1.4:
+    resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  hookified@1.9.1:
+    resolution: {integrity: sha512-u3pxtGhKjcSXnGm1CX6aXS9xew535j3lkOCegbA6jdyh0BaAjTbXI4aslKstCr6zUNtoCxFGFKwjbSHdGrMB8g==}
+
+  html-tags@3.3.1:
+    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
+    engines: {node: '>=8'}
+
+  ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  keyv@5.3.4:
+    resolution: {integrity: sha512-ypEvQvInNpUe+u+w8BIcPkQvEqXquyyibWE/1NB5T2BTzIpS5cGEV1LZskDzPSTvNAaT4+5FutvzlvnkxOSKlw==}
+
+  kind-of@6.0.3:
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
+
+  known-css-properties@0.36.0:
+    resolution: {integrity: sha512-A+9jP+IUmuQsNdsLdcg6Yt7voiMF/D4K83ew0OpJtpu+l34ef7LaohWV0Rc6KNvzw6ZDizkqfyB5JznZnzuKQA==}
+
+  known-css-properties@0.37.0:
+    resolution: {integrity: sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  lodash.truncate@4.4.2:
+    resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
+
+  mathml-tag-names@2.1.3:
+    resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
+
+  mdn-data@2.12.2:
+    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
+
+  mdn-data@2.21.0:
+    resolution: {integrity: sha512-+ZKPQezM5vYJIkCxaC+4DTnRrVZR1CgsKLu5zsQERQx6Tea8Y+wMx5A24rq8A8NepCeatIQufVAekKNgiBMsGQ==}
+
+  meow@13.2.0:
+    resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
+    engines: {node: '>=18'}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  postcss-media-query-parser@0.2.3:
+    resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
+
+  postcss-resolve-nested-selector@0.1.6:
+    resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==}
+
+  postcss-safe-parser@7.0.1:
+    resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==}
+    engines: {node: '>=18.0'}
+    peerDependencies:
+      postcss: ^8.4.31
+
+  postcss-scss@4.0.9:
+    resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.4.29
+
+  postcss-selector-parser@7.1.0:
+    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
+    engines: {node: '>=4'}
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prettier@3.6.0:
+    resolution: {integrity: sha512-ujSB9uXHJKzM/2GBuE0hBOUgC77CN3Bnpqa+g80bkv3T3A93wL/xlzDATHhnhkzifz/UE2SNOvmbTz5hSkDlHw==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve-from@5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
+  slice-ansi@4.0.0:
+    resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
+    engines: {node: '>=10'}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  stylelint-config-recommended-scss@15.0.1:
+    resolution: {integrity: sha512-V24bxkNkFGggqPVJlP9iXaBabwSGEG7QTz+PyxrRtjPkcF+/NsWtB3tKYvFYEmczRkWiIEfuFMhGpJFj9Fxe6Q==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      postcss: ^8.3.3
+      stylelint: ^16.16.0
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+
+  stylelint-config-recommended@16.0.0:
+    resolution: {integrity: sha512-4RSmPjQegF34wNcK1e1O3Uz91HN8P1aFdFzio90wNK9mjgAI19u5vsU868cVZboKzCaa5XbpvtTzAAGQAxpcXA==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      stylelint: ^16.16.0
+
+  stylelint-config-standard-scss@15.0.1:
+    resolution: {integrity: sha512-8pmmfutrMlPHukLp+Th9asmk21tBXMVGxskZCzkRVWt1d8Z0SrXjUUQ3vn9KcBj1bJRd5msk6yfEFM0UYHBRdg==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      postcss: ^8.3.3
+      stylelint: ^16.18.0
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+
+  stylelint-config-standard@38.0.0:
+    resolution: {integrity: sha512-uj3JIX+dpFseqd/DJx8Gy3PcRAJhlEZ2IrlFOc4LUxBX/PNMEQ198x7LCOE2Q5oT9Vw8nyc4CIL78xSqPr6iag==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      stylelint: ^16.18.0
+
+  stylelint-scss@6.12.1:
+    resolution: {integrity: sha512-UJUfBFIvXfly8WKIgmqfmkGKPilKB4L5j38JfsDd+OCg2GBdU0vGUV08Uw82tsRZzd4TbsUURVVNGeOhJVF7pA==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      stylelint: ^16.0.2
+
+  stylelint@16.21.0:
+    resolution: {integrity: sha512-ki3PpJGG7xhm3WtINoWGnlvqAmbqSexoRMbEMJzlwewSIOqPRKPlq452c22xAdEJISVi80r+I7KL9GPUiwFgbg==}
+    engines: {node: '>=18.12.0'}
+    hasBin: true
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-hyperlinks@3.2.0:
+    resolution: {integrity: sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==}
+    engines: {node: '>=14.18'}
+
+  svg-tags@1.0.0:
+    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
+
+  table@6.9.0:
+    resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
+    engines: {node: '>=10.0.0'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  which@1.3.1:
+    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
+    hasBin: true
+
+  write-file-atomic@5.0.1:
+    resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
+snapshots:
+
+  '@babel/code-frame@7.27.1':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.27.1
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/helper-validator-identifier@7.27.1': {}
+
+  '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-tokenizer@3.0.4': {}
+
+  '@csstools/media-query-list-parser@4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.0)':
+    dependencies:
+      postcss-selector-parser: 7.1.0
+
+  '@dual-bundle/import-meta-resolve@4.1.0': {}
+
+  '@keyv/serialize@1.0.3':
+    dependencies:
+      buffer: 6.0.3
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.19.1
+
+  ajv@8.17.1:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.0.6
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  ansi-regex@5.0.1: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  argparse@2.0.1: {}
+
+  array-union@2.1.0: {}
+
+  astral-regex@2.0.0: {}
+
+  balanced-match@2.0.0: {}
+
+  base64-js@1.5.1: {}
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  buffer@6.0.3:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+
+  cacheable@1.10.0:
+    dependencies:
+      hookified: 1.9.1
+      keyv: 5.3.4
+
+  callsites@3.1.0: {}
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  colord@2.9.3: {}
+
+  cosmiconfig@9.0.0:
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.1
+      js-yaml: 4.1.0
+      parse-json: 5.2.0
+
+  css-functions-list@3.2.3: {}
+
+  css-tree@3.1.0:
+    dependencies:
+      mdn-data: 2.12.2
+      source-map-js: 1.2.1
+
+  cssesc@3.0.0: {}
+
+  debug@4.4.1:
+    dependencies:
+      ms: 2.1.3
+
+  dir-glob@3.0.1:
+    dependencies:
+      path-type: 4.0.0
+
+  emoji-regex@8.0.0: {}
+
+  env-paths@2.2.1: {}
+
+  error-ex@1.3.2:
+    dependencies:
+      is-arrayish: 0.2.1
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-uri@3.0.6: {}
+
+  fastest-levenshtein@1.0.16: {}
+
+  fastq@1.19.1:
+    dependencies:
+      reusify: 1.1.0
+
+  file-entry-cache@10.1.1:
+    dependencies:
+      flat-cache: 6.1.10
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  flat-cache@6.1.10:
+    dependencies:
+      cacheable: 1.10.0
+      flatted: 3.3.3
+      hookified: 1.9.1
+
+  flatted@3.3.3: {}
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  global-modules@2.0.0:
+    dependencies:
+      global-prefix: 3.0.0
+
+  global-prefix@3.0.0:
+    dependencies:
+      ini: 1.3.8
+      kind-of: 6.0.3
+      which: 1.3.1
+
+  globby@11.1.0:
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.3
+      ignore: 5.3.2
+      merge2: 1.4.1
+      slash: 3.0.0
+
+  globjoin@0.1.4: {}
+
+  has-flag@4.0.0: {}
+
+  hookified@1.9.1: {}
+
+  html-tags@3.3.1: {}
+
+  ieee754@1.2.1: {}
+
+  ignore@5.3.2: {}
+
+  ignore@7.0.5: {}
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  imurmurhash@0.1.4: {}
+
+  ini@1.3.8: {}
+
+  is-arrayish@0.2.1: {}
+
+  is-extglob@2.1.1: {}
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-number@7.0.0: {}
+
+  is-plain-object@5.0.0: {}
+
+  isexe@2.0.0: {}
+
+  js-tokens@4.0.0: {}
+
+  js-yaml@4.1.0:
+    dependencies:
+      argparse: 2.0.1
+
+  json-parse-even-better-errors@2.3.1: {}
+
+  json-schema-traverse@1.0.0: {}
+
+  keyv@5.3.4:
+    dependencies:
+      '@keyv/serialize': 1.0.3
+
+  kind-of@6.0.3: {}
+
+  known-css-properties@0.36.0: {}
+
+  known-css-properties@0.37.0: {}
+
+  lines-and-columns@1.2.4: {}
+
+  lodash.truncate@4.4.2: {}
+
+  mathml-tag-names@2.1.3: {}
+
+  mdn-data@2.12.2: {}
+
+  mdn-data@2.21.0: {}
+
+  meow@13.2.0: {}
+
+  merge2@1.4.1: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  ms@2.1.3: {}
+
+  nanoid@3.3.11: {}
+
+  normalize-path@3.0.0: {}
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  parse-json@5.2.0:
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      error-ex: 1.3.2
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
+  path-type@4.0.0: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.1: {}
+
+  postcss-media-query-parser@0.2.3: {}
+
+  postcss-resolve-nested-selector@0.1.6: {}
+
+  postcss-safe-parser@7.0.1(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-scss@4.0.9(postcss@8.5.6):
+    dependencies:
+      postcss: 8.5.6
+
+  postcss-selector-parser@7.1.0:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-value-parser@4.2.0: {}
+
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prettier@3.6.0: {}
+
+  queue-microtask@1.2.3: {}
+
+  require-from-string@2.0.2: {}
+
+  resolve-from@4.0.0: {}
+
+  resolve-from@5.0.0: {}
+
+  reusify@1.1.0: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  signal-exit@4.1.0: {}
+
+  slash@3.0.0: {}
+
+  slice-ansi@4.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      astral-regex: 2.0.0
+      is-fullwidth-code-point: 3.0.0
+
+  source-map-js@1.2.1: {}
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  stylelint-config-recommended-scss@15.0.1(postcss@8.5.6)(stylelint@16.21.0):
+    dependencies:
+      postcss-scss: 4.0.9(postcss@8.5.6)
+      stylelint: 16.21.0
+      stylelint-config-recommended: 16.0.0(stylelint@16.21.0)
+      stylelint-scss: 6.12.1(stylelint@16.21.0)
+    optionalDependencies:
+      postcss: 8.5.6
+
+  stylelint-config-recommended@16.0.0(stylelint@16.21.0):
+    dependencies:
+      stylelint: 16.21.0
+
+  stylelint-config-standard-scss@15.0.1(postcss@8.5.6)(stylelint@16.21.0):
+    dependencies:
+      stylelint: 16.21.0
+      stylelint-config-recommended-scss: 15.0.1(postcss@8.5.6)(stylelint@16.21.0)
+      stylelint-config-standard: 38.0.0(stylelint@16.21.0)
+    optionalDependencies:
+      postcss: 8.5.6
+
+  stylelint-config-standard@38.0.0(stylelint@16.21.0):
+    dependencies:
+      stylelint: 16.21.0
+      stylelint-config-recommended: 16.0.0(stylelint@16.21.0)
+
+  stylelint-scss@6.12.1(stylelint@16.21.0):
+    dependencies:
+      css-tree: 3.1.0
+      is-plain-object: 5.0.0
+      known-css-properties: 0.36.0
+      mdn-data: 2.21.0
+      postcss-media-query-parser: 0.2.3
+      postcss-resolve-nested-selector: 0.1.6
+      postcss-selector-parser: 7.1.0
+      postcss-value-parser: 4.2.0
+      stylelint: 16.21.0
+
+  stylelint@16.21.0:
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.0)
+      '@dual-bundle/import-meta-resolve': 4.1.0
+      balanced-match: 2.0.0
+      colord: 2.9.3
+      cosmiconfig: 9.0.0
+      css-functions-list: 3.2.3
+      css-tree: 3.1.0
+      debug: 4.4.1
+      fast-glob: 3.3.3
+      fastest-levenshtein: 1.0.16
+      file-entry-cache: 10.1.1
+      global-modules: 2.0.0
+      globby: 11.1.0
+      globjoin: 0.1.4
+      html-tags: 3.3.1
+      ignore: 7.0.5
+      imurmurhash: 0.1.4
+      is-plain-object: 5.0.0
+      known-css-properties: 0.37.0
+      mathml-tag-names: 2.1.3
+      meow: 13.2.0
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-resolve-nested-selector: 0.1.6
+      postcss-safe-parser: 7.0.1(postcss@8.5.6)
+      postcss-selector-parser: 7.1.0
+      postcss-value-parser: 4.2.0
+      resolve-from: 5.0.0
+      string-width: 4.2.3
+      supports-hyperlinks: 3.2.0
+      svg-tags: 1.0.0
+      table: 6.9.0
+      write-file-atomic: 5.0.1
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-hyperlinks@3.2.0:
+    dependencies:
+      has-flag: 4.0.0
+      supports-color: 7.2.0
+
+  svg-tags@1.0.0: {}
+
+  table@6.9.0:
+    dependencies:
+      ajv: 8.17.1
+      lodash.truncate: 4.4.2
+      slice-ansi: 4.0.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  util-deprecate@1.0.2: {}
+
+  which@1.3.1:
+    dependencies:
+      isexe: 2.0.0
+
+  write-file-atomic@5.0.1:
+    dependencies:
+      imurmurhash: 0.1.4
+      signal-exit: 4.1.0

pyproject.toml

@@ -0,0 +1,23 @@
+[project]
+name = "snikket-web-portal"
+version = "0.1.0"
+description = "Add your description here"
+readme = "README.md"
+requires-python = ">=3.13"
+dependencies = [
+  "aiohttp~=3.12.13",
+  "email-validator~=1.3",
+  "environ-config~=20.0",
+  "flask-babel~=2.0,<3",
+  "flask-wtf~=1.1,<1.2",
+  "hsluv~=5.0",
+  "mypy>=1.16.1",
+  "python-dotenv~=0.15",
+  "types-toml>=0.10.8.20240310",
+  "typing-extensions>=4.14.0",
+  "werkzeug~=2.2,<3",
+  "wtforms~=3.0,<4",
+]
+
+[dependency-groups]
+dev = ["quart~=0.18,<0.19"]

requirements.txt

@@ -1,8 +0,0 @@
-aiohttp~=3.6
-quart~=0.11
-flask-wtf~=0.14
-hsluv~=0.0.2
-flask-babel~=1.0
-email-validator~=1.1
-environ-config~=20.0
-typing-extensions

snikket_web/__init__.py

@@ -18,10 +18,12 @@ from quart import (
     jsonify,
 )
 
+import werkzeug.exceptions
+
 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]:
@@ -40,7 +42,7 @@ async def proc() -> typing.Dict[str, typing.Any]:
 
     try:
         user_info = await infra.client.get_user_info()
-    except (aiohttp.ClientError, quart.exceptions.HTTPException):
+    except (aiohttp.ClientError, werkzeug.exceptions.HTTPException):
         user_info = {}
 
     return {
@@ -48,6 +50,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,
     }
 
 
@@ -104,16 +107,16 @@ async def backend_error_handler(exc: Exception) -> quart.Response:
 
 
 async def generic_http_error(
-        exc: quart.exceptions.HTTPException,
+        exc: werkzeug.exceptions.HTTPException,
         ) -> quart.Response:
     return quart.Response(
         await render_template(
             "generic_http_error.html",
-            status=exc.status_code,
+            status=exc.code,
             description=exc.description,
             name=exc.name,
         ),
-        status=exc.status_code,
+        status=exc.code,
     )
 
 
@@ -143,9 +146,38 @@ 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([
+        # 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",
+        "fr",
+        "id",
+        "it",
+        "pl",
+        "ru",
+        "sv",
+        "uk",
+        "zh_Hans_CN",
+    ], 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)
+    tos_uri = environ.var("")
+    privacy_uri = environ.var("")
+    abuse_email = environ.var("")
+    security_email = environ.var("")
 
+    admin_contact = environ.var("")
 
 _UPPER_CASE = "".join(map(chr, range(ord("A"), ord("Z")+1)))
 
@@ -157,7 +189,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,27 +207,37 @@ 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.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.config["ADMIN_CONTACT"] = config.admin_contact
 
     app.context_processor(proc)
     app.register_error_handler(
         aiohttp.ClientConnectorError,
-        backend_error_handler,  # type:ignore
+        backend_error_handler,
     )
     app.register_error_handler(
-        quart.exceptions.HTTPException,
+        werkzeug.exceptions.HTTPException,
         generic_http_error,  # type:ignore
     )
     app.register_error_handler(
         Exception,
-        generic_error_handler,  # type:ignore
+        generic_error_handler,
     )
 
     @app.route("/")
-    async def index() -> quart.Response:
+    async def index() -> typing.Union[str, werkzeug.Response]:
         if infra.client.has_session:
-            return redirect(url_for('user.index'))
+            return redirect(url_for("user.index"))
 
-        return redirect(url_for('main.login'))
+        return await render_template("home.html")
 
     @app.route("/site.webmanifest")
     def site_manifest() -> quart.Response:

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,15 +1,17 @@
-import asyncio
 import json
+import resource
+import time
 import typing
 
 from datetime import datetime
 
 import aiohttp
 
+import werkzeug.exceptions
+
 import quart.flask_patch
 
 import wtforms
-import wtforms.fields.html5
 
 from quart import (
     Blueprint,
@@ -18,13 +20,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 +35,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 +53,129 @@ 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
+class EditUserForm(BaseForm):
+    localpart = wtforms.StringField(
+        _l("Login name"),
+    )
+
+    display_name = wtforms.StringField(
+        _l("Display name"),
+    )
+
+    role = wtforms.RadioField(
+        _l("Access Level"),
+        choices=[
+            ("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"),
+    )
+
+
+@bp.route("/user/<localpart>/", methods=["GET", "POST"])
+@client.require_admin_session()
+async def edit_user(localpart: str) -> typing.Union[werkzeug.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_,
+            ))
+        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,
+            role=form.role.data,
+        )
+
+        await flash(
+            _("User information updated."),
+            "success",
+        )
+        return redirect(url_for(".users"))
+
+    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:registered"
+
+    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")
     )
@@ -63,12 +183,16 @@ class DeleteUserForm(flask_wtf.FlaskForm):  # type:ignore
 
 @bp.route("/user/<localpart>/delete", methods=["GET", "POST"])
 @client.require_admin_session()
-async def delete_user(localpart: str) -> typing.Union[str, quart.Response]:
+async def delete_user(localpart: str) -> typing.Union[str, werkzeug.Response]:
     target_user_info = await client.get_user_by_localpart(localpart)
     form = DeleteUserForm()
     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 +218,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, werkzeug.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.
@@ -157,6 +291,20 @@ class InvitePost(flask_wtf.FlaskForm):  # type:ignore
         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")
     )
@@ -180,7 +328,7 @@ class InvitePost(flask_wtf.FlaskForm):  # type:ignore
 
 @bp.route("/invitations", methods=["GET", "POST"])
 @client.require_admin_session()
-async def invitations() -> typing.Union[str, quart.Response]:
+async def invitations() -> typing.Union[str, werkzeug.Response]:
     invites = sorted(
         (
             invite
@@ -218,7 +366,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")
     )
@@ -226,7 +374,7 @@ class InviteForm(flask_wtf.FlaskForm):  # type:ignore
 
 @bp.route("/invitation/-/new", methods=["POST"])
 @client.require_admin_session()
-async def create_invite() -> typing.Union[str, quart.Response]:
+async def create_invite() -> typing.Union[str, werkzeug.Response]:
     form = InvitePost()
     circles = await client.list_groups()
     form.circles.choices = [
@@ -236,13 +384,21 @@ async def create_invite() -> typing.Union[str, quart.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"),
+            "success",
+        )
         return redirect(url_for(".edit_invite", id_=invite.id_))
     return await render_template("admin_create_invite.html",
                                  invite_form=form)
@@ -250,12 +406,16 @@ async def create_invite() -> typing.Union[str, quart.Response]:
 
 @bp.route("/invitation/<id_>", methods=["GET", "POST"])
 @client.require_admin_session()
-async def edit_invite(id_: str) -> typing.Union[str, quart.Response]:
+async def edit_invite(id_: str) -> typing.Union[str, werkzeug.Response]:
     try:
         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 +426,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 +442,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()],
@@ -308,12 +472,16 @@ async def circles() -> str:
 
 @bp.route("/circle/-/new", methods=["POST"])
 @client.require_admin_session()
-async def create_circle() -> typing.Union[str, quart.Response]:
+async def create_circle() -> typing.Union[str, werkzeug.Response]:
     create_form = CirclePost()
     if create_form.validate_on_submit():
         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 +490,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()],
@@ -337,20 +505,18 @@ class EditCircleForm(flask_wtf.FlaskForm):  # type:ignore
         _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()
-async def edit_circle(id_: str) -> typing.Union[str, quart.Response]:
+async def edit_circle(id_: str) -> typing.Union[str, werkzeug.Response]:
     async with client.authenticated_session() as session:
         try:
             circle = await client.get_group_by_id(
@@ -359,27 +525,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,30 +562,292 @@ async def edit_circle(id_: str) -> typing.Union[str, quart.Response]:
                 id_,
                 new_name=form.name.data,
             )
-        elif form.action_delete.data:
-            await client.delete_group(id_)
-            return redirect(url_for(".circles"))
+            await flash(
+                _("Circle data updated"),
+                "success",
+            )
         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",
+            )
+        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_))
-    else:
-        print(form.errors)
 
     return await render_template(
         "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()
+
+
+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(
+        _l("Message contents"),
+        widget=wtforms.widgets.TextArea(),
+        validators=[wtforms.validators.DataRequired()],
+    )
+
+    online_only = wtforms.BooleanField(
+        _l("Only send to online users"),
+    )
+
+    action_post_all = wtforms.SubmitField(
+        _l("Post to all users"),
+    )
+
+    action_send_preview = wtforms.SubmitField(
+        _l("Send preview to yourself"),
+    )
+
+
+@bp.route("/system/", methods=["GET", "POST"])
+@client.require_admin_session()
+async def system() -> typing.Union[str, werkzeug.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 werkzeug.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
+
+        try:
+            metrics["prosody_uploads"] = prosody_metrics["uploads"]
+        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
+                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,16 +1,22 @@
 import base64
 import itertools
+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
-from flask_babel import _
+import flask_wtf
+from flask_babel import lazy_gettext as _l
+import flask_babel as _
 
 from . import prosodyclient
 
@@ -21,11 +27,21 @@ 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:
+    g.language_header_accessed = True
     selected = request.accept_languages.best_match(
         current_app.config['LANGUAGES']
-    )
+    ) or current_app.config['LANGUAGES'][0]
     return selected
 
 
@@ -37,21 +53,96 @@ 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
 
 
+def format_bytes(n: float) -> str:
+    try:
+        scale = max(math.floor(math.log(n, 1024)), 0)
+    except ValueError:
+        scale = 0
+    try:
+        unit = BYTE_UNIT_SCALE_MAP[scale]
+        factor = 1024**scale
+    except IndexError:
+        unit = "TiB"
+        factor = 1024**4
+    if factor > 1:
+        return "{:.1f} {}".format(n / factor, unit)
+    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)
     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)
+    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:
     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

@@ -10,16 +10,18 @@ from quart import (
     current_app,
     render_template,
     redirect,
+    request,
     url_for,
     session as http_session,
 )
 
+import werkzeug
+
 import wtforms
 
-import flask_wtf
-from flask_babel import lazy_gettext as _l
+from flask_babel import lazy_gettext as _l, gettext
 
-from .infra import client, selected_locale
+from .infra import client, selected_locale, BaseForm
 
 
 bp = Blueprint("invite", __name__)
@@ -27,6 +29,11 @@ bp = Blueprint("invite", __name__)
 
 INVITE_SESSION_JID = "invite-session-jid"
 
+MAX_IMPORT_DATA_SIZE = 5*1024*1024  # 5MB
+SUPPORTED_IMPORT_TYPES = ["application/xml", "text/xml"]
+
+EIMPORTTOOBIG = _l("The account data you tried to import is too large to"
+                   " upload. Please contact your Snikket operator.")
 
 # https://play.google.com/store/apps/details?id=org.snikket.android&referrer={uri|urlescape}&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1
 
@@ -40,21 +47,38 @@ 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.Mapping[str, typing.Any]:
+def context() -> typing.Dict[str, typing.Any]:
     return {
         "apple_store_badge": apple_store_badge,
+        "play_store_badge": play_store_badge,
     }
 
 
 @bp.route("/<id_>")
-async def view(id_: str) -> str:
+async def view_old(id_: str) -> werkzeug.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,22 +103,33 @@ 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"),
     )
 
     password = wtforms.PasswordField(
         _l("Password"),
+        validators=[
+            wtforms.validators.InputRequired(),
+            wtforms.validators.Length(min=10),
+        ],
     )
 
     password_confirm = wtforms.PasswordField(
@@ -102,7 +137,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.")
                     )]
     )
 
@@ -112,7 +147,7 @@ class RegisterForm(flask_wtf.FlaskForm):  # type:ignore
 
 
 @bp.route("/<id_>/register", methods=["GET", "POST"])
-async def register(id_: str) -> typing.Union[str, quart.Response]:
+async def register(id_: str) -> typing.Union[str, werkzeug.Response]:
     try:
         invite = await client.get_public_invite_by_id(id_)
     except aiohttp.ClientResponseError as exc:
@@ -134,15 +169,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_))
@@ -150,6 +185,7 @@ async def register(id_: str) -> typing.Union[str, quart.Response]:
                 raise
         else:
             http_session[INVITE_SESSION_JID] = jid
+            await client.login(jid, form.password.data)
             return redirect(url_for(".success"))
 
     return await render_template(
@@ -159,9 +195,13 @@ 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"),
+        validators=[
+            wtforms.validators.InputRequired(),
+            wtforms.validators.Length(min=10),
+        ],
     )
 
     password_confirm = wtforms.PasswordField(
@@ -169,7 +209,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.")
                     )]
     )
 
@@ -179,7 +219,7 @@ class ResetForm(flask_wtf.FlaskForm):  # type:ignore
 
 
 @bp.route("/<id_>/reset", methods=["GET", "POST"])
-async def reset(id_: str) -> typing.Union[str, quart.Response]:
+async def reset(id_: str) -> typing.Union[str, werkzeug.Response]:
     try:
         invite = await client.get_public_invite_by_id(id_)
     except aiohttp.ClientResponseError as exc:
@@ -202,7 +242,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_))
@@ -219,11 +259,55 @@ async def reset(id_: str) -> typing.Union[str, quart.Response]:
     )
 
 
+class DataImportForm(BaseForm):
+    account_data_file = wtforms.FileField(
+        _l("Account data file")
+    )
+
+    action_import = wtforms.SubmitField(
+        _l("Import data")
+    )
+
+
 @bp.route("/success", methods=["GET", "POST"])
+@client.require_session()
 async def success() -> str:
+    form = DataImportForm()
+    if form.validate_on_submit():
+        ok = True
+        file_info = (await request.files).get(form.account_data_file.name)
+        if file_info is not None:
+            mimetype = file_info.mimetype
+            data = file_info.stream.read()
+            if len(data) > MAX_IMPORT_DATA_SIZE:
+                form.account_data_file.errors.append(EIMPORTTOOBIG)
+                ok = False
+            elif mimetype not in SUPPORTED_IMPORT_TYPES:
+                form.account_data_file.errors.append(
+                    # not breaking the line here to avoid extract
+                    # translations failing (defensive)
+                    gettext("The account data you tried to import is in an unknown format. Please upload an XML file in XEP-0227 format (provided format: %(mimetype)s).", mimetype=mimetype),  # noqa:E501
+                )
+                ok = False
+            elif len(data) > 0:
+                await client.import_account_data(data)
+
+        if ok:
+            # Re-render success page, this time with no import option
+            return await render_template(
+                "invite_success.html",
+                jid=http_session.get(INVITE_SESSION_JID, ""),
+                migration_success=True,
+                    )
+
     return await render_template(
         "invite_success.html",
         jid=http_session.get(INVITE_SESSION_JID, ""),
+        migration_success=False,
+        form=form,
+        max_import_size=MAX_IMPORT_DATA_SIZE,
+        import_too_big_warning_header=_l("Error"),
+        import_too_big_warning=EIMPORTTOOBIG,
     )
 
 
@@ -236,5 +320,5 @@ async def reset_success() -> str:
 
 
 @bp.route("/-")
-async def index() -> quart.Response:
+async def index() -> werkzeug.Response:
     return redirect(url_for("index"))

snikket_web/main.py

@@ -15,24 +15,26 @@ from quart import (
     render_template,
     request,
     Response,
+    flash,
 )
 
+import werkzeug.exceptions
+
 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
-    address = wtforms.TextField(
+class LoginForm(BaseForm):
+    address = wtforms.StringField(
         _l("Address"),
         validators=[wtforms.validators.InputRequired()],
     )
@@ -48,12 +50,15 @@ class LoginForm(flask_wtf.FlaskForm):  # type:ignore
 
 
 @bp.route("/-")
-async def index() -> quart.Response:
+async def index() -> werkzeug.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]:
+async def login() -> typing.Union[str, werkzeug.Response]:
     if client.has_session and (await client.test_session()):
         return redirect(url_for('user.index'))
 
@@ -63,34 +68,55 @@ 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 werkzeug.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
+    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["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 werkzeug.exceptions.Unauthorized:
+            extra_versions["Prosody"] = "unknown"
 
     return await render_template(
         "about.html",
-        version=_version.version,
+        version=version,
         extra_versions=extra_versions,
+        core_versions=core_versions,
     )
 
 
@@ -105,6 +131,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 +171,44 @@ async def avatar(from_: str, code: str) -> quart.Response:
 
     response.set_data(data)
     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/_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 {
@@ -235,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;
@@ -251,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;
 		}
 	}
@@ -330,6 +361,19 @@ 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;
+	}
+
+	.radio-button-ext {
+		margin-left: 0.5rem;
+	}
+
 	div.select-wrap {
 		display: block;
 		border-bottom: $w-s4 solid $primary-500;
@@ -613,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 {
@@ -738,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;
 
@@ -993,21 +973,37 @@ 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 */
+/* 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 {
@@ -1071,7 +1067,7 @@ pre.guru-meditation {
 		}
 
 		@each $type in $text-entry-inputs {
-			input[type=$type] {
+			input[type=#{$type}] {
 				background-color: black;
 			}
 
@@ -1081,6 +1077,10 @@ pre.guru-meditation {
 		}
 	}
 
+	label, legend {
+		color: $gray-800 !important;
+	}
+
 	.box {
 		background-color: black;
 		border-color: $gray-800;
@@ -1215,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 */
@@ -1265,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/home.scss

@@ -0,0 +1,194 @@
+/*
+ * Reset
+ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+img,
+figure,
+figcaption,
+table,
+td,
+tr,
+thead,
+tbody,
+details,
+summary {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  /* Text related colors */
+  --copy: #444444;
+  --copy-darker: #242424;
+  --copy-darker-2: #121212;
+  --copy-lighter: #6b6b6b;
+  --copy-lighter-2: #c4c4c4;
+  --hyperlink: #155bca;
+
+  /* Background related colors */
+  --bg: #fffaef;
+
+  /*
+   * Colors
+   */
+  --primary-color: #ff94a1;
+  --primary-color-half-light: #ffc6c8;
+  --secondary-color: #97aa9b;
+  --secondary-color-half-light: #e5e6d9;
+  --secondary-color-light: #cbd2c4;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-size: 18px;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  justify-content: center;
+  align-items: center;
+  font-family: Verdana, sans-serif;
+  text-align: left;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  background-color: var(--bg);
+  line-height: 1.5rem;
+}
+
+article,
+section,
+header,
+footer {
+  a {
+    --transition-property: inherit;
+    --color: var(--copy);
+    --hover-color: var(--primary-color);
+    --hover-thickness: 0.2rem;
+    --text-decoration: underline;
+    --text-decoration-color: var(--color);
+
+    color: var(--color);
+    text-decoration: none;
+
+    &[href]:not([aria-disabled="true"], [aria-current="page"]) {
+      text-decoration: var(--text-decoration);
+      text-decoration-line: var(--text-decoration);
+      text-decoration-color: var(--text-decoration-color);
+      text-decoration-thickness: 1px;
+      text-decoration-skip-ink: none;
+      transition-property:
+        text-decoration-thickness, text-decoration-color,
+        var(--transition-property);
+      transition-duration: var(--transition-duration);
+      transition-timing-function: var(--transition-timing-function);
+
+      &:hover,
+      &:active,
+      &:focus {
+        text-decoration-color: var(--hover-color);
+        text-decoration-thickness: var(--hover-thickness);
+      }
+    }
+
+    &[rel~="external"]:not(:has(img))::after {
+      display: inline-block;
+      content: "";
+      width: 12px;
+      height: 12px;
+      line-height: inherit;
+      vertical-align: middle;
+      background: var(--color);
+      mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj4KICAJPHBhdGggZmlsbD0iIzAwMDAwMCIgZD0iTTYgMWg1djVMOC44NiAzLjg1IDQuNyA4IDQgNy4zbDQuMTUtNC4xNnpNMiAzaDJ2MUgydjZoNlY4aDF2MmExIDEgMCAwIDEtMSAxSDJhMSAxIDAgMCAxLTEtMVY0YTEgMSAwIDAgMSAxLTEiLz4KPC9zdmc+");
+      margin-left: 0.2em;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    > a {
+      color: var(--copy);
+    }
+  }
+}
+
+main.home {
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  max-width: 450px;
+
+  > header {
+    > img {
+      width: 250px;
+      margin-bottom: 0.3rem;
+    }
+
+    > h1 {
+      text-align: center;
+      font-size: 3rem;
+      line-height: 3rem;
+      font-weight: 600;
+    }
+  }
+
+  > section {
+    text-align: center;
+
+    > p {
+      margin-bottom: 1.25rem;
+      text-wrap: balance;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  > footer {
+    > nav {
+      display: flex;
+      flex-direction: row;
+      align-items: stretch;
+      gap: 1rem;
+
+      > a {
+        flex: 1 1 50%;
+        padding: 0.5rem 0.7rem;
+        border-radius: 0.2rem 0.5rem;
+
+        &[href]:not([aria-disabled="true"], [aria-current="page"]) {
+          transition-property:
+            background-color, text-decoration-thickness, text-decoration-color;
+
+          &:hover {
+            background-color: var(--secondary-color-half-light);
+          }
+        }
+
+        &[aria-current="page"] {
+          font-weight: 600;
+          background-color: var(--primary-color);
+        }
+      }
+    }
+  }
+}

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,58 +76,8 @@ img.play {
 	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;
-		}
-	}
+img.fdroid {
+	height: $w-l3;
 }
 
 .qr {

snikket_web/static/img/icons.svg

@@ -37,6 +37,26 @@ 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: 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" />
+<path d="M8.65 3.35L5.86 6.14c-.32.31-.1.85.35.85H8V13c0 .55.45 1 1 1s1-.45 1-1V6.99h1.79c.45 0 .67-.54.35-.85L9.35 3.35c-.19-.19-.51-.19-.7 0zM16 17.01V11c0-.55-.45-1-1-1s-1 .45-1 1v6.01h-1.79c-.45 0-.67.54-.35.85l2.79 2.78c.2.19.51.19.71 0l2.79-2.78c.32-.31.09-.85-.35-.85H16z" />
+</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 +67,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 +98,26 @@ 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: file/file_download/materialicons/24px.svg -->
+<symbol id="icon-download" viewBox="0 0 24 24">
+<path d="M0 0h24v24H0z" fill="none" />
+<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
+</symbol>
+<!-- from: file/file_upload/materialicons/24px.svg -->
+<symbol id="icon-upload" viewBox="0 0 24 24">
+<path d="M0 0h24v24H0z" fill="none" />
+<path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" />
+</symbol>
+<!-- from: file/folder/materialiconsround/24px.svg -->
+<symbol id="icon-folder" viewBox="0 0 24 24">
+<path d="M0 0h24v24H0V0z" fill="none" />
+<path d="M10.59 4.59C10.21 4.21 9.7 4 9.17 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-1.41-1.41z" />
+</symbol>
 <!-- from: navigation/arrow_back/materialiconsround/24px.svg -->
 <symbol id="icon-back" viewBox="0 0 24 24">
 <path d="M0 0h24v24H0V0z" fill="none" />
@@ -102,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" />
@@ -137,4 +188,14 @@ 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>
+<!-- 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/static/img/tofu.svg

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ns1="http://sozi.baierouge.fr" xmlns:cc="http://creativecommons.org/ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:dc="http://purl.org/dc/elements/1.1/" id="svg2" xml:space="preserve" viewBox="0 0 39.287 34.67" version="1.1" inkscape:version="0.91 r13725">
+  <g id="g10" transform="matrix(1.25 0 0 -1.25 0 34.67)">
+    <g id="g12">
+      <path id="path14" style="fill-rule:evenodd;fill:#f9f5ea" d="m8.988 22.388 5.516 2.977 0.992-0.442c0.77-0.292 1.543-0.515 2.316-0.66 1.25-0.257 1.985-0.515 2.204-0.773l-4.743-2.535c-0.734 0.218-1.726 0.457-2.976 0.715l-3.309 0.718z" inkscape:connector-curvature="0"/>
+      <path id="path16" style="fill-rule:evenodd;fill:#e8e1c5" d="m9.375 22.775 3.859-0.551c0.625-0.113 1.414-0.48 2.371-1.105l-0.332-7.332-0.769 0.328-5.129 1.656v7.004z" inkscape:connector-curvature="0"/>
+      <path id="path18" style="fill-rule:evenodd;fill:#a79e81" d="m15.605 21.119 4.411 2.371v-6.949c-0.477-0.368-1.028-0.735-1.653-1.102-0.59-0.367-1.617-0.918-3.09-1.652l0.332 7.332z" inkscape:connector-curvature="0"/>
+      <path id="path20" style="fill-rule:evenodd;fill:#c1aa76" d="m12.684 17.259c0.66 0.184 1.121 0.055 1.378-0.386 0.258-0.477-0.019-0.844-0.828-1.102-0.773-0.258-1.195-0.109-1.269 0.442-0.035 0.55 0.203 0.898 0.719 1.046z" inkscape:connector-curvature="0"/>
+      <path id="path22" style="fill-rule:evenodd;fill:#d9d2b8" d="m15.992 23.877c0.66 0.328 1.117 0.257 1.379-0.223 0.254-0.477 0.164-0.77-0.277-0.883-0.406-0.109-0.809-0.015-1.215 0.277-0.402 0.333-0.367 0.606 0.113 0.829z" inkscape:connector-curvature="0"/>
+      <path id="path24" style="fill-rule:evenodd;fill:#c9bf9c" d="m17.48 21.119c0.625 0.183 0.918-0.035 0.883-0.66-0.074-0.664-0.441-1.121-1.105-1.379-0.586-0.258-0.77 0-0.551 0.769 0.184 0.735 0.441 1.16 0.773 1.27z" inkscape:connector-curvature="0"/>
+      <path id="path26" style="fill-rule:evenodd;fill:#c1aa76" d="m10.641 20.404c0.367 0.144 0.589 0 0.664-0.441 0.074-0.442-0.075-0.665-0.442-0.665-0.406 0-0.664 0.129-0.773 0.387-0.11 0.258 0.074 0.496 0.551 0.719z" inkscape:connector-curvature="0"/>
+      <path id="path28" style="fill-rule:evenodd;fill:#d9d2b8" d="m12.684 23.49c0.328 0.219 0.625 0.332 0.882 0.332 0.258-0.039 0.2-0.258-0.168-0.664-0.367-0.477-0.699-0.625-0.992-0.442-0.332 0.188-0.238 0.442 0.278 0.774z" inkscape:connector-curvature="0"/>
+      <path id="path30" style="fill-rule:evenodd;fill:#ccc8ab" d="m16.93 7.334-16.93 4.964 16.156 6.614 14.887-5.899-14.113-5.679z" inkscape:connector-curvature="0"/>
+      <path id="path32" style="fill-rule:evenodd;fill:#f5f5f5" d="m30.492 12.849-15.054 4.024-14.5-5.512-0.938 0.937l15.273 5.676 15.77-4.187c0.258-0.992 0.258-1.547 0-1.656-0.145-0.11-0.273-0.016-0.383 0.277l-0.168 0.441z" inkscape:connector-curvature="0"/>
+      <path id="path34" style="fill-rule:evenodd;fill:#f9f5ea" d="m17.867 20.127 6.117 1.324 0.828-0.664c0.7-0.512 1.399-0.953 2.094-1.321 1.106-0.554 1.731-0.976 1.875-1.269l-5.293-1.16c-0.625 0.406-1.488 0.902-2.59 1.492l-3.031 1.598z" inkscape:connector-curvature="0"/>
+      <path id="path36" style="fill-rule:evenodd;fill:#e8e1c5" d="m18.363 20.404 3.528-1.602c0.55-0.293 1.23-0.863 2.039-1.707l-2.371-6.949-0.606 0.551-4.519 2.976 1.929 6.731z" inkscape:connector-curvature="0"/>
+      <path id="path38" style="fill-rule:evenodd;fill:#a79e81" d="m28.781 18.197-1.871-6.727-5.351-1.324 2.371 6.949 4.851 1.102z" inkscape:connector-curvature="0"/>
+      <path id="path40" style="fill-rule:evenodd;fill:#c1aa76" d="m20.016 14.17c0.699 0 1.105-0.258 1.214-0.77 0.11-0.477-0.257-0.734-1.101-0.773-0.774-0.036-1.121 0.203-1.051 0.718 0.11 0.551 0.422 0.825 0.938 0.825z" inkscape:connector-curvature="0"/>
+      <path id="path42" style="fill-rule:evenodd;fill:#d9d2b8" d="m25.035 19.631c0.735 0.148 1.156-0.036 1.266-0.551 0.113-0.551-0.074-0.828-0.551-0.828-0.402 0.039-0.75 0.238-1.047 0.609-0.293 0.402-0.183 0.66 0.332 0.77z" inkscape:connector-curvature="0"/>
+      <path id="path44" style="fill-rule:evenodd;fill:#c9bf9c" d="m25.695 16.599c0.664 0 0.864-0.297 0.606-0.883-0.219-0.589-0.68-0.937-1.379-1.05-0.625-0.071-0.734 0.222-0.328 0.882 0.402 0.7 0.769 1.051 1.101 1.051z" inkscape:connector-curvature="0"/>
+      <path id="path46" style="fill-rule:evenodd;fill:#c1aa76" d="m18.914 17.756c0.402 0.074 0.586-0.11 0.551-0.551-0.074-0.477-0.293-0.66-0.664-0.551-0.403 0.074-0.606 0.258-0.606 0.551-0.035 0.258 0.203 0.441 0.719 0.551z" inkscape:connector-curvature="0"/>
+      <path id="path48" style="fill-rule:evenodd;fill:#d9d2b8" d="m21.727 20.181c0.402 0.149 0.714 0.164 0.937 0.055 0.219-0.074 0.109-0.273-0.332-0.605-0.477-0.333-0.844-0.368-1.102-0.114-0.257 0.262-0.093 0.481 0.497 0.664z" inkscape:connector-curvature="0"/>
+      <path id="path50" style="fill-rule:evenodd;fill:#f9f5ea" d="m2.535 16.709 4.965 3.804c1.066-0.332 2.223-0.515 3.473-0.55 1.215-0.04 1.965-0.168 2.261-0.387l-4.3-3.309c-0.774 0.11-1.786 0.184-3.036 0.219l-3.363 0.223z" inkscape:connector-curvature="0"/>
+      <path id="path52" style="fill-rule:evenodd;fill:#e8e1c5" d="m2.867 17.095 3.86 0.11c0.625-0.035 1.468-0.278 2.535-0.715l0.828-7.281-0.77 0.222-5.351 0.77-1.102 6.894z" inkscape:connector-curvature="0"/>
+      <path id="path54" style="fill-rule:evenodd;fill:#a79e81" d="m9.262 16.486 3.972 3.09 1.157-6.895c-0.442-0.441-0.938-0.883-1.489-1.32-0.515-0.48-1.449-1.195-2.812-2.152l-0.828 7.277z" inkscape:connector-curvature="0"/>
+      <path id="path56" style="fill-rule:evenodd;fill:#c1aa76" d="m7.004 12.24c0.625 0.297 1.101 0.242 1.434-0.164 0.292-0.406 0.074-0.809-0.665-1.211-0.695-0.371-1.117-0.297-1.265 0.219-0.149 0.515 0.015 0.902 0.496 1.156z" inkscape:connector-curvature="0"/>
+      <path id="path58" style="fill-rule:evenodd;fill:#d9d2b8" d="m9.207 19.298c0.59 0.442 1.051 0.442 1.379 0 0.332-0.437 0.297-0.753-0.109-0.937-0.403-0.145-0.829-0.109-1.27 0.113-0.441 0.219-0.441 0.496 0 0.824z" inkscape:connector-curvature="0"/>
+      <path id="path60" style="fill-rule:evenodd;fill:#c9bf9c" d="m11.082 16.818c0.59 0.258 0.922 0.074 0.992-0.551 0.039-0.59-0.238-1.086-0.824-1.488-0.551-0.367-0.793-0.148-0.719 0.66 0.074 0.774 0.258 1.231 0.551 1.379z" inkscape:connector-curvature="0"/>
+      <path id="path62" style="fill-rule:evenodd;fill:#c1aa76" d="m4.523 14.998c0.329 0.222 0.551 0.109 0.661-0.328 0.148-0.442 0.035-0.7-0.332-0.774-0.403-0.074-0.661 0.02-0.77 0.277-0.148 0.254 0 0.532 0.441 0.825z" inkscape:connector-curvature="0"/>
+      <path id="path64" style="fill-rule:evenodd;fill:#d9d2b8" d="m6.012 18.361c0.254 0.297 0.511 0.441 0.769 0.441 0.258 0.039 0.258-0.183 0-0.66-0.293-0.515-0.605-0.719-0.937-0.605-0.367 0.144-0.313 0.422 0.168 0.824z" inkscape:connector-curvature="0"/>
+      <path id="path66" style="fill-rule:evenodd;fill:#f9f5ea" d="m10.863 15.22 5.512 2.977 0.937-0.441c0.813-0.293 1.602-0.516 2.376-0.661 1.21-0.257 1.945-0.515 2.203-0.773l-4.797-2.535c-0.735 0.219-1.707 0.457-2.922 0.715l-3.309 0.718z" inkscape:connector-curvature="0"/>
+      <path id="path68" style="fill-rule:evenodd;fill:#e8e1c5" d="m11.195 15.603 3.86-0.551c0.625-0.109 1.433-0.476 2.425-1.101l-0.386-7.336-0.715 0.332-5.184 1.656v7z" inkscape:connector-curvature="0"/>
+      <path id="path70" style="fill-rule:evenodd;fill:#c1aa76" d="m15.824 14.67 1.27-0.883c0.441-0.406 0.293-0.699-0.442-0.883-0.515-0.148-0.882 0.09-1.101 0.715-0.223 0.625-0.129 0.976 0.273 1.051z" inkscape:connector-curvature="0"/>
+      <path id="path72" style="fill-rule:evenodd;fill:#a79e81" d="m20.238 8.271-3.144-1.656 0.386 7.336 4.411 2.371v-6.949l-1.653-1.102z" inkscape:connector-curvature="0"/>
+      <path id="path74" style="fill-rule:evenodd;fill:#c9bf9c" d="m20.512 14.006c0.441 0.183 0.664 0.054 0.664-0.387 0-0.403-0.184-0.645-0.551-0.715-0.371-0.074-0.59 0.035-0.664 0.332-0.109 0.293 0.074 0.551 0.551 0.77z" inkscape:connector-curvature="0"/>
+      <path id="path76" style="fill-rule:evenodd;fill:#c1aa76" d="m14.5 10.091c0.699 0.184 1.16 0.055 1.379-0.386 0.258-0.477-0.016-0.844-0.824-1.102-0.774-0.258-1.18-0.113-1.215 0.442-0.074 0.55 0.148 0.898 0.66 1.046z" inkscape:connector-curvature="0"/>
+      <path id="path78" style="fill-rule:evenodd;fill:#d9d2b8" d="m17.809 16.709c0.664 0.332 1.121 0.257 1.382-0.223 0.293-0.477 0.2-0.77-0.277-0.883-0.406-0.109-0.809-0.015-1.215 0.278-0.402 0.332-0.367 0.605 0.11 0.828z" inkscape:connector-curvature="0"/>
+      <path id="path80" style="fill-rule:evenodd;fill:#c9bf9c" d="m19.301 11.634c0.625 0.149 0.918-0.089 0.879-0.714-0.071-0.625-0.422-1.067-1.047-1.325-0.586-0.257-0.789 0-0.606 0.774 0.184 0.734 0.442 1.156 0.774 1.265z" inkscape:connector-curvature="0"/>
+      <path id="path82" style="fill-rule:evenodd;fill:#c1aa76" d="m12.516 13.236c0.367 0.145 0.57 0 0.609-0.441 0.07-0.446-0.074-0.664-0.441-0.664-0.407 0-0.645 0.128-0.719 0.386-0.11 0.258 0.074 0.496 0.551 0.719z" inkscape:connector-curvature="0"/>
+      <path id="path84" style="fill-rule:evenodd;fill:#d9d2b8" d="m14.5 16.322c0.332 0.219 0.625 0.332 0.883 0.332 0.258-0.039 0.222-0.258-0.11-0.664-0.367-0.477-0.714-0.625-1.046-0.442-0.332 0.184-0.239 0.442 0.273 0.774z" inkscape:connector-curvature="0"/>
+      <path id="path86" style="fill-rule:evenodd;fill:#dbdbdb" d="m27.184 4.193-9.153-4.191-14.172 3.308-3.859 8.988 18.195-4.246 13.235 5.735-4.246-9.594z" inkscape:connector-curvature="0"/>
+      <path id="path88" style="fill-rule:evenodd;fill:#b2b2b2" d="m18.746 6.783 12.297 5.348-3.859-7.938-9.153-4.191 0.715 6.781z" inkscape:connector-curvature="0"/>
+      <path id="path90" style="fill-rule:evenodd;fill:#f5f5f5" d="m31.43 13.787-0.551-1.875-12.133-5.129-18.582 4.023-0.164 1.492 19.133-4.027 12.297 5.516z" inkscape:connector-curvature="0"/>
+      <path id="path92" style="fill-rule:evenodd;fill:#e4e4e4" d="m5.293 3.42-0.77 6.781 10.532-2.59-4.028-5.074-5.734 0.883z" inkscape:connector-curvature="0"/>
+      <path id="path94" style="fill-rule:evenodd;fill:#949494" d="m30.16 11.193-2.754-6.617-9.375-4.574c2.793 2.574 4.926 4.464 6.395 5.679 1.472 1.211 3.383 3.051 5.734 5.512z" inkscape:connector-curvature="0"/>
+      <path id="path96" style="fill-rule:evenodd;fill:#bdbf02" d="m13.949 17.756c-1.687 2.132-2.719 3.492-3.086 4.082l-2.758 5.898c0.957-1.469 2.059-2.758 3.309-3.859 1.215-1.102 2.059-3.145 2.535-6.121z" inkscape:connector-curvature="0"/>
+      <path id="path98" style="fill-rule:evenodd;fill:#586436" d="m13.621 26.634c0.219-2.574 0.328-4.171 0.328-4.796v-4.082c-0.734 1.984-1.101 3.234-1.101 3.75l0.773 5.128z" inkscape:connector-curvature="0"/>
+      <path id="path100" style="fill-rule:evenodd;fill:#90a701" d="m8.438 27.185 2.976-3.308c0.734-0.844 1.285-1.766 1.652-2.758v-0.387l-2.976 2.594c-0.219 0.219-0.57 0.937-1.047 2.148-0.219 0.59-0.422 1.16-0.605 1.711z" inkscape:connector-curvature="0"/>
+    </g>
+  </g>
+<metadata><rdf:RDF><cc:Work><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><cc:license rdf:resource="http://creativecommons.org/licenses/publicdomain/"/><dc:publisher><cc:Agent rdf:about="http://openclipart.org/"><dc:title>Openclipart</dc:title></cc:Agent></dc:publisher></cc:Work><cc:License rdf:about="http://creativecommons.org/licenses/publicdomain/"><cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/><cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/><cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/></cc:License></rdf:RDF></metadata></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,27 +1,37 @@
 {% 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>
 	<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 ({{ version }})
+		<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_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, 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,43 +21,69 @@
 		{{ 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="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>
 	<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>Login name</th>
-		<th class="collapsible">Display name</th>
-		<th>Actions</th>
+		<th>{% trans %}Login 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 class="collapsible">{% call value_or_hint(member.display_name) %}{% endcall %}</td>
+			<td>
+				{%- if member -%}
+				{%- 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="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 -#}
@@ -44,10 +45,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,83 @@
+{% extends "admin_app.html" %}
+{% 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 }}
+	</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="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="secondary") -%}
+			{%- 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

@@ -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 %}Valid until{% 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

@@ -9,19 +9,19 @@
 <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>
 		<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") -%}
 			{% 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,112 @@
+{% 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 %}Storage used by shared files{% endtrans %}</dt>
+		<dd>
+			{%- if metrics.prosody_uploads | default(None) is not none -%}
+			{{ metrics.prosody_uploads | format_bytes }}
+			{%- else -%}
+			<em>{% trans %}unknown{% endtrans %}</em>
+			{%- endif -%}
+		</dd>
+		<dt>{% trans %}Active users{% endtrans %}</dt>
+		<dd>
+			<ul>
+			{%- if metrics.prosody_devices | default(None) is not none -%}
+			<li>{% trans %}Connected now:{% endtrans %} {{ metrics.prosody_devices }}</li>
+			{%- else -%}
+			<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>
+{% 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,37 +1,36 @@
 {% extends "admin_app.html" %}
-{% from "library.j2" import action_button, 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>
-<form method="POST" action="{{ url_for(".create_password_reset_link") }}">
-{{- reset_form.csrf_token -}}
 <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>
 	<tbody>
 {% for user in users %}
 		<tr>
-			<td>{{ user.localpart }}</td>
-			<td>{% call value_or_hint(user.display_name) %}{% endcall %}</td>
+			<td>
+				{%- call render_user(user) -%}{%- 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("delete", url_for(".delete_user", localpart=user.localpart), class="secondary") -%}
-					{% trans user_name=user.localpart %}Delete user {{ 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 -%}
-				{%- 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 %}
-				{%- endcall -%}
-				</form>
 			</td>
 		</tr>
 {% 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 %} 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/home.html

@@ -0,0 +1,54 @@
+{% extends "base.html" %}
+
+{% block head_lead %}
+  <title>{{ config["SITE_NAME"] }}</title>
+{% endblock %}
+
+{% block style %}
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/home.css') }}">
+{% endblock %}
+
+{% block body %}
+<main class="home">
+    <header>
+      {% trans site_name=config["SITE_NAME"], logo_url=url_for("static", filename="img/tofu.svg") %}
+        <img src="{{ logo_url }}" alt="{{ site_name }}" />
+      {% endtrans %}
+      <h1>{{ config["SITE_NAME"] }}</h1>
+    </header>
+
+    <section class="icons">
+      <a href="https://compliance.conversations.im/server/{{ config['SNIKKET_DOMAIN'] }}"
+        ><img src="https://compliance.conversations.im/badge/{{ config['SNIKKET_DOMAIN'] }}"></a>
+    </section>
+
+    <section class="intro">
+      <p>{% trans site_name=config["SITE_NAME"], about_page=url_for('main.about') %}
+        <em>{{ site_name }}</em> is an XMPP (Jabber) server hosted by
+        <a href="https://www.davejansen.com/" rel="external" target="_blank">Dave Jansen</a>
+        using open-source software from <a href="{{ about_page }}">the Snikket project</a>.
+      {% endtrans %}</p>
+
+      {%- if config["ADMIN_CONTACT"] -%}
+        <p>
+          {% trans admin_contact=config["ADMIN_CONTACT"] %}
+          To reach out, send a message to <a href="xmpp:{{ admin_contact }}">{{ admin_contact }}</a> or
+          <a href="mailto:{{ admin_contact }}">via email</a>.
+          {% endtrans %}
+        </p>
+      {%- endif -%}
+    </section>
+
+    <footer>
+      <nav>
+        <a href="https://xmpp.org/getting-started/" rel="external" target="_blank">
+          {% trans %}Need an XMPP (Jabber) client?{% endtrans %}
+        </a>
+        <a href="{{ url_for('main.login') }}">
+          {% trans site_name=config["SITE_NAME"] %}Need to manage your {{ site_name }} account?{% endtrans %}
+        </a>
+      </p>
+    </footer>
+
+</main>
+{% endblock %}

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_register.html

@@ -28,12 +28,12 @@
 		</div>
 		<div class="f-ebox">
 			{{ form.password.label }}
-			{{ form.password }}
+			{{ form.password(autocomplete="new-password") }}
 			<p class="field-desc weak">{% trans %}Enter a secure password that you do not use anywhere else.{% endtrans %}</p>
 		</div>
 		<div class="f-ebox">
 			{{ form.password_confirm.label }}
-			{{ form.password_confirm }}
+			{{ form.password_confirm(autocomplete="new-password") }}
 		</div>
 		<div class="f-bbox">
 			{%- call form_button("done", form.action_register, class="primary") -%}{%- endcall -%}

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">
@@ -17,19 +16,14 @@
 	{%- call render_errors(form) %}{% endcall -%}
 	<div class="f-ebox">
 		{{ form.password.label }}
-		{{ form.password }}
+		{{ form.password(autocomplete="new-password") }}
 	</div>
 	<div class="f-ebox">
 		{{ form.password_confirm.label }}
-		{{ form.password_confirm }}
+		{{ form.password_confirm(autocomplete="new-password") }}
 	</div>
 	<div class="f-bbox">
 		{%- 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_success.html

@@ -1,6 +1,6 @@
 {% extends "invite.html" %}
 {% set body_id = "invite" %}
-{% from "library.j2" import form_button, clipboard_button %}
+{% from "library.j2" import form_button, clipboard_button, render_errors %}
 {% block head_lead %}
 <title>{% trans site_name=config["SITE_NAME"] %}Successfully registered on {{ site_name }} | Snikket{% endtrans %}</title>
 {%- include "copy-snippet.html" -%}
@@ -15,6 +15,47 @@
 		{% trans %}Copy address{% endtrans %}
 	{%- endcall -%}
 	<p>{% trans %}You can now set up your legacy XMPP client with the above address and the password you chose during registration.{% endtrans %}</p>
-	<p>{% trans %}You can now safely close this page.{% endtrans %}</p>
+	<p>{% trans login_url=url_for('main.login') %}You can now safely close this page, or log in to the web portal to <a href="{{ login_url }}">manage your account</a>.{% endtrans %}</p>
+
+	{% if migration_success %}
+		<h2>{% trans %}Import successful{% endtrans %}</h2>
+		<p>{% trans %}Congratulations! Your account data has been successfully imported.{% endtrans %}</p>
+	{% endif %}
+
+	{% if form %}
+		<h2>{% trans %}Moving to Snikket?{% endtrans %}</h2>
+		<p>{% trans %}If you are moving from a different Snikket instance or another XMPP-compatible service, you may optionally import the data (contacts, profile information, etc.) from your previous account. When you have exported the data from your previous account, upload it using the form below.{% endtrans %}</p>
+
+		<div class="form layout-expanded"><form method="POST" enctype="multipart/form-data">
+			<h3 class="form-title">{% trans %}Upload account data{% endtrans %}</h3>
+			{{ form.csrf_token }}
+			{% call render_errors(form) %}{% endcall %}
+			<div class="f-ebox">
+				{{ form.account_data_file.label }}
+				{{ form.account_data_file(accept="application/xml",
+						 data_maxsize=max_import_size,
+						 data_warning_header=import_too_big_warning_header,
+						 data_maxsize_warning=import_too_big_warning) }}
+			</div>
+			<div class="f-bbox">
+				{%- call form_button("upload", form.action_import, class="secondary") %}{% endcall -%}
+			</div>
+			<script type="text/javascript">
+			document.getElementById("{{ form.account_data_file.id }}").onchange = function() {
+				var maxsize_s = this.dataset.maxsize;
+				var maxsize = parseInt(maxsize_s);
+				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>
+	{% endif %}
 </div>
 {% 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">
@@ -16,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>
@@ -24,13 +32,14 @@
 {%- 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 }}"><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>
@@ -54,39 +63,83 @@
 			{%- 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) }}" 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 %}
 		{%- 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

@@ -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,13 +100,31 @@
 </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 -%}
 <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 -%}
@@ -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

@@ -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) }}
@@ -30,9 +30,23 @@
 		<div class="f-bbox">
 			{%- 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>
+	</form>
+	<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/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/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_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">
@@ -30,6 +35,7 @@
 			<div>
 				<div>{% call standard_button("edit", url_for(".profile"), class="primary") %}{% trans %}Edit profile{% endtrans %}{% endcall %}</div>
 				<div>{% call standard_button("passwd", url_for(".change_pw"), class="secondary") %}{% trans %}Change password{% endtrans %}{% endcall %}</div>
+				<div>{% call standard_button("folder", url_for(".manage_data"), class="secondary") %}{% trans %}Manage your data{% endtrans %}{% endcall %}</div>
 			</div>
 			{#- -#}
 		</li>

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_manage_data.html

@@ -0,0 +1,24 @@
+{% extends "app.html" %}
+{% from "library.j2" import standard_button, form_button, render_errors, avatar with context %}
+{% block content %}
+<h1>{% trans %}Manage your data{% endtrans %}</h1>
+<nav class="welcome">
+	<ul>
+		<li>
+			<h2>{% trans %}Export account{% endtrans %}</h2>
+			<p>{% trans %}Download your account data as a file for backup purposes or to move your account to another service.{% endtrans %}</p>
+
+			{% 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 -%}
+				</form>
+			</div>
+		</li>
+	</ul>
+</nav>
+{% endblock %}

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>
@@ -12,22 +9,22 @@
 	{%- endcall -%}
 	<div class="f-ebox">
 		{{ form.current_password.label(class="required") }}
-		{{ form.current_password(class=("has-error" if form.current_password.name in form.errors else "")) }}
+		{{ form.current_password(class=("has-error" if form.current_password.name in form.errors else ""), autocomplete="current-password") }}
 	</div>
 	<div class="f-ebox">
 		{{ form.new_password.label(class="required") }}
-		{{ form.new_password }}
+		{{ form.new_password(autocomplete="new-password") }}
 	</div>
 	<div class="f-ebox">
 		{{ form.new_password_confirm.label(class="required") }}
-		{{ form.new_password_confirm(class=("has-error" if form.new_password_confirm.name in form.errors else "")) }}
+		{{ form.new_password_confirm(class=("has-error" if form.new_password_confirm.name in form.errors else ""), autocomplete="new-password") }}
 	</div>
 	<div class="box warning">
 		<header>{% trans %}Warning{% endtrans %}</header>
 		<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 %}