clear storage on logout

* Add support for config from /.well-known/matrix/client

* final fixes, refactoring, updated readme

.github/CONTRIBUTING.md

@@ -1,16 +0,0 @@
-# Contributing to [etkecc/synapse-admin](https://github.com/etkecc/synapse-admin)
-
-While etke.cc fork is intended to accept more QoL changes and features, 
-it's good idea to open PR into the upstream repo: [Awesome-Technologies/Synapse-Admin](https://github.com/Awesome-Technologies/synapse-admin).
-
-1. Use the etkecc/synapse-admin **master** branch as your branch upstream: `git checkout master; git pull; git checkout -b my-new-feature`
-2. Once your changes are ready, please, open **2** PRs: one from your branch to `Awesome-Technologies/Synapse-Admin` **master**, and another one to `etkecc/synapse-admin` **main**
-3. Once PR is accepted in the `etkecc/synapse-admin`, update `README.md` file (either directly in the `main` branch, or via another PR) to add link to the merged PR in the [Fork differences](https://github.com/etkecc/synapse-admin#fork-differences) section
-
-### Why?
-
-The upstream project may not want to accept all the changes, so to ensure they are not lost, we will gladly add them to the etke.cc fork.
-Unfortunately, it's challenging to keep changes separated, so to avoid messing upstream and fork changes (e.g., CI changes that should not be pushed to the upstream, as they intended for this fork specifically), there are 2 branches:
-
-* `master` - read-only copy of upstream's master branch to easily sync changes, and use it as base for new PRs
-* `main` - fork-own branch with all changes

.github/dependabot.yml

@@ -0,0 +1,19 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 10
+
+  - package-ecosystem: "docker"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 10
+
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 10

.github/workflows/workflow.yml

@@ -25,10 +25,6 @@ jobs:
           cache: yarn
       - name: Install dependencies
         run: yarn install --immutable --network-timeout=300000
-      - name: Set version into manifest.json
-        run: |
-          TAG=$(git describe --tags --abbrev=0 || echo "latest")
-          sed -i "s|\"icons\"|\"version\": \"$TAG\",\\n  \"icons\"|g" public/manifest.json
       - name: Build
         run: yarn build --base=${{ env.base_path }}
       - uses: actions/upload-artifact@v4
@@ -52,7 +48,7 @@ jobs:
           name: dist
           path: dist/
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v3
       - name: Login to ghcr.io
         uses: docker/login-action@v3
         with:

.gitignore

@@ -191,3 +191,6 @@ sketch
 # .pnp.*
 
 # End of https://www.toptal.com/developers/gitignore/api/node,yarn,react,visualstudiocode
+
+/testdata/synapse.data
+/testdata/postgres.data

.vscode/settings.json

@@ -5,6 +5,6 @@
   },
   "eslint.nodePath": ".yarn/sdks",
   "prettier.prettierPath": ".yarn/sdks/prettier/index.cjs",
-  "typescript.tsdk": ".yarn/sdks/typescript/lib",
+  "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true
 }

.watchmanconfig

@@ -0,0 +1,5 @@
+{
+    "ignore_dirs": [
+        "testdata"
+    ]
+}

.yarnrc.yml

@@ -1 +0,0 @@
-yarnPath: .yarn/releases/yarn-4.1.1.cjs

README.md

@@ -1,26 +1,59 @@
-[![GitHub license](https://img.shields.io/github/license/Awesome-Technologies/synapse-admin)](https://github.com/Awesome-Technologies/synapse-admin/blob/master/LICENSE)
+<p align="center">
-[![Build Status](https://api.travis-ci.com/Awesome-Technologies/synapse-admin.svg?branch=master)](https://app.travis-ci.com/github/Awesome-Technologies/synapse-admin)
+  <img alt="Synapse Admin Logo" src="./public/images/logo.webp" height="140" />
-[![build-test](https://github.com/Awesome-Technologies/synapse-admin/actions/workflows/build-test.yml/badge.svg)](https://github.com/Awesome-Technologies/synapse-admin/actions/workflows/build-test.yml)
+  <h3 align="center">
-[![gh-pages](https://github.com/Awesome-Technologies/synapse-admin/actions/workflows/edge_ghpage.yml/badge.svg)](https://awesome-technologies.github.io/synapse-admin/)
+    Synapse Admin<br>
-[![docker-release](https://github.com/Awesome-Technologies/synapse-admin/actions/workflows/docker-release.yml/badge.svg)](https://hub.docker.com/r/awesometechnologies/synapse-admin)
+    <a href="https://matrix.to/#/#synapse-admin:etke.cc">
-[![github-release](https://github.com/Awesome-Technologies/synapse-admin/actions/workflows/github-release.yml/badge.svg)](https://github.com/Awesome-Technologies/synapse-admin/releases)
+      <img alt="Community room" src="https://img.shields.io/badge/room-community_room-green?logo=matrix&label=%23synapse-admin%3Aetke.cc">
+    </a><br>
+    <img alt="License" src="https://img.shields.io/github/license/etkecc/synapse-admin">
+  </h3>
+  <p align="center">Manager your Synapse homeserver with ease</p>
+</p>
 
-# Synapse admin ui
+---
+
+![Screenshots](./screenshots.jpg)
 
 This project is built using [react-admin](https://marmelab.com/react-admin/).
 
+<!-- vim-markdown-toc GFM -->
+
+* [Fork differences](#fork-differences)
+  * [Availability](#availability)
+  * [Changes](#changes)
+  * [Development](#development)
+* [Configuration](#configuration)
+  * [Restricting available homeserver](#restricting-available-homeserver)
+  * [Protecting appservice managed users](#protecting-appservice-managed-users)
+  * [Adding custom menu items](#adding-custom-menu-items)
+  * [Providing support URL](#providing-support-url)
+* [Usage](#usage)
+  * [Supported Synapse](#supported-synapse)
+  * [Prerequisites](#prerequisites)
+  * [Use without install](#use-without-install)
+  * [Step-By-Step install](#step-by-step-install)
+    * [Steps for 1)](#steps-for-1)
+    * [Steps for 2)](#steps-for-2)
+    * [Steps for 3)](#steps-for-3)
+  * [Serving Synapse Admin on a different path](#serving-synapse-admin-on-a-different-path)
+* [Development](#development-1)
+
+<!-- vim-markdown-toc -->
+
 ## Fork differences
 
-### Available via CDN
-
-On [admin.etke.cc](https://admin.etke.cc) you can find the latest version of this fork.
-
-### Changes
-
 With [Awesome-Technologies/synapse-admin](https://github.com/Awesome-Technologies/synapse-admin) as the upstream, this
 fork is intended to be a more feature-rich version of the original project. The main goal is to provide a more
 user-friendly interface for managing Synapse homeservers.
 
+### Availability
+
+* As a core/default component on [etke.cc](https://etke.cc/?utm_source=github&utm_medium=readme&utm_campaign=synapse-admin)
+* Via CDN on [admin.etke.cc](https://admin.etke.cc)
+* As a component in [Matrix-Docker-Ansible-Deploy Playbook](https://github.com/spantaleev/matrix-docker-ansible-deploy/blob/master/docs/configuring-playbook-synapse-admin.md)
+
+### Changes
+
 The following changes are already implemented:
 
 * [Prevent admins from deleting themselves](https://github.com/etkecc/synapse-admin/pull/1)
@@ -33,17 +66,188 @@ The following changes are already implemented:
 * [Fix redirect URL after user creation](https://github.com/etkecc/synapse-admin/pull/16)
 * [Display actual Synapse errors](https://github.com/etkecc/synapse-admin/pull/17)
 * [Fix base_url being undefined on unsuccessful login](https://github.com/etkecc/synapse-admin/pull/18)
-* [Put the version into manifest.json](https://github.com/Awesome-Technologies/synapse-admin/issues/507) (CI only)
+* [Put the version into manifest.json](https://github.com/Awesome-Technologies/synapse-admin/issues/507) (later replaced
-* [Federation page improvements](https://github.com/Awesome-Technologies/synapse-admin/pull/583) (using theme colors)
+with a proper manifest.json generation on build)
+* [Federation page improvements](https://github.com/Awesome-Technologies/synapse-admin/pull/583) (using icons)
 * [Add UI option to block deleted rooms from being rejoined](https://github.com/etkecc/synapse-admin/pull/26)
+* [Fix required fields check on Bulk registration CSV upload](https://github.com/etkecc/synapse-admin/pull/32)
+* [Fix requests with invalid MXIDs on Bulk registration](https://github.com/etkecc/synapse-admin/pull/33)
+* [Expose user avatar URL field in the UI](https://github.com/etkecc/synapse-admin/pull/27)
+* [Upgrade react-admin to v5](https://github.com/etkecc/synapse-admin/pull/40)
+* [Restrict actions on specific users](https://github.com/etkecc/synapse-admin/pull/42)
+* [Add `Contact support` menu item](https://github.com/etkecc/synapse-admin/pull/45)
+* [Provide options to delete media and redact events on user erase](https://github.com/etkecc/synapse-admin/pull/49)
+* [Authenticated Media support](https://github.com/etkecc/synapse-admin/pull/51)
+* [Better media preview/download](https://github.com/etkecc/synapse-admin/pull/53)
+* [Login with access token](https://github.com/etkecc/synapse-admin/pull/58)
+* [Fix footer causing vertical scrollbar](https://github.com/etkecc/synapse-admin/pull/60)
+* [Custom Menu Items](https://github.com/etkecc/synapse-admin/pull/79)
+* [Add user profile to the top menu](https://github.com/etkecc/synapse-admin/pull/80)
+* [Enable visual customization](https://github.com/etkecc/synapse-admin/pull/81)
+* [Fix room state events display](https://github.com/etkecc/synapse-admin/pull/100)
+* [Sanitize CSV on import](https://github.com/etkecc/synapse-admin/pull/101)
+* Allow setting version using `SYNAPSE_ADMIN_VERSION` environment variable on build (if git is not available)
+* [Add option to control user's experimental features](https://github.com/etkecc/synapse-admin/pull/111)
+* [Add random password generation on user create/edit form](https://github.com/etkecc/synapse-admin/pull/123)
+* [Add option to set user's rate limits](https://github.com/etkecc/synapse-admin/pull/125)
+* [Support configuration via /.well-known/matrix/client](https://github.com/etkecc/synapse-admin/pull/126)
 
 _the list will be updated as new changes are added_
 
+### Development
+
+`just run-dev` to start the development stack (depending on your system speed, you may want to re-run this command if
+   user creation fails)
+
+After that open `http://localhost:5173` in your browser, login using the following credentials:
+
+* Login: admin
+* Password: admin
+* Homeserver URL: http://localhost:8008
+
+## Configuration
+
+You can use `config.json` file to configure Synapse Admin instance,
+and `/.well-known/matrix/client` file to provide Synapse Admin configuration specifically for your homeserver.
+In the latter case, any instance of Synapse Admin will automatically pick up the configuration from the homeserver.
+Note that configuration inside the `/.well-known/matrix/client` file should go under the `cc.etke.synapse-admin` key,
+and it will override the configuration from the `config.json` file.
+
+The `config.json` can be injected into a Docker container using a bind mount.
+
+```yml
+services:
+  synapse-admin:
+    ...
+    volumes:
+      ./config.json:/app/config.json:ro
+    ...
+```
+
+### Restricting available homeserver
+
+You can restrict the homeserver(s), so that the user can no longer define it himself.
+
+Edit `config.json` to restrict either to a single homeserver:
+
+```json
+{
+  "restrictBaseUrl": "https://your-matrixs-erver.example.com"
+}
+```
+
+similar for `/.well-known/matrix/client`:
+
+```json
+{
+  "cc.etke.synapse-admin": {
+    "restrictBaseUrl": "https://your-matrixs-erver.example.com"
+  }
+}
+```
+
+or to a list of homeservers:
+
+```json
+{
+  "restrictBaseUrl": ["https://your-first-matrix-server.example.com", "https://your-second-matrix-server.example.com"]
+}
+```
+
+similar for `/.well-known/matrix/client`:
+
+```json
+{
+  "cc.etke.synapse-admin": {
+    "restrictBaseUrl": ["https://your-first-matrix-server.example.com", "https://your-second-matrix-server.example.com"]
+  }
+}
+```
+
+### Protecting appservice managed users
+
+To avoid accidental adjustments of appservice-managed users (e.g., puppets created by a bridge) and breaking the bridge,
+you can specify the list of MXIDs (regexp) that should be prohibited from any changes, except display name and avatar.
+
+Example for [mautrix-telegram](https://github.com/mautrix/telegram)
+
+```json
+{
+  "asManagedUsers": ["^@telegram_[a-zA-Z0-9]+:example\\.com$"]
+}
+```
+
+similar for `/.well-known/matrix/client`:
+
+```json
+{
+  "cc.etke.synapse-admin": {
+    "asManagedUsers": ["^@telegram_[a-zA-Z0-9]+:example\\.com$"]
+  }
+}
+```
+
+### Adding custom menu items
+
+You can add custom menu items to the main menu by providing a `menu` array in the `config.json`.
+
+```json
+{
+  "menu": [
+    {
+      "label": "Contact support",
+      "icon": "SupportAgent",
+      "url": "https://github.com/etkecc/synapse-admin/issues"
+    }
+  ]
+}
+```
+
+similar for `/.well-known/matrix/client`:
+
+```json
+{
+  "cc.etke.synapse-admin": {
+    "menu": [
+      {
+        "label": "Contact support",
+        "icon": "SupportAgent",
+        "url": "https://github.com/etkecc/synapse-admin/issues"
+      }
+    ]
+  }
+}
+```
+
+Where `icon` is one of the [preloaded icons](./src/components/icons.ts)
+
+### Providing support URL
+
+**Deprecated**: use `menu` config option described above. Automatically migrated to the `menu` if the `supportURL` is present.
+
+~~Synapse Admin provides a support link in the main menu - `Contact support`. By default, the link points to the GitHub issues page of the project. You can change this link by providing a `supportURL` in the `config.json`.~~
+
+```json
+{
+  "supportURL": "https://example.com/support"
+}
+```
+
+similar for `/.well-known/matrix/client`:
+
+```json
+{
+  "cc.etke.synapse-admin": {
+    "supportURL": "https://example.com/support"
+  }
+}
+```
+
 ## Usage
 
 ### Supported Synapse
 
-It needs at least [Synapse](https://github.com/element-hq/synapse) v1.93.0 for all functions to work as expected!
+It needs at least [Synapse](https://github.com/element-hq/synapse) v1.116.0 for all functions to work as expected!
 
 You get your server version with the request `/_synapse/admin/v1/server_version`.
 See also [Synapse version API](https://element-hq.github.io/synapse/latest/admin_api/version_api.html).
@@ -62,7 +266,7 @@ See also [Synapse administration endpoints](https://element-hq.github.io/synapse
 ### Use without install
 
 You can use the current version of Synapse Admin without own installation direct
-via [GitHub Pages](https://awesome-technologies.github.io/synapse-admin/).
+via [admin.etke.cc](https://admin.etke.cc).
 
 **Note:**
 If you want to use the deployment, you have to make sure that the admin endpoints (`/_synapse/admin`) are accessible for your browser.
@@ -81,22 +285,22 @@ You have three options:
 
 - make sure you have a webserver installed that can serve static files (any webserver like nginx or apache will do)
 - configure a vhost for synapse admin on your webserver
-- download the .tar.gz from the latest release: https://github.com/Awesome-Technologies/synapse-admin/releases/latest
+- download the .tar.gz [from the latest release](https://github.com/etkecc/synapse-admin/releases/latest)
 - unpack the .tar.gz
-- move or symlink the `synapse-admin-x.x.x` into your vhosts root dir
+- move or symlink the `synapse-admin` into your vhosts root dir
 - open the url of the vhost in your browser
 
 #### Steps for 2)
 
 - make sure you have installed the following: git, yarn, nodejs
-- download the source code: `git clone https://github.com/Awesome-Technologies/synapse-admin.git`
+- download the source code: `git clone https://github.com/etkecc/synapse-admin.git`
 - change into downloaded directory: `cd synapse-admin`
 - download dependencies: `yarn install`
 - start web server: `yarn start`
 
 #### Steps for 3)
 
-- run the Docker container from the public docker registry: `docker run -p 8080:80 awesometechnologies/synapse-admin` or use the [docker-compose.yml](docker-compose.yml): `docker-compose up -d`
+- run the Docker container from the public docker registry: `docker run -p 8080:80 ghcr.io/etkecc/synapse-admin` or use the [docker-compose.yml](docker-compose.yml): `docker-compose up -d`
 
   > note: if you're building on an architecture other than amd64 (for example a raspberry pi), make sure to define a maximum ram for node. otherwise the build will fail.
 
@@ -106,7 +310,7 @@ You have three options:
       container_name: synapse-admin
       hostname: synapse-admin
       build:
-        context: https://github.com/Awesome-Technologies/synapse-admin.git
+        context: https://github.com/etkecc/synapse-admin.git
         args:
           - BUILDKIT_CONTEXT_KEEP_GIT_DIR=1
         #   - NODE_OPTIONS="--max_old_space_size=1024"
@@ -118,38 +322,7 @@ You have three options:
 
 - browse to http://localhost:8080
 
-### Restricting available homeserver
+### Serving Synapse Admin on a different path
-
-You can restrict the homeserver(s), so that the user can no longer define it himself.
-
-Edit `config.json` to restrict either to a single homeserver:
-
-```json
-{
-  "restrictBaseUrl": "https://your-matrixs-erver.example.com"
-}
-```
-
-or to a list of homeservers:
-
-```json
-{
-  "restrictBaseUrl": ["https://your-first-matrix-server.example.com", "https://your-second-matrix-server.example.com"]
-}
-```
-
-The `config.json` can be injected into a Docker container using a bind mount.
-
-```yml
-services:
-  synapse-admin:
-    ...
-    volumes:
-      ./config.json:/app/config.json:ro
-    ...
-```
-
-### Serving Synapse-Admin on a different path
 
 The path prefix where synapse-admin is served can only be changed during the build step.
 
@@ -157,7 +330,7 @@ If you downloaded the source code, use `yarn build --base=/my-prefix` to set a p
 
 If you want to build your own Docker container, use the `BASE_PATH` argument.
 
-We do not support directly changing the path where Synapse-Admin is served in the pre-built Docker container. Instead please use a reverse proxy if you need to move Synapse-Admin to a different base path. If you want to serve multiple applications with different paths on the same domain, you need a reverse proxy anyway.
+We do not support directly changing the path where Synapse Admin is served in the pre-built Docker container. Instead please use a reverse proxy if you need to move Synapse Admin to a different base path. If you want to serve multiple applications with different paths on the same domain, you need a reverse proxy anyway.
 
 Example for Traefik:
 
@@ -175,7 +348,7 @@ services:
       - /var/run/docker.sock:/var/run/docker.sock:ro
 
   synapse-admin:
-    image: awesometechnologies/synapse-admin:latest
+    image: etkecc/synapse-admin:latest
     restart: unless-stopped
     labels:
       - "traefik.enable=true"
@@ -186,10 +359,6 @@ services:
       - "traefik.http.middlewares.admin_path.stripprefix.prefixes=/admin"
 ```
 
-## Screenshots
-
-![Screenshots](./screenshots.jpg)
-
 ## Development
 
 - See https://yarnpkg.com/getting-started/editor-sdks how to setup your IDE

docker-compose-dev.yml

@@ -0,0 +1,20 @@
+services:
+  synapse:
+    image: ghcr.io/element-hq/synapse:latest
+    entrypoint: python
+    command: "-m synapse.app.homeserver -c /config/homeserver.yaml"
+    ports:
+    - "8008:8008"
+    volumes:
+    - ./testdata/synapse:/config
+    - ./testdata/synapse.data:/media-store
+
+  postgres:
+    image: postgres:alpine
+    volumes:
+    - ./testdata/postgres.data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_USER: synapse
+      POSTGRES_PASSWORD: synapse
+      POSTGRES_DB: synapse
+      POSTGRES_INITDB_ARGS: "--lc-collate C --lc-ctype C --encoding UTF8"

index.html

@@ -4,17 +4,14 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
+    <meta name="description" content="Synapse Admin" />
-      name="description"
-      content="Synapse-Admin"
-    />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="./manifest.json" />
     <link rel="shortcut icon" href="./favicon.ico" />
-    <title>Synapse-Admin</title>
+    <title>Synapse Admin</title>
     <style>
       body {
         margin: 0;
@@ -22,6 +19,11 @@
         font-family: sans-serif;
       }
 
+      .layout {
+        min-height: 90vh !important;
+        height: 90vh;
+      }
+
       .loader-container {
         display: flex;
         align-items: center;
@@ -120,13 +122,7 @@
       </div>
     </div>
     <script type="module" src="/src/index.tsx"></script>
-    <footer
+    <span id="js-version" style="display: none;"></span>
-      style="position: relative; z-index: 2; height: 2em; margin-top: 0; line-height: 2em; background-color: #eee; border: 0.5px solid #ddd">
-      <a id="copyright" href="https://github.com/etkecc/synapse-admin"
-        style="margin-left: 1em; color: #888; font-family: Roboto, Helvetica, Arial, sans-serif; font-weight: 100; font-size: 0.8em; text-decoration: none;">
-        Synapse-Admin <b><span id="version"></span></b> by Awesome Technologies Innovationslabor GmbH
-      </a>
-    </footer>
   </body>
-  <script>document.getElementById("version").textContent = __SYNAPSE_ADMIN_VERSION__</script>
+  <script>document.getElementById("js-version").textContent = __SYNAPSE_ADMIN_VERSION__</script>
 </html>

justfile

@@ -6,8 +6,37 @@ default:
 build: __install
     @yarn run build --base=./
 
+# run the app in a development mode
+run:
+    @yarn start --host 0.0.0.0
+
+# run dev stack and start the app in a development mode
+run-dev:
+    @echo "Starting the database..."
+    @docker-compose -f docker-compose-dev.yml up -d postgres
+    @echo "Starting Synapse..."
+    @docker-compose -f docker-compose-dev.yml up -d synapse
+    @echo "Ensure admin user is registered..."
+    @docker-compose -f docker-compose-dev.yml exec synapse register_new_matrix_user --admin -u admin -p admin -c /config/homeserver.yaml http://localhost:8008 || true
+    @echo "Starting the app..."
+    @yarn start --host 0.0.0.0
+
+# stop the dev stack
+stop-dev:
+    @docker-compose -f docker-compose-dev.yml stop
+
+# register a user in the dev stack
+register-user localpart password *admin:
+	docker-compose exec synapse register_new_matrix_user {{ if admin == "1" {"--admin"} else {"--no-admin"} }} -u {{ localpart }} -p {{ password }} -c /config/homeserver.yaml http://localhost:8008
+
+# run yarn {fix,lint,test} commands
+test:
+    @-yarn run fix
+    @-yarn run lint
+    @-yarn run test
+
 # run the app in a production mode
-run: build
+run-prod: build
     @python -m http.server -d dist 1313
 
 # install the project

package.json

@@ -3,78 +3,77 @@
   "version": "0.10.3",
   "description": "Admin GUI for the Matrix.org server Synapse",
   "type": "module",
-  "author": "Awesome Technologies Innovationslabor GmbH",
+  "author": "etke.cc (originally by Awesome Technologies Innovationslabor GmbH)",
   "license": "Apache-2.0",
   "homepage": ".",
   "repository": {
     "type": "git",
     "url": "https://github.com/etkecc/synapse-admin"
   },
-  "packageManager": "yarn@4.1.1",
   "devDependencies": {
-    "@eslint/js": "^9.7.0",
+    "@eslint/js": "^9.13.0",
     "@testing-library/dom": "^10.0.0",
-    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.14",
-    "@types/lodash": "^4.17.7",
+    "@types/lodash": "^4.17.13",
-    "@types/node": "^20.14.12",
+    "@types/node": "^22.8.7",
-    "@types/papaparse": "^5.3.14",
+    "@types/papaparse": "^5.3.15",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.12",
-    "@typescript-eslint/eslint-plugin": "^7.16.1",
+    "@typescript-eslint/eslint-plugin": "^8.11.0",
-    "@typescript-eslint/parser": "^7.16.1",
+    "@typescript-eslint/parser": "^8.11.0",
-    "@vitejs/plugin-react": "^4.0.0",
+    "@vitejs/plugin-react": "^4.3.3",
-    "eslint": "^8.57.0",
+    "eslint": "^9.13.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-unused-imports": "^3.2.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
     "eslint-plugin-yaml": "^1.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "prettier": "^3.3.3",
     "react-test-renderer": "^18.3.1",
-    "ts-jest": "^29.2.3",
+    "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.5",
+    "typescript": "^5.6.3",
-    "typescript-eslint": "^7.16.1",
+    "typescript-eslint": "^8.12.2",
-    "vite": "^5.3.4",
+    "vite": "^5.4.10",
-    "vite-plugin-version-mark": "^0.1.0"
+    "vite-plugin-version-mark": "^0.1.2"
   },
   "dependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@haleos/ra-language-german": "^1.0.0",
     "@haxqer/ra-language-chinese": "^4.16.2",
-    "@mui/icons-material": "^5.16.4",
+    "@mui/icons-material": "^6.1.5",
-    "@mui/material": "^5.16.4",
+    "@mui/material": "^6.1.6",
+    "@mui/utils": "^5.16.6",
+    "@tanstack/react-query": "^5.59.19",
     "history": "^5.3.0",
     "lodash": "^4.17.21",
     "papaparse": "^5.4.1",
-    "query-string": "^7.1.3",
+    "ra-core": "^5.3.2",
-    "ra-core": "^4.16.20",
+    "ra-i18n-polyglot": "^5.3.2",
-    "ra-i18n-polyglot": "^4.16.20",
+    "ra-language-english": "^5.3.2",
-    "ra-language-english": "^4.16.20",
+    "ra-language-farsi": "^5.0.0",
-    "ra-language-farsi": "^4.2.0",
+    "ra-language-french": "^5.3.1",
-    "ra-language-french": "^4.16.20",
     "ra-language-italian": "^3.13.1",
     "ra-language-russian": "^4.14.2",
     "react": "^18.3.1",
-    "react-admin": "^4.16.20",
+    "react-admin": "^5.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.52.1",
+    "react-hook-form": "^7.53.1",
     "react-is": "^18.3.1",
-    "react-query": "^3.39.3",
+    "react-router": "^6.26.2",
-    "react-router": "^6.25.1",
+    "react-router-dom": "^6.27.0"
-    "react-router-dom": "^6.25.1"
   },
   "scripts": {
     "start": "vite serve",
     "build": "vite build",
-    "lint": "eslint --ignore-path .gitignore --ext .ts,.tsx,.yml,.yaml .",
+    "lint": "ESLINT_USE_FLAT_CONFIG=false eslint --ignore-path .gitignore --ignore-pattern testdata/ --ext .ts,.tsx,.yml,.yaml .",
     "fix": "yarn lint --fix",
     "test": "yarn jest",
     "test:watch": "yarn jest --watch"

public/manifest.json

@@ -1,15 +0,0 @@
-{
-  "short_name": "Synapse-Admin",
-  "name": "Synapse-Admin",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

src/App.test.tsx

@@ -1,4 +1,6 @@
 import { render, screen } from "@testing-library/react";
+import fetchMock from "jest-fetch-mock";
+fetchMock.enableMocks();
 
 import App from "./App";
 

src/App.tsx

@@ -4,6 +4,7 @@ import polyglotI18nProvider from "ra-i18n-polyglot";
 import { Admin, CustomRoutes, Resource, resolveBrowserLocale } from "react-admin";
 import { Route } from "react-router-dom";
 
+import { AdminLayout } from "./components/AdminLayout";
 import { ImportFeature } from "./components/ImportFeature";
 import germanMessages from "./i18n/de";
 import englishMessages from "./i18n/en";
@@ -21,6 +22,8 @@ import userMediaStats from "./resources/user_media_statistics";
 import users from "./resources/users";
 import authProvider from "./synapse/authProvider";
 import dataProvider from "./synapse/dataProvider";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import Footer from "./components/Footer";
 
 // TODO: Can we use lazy loading together with browser locale?
 const messages = {
@@ -45,15 +48,18 @@ const i18nProvider = polyglotI18nProvider(
   ]
 );
 
+const queryClient = new QueryClient();
+
 const App = () => (
+  <QueryClientProvider client={queryClient}>
     <Admin
       disableTelemetry
       requireAuth
+      layout={AdminLayout}
       loginPage={LoginPage}
       authProvider={authProvider}
       dataProvider={dataProvider}
       i18nProvider={i18nProvider}
-    darkTheme={{ palette: { mode: "dark" } }}
     >
       <CustomRoutes>
         <Route path="/import_users" element={<ImportFeature />} />
@@ -76,6 +82,8 @@ const App = () => (
       <Resource name="room_state" />
       <Resource name="destination_rooms" />
     </Admin>
+    <Footer />
+  </QueryClientProvider>
 );
 
 export default App;

src/AppContext.tsx

@@ -1,9 +1,6 @@
 import { createContext, useContext } from "react";
-
+import { Config } from "./components/config";
-interface AppContextType {
-  restrictBaseUrl: string | string[];
-}
 
 export const AppContext = createContext({});
 
-export const useAppContext = () => useContext(AppContext) as AppContextType;
+export const useAppContext = () => useContext(AppContext) as Config;

src/components/AdminLayout.tsx

@@ -0,0 +1,103 @@
+import { AppBar, TitlePortal, InspectorButton, Confirm, Layout, Logout, Menu, useLogout, UserMenu } from "react-admin";
+import { LoginMethod } from "../pages/LoginPage";
+import { useEffect, useState, Suspense } from "react";
+import { Icons, DefaultIcon } from "./icons";
+import { ClearConfig } from "./config";
+
+const AdminUserMenu = () => {
+  const [open, setOpen] = useState(false);
+  const logout = useLogout();
+  const checkLoginType = (ev: React.MouseEvent<HTMLDivElement>) => {
+    const loginType: LoginMethod = (localStorage.getItem("login_type") || "credentials") as LoginMethod;
+    if (loginType === "accessToken") {
+      ev.stopPropagation();
+      setOpen(true);
+    }
+  };
+
+  const handleConfirm = () => {
+    setOpen(false);
+    logout();
+  };
+
+  const handleDialogClose = () => {
+    setOpen(false);
+    ClearConfig();
+    window.location.reload();
+  };
+
+  return (
+    <UserMenu>
+      <div onClickCapture={checkLoginType}>
+        <Logout />
+      </div>
+      <Confirm
+        isOpen={open}
+        title="synapseadmin.auth.logout_acces_token_dialog.title"
+        content="synapseadmin.auth.logout_acces_token_dialog.content"
+        onConfirm={handleConfirm}
+        onClose={handleDialogClose}
+        confirm="synapseadmin.auth.logout_acces_token_dialog.confirm"
+        cancel="synapseadmin.auth.logout_acces_token_dialog.cancel"
+      />
+    </UserMenu>
+  );
+};
+
+const AdminAppBar = () => {
+  return (<AppBar userMenu={<AdminUserMenu />}>
+    <TitlePortal />
+    <InspectorButton />
+  </AppBar>);
+};
+
+const AdminMenu = (props) => {
+  const [menu, setMenu] = useState([]);
+
+  useEffect(() => {
+    const menuConfig = localStorage.getItem('menu');
+    if (menuConfig) {
+      try {
+        setMenu(JSON.parse(menuConfig));
+      } catch (e) {
+        console.error('Error parsing menu configuration', e);
+      }
+    }
+  }, []);
+
+  return (
+    <Menu {...props}>
+      <Menu.ResourceItems />
+      {menu.map((item, index) => {
+        const { url, icon, label } = item;
+        const IconComponent = Icons[icon] as React.ComponentType<any> | undefined;
+
+        return (
+          <Suspense key={index}>
+            <Menu.Item
+              to={url}
+              target="_blank"
+              primaryText={label}
+              leftIcon={IconComponent ? <IconComponent /> : <DefaultIcon />}
+              onClick={props.onMenuClick}
+            />
+          </Suspense>
+        );
+      })}
+    </Menu>
+  );
+};
+
+export const AdminLayout = ({ children }) => (
+  <Layout appBar={AdminAppBar} menu={AdminMenu} sx={{
+      ['& .RaLayout-appFrame']: {
+        minHeight: '90vh',
+        height: '90vh',
+      },
+      ['& .RaLayout-content']: {
+        marginBottom: '3rem',
+      },
+    }}>
+    {children}
+  </Layout>
+);

src/components/AvatarField.test.tsx

@@ -1,18 +1,43 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { RecordContextProvider } from "react-admin";
-
+import { act } from "react";
 import AvatarField from "./AvatarField";
 
 describe("AvatarField", () => {
-  it("shows image", () => {
+  beforeEach(() => {
+    // Mock fetch
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        blob: () => Promise.resolve(new Blob(["mock image data"], { type: 'image/jpeg' })),
+      })
+    ) as jest.Mock;
+
+    // Mock URL.createObjectURL
+    global.URL.createObjectURL = jest.fn(() => "mock-object-url");
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it.only("shows image", async () => {
     const value = {
-      avatar: "foo",
+      avatar: "mxc://serverName/mediaId",
     };
+
+    await act(async () => {
       render(
         <RecordContextProvider value={value}>
           <AvatarField source="avatar" />
         </RecordContextProvider>
       );
-    expect(screen.getByRole("img").getAttribute("src")).toBe("foo");
+    });
+
+    await waitFor(() => {
+      const img = screen.getByRole("img");
+      expect(img.getAttribute("src")).toBe("mock-object-url");
+    });
+
+    expect(global.fetch).toHaveBeenCalled();
   });
 });

src/components/AvatarField.tsx

@@ -1,12 +1,36 @@
 import { get } from "lodash";
+import { Avatar, AvatarProps } from "@mui/material";
+import { FieldProps, useRecordContext } from "react-admin";
+import { useState, useEffect, useCallback } from "react";
+import { fetchAuthenticatedMedia } from "../utils/fetchMedia";
 
-import { Avatar } from "@mui/material";
+const AvatarField = ({ source, ...rest }: AvatarProps & FieldProps) => {
-import { useRecordContext } from "react-admin";
-
-const AvatarField = ({ source, ...rest }) => {
-  const record = useRecordContext(rest);
-  const src = get(record, source)?.toString();
   const { alt, classes, sizes, sx, variant } = rest;
+  const record = useRecordContext(rest);
+  const mxcURL = get(record, source)?.toString();
+
+  const [src, setSrc] = useState<string>("");
+
+  const fetchAvatar = useCallback(async (mxcURL: string) => {
+    const response = await fetchAuthenticatedMedia(mxcURL, "thumbnail");
+    const blob = await response.blob();
+    const blobURL = URL.createObjectURL(blob);
+    setSrc(blobURL);
+  }, []);
+
+  useEffect(() => {
+    if (mxcURL) {
+      fetchAvatar(mxcURL);
+    }
+
+    // Cleanup function to revoke the object URL
+    return () => {
+      if (src) {
+        URL.revokeObjectURL(src);
+      }
+    };
+  }, [mxcURL, fetchAvatar]);
+
   return <Avatar alt={alt} classes={classes} sizes={sizes} src={src} sx={sx} variant={variant} />;
 };
 

src/components/DeleteRoomButton.tsx

@@ -16,7 +16,7 @@ const resourceName = "rooms";
 const DeleteRoomButton: React.FC<DeleteRoomButtonProps> = (props) => {
   const translate = useTranslate();
   const [open, setOpen] = useState(false);
-  const [block, setBlock] = useState(true);
+  const [block, setBlock] = useState(false);
 
   const notify = useNotify();
   const redirect = useRedirect();
@@ -74,12 +74,11 @@ const DeleteRoomButton: React.FC<DeleteRoomButtonProps> = (props) => {
           <DialogContentText>{translate(props.confirmContent)}</DialogContentText>
           <SimpleForm toolbar={false}>
             <BooleanInput
-              fullWidth
               source="block"
               value={block}
               onChange={(event: React.ChangeEvent<HTMLInputElement>) => setBlock(event.target.checked)}
               label="resources.rooms.action.erase.fields.block"
-              defaultValue={true}
+              defaultValue={false}
             />
           </SimpleForm>
         </DialogContent>

src/components/DeleteUserButton.tsx

@@ -0,0 +1,117 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
+import { Fragment, useState } from "react";
+import { SimpleForm, BooleanInput, useTranslate, RaRecord, useNotify, useRedirect, useDelete, NotificationType, useDeleteMany, Identifier, useUnselectAll } from "react-admin";
+import ActionDelete from "@mui/icons-material/Delete";
+import ActionCheck from "@mui/icons-material/CheckCircle";
+import AlertError from "@mui/icons-material/ErrorOutline";
+
+interface DeleteUserButtonProps {
+  selectedIds: Identifier[];
+  confirmTitle: string;
+  confirmContent: string;
+}
+
+const resourceName = "users";
+
+const DeleteUserButton: React.FC<DeleteUserButtonProps> = (props) => {
+  const translate = useTranslate();
+  const [open, setOpen] = useState(false);
+  const [deleteMedia, setDeleteMedia] = useState(false);
+  const [redactEvents, setRedactEvents] = useState(false);
+
+  const notify = useNotify();
+  const redirect = useRedirect();
+
+  const [deleteMany, { isLoading }] = useDeleteMany();
+  const unselectAll = useUnselectAll(resourceName);
+  const recordIds = props.selectedIds;
+
+  const handleDialogOpen = () => setOpen(true);
+  const handleDialogClose = () => setOpen(false);
+
+  const handleDelete = (values: {deleteMedia: boolean, redactEvents: boolean}) => {
+    deleteMany(
+      resourceName,
+      { ids: recordIds, meta: values },
+      {
+        onSuccess: () => {
+          notify("ra.notification.deleted", {
+            messageArgs: {
+              smart_count: recordIds.length,
+            },
+            type: 'info' as NotificationType,
+          });
+          handleDialogClose();
+          unselectAll();
+          redirect("/users");
+        },
+        onError: (error) =>
+          notify("ra.notification.data_provider_error", { type: 'error' as NotificationType }),
+      }
+    );
+  };
+
+  const handleConfirm = () => {
+    setOpen(false);
+    handleDelete({ deleteMedia: deleteMedia, redactEvents: redactEvents });
+  };
+
+  return (
+    <Fragment>
+      <Button
+        onClick={handleDialogOpen}
+        disabled={isLoading}
+        className={"ra-delete-button"}
+        key="button"
+        size="small"
+        sx={{
+          "&.MuiButton-sizeSmall": {
+            lineHeight: 1.5,
+          },
+        }}
+        color={"error"}
+        startIcon={<ActionDelete />}
+      >
+        {translate("ra.action.delete")}
+      </Button>
+      <Dialog open={open} onClose={handleDialogClose}>
+        <DialogTitle>{translate(props.confirmTitle)}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>{translate(props.confirmContent)}</DialogContentText>
+          <SimpleForm toolbar={false}>
+            <BooleanInput
+              source="deleteMedia"
+              value={deleteMedia}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) => setDeleteMedia(event.target.checked)}
+              label="resources.users.action.delete_media"
+              defaultValue={false}
+            />
+            <BooleanInput
+              source="redactEvents"
+              value={redactEvents}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) => setRedactEvents(event.target.checked)}
+              label="resources.users.action.redact_events"
+              defaultValue={false}
+            />
+          </SimpleForm>
+        </DialogContent>
+        <DialogActions>
+          <Button disabled={false} onClick={handleDialogClose} startIcon={<AlertError />}>
+            {translate("ra.action.cancel")}
+          </Button>
+          <Button
+            disabled={false}
+            onClick={handleConfirm}
+            className={"ra-confirm RaConfirm-confirmPrimary"}
+            autoFocus
+            startIcon={<ActionCheck />}
+          >
+            {translate("ra.action.confirm")}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Fragment>
+  );
+};
+
+export default DeleteUserButton;

src/components/ExperimentalFeatures.tsx

@@ -0,0 +1,95 @@
+import { useRecordContext } from "react-admin";
+import { useNotify } from "react-admin";
+import { useDataProvider } from "react-admin";
+import { useState, useEffect } from "react";
+import { Stack, Switch, Typography } from "@mui/material";
+import { ExperimentalFeaturesModel, SynapseDataProvider } from "../synapse/dataProvider";
+
+const experimentalFeaturesMap = {
+    msc3881: "enable remotely toggling push notifications for another client",
+    msc3575: "enable experimental sliding sync support",
+};
+const ExperimentalFeatureRow = (props: { featureKey: string, featureValue: boolean, updateFeature: (feature_name: string, feature_value: boolean) => void}) => {
+  const featureKey = props.featureKey;
+  const featureValue = props.featureValue;
+  const featureDescription = experimentalFeaturesMap[featureKey] ?? "";
+  const [checked, setChecked] = useState(featureValue);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+    props.updateFeature(featureKey, event.target.checked);
+  };
+
+  return <Stack
+      direction="row"
+      spacing={2}
+      alignItems="start"
+      sx={{
+          padding: 2,
+      }}
+  >
+    <Switch checked={checked} onChange={handleChange} />
+    <Stack>
+      <Typography
+          variant="subtitle1"
+          sx={{
+              fontWeight: "medium",
+              color: "text.primary"
+          }}
+      >
+          {featureKey}
+      </Typography>
+      <Typography
+          variant="body2"
+          color="text.secondary"
+      >
+          {featureDescription}
+      </Typography>
+    </Stack>
+  </Stack>
+}
+
+export const ExperimentalFeaturesList = () => {
+  const record = useRecordContext();
+  const notify = useNotify();
+  const dataProvider = useDataProvider() as SynapseDataProvider;
+  const [features, setFeatures] = useState({});
+  if (!record) {
+    return null;
+  }
+
+  useEffect(() => {
+    const fetchFeatures = async () => {
+      const features = await dataProvider.getFeatures(record.id);
+      setFeatures(features);
+    }
+
+    fetchFeatures();
+  }, []);
+
+  const updateFeature = async (feature_name: string, feature_value: boolean) => {
+    const updatedFeatures = {...features, [feature_name]: feature_value} as ExperimentalFeaturesModel;
+    setFeatures(updatedFeatures);
+    const reponse = await dataProvider.updateFeatures(record.id, updatedFeatures);
+    notify("ra.notification.updated", {
+        messageArgs: { smart_count: 1 },
+        type: "success",
+    });
+  };
+
+  return <>
+    <Stack
+      direction="column"
+      spacing={1}
+    >
+      {Object.keys(features).map((featureKey: string) =>
+        <ExperimentalFeatureRow
+          key={featureKey}
+          featureKey={featureKey}
+          featureValue={features[featureKey]}
+          updateFeature={updateFeature}
+        />
+      )}
+    </Stack>
+  </>
+}

src/components/Footer.tsx

@@ -0,0 +1,41 @@
+import { Avatar, Box, Link, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+
+const Footer = () => {
+  const [version, setVersion] = useState<string | null>(null);
+  useEffect(() => {
+    const version = document.getElementById("js-version")?.textContent;
+    if (version) {
+      setVersion(version);
+    }
+  }, []);
+
+  return (<Box
+    component="footer"
+    sx={{
+      position: 'fixed',
+      zIndex: 100,
+      bottom: 0,
+      width: '100%',
+      bgcolor: "#eee",
+      borderTop: '1px solid',
+      borderColor: '#ddd',
+      p: 1,
+    }}>
+    <Typography variant="body2" component="div">
+      <Avatar src="./images/logo.webp" sx={{ width: "1rem", height: "1rem", display: "inline-block", verticalAlign: "sub" }} />
+      <Link sx={{ color: "#888", textDecoration: 'none' }} href="https://github.com/etkecc/synapse-admin" target="_blank">
+        Synapse Admin
+      </Link> <Link href={`https://github.com/etkecc/synapse-admin/releases/tag/`+version} target="_blank">
+        <span style={{ fontWeight: 'bold', color: "#000" }}>{version}</span>
+      </Link> <Link sx={{ color: "#888", textDecoration: 'none' }} href="https://etke.cc/?utm_source=synapse-admin&utm_medium=footer&utm_campaign=synapse-admin" target="_blank">
+        by etke.cc
+      </Link> <Link sx={{ color: "#888", textDecoration: 'none' }} href="https://github.com/awesome-technologies/synapse-admin" target="_blank">
+        (originally developed by Awesome Technologies Innovationslabor GmbH).
+      </Link> <Link sx={{ fontWeight: 'bold', color: "#000", textDecoration: 'none' }} href="https://matrix.to/#/#synapse-admin:etke.cc" target="_blank">#synapse-admin:etke.cc</Link>
+    </Typography>
+  </Box>
+  );
+};
+
+export default Footer;

src/components/ImportFeature.tsx

@@ -15,7 +15,7 @@ import {
 import { DataProvider, useTranslate } from "ra-core";
 import { useDataProvider, useNotify, RaRecord, Title } from "react-admin";
 
-import { generateRandomMxId, generateRandomPassword } from "../synapse/synapse";
+import { generateRandomMxId, generateRandomPassword, returnMXID } from "../synapse/synapse";
 
 const LOGGING = true;
 
@@ -74,7 +74,7 @@ const FilePicker = () => {
 
   const [conflictMode, setConflictMode] = useState("stop");
   const [passwordMode, setPasswordMode] = useState(true);
-  const [useridMode, setUseridMode] = useState("ignore");
+  const [useridMode, setUseridMode] = useState("update");
 
   const translate = useTranslate();
   const notify = useNotify();
@@ -121,7 +121,8 @@ const FilePicker = () => {
 
   const verifyCsv = ({ data, meta, errors }: ParseResult<ImportLine>, { setValues, setStats, setError }) => {
     /* First, verify the presence of required fields */
-    const missingFields = expectedFields.filter(eF => meta.fields?.find(mF => eF === mF));
+    meta.fields = meta.fields?.map(f => f.trim().toLowerCase());
+    const missingFields = expectedFields.filter(eF => !meta.fields?.find(mF => eF === mF));
 
     if (missingFields.length > 0) {
       setError(translate("import_users.error.required_field", { field: missingFields[0] }));
@@ -147,6 +148,15 @@ const FilePicker = () => {
     };
 
     const errorMessages = errors.map(e => e.message);
+    // sanitize the data first
+    data = data.map(line => {
+      const newLine = {} as ImportLine;
+      for (const [key, value] of Object.entries(line)) {
+        newLine[key.trim().toLowerCase()] = value;
+      }
+      return newLine;
+    });
+    // process the data
     data.forEach((line, idx) => {
       if (line.user_type === undefined || line.user_type === "") {
         stats.user_types.default++;
@@ -173,6 +183,7 @@ const FilePicker = () => {
           line[f] = true; // we need true booleans instead of strings
         } else {
           if (line[f] !== "false" && line[f] !== "") {
+            console.log("invalid value", line[f], "for field " + f + " in row " + idx);
             errorMessages.push(
               translate("import_users.error.invalid_value", {
                 field: f,
@@ -262,12 +273,15 @@ const FilePicker = () => {
         const userRecord = { ...entry };
         // No need to do a bunch of cryptographic random number getting if
         // we are using neither a generated password nor a generated user id.
-        if (useridMode === "ignore" || userRecord.id === undefined) {
+        if (useridMode === "ignore" || userRecord.id === undefined || userRecord.id === "") {
           userRecord.id = generateRandomMxId();
         }
-        if (passwordMode === false || entry.password === undefined) {
+        if (passwordMode === false || entry.password === undefined || entry.password === "") {
           userRecord.password = generateRandomPassword();
         }
+        // we want to ensure that the ID is always full MXID, otherwise randomly-generated MXIDs will be in the full
+        // form, but the ones from the CSV will be localpart-only.
+        userRecord.id = returnMXID(userRecord.id);
         /* TODO record update stats (especially admin no -> yes, deactivated x -> !x, ... */
 
         /* For these modes we will consider the ID that's in the record.

src/components/LoginFormBox.tsx

@@ -0,0 +1,58 @@
+import { styled } from "@mui/material/styles";
+import { Box } from "@mui/material";
+
+const LoginFormBox = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  minHeight: "calc(100vh - 1rem)",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  background: "url(./images/floating-cogs.svg)",
+  backgroundColor: "#f9f9f9",
+  backgroundRepeat: "no-repeat",
+  backgroundSize: "cover",
+
+  [`& .card`]: {
+    width: "30rem",
+    marginTop: "6rem",
+    marginBottom: "6rem",
+  },
+  [`& .avatar`]: {
+    margin: "1rem",
+    display: "flex",
+    justifyContent: "center",
+  },
+  [`& .icon`]: {
+    backgroundColor: theme.palette.grey[500],
+  },
+  [`& .hint`]: {
+    marginTop: "1em",
+    marginBottom: "1em",
+    display: "flex",
+    justifyContent: "center",
+    color: theme.palette.grey[600],
+  },
+  [`& .form`]: {
+    padding: "0 1rem 1rem 1rem",
+  },
+  [`& .select`]: {
+    marginBottom: "2rem",
+  },
+  [`& .actions`]: {
+    padding: "0 1rem 1rem 1rem",
+  },
+  [`& .serverVersion`]: {
+    color: theme.palette.grey[500],
+    fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+    marginLeft: "0.5rem",
+  },
+  [`& .matrixVersions`]: {
+    color: theme.palette.grey[500],
+    fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+    fontSize: "0.8rem",
+    marginBottom: "1rem",
+    marginLeft: "0.5rem",
+  },
+}));
+
+export default LoginFormBox;

src/components/ServerNotices.tsx

@@ -20,7 +20,7 @@ import {
   useTranslate,
   useUnselectAll,
 } from "react-admin";
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 
 const ServerNoticeDialog = ({ open, onClose, onSubmit }) => {
   const translate = useTranslate();
@@ -43,7 +43,6 @@ const ServerNoticeDialog = ({ open, onClose, onSubmit }) => {
           <TextInput
             source="body"
             label="resources.servernotices.fields.body"
-            fullWidth
             multiline
             rows="4"
             resettable
@@ -64,6 +63,10 @@ export const ServerNoticeButton = () => {
   const handleDialogOpen = () => setOpen(true);
   const handleDialogClose = () => setOpen(false);
 
+  if (!record) {
+    return null;
+  }
+
   const handleSend = (values: Partial<RaRecord>) => {
     create(
       "servernotices",
@@ -100,13 +103,12 @@ export const ServerNoticeBulkButton = () => {
   const unselectAllUsers = useUnselectAll("users");
   const dataProvider = useDataProvider();
 
-  const { mutate: sendNotices, isLoading } = useMutation(
+  const { mutate: sendNotices, isPending } = useMutation({
-    data =>
+    mutationFn: (data) =>
       dataProvider.createMany("servernotices", {
         ids: selectedIds,
         data: data,
       }),
-    {
     onSuccess: () => {
       notify("resources.servernotices.action.send_success");
       unselectAllUsers();
@@ -116,12 +118,11 @@ export const ServerNoticeBulkButton = () => {
       notify("resources.servernotices.action.send_failure", {
         type: "error",
       }),
-    }
+  });
-  );
 
   return (
     <>
-      <Button label="resources.servernotices.send" onClick={openDialog} disabled={isLoading}>
+      <Button label="resources.servernotices.send" onClick={openDialog} disabled={isPending}>
         <MessageIcon />
       </Button>
       <ServerNoticeDialog open={open} onClose={closeDialog} onSubmit={sendNotices} />

src/components/UserRateLimits.tsx

@@ -0,0 +1,90 @@
+import { Stack, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+import { useDataProvider, useNotify, useRecordContext, useTranslate } from "react-admin";
+import { TextField } from "@mui/material";
+import { useFormContext } from "react-hook-form";
+
+const RateLimitRow = ({ limit, value, updateRateLimit }: { limit: string, value: number, updateRateLimit: (limit: string, value: number) => void }) => {
+  const translate = useTranslate();
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    updateRateLimit(limit, parseInt(event.target.value));
+  };
+
+  return <Stack
+    spacing={1}
+    alignItems="start"
+    sx={{
+        padding: 2,
+    }}
+  >
+    <TextField
+      id="outlined-number"
+      type="number"
+      value={value}
+      onChange={handleChange}
+      slotProps={{
+        inputLabel: {
+          shrink: true,
+        },
+      }}
+      label={translate(`resources.users.limits.${limit}`)}
+    />
+    <Stack>
+      <Typography
+        variant="body2"
+        color="text.secondary"
+      >
+        {translate(`resources.users.limits.${limit}_text`)}
+      </Typography>
+    </Stack>
+  </Stack>
+}
+
+export const UserRateLimits = () => {
+  const translate = useTranslate();
+  const notify = useNotify();
+  const record = useRecordContext();
+  const form = useFormContext();
+  const dataProvider = useDataProvider();
+  const [rateLimits, setRateLimits] = useState({
+    messages_per_second: 0,
+    burst_count: 0,
+  });
+
+  if (!record) {
+    return null;
+  }
+
+  useEffect(() => {
+      const fetchRateLimits = async () => {
+          const rateLimits = await dataProvider.getRateLimits(record.id);
+          if (Object.keys(rateLimits).length > 0) {
+            setRateLimits(rateLimits);
+          }
+      }
+
+      fetchRateLimits();
+  }, []);
+
+  const updateRateLimit = async (limit: string, value: number) => {
+    let updatedRateLimits = { ...rateLimits, [limit]: value };
+    setRateLimits(updatedRateLimits);
+    form.setValue(`rates.${limit}`, value, { shouldDirty: true });
+  };
+
+  return <>
+    <Stack
+      direction="column"
+    >
+      {Object.keys(rateLimits).map((limit: string) =>
+        <RateLimitRow
+          key={limit}
+          limit={limit}
+          value={rateLimits[limit]}
+          updateRateLimit={updateRateLimit}
+        />
+      )}
+    </Stack>
+  </>
+};

src/components/config.ts

@@ -0,0 +1,87 @@
+import storage from "../storage";
+
+export interface Config {
+  restrictBaseUrl: string | string[];
+  asManagedUsers: string[];
+  supportURL: string;
+  menu: MenuItem[];
+}
+
+export interface MenuItem {
+  label: string;
+  icon: string;
+  url: string;
+}
+
+export const WellKnownKey = "cc.etke.synapse-admin";
+
+export const LoadConfig = (context: Config): Config => {
+  if (context.restrictBaseUrl) {
+    storage.setItem("restrict_base_url", JSON.stringify(context.restrictBaseUrl));
+  }
+
+  if (context.asManagedUsers) {
+    storage.setItem("as_managed_users", JSON.stringify(context.asManagedUsers));
+  }
+
+  let menu: MenuItem[] = [];
+  if (context.menu) {
+    menu = context.menu;
+  }
+  if (context.supportURL) {
+    const migratedSupportURL = {
+      label: "Contact support",
+      icon: "SupportAgent",
+      url: context.supportURL,
+    };
+    console.warn("supportURL config option is deprecated. Please, use the menu option instead. Automatically migrated to the new menu option:", migratedSupportURL);
+    menu.push(migratedSupportURL as MenuItem);
+  }
+  if (menu.length > 0) {
+    storage.setItem("menu", JSON.stringify(menu));
+  }
+
+  // below we try to calculate "final" config, which will contain values from context and already set values in storage
+  // because LoadConfig could be called multiple times to get config from different sources
+  let finalRestrictBaseUrl: string | string[] = "";
+  try {
+    finalRestrictBaseUrl = JSON.parse(storage.getItem("restrict_base_url") || "");
+    if (Array.isArray(finalRestrictBaseUrl) && finalRestrictBaseUrl.length == 1) {
+      finalRestrictBaseUrl = finalRestrictBaseUrl[0];
+    }
+  } catch (e) {}
+  let finalAsManagedUsers: string[] = [];
+  try {
+    finalAsManagedUsers = JSON.parse(storage.getItem("as_managed_users") || "");
+  } catch (e) {}
+
+  let finalMenu: MenuItem[] = [];
+  try {
+    finalMenu = JSON.parse(storage.getItem("menu") || "");
+  } catch (e) {}
+
+  return {
+    restrictBaseUrl: finalRestrictBaseUrl,
+    asManagedUsers: finalAsManagedUsers,
+    supportURL: storage.getItem("support_url") || "",
+    menu: finalMenu,
+  } as Config;
+
+}
+
+
+export const ClearConfig = () => {
+  // config.json
+  storage.removeItem("restrict_base_url");
+  storage.removeItem("as_managed_users");
+  storage.removeItem("support_url");
+  storage.removeItem("menu");
+
+  // session
+  storage.removeItem("home_server");
+  storage.removeItem("base_url");
+  storage.removeItem("user_id");
+  storage.removeItem("device_id");
+  storage.removeItem("access_token");
+  storage.removeItem("login_type");
+}

src/components/devices.tsx

@@ -1,9 +1,15 @@
 import { DeleteWithConfirmButton, DeleteWithConfirmButtonProps, useRecordContext } from "react-admin";
+import { isASManaged } from "./mxid";
 
 export const DeviceRemoveButton = (props: DeleteWithConfirmButtonProps) => {
   const record = useRecordContext();
   if (!record) return null;
 
+  let isASManagedUser = false;
+  if (record.user_id) {
+    isASManagedUser = isASManaged(record.user_id);
+  }
+
   return (
     <DeleteWithConfirmButton
       {...props}
@@ -12,6 +18,7 @@ export const DeviceRemoveButton = (props: DeleteWithConfirmButtonProps) => {
       confirmContent="resources.devices.action.erase.content"
       mutationMode="pessimistic"
       redirect={false}
+      disabled={isASManagedUser}
       translateOptions={{
         id: record.id,
         name: record.display_name ? record.display_name : record.id,

src/components/icons.ts

@@ -0,0 +1,12 @@
+import { lazy } from "react";
+
+export const Icons = {
+  Announcement: lazy(() => import('@mui/icons-material/Announcement')),
+  Engineering: lazy(() => import('@mui/icons-material/Engineering')),
+  HelpCenter: lazy(() => import('@mui/icons-material/HelpCenter')),
+  SupportAgent: lazy(() => import('@mui/icons-material/SupportAgent')),
+  Default: lazy(() => import('@mui/icons-material/OpenInNew')),
+  // Add more icons as needed
+};
+
+export const DefaultIcon = Icons.Default;

src/components/media.tsx

@@ -8,7 +8,9 @@ import DeleteSweepIcon from "@mui/icons-material/DeleteSweep";
 import FileOpenIcon from "@mui/icons-material/FileOpen";
 import LockIcon from "@mui/icons-material/Lock";
 import LockOpenIcon from "@mui/icons-material/LockOpen";
-import { Box, Dialog, DialogContent, DialogContentText, DialogTitle, Tooltip } from "@mui/material";
+import DownloadIcon from '@mui/icons-material/Download';
+import DownloadingIcon from '@mui/icons-material/Downloading';
+import { Grid2 as Grid, Box, Dialog, DialogContent, DialogContentText, DialogTitle, Tooltip, Link } from "@mui/material";
 import { alpha, useTheme } from "@mui/material/styles";
 import {
   BooleanInput,
@@ -28,13 +30,12 @@ import {
   useRefresh,
   useTranslate,
 } from "react-admin";
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
-import { Link } from "react-router-dom";
 
 import { dateParser } from "./date";
 import { DeleteMediaParams, SynapseDataProvider } from "../synapse/dataProvider";
-import { getMediaUrl } from "../synapse/synapse";
 import storage from "../storage";
+import { fetchAuthenticatedMedia } from "../utils/fetchMedia";
 
 const DeleteMediaDialog = ({ open, onClose, onSubmit }) => {
   const translate = useTranslate();
@@ -55,14 +56,12 @@ const DeleteMediaDialog = ({ open, onClose, onSubmit }) => {
         <DialogContentText>{translate("delete_media.helper.send")}</DialogContentText>
         <SimpleForm toolbar={<DeleteMediaToolbar />} onSubmit={onSubmit}>
           <DateTimeInput
-            fullWidth
             source="before_ts"
             label="delete_media.fields.before_ts"
             defaultValue={0}
             parse={dateParser}
           />
           <NumberInput
-            fullWidth
             source="size_gt"
             label="delete_media.fields.size_gt"
             defaultValue={0}
@@ -70,7 +69,6 @@ const DeleteMediaDialog = ({ open, onClose, onSubmit }) => {
             step={1024}
           />
           <BooleanInput
-            fullWidth
             source="keep_profiles"
             label="delete_media.fields.keep_profiles"
             defaultValue={true}
@@ -86,9 +84,8 @@ export const DeleteMediaButton = (props: ButtonProps) => {
   const [open, setOpen] = useState(false);
   const notify = useNotify();
   const dataProvider = useDataProvider<SynapseDataProvider>();
-  const { mutate: deleteMedia, isLoading } = useMutation(
+  const { mutate: deleteMedia, isPending } = useMutation({
-    (values: DeleteMediaParams) => dataProvider.deleteMedia(values),
+    mutationFn: (values: DeleteMediaParams) => dataProvider.deleteMedia(values),
-    {
     onSuccess: () => {
       notify("delete_media.action.send_success");
       closeDialog();
@@ -98,8 +95,7 @@ export const DeleteMediaButton = (props: ButtonProps) => {
         type: "error",
       });
     },
-    }
+  });
-  );
 
   const openDialog = () => setOpen(true);
   const closeDialog = () => setOpen(false);
@@ -110,7 +106,7 @@ export const DeleteMediaButton = (props: ButtonProps) => {
         {...props}
         label="delete_media.action.send"
         onClick={openDialog}
-        disabled={isLoading}
+        disabled={isPending}
         sx={{
           color: theme.palette.error.main,
           "&:hover": {
@@ -316,48 +312,104 @@ export const QuarantineMediaButton = (props: ButtonProps) => {
   );
 };
 
-export const ViewMediaButton = ({ media_id, label }) => {
+export const ViewMediaButton = ({ mxcURL, label, uploadName, mimetype }) => {
   const translate = useTranslate();
-  const url = getMediaUrl(media_id);
+  const [loading, setLoading] = useState(false);
+  const isImage = mimetype && mimetype.startsWith("image/");
+
+  const openFileInNewTab = (blobURL: string) => {
+    const anchorElement = document.createElement("a");
+    anchorElement.href = blobURL;
+    anchorElement.target = "_blank";
+    document.body.appendChild(anchorElement);
+    anchorElement.click();
+    document.body.removeChild(anchorElement);
+    setTimeout(() => URL.revokeObjectURL(blobURL), 10);
+  };
+
+  const downloadFile = async (blobURL: string) => {
+    console.log("downloadFile", blobURL, uploadName);
+    const anchorElement = document.createElement("a");
+    anchorElement.href = blobURL;
+    anchorElement.download = uploadName;
+    document.body.appendChild(anchorElement);
+    anchorElement.click();
+    document.body.removeChild(anchorElement);
+    setTimeout(() => URL.revokeObjectURL(blobURL), 10);;
+  };
+
+  const handleFile = async (preview: boolean) => {
+    setLoading(true);
+    const response = await fetchAuthenticatedMedia(mxcURL, "original");
+    const blob = await response.blob();
+    const blobURL = URL.createObjectURL(blob);
+    if (preview) {
+      openFileInNewTab(blobURL);
+    } else {
+      downloadFile(blobURL);
+    }
+    setLoading(false);
+  };
+
   return (
-    <Box style={{ whiteSpace: "pre" }}>
+    <>
+      <Box display="flex" alignItems="center">
         <Tooltip title={translate("resources.users_media.action.open")}>
           <span>
+            {isImage && (
               <Button
-            component={Link}
+                disabled={loading}
-            to={url}
+                onClick={() => handleFile(true)}
-            target="_blank"
+                style={{ minWidth: 0, padding: 0, marginRight: 8 }}
-            rel="noopener"
-            style={{ minWidth: 0, paddingLeft: 0, paddingRight: 0 }}
               >
-            <FileOpenIcon />
+                {loading ? <DownloadingIcon /> : <FileOpenIcon />}
               </Button>
+            )}
           </span>
         </Tooltip>
-      {label}
+        <Button
+          disabled={loading}
+          onClick={() => handleFile(false)}
+          style={{ minWidth: 0, padding: 0, marginRight: 8 }}
+        >
+        {loading ? <DownloadingIcon /> : <DownloadIcon />}
+        </Button>
+        <span>{label}</span>
       </Box>
+    </>
   );
 };
 
 export const MediaIDField = ({ source }) => {
+  const record = useRecordContext();
+  if (!record) {
+    return null;
+  }
   const homeserver = storage.getItem("home_server");
-  const record = useRecordContext();
-  if (!record) return null;
 
-  const src = get(record, source)?.toString();
+  const mediaID = get(record, source)?.toString();
-  if (!src) return null;
+  if (!mediaID) {
+    return null;
+  }
 
-  return <ViewMediaButton media_id={`${homeserver}/${src}`} label={src} />;
+  const uploadName = decodeURIComponent(get(record, "upload_name")?.toString());
+  const mxcURL = `mxc://${homeserver}/${mediaID}`;
+
+  return <ViewMediaButton mxcURL={mxcURL} label={mediaID} uploadName={uploadName} mimetype={record.media_type}/>;
 };
 
-export const MXCField = ({ source }) => {
+export const ReportMediaContent = ({ source }) => {
   const record = useRecordContext();
-  if (!record) return null;
+  if (!record) {
+    return null;
+  }
 
-  const src = get(record, source)?.toString();
+  const mxcURL = get(record, source)?.toString();
-  if (!src) return null;
+  if (!mxcURL) {
+    return null;
+  }
 
-  const media_id = src.replace("mxc://", "");
+  const uploadName = decodeURIComponent(get(record, "event_json.content.body")?.toString());
 
-  return <ViewMediaButton media_id={media_id} label={src} />;
+  return <ViewMediaButton mxcURL={mxcURL} label={mxcURL} uploadName={uploadName} mimetype={record.media_type}/>;
 };

src/components/mxid.tsx

@@ -0,0 +1,16 @@
+import { Identifier } from "ra-core";
+
+/**
+ * Check if a user is managed by an application service
+ * @param id The user ID to check
+ * @returns Whether the user is managed by an application service
+ */
+export const isASManaged = (id: string | Identifier): boolean => {
+  const managedUsersString = localStorage.getItem("as_managed_users") || '';
+  try {
+    const asManagedUsers = JSON.parse(managedUsersString).map(regex => new RegExp(regex));
+    return asManagedUsers.some(regex => regex.test(id));
+  } catch (e) {
+    return false;
+  }
+};

src/i18n/de.ts

@@ -2,8 +2,38 @@ import { formalGermanMessages } from "@haleos/ra-language-german";
 
 import { SynapseTranslationMessages } from ".";
 
-const de: SynapseTranslationMessages = {
+const fixedGermanMessages = {
   ...formalGermanMessages,
+  ra: {
+    ...formalGermanMessages.ra,
+    navigation: {
+      ...formalGermanMessages.ra.navigation,
+      no_filtered_results: "Keine Ergebnisse",
+      clear_filters: "Alle Filter entfernen",
+      add_filter: "Filter hinzufügen",
+    },
+    action: {
+      ...formalGermanMessages.ra.action,
+      update_application: "Anwendung aktualisieren",
+    },
+    page: {
+      ...formalGermanMessages.ra.page,
+      empty: "Leer",
+      access_denied: "Zugriff verweigert",
+      authentication_error: "Authentifizierungsfehler",
+    },
+    message: {
+      ...formalGermanMessages.ra.message,
+      access_denied:
+        "Sie haben nicht die richtigen Berechtigungen um auf diese Seite zuzugreifen.",
+      authentication_error:
+        "Der Authentifizierungsserver hat einen Fehler zurückgegeben und Ihre Anmeldedaten konnten nicht überprüft werden.",
+    },
+  },
+}
+
+const de: SynapseTranslationMessages = {
+  ...fixedGermanMessages,
   synapseadmin: {
     auth: {
       base_url: "Heimserver URL",
@@ -14,10 +44,18 @@ const de: SynapseTranslationMessages = {
       protocol_error: "Die URL muss mit 'http://' oder 'https://' beginnen",
       url_error: "Keine gültige Matrix Server URL",
       sso_sign_in: "Anmeldung mit SSO",
+      credentials: "Anmeldedaten",
+      access_token: "Zugriffstoken",
+      logout_acces_token_dialog: {
+        title: "Sie verwenden ein bestehendes Matrix-Zugriffstoken.",
+        content: "Möchten Sie diese Sitzung (die anderswo, z.B. in einem Matrix-Client, verwendet werden könnte) beenden oder sich nur vom Admin-Panel abmelden?",
+        confirm: "Sitzung beenden",
+        cancel: "Nur vom Admin-Panel abmelden",
+      },
     },
     users: {
       invalid_user_id: "Lokaler Anteil der Matrix Benutzer-ID ohne Homeserver.",
-      tabs: { sso: "SSO" },
+      tabs: { sso: "SSO", experimental: "Experimentell", limits: "Rate Limits" },
     },
     rooms: {
       details: "Raumdetails",
@@ -142,12 +180,24 @@ const de: SynapseTranslationMessages = {
       helper: {
         password: "Durch die Änderung des Passworts wird der Benutzer von allen Sitzungen abgemeldet.",
         deactivate: "Sie müssen ein Passwort angeben, um ein Konto wieder zu aktivieren.",
-        erase: "DSGVO konformes Löschen der Benutzerdaten",
+        erase: "DSGVO konformes Löschen der Benutzerdaten.",
-        erase_admin_error: "Das Löschen des eigenen Benutzers ist nicht erlaubt",
+        erase_text: "Das bedeutet, dass die von dem/den Benutzer(n) gesendeten Nachrichten für alle, die zum Zeitpunkt des Sendens im Raum waren, sichtbar bleiben, aber für Benutzer, die dem Raum später beitreten, nicht sichtbar sind.",
+        erase_admin_error: "Das Löschen des eigenen Benutzers ist nicht erlaubt.",
+        modify_managed_user_error: "Das Ändern eines vom System verwalteten Benutzers ist nicht zulässig.",
       },
       action: {
         erase: "Lösche Benutzerdaten",
+        erase_avatar: "Avatar löschen",
+        delete_media: "Alle von dem/den Benutzer(n) hochgeladenen Medien löschen",
+        redact_events: "Schwärzen aller vom Benutzer gesendeten Ereignisse (-s)",
+        generate_password: "Passwort generieren",
       },
+      limits: {
+        messages_per_second: "Nachrichten pro Sekunde",
+        messages_per_second_text: "Die Anzahl der Aktionen, die in einer Sekunde durchgeführt werden können. 0 bedeutet, dass die Rate-Limitierung für diesen Benutzer deaktiviert ist.",
+        burst_count: "Burst-Anzahl",
+        burst_count_text: "Die Anzahl der Aktionen, die vor der Begrenzung durchgeführt werden können.",
+      }
     },
     rooms: {
       name: "Raum |||| Räume",

src/i18n/en.ts

@@ -14,10 +14,22 @@ const en: SynapseTranslationMessages = {
       protocol_error: "URL has to start with 'http://' or 'https://'",
       url_error: "Not a valid Matrix server URL",
       sso_sign_in: "Sign in with SSO",
+      credentials: "Credentials",
+      access_token: "Access token",
+      logout_acces_token_dialog: {
+        title: "You are using an existing Matrix access token.",
+        content: "Do you want to destroy this session (that could be used elsewhere, e.g. in a Matrix client) or just logout from the admin panel?",
+        confirm: "Destroy session",
+        cancel: "Just logout from admin panel",
+      },
     },
     users: {
       invalid_user_id: "Localpart of a Matrix user-id without homeserver.",
-      tabs: { sso: "SSO" },
+      tabs: {
+        sso: "SSO",
+        experimental: "Experimental",
+        limits: "Rate Limits",
+      },
     },
     rooms: {
       details: "Room details",
@@ -142,11 +154,23 @@ const en: SynapseTranslationMessages = {
         password: "Changing password will log user out of all sessions.",
         deactivate: "You must provide a password to re-activate an account.",
         erase: "Mark the user as GDPR-erased",
+        erase_text: "This means messages sent by the user(-s) will still be visible by anyone who was in the room when these messages were sent, but hidden from users joining the room afterward.",
         erase_admin_error: "Deleting own user is not allowed.",
+        modify_managed_user_error: "Modifying a system-managed user is not allowed.",
       },
       action: {
         erase: "Erase user data",
+        erase_avatar: "Erase avatar",
+        delete_media: "Delete all media uploaded by the user(-s)",
+        redact_events: "Redact all events sent by the user(-s)",
+        generate_password: "Generate password",
       },
+      limits: {
+        messages_per_second: "Messages per second",
+        messages_per_second_text: "The number of actions that can be performed in a second. 0 mean that ratelimiting is disabled for this user",
+        burst_count: "Burst count",
+        burst_count_text: "How many actions that can be performed before being limited.",
+      }
     },
     rooms: {
       name: "Room |||| Rooms",

src/i18n/fa.ts

@@ -13,10 +13,18 @@ const fa: SynapseTranslationMessages = {
       protocol_error: "URL باید با 'http://' یا 'https://' شروع شود",
       url_error: "آدرس وارد شده یک سرور معتبر نیست",
       sso_sign_in: "با SSO وارد شوید",
+      credentials: "اعتبارنامه",
+      access_token: "توکن دسترسی",
+      logout_acces_token_dialog: {
+        title: "شما در حال استفاده از یک نشانه دسترسی ماتریکس موجود هستید.",
+        content: "آیا می‌خواهید این جلسه (که می‌تواند در جای دیگر، مانند یک کلاینت ماتریکس استفاده شود) را نابود کنید یا فقط از پنل مدیریت خارج شوید؟",
+        confirm: "نابودی جلسه",
+        cancel: "فقط خروج از پنل مدیریت",
+      },
     },
     users: {
       invalid_user_id: "بخش محلی یک شناسه کاربری ماتریکس بدون سرور خانگی.",
-      tabs: { sso: "SSO" },
+      tabs: { sso: "SSO", experimental: "تجربی", limits: "محدودیت ها" },
     },
     rooms: {
       tabs: {
@@ -138,10 +146,23 @@ const fa: SynapseTranslationMessages = {
         password: "با تغییر رمز عبور کاربر از تمام دستگاه ها خارج می شود.",
         deactivate: "برای فعالسازی مجدد حساب باید رمز عبور وارد کنید.",
         erase: "کاربر را به عنوان GDPR پاک شده علامت گذاری کنید",
+        erase_text: "وهذا يعني أن الرسائل المرسلة من قبل المستخدم (المستخدمين) ستظل مرئية من قبل أي شخص كان في الغرفة عند إرسال هذه الرسائل، ولكنها مخفية عن المستخدمين الذين ينضمون إلى الغرفة بعد ذلك.",
+        erase_admin_error: "حذف المستخدم الخاص غير مسموح به.",
+        modify_managed_user_error: "لا يُسمح بتغيير المستخدم الذي يديره النظام.",
       },
       action: {
         erase: "پاک کردن اطلاعات کاربر",
+        erase_avatar: "محو الصورة الرمزية",
+        delete_media: "حذف جميع الوسائط التي تم تحميلها بواسطة المستخدم (المستخدمين)",
+        redact_events: "تنقيح جميع الأحداث المرسلة من قبل المستخدم (-s)",
+        generate_password: "توليد رمز عبور",
       },
+      limits: {
+        messages_per_second: "پیام در ثانیه",
+        messages_per_second_text: "تعداد عملیاتی که می تواند در یک ثانیه انجام شود. 0 به معنای غیرفعال کردن محدودیت برای این کاربر است.",
+        burst_count: "تعداد پیچیدگی",
+        burst_count_text: "تعداد عملیاتی که می تواند قبل از محدودیت انجام شود.",
+      }
     },
     rooms: {
       name: "اتاق |||| اتاق ها",
@@ -193,6 +214,11 @@ const fa: SynapseTranslationMessages = {
           title: "حذف اتاق",
           content:
             "آیا مطمئن هستید که می خواهید اتاق را حذف کنید؟ این قابل بازگشت نیست. همه پیام ها و رسانه های مشترک در اتاق از سرور حذف می شوند!",
+          fields: {
+            block: "حذف",
+          },
+          success: "اتاق با موفقیت حذف شد.",
+          failure: "خطایی رخ داده است.",
         },
       },
     },

src/i18n/fr.ts

@@ -13,10 +13,18 @@ const fr: SynapseTranslationMessages = {
       protocol_error: "L'URL doit commencer par « http:// » ou « https:// »",
       url_error: "L'URL du serveur Matrix n'est pas valide",
       sso_sign_in: "Se connecter avec l’authentification unique",
+      credentials: "Identifiants",
+      access_token: "Jeton d'accès",
+      logout_acces_token_dialog: {
+        title: "Vous utilisez un jeton d'accès Matrix existant.",
+        content: "Voulez-vous détruire cette session (qui pourrait être utilisée ailleurs, par exemple dans un client Matrix) ou simplement vous déconnecter du panneau d'administration?",
+        confirm: "Détruire la session",
+        cancel: "Se déconnecter simplement du panneau d'administration",
+      },
     },
     users: {
       invalid_user_id: "Partie locale d'un identifiant utilisateur Matrix sans le nom du serveur d’accueil.",
-      tabs: { sso: "Authentification unique" },
+      tabs: { sso: "Authentification unique", experimental: "Expérimental", limits: "Limites" },
     },
     rooms: {
       tabs: {
@@ -140,11 +148,23 @@ const fr: SynapseTranslationMessages = {
       helper: {
         deactivate: "Vous devrez fournir un mot de passe pour réactiver le compte.",
         erase: "Marquer l'utilisateur comme effacé conformément au RGPD",
+        erase_text: "Cela signifie que les messages envoyés par le(s) utilisateur(s) seront toujours visibles par toute personne qui se trouvait dans la salle au moment où ces messages ont été envoyés, mais qu'ils seront cachés aux utilisateurs qui rejoindront la salle par la suite.",
         erase_admin_error: "La suppression de son propre utilisateur n'est pas autorisée.",
+        modify_managed_user_error: "La modification d'un utilisateur géré par le système n'est pas autorisée.",
       },
       action: {
         erase: "Effacer les données de l'utilisateur",
+        erase_avatar: "Effacer l'avatar",
+        delete_media: "Supprimer tous les médias téléchargés par le(s) utilisateur(s)",
+        redact_events: "Expurger tous les événements envoyés par l'utilisateur(-s)",
+        generate_password: "Générer un mot de passe",
       },
+      limits: {
+        messages_per_second: "Messages par seconde",
+        messages_per_second_text: "Le nombre d'actions que l'utilisateur peut effectuer par seconde. 0 signifie que la limitation est désactivée pour cet utilisateur.",
+        burst_count: "Compteur de pics",
+        burst_count_text: "Le nombre d'actions que l'utilisateur peut effectuer avant d'être limité.",
+      }
     },
     rooms: {
       name: "Salon |||| Salons",

src/i18n/index.d.ts

@@ -11,10 +11,18 @@ interface SynapseTranslationMessages extends TranslationMessages {
       protocol_error: string;
       url_error: string;
       sso_sign_in: string;
+      credentials: string;
+      access_token: string;
+      logout_acces_token_dialog: {
+        title: string;
+        content: string;
+        confirm: string;
+        cancel: string;
+      };
     };
     users: {
       invalid_user_id: string;
-      tabs: { sso: string };
+      tabs: { sso: string; experimental: string; limits: string; };
     };
     rooms: {
       details?: string; // TODO: fa, fr, it, zh
@@ -138,10 +146,22 @@ interface SynapseTranslationMessages extends TranslationMessages {
         password?: string;
         deactivate: string;
         erase: string;
+        erase_text: string;
         erase_admin_error: string;
+        modify_managed_user_error: string;
       };
       action: {
         erase: string;
+        erase_avatar: string;
+        delete_media: string;
+        redact_events: string;
+        generate_password: string;
+      };
+      limits: {
+        messages_per_second: string;
+        messages_per_second_text: string;
+        burst_count: string;
+        burst_count_text: string;
       };
     };
     rooms: {

src/i18n/it.ts

@@ -13,10 +13,18 @@ const it: SynapseTranslationMessages = {
       protocol_error: "L'URL deve iniziare per 'http://' o 'https://'",
       url_error: "URL del server Matrix non valido",
       sso_sign_in: "Accedi con SSO",
+      credentials: "Credenziali",
+      access_token: "Token di accesso",
+      logout_acces_token_dialog: {
+        title: "Stai utilizzando un token di accesso Matrix esistente.",
+        content: "Vuoi distruggere questa sessione (che potrebbe essere utilizzata altrove, ad esempio in un client Matrix) o semplicemente disconnetterti dal pannello di amministrazione?",
+        confirm: "Distruggi sessione",
+        cancel: "Disconnetti solo dal pannello di amministrazione",
+      },
     },
     users: {
       invalid_user_id: "ID utente non valido su questo homeserver.",
-      tabs: { sso: "SSO" },
+      tabs: { sso: "SSO", experimental: "Sperimentale", limits: "Limiti" },
     },
     rooms: {
       tabs: {
@@ -139,11 +147,23 @@ const it: SynapseTranslationMessages = {
         password: "Cambiando la password l'utente verrà disconnesso da tutte le sessioni attive.",
         deactivate: "Devi fornire una password per riattivare l'account.",
         erase: "Constrassegna l'utente come cancellato dal GDPR",
+        erase_text: "Ciò significa che i messaggi inviati dall'utente (o dagli utenti) saranno ancora visibili da chiunque si trovasse nella stanza al momento dell'invio, ma saranno nascosti agli utenti che si uniranno alla stanza in seguito.",
+        erase_admin_error: "Non è consentito eliminare il proprio utente.",
+        modify_managed_user_error: "La modifica di un utente gestito dal sistema non è consentita.",
       },
       action: {
         erase: "Cancella i dati dell'utente",
-        erase_admin_error: "Non è consentito eliminare il proprio utente.",
+        erase_avatar: "Cancella l'avatar dell'utente",
+        delete_media: "Elimina tutti i media caricati dall'utente(-s)",
+        redact_events: "Ridurre tutti gli eventi inviati dall'utente(-s)",
+        generate_password: "Genera password",
       },
+      limits: {
+        messages_per_second: "Messaggi al secondo",
+        messages_per_second_text: "Il numero di azioni che l'utente può eseguire al secondo. 0 significa che la limitazione è disabilitata per questo utente.",
+        burst_count: "Burst-conteggio",
+        burst_count_text: "Il numero di azioni che l'utente può eseguire prima di essere limitato.",
+      }
     },
     rooms: {
       name: "Stanza |||| Stanze",

src/i18n/ru.ts

@@ -2,8 +2,33 @@ import russianMessages from "ra-language-russian";
 
 import { SynapseTranslationMessages } from ".";
 
-const ru: SynapseTranslationMessages = {
+const fixedRussianMessages = {
   ...russianMessages,
+  ra: {
+    ...russianMessages.ra,
+    navigation: {
+      ...russianMessages.ra.navigation,
+      no_filtered_results: "Нет результатов",
+      clear_filters: "Все фильтры сбросить",
+    },
+    page: {
+      ...russianMessages.ra.page,
+      empty: "Пусто",
+      access_denied: "Доступ запрещен",
+      authentication_error: "Ошибка аутентификации",
+    },
+    message: {
+      ...russianMessages.ra.message,
+      access_denied:
+        "У вас нет прав доступа к этой странице.",
+      authentication_error:
+        "Сервер аутентификации вернул ошибку и не смог проверить ваши учетные данные.",
+    },
+  },
+}
+
+const ru: SynapseTranslationMessages = {
+  ...fixedRussianMessages,
   synapseadmin: {
     auth: {
       base_url: "Адрес домашнего сервера",
@@ -14,10 +39,18 @@ const ru: SynapseTranslationMessages = {
       protocol_error: "Адрес должен начинаться с 'http://' или 'https://'",
       url_error: "Неверный адрес сервера Matrix",
       sso_sign_in: "Вход через SSO",
+      credentials: "Учетные данные",
+      access_token: "Токен доступа",
+      logout_acces_token_dialog: {
+        title: "Вы используете существующий токен доступа Matrix.",
+        content: "Вы хотите завершить эту сессию (которая может быть использована в другом месте, например, в клиенте Matrix) или просто выйти из панели администрирования?",
+        confirm: "Завершить сессию",
+        cancel: "Просто выйти из панели администрирования",
+      },
     },
     users: {
       invalid_user_id: "Локальная часть ID пользователя Matrix без адреса домашнего сервера.",
-      tabs: { sso: "SSO" },
+      tabs: { sso: "SSO", experimental: "Экспериментальные", limits: "Ограничения" },
     },
     rooms: {
       details: "Данные комнаты",
@@ -151,11 +184,23 @@ const ru: SynapseTranslationMessages = {
         password: "Смена пароля завершит все сессии пользователя.",
         deactivate: "Вы должны предоставить пароль для реактивации учётной записи.",
         erase: "Пометить пользователя как удалённого в соответствии с GDPR",
+        erase_text: "Это означает, что сообщения, отправленные пользователем (-ами), будут по-прежнему видны всем, кто находился в комнате в момент их отправки, но будут скрыты от пользователей, присоединившихся к комнате после этого.",
         erase_admin_error: "Удаление собственного пользователя запрещено.",
+        modify_managed_user_error: "Изменение пользователя, управляемого системой, не допускается.",
       },
       action: {
         erase: "Удалить данные пользователя",
+        erase_avatar: "Удалить аватар",
+        delete_media: "Удаление всех медиафайлов, загруженных пользователем (-ами)",
+        redact_events: "Удаление всех событий, отправленных пользователем (-ами)",
+        generate_password: "Сгенерировать пароль",
       },
+      limits: {
+        messages_per_second: "Сообщений в секунду",
+        messages_per_second_text: "Количество действий, которые могут быть выполнены в секунду. 0 означает, что ограничение на количество действий отключено для этого пользователя.",
+        burst_count: "Burst-счётчик",
+        burst_count_text: "Количество действий, которые могут быть выполнены до ограничения.",
+      }
     },
       rooms: {
         name: "Комната |||| Комнаты",
@@ -408,6 +453,6 @@ const ru: SynapseTranslationMessages = {
         },
         helper: { length: "Длина токена, если токен не задан." },
       },
-  },
+},
 };
 export default ru;

src/i18n/zh.ts

@@ -2,8 +2,36 @@ import chineseMessages from "@haxqer/ra-language-chinese";
 
 import { SynapseTranslationMessages } from ".";
 
-const zh: SynapseTranslationMessages = {
+const fixedChineseMessages = {
   ...chineseMessages,
+  ra: {
+    ...chineseMessages.ra,
+    navigation: {
+      ...chineseMessages.ra.navigation,
+      no_filtered_results: "没有结果",
+      clear_filters: "清除所有过滤器",
+    },
+    action: {
+      ...chineseMessages.ra.action,
+      update_application: "Anwendung aktualisieren",
+    },
+    page: {
+      ...chineseMessages.ra.page,
+      access_denied: "拒绝访问",
+      authentication_error: "认证错误",
+    },
+    message: {
+      ...chineseMessages.ra.message,
+      access_denied:
+        "您没有访问此页面的权限。",
+      authentication_error:
+        "身份验证服务器返回错误，无法验证您的凭据。",
+    },
+  },
+}
+
+const zh: SynapseTranslationMessages = {
+  ...fixedChineseMessages,
   synapseadmin: {
     auth: {
       base_url: "服务器 URL",
@@ -13,10 +41,18 @@ const zh: SynapseTranslationMessages = {
       protocol_error: "URL 需要以'http://'或'https://'作为起始",
       url_error: "不是一个有效的 Matrix 服务器地址",
       sso_sign_in: "使用 SSO 登录",
+      credentials: "凭证",
+      access_token: "访问令牌",
+      logout_acces_token_dialog: {
+        title: "您正在使用现有的 Matrix 访问令牌。",
+        content: "您想销毁此会话（可能在其他地方使用，例如在 Matrix 客户端中）还是仅从管理面板退出？",
+        confirm: "销毁会话",
+        cancel: "仅从管理面板退出",
+      },
     },
     users: {
       invalid_user_id: "必须要是一个有效的 Matrix 用户 ID ，例如 @user_id:homeserver",
-      tabs: { sso: "SSO" },
+      tabs: { sso: "SSO", experimental: "实验性", limits: "限制" },
     },
     rooms: {
       tabs: {
@@ -135,11 +171,23 @@ const zh: SynapseTranslationMessages = {
       helper: {
         deactivate: "您必须提供一串密码来激活账户。",
         erase: "将用户标记为根据 GDPR 的要求抹除了",
+        erase_text: "这意味着用户发送的信息对于发送信息时在房间内的任何人来说都是可见的，但对于之后加入房间的用户来说则是隐藏的。",
         erase_admin_error: "不允许删除自己的用户",
+        modify_managed_user_error: "不允许修改系统管理的用户。",
       },
       action: {
         erase: "抹除用户信息",
+        erase_avatar: "抹掉头像",
+        delete_media: "删除用户上传的所有媒体",
+        redact_events: "重新编辑用户（-s）发送的所有事件",
+        generate_password: "生成密码",
       },
+      limits: {
+        messages_per_second: "每秒消息数",
+        messages_per_second_text: "每秒可以执行的操作数。0 表示禁用此用户的限制。",
+        burst_count: "Burst-计数",
+        burst_count_text: "在限制之前可以执行的操作数。",
+      }
     },
     rooms: {
       name: "房间",

src/index.tsx

@@ -3,16 +3,42 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 
 import App from "./App";
+import { Config, WellKnownKey, LoadConfig } from "./components/config";
 import { AppContext } from "./AppContext";
+import storage from "./storage";
 
-fetch("config.json")
+// load config.json
-  .then(res => res.json())
+let props: Config = {};
-  .then(props =>
+try {
-    createRoot(document.getElementById("root")).render(
+  const resp = await fetch("config.json");
+  const configJSON = await resp.json();
+  console.log("Loaded config.json", configJSON);
+  props = LoadConfig(configJSON as Config);
+} catch (e) {
+  console.error(e);
+}
+
+// if home_server is set, try to load https://home_server/.well-known/matrix/client
+const homeserver = storage.getItem("home_server");
+if (homeserver) {
+  try {
+    const resp = await fetch(`https://${homeserver}/.well-known/matrix/client`);
+    const configWK = await resp.json();
+    if (!configWK[WellKnownKey]) {
+      console.log(`Loaded https://${homeserver}.well-known/matrix/client, but it doesn't contain ${WellKnownKey} key, skipping`, configWK);
+    } else {
+      console.log(`Loaded https://${homeserver}.well-known/matrix/client`, configWK);
+      props = LoadConfig(configWK[WellKnownKey] as Config);
+    }
+  } catch (e) {
+    console.log(`https://${homeserver}/.well-known/matrix/client not found, skipping`, e);
+  }
+}
+
+createRoot(document.getElementById("root")).render(
       <React.StrictMode>
         <AppContext.Provider value={props}>
           <App />
         </AppContext.Provider>
       </React.StrictMode>
-    )
+);
-  );

src/pages/LoginPage.test.tsx

@@ -8,14 +8,17 @@ import { AppContext } from "../AppContext";
 import englishMessages from "../i18n/en";
 
 const i18nProvider = polyglotI18nProvider(() => englishMessages, "en", [{ locale: "en", name: "English" }]);
+import { act } from "@testing-library/react";
 
 describe("LoginForm", () => {
-  it("renders with no restriction to homeserver", () => {
+  it("renders with no restriction to homeserver", async () => {
+    await act(async () => {
       render(
         <AdminContext i18nProvider={i18nProvider}>
           <LoginPage />
         </AdminContext>
       );
+    });
 
     screen.getByText(englishMessages.synapseadmin.auth.welcome);
     screen.getByRole("combobox", { name: "" });

src/pages/LoginPage.tsx

@@ -1,8 +1,6 @@
 import { useState, useEffect } from "react";
 
-import LockIcon from "@mui/icons-material/Lock";
+import { Avatar, Box, Button, Card, CardActions, CircularProgress, MenuItem, Select, Tab, Tabs, Typography } from "@mui/material";
-import { Avatar, Box, Button, Card, CardActions, CircularProgress, MenuItem, Select, Typography } from "@mui/material";
-import { styled } from "@mui/material/styles";
 import {
   Form,
   FormDataConsumer,
@@ -17,7 +15,7 @@ import {
   useLocales,
 } from "react-admin";
 import { useFormContext } from "react-hook-form";
-
+import LoginFormBox from "../components/LoginFormBox";
 import { useAppContext } from "../AppContext";
 import {
   getServerVersion,
@@ -29,66 +27,18 @@ import {
 } from "../synapse/synapse";
 import storage from "../storage";
 
-const FormBox = styled(Box)(({ theme }) => ({
+export type LoginMethod = "credentials" | "accessToken";
-  display: "flex",
-  flexDirection: "column",
-  minHeight: "calc(100vh - 1rem)",
-  alignItems: "center",
-  justifyContent: "flex-start",
-  background: "url(./images/floating-cogs.svg)",
-  backgroundColor: "#f9f9f9",
-  backgroundRepeat: "no-repeat",
-  backgroundSize: "cover",
-
-  [`& .card`]: {
-    width: "30rem",
-    marginTop: "6rem",
-    marginBottom: "6rem",
-  },
-  [`& .avatar`]: {
-    margin: "1rem",
-    display: "flex",
-    justifyContent: "center",
-  },
-  [`& .icon`]: {
-    backgroundColor: theme.palette.grey[500],
-  },
-  [`& .hint`]: {
-    marginTop: "1em",
-    marginBottom: "1em",
-    display: "flex",
-    justifyContent: "center",
-    color: theme.palette.grey[600],
-  },
-  [`& .form`]: {
-    padding: "0 1rem 1rem 1rem",
-  },
-  [`& .select`]: {
-    marginBottom: "2rem",
-  },
-  [`& .actions`]: {
-    padding: "0 1rem 1rem 1rem",
-  },
-  [`& .serverVersion`]: {
-    color: theme.palette.grey[500],
-    fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-    marginLeft: "0.5rem",
-  },
-  [`& .matrixVersions`]: {
-    color: theme.palette.grey[500],
-    fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-    fontSize: "0.8rem",
-    marginBottom: "1rem",
-    marginLeft: "0.5rem",
-  },
-}));
 
 const LoginPage = () => {
   const login = useLogin();
   const notify = useNotify();
   const { restrictBaseUrl } = useAppContext();
-  const allowSingleBaseUrl = typeof restrictBaseUrl === "string";
+  const allowSingleBaseUrl = typeof restrictBaseUrl === "string" && restrictBaseUrl !== "";
-  const allowMultipleBaseUrls = Array.isArray(restrictBaseUrl);
+  const allowMultipleBaseUrls =
+    Array.isArray(restrictBaseUrl) &&
+    restrictBaseUrl.length > 0 &&
+    restrictBaseUrl[0] !== "" &&
+    restrictBaseUrl[0] !== null;
   const allowAnyBaseUrl = !(allowSingleBaseUrl || allowMultipleBaseUrls);
   const [loading, setLoading] = useState(false);
   const [supportPassAuth, setSupportPassAuth] = useState(true);
@@ -98,8 +48,13 @@ const LoginPage = () => {
   const base_url = allowSingleBaseUrl ? restrictBaseUrl : storage.getItem("base_url");
   const [ssoBaseUrl, setSSOBaseUrl] = useState("");
   const loginToken = /\?loginToken=([a-zA-Z0-9_-]+)/.exec(window.location.href);
+  const [loginMethod, setLoginMethod] = useState<LoginMethod>("credentials");
+
+  useEffect(() => {
+    if (!loginToken) {
+      return;
+    }
 
-  if (loginToken) {
     const ssoToken = loginToken[1];
     console.log("SSO token is", ssoToken);
     // Prevent further requests
@@ -127,7 +82,7 @@ const LoginPage = () => {
         console.error(error);
       });
     }
-  }
+  }, [loginToken]);
 
   const validateBaseUrl = value => {
     if (!value.match(/^(http|https):\/\//)) {
@@ -212,6 +167,18 @@ const LoginPage = () => {
     }, [formData.base_url, form]);
 
     return (
+      <>
+        <Tabs
+          value={loginMethod}
+          onChange={(_, newValue) => setLoginMethod(newValue as LoginMethod)}
+          indicatorColor="primary"
+          textColor="primary"
+          centered
+        >
+          <Tab label={translate("synapseadmin.auth.credentials")} value="credentials" />
+          <Tab label={translate("synapseadmin.auth.access_token")} value="accessToken" />
+        </Tabs>
+        {loginMethod === "credentials" ? (
           <>
             <Box>
               <TextInput
@@ -222,7 +189,6 @@ const LoginPage = () => {
                 disabled={loading || !supportPassAuth}
                 onBlur={handleUsernameChange}
                 resettable
-            fullWidth
                 validate={required()}
               />
             </Box>
@@ -234,10 +200,21 @@ const LoginPage = () => {
                 autoComplete="current-password"
                 disabled={loading || !supportPassAuth}
                 resettable
-            fullWidth
                 validate={required()}
               />
             </Box>
+          </>
+        ) : (
+          <Box>
+            <TextInput
+              source="accessToken"
+              label="synapseadmin.auth.access_token"
+              disabled={loading}
+              resettable
+              validate={required()}
+            />
+          </Box>
+        )}
         <Box>
           <TextInput
             source="base_url"
@@ -247,7 +224,6 @@ const LoginPage = () => {
             disabled={loading}
             readOnly={allowSingleBaseUrl}
             resettable={allowAnyBaseUrl}
-            fullWidth
             validate={[required(), validateBaseUrl]}
           >
             {allowMultipleBaseUrls &&
@@ -266,23 +242,21 @@ const LoginPage = () => {
 
   return (
     <Form defaultValues={{ base_url: base_url }} onSubmit={handleSubmit} mode="onTouched">
-      <FormBox>
+      <LoginFormBox>
         <Card className="card">
           <Box className="avatar">
             {loading ? (
               <CircularProgress size={25} thickness={2} />
             ) : (
-              <Avatar className="icon">
+              <Avatar sx={{ width: "120px", height: "120px" }} src="./images/logo.webp"/>
-                <LockIcon />
-              </Avatar>
             )}
           </Box>
           <Box className="hint">{translate("synapseadmin.auth.welcome")}</Box>
           <Box className="form">
             <Select
+              fullWidth
               value={locale}
               onChange={e => setLocale(e.target.value)}
-              fullWidth
               disabled={loading}
               className="select"
             >
@@ -293,7 +267,7 @@ const LoginPage = () => {
               ))}
             </Select>
             <FormDataConsumer>{formDataProps => <UserData {...formDataProps} />}</FormDataConsumer>
-            <CardActions className="actions">
+            {loginMethod === "credentials" && <CardActions className="actions">
               <Button
                 variant="contained"
                 type="submit"
@@ -312,10 +286,21 @@ const LoginPage = () => {
               >
                 {translate("synapseadmin.auth.sso_sign_in")}
               </Button>
-            </CardActions>
+            </CardActions>}
+            {loginMethod === "accessToken" && <CardActions className="actions">
+              <Button
+                variant="contained"
+                type="submit"
+                color="primary"
+                disabled={loading}
+                fullWidth
+              >
+                {translate("ra.auth.sign_in")}
+              </Button>
+            </CardActions>}
           </Box>
         </Card>
-      </FormBox>
+      </LoginFormBox>
       <Notification />
     </Form>
   );

src/resources/destinations.tsx

@@ -4,9 +4,11 @@ import AutorenewIcon from "@mui/icons-material/Autorenew";
 import DestinationsIcon from "@mui/icons-material/CloudQueue";
 import FolderSharedIcon from "@mui/icons-material/FolderShared";
 import ViewListIcon from "@mui/icons-material/ViewList";
+import ErrorIcon from '@mui/icons-material/Error';
 import {
   Button,
   Datagrid,
+  DatagridConfigurable,
   DateField,
   List,
   ListProps,
@@ -21,6 +23,7 @@ import {
   Tab,
   TabbedShowLayout,
   TextField,
+  FunctionField,
   TopToolbar,
   useRecordContext,
   useDelete,
@@ -35,13 +38,6 @@ import { get } from "lodash";
 
 const DestinationPagination = () => <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />;
 
-const destinationRowSx = (record: RaRecord) => ({
-  backgroundColor: record.retry_last_ts > 0 ? "warning.light" : "primary.contrastText",
-  "& .MuiButtonBase-root": {
-    color: "primary.dark",
-  },
-});
-
 const destinationFilters = [<SearchInput source="destination" alwaysOn />];
 
 export const DestinationReconnectButton = () => {
@@ -105,7 +101,22 @@ const RetryDateField = (props: DateFieldProps) => {
   return <DateField {...props} />;
 };
 
+
+const destinationFieldRender = (record: RaRecord) => {
+  if (record.retry_last_ts > 0) {
+    return (
+      <>
+        <ErrorIcon fontSize="inherit" color="error" sx={{verticalAlign: "middle"}}/>
+
+        {record.destination}
+      </>
+    );
+  }
+  return <> {record.destination} </>;
+}
+
 export const DestinationList = (props: ListProps) => {
+  const record = useRecordContext(props);
   return (
     <List
       {...props}
@@ -113,14 +124,14 @@ export const DestinationList = (props: ListProps) => {
       pagination={<DestinationPagination />}
       sort={{ field: "destination", order: "ASC" }}
     >
-      <Datagrid rowSx={destinationRowSx} rowClick={id => `${id}/show/rooms`} bulkActionButtons={false}>
+      <DatagridConfigurable rowClick={id => `${id}/show/rooms`} bulkActionButtons={false}>
-        <TextField source="destination" />
+        <FunctionField source="destination" render={destinationFieldRender} />
         <DateField source="failure_ts" showTime options={DATE_FORMAT} />
         <RetryDateField source="retry_last_ts" showTime options={DATE_FORMAT} />
         <TextField source="retry_interval" />
         <TextField source="last_successful_stream_ordering" />
         <DestinationReconnectButton />
-      </Datagrid>
+      </DatagridConfigurable>
     </List>
   );
 };

src/resources/registration_tokens.tsx

@@ -4,6 +4,7 @@ import {
   Create,
   CreateProps,
   Datagrid,
+  DatagridConfigurable,
   DateField,
   DateTimeInput,
   Edit,
@@ -39,13 +40,13 @@ export const RegistrationTokenList = (props: ListProps) => (
     pagination={false}
     perPage={500}
   >
-    <Datagrid rowClick="edit">
+    <DatagridConfigurable rowClick="edit">
       <TextField source="token" sortable={false} />
       <NumberField source="uses_allowed" sortable={false} />
       <NumberField source="pending" sortable={false} />
       <NumberField source="completed" sortable={false} />
       <DateField source="expiry_time" showTime options={DATE_FORMAT} sortable={false} />
-    </Datagrid>
+    </DatagridConfigurable>
   </List>
 );
 

src/resources/reports.tsx

@@ -3,6 +3,7 @@ import ViewListIcon from "@mui/icons-material/ViewList";
 import ReportIcon from "@mui/icons-material/Warning";
 import {
   Datagrid,
+  DatagridConfigurable,
   DateField,
   DeleteButton,
   List,
@@ -22,7 +23,7 @@ import {
 } from "react-admin";
 
 import { DATE_FORMAT } from "../components/date";
-import { MXCField } from "../components/media";
+import { ReportMediaContent } from "../components/media";
 
 const ReportPagination = () => <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />;
 
@@ -62,7 +63,7 @@ export const ReportShow = (props: ShowProps) => {
           <TextField source="event_json.content.msgtype" />
           <TextField source="event_json.content.body" />
           <TextField source="event_json.content.info.mimetype" />
-          <MXCField source="event_json.content.url" />
+          <ReportMediaContent source="event_json.content.url" />
           <TextField source="event_json.content.format" />
           <TextField source="event_json.content.formatted_body" />
           <TextField source="event_json.content.algorithm" />
@@ -90,13 +91,13 @@ const ReportShowActions = () => {
 
 export const ReportList = (props: ListProps) => (
   <List {...props} pagination={<ReportPagination />} sort={{ field: "received_ts", order: "DESC" }}>
-    <Datagrid rowClick="show" bulkActionButtons={false}>
+    <DatagridConfigurable rowClick="show" bulkActionButtons={false}>
       <TextField source="id" sortable={false} />
       <DateField source="received_ts" showTime options={DATE_FORMAT} sortable={true} />
       <TextField sortable={false} source="user_id" />
       <TextField sortable={false} source="name" />
       <TextField sortable={false} source="score" />
-    </Datagrid>
+    </DatagridConfigurable>
   </List>
 );
 

src/resources/room_directory.tsx

@@ -25,10 +25,10 @@ import {
   useRefresh,
   useUnselectAll,
 } from "react-admin";
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
-
 import AvatarField from "../components/AvatarField";
 
+
 const RoomDirectoryPagination = () => <Pagination rowsPerPageOptions={[100, 500, 1000, 2000]} />;
 
 export const RoomDirectoryUnpublishButton = (props: DeleteButtonProps) => {
@@ -70,13 +70,12 @@ export const RoomDirectoryBulkPublishButton = (props: ButtonProps) => {
   const refresh = useRefresh();
   const unselectAllRooms = useUnselectAll("rooms");
   const dataProvider = useDataProvider();
-  const { mutate, isLoading } = useMutation(
+  const { mutate, isPending } = useMutation({
-    () =>
+    mutationFn: () =>
       dataProvider.createMany("room_directory", {
         ids: selectedIds,
         data: {},
       }),
-    {
     onSuccess: () => {
       notify("resources.room_directory.action.send_success");
       unselectAllRooms();
@@ -86,11 +85,10 @@ export const RoomDirectoryBulkPublishButton = (props: ButtonProps) => {
       notify("resources.room_directory.action.send_failure", {
         type: "error",
       }),
-    }
+  });
-  );
 
   return (
-    <Button {...props} label="resources.room_directory.action.create" onClick={mutate} disabled={isLoading}>
+    <Button {...props} label="resources.room_directory.action.create" onClick={mutate} disabled={isPending}>
       <RoomDirectoryIcon />
     </Button>
   );
@@ -102,6 +100,10 @@ export const RoomDirectoryPublishButton = (props: ButtonProps) => {
   const refresh = useRefresh();
   const [create, { isLoading }] = useCreate();
 
+  if (!record) {
+    return null;
+  }
+
   const handleSend = () => {
     create(
       "room_directory",
@@ -142,7 +144,6 @@ export const RoomDirectoryList = () => (
     >
       <AvatarField
         source="avatar_src"
-        sortable={false}
         sx={{ height: "40px", width: "40px" }}
         label="resources.rooms.fields.avatar"
       />

src/resources/rooms.tsx

@@ -47,6 +47,7 @@ import {
 } from "./room_directory";
 import { DATE_FORMAT } from "../components/date";
 import DeleteRoomButton from "../components/DeleteRoomButton";
+import AvatarField from "../components/AvatarField";
 
 const RoomPagination = () => <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />;
 
@@ -67,6 +68,9 @@ const RoomTitle = () => {
 
 const RoomShowActions = () => {
   const record = useRecordContext();
+  if (!record) {
+    return null;
+  }
   const publishButton = record?.public ? <RoomDirectoryUnpublishButton /> : <RoomDirectoryPublishButton />;
   // FIXME: refresh after (un)publish
   return (
@@ -87,6 +91,11 @@ export const RoomShow = (props: ShowProps) => {
     <Show {...props} actions={<RoomShowActions />} title={<RoomTitle />}>
       <TabbedShowLayout>
         <Tab label="synapseadmin.rooms.tabs.basic" icon={<ViewListIcon />}>
+          <AvatarField
+            source="avatar"
+            sx={{ height: "120px", width: "120px" }}
+            label="resources.rooms.fields.avatar"
+          />
           <TextField source="room_id" />
           <TextField source="name" />
           <TextField source="topic" />
@@ -178,7 +187,7 @@ export const RoomShow = (props: ShowProps) => {
             <Datagrid style={{ width: "100%" }} bulkActionButtons={false}>
               <TextField source="type" sortable={false} />
               <DateField source="origin_server_ts" showTime options={DATE_FORMAT} sortable={false} />
-              <TextField source="content" sortable={false} />
+              <FunctionField source="content" sortable={false} render={record => `${JSON.stringify(record.content, null, 2)}`} />
               <ReferenceField source="sender" reference="users" sortable={false}>
                 <TextField source="id" />
               </ReferenceField>

src/resources/user_media_statistics.tsx

@@ -1,6 +1,7 @@
-import EqualizerIcon from "@mui/icons-material/Equalizer";
+import PermMediaIcon from "@mui/icons-material/PermMedia";
 import {
   Datagrid,
+  DatagridConfigurable,
   ExportButton,
   List,
   ListProps,
@@ -37,18 +38,18 @@ export const UserMediaStatsList = (props: ListProps) => (
     pagination={<UserMediaStatsPagination />}
     sort={{ field: "media_length", order: "DESC" }}
   >
-    <Datagrid rowClick={id => "/users/" + id + "/media"} bulkActionButtons={false}>
+    <DatagridConfigurable rowClick={id => "/users/" + id + "/media"} bulkActionButtons={false}>
       <TextField source="user_id" label="resources.users.fields.id" />
       <TextField source="displayname" label="resources.users.fields.displayname" />
       <NumberField source="media_count" />
       <NumberField source="media_length" />
-    </Datagrid>
+    </DatagridConfigurable>
   </List>
 );
 
 const resource: ResourceProps = {
   name: "user_media_statistics",
-  icon: EqualizerIcon,
+  icon: PermMediaIcon,
   list: UserMediaStatsList,
 };
 

src/resources/users.tsx

@@ -7,14 +7,17 @@ import NotificationsIcon from "@mui/icons-material/Notifications";
 import PermMediaIcon from "@mui/icons-material/PermMedia";
 import PersonPinIcon from "@mui/icons-material/PersonPin";
 import SettingsInputComponentIcon from "@mui/icons-material/SettingsInputComponent";
+import ScienceIcon from "@mui/icons-material/Science";
+import LockClockIcon from '@mui/icons-material/LockClock';
 import ViewListIcon from "@mui/icons-material/ViewList";
 import { useEffect, useState } from "react";
-import { Alert, ownerDocument } from "@mui/material";
+import { Alert } from "@mui/material";
 import {
   ArrayInput,
   ArrayField,
   Button,
   Datagrid,
+  DatagridConfigurable,
   DateField,
   Create,
   CreateProps,
@@ -36,7 +39,6 @@ import {
   ResourceProps,
   SearchInput,
   SelectInput,
-  BulkDeleteButton,
   DeleteButton,
   maxLength,
   regex,
@@ -52,17 +54,26 @@ import {
   NumberField,
   useListContext,
   useNotify,
-  ToolbarClasses,
   Identifier,
-  RaRecord,
+  ToolbarClasses,
+  ImageInput,
+  ImageField,
+  FunctionField,
+  useDataProvider,
 } from "react-admin";
 import { Link } from "react-router-dom";
 
 import AvatarField from "../components/AvatarField";
+import DeleteUserButton from "../components/DeleteUserButton";
+import { isASManaged } from "../components/mxid";
 import { ServerNoticeButton, ServerNoticeBulkButton } from "../components/ServerNotices";
 import { DATE_FORMAT } from "../components/date";
 import { DeviceRemoveButton } from "../components/devices";
 import { MediaIDField, ProtectMediaButton, QuarantineMediaButton } from "../components/media";
+import { generateRandomPassword } from "../synapse/synapse";
+import { useFormContext } from "react-hook-form";
+import { ExperimentalFeaturesList } from "../components/ExperimentalFeatures";
+import { UserRateLimits } from "../components/UserRateLimits";
 
 const choices_medium = [
   { id: "email", name: "resources.users.email" },
@@ -87,11 +98,6 @@ const UserListActions = () => {
   );
 };
 
-UserListActions.defaultProps = {
-  selectedIds: [],
-  onUnselectItems: () => null,
-};
-
 const UserPagination = () => <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />;
 
 const userFilters = [
@@ -101,50 +107,49 @@ const userFilters = [
   <BooleanInput label="resources.users.fields.show_locked" source="locked" alwaysOn />,
 ];
 
-const UserPreventSelfDelete: React.FC<{ children: React.ReactNode, ownUserIsSelected: boolean }> = (props) => {
+const UserPreventSelfDelete: React.FC<{ children: React.ReactNode; ownUserIsSelected: boolean; asManagedUserIsSelected: boolean }> = props => {
   const ownUserIsSelected = props.ownUserIsSelected;
+  const asManagedUserIsSelected = props.asManagedUserIsSelected;
   const notify = useNotify();
   const translate = useTranslate();
 
   const handleDeleteClick = (ev: React.MouseEvent<HTMLDivElement>) => {
     if (ownUserIsSelected) {
-      notify(<Alert severity="error">{translate("resources.users.helper.erase_admin_error")}</Alert>)
+      notify(<Alert severity="error">{translate("resources.users.helper.erase_admin_error")}</Alert>);
+      ev.stopPropagation();
+    } else if (asManagedUserIsSelected) {
+      notify(<Alert severity="error">{translate("resources.users.helper.modify_managed_user_error")}</Alert>);
       ev.stopPropagation();
     }
   };
 
-  return <div onClickCapture={handleDeleteClick}>
+  return <div onClickCapture={handleDeleteClick}>{props.children}</div>;
-    {props.children}
-  </div>
 };
 
 const UserBulkActionButtons = () => {
   const record = useListContext();
-  const [ ownUserIsSelected, setOwnUserIsSelected ] = useState(false);
+  const [ownUserIsSelected, setOwnUserIsSelected] = useState(false);
+  const [asManagedUserIsSelected, setAsManagedUserIsSelected] = useState(false);
   const selectedIds = record.selectedIds;
   const ownUserId = localStorage.getItem("user_id");
-  const notify = useNotify();
-  const translate = useTranslate();
 
   useEffect(() => {
     setOwnUserIsSelected(selectedIds.includes(ownUserId));
-  }, [ selectedIds ]);
+    setAsManagedUserIsSelected(selectedIds.some(id => isASManaged(id)));
+  }, [selectedIds]);
 
-
+  return (
-  return <>
+    <>
       <ServerNoticeBulkButton />
-    <UserPreventSelfDelete ownUserIsSelected={ownUserIsSelected}>
+      <UserPreventSelfDelete ownUserIsSelected={ownUserIsSelected} asManagedUserIsSelected={asManagedUserIsSelected}>
-      <BulkDeleteButton
+        <DeleteUserButton
-        label="resources.users.action.erase"
+          selectedIds={selectedIds}
           confirmTitle="resources.users.helper.erase"
-        mutationMode="pessimistic"
+          confirmContent="resources.users.helper.erase_text"
         />
       </UserPreventSelfDelete>
     </>
-};
+  );
-
-const usersRowClick = (id: Identifier, resource: string, record: RaRecord): string => {
-  return `/users/${id}`;
 };
 
 export const UserList = (props: ListProps) => (
@@ -156,7 +161,10 @@ export const UserList = (props: ListProps) => (
     actions={<UserListActions />}
     pagination={<UserPagination />}
   >
-    <Datagrid rowClick={usersRowClick} bulkActionButtons={<UserBulkActionButtons />}>
+    <DatagridConfigurable
+      rowClick={(id: Identifier, resource: string) => `/${resource}/${id}`}
+      bulkActionButtons={<UserBulkActionButtons />}
+    >
       <AvatarField source="avatar_src" sx={{ height: "40px", width: "40px" }} sortBy="avatar_url" />
       <TextField source="id" sortBy="name" />
       <TextField source="displayname" />
@@ -166,7 +174,7 @@ export const UserList = (props: ListProps) => (
       <BooleanField source="locked" />
       <BooleanField source="erased" sortable={false} />
       <DateField source="creation_ts" label="resources.users.fields.creation_ts_ms" showTime options={DATE_FORMAT} />
-    </Datagrid>
+    </DatagridConfigurable>
   </List>
 );
 
@@ -183,30 +191,33 @@ const UserEditActions = () => {
   const translate = useTranslate();
   const ownUserId = localStorage.getItem("user_id");
   let ownUserIsSelected = false;
+  let asManagedUserIsSelected = false;
   if (record && record.id) {
     ownUserIsSelected = record.id === ownUserId;
+    asManagedUserIsSelected = isASManaged(record.id);
   }
 
   return (
     <TopToolbar>
       {!record?.deactivated && <ServerNoticeButton />}
-      <UserPreventSelfDelete ownUserIsSelected={ownUserIsSelected}>
+      {record && record.id && (
-        <DeleteButton
+      <UserPreventSelfDelete ownUserIsSelected={ownUserIsSelected} asManagedUserIsSelected={asManagedUserIsSelected}>
-          label="resources.users.action.erase"
+        <DeleteUserButton
-          confirmTitle={translate("resources.users.helper.erase", {
+          selectedIds={[record?.id]}
-            smart_count: 1,
+          confirmTitle="resources.users.helper.erase"
-          })}
+          confirmContent="resources.users.helper.erase_text"
-          mutationMode="pessimistic"
         />
       </UserPreventSelfDelete>
+      )}
     </TopToolbar>
   );
 };
 
 export const UserCreate = (props: CreateProps) => (
- <Create { ...props} redirect={(resource, id, data) => {
+  <Create
-    return `users/${id}`;
+    {...props}
-  }}>
+    redirect={(resource: string | undefined, id: Identifier | undefined) => `${resource}/${id}`}
+  >
     <SimpleForm>
       <TextInput source="id" autoComplete="off" validate={validateUser} />
       <TextInput source="displayname" validate={maxLength(256)} />
@@ -232,12 +243,20 @@ export const UserCreate = (props: CreateProps) => (
 const UserTitle = () => {
   const record = useRecordContext();
   const translate = useTranslate();
+  if (!record) {
+    return null;
+  }
+
+  let username = record ? (record.displayname ? `"${record.displayname}"` : `"${record.name}"`) : ""
+  if (isASManaged(record?.id)) {
+    username += " 🤖";
+  }
   return (
     <span>
       {translate("resources.users.name", {
         smart_count: 1,
       })}{" "}
-      {record ? ( record.displayname ? `"${record.displayname}"` : `"${record.name}"`) : ""}
+      {username}
     </span>
   );
 };
@@ -246,48 +265,107 @@ const UserEditToolbar = () => {
   const record = useRecordContext();
   const ownUserId = localStorage.getItem("user_id");
   let ownUserIsSelected = false;
+  let asManagedUserIsSelected = false;
   if (record && record.id) {
     ownUserIsSelected = record.id === ownUserId;
+    asManagedUserIsSelected = isASManaged(record.id);
   }
 
-  return <>
+  return (
+    <>
       <div className={ToolbarClasses.defaultToolbar}>
         <Toolbar sx={{ justifyContent: "space-between" }}>
           <SaveButton />
-          <UserPreventSelfDelete ownUserIsSelected={ownUserIsSelected}>
+          <UserPreventSelfDelete ownUserIsSelected={ownUserIsSelected} asManagedUserIsSelected={asManagedUserIsSelected}>
             <DeleteButton />
           </UserPreventSelfDelete>
         </Toolbar>
       </div>
     </>
+  );
 };
 
-const UserBooleanInput = (props) => {
+const UserBooleanInput = props => {
   const record = useRecordContext();
   const ownUserId = localStorage.getItem("user_id");
-  const isOwnUser = false;
   let ownUserIsSelected = false;
-  if (record && (record.id === ownUserId)) {
+  let asManagedUserIsSelected = false;
-    ownUserIsSelected = true;
+  if (record) {
+    ownUserIsSelected = record.id === ownUserId;
+    asManagedUserIsSelected = isASManaged(record.id);
   }
 
-  return <UserPreventSelfDelete ownUserIsSelected={ownUserIsSelected}><BooleanInput {...props} disabled={ownUserIsSelected} /></UserPreventSelfDelete>
+  return (
-}
+    <UserPreventSelfDelete ownUserIsSelected={ownUserIsSelected} asManagedUserIsSelected={asManagedUserIsSelected}>
+      <BooleanInput {...props} disabled={ownUserIsSelected || asManagedUserIsSelected} />
+    </UserPreventSelfDelete>
+  );
+};
+
+const UserPasswordInput = props => {
+  const record = useRecordContext();
+  let asManagedUserIsSelected = false;
+
+  // Get form context to update field value
+  const form = useFormContext();
+  if (record) {
+    asManagedUserIsSelected = isASManaged(record.id);
+  }
+
+  const generatePassword = () => {
+    const password = generateRandomPassword();
+    if (record) {
+      form.setValue("password", password, { shouldDirty: true });
+    }
+  };
+
+  return (
+    <>
+      <PasswordInput {...props} helperText="resources.users.helper.modify_managed_user_error"
+        {...(asManagedUserIsSelected ? { disabled: true } : {})}
+       />
+       <Button
+        variant="outlined"
+        label="Generate Password"
+        onClick={generatePassword}
+        sx={{ marginBottom: "10px" }}
+        disabled={asManagedUserIsSelected}
+      />
+    </>
+  );
+};
 
 export const UserEdit = (props: EditProps) => {
   const translate = useTranslate();
 
   return (
-    <Edit {...props} title={<UserTitle />} actions={<UserEditActions />}>
+    <Edit {...props} title={<UserTitle />} actions={<UserEditActions />} mutationMode="pessimistic" queryOptions={{
+      meta: {
+        include: ["features"] // Tell your dataProvider to include features
+      }
+    }}>
       <TabbedForm toolbar={<UserEditToolbar />}>
         <FormTab label={translate("resources.users.name", { smart_count: 1 })} icon={<PersonPinIcon />}>
-          <AvatarField source="avatar_src" sortable={false} sx={{ height: "120px", width: "120px", float: "right" }} />
+          <AvatarField source="avatar_src" sx={{ height: "120px", width: "120px" }} />
-          <TextInput source="id" disabled />
+          <BooleanInput source="avatar_erase" label="resources.users.action.erase_avatar" />
+          <ImageInput
+            source="avatar_file"
+            label="resources.users.fields.avatar"
+            accept={{ "image/*": [".png", ".jpg"] }}
+          >
+            <ImageField source="src" title="Avatar" sx={{ '& img': {
+              width: "120px !important",
+              height: "120px !important",
+              objectFit: "cover !important",
+              borderRadius: '50% !important',
+            }}} />
+          </ImageInput>
+          <TextInput source="id" readOnly />
           <TextInput source="displayname" />
-          <PasswordInput source="password" autoComplete="new-password" helperText="resources.users.helper.password" />
+          <UserPasswordInput source="password" autoComplete="new-password" helperText="resources.users.helper.password" />
           <SelectInput source="user_type" choices={choices_type} translateChoice={false} resettable />
           <BooleanInput source="admin" />
-          <BooleanInput source="locked" />
+          <UserBooleanInput source="locked" />
           <UserBooleanInput source="deactivated" helperText="resources.users.helper.deactivate" />
           <BooleanInput source="erased" disabled />
           <DateField source="creation_ts_ms" showTime options={DATE_FORMAT} />
@@ -314,7 +392,7 @@ export const UserEdit = (props: EditProps) => {
 
         <FormTab label={translate("resources.devices.name", { smart_count: 2 })} icon={<DevicesIcon />} path="devices">
           <ReferenceManyField reference="devices" target="user_id" label={false}>
-            <Datagrid style={{ width: "100%" }}>
+            <Datagrid style={{ width: "100%" }} bulkActionButtons={false}>
               <TextField source="device_id" sortable={false} />
               <TextField source="display_name" sortable={false} />
               <TextField source="last_seen_ip" sortable={false} />
@@ -354,8 +432,8 @@ export const UserEdit = (props: EditProps) => {
               <DateField source="created_ts" showTime options={DATE_FORMAT} />
               <DateField source="last_access_ts" showTime options={DATE_FORMAT} />
               <NumberField source="media_length" />
-              <TextField source="media_type" />
+              <TextField source="media_type" sx={{ display: "block", width: 200, wordBreak: "break-word" }} />
-              <TextField source="upload_name" />
+              <FunctionField source="upload_name" render={record => decodeURIComponent(record.upload_name)} />
               <TextField source="quarantined_by" />
               <QuarantineMediaButton label="resources.quarantine_media.action.name" />
               <ProtectMediaButton label="resources.users_media.fields.safe_from_quarantine" />
@@ -399,6 +477,14 @@ export const UserEdit = (props: EditProps) => {
             </Datagrid>
           </ReferenceManyField>
         </FormTab>
+
+        <FormTab label="synapseadmin.users.tabs.experimental" icon={<ScienceIcon />} path="experimental">
+          <ExperimentalFeaturesList />
+        </FormTab>
+
+        <FormTab label="synapseadmin.users.tabs.limits" icon={<LockClockIcon />} path="limits">
+          <UserRateLimits />
+        </FormTab>
       </TabbedForm>
     </Edit>
   );

src/synapse/authProvider.test.ts

@@ -23,14 +23,14 @@ describe("authProvider", () => {
         })
       );
 
-      const ret: undefined = await authProvider.login({
+      const ret = await authProvider.login({
         base_url: "http://example.com",
         username: "@user:example.com",
         password: "secret",
       });
 
-      expect(ret).toBe(undefined);
+      expect(ret).toEqual({redirectTo: "/"});
-      expect(fetch).toBeCalledWith("http://example.com/_matrix/client/r0/login", {
+      expect(fetch).toHaveBeenCalledWith("http://example.com/_matrix/client/v3/login", {
         body: '{"device_id":null,"initial_device_display_name":"Synapse Admin","type":"m.login.password","identifier":{"type":"m.id.user","user":"@user:example.com"},"password":"secret"}',
         headers: new Headers({
           Accept: "application/json",
@@ -55,13 +55,13 @@ describe("authProvider", () => {
       })
     );
 
-    const ret: undefined = await authProvider.login({
+    const ret = await authProvider.login({
       base_url: "https://example.com/",
       loginToken: "login_token",
     });
 
-    expect(ret).toBe(undefined);
+    expect(ret).toEqual({redirectTo: "/"});
-    expect(fetch).toHaveBeenCalledWith("https://example.com/_matrix/client/r0/login", {
+    expect(fetch).toHaveBeenCalledWith("https://example.com/_matrix/client/v3/login", {
       body: '{"device_id":null,"initial_device_display_name":"Synapse Admin","type":"m.login.token","token":"login_token"}',
       headers: new Headers({
         Accept: "application/json",
@@ -83,7 +83,7 @@ describe("authProvider", () => {
 
       await authProvider.logout(null);
 
-      expect(fetch).toBeCalledWith("example.com/_matrix/client/r0/logout", {
+      expect(fetch).toHaveBeenCalledWith("example.com/_matrix/client/v3/logout", {
         headers: new Headers({
           Accept: "application/json",
           Authorization: "Bearer foo",
@@ -101,7 +101,7 @@ describe("authProvider", () => {
     });
 
     it("should reject if error.status is 401", async () => {
-      await expect(authProvider.checkError({ status: 401 })).rejects.toBeUndefined();
+      await expect(authProvider.checkError(new HttpError("test-error", 401, {errcode: "test-errcode", error: "test-error"}))).rejects.toBeDefined();
     });
 
     it("should reject if error.status is 403", async () => {
@@ -123,7 +123,9 @@ describe("authProvider", () => {
 
   describe("getPermissions", () => {
     it("should do nothing", async () => {
+      if (authProvider.getPermissions) {
         await expect(authProvider.getPermissions(null)).resolves.toBeUndefined();
+      }
     });
   });
 });

src/synapse/authProvider.ts

@@ -1,7 +1,9 @@
-import { AuthProvider, HttpError, Options, fetchUtils, useTranslate } from "react-admin";
+import { AuthProvider, HttpError, Options, fetchUtils } from "react-admin";
 
 import storage from "../storage";
 import { MatrixError, displayError } from "../components/error";
+import { fetchAuthenticatedMedia } from "../utils/fetchMedia";
+import { ClearConfig } from "../components/config";
 
 const authProvider: AuthProvider = {
   // called when the user attempts to log in
@@ -10,14 +12,16 @@ const authProvider: AuthProvider = {
     username,
     password,
     loginToken,
+    accessToken,
   }: {
     base_url: string;
     username: string;
     password: string;
     loginToken: string;
+    accessToken: string;
   }) => {
     console.log("login ");
-    const options: Options = {
+    let options: Options = {
       method: "POST",
       body: JSON.stringify(
         Object.assign(
@@ -55,11 +59,30 @@ const authProvider: AuthProvider = {
     storage.setItem("base_url", base_url);
 
     const decoded_base_url = window.decodeURIComponent(base_url);
-    const login_api_url = decoded_base_url + "/_matrix/client/r0/login";
+    let login_api_url = decoded_base_url + (accessToken ? "/_matrix/client/v3/account/whoami" : "/_matrix/client/v3/login");
 
     let response;
+
     try {
+      if (accessToken) {
+        // this a login with an already obtained access token, let's just validate it
+        options = {
+          headers: new Headers({
+            Accept: 'application/json',
+            Authorization: `Bearer ${accessToken}`,
+          }),
+        };
+      }
+
       response = await fetchUtils.fetchJson(login_api_url, options);
+      const json = response.json;
+      storage.setItem("home_server", accessToken ? json.user_id.split(":")[1] : json.home_server);
+      storage.setItem("user_id", json.user_id);
+      storage.setItem("access_token", accessToken ? accessToken : json.access_token);
+      storage.setItem("device_id", json.device_id);
+      storage.setItem("login_type", accessToken ? "accessToken" : "credentials");
+
+      return Promise.resolve({redirectTo: "/"});
     } catch(err) {
       const error = err as HttpError;
       const errorStatus = error.status;
@@ -73,18 +96,49 @@ const authProvider: AuthProvider = {
         )
       );
     }
+  },
+  getIdentity: async () => {
+    const access_token = storage.getItem("access_token");
+    const user_id = storage.getItem("user_id");
+    const base_url = storage.getItem("base_url");
 
-    const json = response.json;
+    if (typeof access_token !== "string" || typeof user_id !== "string" || typeof base_url !== "string") {
-    storage.setItem("home_server", json.home_server);
+      return Promise.reject();
-    storage.setItem("user_id", json.user_id);
+    }
-    storage.setItem("access_token", json.access_token);
+
-    storage.setItem("device_id", json.device_id);
+    const options: Options = {
+      headers: new Headers({
+        Accept: "application/json",
+        Authorization: `Bearer ${access_token}`,
+      }),
+    };
+
+    const whoami_api_url = base_url + `/_matrix/client/v3/profile/${user_id}`;
+
+    try {
+      let avatar_url = "";
+      const response = await fetchUtils.fetchJson(whoami_api_url, options);
+      if (response.json.avatar_url) {
+        const mediaresp = await fetchAuthenticatedMedia(response.json.avatar_url, "thumbnail");
+        const blob = await mediaresp.blob();
+        avatar_url = URL.createObjectURL(blob);
+      }
+
+      return Promise.resolve({
+        id: user_id,
+        fullName: response.json.displayname,
+        avatar: avatar_url,
+      });
+    } catch (err) {
+      console.log("Error getting identity", err);
+      return Promise.reject();
+    }
   },
   // called when the user clicks on the logout button
   logout: async () => {
     console.log("logout");
 
-    const logout_api_url = storage.getItem("base_url") + "/_matrix/client/r0/logout";
+    const logout_api_url = storage.getItem("base_url") + "/_matrix/client/v3/logout";
     const access_token = storage.getItem("access_token");
 
     const options: Options = {
@@ -96,8 +150,13 @@ const authProvider: AuthProvider = {
     };
 
     if (typeof access_token === "string") {
+      try {
         await fetchUtils.fetchJson(logout_api_url, options);
-      storage.removeItem("access_token");
+      } catch (err) {
+        console.log("Error logging out", err);
+      } finally {
+        ClearConfig();
+      }
     }
   },
   // called when the API returns an error

src/synapse/dataProvider.test.ts

@@ -18,7 +18,7 @@ describe("dataProvider", () => {
       JSON.stringify({
         users: [
           {
-            name: "user_id1",
+            name: "@user_id1:provider",
             password_hash: "password_hash1",
             is_guest: 0,
             admin: 0,
@@ -27,7 +27,7 @@ describe("dataProvider", () => {
             displayname: "User One",
           },
           {
-            name: "user_id2",
+            name: "@user_id2:provider",
             password_hash: "password_hash2",
             is_guest: 0,
             admin: 1,
@@ -47,7 +47,7 @@ describe("dataProvider", () => {
       filter: { author_id: 12 },
     });
 
-    expect(users.data[0].id).toEqual("user_id1");
+    expect(users.data[0].id).toEqual("@user_id1:provider");
     expect(users.total).toEqual(200);
     expect(fetch).toHaveBeenCalledTimes(1);
   });
@@ -55,7 +55,7 @@ describe("dataProvider", () => {
   it("fetches one user", async () => {
     fetchMock.mockResponseOnce(
       JSON.stringify({
-        name: "user_id1",
+        name: "@user_id1:provider",
         password: "user_password",
         displayname: "User",
         threepids: [
@@ -74,9 +74,9 @@ describe("dataProvider", () => {
       })
     );
 
-    const user = await dataProvider.getOne("users", { id: "user_id1" });
+    const user = await dataProvider.getOne("users", { id: "@user_id1:provider" });
 
-    expect(user.data.id).toEqual("user_id1");
+    expect(user.data.id).toEqual("@user_id1:provider");
     expect(user.data.displayname).toEqual("User");
     expect(fetch).toHaveBeenCalledTimes(1);
   });

src/synapse/dataProvider.ts

@@ -1,15 +1,27 @@
-import { stringify } from "query-string";
+import {
-
+  DataProvider,
-import { DataProvider, DeleteParams, HttpError, Identifier, Options, RaRecord, fetchUtils } from "react-admin";
+  DeleteParams,
+  DeleteManyParams,
+  HttpError,
+  Identifier,
+  Options,
+  PaginationPayload,
+  RaRecord,
+  SortPayload,
+  UpdateParams,
+  fetchUtils,
+  withLifecycleCallbacks,
+} from "react-admin";
 
 import storage from "../storage";
+import { returnMXID } from "./synapse";
 import { MatrixError, displayError } from "../components/error";
 
 // Adds the access token to all requests
 const jsonClient = async (url: string, options: Options = {}) => {
   const token = storage.getItem("access_token");
   console.log("httpClient " + url);
-  if (token != null) {
+  if (token !== null) {
     options.user = {
       authenticated: true,
       token: `Bearer ${token}`,
@@ -22,23 +34,24 @@ const jsonClient = async (url: string, options: Options = {}) => {
     const error = err as HttpError;
     const errorStatus = error.status;
     const errorBody = error.body as MatrixError;
-    const errMsg = !!errorBody?.errcode ? displayError(errorBody.errcode, errorStatus, errorBody.error) : displayError("M_INVALID", errorStatus, error.message);
+    const errMsg = !!errorBody?.errcode
+      ? displayError(errorBody.errcode, errorStatus, errorBody.error)
+      : displayError("M_INVALID", errorStatus, error.message);
 
     return Promise.reject(new HttpError(errMsg, errorStatus, errorBody));
   }
 };
 
-const mxcUrlToHttp = (mxcUrl: string) => {
+const filterUndefined = (obj: Record<string, any>) => {
-  const homeserver = storage.getItem("base_url");
+  return Object.fromEntries(Object.entries(obj).filter(([key, value]) => value !== undefined));
-  const re = /^mxc:\/\/([^/]+)\/(\w+)/;
-  const ret = re.exec(mxcUrl);
-  console.log("mxcClient " + ret);
-  if (ret == null) return null;
-  const serverName = ret[1];
-  const mediaId = ret[2];
-  return `${homeserver}/_matrix/media/r0/thumbnail/${serverName}/${mediaId}?width=24&height=24&method=scale`;
 };
 
+interface Action {
+  endpoint: string;
+  method?: string;
+  body?: Record<string, any>;
+}
+
 interface Room {
   room_id: string;
   name?: string;
@@ -225,17 +238,42 @@ export interface DeleteMediaResult {
   total: number;
 }
 
+export interface UploadMediaParams {
+  file: File;
+  filename: string;
+  content_type: string;
+}
+
+export interface UploadMediaResult {
+  content_uri: string;
+}
+
+export interface ExperimentalFeaturesModel {
+  features: {
+    [key: string]: boolean;
+  };
+}
+
+export interface RateLimitsModel {
+  messages_per_second?: number;
+  burst_count?: number;
+}
+
 export interface SynapseDataProvider extends DataProvider {
   deleteMedia: (params: DeleteMediaParams) => Promise<DeleteMediaResult>;
+  uploadMedia: (params: UploadMediaParams) => Promise<UploadMediaResult>;
+  updateFeatures: (id: Identifier, features: ExperimentalFeaturesModel) => Promise<void>;
+  getRateLimits: (id: Identifier) => Promise<RateLimitsModel>;
+  setRateLimits: (id: Identifier, rateLimits: RateLimitsModel) => Promise<void>;
 }
 
 const resourceMap = {
   users: {
     path: "/_synapse/admin/v2/users",
-    map: (u: User) => ({
+    map: async (u: User) => ({
       ...u,
-      id: u.name,
+      id: returnMXID(u.name),
-      avatar_src: u.avatar_url ? mxcUrlToHttp(u.avatar_url) : undefined,
+      avatar_src: u.avatar_url ? u.avatar_url : undefined,
       is_guest: !!u.is_guest,
       admin: !!u.admin,
       deactivated: !!u.deactivated,
@@ -245,12 +283,12 @@ const resourceMap = {
     data: "users",
     total: json => json.total,
     create: (data: RaRecord) => ({
-      endpoint: `/_synapse/admin/v2/users/@${encodeURIComponent(data.id)}:${storage.getItem("home_server")}`,
+      endpoint: `/_synapse/admin/v2/users/${encodeURIComponent(returnMXID(data.id))}`,
       body: data,
       method: "PUT",
     }),
     delete: (params: DeleteParams) => ({
-      endpoint: `/_synapse/admin/v1/deactivate/${encodeURIComponent(params.id)}`,
+      endpoint: `/_synapse/admin/v1/deactivate/${encodeURIComponent(returnMXID(params.id))}`,
       body: { erase: true },
       method: "POST",
     }),
@@ -349,7 +387,7 @@ const resourceMap = {
       id: um.media_id,
     }),
     reference: (id: Identifier) => ({
-      endpoint: `/_synapse/admin/v1/users/${encodeURIComponent(id)}/media`,
+      endpoint: `/_synapse/admin/v1/users/${encodeURIComponent(returnMXID(id))}/media`,
     }),
     data: "media",
     total: json => json.total,
@@ -384,7 +422,7 @@ const resourceMap = {
     create: (data: RaServerNotice) => ({
       endpoint: "/_synapse/admin/v1/send_server_notice",
       body: {
-        user_id: data.id,
+        user_id: returnMXID(data.id),
         content: {
           msgtype: "m.text",
           body: data.body,
@@ -397,7 +435,7 @@ const resourceMap = {
     path: "/_synapse/admin/v1/statistics/users/media",
     map: (usms: UserMediaStatistic) => ({
       ...usms,
-      id: usms.user_id,
+      id: returnMXID(usms.user_id),
     }),
     data: "users",
     total: json => json.total,
@@ -423,7 +461,7 @@ const resourceMap = {
       id: rd.room_id,
       public: !!rd.public,
       guest_access: !!rd.guest_access,
-      avatar_src: rd.avatar_url ? mxcUrlToHttp(rd.avatar_url) : undefined,
+      avatar_src: rd.avatar_url ? rd.avatar_url : undefined,
     }),
     data: "chunk",
     total: json => json.total_room_count_estimate,
@@ -499,12 +537,12 @@ function getSearchOrder(order: "ASC" | "DESC") {
   }
 }
 
-const dataProvider: SynapseDataProvider = {
+const baseDataProvider: SynapseDataProvider = {
   getList: async (resource, params) => {
     console.log("getList " + resource);
     const { user_id, name, guests, deactivated, locked, search_term, destination, valid } = params.filter;
-    const { page, perPage } = params.pagination;
+    const { page, perPage } = params.pagination as PaginationPayload;
-    const { field, order } = params.sort;
+    const { field, order } = params.sort as SortPayload;
     const from = (page - 1) * perPage;
     const query = {
       from: from,
@@ -526,11 +564,13 @@ const dataProvider: SynapseDataProvider = {
     const res = resourceMap[resource];
 
     const endpoint_url = homeserver + res.path;
-    const url = `${endpoint_url}?${stringify(query)}`;
+    const url = `${endpoint_url}?${new URLSearchParams(filterUndefined(query)).toString()}`;
 
     const { json } = await jsonClient(url);
+    const formattedData = await json[res.data].map(res.map);
+
     return {
-      data: json[res.data].map(res.map),
+      data: formattedData,
       total: res.total(json, from, perPage),
     };
   },
@@ -549,13 +589,28 @@ const dataProvider: SynapseDataProvider = {
 
   getMany: async (resource, params) => {
     console.log("getMany " + resource);
-    const homeserver = storage.getItem("base_url");
+    const base_url = storage.getItem("base_url");
-    if (!homeserver || !(resource in resourceMap)) throw Error("Homerserver not set");
+    const homeserver = storage.getItem("home_server");
+    if (!base_url || !(resource in resourceMap)) throw Error("base_url not set");
 
     const res = resourceMap[resource];
 
-    const endpoint_url = homeserver + res.path;
+    const endpoint_url = base_url + res.path;
-    const responses = await Promise.all(params.ids.map(id => jsonClient(`${endpoint_url}/${encodeURIComponent(id)}`)));
+    const responses = await Promise.all(params.ids.map(id => {
+      // edge case: when user is external / federated, homeserver will return error, as querying external users via
+      // /_synapse/admin/v2/users is not allowed.
+      // That leads to an issue when a user is referenced (e.g., in room state datagrid) - the user cell is just empty.
+      // To avoid that, we fake the response with one specific field (name) which is used in the datagrid.
+      if (homeserver && resource === "users") {
+        if (!(<string>id).endsWith(homeserver)) {
+          const json = {
+              name: id,
+          };
+          return Promise.resolve({ json });
+        }
+      }
+      return jsonClient(`${endpoint_url}/${encodeURIComponent(id)}`);
+    }));
     return {
       data: responses.map(({ json }) => res.map(json)),
       total: responses.length,
@@ -580,7 +635,7 @@ const dataProvider: SynapseDataProvider = {
     const res = resourceMap[resource];
 
     const ref = res.reference(params.id);
-    const endpoint_url = `${homeserver}${ref.endpoint}?${stringify(query)}`;
+    const endpoint_url = `${homeserver}${ref.endpoint}?${new URLSearchParams(filterUndefined(query)).toString()}`;
 
     const { json } = await jsonClient(endpoint_url);
     return {
@@ -686,7 +741,7 @@ const dataProvider: SynapseDataProvider = {
   },
 
   deleteMany: async (resource, params) => {
-    console.log("deleteMany " + resource);
+    console.log("deleteMany " + resource, "params", params);
     const homeserver = storage.getItem("base_url");
     if (!homeserver || !(resource in resourceMap)) throw Error("Homeserver not set");
 
@@ -703,6 +758,7 @@ const dataProvider: SynapseDataProvider = {
           });
         })
       );
+
       return {
         data: responses.map(({ json }) => json),
       };
@@ -741,6 +797,107 @@ const dataProvider: SynapseDataProvider = {
     const { json } = await jsonClient(endpoint_url, { method: "POST" });
     return json as DeleteMediaResult;
   },
+
+  uploadMedia: async ({ file, filename, content_type }: UploadMediaParams) => {
+    const base_url = storage.getItem("base_url");
+    const uploadMediaURL = `${base_url}/_matrix/media/v3/upload`;
+
+    const { json } = await jsonClient(`${uploadMediaURL}?filename=${filename}`, {
+      method: "POST",
+      body: file,
+      headers: new Headers({
+        Accept: "application/json",
+        "Content-Type": content_type,
+      }) as Headers,
+    });
+    return json as UploadMediaResult;
+  },
+  getFeatures: async (id: Identifier) => {
+    const base_url = storage.getItem("base_url");
+    const endpoint_url = `${base_url}/_synapse/admin/v1/experimental_features/${encodeURIComponent(returnMXID(id))}`;
+    const { json } = await jsonClient(endpoint_url);
+    return json.features as ExperimentalFeaturesModel;
+  },
+  updateFeatures: async (id: Identifier, features: ExperimentalFeaturesModel) => {
+    const base_url = storage.getItem("base_url");
+    const endpoint_url = `${base_url}/_synapse/admin/v1/experimental_features/${encodeURIComponent(returnMXID(id))}`;
+    await jsonClient(endpoint_url, { method: "PUT", body: JSON.stringify({ features }) });
+  },
+  getRateLimits: async (id: Identifier) => {
+    const base_url = storage.getItem("base_url");
+    const endpoint_url = `${base_url}/_synapse/admin/v1/users/${encodeURIComponent(returnMXID(id))}/override_ratelimit`;
+    const { json } = await jsonClient(endpoint_url);
+    return json as RateLimitsModel;
+  },
+  setRateLimits: async (id: Identifier, rateLimits: RateLimitsModel) => {
+    const base_url = storage.getItem("base_url");
+    const endpoint_url = `${base_url}/_synapse/admin/v1/users/${encodeURIComponent(returnMXID(id))}/override_ratelimit`;
+    await jsonClient(endpoint_url, { method: "POST", body: JSON.stringify(rateLimits) });
+  },
 };
 
+const dataProvider = withLifecycleCallbacks(baseDataProvider, [
+  {
+    resource: "users",
+    beforeUpdate: async (params: UpdateParams<any>, dataProvider: DataProvider) => {
+      const avatarFile = params.data.avatar_file?.rawFile;
+      const avatarErase = params.data.avatar_erase;
+      const rates = params.data.rates;
+
+      if (rates) {
+        await dataProvider.setRateLimits(params.id, rates);
+        delete params.data.rates;
+      }
+
+      if (avatarErase) {
+        params.data.avatar_url = "";
+        return params;
+      }
+
+      if (avatarFile instanceof File) {
+        const reponse = await dataProvider.uploadMedia({
+          file: avatarFile,
+          filename: params.data.avatar_file.title,
+          content_type: params.data.avatar_file.rawFile.type,
+        });
+        params.data.avatar_url = reponse.content_uri;
+      }
+      return params;
+    },
+    beforeDelete: async (params: DeleteParams<any>, dataProvider: DataProvider) => {
+      if (params.meta?.deleteMedia) {
+        const base_url = storage.getItem("base_url");
+        const endpoint_url = `${base_url}/_synapse/admin/v1/users/${encodeURIComponent(returnMXID(params.id))}/media`;
+        await jsonClient(endpoint_url, { method: "DELETE" });
+      }
+
+      if (params.meta?.redactEvents) {
+        const base_url = storage.getItem("base_url");
+        const endpoint_url = `${base_url}/_synapse/admin/v1/user/${encodeURIComponent(returnMXID(params.id))}/redact`;
+        await jsonClient(endpoint_url, { method: "POST", body: JSON.stringify({ rooms: [] }) });
+      }
+
+      return params;
+    },
+    beforeDeleteMany: async (params: DeleteManyParams<any>, dataProvider: DataProvider) => {
+      await Promise.all(
+        params.ids.map(async id => {
+          if (params.meta?.deleteMedia) {
+            const base_url = storage.getItem("base_url");
+            const endpoint_url = `${base_url}/_synapse/admin/v1/users/${encodeURIComponent(returnMXID(id))}/media`;
+            await jsonClient(endpoint_url, { method: "DELETE" });
+          }
+
+          if (params.meta?.redactEvents) {
+            const base_url = storage.getItem("base_url");
+            const endpoint_url = `${base_url}/_synapse/admin/v1/user/${encodeURIComponent(returnMXID(id))}/redact`;
+            await jsonClient(endpoint_url, { method: "POST", body: JSON.stringify({ rooms: [] }) });
+          }
+        })
+      );
+      return params;
+    },
+  },
+]);
+
 export default dataProvider;

src/synapse/synapse.ts

@@ -1,4 +1,4 @@
-import { fetchUtils } from "react-admin";
+import { Identifier, fetchUtils } from "react-admin";
 
 import storage from "../storage";
 
@@ -54,11 +54,6 @@ export const getSupportedLoginFlows = async baseUrl => {
   return response.json.flows;
 };
 
-export const getMediaUrl = media_id => {
-  const baseUrl = storage.getItem("base_url");
-  return `${baseUrl}/_matrix/media/v1/download/${media_id}?allow_redirect=true`;
-};
-
 /**
  * Generate a random MXID for current homeserver
  * @returns full MXID as string
@@ -72,12 +67,32 @@ export function generateRandomMxId(): string {
   return `@${localpart}:${homeserver}`;
 }
 
+/**
+ * Return the full MXID from an arbitrary input
+ * @param input  the input string
+ * @returns full MXID as string
+ */
+export function returnMXID(input: string | Identifier): string {
+  const homeserver = storage.getItem("home_server");
+
+  // Check if the input already looks like a valid MXID (i.e., starts with "@" and contains ":")
+  const mxidPattern = /^@[^@:]+:[^@:]+$/;
+  if (typeof input === 'string' && mxidPattern.test(input)) {
+    return input; // Already a valid MXID
+  }
+
+  // If input is not a valid MXID, assume it's a localpart and construct the MXID
+  const localpart = typeof input === 'string' && input.startsWith('@') ? input.slice(1) : input;
+  return `@${localpart}:${homeserver}`;
+}
+
+
 /**
  * Generate a random user password
  * @returns a new random password as string
  */
-export function generateRandomPassword(length = 20): string {
+export function generateRandomPassword(length = 64): string {
-  const characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~!@-#$";
+  const characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~`!@#$%^&*()_-+={[}]|:;'.?/<>,";
   return Array.from(crypto.getRandomValues(new Uint32Array(length)))
     .map(x => characters[x % characters.length])
     .join("");

src/utils/fetchMedia.ts

@@ -0,0 +1,43 @@
+import storage from "../storage";
+
+export const getServerAndMediaIdFromMxcUrl = (mxcUrl: string): { serverName: string, mediaId: string } => {
+    const re = /^mxc:\/\/([^/]+)\/(\w+)/;
+    const ret = re.exec(mxcUrl);
+    console.log("mxcClient " + ret);
+    if (ret == null) {
+      throw new Error("Invalid mxcUrl");
+    }
+    const serverName = ret[1];
+    const mediaId = ret[2];
+    return { serverName, mediaId };
+};
+
+export type MediaType = "thumbnail" | "original";
+
+export const fetchAuthenticatedMedia = async (mxcUrl: string, type: MediaType): Promise<Response> => {
+  const homeserver = storage.getItem("base_url");
+  const accessToken = storage.getItem("access_token");
+
+  const { serverName, mediaId } = getServerAndMediaIdFromMxcUrl(mxcUrl);
+  if (!serverName || !mediaId) {
+    throw new Error("Invalid mxcUrl");
+  }
+
+  let url = "";
+  if (type === "thumbnail") {
+    // ref: https://spec.matrix.org/latest/client-server-api/#thumbnails
+    url = `${homeserver}/_matrix/client/v1/media/thumbnail/${serverName}/${mediaId}?width=320&height=240&method=scale`;
+  } else if (type === "original") {
+    url = `${homeserver}/_matrix/client/v1/media/download/${serverName}/${mediaId}`;
+  } else {
+    throw new Error("Invalid authenticated media type");
+  }
+
+  const response = await fetch(`${url}`, {
+    headers: {
+      authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  return response;
+};

testdata/synapse/homeserver.yaml

@@ -0,0 +1,191 @@
+account_threepid_delegates:
+  msisdn: ''
+alias_creation_rules:
+- action: allow
+  alias: '*'
+  room_id: '*'
+  user_id: '*'
+allow_guest_access: false
+allow_public_rooms_over_federation: true
+allow_public_rooms_without_auth: true
+app_service_config_files: []
+autocreate_auto_join_rooms: true
+background_updates: null
+caches:
+  global_factor: 0.5
+  per_cache_factors: null
+cas_config: null
+database:
+  args:
+    cp_max: 10
+    cp_min: 5
+    database: synapse
+    host: postgres
+    password: synapse
+    port: 5432
+    user: synapse
+  name: psycopg2
+  txn_limit: 0
+default_room_version: '10'
+disable_msisdn_registration: true
+email:
+enable_media_repo: true
+enable_metrics: false
+enable_registration: false
+enable_registration_captcha: false
+enable_registration_without_verification: false
+enable_room_list_search: true
+encryption_enabled_by_default_for_room_type: 'off'
+event_cache_size: 100K
+federation_rr_transactions_per_room_per_second: 50
+form_secret: sLKKoFMsQUZgLAW0vU1PQQ8ca1POGMDheurGtKW0uJ20iGqtxR9O7JQ6Knvs44Wi
+include_profile_data_on_invite: true
+instance_map: {}
+limit_profile_requests_to_users_who_share_rooms: false
+limit_remote_rooms: null
+listeners:
+- bind_addresses:
+  - '::'
+  port: 8008
+  resources:
+  - compress: false
+    names:
+    - client
+  tls: false
+  type: http
+  x_forwarded: true
+log_config: /config/synapse.log.config
+macaroon_secret_key: Lg8DxGGfy95J367eVJZHLxmqP9XtN4FKdKxWpPvBS3mhviq9at8sw7KHRPkGmyqE
+manhole_settings: null
+max_spider_size: 10M
+max_upload_size: 1024M
+media_retention:
+  local_media_lifetime: 30d
+  remote_media_lifetime: 7d
+media_storage_providers: []
+media_store_path: /media-store
+metrics_flags: null
+modules: []
+oembed: null
+oidc_providers: null
+old_signing_keys: null
+opentracing: null
+password_config:
+  enabled: true
+  localdb_enabled: true
+  pepper: zfvnYqxe3GTkdJ9BlfZiAqy2zMsjOg02uBTEiWLp2hjQGqlDw33pTSTplE6HoWlF
+  policy: null
+pid_file: /homeserver.pid
+presence:
+  enabled: true
+public_baseurl: http://synapse:8008/
+push:
+  include_content: true
+rc_admin_redaction:
+  burst_count: 50
+  per_second: 1
+rc_federation:
+  concurrent: 3
+  reject_limit: 50
+  sleep_delay: 500
+  sleep_limit: 10
+  window_size: 1000
+rc_invites:
+  per_issuer:
+    burst_count: 10
+    per_second: 0.3
+  per_room:
+    burst_count: 10
+    per_second: 0.3
+  per_user:
+    burst_count: 5
+    per_second: 0.003
+rc_joins:
+  local:
+    burst_count: 10
+    per_second: 0.1
+  remote:
+    burst_count: 10
+    per_second: 0.01
+rc_login:
+  account:
+    burst_count: 3
+    per_second: 0.17
+  address:
+    burst_count: 3
+    per_second: 0.17
+  failed_attempts:
+    burst_count: 3
+    per_second: 0.17
+rc_message:
+  burst_count: 10
+  per_second: 0.2
+rc_registration:
+  burst_count: 3
+  per_second: 0.17
+recaptcha_private_key: ''
+recaptcha_public_key: ''
+redaction_retention_period: 5m
+redis:
+  enabled: false
+  host: null
+  password: null
+  port: 6379
+registration_requires_token: false
+registration_shared_secret: jBUKJozByo8s3bvKtYFpB350ZAnxGlzXsDpAZkgOFJuQfKAFHhqbc2dw8D54u4T9
+report_stats: false
+require_auth_for_profile_requests: false
+retention:
+  enabled: true
+  purge_jobs:
+  - interval: 12h
+room_list_publication_rules:
+- action: allow
+  alias: '*'
+  room_id: '*'
+  user_id: '*'
+room_prejoin_state: null
+saml2_config:
+  sp_config: null
+  user_mapping_provider:
+    config: null
+server_name: synapse
+signing_key_path: /config/synapse.signing.key
+spam_checker: []
+sso: null
+stats: null
+stream_writers: {}
+templates: null
+tls_certificate_path: null
+tls_private_key_path: null
+trusted_key_servers:
+- server_name: matrix.org
+turn_allow_guests: false
+ui_auth: null
+url_preview_accept_language:
+- en-US
+- en
+url_preview_enabled: true
+url_preview_ip_range_blacklist:
+- 127.0.0.0/8
+- 10.0.0.0/8
+- 172.16.0.0/12
+- 192.168.0.0/16
+- 100.64.0.0/10
+- 192.0.0.0/24
+- 169.254.0.0/16
+- 192.88.99.0/24
+- 198.18.0.0/15
+- 192.0.2.0/24
+- 198.51.100.0/24
+- 203.0.113.0/24
+- 224.0.0.0/4
+- ::1/128
+- fe80::/10
+- fc00::/7
+- 2001:db8::/32
+- ff00::/8
+- fec0::/10
+user_directory: null
+user_ips_max_age: 5m
+

testdata/synapse/synapse.log.config

@@ -0,0 +1,28 @@
+version: 1
+formatters:
+    precise:
+        format: '%(asctime)s - %(name)s - %(lineno)d - %(levelname)s - %(request)s - %(message)s'
+filters:
+    context:
+        (): synapse.util.logcontext.LoggingContextFilter
+        request: ""
+handlers:
+    console:
+        class: logging.StreamHandler
+        formatter: precise
+        filters: [context]
+loggers:
+    synapse:
+        level: INFO
+    shared_secret_authenticator:
+        level: INFO
+    rest_auth_provider:
+        level: INFO
+    synapse.storage.SQL:
+        # beware: increasing this to DEBUG will make synapse log sensitive
+        # information such as access tokens.
+        level: INFO
+root:
+    level: INFO
+    handlers: [console]
+

testdata/synapse/synapse.signing.key

@@ -0,0 +1 @@
+ed25519 a_FswB rsh+VxdR4YUv6rFM6393VmSEJJxzaDrdwlVwLe2rcRo

tsconfig.json

@@ -24,7 +24,7 @@
     /* Strict Type-Checking Options */
     "strict": true                            /* Enable all strict type-checking options. */,
     "noImplicitAny": false                    /* Raise error on expressions and declarations with an implied 'any' type. */,
-    // "strictNullChecks": true,              /* Enable strict null checks. */
+    "strictNullChecks": true,                 /* Enable strict null checks. */
     // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
     // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
     // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */

vite.config.ts

@@ -5,13 +5,41 @@ import { defineConfig } from "vite";
 
 export default defineConfig({
   base: "./",
+  build: {
+    target: "esnext",
+  },
   plugins: [
     react(),
     vitePluginVersionMark({
-      command: "git describe --tags || git rev-parse --short HEAD",
+      name: "Synapse Admin",
-      ifMeta: true,
+      command: 'git describe --tags || git rev-parse --short HEAD || echo "${SYNAPSE_ADMIN_VERSION:-unknown}"',
-      ifLog: true,
+      ifMeta: false,
+      ifLog: false,
       ifGlobal: true,
+      outputFile: (version) => ({
+        path: "manifest.json",
+        content: JSON.stringify({
+          name: "Synapse Admin",
+          version: version,
+          description: "Synapse Admin is an admin console for synapse Matrix homeserver with additional features.",
+          categories: ["productivity", "utilities"],
+          orientation: "landscape",
+          icons: [{
+            src: "favicon.ico",
+            sizes: "32x32",
+            type: "image/x-icon"
+          },{
+            src: "images/logo.webp",
+            sizes: "512x512",
+            type: "image/webp",
+            purpose: "any maskable"
+          }],
+          start_url: ".",
+          display: "standalone",
+          theme_color: "#000000",
+          background_color: "#ffffff"
+        }),
+      }),
     }),
   ],
 });