Merge pull request #365 from etkecc/add-etke-server-commands

Add etke server commands panel inside server status page

.dockerignore

@@ -0,0 +1 @@
+/testdata

.github/dependabot.yml

@@ -4,16 +4,16 @@ updates:
     directory: "/"
     schedule:
       interval: "weekly"
-    open-pull-requests-limit: 10
+    open-pull-requests-limit: 30
 
   - package-ecosystem: "docker"
     directory: "/"
     schedule:
       interval: "weekly"
-    open-pull-requests-limit: 10
+    open-pull-requests-limit: 30
 
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:
       interval: "weekly"
-    open-pull-requests-limit: 10
+    open-pull-requests-limit: 30

Dockerfile.build

@@ -0,0 +1,11 @@
+FROM node:lts AS builder
+ARG BASE_PATH=./
+WORKDIR /src
+COPY . /src
+RUN yarn config set enableTelemetry 0 && \
+    yarn install --immutable --network-timeout=300000 && \
+    yarn build --base=$BASE_PATH
+
+FROM ghcr.io/static-web-server/static-web-server:2
+ENV SERVER_ROOT=/app
+COPY --from=builder /src/dist /app

README.md

@@ -5,28 +5,30 @@
     <a href="https://matrix.to/#/#synapse-admin:etke.cc">
       <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">
+    <a href="./LICENSE">
+      <img alt="License" src="https://img.shields.io/github/license/etkecc/synapse-admin">
+    </a>
   </h3>
-  <p align="center">Manager your Synapse homeserver with ease</p>
+  <p align="center">Feature-packed and visually customizable: A better way to manage your Synapse homeserver.</p>
 </p>
 
 ---
 
-![Screenshots](./screenshots.jpg)
-
-This project is built using [react-admin](https://marmelab.com/react-admin/).
+![Login form showing dark and light modes](./screenshots/auth.webp)
+![Screenshots](./screenshots/screenshots.jpg)
 
 <!-- vim-markdown-toc GFM -->
 
 * [Fork differences](#fork-differences)
-  * [Availability](#availability)
   * [Changes](#changes)
+    * [exclusive for etke.cc customers](#exclusive-for-etkecc-customers)
   * [Development](#development)
+  * [Support](#support)
 * [Configuration](#configuration)
+  * [Prefilling login form](#prefilling-login-form)
   * [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)
@@ -42,69 +44,103 @@ This project is built using [react-admin](https://marmelab.com/react-admin/).
 
 ## Fork differences
 
-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.
+With [Awesome-Technologies/synapse-admin](https://github.com/Awesome-Technologies/synapse-admin) as the upstream,
+this fork introduces numerous enhancements to improve usability and extend functionality,
+including support for authenticated media, advanced user management options, and visual customization.
+The full list is described below in the [Changes](#changes) section.
 
-### Availability
+**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 standalone app on [admin.etke.cc](https://admin.etke.cc)
+* As a prebuilt distribution on [GitHub Releases](https://github.com/etkecc/synapse-admin/releases)
+* As a Docker container on [GitHub Container Registry](https://github.com/etkecc/synapse-admin/pkgs/container/synapse-admin)
 * 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 list will be updated as new changes are added_
+
 The following changes are already implemented:
 
-* [Prevent admins from deleting themselves](https://github.com/etkecc/synapse-admin/pull/1)
-* [Fix user's default tab not being shown](https://github.com/etkecc/synapse-admin/pull/8)
-* [Add identifier when authorizing with password](https://github.com/Awesome-Technologies/synapse-admin/pull/601)
-* [Add ability to toggle whether to show locked users](https://github.com/Awesome-Technologies/synapse-admin/pull/573)
-* [Fix user's display name in header on user's page](https://github.com/etkecc/synapse-admin/pull/9)
-* [Fix footer overlapping content](https://github.com/Awesome-Technologies/synapse-admin/issues/574)
-* Switch from nginx to [SWS](https://static-web-server.net/) for serving the app, reducing the size of the Docker image
-* [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) (later replaced
-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)
+* 🛑 [Prevent admins from deleting themselves](https://github.com/etkecc/synapse-admin/pull/1)
+* 🐛 [Fix user's default tab not being shown](https://github.com/etkecc/synapse-admin/pull/8)
+* 🔑 [Add identifier when authorizing with password](https://github.com/Awesome-Technologies/synapse-admin/pull/601)
+* 🔒 [Add ability to toggle whether to show locked users](https://github.com/Awesome-Technologies/synapse-admin/pull/573)
+* 🖊️ [Fix user's display name in header on user's page](https://github.com/etkecc/synapse-admin/pull/9)
+* 🧹 [Fix footer overlapping content](https://github.com/Awesome-Technologies/synapse-admin/issues/574)
+* 🐋 Switch from nginx to [SWS](https://static-web-server.net/) for serving the app, reducing the size of the Docker image
+* 🔄 [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) (later replaced 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)
+* 🛑 [Prevent accidental user overwrites](https://github.com/etkecc/synapse-admin/pull/139)
+* 🔍 [Allow providing login form details via GET params](https://github.com/etkecc/synapse-admin/pull/140)
+* 🎨 [Add preferred theme colors to login page and footer](https://github.com/etkecc/synapse-admin/pull/155)
+* 🛡️ [Add "Assign Admin" button to the rooms](https://github.com/etkecc/synapse-admin/pull/156)
+* 🖼️ [Add rooms' avatars](https://github.com/etkecc/synapse-admin/pull/158)
+* 🏷️ [User Badges](https://github.com/etkecc/synapse-admin/pull/160)
+* 🔄 [Allow prefilling any fields on the login form via GET params](https://github.com/etkecc/synapse-admin/pull/181)
+* 🎞️ [Add "Media" tab for rooms](https://github.com/etkecc/synapse-admin/pull/196)
+* 📞 [Support E.164-based Matrix IDs (MSC4009)](https://github.com/etkecc/synapse-admin/pull/214)
+* 🛑 [Add support for Account Suspension (MSC3823)](https://github.com/etkecc/synapse-admin/pull/195)
+* 🗑️ [Add "Purge Remote Media" button](https://github.com/etkecc/synapse-admin/pull/237)
+* [Respect base url (`BASE_PATH` / `vite build --base`) when loading `config.json`](https://github.com/etkecc/synapse-admin/pull/274)
+* [Add Users' Account Data tab](https://github.com/etkecc/synapse-admin/pull/276)
 
-_the list will be updated as new changes are added_
+#### exclusive for [etke.cc](https://etke.cc) customers
+
+We at [etke.cc](https://etke.cc) attempting to develop everything open-source, but some things are too specific to be used by anyone else.
+The following list contains such features - they are only available for [etke.cc](https://etke.cc) customers.
+
+* 📊 [Server Status indicator and page](https://github.com/etkecc/synapse-admin/pull/182)
+* 📬 [Server Notifications indicator and page](https://github.com/etkecc/synapse-admin/pull/240)
+* 🛠️ [Server Commands panel](https://github.com/etkecc/synapse-admin/pull/365)
 
 ### 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:
+This command initializes the development environment (local Synapse server, Element Web client app, and Postgres DB),
+and launches the app in a dev mode at `http://localhost:5173`
+
+After that open [http://localhost:5173](http://localhost:5173?username=admin&password=admin&server=http://localhost:8008) in your browser,
+login using the following credentials:
 
 * Login: admin
 * Password: admin
 * Homeserver URL: http://localhost:8008
 
+Element Web runs on http://localhost:8080
+
+### Support
+
+If you have any questions or need help, feel free to join the [community room](https://matrix.to/#/#synapse-admin:etke.cc) or create an issue on GitHub.
+
 ## Configuration
 
 You can use `config.json` file to configure Synapse Admin instance,
@@ -113,6 +149,12 @@ In the latter case, any instance of Synapse Admin will automatically pick up the
 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.
 
+In case you use [spantaleev/matrix-docker-ansible-deploy](https://github.com/spantaleev/matrix-docker-ansible-deploy) or
+[etkecc/ansible](https://github.com/etkecc/ansible),
+configuration will be automatically added to the `/.well-known/matrix/client` file.
+
+[Configuration options](./docs/config.md)
+
 The `config.json` can be injected into a Docker container using a bind mount.
 
 ```yml
@@ -124,124 +166,31 @@ services:
     ...
 ```
 
+### Prefilling login form
+
+You can prefill all fields on the login page using GET parameters.
+
+[Documentation](./docs/prefill-login-form.md)
+
+
 ### 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"]
-  }
-}
-```
+[Documentation](./docs/restrict-hs.md)
 
 ### 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$"]
-  }
-}
-```
+[Documentation](./docs/system-users.md)
 
 ### Adding custom menu items
 
-You can add custom menu items to the main menu by providing a `menu` array in the `config.json`.
+You can add custom menu items to the main menu by providing a `menu` array in the config.
 
-```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"
-  }
-}
-```
+[Documentation](./docs/custom-menu.md)
 
 ## Usage
 
@@ -290,6 +239,8 @@ You have three options:
 - move or symlink the `synapse-admin` into your vhosts root dir
 - open the url of the vhost in your browser
 
+[Reverse Proxy Documentation with Examples](./docs/reverse-proxy.md)
+
 #### Steps for 2)
 
 - make sure you have installed the following: git, yarn, nodejs
@@ -311,6 +262,7 @@ You have three options:
       hostname: synapse-admin
       build:
         context: https://github.com/etkecc/synapse-admin.git
+        dockerfile: Dockerfile.build
         args:
           - BUILDKIT_CONTEXT_KEEP_GIT_DIR=1
         #   - NODE_OPTIONS="--max_old_space_size=1024"
@@ -339,7 +291,7 @@ Example for Traefik:
 ```yml
 services:
   traefik:
-    image: traefik:mimolette
+    image: traefik:v3
     restart: unless-stopped
     ports:
       - 80:80
@@ -348,15 +300,16 @@ services:
       - /var/run/docker.sock:/var/run/docker.sock:ro
 
   synapse-admin:
-    image: etkecc/synapse-admin:latest
+    image: ghcr.io/etkecc/synapse-admin:latest
     restart: unless-stopped
     labels:
       - "traefik.enable=true"
-      - "traefik.http.routers.synapse-admin.rule=Host(`example.com`)&&PathPrefix(`/admin`)"
-      - "traefik.http.routers.synapse-admin.middlewares=admin,admin_path"
-      - "traefik.http.middlewares.admin.redirectregex.regex=^(.*)/admin/?"
-      - "traefik.http.middlewares.admin.redirectregex.replacement=$${1}/admin/"
-      - "traefik.http.middlewares.admin_path.stripprefix.prefixes=/admin"
+      - "traefik.http.routers.admin.rule=Host(`example.com`) && PathPrefix(`/admin`)"
+      - "traefik.http.services.admin.loadbalancer.server.port=80"
+      - "traefik.http.middlewares.admin-slashless-redirect.redirectregex.regex=(/admin)$$"
+      - "traefik.http.middlewares.admin-slashless-redirect.redirectregex.replacement=$${1}/"
+      - "traefik.http.middlewares.admin-strip-prefix.stripprefix.prefixes=/admin"
+      - "traefik.http.routers.admin.middlewares=admin-slashless-redirect,admin-strip-prefix"
 ```
 
 ## Development

docker-compose-dev.yml

@@ -1,6 +1,6 @@
 services:
   synapse:
-    image: ghcr.io/element-hq/synapse:latest
+    image: ghcr.io/element-hq/synapse:develop
     entrypoint: python
     command: "-m synapse.app.homeserver -c /config/homeserver.yaml"
     ports:
@@ -18,3 +18,17 @@ services:
       POSTGRES_PASSWORD: synapse
       POSTGRES_DB: synapse
       POSTGRES_INITDB_ARGS: "--lc-collate C --lc-ctype C --encoding UTF8"
+
+  element:
+    image: docker.io/vectorim/element-web:latest
+    depends_on:
+      synapse:
+        condition: service_healthy
+        restart: true
+    ports:
+    - "8080:8080"
+    volumes:
+    - ./testdata/element/nginx.conf:/etc/nginx/nginx.conf:ro
+    - /dev/null:/etc/nginx/conf.d/default.conf:ro
+    - ./testdata/element/config.json:/app/config.json:ro
+

docker-compose.yml

@@ -5,6 +5,7 @@ services:
     image: ghcr.io/etkecc/synapse-admin:latest
     # build:
     #   context: .
+    #   dockerfile: Dockerfile.build
 
     # to use the docker-compose as standalone without a local repo clone,
     # replace the context definition with this:

docs/README.md

@@ -0,0 +1,39 @@
+# Documentation
+
+Synapse Admin documentation is under construction right now, so PRs are greatly appreciated!
+
+Table of contents:
+<!-- vim-markdown-toc GFM -->
+
+* [Configuration](#configuration)
+* [Features](#features)
+* [Deployment](#deployment)
+
+<!-- vim-markdown-toc -->
+
+## Configuration
+
+[Full configuration documentation](./config.md)
+
+Specific configuration options:
+
+* [Restricting available homeserver](./restrict-hs.md)
+* [System / Appservice-managed Users](./system-users.md)
+* [Custom Menu Items](./custom-menu.md)
+
+## Features
+
+* [User Badges](./user-badges.md)
+* [Prefilling the Login Form](./prefill-login-form.md)
+
+for [etke.cc](https://etke.cc) customers only:
+
+> **Note:** The following features are only available for etke.cc customers. Due to specifics of the implementation,
+they are not available for any other Synapse Admin deployments.
+
+* [Server Status icon](../src/components/etke.cc/README.md#server-status-icon)
+* [Server Status page](../src/components/etke.cc/README.md#server-status-page)
+
+## Deployment
+
+* [Serving Synapse Admin behind a reverse proxy](./reverse-proxy.md)

docs/config.md

@@ -0,0 +1,94 @@
+# Configuration
+
+Synapse Admin could be configured using the following ways (both are optional, and both could be used together):
+
+* By providing the `config.json` file alongside with the Synapse Admin deployment, example: [admin.etke.cc/config.json](https://admin.etke.cc/config.json)
+* By providing configuration under the `cc.etke.synapse-admin` key in the `/.well-known/matrix/client` file, example:
+[demo.etke.host/.well-known/matrix/client](https://demo.etke.host/.well-known/matrix/client)
+
+In case you are an [etke.cc](https://etke.cc) customer,
+or use [spantaleev/matrix-docker-ansible-deploy](https://github.com/spantaleev/matrix-docker-ansible-deploy),
+or [etkecc/ansible](https://github.com/etkecc/ansible),
+configuration will be automatically added to the `/.well-known/matrix/client` file.
+
+**Why `/.well-known/matrix/client`?**
+
+Because any instance of Synapse Admin will automatically pick up the configuration from the homeserver.
+Common use case when you have a Synapse server running, but don't want (or can't) deploy Synapse Admin alongside with it.
+In this case, you could provide the configuration in the `/.well-known/matrix/client` file,
+and any Synapse Admin instance (e.g., [admin.etke.cc](https://admin.etke.cc) will pick it up.
+
+Another common case is when you have multiple Synapse servers running and want to use a single Synapse Admin instance to manage them all.
+In this case, you could provide the configuration in the `/.well-known/matrix/client` file for each of the servers.
+
+## Configuration options
+
+* `restrictBaseUrl` - restrictBaseUrl restricts the Synapse Admin instance to work only with specific homeserver(-s).
+  It accepts both a string and an array of strings.
+  The homeserver URL should be the _actual_ homeserver URL, and not the delegated one.
+  Example: `https://matrix.example.com` or `https://synapse.example.net`
+  [More details](restrict-hs.md)
+* `asManagedUsers` - protect system user accounts managed by appservices (such as bridges) / system (such as bots) from accidental changes.
+  By defining a list of MXID regex patterns, you can protect these accounts from accidental changes.
+  Example: `^@baibot:example\\.com$`, `^@slackbot:example\\.com$`, `^@slack_[a-zA-Z0-9\\-]+:example\\.com$`, `^@telegrambot:example\\.com$`, `^@telegram_[a-zA-Z0-9]+:example\\.com$`
+  [More details](system-users.md)
+* `menu` - add custom menu items to the main menu (sidebar) by providing a `menu` array in the config.
+  Each `menu` item can contain the following fields:
+  * `label` (required): The text to display in the menu.
+  * `icon` (optional): The icon to display next to the label, one of the [src/utils/icons.ts](../src/utils/icons.ts) icons, otherwise a default icon will be used.
+  * `url` (required): The URL to navigate to when the menu item is clicked.
+  [More details](custom-menu.md)
+
+## Examples
+
+### config.json
+
+```json
+{
+  "restrictBaseUrl": [
+    "https://matrix.example.com",
+    "https://synapse.example.net"
+  ],
+  "asManagedUsers": [
+    "^@baibot:example\\.com$",
+    "^@slackbot:example\\.com$",
+    "^@slack_[a-zA-Z0-9\\-]+:example\\.com$",
+    "^@telegrambot:example\\.com$",
+    "^@telegram_[a-zA-Z0-9]+:example\\.com$"
+  ],
+  "menu": [
+    {
+      "label": "Contact support",
+      "icon": "SupportAgent",
+      "url": "https://github.com/etkecc/synapse-admin/issues"
+    }
+  ]
+}
+```
+
+### `/.well-known/matrix/client`
+
+```json
+{
+  "cc.etke.synapse-admin": {
+    "restrictBaseUrl": [
+      "https://matrix.example.com",
+      "https://synapse.example.net"
+    ],
+    "asManagedUsers": [
+      "^@baibot:example\\.com$",
+      "^@slackbot:example\\.com$",
+      "^@slack_[a-zA-Z0-9\\-]+:example\\.com$",
+      "^@telegrambot:example\\.com$",
+      "^@telegram_[a-zA-Z0-9]+:example\\.com$"
+    ],
+    "menu": [
+      {
+        "label": "Contact support",
+        "icon": "SupportAgent",
+        "url": "https://github.com/etkecc/synapse-admin/issues"
+      }
+    ]
+  }
+}
+```

docs/custom-menu.md

@@ -0,0 +1,47 @@
+# Custom Menu Items
+
+You can add custom menu items to the main menu (sidebar) by providing a `menu` array in the config.
+This is useful for adding links to external sites or other pages in your documentation, like a support page or internal wiki.
+
+## Configuration
+
+The examples below contain the configuration settings to add a link to the [Synapse Admin issues](https://github.com/etke.cc/synapse-admin/issues).
+
+Each `menu` item can contain the following fields:
+
+* `label` (required): The text to display in the menu.
+* `icon` (optional): The icon to display next to the label, one of the [src/utils/icons.ts](../src/utils/icons.ts) icons, otherwise a
+default icon will be used.
+* `url` (required): The URL to navigate to when the menu item is clicked.
+
+[Configuration options](config.md)
+
+### config.json
+
+```json
+{
+  "menu": [
+    {
+      "label": "Contact support",
+      "icon": "SupportAgent",
+      "url": "https://github.com/etkecc/synapse-admin/issues"
+    }
+  ]
+}
+```
+
+### `/.well-known/matrix/client`
+
+```json
+{
+  "cc.etke.synapse-admin": {
+    "menu": [
+      {
+        "label": "Contact support",
+        "icon": "SupportAgent",
+        "url": "https://github.com/etkecc/synapse-admin/issues"
+      }
+    ]
+  }
+}
+```

docs/prefill-login-form.md

@@ -0,0 +1,48 @@
+# Prefilling the Login Form
+
+In some cases you may wish to prefill/preset the login form fields when sharing a link to a Synapse Admin instance.
+This can be done by adding the following query parameters to the URL:
+
+* `username` - The username to prefill in the username field.
+* `server` - The server to prefill in the homeserver url field.
+
+The following query params will work only if the Synapse Admin is loaded from `localhost` or `127.0.0.1`:
+
+* `password` - The password to prefill in the password field (credentials auth). **NEVER** use this in production.
+* `accessToken` - The access token to prefill in the access token field (access token auth). **NEVER** use this in production.
+
+> **WARNING**: Never use the `password` or `accessToken` query parameters in production as they can be easily extracted
+from the URL. These are only meant for development purposes and local environments.
+
+
+## Examples
+
+### Production
+
+```bash
+https://admin.etke.cc?username=admin&server=https://matrix.example.com
+```
+
+This will open `Credentials` (username/password) login form with the username field prefilled with `admin` and the
+Homeserver URL field prefilled with `https://matrix.example.com`.
+
+### Development and Local environments
+
+**With Password**
+
+```bash
+http://localhost:8080?username=admin&server=https://matrix.example.com&password=secret
+```
+
+This will open `Credentials` (username/password) login form with the username field prefilled with `admin`, the
+Homeserver URL field prefilled with `https://matrix.example.com` and the password field prefilled with `secret`.
+
+
+**With Access Token**
+
+```bash
+http://localhost:8080?server=https://matrix.example.com&accessToken=secret
+```
+
+This will open `Access Token` login form with the Homeserver URL field prefilled with `https://matrix.example.com` and
+the access token field prefilled with `secret`.

docs/restrict-hs.md

@@ -0,0 +1,44 @@
+# Restricting available homeserver
+
+If you want to have your Synapse Admin instance work only with specific homeserver(-s),
+you can do that by setting `restrictBaseUrl` in the configuration.
+
+## Configuration
+
+You can do that for a single homeserver or multiple homeservers at once, as `restrictBaseUrl` accepts both a string and
+an array of strings.
+
+The examples below contain the configuration settings to restrict the Synapse Admin instance to work only with
+`example.com` (with Synapse runing at `matrix.example.com`) and
+`example.net` (with Synapse running at `synapse.example.net`) homeservers.
+Note that the homeserver URL should be the _actual_ homeserver URL, and not the delegated one.
+
+So, if you have a homeserver `example.com` where users have MXIDs like `@user:example.com`,
+but actual Synapse is installed on `matrix.example.com` subdomain, you should use `https://matrix.example.com` in the
+configuration.
+
+[Configuration options](config.md)
+
+### config.json
+
+```json
+{
+  "restrictBaseUrl": [
+    "https://matrix.example.com",
+    "https://synapse.example.net"
+  ]
+}
+```
+
+### `/.well-known/matrix/client`
+
+```json
+{
+  "cc.etke.synapse-admin": {
+    "restrictBaseUrl": [
+      "https://matrix.example.com",
+      "https://synapse.example.net"
+    ]
+  }
+}
+```

docs/reverse-proxy.md

@@ -0,0 +1,53 @@
+# Serving Synapse Admin behind a reverse proxy
+
+Your are supposed to do so for any service you want to expose to the internet,
+and here you can find specific instructions and example configurations for Synapse Admin.
+
+## Nginx
+
+Place the config below into `/etc/nginx/conf.d/synapse-admin.conf` (don't forget to replace `server_name` and `root`):
+
+```nginx
+server {
+    listen 80;
+    listen [::]:80;
+    server_name example.com; # REPLACE with your domain
+    root /var/www/synapse-admin; # REPLACE with path where you extracted synapse admin
+    index index.html;
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+    location ~* \.(?:css|js|jpg|jpeg|gif|png|svg|ico|woff|woff2|ttf|eot|webp)$ {
+        expires 30d; # Set caching for static assets
+        add_header Cache-Control "public";
+    }
+
+    gzip on;
+    gzip_types text/plain application/javascript application/json text/css text/xml application/xml+rss;
+    gzip_min_length 1000;
+}
+```
+
+After you've done that, ensure that the configuration is correct by running `nginx -t` and then reload Nginx
+(e.g. `systemctl reload nginx`).
+
+> **Note:** This configuration doesn't cover HTTPS, which is highly recommended to use. You can find more information
+about setting up HTTPS in the [Nginx documentation](https://nginx.org/en/docs/http/configuring_https_servers.html).
+
+## Traefik (docker labels)
+
+If you are using Traefik as a reverse proxy, you can use the following labels, `docker-compose.yml` example:
+
+```yaml
+services:
+  synapse-admin:
+    image: ghcr.io/etkecc/synapse-admin:latest
+    restart: unless-stopped
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.synapse-admin.rule=Host(`example.com`)"
+```
+
+## Other reverse proxies
+
+There is no examples for other reverse proxies yet, and so PRs are greatly appreciated.

docs/system-users.md

@@ -0,0 +1,44 @@
+# System / Appservice-managed Users
+
+Inadvertently altering system user accounts managed by appservices (such as bridges) / system (such as bots) is a common issue.
+Editing, deleting, locking, or changing the passwords of these appservice-managed accounts can cause serious problems.
+To prevent this, we've added a new feature that blocks these types of modifications to such accounts,
+while still allowing other risk-free changes (changing display names and avatars).
+By defining a list of MXID regex patterns in the new `asManagedUsers` configuration setting,
+you can protect these accounts from accidental changes.
+
+## Configuration
+
+The examples below contain the configuration settings to mark
+[Telegram bridge (mautrix-telegram)](https://github.com/mautrix/telegram),
+[Slack bridge (mautrix-slack)](https://github.com/mautrix/slack),
+and [Baibot](https://github.com/etkecc/baibot) users of `example.com` homeserver as appservice-managed users,
+just to illustrate the options to protect both specific MXIDs (as in the Baibot example) and all puppets of a bridge (as in the Telegram and Slack examples).
+
+[Configuration options](config.md)
+
+### config.json
+
+```json
+"asManagedUsers": [
+  "^@baibot:example\\.com$",
+  "^@slackbot:example\\.com$",
+  "^@slack_[a-zA-Z0-9\\-]+:example\\.com$",
+  "^@telegrambot:example\\.com$",
+  "^@telegram_[a-zA-Z0-9]+:example\\.com$"
+]
+```
+
+### `/.well-known/matrix/client`
+
+```json
+"cc.etke.synapse-admin": {
+  "asManagedUsers": [
+    "^@baibot:example\\.com$",
+    "^@slackbot:example\\.com$",
+    "^@slack_[a-zA-Z0-9\\-]+:example\\.com$",
+    "^@telegrambot:example\\.com$",
+    "^@telegram_[a-zA-Z0-9]+:example\\.com$"
+  ]
+}
+```

docs/user-badges.md

@@ -0,0 +1,36 @@
+# User Badges
+
+To help with identifying users with certain roles or permissions, we have implemented a badge system.
+These badges are displayed on the user's avatar and have a handy tooltip that explains what the badge means.
+
+## Available Badges
+
+### 🧙‍ You
+
+This badge is displayed on your user's avatar.
+Tooltip for this badge will contain additional information, e.g.: `You (Admin)`.
+
+### 👑 Admin
+
+This badge is displayed on homeserver admins' avatars.
+Tooltip for this badge is `Admin`.
+
+### 🛡️ Appservice/System-managed
+
+This badge is displayed on users that are managed by an appservices (or system), [more details](./system-users.md).
+Tooltip for this badge will contain additional information, e.g.: `System-managed (Bot)`.
+
+### 🤖 Bot
+
+This badge is displayed on bots' avatars (users with the `user_type` set to `bot`).
+Tooltip for this badge is `Bot`.
+
+### 📞 Support
+
+This badge is displayed on users that are part of the support team (users with the `user_type` set to `support`).
+Tooltip for this badge is `Support`.
+
+### 👤 Regular User
+
+This badge is displayed on regular users' avatars.
+Tooltip for this badge is `Regular User`.

jest.config.ts

@@ -2,12 +2,30 @@ import type { JestConfigWithTsJest } from "ts-jest";
 
 const config: JestConfigWithTsJest = {
   preset: "ts-jest",
-  testEnvironment: "jsdom",
+  testEnvironment: "jest-fixed-jsdom",
   collectCoverage: true,
   coveragePathIgnorePatterns: ["node_modules", "dist"],
   coverageDirectory: "<rootDir>/coverage/",
   coverageReporters: ["html", "text", "text-summary", "cobertura"],
   extensionsToTreatAsEsm: [".ts", ".tsx"],
   setupFilesAfterEnv: ["<rootDir>/src/jest.setup.ts"],
+  transform: {
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        diagnostics: {
+          ignoreCodes: [1343]
+        },
+        astTransformers: {
+          before: [
+            {
+              path: 'ts-jest-mock-import-meta',
+              options: { metaObjectReplacement: { env: { BASE_URL: "/" } } }
+            }
+          ]
+        }
+      }
+    ]
+  }
 };
 export default config;

justfile

@@ -16,6 +16,8 @@ run-dev:
     @docker-compose -f docker-compose-dev.yml up -d postgres
     @echo "Starting Synapse..."
     @docker-compose -f docker-compose-dev.yml up -d synapse
+    @echo "Starting Element Web..."
+    @docker-compose -f docker-compose-dev.yml up -d element
     @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..."

package.json

@@ -11,64 +11,66 @@
     "url": "https://github.com/etkecc/synapse-admin"
   },
   "devDependencies": {
-    "@eslint/js": "^9.13.0",
+    "@eslint/js": "^9.19.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
-    "@types/lodash": "^4.17.13",
-    "@types/node": "^22.8.7",
+    "@types/lodash": "^4.17.16",
+    "@types/node": "^22.13.8",
     "@types/papaparse": "^5.3.15",
-    "@types/react": "^18.3.12",
-    "@typescript-eslint/eslint-plugin": "^8.11.0",
-    "@typescript-eslint/parser": "^8.11.0",
-    "@vitejs/plugin-react": "^4.3.3",
-    "eslint": "^9.13.0",
-    "eslint-config-prettier": "^9.1.0",
+    "@types/react": "^19.0.10",
+    "@typescript-eslint/eslint-plugin": "^8.18.2",
+    "@typescript-eslint/parser": "^8.24.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
+    "eslint-config-prettier": "^10.0.2",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-prettier": "^5.2.3",
     "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.5",
+    "prettier": "^3.5.3",
+    "react-test-renderer": "^19.0.0",
+    "ts-jest": "^29.2.6",
     "ts-node": "^10.9.2",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.12.2",
-    "vite": "^5.4.10",
-    "vite-plugin-version-mark": "^0.1.2"
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.26.0",
+    "vite": "^6.2.0",
+    "vite-plugin-version-mark": "^0.1.4"
   },
   "dependencies": {
-    "@emotion/react": "^11.13.0",
-    "@emotion/styled": "^11.13.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@haleos/ra-language-german": "^1.0.0",
     "@haxqer/ra-language-chinese": "^4.16.2",
-    "@mui/icons-material": "^6.1.5",
-    "@mui/material": "^6.1.6",
-    "@mui/utils": "^5.16.6",
-    "@tanstack/react-query": "^5.59.19",
+    "@mui/icons-material": "^6.4.5",
+    "@mui/material": "^6.4.6",
+    "@mui/utils": "^6.4.2",
+    "@tanstack/react-query": "^5.67.1",
     "history": "^5.3.0",
+    "jest-fixed-jsdom": "^0.0.9",
     "lodash": "^4.17.21",
-    "papaparse": "^5.4.1",
-    "ra-core": "^5.3.2",
-    "ra-i18n-polyglot": "^5.3.2",
-    "ra-language-english": "^5.3.2",
-    "ra-language-farsi": "^5.0.0",
-    "ra-language-french": "^5.3.1",
+    "papaparse": "^5.5.1",
+    "ra-core": "^5.4.4",
+    "ra-i18n-polyglot": "^5.4.4",
+    "ra-language-english": "^5.4.4",
+    "ra-language-farsi": "^5.1.0",
+    "ra-language-french": "^5.6.2",
     "ra-language-italian": "^3.13.1",
-    "ra-language-russian": "^4.14.2",
-    "react": "^18.3.1",
-    "react-admin": "^5.3.1",
-    "react-dom": "^18.3.1",
-    "react-hook-form": "^7.53.1",
-    "react-is": "^18.3.1",
-    "react-router": "^6.26.2",
-    "react-router-dom": "^6.27.0"
+    "ra-language-russian": "^5.4.3",
+    "react": "^19.0.0",
+    "react-admin": "^5.6.2",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
+    "react-is": "^19.0.0",
+    "ts-jest-mock-import-meta": "^1.2.1",
+    "react-router": "^7.2.0",
+    "react-router-dom": "^7.2.0"
   },
   "scripts": {
     "start": "vite serve",

src/App.test.tsx

@@ -1,12 +1,32 @@
 import { render, screen } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
 import fetchMock from "jest-fetch-mock";
 fetchMock.enableMocks();
 
+jest.mock("./synapse/authProvider", () => ({
+  __esModule: true,
+  default: {
+    logout: jest.fn().mockResolvedValue(undefined),
+  },
+}));
+
 import App from "./App";
 
 describe("App", () => {
+  beforeEach(() => {
+    // Reset all mocks before each test
+    fetchMock.resetMocks();
+    // Mock any fetch call to return empty JSON immediately
+    fetchMock.mockResponseOnce(JSON.stringify({}));
+  });
+
   it("renders", async () => {
-    render(<App />);
-    await screen.findAllByText("Welcome to Synapse-admin");
+    render(
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    );
+
+    await screen.findAllByText("Welcome to Synapse Admin");
   });
 });

src/App.tsx

@@ -2,10 +2,11 @@ import { merge } from "lodash";
 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 AdminLayout from "./components/AdminLayout";
+import UserImport from "./components/UserImport";
 import germanMessages from "./i18n/de";
 import englishMessages from "./i18n/en";
 import frenchMessages from "./i18n/fr";
@@ -23,7 +24,8 @@ 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";
+import ServerStatusPage from "./components/etke.cc/ServerStatusPage";
+import ServerNotificationsPage from "./components/etke.cc/ServerNotificationsPage";
 
 // TODO: Can we use lazy loading together with browser locale?
 const messages = {
@@ -50,7 +52,7 @@ const i18nProvider = polyglotI18nProvider(
 
 const queryClient = new QueryClient();
 
-const App = () => (
+export const App = () => (
   <QueryClientProvider client={queryClient}>
     <Admin
       disableTelemetry
@@ -62,7 +64,9 @@ const App = () => (
       i18nProvider={i18nProvider}
     >
       <CustomRoutes>
-        <Route path="/import_users" element={<ImportFeature />} />
+        <Route path="/import_users" element={<UserImport />} />
+        <Route path="/server_status" element={<ServerStatusPage />} />
+        <Route path="/server_notifications" element={<ServerNotificationsPage />} />
       </CustomRoutes>
       <Resource {...users} />
       <Resource {...rooms} />
@@ -82,7 +86,6 @@ const App = () => (
       <Resource name="room_state" />
       <Resource name="destination_rooms" />
     </Admin>
-    <Footer />
   </QueryClientProvider>
 );
 

src/Context.tsx

@@ -1,6 +1,7 @@
 import { createContext, useContext } from "react";
-import { Config } from "./components/config";
 
-export const AppContext = createContext({});
+import { Config } from "./utils/config";
 
-export const useAppContext = () => useContext(AppContext) as Config;
+export const AppContext = createContext<Config>({} as Config);
+
+export const useAppContext = () => useContext(AppContext) as Config;

src/components/AdminLayout.tsx

@@ -1,7 +1,13 @@
-import { AppBar, TitlePortal, InspectorButton, Confirm, Layout, Logout, Menu, useLogout, UserMenu } from "react-admin";
+import { CheckForApplicationUpdate, AppBar, TitlePortal, InspectorButton, Confirm, Layout, Logout, Menu, useLogout, UserMenu, useStore } from "react-admin";
 import { LoginMethod } from "../pages/LoginPage";
 import { useEffect, useState, Suspense } from "react";
-import { Icons, DefaultIcon } from "./icons";
+import { Icons, DefaultIcon } from "../utils/icons";
+import { MenuItem, GetConfig, ClearConfig } from "../utils/config";
+import Footer from "./Footer";
+import ServerStatusBadge from "./etke.cc/ServerStatusBadge";
+import { ServerNotificationsBadge } from "./etke.cc/ServerNotificationsBadge";
+import { ServerProcessResponse, ServerStatusResponse } from "../synapse/dataProvider";
+import { ServerStatusStyledBadge } from "./etke.cc/ServerStatusBadge";
 
 const AdminUserMenu = () => {
   const [open, setOpen] = useState(false);
@@ -21,8 +27,7 @@ const AdminUserMenu = () => {
 
   const handleDialogClose = () => {
     setOpen(false);
-    localStorage.removeItem("access_token");
-    localStorage.removeItem("login_type");
+    ClearConfig();
     window.location.reload();
   };
 
@@ -47,28 +52,31 @@ const AdminUserMenu = () => {
 const AdminAppBar = () => {
   return (<AppBar userMenu={<AdminUserMenu />}>
     <TitlePortal />
+    <ServerStatusBadge />
+    <ServerNotificationsBadge />
     <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);
-      }
-    }
-  }, []);
+  const [menu, setMenu] = useState([] as MenuItem[]);
+  useEffect(() => setMenu(GetConfig().menu), []);
+  const [serverProcess, setServerProcess] = useStore<ServerProcessResponse>("serverProcess", { command: "", locked_at: "" });
+  const [serverStatus, setServerStatus] = useStore<ServerStatusResponse>("serverStatus", { success: false, ok: false, host: "", results: [] });
 
   return (
     <Menu {...props}>
+      {menu && menu.length > 0 && <Menu.Item to="/server_status" leftIcon={
+        <ServerStatusStyledBadge
+          inSidebar={true}
+          command={serverProcess.command}
+          locked_at={serverProcess.locked_at}
+          isOkay={serverStatus.ok} />
+        }
+        primaryText="Server Status" />
+      }
       <Menu.ResourceItems />
-      {menu.map((item, index) => {
+      {menu && menu.map((item, index) => {
         const { url, icon, label } = item;
         const IconComponent = Icons[icon] as React.ComponentType<any> | undefined;
 
@@ -88,8 +96,9 @@ const AdminMenu = (props) => {
   );
 };
 
-export const AdminLayout = ({ children }) => (
-  <Layout appBar={AdminAppBar} menu={AdminMenu} sx={{
+export const AdminLayout = ({ children }) => {
+  return <>
+    <Layout appBar={AdminAppBar} menu={AdminMenu} sx={{
       ['& .RaLayout-appFrame']: {
         minHeight: '90vh',
         height: '90vh',
@@ -98,6 +107,11 @@ export const AdminLayout = ({ children }) => (
         marginBottom: '3rem',
       },
     }}>
-    {children}
-  </Layout>
-);
+      {children}
+      <CheckForApplicationUpdate />
+    </Layout>
+    <Footer />
+  </>
+};
+
+export default AdminLayout;

src/components/AvatarField.tsx

@@ -1,8 +1,9 @@
 import { get } from "lodash";
-import { Avatar, AvatarProps } from "@mui/material";
-import { FieldProps, useRecordContext } from "react-admin";
+import { Avatar, AvatarProps, Badge, Tooltip } from "@mui/material";
+import { FieldProps, useRecordContext, useTranslate } from "react-admin";
 import { useState, useEffect, useCallback } from "react";
 import { fetchAuthenticatedMedia } from "../utils/fetchMedia";
+import { isMXID, isASManaged } from "../utils/mxid";
 
 const AvatarField = ({ source, ...rest }: AvatarProps & FieldProps) => {
   const { alt, classes, sizes, sx, variant } = rest;
@@ -31,7 +32,76 @@ const AvatarField = ({ source, ...rest }: AvatarProps & FieldProps) => {
     };
   }, [mxcURL, fetchAvatar]);
 
-  return <Avatar alt={alt} classes={classes} sizes={sizes} src={src} sx={sx} variant={variant} />;
+  // a hacky way to handle both users and rooms,
+  // where users have an ID, may have a name, and may have a displayname
+  // and rooms have an ID and may have a name
+  let letter = "";
+  if (record?.id) {
+    letter = record.id[0].toUpperCase();
+  }
+  if (record?.name) {
+    letter = record.name[0].toUpperCase();
+  }
+  if (record?.displayname) {
+    letter = record.displayname[0].toUpperCase();
+  }
+
+  // hacky way to determine the user type
+  let badge = "";
+  let tooltip = "";
+  if (isMXID(record?.id)) {
+    const translate = useTranslate();
+    switch (record?.user_type) {
+      case "bot":
+        badge = "🤖";
+        tooltip = translate("resources.users.badge.bot");
+        break;
+      case "support":
+        badge = "📞";
+        tooltip = translate("resources.users.badge.support");
+        break;
+      default:
+        badge = "👤";
+        tooltip = translate("resources.users.badge.regular");
+        break;
+    }
+    if (record?.admin) {
+      badge = "👑";
+      tooltip = translate("resources.users.badge.admin");
+    }
+    if (isASManaged(record?.name)) {
+      badge = "🛡️";
+      tooltip = `${translate("resources.users.badge.system_managed")} (${tooltip})`;
+    }
+    if (localStorage.getItem("user_id") === record?.id) {
+      badge = "🧙‍";
+      tooltip = `${translate("resources.users.badge.you")} (${tooltip})`;
+    }
+  }
+
+  // if there is a badge, wrap the Avatar in a Badge and a Tooltip
+  if (badge) {
+    return (
+      <Tooltip title={tooltip}>
+        <Badge
+          badgeContent={badge}
+          overlap="circular"
+          sx={{ "& .MuiBadge-badge": { width: "10px" } }} // we deliberately set a very small width here, to make the badge actually circular
+          anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "right",
+          }}
+        >
+          <Avatar alt={alt} classes={classes} sizes={sizes} src={src} sx={sx} variant={variant}>
+            {letter}
+          </Avatar>
+        </Badge>
+      </Tooltip>);
+  }
+
+  return (<Avatar alt={alt} classes={classes} sizes={sizes} src={src} sx={sx} variant={variant}>
+          {letter}
+          </Avatar>);
 };
 
 export default AvatarField;

src/components/DeviceRemoveButton.tsx

@@ -1,5 +1,5 @@
 import { DeleteWithConfirmButton, DeleteWithConfirmButtonProps, useRecordContext } from "react-admin";
-import { isASManaged } from "./mxid";
+import { isASManaged } from "../utils/mxid";
 
 export const DeviceRemoveButton = (props: DeleteWithConfirmButtonProps) => {
   const record = useRecordContext();
@@ -26,3 +26,5 @@ export const DeviceRemoveButton = (props: DeleteWithConfirmButtonProps) => {
     />
   );
 };
+
+export default DeviceRemoveButton;

src/components/ExperimentalFeatures.tsx

@@ -93,3 +93,5 @@ export const ExperimentalFeaturesList = () => {
     </Stack>
   </>
 }
+
+export default ExperimentalFeaturesList;

src/components/Footer.tsx

@@ -1,8 +1,11 @@
 import { Avatar, Box, Link, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
+import { useTheme } from "@mui/material/styles";
 
 const Footer = () => {
   const [version, setVersion] = useState<string | null>(null);
+  const theme = useTheme();
+
   useEffect(() => {
     const version = document.getElementById("js-version")?.textContent;
     if (version) {
@@ -17,23 +20,28 @@ const Footer = () => {
       zIndex: 100,
       bottom: 0,
       width: '100%',
-      bgcolor: "#eee",
+      bgcolor: theme.palette.background.default,
+      color: theme.palette.text.primary,
       borderTop: '1px solid',
-      borderColor: '#ddd',
+      borderColor: theme.palette.divider,
+      fontSize: '0.89rem',
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'start',
       p: 1,
+      gap: '10px'
     }}>
-    <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>
+      <Link href="https://github.com/etkecc/synapse-admin" target="_blank">
+        Synapse Admin {version}
+      </Link>
+        by
+      <Link href="https://etke.cc/?utm_source=synapse-admin&utm_medium=footer&utm_campaign=synapse-admin" target="_blank">
+        etke.cc
+      </Link>
+      (originally developed by Awesome Technologies Innovationslabor GmbH).
+      <Link sx={{ fontWeight: 'bold' }} href="https://matrix.to/#/#synapse-admin:etke.cc" target="_blank">#synapse-admin:etke.cc</Link>
   </Box>
   );
 };

src/components/LoginFormBox.tsx

@@ -2,57 +2,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",
+    display: "flex",
+    flexDirection: "column",
+    minHeight: "calc(100vh - 1rem)",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    background: "url(./images/floating-cogs.svg)",
+    backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.background.paper,
+    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",
-  },
-}));
+    [`& .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/UserAccountData.tsx

@@ -0,0 +1,65 @@
+import { useDataProvider, useRecordContext, useTranslate } from "react-admin";
+import { useEffect, useState } from "react";
+import { Typography, Box, Stack, Accordion, AccordionSummary, AccordionDetails } from "@mui/material";
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import { SynapseDataProvider } from "../synapse/dataProvider";
+
+const UserAccountData = () => {
+  const dataProvider = useDataProvider() as SynapseDataProvider;
+  const record = useRecordContext();
+  const translate = useTranslate();
+  const [globalAccountData, setGlobalAccountData] = useState({});
+  const [roomsAccountData, setRoomsAccountData] = useState({});
+
+  if (!record) {
+    return null;
+  }
+
+  useEffect(() => {
+    const fetchAccountData = async () => {
+      const accountData = await dataProvider.getAccountData(record.id);
+      setGlobalAccountData(accountData.account_data.global);
+      setRoomsAccountData(accountData.account_data.rooms);
+    };
+    fetchAccountData();
+  }, []);
+
+  if (Object.keys(globalAccountData).length === 0 && Object.keys(roomsAccountData).length === 0) {
+    return <Typography variant="body2">{translate('ra.navigation.no_results', {
+      resource: 'Account Data',
+      _: 'No results found.',
+    })}</Typography>;
+  }
+
+  return <>
+    <Stack
+      direction="column"
+      spacing={2}
+      width="100%"
+    >
+      <Typography variant="h6">{translate('resources.users.account_data.title')}</Typography>
+      <Typography variant="body1">
+        <Box>
+          <Accordion>
+            <AccordionSummary expandIcon={<ArrowDownwardIcon />}>
+              <Typography variant="h6">{translate('resources.users.account_data.global')}</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              <Box sx={{ whiteSpace: "pre-wrap" }}>{JSON.stringify(globalAccountData, null, 4)}</Box>
+            </AccordionDetails>
+          </Accordion>
+          <Accordion>
+            <AccordionSummary expandIcon={<ArrowDownwardIcon />}>
+              <Typography variant="h6">{translate('resources.users.account_data.rooms')}</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              <Box sx={{ whiteSpace: "pre-wrap" }}>{JSON.stringify(roomsAccountData, null, 4)}</Box>
+            </AccordionDetails>
+          </Accordion>
+        </Box>
+      </Typography>
+    </Stack>
+  </>
+}
+
+export default UserAccountData;

src/components/UserImport.tsx

@@ -15,7 +15,8 @@ import {
 import { DataProvider, useTranslate } from "ra-core";
 import { useDataProvider, useNotify, RaRecord, Title } from "react-admin";
 
-import { generateRandomMxId, generateRandomPassword, returnMXID } from "../synapse/synapse";
+import { generateRandomMXID, returnMXID } from "../utils/mxid";
+import { generateRandomPassword } from "../utils/password";
 
 const LOGGING = true;
 
@@ -274,7 +275,7 @@ const FilePicker = () => {
         // 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 || userRecord.id === "") {
-          userRecord.id = generateRandomMxId();
+          userRecord.id = generateRandomMXID();
         }
         if (passwordMode === false || entry.password === undefined || entry.password === "") {
           userRecord.password = generateRandomPassword();
@@ -325,7 +326,7 @@ const FilePicker = () => {
                 );
               } else {
                 const newRecordData = Object.assign({}, recordData, {
-                  id: generateRandomMxId(),
+                  id: generateRandomMXID(),
                 });
                 retries++;
                 if (retries > 512) {
@@ -557,7 +558,7 @@ const FilePicker = () => {
       </CardActions>
     );
 
-  const allCards: JSX.Element[] = [];
+  const allCards: React.JSX.Element[] = [];
   if (uploadCard) allCards.push(uploadCard);
   if (errorCards) allCards.push(errorCards);
   if (conflictCards) allCards.push(conflictCards);
@@ -570,4 +571,5 @@ const FilePicker = () => {
   return [<Title defaultTitle={translate("import_users.title")} />, cardContainer];
 };
 
-export const ImportFeature = FilePicker;
+export const UserImport = FilePicker;
+export default UserImport;

src/components/UserRateLimits.tsx

@@ -4,11 +4,16 @@ import { useDataProvider, useNotify, useRecordContext, useTranslate } from "reac
 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 RateLimitRow = ({ limit, value, updateRateLimit }: { limit: string, value: any, updateRateLimit: (limit: string, value: any) => void }) => {
   const translate = useTranslate();
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    updateRateLimit(limit, parseInt(event.target.value));
+    const value = parseInt(event.target.value);
+    if (isNaN(value)) {
+      updateRateLimit(limit, null);
+      return;
+    }
+    updateRateLimit(limit, value);
   };
 
   return <Stack
@@ -41,15 +46,15 @@ const RateLimitRow = ({ limit, value, updateRateLimit }: { limit: string, value:
   </Stack>
 }
 
-export const UserRateLimits = () => {
+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,
+    messages_per_second: "", // we are setting string here to make the number field empty by default, null is prohibited by the field validation
+    burst_count: "",
   });
 
   if (!record) {
@@ -67,7 +72,7 @@ export const UserRateLimits = () => {
       fetchRateLimits();
   }, []);
 
-  const updateRateLimit = async (limit: string, value: number) => {
+  const updateRateLimit = async (limit: string, value: any) => {
     let updatedRateLimits = { ...rateLimits, [limit]: value };
     setRateLimits(updatedRateLimits);
     form.setValue(`rates.${limit}`, value, { shouldDirty: true });
@@ -88,3 +93,5 @@ export const UserRateLimits = () => {
     </Stack>
   </>
 };
+
+export default UserRateLimits;

src/components/config.ts

@@ -1,63 +0,0 @@
-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 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: storage.getItem("restrict_base_url") || "",
-    asManagedUsers: finalAsManagedUsers,
-    supportURL: storage.getItem("support_url") || "",
-    menu: finalMenu,
-  } as Config;
-
-}

src/components/date.ts

@@ -1,28 +0,0 @@
-export const DATE_FORMAT: Intl.DateTimeFormatOptions = {
-  year: "numeric",
-  month: "2-digit",
-  day: "2-digit",
-  hour: "2-digit",
-  minute: "2-digit",
-  second: "2-digit",
-};
-
-export const dateParser = (v: string | number | Date): number => {
-  const d = new Date(v);
-  return d.getTime();
-};
-
-export const dateFormatter = (v: string | number | Date | undefined | null): string => {
-  if (v === undefined || v === null) return "";
-  const d = new Date(v);
-
-  const pad = "00";
-  const year = d.getFullYear().toString();
-  const month = (pad + (d.getMonth() + 1).toString()).slice(-2);
-  const day = (pad + d.getDate().toString()).slice(-2);
-  const hour = (pad + d.getHours().toString()).slice(-2);
-  const minute = (pad + d.getMinutes().toString()).slice(-2);
-
-  // target format yyyy-MM-ddThh:mm
-  return `${year}-${month}-${day}T${hour}:${minute}`;
-};

src/components/etke.cc/README.md

@@ -0,0 +1,56 @@
+# etke.cc-specific components
+
+This directory contains [etke.cc](https://etke.cc)-specific components, unusable for any other purposes and/or configuration.
+
+We at [etke.cc](https://etke.cc) attempting to develop everything open-source, but some things are too specific to be used by anyone else. This directory contains such components - they are only available for [etke.cc](https://etke.cc) customers.
+
+Due to the specifics mentioned above, these components are documented here rather than in the [docs](../../../docs/README.md), plus they are not supported as part of the Synapse Admin open-source project (i.e.: no issues, no PRs, no support, no requests, etc.).
+
+## Components
+
+### Server Status icon
+
+![Server Status icon](../../../screenshots/etke.cc/server-status/indicator.webp)
+
+In the application bar the new monitoring icon is displayed that shows the current server status, and has the following color dot (and tooltip indicators):
+
+* 🟢 (green) - the server is up and running, everything is fine, no issues detected
+* 🟡 (yellow) - the server is up and running, but there is a command in progress (likely [maintenance](https://etke.cc/help/extras/scheduler/#maintenance)), so some temporary issues may occur - that's totally fine
+* 🔴 (red) - there is at least 1 issue with one of the server's components
+
+![Server Status icon in sidebar](../../../screenshots/etke.cc/server-status/indicator-sidebar.webp)
+
+The same icon (and link to the [Server Status page](#server-status-page)) is displayed in the sidebar.
+
+### Server Status page
+
+![Server Status Page](../../../screenshots/etke.cc/server-status/page.webp)
+
+When you click on the [Server Status icon](#server-status-icon) in the application bar, you will be redirected to the
+Server Status page. This page contains the following information:
+
+* Overall server status (up/updating/has issues)
+* Details about the currently running command (if any)
+* Details about the server's components statuses (up/down with error details and suggested actions) by categories
+
+This is [a Monitoring report](https://etke.cc/services/monitoring/)
+
+### Server Notifications icon
+
+![Server Notifications icon](../../../screenshots/etke.cc/server-notifications/badge.webp)
+
+In the application bar the new notifications icon is displayed that shows the number of unread (not removed) notifications
+
+### Server Notifications page
+
+![Server Notifications Page](../../../screenshots/etke.cc/server-notifications/page.webp)
+
+When you click on a notification from the [Server Notifications icon](#server-notifications-icon)'s list in the application bar, you will be redirected to the Server Notifications page. This page contains the full text of all the notifications you have about your server.
+
+### Server Commands Panel
+
+![Server Commands Panel](../../../screenshots/etke.cc/server-commands/panel.webp)
+
+When you open [Server Status page](#server-status-page), you will see the Server Commands panel. This panel contains all
+[the commands](https://etke.cc/help/extras/scheduler/#commands) you can run on your server in 1 click. Once command is finished, you will get a notification about the
+result.

src/components/etke.cc/ServerCommandsPanel.tsx

@@ -0,0 +1,182 @@
+import { useEffect, useState } from "react";
+import { Button, Loading, useDataProvider, useCreatePath, useStore } from "react-admin";
+import { useAppContext } from "../../Context";
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Alert, TextField, Box } from "@mui/material";
+import { PlayArrow, CheckCircle } from "@mui/icons-material";
+import { Icons } from "../../utils/icons";
+import { ServerCommand, ServerProcessResponse } from "../../synapse/dataProvider";
+import { Link } from 'react-router-dom';
+
+
+const renderIcon = (icon: string) => {
+  const IconComponent = Icons[icon] as React.ComponentType<any> | undefined;
+  return IconComponent ? <IconComponent sx={{ verticalAlign: "middle", mr: 1 }} /> : null;
+}
+
+const ServerCommandsPanel = () => {
+  const { etkeccAdmin } = useAppContext();
+  const createPath = useCreatePath();
+
+  const [ isLoading, setLoading ] = useState(true);
+    const [serverCommands, setServerCommands] = useState<{ [key: string]: ServerCommand }>({});
+    const [serverProcess, setServerProcess] = useStore<ServerProcessResponse>("serverProcess", { command: "", locked_at: "" });
+    const [commandIsRunning, setCommandIsRunning] = useState<boolean>(serverProcess.command !== "");
+    const [commandResult, setCommandResult] = useState<any[]>([]);
+
+    const dataProvider = useDataProvider();
+
+    useEffect(() => {
+      const fetchIsAdmin = async () => {
+        const serverCommandsResponse = await dataProvider.getServerCommands(etkeccAdmin);
+        if (serverCommandsResponse) {
+          const serverCommands = serverCommandsResponse;
+          Object.keys(serverCommandsResponse).forEach((command: string) => {
+            serverCommands[command].additionalArgs = "";
+          });
+          setServerCommands(serverCommands);
+        }
+        setLoading(false);
+      }
+      fetchIsAdmin();
+    }, []);
+
+    useEffect(() => {
+      if (serverProcess.command === "") {
+        setCommandIsRunning(false);
+      }
+    }, [serverProcess]);
+
+    const setCommandAdditionalArgs = (command: string, additionalArgs: string) => {
+      const updatedServerCommands = {...serverCommands};
+      updatedServerCommands[command].additionalArgs = additionalArgs;
+      setServerCommands(updatedServerCommands);
+    }
+
+    const runCommand = async (command: string) => {
+      setCommandResult([]);
+      setCommandIsRunning(true);
+
+      try {
+        const additionalArgs = serverCommands[command].additionalArgs || "";
+        const requestParams = additionalArgs ? { args: additionalArgs } : {};
+
+        const response = await dataProvider.runServerCommand(etkeccAdmin, command, requestParams);
+
+        if (!response.success) {
+          setCommandIsRunning(false);
+          return;
+        }
+
+        // Update UI with success message
+        const commandResults = buildCommandResultMessages(command, additionalArgs);
+        setCommandResult(commandResults);
+
+        // Reset the additional args field
+        resetCommandArgs(command);
+
+        // Update server process status
+        await updateServerProcessStatus(serverCommands[command]);
+      } catch (error) {
+        setCommandIsRunning(false);
+      }
+    };
+
+    const buildCommandResultMessages = (command: string, additionalArgs: string): React.ReactNode[] => {
+      const results: React.ReactNode[] = [];
+
+      let commandScheduledText = `Command scheduled: ${command}`;
+      if (additionalArgs) {
+        commandScheduledText += `, with additional args: ${additionalArgs}`;
+      }
+
+      results.push(<Box>{commandScheduledText}</Box>);
+      results.push(
+        <Box>
+          Expect your result in the <Link to={createPath({ resource: "server_notifications", type: "list" })}>Notifications</Link> page soon.
+        </Box>
+      );
+
+      return results;
+    };
+
+    const resetCommandArgs = (command: string) => {
+      const updatedServerCommands = {...serverCommands};
+      updatedServerCommands[command].additionalArgs = "";
+      setServerCommands(updatedServerCommands);
+    };
+
+    const updateServerProcessStatus = async (command: ServerCommand) => {
+      const commandIsLocking = command.with_lock;
+      const serverProcess = await dataProvider.getServerRunningProcess(etkeccAdmin, true);
+      if (!commandIsLocking && serverProcess.command === "") {
+        // if command is not locking, we simulate the "lock" mechanism so notifications will be refetched
+        serverProcess["command"] = command.name;
+        serverProcess["locked_at"] = new Date().toISOString();
+      }
+
+      setServerProcess({...serverProcess});
+    };
+
+    if (isLoading) {
+        return <Loading />
+    }
+
+    return (<>
+        <h2>Server Commands</h2>
+        <TableContainer component={Paper}>
+          <Table sx={{ minWidth: 450 }} size="small" aria-label="simple table">
+            <TableHead>
+            <TableRow>
+              <TableCell>Command</TableCell>
+              <TableCell>Description</TableCell>
+              <TableCell></TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {Object.entries(serverCommands).map(([command, { icon, args, description, additionalArgs }]) => (
+              <TableRow
+                key={command}
+                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+              >
+                <TableCell scope="row">
+                  <Box>
+                    {renderIcon(icon)}
+                    {command}
+                  </Box>
+                </TableCell>
+                <TableCell>{description}</TableCell>
+                <TableCell>
+                  {args && <TextField
+                    size="small"
+                    variant="standard"
+                    onChange={(e) => {
+                      setCommandAdditionalArgs(command, e.target.value);
+                    }}
+                    value={additionalArgs}
+                  />}
+                  <Button
+                    size="small"
+                    variant="contained"
+                    color="primary"
+                    label="Run"
+                    startIcon={<PlayArrow />}
+                    onClick={() => { runCommand(command); }}
+                    disabled={commandIsRunning || (args && typeof additionalArgs === 'string' && additionalArgs.length === 0)}
+                  ></Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+
+      {commandResult.length > 0 && <Alert icon={<CheckCircle fontSize="inherit" />} severity="success">
+        {commandResult.map((result, index) => (
+          <div key={index}>{result}</div>
+        ))}
+      </Alert>}
+    </>
+  )
+};
+
+export default ServerCommandsPanel;

src/components/etke.cc/ServerNotificationsBadge.tsx

@@ -0,0 +1,207 @@
+import { Badge, useTheme, Button, Paper, Popper, ClickAwayListener, Box, List, ListItem, ListItemText, Typography, ListSubheader, IconButton, Divider, Tooltip } from "@mui/material";
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import DeleteIcon from "@mui/icons-material/Delete";
+import { useDataProvider, useStore } from "react-admin";
+import { useNavigate } from "react-router";
+import { Fragment, useEffect, useState } from "react";
+import { useAppContext } from "../../Context";
+import { ServerNotificationsResponse, ServerProcessResponse } from "../../synapse/dataProvider";
+import { getTimeSince } from "../../utils/date";
+
+// 5 minutes
+const SERVER_NOTIFICATIONS_INTERVAL_TIME = 300000;
+
+const useServerNotifications = () => {
+  const [serverNotifications, setServerNotifications] = useStore<ServerNotificationsResponse>("serverNotifications", { notifications: [], success: false });
+  const [ serverProcess, setServerProcess ] = useStore<ServerProcessResponse>("serverProcess", { command: "", locked_at: "" });
+  const { command, locked_at } = serverProcess;
+
+  const { etkeccAdmin } = useAppContext();
+  const dataProvider = useDataProvider();
+  const { notifications, success } = serverNotifications;
+
+  const fetchNotifications = async () => {
+    const notificationsResponse: ServerNotificationsResponse = await dataProvider.getServerNotifications(etkeccAdmin, command !== "");
+    const serverNotifications = [...notificationsResponse.notifications];
+    serverNotifications.reverse();
+    setServerNotifications({
+      ...notificationsResponse,
+      notifications: serverNotifications,
+      success: notificationsResponse.success
+    });
+  };
+
+  const deleteServerNotifications = async () => {
+    const deleteResponse = await dataProvider.deleteServerNotifications(etkeccAdmin);
+    if (deleteResponse.success) {
+      setServerNotifications({
+        notifications: [],
+        success: true,
+      });
+    }
+  };
+
+  useEffect(() => {
+    let serverNotificationsInterval: NodeJS.Timeout | null = null;
+    let timeoutId: NodeJS.Timeout | null = null;
+
+    if (etkeccAdmin) {
+      fetchNotifications();
+      timeoutId = setTimeout(() => {
+        // start the interval after the SERVER_NOTIFICATIONS_INTERVAL_TIME to avoid too many requests
+        serverNotificationsInterval = setInterval(fetchNotifications, SERVER_NOTIFICATIONS_INTERVAL_TIME);
+      }, SERVER_NOTIFICATIONS_INTERVAL_TIME);
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      if (serverNotificationsInterval) {
+        clearInterval(serverNotificationsInterval);
+      }
+    }
+  }, [etkeccAdmin, command, locked_at]);
+
+  return { success, notifications, deleteServerNotifications };
+};
+
+export const ServerNotificationsBadge = () => {
+  const navigate = useNavigate();
+  const { success, notifications, deleteServerNotifications } = useServerNotifications();
+  const theme = useTheme();
+
+  // Modify menu state to work with Popper
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleSeeAllNotifications = () => {
+    handleClose();
+    navigate("/server_notifications");
+  };
+
+  const handleClearAllNotifications = async () => {
+    deleteServerNotifications()
+    handleClose();
+  };
+
+  if (!success) {
+    return null;
+  }
+
+  return (
+    <Box>
+      <IconButton onClick={handleOpen} sx={{ color: theme.palette.common.white }}>
+        <Tooltip title={notifications && notifications.length > 0 ? `${notifications.length} new notifications` : `No notifications yet`}>
+        {notifications && notifications.length > 0 && (
+          <Badge badgeContent={notifications.length} color="error">
+            <NotificationsIcon />
+          </Badge>
+        ) || <NotificationsIcon />}
+        </Tooltip>
+      </IconButton>
+      <Popper
+        open={open}
+        anchorEl={anchorEl}
+        placement="bottom-end"
+        style={{ zIndex: 1300 }}
+      >
+        <ClickAwayListener onClickAway={handleClose}>
+          <Paper
+            elevation={3}
+            sx={{
+              p: 1,
+              maxHeight: "350px",
+              paddingTop: 0,
+              overflowY: "auto",
+              minWidth: "300px",
+              maxWidth: {
+                xs: "100vw", // Full width on mobile
+                sm: "400px"  // Fixed width on desktop
+              }
+            }}
+          >
+            {(!notifications || notifications.length === 0) ? (
+              <Typography sx={{ p: 1 }} variant="body2">No new notifications</Typography>
+            ) : (
+              <List sx={{ p: 0 }} dense={true}>
+                <ListSubheader
+                  sx={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    fontWeight: "bold",
+                  }}
+                >
+                    <Typography variant="h6">Notifications</Typography>
+                    <Box sx={{ cursor: "pointer", color: theme.palette.primary.main }} onClick={() => handleSeeAllNotifications()}>See all notifications</Box>
+                  </ListSubheader>
+                <Divider />
+                {notifications.map((notification, index) => {
+                  return (<Fragment key={notification.event_id ? notification.event_id + index : index }>
+                    <ListItem
+                      onClick={() => handleSeeAllNotifications()}
+                      sx={{
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "flex-start",
+                        overflow: "hidden",
+                        "&:hover": {
+                          backgroundColor: "action.hover",
+                          cursor: "pointer"
+                        }
+                      }}
+                    >
+                      <ListItemText
+                        primary={
+                          <Typography
+                            variant="body2"
+                            sx={{
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                            }}
+                            dangerouslySetInnerHTML={{ __html: notification.output.split("\n")[0] }}
+                          />
+                        }
+                      />
+                      <ListItemText
+                        primary={
+                          <Typography variant="body2" sx={{ color: theme.palette.text.secondary }}>{getTimeSince(notification.sent_at) + " ago"}</Typography>
+                        }
+                      />
+                    </ListItem>
+                    <Divider />
+                  </Fragment>
+                )})}
+                <ListItem>
+                  <Button
+                    key="clear-all-notifications"
+                    onClick={() => handleClearAllNotifications()}
+                    size="small"
+                    color="error"
+                    sx={{
+                      pl: 0,
+                      pt: 1,
+                      verticalAlign: "middle"
+                    }}
+                  >
+                    <DeleteIcon fontSize="small" sx={{ mr: 1 }} />
+                    Clear all
+                  </Button>
+                </ListItem>
+              </List>
+            )}
+          </Paper>
+        </ClickAwayListener>
+      </Popper>
+    </Box>
+  );
+};

src/components/etke.cc/ServerNotificationsPage.tsx

@@ -0,0 +1,61 @@
+import { Box, Typography, Paper, Button } from "@mui/material"
+import { Stack } from "@mui/material"
+import { useStore } from "react-admin"
+import dataProvider, { ServerNotificationsResponse } from "../../synapse/dataProvider"
+import { useAppContext } from "../../Context";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { getTimeSince } from "../../utils/date";
+import { Tooltip } from "@mui/material";
+
+const DisplayTime = ({ date }: { date: string }) => {
+  const dateFromDateString = new Date(date.replace(" ", "T") + "Z");
+  return <Tooltip title={dateFromDateString.toLocaleString()}>{<span>{getTimeSince(date) + " ago"}</span>}</Tooltip>;
+};
+
+const ServerNotificationsPage = () => {
+  const { etkeccAdmin } = useAppContext();
+  const [serverNotifications, setServerNotifications] = useStore<ServerNotificationsResponse>("serverNotifications", {
+      notifications: [],
+      success: false,
+  });
+
+  const notifications = serverNotifications.notifications;
+
+  return (
+    <Stack spacing={3} mt={3}>
+      <Stack spacing={1} direction="row" alignItems="center">
+        <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", gap: 1 }}>
+          <Typography variant="h4">Server Notifications</Typography>
+          <Button variant="text" color="error" onClick={async () => {
+            await dataProvider.deleteServerNotifications(etkeccAdmin);
+            setServerNotifications({
+              notifications: [],
+              success: true,
+            });
+          }}>
+            <DeleteIcon fontSize="small" sx={{ mr: 1 }} /> Clear
+          </Button>
+        </Box>
+      </Stack>
+
+      {notifications.length === 0 ? (
+        <Paper sx={{ p: 2 }}>
+          <Typography>No new notifications.</Typography>
+        </Paper>
+      ) : (
+        notifications.map((notification, index) => (
+          <Paper key={notification.event_id ? notification.event_id : index} sx={{ p: 2 }}>
+            <Stack spacing={1}>
+              <Typography variant="subtitle1" fontWeight="bold" color="text.secondary">
+                <DisplayTime date={notification.sent_at} />
+              </Typography>
+              <Typography dangerouslySetInnerHTML={{ __html: notification.output }} />
+            </Stack>
+          </Paper>
+        ))
+      )}
+    </Stack>
+  );
+};
+
+export default ServerNotificationsPage;

src/components/etke.cc/ServerStatusBadge.tsx

@@ -0,0 +1,195 @@
+import { Avatar, Badge, Box, Theme, Tooltip } from "@mui/material";
+import { useEffect } from "react";
+import { useAppContext } from "../../Context";
+import { Button, useDataProvider, useStore } from "react-admin";
+import { styled } from '@mui/material/styles';
+import MonitorHeartIcon from '@mui/icons-material/MonitorHeart';
+import { BadgeProps } from "@mui/material/Badge";
+import { useNavigate } from "react-router";
+import { useTheme } from "@mui/material/styles";
+import { ServerProcessResponse, ServerStatusResponse } from "../../synapse/dataProvider";
+
+interface StyledBadgeProps extends BadgeProps {
+  backgroundColor: string;
+  badgeColor: string
+  theme?: Theme;
+}
+
+const StyledBadge = styled(Badge, { shouldForwardProp: (prop) => !['badgeColor', 'backgroundColor'].includes(prop as string) })<StyledBadgeProps>
+  (({ theme, backgroundColor, badgeColor }) => ({
+    '& .MuiBadge-badge': {
+      backgroundColor: backgroundColor,
+      color: badgeColor,
+      boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+      '&::after': {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        borderRadius: '50%',
+        animation: 'ripple 2.5s infinite ease-in-out',
+        border: '1px solid currentColor',
+        content: '""',
+      },
+    },
+    '@keyframes ripple': {
+      '0%': {
+        transform: 'scale(.8)',
+        opacity: 1,
+      },
+      '100%': {
+        transform: 'scale(2.4)',
+        opacity: 0,
+      },
+    },
+}));
+
+// every 5 minutes
+const SERVER_STATUS_INTERVAL_TIME = 5 * 60 * 1000;
+// every 5 seconds
+const SERVER_CURRENT_PROCCESS_INTERVAL_TIME = 5 * 1000;
+
+const useServerStatus = () => {
+  const [serverStatus, setServerStatus] = useStore<ServerStatusResponse>("serverStatus", { ok: false, success: false, host: "", results: [] });
+  const [serverProcess, setServerProcess] = useStore<ServerProcessResponse>("serverProcess", { command: "", locked_at: "" });
+  const { command, locked_at } = serverProcess;
+  const { etkeccAdmin } = useAppContext();
+  const dataProvider = useDataProvider();
+  const isOkay = serverStatus.ok;
+  const successCheck = serverStatus.success;
+
+  const checkServerStatus = async () => {
+    const serverStatus: ServerStatusResponse = await dataProvider.getServerStatus(etkeccAdmin, command !== "");
+    setServerStatus({
+      ok: serverStatus.ok,
+      success: serverStatus.success,
+      host: serverStatus.host,
+      results: serverStatus.results,
+    });
+  };
+
+  useEffect(() => {
+    let serverStatusInterval: NodeJS.Timeout | null = null;
+    let timeoutId: NodeJS.Timeout | null = null;
+
+    if (etkeccAdmin) {
+      checkServerStatus();
+      timeoutId = setTimeout(() => {
+        // start the interval after 10 seconds to avoid too many requests
+        serverStatusInterval = setInterval(checkServerStatus, SERVER_STATUS_INTERVAL_TIME);
+      }, 10000);
+    }  else {
+      setServerStatus({ ok: false, success: false, host: "", results: [] });
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      if (serverStatusInterval) {
+        clearInterval(serverStatusInterval);
+      }
+    }
+  }, [etkeccAdmin, command]);
+
+  return { isOkay, successCheck };
+};
+
+const useCurrentServerProcess = () => {
+  const [serverProcess, setServerProcess] = useStore<ServerProcessResponse>("serverProcess", { command: "", locked_at: "" });
+  const { etkeccAdmin } = useAppContext();
+  const dataProvider = useDataProvider();
+  const { command, locked_at } = serverProcess;
+
+  const checkServerRunningProcess = async () => {
+    const serverProcess: ServerProcessResponse = await dataProvider.getServerRunningProcess(etkeccAdmin, command !== "");
+    setServerProcess({
+      ...serverProcess,
+      command: serverProcess.command,
+      locked_at: serverProcess.locked_at
+    });
+  }
+
+  useEffect(() => {
+    let serverCheckInterval: NodeJS.Timeout | null = null;
+    let timeoutId: NodeJS.Timeout | null = null;
+
+    if (etkeccAdmin) {
+      checkServerRunningProcess();
+      timeoutId = setTimeout(() => {
+        serverCheckInterval = setInterval(checkServerRunningProcess, SERVER_CURRENT_PROCCESS_INTERVAL_TIME);
+      }, 5000);
+    } else {
+      setServerProcess({ command: "", locked_at: "" });
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      if (serverCheckInterval) {
+        clearInterval(serverCheckInterval);
+      }
+    }
+  }, [etkeccAdmin, command]);
+
+  return { command, locked_at };
+};
+
+export const ServerStatusStyledBadge = ({ command, locked_at, isOkay, inSidebar = false }: { command: string, locked_at: string, isOkay: boolean, inSidebar: boolean }) => {
+  const theme = useTheme();
+  let badgeBackgroundColor = isOkay ? theme.palette.success.light : theme.palette.error.main;
+  let badgeColor = isOkay ? theme.palette.success.light : theme.palette.error.main;
+
+  if (command && locked_at) {
+    badgeBackgroundColor = theme.palette.warning.main;
+    badgeColor = theme.palette.warning.main;
+  }
+  let avatarBackgroundColor = theme.palette.mode === "dark" ? theme.palette.background.default : "#2196f3";
+  if (inSidebar) {
+    avatarBackgroundColor = theme.palette.grey[600];
+  }
+
+  return <StyledBadge
+      overlap="circular"
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      variant="dot"
+      backgroundColor={badgeBackgroundColor}
+      badgeColor={badgeColor}
+    >
+      <Avatar sx={{ height: 24, width: 24, background: avatarBackgroundColor }}>
+        <MonitorHeartIcon sx={{ height: 22, width: 22, color: theme.palette.common.white }} />
+      </Avatar>
+  </StyledBadge>
+};
+
+const ServerStatusBadge = () => {
+    const { isOkay, successCheck } = useServerStatus();
+    const { command, locked_at } = useCurrentServerProcess();
+    const navigate = useNavigate();
+
+    if (!successCheck) {
+      return null;
+    }
+
+    const handleServerStatusClick = () => {
+      navigate("/server_status");
+    };
+
+    let tooltipText = "Click to view Server Status";
+
+    if (command && locked_at) {
+      tooltipText = `Running: ${command}; ${tooltipText}`;
+    }
+
+    return <Button onClick={handleServerStatusClick} size="medium" sx={{ minWidth: "auto", ".MuiButton-startIcon": { m: 0 }}}>
+      <Tooltip title={tooltipText} sx={{ cursor: "pointer" }}>
+          <Box>
+            <ServerStatusStyledBadge inSidebar={false} command={command || ""} locked_at={locked_at || ""} isOkay={isOkay} />
+          </Box>
+      </Tooltip>
+    </Button>
+};
+
+export default ServerStatusBadge;

src/components/etke.cc/ServerStatusPage.tsx

@@ -0,0 +1,138 @@
+import { useStore } from "ra-core";
+import { Box, Stack, Typography, Paper, Link, Chip, Divider, Tooltip, ChipProps } from "@mui/material";
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from "@mui/icons-material/Close";
+import EngineeringIcon from '@mui/icons-material/Engineering';
+import { ServerProcessResponse, ServerStatusComponent, ServerStatusResponse } from "../../synapse/dataProvider";
+import ServerCommandsPanel from "./ServerCommandsPanel";
+import { getTimeSince } from "../../utils/date";
+
+const StatusChip = ({ isOkay, size = "medium", command }: { isOkay: boolean, size?: "small" | "medium", command?: string   }) => {
+  let label = "OK";
+  let icon = <CheckIcon />;
+  let color: ChipProps["color"] = "success";
+  if (!isOkay) {
+    label = "Error";
+    icon = <CloseIcon />;
+    color = "error";
+  }
+
+  if (command) {
+    label = command;
+    color = "warning";
+    icon = <EngineeringIcon />;
+  }
+
+  return (
+    <Chip icon={icon} label={label} color={color} variant="outlined" size={size} />
+  );
+};
+
+const ServerComponentText = ({ text }: { text: string }) => {
+  return <Typography variant="body1" dangerouslySetInnerHTML={{ __html: text }} />;
+};
+
+const ServerStatusPage = () => {
+  const [serverStatus, setServerStatus] = useStore<ServerStatusResponse>("serverStatus", {
+    ok: false,
+    success: false,
+    host: "",
+    results: [],
+  });
+  const [ serverProcess, setServerProcess ] = useStore<ServerProcessResponse>("serverProcess", { command: "", locked_at: "" });
+  const { command, locked_at } = serverProcess;
+  const successCheck = serverStatus.success;
+  const isOkay = serverStatus.ok;
+  const host = serverStatus.host;
+  const results = serverStatus.results;
+
+  let groupedResults: Record<string, ServerStatusComponent[]> = {};
+  for (const result of results) {
+    if (!groupedResults[result.category]) {
+      groupedResults[result.category] = [];
+    }
+    groupedResults[result.category].push(result);
+  }
+
+  if (!successCheck) {
+    return (
+      <Paper elevation={3} sx={{ p: 3, mt: 3 }}>
+        <Stack direction="row" spacing={2} alignItems="center">
+          <CloseIcon color="error" />
+          <Typography color="error">
+            Unable to fetch server status. Please try again later.
+          </Typography>
+        </Stack>
+      </Paper>
+    );
+  }
+
+  return (
+    <Stack spacing={3} mt={3}>
+      <Stack spacing={1} direction="row" alignItems="center">
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <Typography variant="h4">Status:</Typography>
+          <StatusChip isOkay={isOkay} command={command} />
+        </Box>
+        <Typography variant="h5" color="primary" fontWeight="medium">
+          {host}
+        </Typography>
+      </Stack>
+      {command && locked_at && (
+      <Stack spacing={1} direction="row" alignItems="center">
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <Typography variant="h5">Currently running:</Typography>
+          <Typography variant="h5" color="text.secondary">
+            <Link href={"https://etke.cc/help/extras/scheduler/#"+command} target="_blank">
+              {command}
+            </Link>
+              <Tooltip title={locked_at.toString()}>
+                <Typography component="span" color="text.secondary" sx={{ display: "inline-block", ml: 1 }}>(started {getTimeSince(locked_at)} ago)</Typography>
+              </Tooltip>
+          </Typography>
+        </Box>
+      </Stack>
+      )}
+
+      <ServerCommandsPanel />
+
+      <Stack spacing={2} direction="row">
+        {Object.keys(groupedResults).map((category, idx) => (
+          <Box key={`category_${category}`} sx={{ flex: 1 }}>
+            <Typography variant="h5" mb={1}>
+              {category}
+            </Typography>
+            <Paper elevation={2} sx={{ p: 3 }}>
+              <Stack spacing={1} divider={<Divider />}>
+                {groupedResults[category].map((result, idx) => (
+                  <Box key={`${category}_${idx}`}>
+                    <Stack spacing={2}>
+                      <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+                        <StatusChip isOkay={result.ok} size="small" />
+                        {result.label.url ? (
+                          <Link href={result.label.url} target="_blank" rel="noopener noreferrer">
+                            <ServerComponentText text={result.label.text} />
+                          </Link>
+                        ) : (
+                          <ServerComponentText text={result.label.text} />
+                        )}
+                      </Box>
+                      {result.reason && <Typography color="text.secondary" dangerouslySetInnerHTML={{ __html: result.reason }}/>}
+                      {(!result.ok && result.help) && (
+                        <Link href={result.help} target="_blank" rel="noopener noreferrer" sx={{ mt: 1 }}>
+                          Learn more
+                        </Link>
+                      )}
+                    </Stack>
+                  </Box>
+                ))}
+              </Stack>
+            </Paper>
+          </Box>
+        ))}
+      </Stack>
+    </Stack>
+  );
+};
+
+export default ServerStatusPage;

src/components/icons.ts

@@ -1,12 +0,0 @@
-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

@@ -32,10 +32,10 @@ import {
 } from "react-admin";
 import { useMutation } from "@tanstack/react-query";
 
-import { dateParser } from "./date";
+import { dateParser } from "../utils/date";
 import { DeleteMediaParams, SynapseDataProvider } from "../synapse/dataProvider";
-import storage from "../storage";
 import { fetchAuthenticatedMedia } from "../utils/fetchMedia";
+import decodeURLComponent from "../utils/decodeURLComponent";
 
 const DeleteMediaDialog = ({ open, onClose, onSubmit }) => {
   const translate = useTranslate();
@@ -125,6 +125,80 @@ export const DeleteMediaButton = (props: ButtonProps) => {
   );
 };
 
+const PurgeRemoteMediaDialog = ({ open, onClose, onSubmit }) => {
+  const translate = useTranslate();
+
+  const PurgeRemoteMediaToolbar = (props: ToolbarProps) => (
+    <Toolbar {...props}>
+      <SaveButton label="purge_remote_media.action.send" icon={<DeleteSweepIcon />} />
+      <Button label="ra.action.cancel" onClick={onClose}>
+        <IconCancel />
+      </Button>
+    </Toolbar>
+  );
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>{translate("purge_remote_media.action.send")}</DialogTitle>
+      <DialogContent>
+        <DialogContentText>{translate("purge_remote_media.helper.send")}</DialogContentText>
+        <SimpleForm toolbar={<PurgeRemoteMediaToolbar />} onSubmit={onSubmit}>
+          <DateTimeInput
+            source="before_ts"
+            label="purge_remote_media.fields.before_ts"
+            defaultValue={0}
+            parse={dateParser}
+          />
+        </SimpleForm>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export const PurgeRemoteMediaButton = (props: ButtonProps) => {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const notify = useNotify();
+  const dataProvider = useDataProvider<SynapseDataProvider>();
+  const { mutate: purgeRemoteMedia, isPending } = useMutation({
+    mutationFn: (values: DeleteMediaParams) => dataProvider.purgeRemoteMedia(values),
+    onSuccess: () => {
+      notify("purge_remote_media.action.send_success");
+      closeDialog();
+    },
+    onError: () => {
+      notify("purge_remote_media.action.send_failure", {
+        type: "error",
+      });
+    },
+  });
+
+  const openDialog = () => setOpen(true);
+  const closeDialog = () => setOpen(false);
+
+  return (
+    <>
+      <Button
+        {...props}
+        label="purge_remote_media.action.send"
+        onClick={openDialog}
+        disabled={isPending}
+        sx={{
+          "&:hover": {
+            // Reset on mouse devices
+            "@media (hover: none)": {
+              backgroundColor: "transparent",
+            },
+          },
+        }}
+      >
+        <DeleteSweepIcon />
+      </Button>
+      <PurgeRemoteMediaDialog open={open} onClose={closeDialog} onSubmit={purgeRemoteMedia} />
+    </>
+  );
+};
+
 export const ProtectMediaButton = (props: ButtonProps) => {
   const record = useRecordContext();
   const translate = useTranslate();
@@ -315,6 +389,7 @@ export const QuarantineMediaButton = (props: ButtonProps) => {
 export const ViewMediaButton = ({ mxcURL, label, uploadName, mimetype }) => {
   const translate = useTranslate();
   const [loading, setLoading] = useState(false);
+  const notify = useNotify();
   const isImage = mimetype && mimetype.startsWith("image/");
 
   const openFileInNewTab = (blobURL: string) => {
@@ -341,12 +416,25 @@ export const ViewMediaButton = ({ mxcURL, label, uploadName, mimetype }) => {
   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);
+
+    if (response.ok) {
+      const blob = await response.blob();
+      const blobURL = URL.createObjectURL(blob);
+      if (preview) {
+        openFileInNewTab(blobURL);
+      } else {
+        downloadFile(blobURL);
+      }
     } else {
-      downloadFile(blobURL);
+      const body = await response.json();
+      notify("resources.room_media.action.error", {
+        messageArgs: {
+          errcode: body.errcode,
+          errstatus: response.status,
+          error: body.error,
+        },
+        type: "error",
+      });
     }
     setLoading(false);
   };
@@ -385,15 +473,23 @@ export const MediaIDField = ({ source }) => {
   if (!record) {
     return null;
   }
-  const homeserver = storage.getItem("home_server");
+  const homeserver = localStorage.getItem("home_server");
 
   const mediaID = get(record, source)?.toString();
   if (!mediaID) {
     return null;
   }
 
-  const uploadName = decodeURIComponent(get(record, "upload_name")?.toString());
-  const mxcURL = `mxc://${homeserver}/${mediaID}`;
+  let uploadName = mediaID;
+  if (get(record, "upload_name")) {
+    uploadName = decodeURLComponent(get(record, "upload_name")?.toString());
+  }
+
+  let mxcURL = mediaID;
+  if (!mediaID.startsWith(`mxc://${homeserver}`)) {
+    // this is user's media, where mediaID doesn't have the mxc://home_server/ prefix as it has in the rooms
+    mxcURL = `mxc://${homeserver}/${mediaID}`;
+  }
 
   return <ViewMediaButton mxcURL={mxcURL} label={mediaID} uploadName={uploadName} mimetype={record.media_type}/>;
 };
@@ -409,7 +505,10 @@ export const ReportMediaContent = ({ source }) => {
     return null;
   }
 
-  const uploadName = decodeURIComponent(get(record, "event_json.content.body")?.toString());
+  let uploadName = "";
+  if (get(record, "event_json.content.body")) {
+    uploadName = decodeURLComponent(get(record, "event_json.content.body")?.toString());
+  }
 
   return <ViewMediaButton mxcURL={mxcURL} label={mxcURL} uploadName={uploadName} mimetype={record.media_type}/>;
 };

src/components/mxid.tsx

@@ -1,16 +0,0 @@
-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

@@ -12,9 +12,14 @@ const fixedGermanMessages = {
       clear_filters: "Alle Filter entfernen",
       add_filter: "Filter hinzufügen",
     },
+    auth: {
+      ...formalGermanMessages.ra.auth,
+      email: "E-Mail",
+    },
     action: {
       ...formalGermanMessages.ra.action,
       update_application: "Anwendung aktualisieren",
+      select_all_button: "Alle auswählen",
     },
     page: {
       ...formalGermanMessages.ra.page,
@@ -25,9 +30,10 @@ const fixedGermanMessages = {
     message: {
       ...formalGermanMessages.ra.message,
       access_denied:
-        "Sie haben nicht die richtigen Berechtigungen um auf diese Seite zuzugreifen.",
+        "Sie haben nicht die erforderlichen Berechtigungen um auf diese Seite zuzugreifen.",
       authentication_error:
         "Der Authentifizierungsserver hat einen Fehler zurückgegeben und Ihre Anmeldedaten konnten nicht überprüft werden.",
+      select_all_limit_reached: "Es gibt zu viele Elemente, um sie alle auszuwählen. Es wurden nur die ersten %{max} Elemente ausgewählt.",
     },
   },
 }
@@ -37,7 +43,7 @@ const de: SynapseTranslationMessages = {
   synapseadmin: {
     auth: {
       base_url: "Heimserver URL",
-      welcome: "Willkommen bei Synapse-admin",
+      welcome: "Willkommen bei Synapse Admin",
       server_version: "Synapse Version",
       supports_specs: "unterstützt Matrix-Specs",
       username_error: "Bitte vollständigen Nutzernamen angeben: '@user:domain'",
@@ -55,7 +61,7 @@ const de: SynapseTranslationMessages = {
     },
     users: {
       invalid_user_id: "Lokaler Anteil der Matrix Benutzer-ID ohne Homeserver.",
-      tabs: { sso: "SSO", experimental: "Experimentell", limits: "Rate Limits" },
+      tabs: { sso: "SSO", experimental: "Experimentell", limits: "Rate Limits", account_data: "Kontodaten" },
     },
     rooms: {
       details: "Raumdetails",
@@ -64,6 +70,7 @@ const de: SynapseTranslationMessages = {
         members: "Mitglieder",
         detail: "Details",
         permission: "Berechtigungen",
+        media: "Medien",
       },
     },
     reports: { tabs: { basic: "Allgemein", detail: "Details" } },
@@ -146,6 +153,20 @@ const de: SynapseTranslationMessages = {
       send: "Diese API löscht die lokalen Medien von der Festplatte des eigenen Servers. Dies umfasst alle lokalen Miniaturbilder und Kopien von Medien. Diese API wirkt sich nicht auf Medien aus, die sich in externen Medien-Repositories befinden.",
     },
   },
+  purge_remote_media: {
+    name: "Externe Medien",
+    fields: {
+      before_ts: "letzter Zugriff vor",
+    },
+    action: {
+      send: "Externe Medien löschen",
+      send_success: "Die Anfrage zum Löschen externer Medien wurde gesendet.",
+      send_failure: "Bei der Anfrage zum Löschen externer Medien ist ein Fehler aufgetreten.",
+    },
+    helper: {
+      send: "Diese API löscht den externen Medien-Cache von der Festplatte Ihres eigenen Servers. Dazu gehören alle lokalen Thumbnails und Kopien heruntergeladener Medien. Diese API beeinflusst nicht die Medien, die in das eigene Medienarchiv des Servers hochgeladen wurden.",
+    },
+  },
   resources: {
     users: {
       name: "Benutzer",
@@ -159,11 +180,13 @@ const de: SynapseTranslationMessages = {
         is_guest: "Gast",
         admin: "Server Administrator",
         locked: "Gesperrt",
+        suspended: "Suspendiert",
         deactivated: "Deaktiviert",
         erased: "Gelöscht",
         guests: "Zeige Gäste",
         show_deactivated: "Zeige deaktivierte Benutzer",
         show_locked: "Zeige gesperrte Benutzer",
+        show_suspended: "Zeige suspendierte Benutzer",
         user_id: "Suche Benutzer",
         displayname: "Anzeigename",
         password: "Passwort",
@@ -179,11 +202,22 @@ const de: SynapseTranslationMessages = {
       },
       helper: {
         password: "Durch die Änderung des Passworts wird der Benutzer von allen Sitzungen abgemeldet.",
+        create_password: "Generiere ein starkes und sicheres Passwort mit dem Button unten.",
         deactivate: "Sie müssen ein Passwort angeben, um ein Konto wieder zu aktivieren.",
+        suspend: "Ein gesperrter Benutzer kann sich nicht mehr anmelden und wird in den schreibgeschützten Modus versetzt.",
         erase: "DSGVO konformes Löschen der Benutzerdaten.",
         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.",
+        username_available: "Benutzername verfügbar",
+      },
+      badge: {
+        you: "Sie",
+        bot: "Bot",
+        admin: "Administrator",
+        support: "Unterstützung",
+        regular: "Normaler Benutzer",
+        system_managed: "Systemverwalteter Benutzer",
       },
       action: {
         erase: "Lösche Benutzerdaten",
@@ -191,12 +225,21 @@ const de: SynapseTranslationMessages = {
         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",
+        overwrite_title: "Warnung!",
+        overwrite_content: "Dieser Benutzername ist bereits vergeben. Sind Sie sicher, dass Sie den vorhandenen Benutzer überschreiben möchten?",
+        overwrite_cancel: "Abbrechen",
+        overwrite_confirm: "Überschreiben",
       },
       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.",
+        messages_per_second_text: "Die Anzahl der Aktionen, die in einer Sekunde durchgeführt werden können.",
         burst_count: "Burst-Anzahl",
         burst_count_text: "Die Anzahl der Aktionen, die vor der Begrenzung durchgeführt werden können.",
+      },
+      account_data: {
+        title: "Kontodaten",
+        global: "Globale",
+        rooms: "Räume",
       }
     },
     rooms: {
@@ -220,10 +263,11 @@ const de: SynapseTranslationMessages = {
         history_visibility: "Historie-Sichtbarkeit",
         topic: "Thema",
         avatar: "Avatar",
+        actions: "Aktionen",
       },
       helper: {
         forward_extremities:
-          "Forward extremities are the leaf events at the end of a Directed acyclic graph (DAG) in a room, aka events that have no children. The more exist in a room, the more state resolution that Synapse needs to perform (hint: it's an expensive operation). While Synapse has code to prevent too many of these existing at one time in a room, bugs can sometimes make them crop up again. If a room has >10 forward extremities, it's worth checking which room is the culprit and potentially removing them using the SQL queries mentioned in #1760.",
+          "Vorderextremitäten sind Blatt-Ereignisse am Ende eines gerichteten azyklischen Graphens (DAG) in einem Raum, auch bekannt als Ereignisse ohne Nachkommen. Je mehr in einem Raum existieren, umso mehr Zustandsauflösungen muss Synapse absolvieren (Hinweis: dies ist eine sehr aufwendige Operation). Obwohl Synapse Code hat um zu verhindern, dass zuviele davon gleichzeitig in einem Raum existieren, können Bugs manchmal dafür sorgen, dass sie sich ansammeln. Wenn ein Raum >10 Vorderextremitäten hat ist es sinnvoll zu überprüfen um welchen Raum es sich handelt und sie gegebenenfalls, wie in #1769 beschrieben, mittels SQL-Queries zu entfernen.",
       },
       enums: {
         join_rules: {
@@ -248,13 +292,21 @@ const de: SynapseTranslationMessages = {
         erase: {
           title: "Raum löschen",
           content:
-            "Sind Sie sicher dass Sie den Raum löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden. Alle Nachrichten und Medien, die der Raum beinhaltet werden vom Server gelöscht!",
+            "Sind Sie sicher, dass Sie den Raum löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden. Alle Nachrichten und Medien, die der Raum beinhaltet werden vom Server gelöscht!",
           fields: {
-            block: "Benutzer blockieren und daran hindern, dem Raum beizutreten",
+            block: "Blockieren und Benutzer daran hindern, dem Raum beizutreten",
           },
           success: "Raum/Räume erfolgreich gelöscht.",
           failure: "Der/die Raum/Räume konnten nicht gelöscht werden.",
         },
+        make_admin: {
+          assign_admin: "Raumadministrator zuweisen",
+          title: "Raumadministrator zu %{roomName} zuweisen",
+          confirm: "Raumadministrator zuweisen",
+          content: "Geben Sie die vollständige MXID des Benutzers an, der als Administrator gesetzt werden soll.\nWarnung: Damit dies funktioniert, muss der Raum mindestens ein lokales Mitglied als Administrator haben.",
+          success: "Der/die Benutzer wurde/n als Raumadministrator gesetzt.",
+          failure: "Der/die Benutzer konnte/n nicht als Raumadministrator gesetzt werden. %{errMsg}",
+        }
       },
     },
     reports: {
@@ -288,7 +340,7 @@ const de: SynapseTranslationMessages = {
         erase: {
           title: "Gemeldetes Event löschen",
           content:
-            "Sind Sie sicher dass Sie das gemeldete Event löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
+            "Sind Sie sicher, dass Sie das gemeldete Event löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
         },
       },
     },
@@ -335,8 +387,8 @@ const de: SynapseTranslationMessages = {
     },
     protect_media: {
       action: {
-        create: "Ungeschützt, Schutz erstellen",
-        delete: "Geschützt, Schutz aufheben",
+        create: "Ungeschützt, Schutz aktivieren",
+        delete: "Geschützt, Schutz deaktivieren",
         none: "In Quarantäne",
         send_success: "Erfolgreich den Schutz-Status geändert.",
         send_failure: "Beim Versenden ist ein Fehler aufgetreten.",
@@ -406,6 +458,18 @@ const de: SynapseTranslationMessages = {
         sender: "Absender",
       },
     },
+    room_media: {
+      name: "Medien",
+      fields: {
+        media_id: "Medien ID",
+      },
+      helper: {
+        info: "Dies ist eine Liste der Medien, die in den Raum hochgeladen wurden. Es ist nicht möglich, Medien zu löschen, die in externen Medien-Repositories hochgeladen wurden.",
+      },
+      action: {
+        error: "%{errcode} (%{errstatus}) %{error}"
+      }
+    },
     room_directory: {
       name: "Raumverzeichnis",
       fields: {
@@ -416,8 +480,8 @@ const de: SynapseTranslationMessages = {
         title: "Raum aus Verzeichnis löschen |||| %{smart_count} Räume aus Verzeichnis löschen",
         content:
           "Möchten Sie den Raum wirklich aus dem Raumverzeichnis löschen? |||| Möchten Sie die %{smart_count} Räume wirklich aus dem Raumverzeichnis löschen?",
-        erase: "Lösche aus Verzeichnis",
-        create: "Eintragen ins Verzeichnis",
+        erase: "Aus Verzeichnis löschen",
+        create: "Ins Verzeichnis eintragen",
         send_success: "Raum erfolgreich eingetragen.",
         send_failure: "Beim Entfernen ist ein Fehler aufgetreten.",
       },
@@ -439,7 +503,7 @@ const de: SynapseTranslationMessages = {
       fields: {
         token: "Token",
         valid: "Gültige Token",
-        uses_allowed: "Anzahl",
+        uses_allowed: "Verwendungen erlaubt",
         pending: "Ausstehend",
         completed: "Abgeschlossen",
         expiry_time: "Ablaufzeit",

src/i18n/en.ts

@@ -7,7 +7,7 @@ const en: SynapseTranslationMessages = {
   synapseadmin: {
     auth: {
       base_url: "Homeserver URL",
-      welcome: "Welcome to Synapse-admin",
+      welcome: "Welcome to Synapse Admin",
       server_version: "Synapse version",
       supports_specs: "supports Matrix specs",
       username_error: "Please enter fully qualified user ID: '@user:domain'",
@@ -29,6 +29,7 @@ const en: SynapseTranslationMessages = {
         sso: "SSO",
         experimental: "Experimental",
         limits: "Rate Limits",
+        account_data: "Account Data",
       },
     },
     rooms: {
@@ -38,7 +39,8 @@ const en: SynapseTranslationMessages = {
         members: "Members",
         detail: "Details",
         permission: "Permissions",
-      },
+        media: "Media",
+      }
     },
     reports: { tabs: { basic: "Basic", detail: "Details" } },
   },
@@ -119,6 +121,20 @@ const en: SynapseTranslationMessages = {
       send: "This API deletes the local media from the disk of your own server. This includes any local thumbnails and copies of media downloaded. This API will not affect media that has been uploaded to external media repositories.",
     },
   },
+  purge_remote_media: {
+    name: "Remote Media",
+    fields: {
+      before_ts: "last access before",
+    },
+    action: {
+      send: "Purge remote media",
+      send_success: "Purge remote media request has been sent.",
+      send_failure: "An error has occurred with the purge remote media request.",
+    },
+    helper: {
+      send: "This API purges the remote media cache from the disk of your own server. This includes any local thumbnails and copies of media downloaded. This API will not affect media that has been uploaded to the server's own media repository.",
+    },
+  },
   resources: {
     users: {
       name: "User |||| Users",
@@ -132,11 +148,13 @@ const en: SynapseTranslationMessages = {
         is_guest: "Guest",
         admin: "Server Administrator",
         locked: "Locked",
+        suspended: "Suspended",
         deactivated: "Deactivated",
         erased: "Erased",
         guests: "Show guests",
         show_deactivated: "Show deactivated users",
         show_locked: "Show locked users",
+        show_suspended: "Show suspended users",
         user_id: "Search user",
         displayname: "Displayname",
         password: "Password",
@@ -152,11 +170,14 @@ const en: SynapseTranslationMessages = {
       },
       helper: {
         password: "Changing password will log user out of all sessions.",
+        create_password: "Generate a strong and secure password using the button below.",
         deactivate: "You must provide a password to re-activate an account.",
+        suspend: "Suspending user means they are put into a read-only mode.",
         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.",
+        username_available: "Username is available",
       },
       action: {
         erase: "Erase user data",
@@ -164,12 +185,29 @@ const en: SynapseTranslationMessages = {
         delete_media: "Delete all media uploaded by the user(-s)",
         redact_events: "Redact all events sent by the user(-s)",
         generate_password: "Generate password",
+        overwrite_title: "Warning!",
+        overwrite_content: "This username is already taken. Are you sure that you want to overwrite the existing user?",
+        overwrite_cancel: "Cancel",
+        overwrite_confirm: "Overwrite",
+      },
+      badge: {
+        you: "You",
+        bot: "Bot",
+        admin: "Admin",
+        support: "Support",
+        regular: "Regular User",
+        system_managed: "System-managed",
       },
       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",
+        messages_per_second_text: "The number of actions that can be performed in a second.",
         burst_count: "Burst count",
         burst_count_text: "How many actions that can be performed before being limited.",
+      },
+      account_data: {
+        title: "Account Data",
+        global: "Global",
+        rooms: "Rooms",
       }
     },
     rooms: {
@@ -193,6 +231,7 @@ const en: SynapseTranslationMessages = {
         history_visibility: "History visibility",
         topic: "Topic",
         avatar: "Avatar",
+        actions: "Actions",
       },
       helper: {
         forward_extremities:
@@ -228,6 +267,14 @@ const en: SynapseTranslationMessages = {
           success: "Room/s successfully deleted.",
           failure: "The room/s could not be deleted.",
         },
+        make_admin: {
+          assign_admin: "Assign admin",
+          title: "Assign a room admin to %{roomName}",
+          confirm: "Make admin",
+          content: "Put the full MXID of the user which will be set as admin.\nWarning: for this to work, the room needs to have at least one local member as admin.",
+          success: "The user has been set as room admin.",
+          failure: "The user could not be set as room admin. %{errMsg}",
+        }
       },
     },
     reports: {
@@ -378,6 +425,18 @@ const en: SynapseTranslationMessages = {
         sender: "Sender",
       },
     },
+    room_media: {
+      name: "Media",
+      fields: {
+        media_id: "Media ID",
+      },
+      helper: {
+        info: "This is a list of media that has been uploaded to the room. It is not possible to delete media that has been uploaded to external media repositories.",
+      },
+      action: {
+        error: "%{errcode} (%{errstatus}) %{error}",
+      },
+    },
     room_directory: {
       name: "Room directory",
       fields: {

src/i18n/fa.ts

@@ -24,7 +24,7 @@ const fa: SynapseTranslationMessages = {
     },
     users: {
       invalid_user_id: "بخش محلی یک شناسه کاربری ماتریکس بدون سرور خانگی.",
-      tabs: { sso: "SSO", experimental: "تجربی", limits: "محدودیت ها" },
+      tabs: { sso: "SSO", experimental: "تجربی", limits: "محدودیت ها", account_data: "داده های کاربر" },
     },
     rooms: {
       tabs: {
@@ -32,6 +32,7 @@ const fa: SynapseTranslationMessages = {
         members: "اعضا",
         detail: "جزئیات",
         permission: "مجوزها",
+        media: "رسانه ها",
       },
     },
     reports: { tabs: { basic: "اصلی", detail: "جزئیات" } },
@@ -113,6 +114,20 @@ const fa: SynapseTranslationMessages = {
       send: "این API رسانه های محلی را از دیسک سرور خود حذف می کند. این شامل هر تصویر کوچک محلی و کپی از رسانه دانلود شده است. این API بر رسانه‌هایی که در مخازن رسانه خارجی آپلود شده‌اند تأثیری نخواهد گذاشت.",
     },
   },
+  purge_remote_media: {
+    name: "رسانه‌های از راه دور",
+    fields: {
+      before_ts: "آخرین دسترسی قبل از",
+    },
+    action: {
+      send: "پاک کردن رسانه‌های از راه دور",
+      send_success: "درخواست پاک کردن رسانه‌های از راه دور ارسال شد.",
+      send_failure: "درخواست برای پاک کردن رسانه‌های از راه دور با خطا مواجه شد.",
+    },
+    helper: {
+      send: "این API کش رسانه‌های از راه دور را از دیسک سرور شما پاک می‌کند. این شامل هر گونه بندانگشتی محلی و نسخه‌های رسانه‌های دانلود شده می‌شود. این API بر رسانه‌های آپلود شده به مخزن رسانه سرور تأثیری نخواهد داشت.",
+    },
+  },
   resources: {
     users: {
       name: "کاربر |||| کاربران",
@@ -126,9 +141,12 @@ const fa: SynapseTranslationMessages = {
         is_guest: "مهمان",
         admin: "مدیر سرور",
         deactivated: "غیرفعال",
+        locked: "قفل شده",
+        suspended: "معلق",
         guests: "نمایش مهمانان",
         show_deactivated: "نمایش کاربران غیرفعال شده",
         show_locked: "نمایش کاربران قفل شده",
+        show_suspended: "نمایش کاربران معلق",
         user_id: "جستجوی کاربر",
         displayname: "نام نمایشی",
         password: "رمز عبور",
@@ -144,11 +162,22 @@ const fa: SynapseTranslationMessages = {
       },
       helper: {
         password: "با تغییر رمز عبور کاربر از تمام دستگاه ها خارج می شود.",
+        create_password: "رمز عبور قوی و امنی را با استفاده از دکمه زیر ایجاد کنید.",
         deactivate: "برای فعالسازی مجدد حساب باید رمز عبور وارد کنید.",
+        suspend: "کاربران معلق نمی توانند وارد شوند و پیام های آنها به دیگران نمایش داده نمی شود.",
         erase: "کاربر را به عنوان GDPR پاک شده علامت گذاری کنید",
         erase_text: "وهذا يعني أن الرسائل المرسلة من قبل المستخدم (المستخدمين) ستظل مرئية من قبل أي شخص كان في الغرفة عند إرسال هذه الرسائل، ولكنها مخفية عن المستخدمين الذين ينضمون إلى الغرفة بعد ذلك.",
         erase_admin_error: "حذف المستخدم الخاص غير مسموح به.",
         modify_managed_user_error: "لا يُسمح بتغيير المستخدم الذي يديره النظام.",
+        username_available: "نام کاربری موجود",
+      },
+      badge: {
+        you: "شما",
+        bot: "ربات",
+        admin: "مدیر",
+        support: "پشتیبان",
+        regular: "کاربر عادی",
+        system_managed: "مدیریت سیستم",
       },
       action: {
         erase: "پاک کردن اطلاعات کاربر",
@@ -156,12 +185,21 @@ const fa: SynapseTranslationMessages = {
         delete_media: "حذف جميع الوسائط التي تم تحميلها بواسطة المستخدم (المستخدمين)",
         redact_events: "تنقيح جميع الأحداث المرسلة من قبل المستخدم (-s)",
         generate_password: "توليد رمز عبور",
+        overwrite_title: "هشدار!",
+        overwrite_content: "این نام کاربری قبلا استفاده شده است. آیا مطمئن هستید که می خواهید کاربر موجود را بازنویسی کنید؟",
+        overwrite_cancel: "انصراف",
+        overwrite_confirm: "بازنویسی",
       },
       limits: {
         messages_per_second: "پیام در ثانیه",
-        messages_per_second_text: "تعداد عملیاتی که می تواند در یک ثانیه انجام شود. 0 به معنای غیرفعال کردن محدودیت برای این کاربر است.",
+        messages_per_second_text: "تعداد عملیاتی که می تواند در یک ثانیه انجام شود.",
         burst_count: "تعداد پیچیدگی",
         burst_count_text: "تعداد عملیاتی که می تواند قبل از محدودیت انجام شود.",
+      },
+      account_data: {
+        title: "داده های کاربر",
+        global: "عمومی",
+        rooms: "اتاق ها",
       }
     },
     rooms: {
@@ -185,6 +223,7 @@ const fa: SynapseTranslationMessages = {
         history_visibility: "مشاهده تاریخچه",
         topic: "موضوع",
         avatar: "آواتار",
+        actions: "عملیات",
       },
       helper: {
         forward_extremities:
@@ -220,6 +259,14 @@ const fa: SynapseTranslationMessages = {
           success: "اتاق با موفقیت حذف شد.",
           failure: "خطایی رخ داده است.",
         },
+        make_admin: {
+          assign_admin: "مدیر انتخاب کنید",
+          title: "مدیر اتاق %{roomName} را انتخاب کنید",
+          confirm: "مدیر انتخاب کنید",
+          content: "کامل MXID کاربری را وارد کنید که به عنوان مدیر تنظیم شود.\nهشدار: برای این کار، اتاق باید حداقل یک اعضای محلی به عنوان مدیر داشته باشد.",
+          success: "کاربر به عنوان مدیر اتاق تنظیم شد.",
+          failure: "کاربر به عنوان مدیر اتاق تنظیم نشد. %{errMsg}",
+        }
       },
     },
     reports: {
@@ -357,6 +404,18 @@ const fa: SynapseTranslationMessages = {
         sender: "فرستنده",
       },
     },
+    room_media: {
+      name: "رسانه ها",
+      fields: {
+        media_id: "شناسه رسانه",
+      },
+      helper: {
+        info: "این یک لیست از رسانه ها است که در اتاق بارگذاری شده است. نمی توان رسانه ها را حذف کرد که در اتاق های خارجی بارگذاری شده اند.",
+      },
+      action: {
+        error: "%{errcode} (%{errstatus}) %{error}"
+      }
+    },
     room_directory: {
       name: "راهنمای اتاق",
       fields: {

src/i18n/fr.ts

@@ -7,7 +7,7 @@ const fr: SynapseTranslationMessages = {
   synapseadmin: {
     auth: {
       base_url: "URL du serveur d’accueil",
-      welcome: "Bienvenue sur Synapse-admin",
+      welcome: "Bienvenue sur Synapse Admin",
       server_version: "Version du serveur Synapse",
       username_error: "Veuillez entrer un nom d'utilisateur complet : « @utilisateur:domaine »",
       protocol_error: "L'URL doit commencer par « http:// » ou « https:// »",
@@ -24,7 +24,7 @@ const fr: SynapseTranslationMessages = {
     },
     users: {
       invalid_user_id: "Partie locale d'un identifiant utilisateur Matrix sans le nom du serveur d’accueil.",
-      tabs: { sso: "Authentification unique", experimental: "Expérimental", limits: "Limites" },
+      tabs: { sso: "Authentification unique", experimental: "Expérimental", limits: "Limites", account_data: "Données du compte" },
     },
     rooms: {
       tabs: {
@@ -32,6 +32,7 @@ const fr: SynapseTranslationMessages = {
         members: "Membres",
         detail: "Détails",
         permission: "Permissions",
+        media: "Médias",
       },
     },
     reports: { tabs: { basic: "Informations de base", detail: "Détails" } },
@@ -116,6 +117,20 @@ const fr: SynapseTranslationMessages = {
       send: "Cette API supprime les médias locaux du disque de votre propre serveur. Cela inclut toutes les vignettes locales et les copies des médias téléchargés. Cette API n'affectera pas les médias qui ont été téléversés dans des dépôts de médias externes.",
     },
   },
+  purge_remote_media: {
+    name: "Médias distants",
+    fields: {
+      before_ts: "dernier accès avant",
+    },
+    action: {
+      send: "Purger les médias distants",
+      send_success: "La demande de purge des médias distants a été envoyée.",
+      send_failure: "Une erreur est survenue lors de la demande de purge des médias distants.",
+    },
+    helper: {
+      send: "Cette API purge le cache des médias distants du disque de votre propre serveur. Cela inclut toutes les vignettes locales et les copies des médias téléchargés. Cette API n'affectera pas les médias qui ont été téléchargés dans le dépôt de médias du serveur.",
+    },
+  },
   resources: {
     users: {
       name: "Utilisateur |||| Utilisateurs",
@@ -129,10 +144,12 @@ const fr: SynapseTranslationMessages = {
         is_guest: "Visiteur",
         admin: "Administrateur du serveur",
         locked: "Verrouillé",
+        suspended: "Suspendu",
         deactivated: "Désactivé",
         guests: "Afficher les visiteurs",
         show_deactivated: "Afficher les utilisateurs désactivés",
         show_locked: "Afficher les utilisateurs verrouillés",
+        show_suspended: "Afficher les utilisateurs suspendus",
         user_id: "Rechercher un utilisateur",
         displayname: "Nom d'affichage",
         password: "Mot de passe",
@@ -146,11 +163,23 @@ const fr: SynapseTranslationMessages = {
         auth_provider: "Fournisseur d'identité",
       },
       helper: {
+        password: "Changer le mot de passe déconnectera l'utilisateur de toutes les sessions.",
+        create_password: "Générer un mot de passe fort et sécurisé en utilisant le bouton ci-dessous.",
         deactivate: "Vous devrez fournir un mot de passe pour réactiver le compte.",
+        suspend: "L'utilisateur sera suspendu jusqu'à ce que vous le réactiviez.",
         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.",
+        username_available: "Nom d'utilisateur disponible",
+      },
+      badge: {
+        you: "Vous",
+        bot: "Bot",
+        admin: "Admin",
+        support: "Support",
+        regular: "Utilisateur régulier",
+        system_managed: "Géré par le système",
       },
       action: {
         erase: "Effacer les données de l'utilisateur",
@@ -158,12 +187,21 @@ const fr: SynapseTranslationMessages = {
         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",
+        overwrite_title: "Attention !",
+        overwrite_content: "Ce nom d'utilisateur est déjà pris. Êtes-vous sûr de vouloir écraser l'utilisateur existant ?",
+        overwrite_cancel: "Annuler",
+        overwrite_confirm: "Écraser",
       },
       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.",
+        messages_per_second_text: "Le nombre d'actions que l'utilisateur peut effectuer par seconde.",
         burst_count: "Compteur de pics",
         burst_count_text: "Le nombre d'actions que l'utilisateur peut effectuer avant d'être limité.",
+      },
+      account_data: {
+        title: "Données du compte",
+        global: "Globales",
+        rooms: "Salons",
       }
     },
     rooms: {
@@ -187,6 +225,7 @@ const fr: SynapseTranslationMessages = {
         history_visibility: "Visibilité de l'historique",
         topic: "Sujet",
         avatar: "Avatar",
+        actions: "Actions",
       },
       helper: {
         forward_extremities:
@@ -222,6 +261,14 @@ const fr: SynapseTranslationMessages = {
           success: "Salle/s supprimées avec succès.",
           failure: "La/les salle/s n'ont pas pu être supprimées.",
         },
+        make_admin: {
+          assign_admin: "Assigner un administrateur",
+          title: "Assigner un administrateur au salon %{roomName}",
+          confirm: "Assigner un administrateur",
+          content: "Entrez la MXID complète de l'utilisateur qui sera désigné comme administrateur.\nAttention : pour que cela fonctionne, la salle doit avoir au moins un membre local en tant qu'administrateur.",
+          success: "L'utilisateur a été désigné comme administrateur de la salle.",
+          failure: "L'utilisateur n'a pas pu être désigné comme administrateur de la salle. %{errMsg}",
+        }
       },
     },
     reports: {
@@ -359,6 +406,18 @@ const fr: SynapseTranslationMessages = {
         sender: "Expéditeur",
       },
     },
+    room_media: {
+      name: "Médias",
+      fields: {
+        media_id: "Identifiant du média",
+      },
+      helper: {
+        info: "Cette liste contient les médias qui ont été téléchargés dans le salon. Il n'est pas possible de supprimer les médias qui ont été téléversés dans des dépôts de médias externes.",
+      },
+      action: {
+        error: "%{errcode} (%{errstatus}) %{error}"
+      }
+    },
     room_directory: {
       name: "Répertoire des salons",
       fields: {

src/i18n/index.d.ts

@@ -22,7 +22,7 @@ interface SynapseTranslationMessages extends TranslationMessages {
     };
     users: {
       invalid_user_id: string;
-      tabs: { sso: string; experimental: string; limits: string; };
+      tabs: { sso: string; experimental: string; limits: string; account_data: string; };
     };
     rooms: {
       details?: string; // TODO: fa, fr, it, zh
@@ -31,6 +31,7 @@ interface SynapseTranslationMessages extends TranslationMessages {
         members: string;
         detail: string;
         permission: string;
+        media: string;
       };
     };
     reports: { tabs: { basic: string; detail: string } };
@@ -111,6 +112,20 @@ interface SynapseTranslationMessages extends TranslationMessages {
       send: string;
     };
   };
+  purge_remote_media: {
+    name: string;
+    fields: {
+      before_ts: string;
+    };
+    action: {
+      send: string;
+      send_success: string;
+      send_failure: string;
+    };
+    helper: {
+      send: string;
+    };
+  };
   resources: {
     users: {
       name: string;
@@ -124,11 +139,13 @@ interface SynapseTranslationMessages extends TranslationMessages {
         is_guest: string;
         admin: string;
         locked?: string; // TODO: fa, zh
+        suspended: string;
         deactivated: string;
         erased?: string; // TODO: fa, fr, it, zh
         guests: string;
         show_deactivated: string;
         show_locked?: string; // TODO: de, fa, fr, it, zh
+        show_suspended: string;
         user_id: string;
         displayname: string;
         password: string;
@@ -143,12 +160,15 @@ interface SynapseTranslationMessages extends TranslationMessages {
         user_type?: string;
       };
       helper: {
-        password?: string;
+        password: string;
+        create_password: string;
         deactivate: string;
+        suspend: string;
         erase: string;
         erase_text: string;
         erase_admin_error: string;
         modify_managed_user_error: string;
+        username_available: string;
       };
       action: {
         erase: string;
@@ -156,13 +176,30 @@ interface SynapseTranslationMessages extends TranslationMessages {
         delete_media: string;
         redact_events: string;
         generate_password: string;
+        overwrite_title: string;
+        overwrite_content: string;
+        overwrite_cancel: string;
+        overwrite_confirm: string;
       };
+      badge: {
+        you: string;
+        bot: string;
+        admin: string;
+        support: string;
+        regular: string;
+        system_managed: string;
+      }
       limits: {
         messages_per_second: string;
         messages_per_second_text: string;
         burst_count: string;
         burst_count_text: string;
       };
+      account_data: {
+        title: string;
+        global: string;
+        rooms: string;
+      }
     };
     rooms: {
       name: string;
@@ -185,6 +222,7 @@ interface SynapseTranslationMessages extends TranslationMessages {
         history_visibility: string;
         topic?: string;
         avatar?: string;
+        actions: string;
       };
       helper?: {
         forward_extremities: string;
@@ -218,6 +256,14 @@ interface SynapseTranslationMessages extends TranslationMessages {
           success: string;
           failure: string;
         };
+        make_admin: {
+          assign_admin: string;
+          title: string;
+          confirm: string;
+          content: string;
+          success: string;
+          failure: string;
+        };
       };
     };
     reports: {
@@ -370,6 +416,18 @@ interface SynapseTranslationMessages extends TranslationMessages {
         sender: string;
       };
     };
+    room_media?: {
+      name: string;
+      fields: {
+        media_id: string;
+      };
+      helper: {
+        info: string;
+      };
+      action: {
+        error: string;
+      };
+    };
     room_directory?: {
       name: string;
       fields: {

src/i18n/it.ts

@@ -7,7 +7,7 @@ const it: SynapseTranslationMessages = {
   synapseadmin: {
     auth: {
       base_url: "URL dell'homeserver",
-      welcome: "Benvenuto in Synapse-admin",
+      welcome: "Benvenuto in Synapse Admin",
       server_version: "Versione di Synapse",
       username_error: "Per favore inserisci un ID utente completo: '@utente:dominio'",
       protocol_error: "L'URL deve iniziare per 'http://' o 'https://'",
@@ -24,7 +24,7 @@ const it: SynapseTranslationMessages = {
     },
     users: {
       invalid_user_id: "ID utente non valido su questo homeserver.",
-      tabs: { sso: "SSO", experimental: "Sperimentale", limits: "Limiti" },
+      tabs: { sso: "SSO", experimental: "Sperimentale", limits: "Limiti", account_data: "Dati del profilo" },
     },
     rooms: {
       tabs: {
@@ -32,6 +32,7 @@ const it: SynapseTranslationMessages = {
         members: "Membro",
         detail: "Dettagli",
         permission: "Permessi",
+        media: "Media",
       },
     },
     reports: { tabs: { basic: "Semplice", detail: "Dettagli" } },
@@ -113,6 +114,20 @@ const it: SynapseTranslationMessages = {
       send: "Questa API cancella i media locali dal disco del tuo server. Questo include anche ogni miniatura e copia del media scaricato. Questa API non inciderà sui media che sono stati caricati nei repository esterni.",
     },
   },
+  purge_remote_media: {
+    name: "Media Remoti",
+    fields: {
+      before_ts: "ultimo accesso prima di",
+    },
+    action: {
+      send: "Elimina media remoti",
+      send_success: "La richiesta per eliminare i media remoti è stata inviata.",
+      send_failure: "Si è verificato un errore con la richiesta di eliminazione dei media remoti.",
+    },
+    helper: {
+      send: "Questa API elimina la cache dei media remoti dal disco del tuo server. Questo include qualsiasi miniatura locale e copie di media scaricati. Questa API non influirà sui media che sono stati caricati nel repository multimediale del server.",
+    },
+  },
   resources: {
     users: {
       name: "Utente |||| Utenti",
@@ -126,10 +141,12 @@ const it: SynapseTranslationMessages = {
         is_guest: "Ospite",
         admin: "Amministratore",
         locked: "Bloccato",
+        suspended: "Sospeso",
         deactivated: "Disattivato",
         guests: "Mostra gli ospiti",
         show_deactivated: "Mostra gli utenti disattivati",
         show_locked: "Mostra gli utenti bloccati",
+        show_suspended: "Mostra gli utenti sospesi",
         user_id: "Cerca utente",
         displayname: "Nickname",
         password: "Password",
@@ -145,11 +162,22 @@ const it: SynapseTranslationMessages = {
       },
       helper: {
         password: "Cambiando la password l'utente verrà disconnesso da tutte le sessioni attive.",
+        create_password: "Genera una password forte e sicura utilizzando il pulsante sottostante.",
         deactivate: "Devi fornire una password per riattivare l'account.",
+        suspend: "Sospendi l'utente",
         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.",
+        username_available: "Nome utente disponibile",
+      },
+      badge: {
+        you: "Tu",
+        bot: "Bot",
+        admin: "Amministratore",
+        support: "Supporto",
+        regular: "Utente normale",
+        system_managed: "Gestito dal sistema",
       },
       action: {
         erase: "Cancella i dati dell'utente",
@@ -157,12 +185,21 @@ const it: SynapseTranslationMessages = {
         delete_media: "Elimina tutti i media caricati dall'utente(-s)",
         redact_events: "Ridurre tutti gli eventi inviati dall'utente(-s)",
         generate_password: "Genera password",
+        overwrite_title: "Attenzione!",
+        overwrite_content: "Questo nome utente è già stato utilizzato. Sei sicuro di voler sovrascrivere l'utente esistente?",
+        overwrite_cancel: "Annulla",
+        overwrite_confirm: "Sovrascrivi",
       },
       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.",
+        messages_per_second_text: "Il numero di azioni che l'utente può eseguire al secondo.",
         burst_count: "Burst-conteggio",
         burst_count_text: "Il numero di azioni che l'utente può eseguire prima di essere limitato.",
+      },
+      account_data: {
+        title: "Dati del profilo",
+        global: "Globale",
+        rooms: "Stanza",
       }
     },
     rooms: {
@@ -186,6 +223,7 @@ const it: SynapseTranslationMessages = {
         history_visibility: "Visibilità temporale",
         topic: "Topic",
         avatar: "Avatar",
+        actions: "Azioni",
       },
       helper: {
         /*        forward_extremities:
@@ -216,6 +254,14 @@ const it: SynapseTranslationMessages = {
         content:
           "Sei sicuro di voler eliminare questa stanza? Questa azione è definitiva. Tutti i messaggi e i media condivisi in questa stanza verranno eliminati dal server!",
       },
+      make_admin: {
+        assign_admin: "Assegna un amministratore",
+        title: "Assegna un amministratore alla stanza %{roomName}",
+        confirm: "Assegna un amministratore",
+        content: "Inserisci la MXID completa dell'utente che sarà designato come amministratore.\nAttenzione: per questo funzionare, la stanza deve avere almeno un membro locale come amministratore.",
+        success: "L'utente è stato designato come amministratore della stanza.",
+        failure: "L'utente non può essere designato come amministratore della stanza. %{errMsg}",
+      }
     },
   },
   reports: {
@@ -353,6 +399,18 @@ const it: SynapseTranslationMessages = {
       sender: "Mittente",
     },
   },
+  room_media: {
+    name: "Media",
+    fields: {
+      media_id: "ID Media",
+    },
+    helper: {
+      info: "Questo è un elenco dei media caricati nella stanza. Non è possibile eliminare i media caricati su repository esterni.",
+    },
+    action: {
+      error: "%{errcode} (%{errstatus}) %{error}"
+    }
+  },
   room_directory: {
     name: "Elenco delle stanze",
     fields: {

src/i18n/ru.ts

@@ -11,6 +11,10 @@ const fixedRussianMessages = {
       no_filtered_results: "Нет результатов",
       clear_filters: "Все фильтры сбросить",
     },
+    action: {
+      ...russianMessages.ra.action,
+      select_all_button: "Выбрать все",
+    },
     page: {
       ...russianMessages.ra.page,
       empty: "Пусто",
@@ -23,6 +27,7 @@ const fixedRussianMessages = {
         "У вас нет прав доступа к этой странице.",
       authentication_error:
         "Сервер аутентификации вернул ошибку и не смог проверить ваши учетные данные.",
+      select_all_limit_reached: "Слишком много элементов для выбора. Были выбраны только первые %{max} элементов.",
     },
   },
 }
@@ -32,7 +37,7 @@ const ru: SynapseTranslationMessages = {
   synapseadmin: {
     auth: {
       base_url: "Адрес домашнего сервера",
-      welcome: "Добро пожаловать в Synapse-admin",
+      welcome: "Добро пожаловать в Synapse Admin",
       server_version: "Версия Synapse",
       supports_specs: "поддерживает спецификации Matrix",
       username_error: "Пожалуйста, укажите полный ID пользователя: '@user:domain'",
@@ -50,7 +55,7 @@ const ru: SynapseTranslationMessages = {
     },
     users: {
       invalid_user_id: "Локальная часть ID пользователя Matrix без адреса домашнего сервера.",
-      tabs: { sso: "SSO", experimental: "Экспериментальные", limits: "Ограничения" },
+      tabs: { sso: "SSO", experimental: "Экспериментальные", limits: "Ограничения", account_data: "Данные пользователя" },
     },
     rooms: {
       details: "Данные комнаты",
@@ -59,6 +64,7 @@ const ru: SynapseTranslationMessages = {
         members: "Участники",
         detail: "Подробности",
         permission: "Права доступа",
+        media: "Медиа",
       },
     },
     reports: { tabs: { basic: "Основные", detail: "Подробности" } },
@@ -147,10 +153,24 @@ const ru: SynapseTranslationMessages = {
     helper: {
       send: "Это API удаляет локальные файлы с вашего собственного сервера, включая локальные миниатюры и копии скачанных файлов. \
       Данный API не затрагивает файлы, загруженные во внешние хранилища.",
-      },
-      },
-      resources: {
-      users: {
+    },
+  },
+  purge_remote_media: {
+    name: "Внешние медиа",
+    fields: {
+      before_ts: "последний доступ до",
+    },
+    action: {
+      send: "Очистить внешние медиа",
+      send_success: "Запрос на очистку внешних медиа был отправлен.",
+      send_failure: "Произошла ошибка при запросе очистки внешних медиа.",
+    },
+    helper: {
+      send: "Этот API очищает кэш внешних медиа с диска вашего сервера. Это включает любые локальные миниатюры и копии загруженных медиа. Этот API не повлияет на медиа, которые были загружены в собственное медиа-хранилище сервера.",
+    },
+  },
+  resources: {
+    users: {
       name: "Пользователь |||| Пользователи",
       email: "Почта",
       msisdn: "Телефон",
@@ -162,11 +182,13 @@ const ru: SynapseTranslationMessages = {
         is_guest: "Гость",
         admin: "Администратор сервера",
         locked: "Заблокирован",
+        suspended: "Приостановлен",
         deactivated: "Деактивирован",
         erased: "Удалён",
         guests: "Показывать гостей",
         show_deactivated: "Показывать деактивированных",
         show_locked: "Показывать заблокированных",
+        show_suspended: "Показывать приостановленных",
         user_id: "Поиск пользователя",
         displayname: "Отображаемое имя",
         password: "Пароль",
@@ -182,11 +204,22 @@ const ru: SynapseTranslationMessages = {
       },
       helper: {
         password: "Смена пароля завершит все сессии пользователя.",
+        create_password: "Сгенерировать надёжный и безопасный пароль, используя кнопку ниже.",
         deactivate: "Вы должны предоставить пароль для реактивации учётной записи.",
+        suspend: "Приостановка учётной записи означает, что пользователь не сможет войти в свою учётную запись, пока она не будет снова активирована.",
         erase: "Пометить пользователя как удалённого в соответствии с GDPR",
         erase_text: "Это означает, что сообщения, отправленные пользователем (-ами), будут по-прежнему видны всем, кто находился в комнате в момент их отправки, но будут скрыты от пользователей, присоединившихся к комнате после этого.",
         erase_admin_error: "Удаление собственного пользователя запрещено.",
         modify_managed_user_error: "Изменение пользователя, управляемого системой, не допускается.",
+        username_available: "Имя пользователя доступно",
+      },
+      badge: {
+        you: "Вы",
+        bot: "Бот",
+        admin: "Админ",
+        support: "Поддержка",
+        regular: "Обычный пользователь",
+        system_managed: "Управляемый системой",
       },
       action: {
         erase: "Удалить данные пользователя",
@@ -194,265 +227,295 @@ const ru: SynapseTranslationMessages = {
         delete_media: "Удаление всех медиафайлов, загруженных пользователем (-ами)",
         redact_events: "Удаление всех событий, отправленных пользователем (-ами)",
         generate_password: "Сгенерировать пароль",
+        overwrite_title: "Предупреждение!",
+        overwrite_content: "Это имя пользователя уже занято. Вы уверены, что хотите перезаписать существующего пользователя?",
+        overwrite_cancel: "Отмена",
+        overwrite_confirm: "Перезаписать",
       },
       limits: {
         messages_per_second: "Сообщений в секунду",
-        messages_per_second_text: "Количество действий, которые могут быть выполнены в секунду. 0 означает, что ограничение на количество действий отключено для этого пользователя.",
+        messages_per_second_text: "Количество действий, которые могут быть выполнены в секунду.",
         burst_count: "Burst-счётчик",
         burst_count_text: "Количество действий, которые могут быть выполнены до ограничения.",
+      },
+      account_data: {
+        title: "Данные пользователя",
+        global: "Глобальные",
+        rooms: "Комнаты",
       }
     },
-      rooms: {
-        name: "Комната |||| Комнаты",
-        fields: {
-          room_id: "ID комнаты",
-          name: "Название",
-          canonical_alias: "Псевдоним",
-          joined_members: "Участники",
-          joined_local_members: "Локальные участники",
-          joined_local_devices: "Локальные устройства",
-          state_events: "События состояния / Сложность",
-          version: "Версия",
-          is_encrypted: "Зашифровано",
-          encryption: "Шифрование",
-          federatable: "Федерация",
-          public: "Отображается в каталоге комнат",
-          creator: "Создатель",
-          join_rules: "Правила входа",
-          guest_access: "Гостевой доступ",
-          history_visibility: "Видимость истории",
-          topic: "Тема",
-          avatar: "Аватар",
-        },
-        helper: {
-          forward_extremities:
-            "Оконечности — это события-листья в конце ориентированного ациклического графа (DAG) в комнате, т.е. события без дочерних элементов. \
-          Чем больше их в комнате, тем больше Synapse работает над разрешением состояния (это дорогостоящая операция). \
-          Хотя Synapse старается не допускать существования слишком большого числа таких событий в комнате, из-за ошибок они иногда снова появляются. \
-          Если в комнате >10 оконечностей, стоит найти комнату-виновника и попробовать удалить их с помощью SQL-запросов из #1760.",
-        },
-        enums: {
-          join_rules: {
-            public: "Для всех",
-            knock: "Надо постучать",
-            invite: "По приглашению",
-            private: "Приватная",
-          },
-          guest_access: {
-            can_join: "Гости могут войти",
-            forbidden: "Гости не могут войти",
-          },
-          history_visibility: {
-            invited: "С момента приглашения",
-            joined: "С момента входа",
-            shared: "С момента открытия доступа",
-            world_readable: "Для всех",
-          },
-          unencrypted: "Без шифрования",
-        },
-        action: {
-          erase: {
-            title: "Удалить комнату",
-            content:
-              "Действительно удалить эту комнату? Это действие будет невозможно отменить. Все сообщения и файлы в комнате будут удалены с сервера!",
-            fields: {
-              block: "Заблокировать и запретить пользователям присоединяться к комнате",
-            },
-            success: "Комната/ы успешно удалены",
-            failure: "Комната/ы не могут быть удалены.",
-          },
-        },
+    rooms: {
+      name: "Комната |||| Комнаты",
+      fields: {
+        room_id: "ID комнаты",
+        name: "Название",
+        canonical_alias: "Псевдоним",
+        joined_members: "Участники",
+        joined_local_members: "Локальные участники",
+        joined_local_devices: "Локальные устройства",
+        state_events: "События состояния / Сложность",
+        version: "Версия",
+        is_encrypted: "Зашифровано",
+        encryption: "Шифрование",
+        federatable: "Федерация",
+        public: "Отображается в каталоге комнат",
+        creator: "Создатель",
+        join_rules: "Правила входа",
+        guest_access: "Гостевой доступ",
+        history_visibility: "Видимость истории",
+        topic: "Тема",
+        avatar: "Аватар",
+        actions: "Действия",
       },
-      reports: {
-        name: "Жалоба |||| Жалобы",
-        fields: {
-          id: "ID",
-          received_ts: "Дата и время жалобы",
-          user_id: "Автор жалобы",
-          name: "Название комнаты",
-          score: "Баллы",
-          reason: "Причина",
-          event_id: "ID события",
-          event_json: {
-            origin: "Исходнный сервер",
-            origin_server_ts: "Дата и время отправки",
-            type: "Тип события",
-            content: {
-              msgtype: "Тип содержимого",
-              body: "Содержимое",
-              format: "Формат",
-              formatted_body: "Форматированное содержимое",
-              algorithm: "Алгоритм",
-              url: "Ссылка",
-              info: {
-                mimetype: "Тип",
-              },
-            },
-          },
-        },
-        action: {
-          erase: {
-            title: "Удалить жалобу",
-            content: "Действительно удалить жалобу? Это действие будет невозможно отменить.",
-          },
-        },
+      helper: {
+        forward_extremities:
+          "Оконечности — это события-листья в конце ориентированного ациклического графа (DAG) в комнате, т.е. события без дочерних элементов. \
+        Чем больше их в комнате, тем больше Synapse работает над разрешением состояния (это дорогостоящая операция). \
+        Хотя Synapse старается не допускать существования слишком большого числа таких событий в комнате, из-за ошибок они иногда снова появляются. \
+        Если в комнате >10 оконечностей, стоит найти комнату-виновника и попробовать удалить их с помощью SQL-запросов из #1760.",
       },
-      connections: {
-        name: "Подключения",
-        fields: {
-          last_seen: "Дата",
-          ip: "IP адрес",
-          user_agent: "Юзер-агент",
+      enums: {
+        join_rules: {
+          public: "Для всех",
+          knock: "Надо постучать",
+          invite: "По приглашению",
+          private: "Приватная",
         },
+        guest_access: {
+          can_join: "Гости могут войти",
+          forbidden: "Гости не могут войти",
+        },
+        history_visibility: {
+          invited: "С момента приглашения",
+          joined: "С момента входа",
+          shared: "С момента открытия доступа",
+          world_readable: "Для всех",
+        },
+        unencrypted: "Без шифрования",
       },
-      devices: {
-        name: "Устройство |||| Устройства",
-        fields: {
-          device_id: "ID устройства",
-          display_name: "Название",
-          last_seen_ts: "Дата и время",
-          last_seen_ip: "IP адрес",
-        },
-        action: {
-          erase: {
-            title: "Удаление %{id}",
-            content: 'Действительно удалить устройство "%{name}"?',
-            success: "Устройство успешно удалено.",
-            failure: "Произошла ошибка.",
-          },
-        },
-      },
-      users_media: {
-        name: "Файлы",
-        fields: {
-          media_id: "ID файла",
-          media_length: "Размер файла (в байтах)",
-          media_type: "Тип",
-          upload_name: "Имя файла",
-          quarantined_by: "На карантине",
-          safe_from_quarantine: "Защитить от карантина",
-          created_ts: "Создано",
-          last_access_ts: "Последний доступ",
-        },
-        action: {
-          open: "Открыть файл в новом окне",
-        },
-      },
-      protect_media: {
-        action: {
-          create: "Не защищён, установить защиту",
-          delete: "Защищён, снять защиту",
-          none: "На карантине",
-          send_success: "Статус защиты успешно изменён.",
-          send_failure: "Произошла ошибка.",
-        },
-      },
-      quarantine_media: {
-        action: {
-          name: "Карантин",
-          create: "Поместить на карантин",
-          delete: "На карантине, снять карантин",
-          none: "Защищено от карантина",
-          send_success: "Статус карантина успешно изменён.",
-          send_failure: "Произошла ошибка.",
-        },
-      },
-      pushers: {
-        name: "Пушер |||| Пушеры",
-        fields: {
-          app: "Приложение",
-          app_display_name: "Название приложения",
-          app_id: "ID приложения",
-          device_display_name: "Название устройства",
-          kind: "Вид",
-          lang: "Язык",
-          profile_tag: "Тег профиля",
-          pushkey: "Ключ",
-          data: { url: "URL" },
-        },
-      },
-      servernotices: {
-        name: "Серверные уведомления",
-        send: "Отправить серверные уведомления",
-        fields: {
-          body: "Сообщение",
-        },
-        action: {
-          send: "Отправить",
-          send_success: "Серверное уведомление успешно отправлено.",
-          send_failure: "Произошла ошибка.",
-        },
-        helper: {
-          send: 'Отправить серверное уведомление выбранным пользователям. На сервере должна быть активна функция "Server Notices".',
-        },
-      },
-      user_media_statistics: {
-        name: "Файлы пользователей",
-        fields: {
-          media_count: "Количество файлов",
-          media_length: "Размер файлов",
-        },
-      },
-      forward_extremities: {
-        name: "Оконечности",
-        fields: {
-          id: "ID события",
-          received_ts: "Дата и время",
-          depth: "Глубина",
-          state_group: "Группа состояния",
-        },
-      },
-      room_state: {
-        name: "События состояния",
-        fields: {
-          type: "Тип",
-          content: "Содержимое",
-          origin_server_ts: "Дата отправки",
-          sender: "Отправитель",
-        },
-      },
-      room_directory: {
-        name: "Каталог комнат",
-        fields: {
-          world_readable: "Гости могут просматривать без входа",
-          guest_can_join: "Гости могут войти",
-        },
-        action: {
-          title:
-            "Удалить комнату из каталога |||| Удалить %{smart_count} комнаты из каталога |||| Удалить %{smart_count} комнат из каталога",
+      action: {
+        erase: {
+          title: "Удалить комнату",
           content:
-            "Действительно удалить комнату из каталога? |||| Действительно удалить %{smart_count} комнаты из каталога? |||| Действительно удалить %{smart_count} комнат из каталога?",
-          erase: "Удалить из каталога комнат",
-          create: "Опубликовать в каталоге комнат",
-          send_success: "Комната успешно опубликована.",
-          send_failure: "Произошла ошибка.",
+            "Действительно удалить эту комнату? Это действие будет невозможно отменить. Все сообщения и файлы в комнате будут удалены с сервера!",
+          fields: {
+            block: "Заблокировать и запретить пользователям присоединяться к комнате",
+          },
+          success: "Комната/ы успешно удалены",
+          failure: "Комната/ы не могут быть удалены.",
+        },
+        make_admin: {
+          assign_admin: "Назначить администратора",
+          title: "Назначить администратора комнате %{roomName}",
+          confirm: "Назначить администратора",
+          content: "Введите полную MXID пользователя, которого нужно назначить администратором.\nПредупреждение: для этого должен быть назначен хотя бы один локальный участник в качестве администратора.",
+          success: "Пользователь назначен администратором комнаты.",
+          failure: "Пользователь не может быть назначен администратором комнаты. %{errMsg}",
+        }
+      },
+    },
+    reports: {
+      name: "Жалоба |||| Жалобы",
+      fields: {
+        id: "ID",
+        received_ts: "Дата и время жалобы",
+        user_id: "Автор жалобы",
+        name: "Название комнаты",
+        score: "Баллы",
+        reason: "Причина",
+        event_id: "ID события",
+        event_json: {
+          origin: "Исходнный сервер",
+          origin_server_ts: "Дата и время отправки",
+          type: "Тип события",
+          content: {
+            msgtype: "Тип содержимого",
+            body: "Содержимое",
+            format: "Формат",
+            formatted_body: "Форматированное содержимое",
+            algorithm: "Алгоритм",
+            url: "Ссылка",
+            info: {
+              mimetype: "Тип",
+            },
+          },
         },
       },
-      destinations: {
-        name: "Федерация",
-        fields: {
-          destination: "Назначение",
-          failure_ts: "Дата и время ошибки",
-          retry_last_ts: "Дата и время последней попытки",
-          retry_interval: "Интервал между попытками",
-          last_successful_stream_ordering: "Последний успешный поток",
-          stream_ordering: "Поток",
+      action: {
+        erase: {
+          title: "Удалить жалобу",
+          content: "Действительно удалить жалобу? Это действие будет невозможно отменить.",
         },
-        action: { reconnect: "Переподключиться" },
       },
-      registration_tokens: {
-        name: "Токены регистрации",
-        fields: {
-          token: "Токен",
-          valid: "Рабочий токен",
-          uses_allowed: "Количество использований",
-          pending: "Ожидает",
-          completed: "Завершено",
-          expiry_time: "Дата окончания",
-          length: "Длина",
+    },
+    connections: {
+      name: "Подключения",
+      fields: {
+        last_seen: "Дата",
+        ip: "IP адрес",
+        user_agent: "Юзер-агент",
+      },
+    },
+    devices: {
+      name: "Устройство |||| Устройства",
+      fields: {
+        device_id: "ID устройства",
+        display_name: "Название",
+        last_seen_ts: "Дата и время",
+        last_seen_ip: "IP адрес",
+      },
+      action: {
+        erase: {
+          title: "Удаление %{id}",
+          content: 'Действительно удалить устройство "%{name}"?',
+          success: "Устройство успешно удалено.",
+          failure: "Произошла ошибка.",
         },
-        helper: { length: "Длина токена, если токен не задан." },
       },
-},
+    },
+    users_media: {
+      name: "Файлы",
+      fields: {
+        media_id: "ID файла",
+        media_length: "Размер файла (в байтах)",
+        media_type: "Тип",
+        upload_name: "Имя файла",
+        quarantined_by: "На карантине",
+        safe_from_quarantine: "Защитить от карантина",
+        created_ts: "Создано",
+        last_access_ts: "Последний доступ",
+      },
+      action: {
+        open: "Открыть файл в новом окне",
+      },
+    },
+    protect_media: {
+      action: {
+        create: "Не защищён, установить защиту",
+        delete: "Защищён, снять защиту",
+        none: "На карантине",
+        send_success: "Статус защиты успешно изменён.",
+        send_failure: "Произошла ошибка.",
+      },
+    },
+    quarantine_media: {
+      action: {
+        name: "Карантин",
+        create: "Поместить на карантин",
+        delete: "На карантине, снять карантин",
+        none: "Защищено от карантина",
+        send_success: "Статус карантина успешно изменён.",
+        send_failure: "Произошла ошибка.",
+      },
+    },
+    pushers: {
+      name: "Пушер |||| Пушеры",
+      fields: {
+        app: "Приложение",
+        app_display_name: "Название приложения",
+        app_id: "ID приложения",
+        device_display_name: "Название устройства",
+        kind: "Вид",
+        lang: "Язык",
+        profile_tag: "Тег профиля",
+        pushkey: "Ключ",
+        data: { url: "URL" },
+      },
+    },
+    servernotices: {
+      name: "Серверные уведомления",
+      send: "Отправить серверные уведомления",
+      fields: {
+        body: "Сообщение",
+      },
+      action: {
+        send: "Отправить",
+        send_success: "Серверное уведомление успешно отправлено.",
+        send_failure: "Произошла ошибка.",
+      },
+      helper: {
+        send: 'Отправить серверное уведомление выбранным пользователям. На сервере должна быть активна функция "Server Notices".',
+      },
+    },
+    user_media_statistics: {
+      name: "Файлы пользователей",
+      fields: {
+        media_count: "Количество файлов",
+        media_length: "Размер файлов",
+      },
+    },
+    forward_extremities: {
+      name: "Оконечности",
+      fields: {
+        id: "ID события",
+        received_ts: "Дата и время",
+        depth: "Глубина",
+        state_group: "Группа состояния",
+      },
+    },
+    room_state: {
+      name: "События состояния",
+      fields: {
+        type: "Тип",
+        content: "Содержимое",
+        origin_server_ts: "Дата отправки",
+        sender: "Отправитель",
+      },
+    },
+    room_media: {
+      name: "Медиа",
+      fields: {
+        media_id: "ID медиа",
+      },
+      helper: {
+        info: "Это список медиа, которые были загружены в комнату. Невозможно удалить медиа, которые были загружены в внешние медиа-репозитории.",
+      },
+      action: {
+        error: "%{errcode} (%{errstatus}) %{error}"
+      }
+    },
+    room_directory: {
+      name: "Каталог комнат",
+      fields: {
+        world_readable: "Гости могут просматривать без входа",
+        guest_can_join: "Гости могут войти",
+      },
+      action: {
+        title:
+          "Удалить комнату из каталога |||| Удалить %{smart_count} комнаты из каталога |||| Удалить %{smart_count} комнат из каталога",
+        content:
+          "Действительно удалить комнату из каталога? |||| Действительно удалить %{smart_count} комнаты из каталога? |||| Действительно удалить %{smart_count} комнат из каталога?",
+        erase: "Удалить из каталога комнат",
+        create: "Опубликовать в каталоге комнат",
+        send_success: "Комната успешно опубликована.",
+        send_failure: "Произошла ошибка.",
+      },
+    },
+    destinations: {
+      name: "Федерация",
+      fields: {
+        destination: "Назначение",
+        failure_ts: "Дата и время ошибки",
+        retry_last_ts: "Дата и время последней попытки",
+        retry_interval: "Интервал между попытками",
+        last_successful_stream_ordering: "Последний успешный поток",
+        stream_ordering: "Поток",
+      },
+      action: { reconnect: "Переподключиться" },
+    },
+    registration_tokens: {
+      name: "Токены регистрации",
+      fields: {
+        token: "Токен",
+        valid: "Рабочий токен",
+        uses_allowed: "Количество использований",
+        pending: "Ожидает",
+        completed: "Завершено",
+        expiry_time: "Дата окончания",
+        length: "Длина",
+      },
+      helper: { length: "Длина токена, если токен не задан." },
+    },
+  },
 };
 export default ru;

src/i18n/zh.ts

@@ -11,9 +11,14 @@ const fixedChineseMessages = {
       no_filtered_results: "没有结果",
       clear_filters: "清除所有过滤器",
     },
+    auth: {
+      ...chineseMessages.ra.auth,
+      email: "邮箱",
+    },
     action: {
       ...chineseMessages.ra.action,
-      update_application: "Anwendung aktualisieren",
+      update_application: "更新应用",
+      select_all_button: "全部选择",
     },
     page: {
       ...chineseMessages.ra.page,
@@ -26,6 +31,7 @@ const fixedChineseMessages = {
         "您没有访问此页面的权限。",
       authentication_error:
         "身份验证服务器返回错误，无法验证您的凭据。",
+      select_all_limit_reached: "选择的元素太多。只选择了前 %{max} 个元素。",
     },
   },
 }
@@ -35,7 +41,7 @@ const zh: SynapseTranslationMessages = {
   synapseadmin: {
     auth: {
       base_url: "服务器 URL",
-      welcome: "欢迎来到 Synapse-admin",
+      welcome: "欢迎来到 Synapse Admin",
       server_version: "Synapse 版本",
       username_error: "请输入完整有效的用户 ID: '@user:domain'",
       protocol_error: "URL 需要以'http://'或'https://'作为起始",
@@ -52,7 +58,7 @@ const zh: SynapseTranslationMessages = {
     },
     users: {
       invalid_user_id: "必须要是一个有效的 Matrix 用户 ID ，例如 @user_id:homeserver",
-      tabs: { sso: "SSO", experimental: "实验性", limits: "限制" },
+      tabs: { sso: "SSO", experimental: "实验性", limits: "限制", account_data: "账户数据" },
     },
     rooms: {
       tabs: {
@@ -60,6 +66,7 @@ const zh: SynapseTranslationMessages = {
         members: "成员",
         detail: "细节",
         permission: "权限",
+        media: "媒体",
       },
     },
     reports: { tabs: { basic: "基本", detail: "细节" } },
@@ -141,6 +148,20 @@ const zh: SynapseTranslationMessages = {
       send: "这个API会删除您硬盘上的本地媒体。包含了任何的本地缓存和下载的媒体备份。这个API不会影响上传到外部媒体存储库上的媒体文件。",
     },
   },
+  purge_remote_media: {
+    name: "远程媒体",
+    fields: {
+      before_ts: "最后访问于之前",
+    },
+    action: {
+      send: "清除远程媒体",
+      send_success: "远程媒体清除请求已发送。",
+      send_failure: "发生错误，远程媒体清除请求未成功。",
+    },
+    helper: {
+      send: "此API清除您服务器磁盘上的远程媒体缓存。这包括任何本地缩略图和下载的媒体副本。此API不会影响已经上传到服务器媒体存储库的媒体。",
+    },
+  },
   resources: {
     users: {
       name: "用户",
@@ -153,10 +174,13 @@ const zh: SynapseTranslationMessages = {
         name: "用户名",
         is_guest: "访客",
         admin: "服务器管理员",
+        locked: "锁定",
         deactivated: "被禁用",
+        suspended: "被锁定",
         guests: "显示访客",
         show_deactivated: "显示被禁用的账户",
         show_locked: "显示被锁定的账户",
+        show_suspended: "显示被锁定的账户",
         user_id: "搜索用户",
         displayname: "显示名字",
         password: "密码",
@@ -169,11 +193,23 @@ const zh: SynapseTranslationMessages = {
         consent_version: "协议版本",
       },
       helper: {
+        password: "更改密码会使用户注销所有会话。",
+        create_password: "使用下面的按钮生成一个强大和安全的密码。",
         deactivate: "您必须提供一串密码来激活账户。",
+        suspend: "您必须提供一串密码来暂停账户。",
         erase: "将用户标记为根据 GDPR 的要求抹除了",
         erase_text: "这意味着用户发送的信息对于发送信息时在房间内的任何人来说都是可见的，但对于之后加入房间的用户来说则是隐藏的。",
         erase_admin_error: "不允许删除自己的用户",
         modify_managed_user_error: "不允许修改系统管理的用户。",
+        username_available: "用户名可用",
+      },
+      badge: {
+        you: "您",
+        bot: "机器人",
+        admin: "管理员",
+        support: "支持",
+        regular: "普通用户",
+        system_managed: "系统管理",
       },
       action: {
         erase: "抹除用户信息",
@@ -181,12 +217,21 @@ const zh: SynapseTranslationMessages = {
         delete_media: "删除用户上传的所有媒体",
         redact_events: "重新编辑用户（-s）发送的所有事件",
         generate_password: "生成密码",
+        overwrite_title: "警告！",
+        overwrite_content: "这个用户名已经被占用。您确定要覆盖现有的用户吗？",
+        overwrite_cancel: "取消",
+        overwrite_confirm: "覆盖",
       },
       limits: {
         messages_per_second: "每秒消息数",
-        messages_per_second_text: "每秒可以执行的操作数。0 表示禁用此用户的限制。",
+        messages_per_second_text: "每秒可以执行的操作数。",
         burst_count: "Burst-计数",
         burst_count_text: "在限制之前可以执行的操作数。",
+      },
+      account_data: {
+        title: "账户数据",
+        global: "全局",
+        rooms: "房间",
       }
     },
     rooms: {
@@ -207,6 +252,9 @@ const zh: SynapseTranslationMessages = {
         join_rules: "加入规则",
         guest_access: "访客访问",
         history_visibility: "历史可见性",
+        topic: "主题",
+        avatar: "头像",
+        actions: "操作",
       },
       enums: {
         join_rules: {
@@ -326,6 +374,18 @@ const zh: SynapseTranslationMessages = {
         media_length: "媒体文件长度",
       },
     },
+    room_media: {
+      name: "媒体",
+      fields: {
+        media_id: "媒体ID",
+      },
+      helper: {
+        info: "这是上传到房间的媒体列表。无法删除上传到外部媒体存储库的媒体。",
+      },
+      action: {
+        error: "%{errcode} (%{errstatus}) %{error}"
+      }
+    },
   },
 };
 export default zh;

src/index.tsx

@@ -2,42 +2,15 @@ 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";
+import { App } from "./App";
+import { AppContext } from "./Context";
+import { FetchConfig, GetConfig } from "./utils/config";
 
-// load config.json
-let props: Config = {};
-try {
-  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);
-  }
-}
+await FetchConfig();
 
 createRoot(document.getElementById("root")).render(
       <React.StrictMode>
-        <AppContext.Provider value={props}>
+        <AppContext.Provider value={GetConfig()}>
           <App />
         </AppContext.Provider>
       </React.StrictMode>

src/pages/LoginPage.test.tsx

@@ -2,9 +2,10 @@ import polyglotI18nProvider from "ra-i18n-polyglot";
 
 import { render, screen } from "@testing-library/react";
 import { AdminContext } from "react-admin";
+import { BrowserRouter } from "react-router-dom";
 
 import LoginPage from "./LoginPage";
-import { AppContext } from "../AppContext";
+import { AppContext } from "../Context";
 import englishMessages from "../i18n/en";
 
 const i18nProvider = polyglotI18nProvider(() => englishMessages, "en", [{ locale: "en", name: "English" }]);
@@ -14,9 +15,11 @@ describe("LoginForm", () => {
   it("renders with no restriction to homeserver", async () => {
     await act(async () => {
       render(
-        <AdminContext i18nProvider={i18nProvider}>
-          <LoginPage />
-        </AdminContext>
+        <BrowserRouter>
+          <AdminContext i18nProvider={i18nProvider}>
+            <LoginPage />
+          </AdminContext>
+        </BrowserRouter>
       );
     });
 
@@ -33,11 +36,15 @@ describe("LoginForm", () => {
 
   it("renders with single restricted homeserver", () => {
     render(
-      <AppContext.Provider value={{ restrictBaseUrl: "https://matrix.example.com" }}>
+      <BrowserRouter>
+        <AppContext.Provider
+          value={{ restrictBaseUrl: "https://matrix.example.com", asManagedUsers: [], menu: [] }}
+        >
         <AdminContext i18nProvider={i18nProvider}>
           <LoginPage />
-        </AdminContext>
-      </AppContext.Provider>
+          </AdminContext>
+        </AppContext.Provider>
+      </BrowserRouter>
     );
 
     screen.getByText(englishMessages.synapseadmin.auth.welcome);
@@ -54,12 +61,16 @@ describe("LoginForm", () => {
   it("renders with multiple restricted homeservers", async () => {
     render(
       <AppContext.Provider
-        value={{
-          restrictBaseUrl: ["https://matrix.example.com", "https://matrix.example.org"],
+          value={{
+            restrictBaseUrl: ["https://matrix.example.com", "https://matrix.example.org"],
+            asManagedUsers: [],
+          menu: [],
         }}
       >
         <AdminContext i18nProvider={i18nProvider}>
-          <LoginPage />
+          <BrowserRouter>
+            <LoginPage />
+          </BrowserRouter>
         </AdminContext>
       </AppContext.Provider>
     );

src/pages/LoginPage.tsx

@@ -16,7 +16,7 @@ import {
 } from "react-admin";
 import { useFormContext } from "react-hook-form";
 import LoginFormBox from "../components/LoginFormBox";
-import { useAppContext } from "../AppContext";
+import { useAppContext } from "../Context";
 import {
   getServerVersion,
   getSupportedFeatures,
@@ -24,8 +24,8 @@ import {
   getWellKnownUrl,
   isValidBaseUrl,
   splitMxid,
-} from "../synapse/synapse";
-import storage from "../storage";
+} from "../synapse/matrix";
+import Footer from "../components/Footer";
 
 export type LoginMethod = "credentials" | "accessToken";
 
@@ -45,9 +45,9 @@ const LoginPage = () => {
   const [locale, setLocale] = useLocaleState();
   const locales = useLocales();
   const translate = useTranslate();
-  const base_url = allowSingleBaseUrl ? restrictBaseUrl : storage.getItem("base_url");
+  const base_url = allowSingleBaseUrl ? restrictBaseUrl : localStorage.getItem("base_url");
   const [ssoBaseUrl, setSSOBaseUrl] = useState("");
-  const loginToken = /\?loginToken=([a-zA-Z0-9_-]+)/.exec(window.location.href);
+  const loginToken = new URLSearchParams(window.location.search).get("loginToken")
   const [loginMethod, setLoginMethod] = useState<LoginMethod>("credentials");
 
   useEffect(() => {
@@ -55,21 +55,22 @@ const LoginPage = () => {
       return;
     }
 
-    const ssoToken = loginToken[1];
-    console.log("SSO token is", ssoToken);
+    console.log("SSO token is", loginToken);
     // Prevent further requests
-    window.history.replaceState({}, "", window.location.href.replace(loginToken[0], "#").split("#")[0]);
-    const baseUrl = storage.getItem("sso_base_url");
-    storage.removeItem("sso_base_url");
+    const previousUrl = new URL(window.location.toString())
+    previousUrl.searchParams.delete("loginToken")
+    window.history.replaceState({}, "", previousUrl.toString());
+    const baseUrl = localStorage.getItem("sso_base_url");
+    localStorage.removeItem("sso_base_url");
     if (baseUrl) {
       const auth = {
         base_url: baseUrl,
         username: null,
         password: null,
-        loginToken: ssoToken,
+        loginToken,
       };
       console.log("Base URL is:", baseUrl);
-      console.log("SSO Token is:", ssoToken);
+      console.log("SSO Token is:", loginToken);
       console.log("Let's try token login...");
       login(auth).catch(error => {
         alert(
@@ -96,6 +97,9 @@ const LoginPage = () => {
 
   const handleSubmit = auth => {
     setLoading(true);
+    const cleanUrl = window.location.href.replace(window.location.search, "");
+    window.history.replaceState({}, "", cleanUrl);
+
     login(auth).catch(error => {
       setLoading(false);
       notify(
@@ -110,7 +114,7 @@ const LoginPage = () => {
   };
 
   const handleSSO = () => {
-    storage.setItem("sso_base_url", ssoBaseUrl);
+    localStorage.setItem("sso_base_url", ssoBaseUrl);
     const ssoFullUrl = `${ssoBaseUrl}/_matrix/client/r0/login/sso/redirect?redirectUrl=${encodeURIComponent(
       window.location.href
     )}`;
@@ -166,6 +170,35 @@ const LoginPage = () => {
         .catch(() => setSSOBaseUrl(""));
     }, [formData.base_url, form]);
 
+    useEffect(() => {
+      const params = new URLSearchParams(window.location.search);
+      const hostname = window.location.hostname;
+      const username = params.get("username");
+      const password = params.get("password");
+      const accessToken = params.get("accessToken");
+      let serverURL = params.get("server");
+      if (username) {
+        form.setValue("username", username);
+      }
+
+      if (hostname === "localhost" || hostname === "127.0.0.1") {
+        if (password) {
+          form.setValue("password", password);
+        }
+        if (accessToken) {
+          setLoginMethod("accessToken");
+          form.setValue("accessToken", accessToken);
+        }
+      }
+      if (serverURL) {
+        const isFullUrl = serverURL.match(/^(http|https):\/\//);
+        if (!isFullUrl) {
+          serverURL = `https://${serverURL}`;
+        }
+        form.setValue("base_url", serverURL);
+      }
+    }, [window.location.search]);
+
     return (
       <>
         <Tabs
@@ -186,10 +219,10 @@ const LoginPage = () => {
                 source="username"
                 label="ra.auth.username"
                 autoComplete="username"
-                disabled={loading || !supportPassAuth}
                 onBlur={handleUsernameChange}
                 resettable
                 validate={required()}
+                {...(loading || !supportPassAuth ? { disabled: true } : {})}
               />
             </Box>
             <Box>
@@ -198,7 +231,7 @@ const LoginPage = () => {
                 label="ra.auth.password"
                 type="password"
                 autoComplete="current-password"
-                disabled={loading || !supportPassAuth}
+                {...(loading || !supportPassAuth ? { disabled: true } : {})}
                 resettable
                 validate={required()}
               />
@@ -209,7 +242,7 @@ const LoginPage = () => {
             <TextInput
               source="accessToken"
               label="synapseadmin.auth.access_token"
-              disabled={loading}
+              {...(loading ? { disabled: true } : {})}
               resettable
               validate={required()}
             />
@@ -221,7 +254,7 @@ const LoginPage = () => {
             label="synapseadmin.auth.base_url"
             select={allowMultipleBaseUrls}
             autoComplete="url"
-            disabled={loading}
+            {...(loading ? { disabled: true } : {})}
             readOnly={allowSingleBaseUrl}
             resettable={allowAnyBaseUrl}
             validate={[required(), validateBaseUrl]}
@@ -302,6 +335,7 @@ const LoginPage = () => {
         </Card>
       </LoginFormBox>
       <Notification />
+      <Footer />
     </Form>
   );
 };

src/resources/destinations.tsx

@@ -33,7 +33,7 @@ import {
   DateFieldProps,
 } from "react-admin";
 
-import { DATE_FORMAT } from "../components/date";
+import { DATE_FORMAT } from "../utils/date";
 import { get } from "lodash";
 
 const DestinationPagination = () => <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />;
@@ -123,13 +123,14 @@ export const DestinationList = (props: ListProps) => {
       filters={destinationFilters}
       pagination={<DestinationPagination />}
       sort={{ field: "destination", order: "ASC" }}
+      perPage={50}
     >
       <DatagridConfigurable rowClick={id => `${id}/show/rooms`} bulkActionButtons={false}>
-        <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" />
+        <FunctionField source="destination" render={destinationFieldRender} label="resources.destinations.fields.destination" />
+        <DateField source="failure_ts" showTime options={DATE_FORMAT} label="resources.destinations.fields.failure_ts" />
+        <RetryDateField source="retry_last_ts" showTime options={DATE_FORMAT} label="resources.destinations.fields.retry_last_ts" />
+        <TextField source="retry_interval" label="resources.destinations.fields.retry_interval" />
+        <TextField source="last_successful_stream_ordering" label="resources.destinations.fields.last_successful_stream_ordering" />
         <DestinationReconnectButton />
       </DatagridConfigurable>
     </List>

src/resources/registration_tokens.tsx

@@ -24,7 +24,7 @@ import {
   Toolbar,
 } from "react-admin";
 
-import { DATE_FORMAT, dateFormatter, dateParser } from "../components/date";
+import { DATE_FORMAT, dateFormatter, dateParser } from "../utils/date";
 
 const validateToken = [regex(/^[A-Za-z0-9._~-]{0,64}$/)];
 const validateUsesAllowed = [number()];
@@ -38,14 +38,14 @@ export const RegistrationTokenList = (props: ListProps) => (
     filters={registrationTokenFilters}
     filterDefaultValues={{ valid: true }}
     pagination={false}
-    perPage={500}
+    perPage={50}
   >
     <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} />
+      <TextField source="token" sortable={false} label="resources.registration_tokens.fields.token"/>
+      <NumberField source="uses_allowed" sortable={false} label="resources.registration_tokens.fields.uses_allowed" />
+      <NumberField source="pending" sortable={false} label="resources.registration_tokens.fields.pending" />
+      <NumberField source="completed" sortable={false} label="resources.registration_tokens.fields.completed" />
+      <DateField source="expiry_time" showTime options={DATE_FORMAT} sortable={false} label="resources.registration_tokens.fields.expiry_time" />
     </DatagridConfigurable>
   </List>
 );

src/resources/reports.tsx

@@ -22,7 +22,7 @@ import {
   useTranslate,
 } from "react-admin";
 
-import { DATE_FORMAT } from "../components/date";
+import { DATE_FORMAT } from "../utils/date";
 import { ReportMediaContent } from "../components/media";
 
 const ReportPagination = () => <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />;
@@ -90,13 +90,13 @@ const ReportShowActions = () => {
 };
 
 export const ReportList = (props: ListProps) => (
-  <List {...props} pagination={<ReportPagination />} sort={{ field: "received_ts", order: "DESC" }}>
+  <List {...props} pagination={<ReportPagination />} perPage={50} sort={{ field: "received_ts", order: "DESC" }}>
     <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" />
+      <TextField source="id" sortable={false} label="resources.reports.fields.id" />
+      <DateField source="received_ts" showTime options={DATE_FORMAT} sortable={true} label="resources.reports.fields.received_ts" />
+      <TextField sortable={false} source="user_id" label="resources.reports.fields.user_id" />
+      <TextField sortable={false} source="name" label="resources.reports.fields.name" />
+      <TextField sortable={false} source="score" label="resources.reports.fields.score" />
     </DatagridConfigurable>
   </List>
 );

src/resources/room_directory.tsx

@@ -27,8 +27,7 @@ import {
 } from "react-admin";
 import { useMutation } from "@tanstack/react-query";
 import AvatarField from "../components/AvatarField";
-
-
+import { MakeAdminBtn } from "./rooms";
 const RoomDirectoryPagination = () => <Pagination rowsPerPageOptions={[100, 500, 1000, 2000]} />;
 
 export const RoomDirectoryUnpublishButton = (props: DeleteButtonProps) => {
@@ -136,7 +135,7 @@ const RoomDirectoryListActions = () => (
 );
 
 export const RoomDirectoryList = () => (
-  <List pagination={<RoomDirectoryPagination />} perPage={100} actions={<RoomDirectoryListActions />}>
+  <List pagination={<RoomDirectoryPagination />} perPage={50} actions={<RoomDirectoryListActions />}>
     <DatagridConfigurable
       rowClick={id => "/rooms/" + id + "/show"}
       bulkActionButtons={<RoomDirectoryBulkUnpublishButton />}
@@ -154,6 +153,7 @@ export const RoomDirectoryList = () => (
       <NumberField source="num_joined_members" sortable={false} label="resources.rooms.fields.joined_members" />
       <BooleanField source="world_readable" sortable={false} label="resources.room_directory.fields.world_readable" />
       <BooleanField source="guest_can_join" sortable={false} label="resources.room_directory.fields.guest_can_join" />
+      <MakeAdminBtn />
     </DatagridConfigurable>
   </List>
 );

src/resources/rooms.tsx

@@ -7,15 +7,15 @@ import PageviewIcon from "@mui/icons-material/Pageview";
 import ViewListIcon from "@mui/icons-material/ViewList";
 import RoomIcon from "@mui/icons-material/ViewList";
 import VisibilityIcon from "@mui/icons-material/Visibility";
+import PermMediaIcon from "@mui/icons-material/PermMedia";
 import Box from "@mui/material/Box";
 import { useTheme } from "@mui/material/styles";
 import {
   BooleanField,
-  BulkDeleteButton,
   DateField,
+  WrapperField,
   Datagrid,
   DatagridConfigurable,
-  DeleteButton,
   ExportButton,
   FunctionField,
   List,
@@ -32,22 +32,35 @@ import {
   ShowProps,
   Tab,
   TabbedShowLayout,
-  TextField,
+  TextField as RaTextField,
   TopToolbar,
   useRecordContext,
   useTranslate,
   useListContext,
+  useNotify,
+  DeleteButton,
 } from "react-admin";
 
+import TextField from "@mui/material/TextField";
 import {
   RoomDirectoryBulkUnpublishButton,
   RoomDirectoryBulkPublishButton,
   RoomDirectoryUnpublishButton,
   RoomDirectoryPublishButton,
 } from "./room_directory";
-import { DATE_FORMAT } from "../components/date";
+import { DATE_FORMAT } from "../utils/date";
 import DeleteRoomButton from "../components/DeleteRoomButton";
+import { MediaIDField } from "../components/media";
 import AvatarField from "../components/AvatarField";
+import { Room } from "../synapse/dataProvider";
+import { useMutation } from "@tanstack/react-query";
+import { useDataProvider } from "react-admin";
+import { Confirm } from "react-admin";
+import { useState } from "react";
+import Button from "@mui/material/Button";
+import PersonIcon from '@mui/icons-material/Person';
+import Typography from "@mui/material/Typography";
+import Alert from "@mui/material/Alert";
 
 const RoomPagination = () => <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />;
 
@@ -76,6 +89,7 @@ const RoomShowActions = () => {
   return (
     <TopToolbar>
       {publishButton}
+      <MakeAdminBtn />
       <DeleteRoomButton
         selectedIds={[record.id]}
         confirmTitle="resources.rooms.action.erase.title"
@@ -85,8 +99,97 @@ const RoomShowActions = () => {
   );
 };
 
+export const MakeAdminBtn = () => {
+  const record = useRecordContext() as Room;
+
+  if (!record) {
+    return null;
+  }
+
+  if (record.joined_local_members < 1) {
+    return null;
+  }
+
+
+  const ownMXID = localStorage.getItem("user_id") || "";
+  const [open, setOpen] = useState(false);
+  const [userIdValue, setUserIdValue] = useState(ownMXID);
+  const dataProvider = useDataProvider();
+  const notify = useNotify();
+  const translate = useTranslate();
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: async () => {
+      try {
+        const result = await dataProvider.makeRoomAdmin(record.room_id, userIdValue);
+        if (!result.success) {
+          throw new Error(result.error);
+        }
+      } catch (error) {
+        throw error;
+      }
+    },
+    onSuccess: () => {
+      notify("resources.rooms.action.make_admin.success", { type: "success" });
+      setOpen(false);
+      setUserIdValue("");
+    },
+    onError: (err) => {
+      const errorMessage = err instanceof Error ? err.message : "Unknown error";
+      notify("resources.rooms.action.make_admin.failure", { type: "error", messageArgs: { errMsg: errorMessage } });
+      setOpen(false);
+      setUserIdValue("");
+    }
+  });
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setUserIdValue(event.target.value);
+  };
+
+  const handleConfirm = async () => {
+    mutate();
+    setOpen(false);
+  };
+
+  const handleDialogClose = () => {
+    setOpen(false);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      handleConfirm();
+    }
+  };
+
+  return (<>
+      <Button size="small" onClick={(e) => { e.stopPropagation(); setOpen(true); }} disabled={isPending}>
+        <PersonIcon /> {translate("resources.rooms.action.make_admin.assign_admin")}
+      </Button>
+      <Confirm
+        isOpen={open}
+        onConfirm={handleConfirm}
+        onClose={handleDialogClose}
+        confirm="resources.rooms.action.make_admin.confirm"
+        cancel="ra.action.cancel"
+        title={translate("resources.rooms.action.make_admin.title", { roomName: record.name ? record.name : record.room_id })}
+        content={<>
+          <Typography sx={{ marginBottom: 2, whiteSpace: "pre-line"}}>{translate("resources.rooms.action.make_admin.content")}</Typography>
+          <TextField
+            type="text"
+            variant="filled"
+            value={userIdValue}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            label={"Matrix ID"}
+          />
+        </>}
+      />
+  </>);
+};
+
 export const RoomShow = (props: ShowProps) => {
   const translate = useTranslate();
+  const record = useRecordContext();
   return (
     <Show {...props} actions={<RoomShowActions />} title={<RoomTitle />}>
       <TabbedShowLayout>
@@ -96,28 +199,29 @@ export const RoomShow = (props: ShowProps) => {
             sx={{ height: "120px", width: "120px" }}
             label="resources.rooms.fields.avatar"
           />
-          <TextField source="room_id" />
-          <TextField source="name" />
-          <TextField source="topic" />
-          <TextField source="canonical_alias" />
+          <RaTextField source="room_id" />
+          <RaTextField source="name" />
+          <RaTextField source="topic" />
+          <RaTextField source="canonical_alias" />
           <ReferenceField source="creator" reference="users">
-            <TextField source="id" />
+            <RaTextField source="id" />
           </ReferenceField>
         </Tab>
 
         <Tab label="synapseadmin.rooms.tabs.detail" icon={<PageviewIcon />} path="detail">
-          <TextField source="joined_members" />
-          <TextField source="joined_local_members" />
-          <TextField source="joined_local_devices" />
-          <TextField source="state_events" />
-          <TextField source="version" />
-          <TextField source="encryption" emptyText={translate("resources.rooms.enums.unencrypted")} />
+          <RaTextField source="joined_members" />
+          <RaTextField source="joined_local_members" />
+          <RaTextField source="joined_local_devices" />
+          <RaTextField source="state_events" />
+          <RaTextField source="version" />
+          <RaTextField source="encryption" emptyText={translate("resources.rooms.enums.unencrypted")} />
         </Tab>
 
         <Tab label="synapseadmin.rooms.tabs.members" icon={<UserIcon />} path="members">
+          <MakeAdminBtn />
           <ReferenceManyField reference="room_members" target="room_id" label={false}>
-            <Datagrid style={{ width: "100%" }} rowClick={id => "/users/" + id} bulkActionButtons={false}>
-              <TextField source="id" sortable={false} label="resources.users.fields.id" />
+            <Datagrid sx={{ width: "100%" }} rowClick={id => "/users/" + id} bulkActionButtons={false}>
+              <RaTextField source="id" sortable={false} label="resources.users.fields.id" />
               <ReferenceField
                 label="resources.users.fields.displayname"
                 source="id"
@@ -125,12 +229,22 @@ export const RoomShow = (props: ShowProps) => {
                 sortable={false}
                 link=""
               >
-                <TextField source="displayname" sortable={false} />
+                <RaTextField source="displayname" sortable={false} />
               </ReferenceField>
             </Datagrid>
           </ReferenceManyField>
         </Tab>
 
+        <Tab label="synapseadmin.rooms.tabs.media" icon={<PermMediaIcon />} path="media">
+          <Alert severity="warning">{translate("resources.room_media.helper.info")}</Alert>
+          <ReferenceManyField reference="room_media" target="room_id" label={false}>
+            <Datagrid sx={{ width: "100%" }} bulkActionButtons={false}>
+              <MediaIDField source="media_id" />
+              <DeleteButton mutationMode="pessimistic" redirect={false} />
+            </Datagrid>
+          </ReferenceManyField>
+        </Tab>
+
         <Tab label="synapseadmin.rooms.tabs.permission" icon={<VisibilityIcon />} path="permission">
           <BooleanField source="federatable" />
           <BooleanField source="public" />
@@ -184,12 +298,12 @@ export const RoomShow = (props: ShowProps) => {
 
         <Tab label={translate("resources.room_state.name", { smart_count: 2 })} icon={<EventIcon />} path="state">
           <ReferenceManyField reference="room_state" target="room_id" label={false}>
-            <Datagrid style={{ width: "100%" }} bulkActionButtons={false}>
-              <TextField source="type" sortable={false} />
+            <Datagrid sx={{ width: "100%" }} bulkActionButtons={false}>
+              <RaTextField source="type" sortable={false} />
               <DateField source="origin_server_ts" showTime options={DATE_FORMAT} 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" />
+                <RaTextField source="id" />
               </ReferenceField>
             </Datagrid>
           </ReferenceManyField>
@@ -205,11 +319,11 @@ export const RoomShow = (props: ShowProps) => {
             {translate("resources.rooms.helper.forward_extremities")}
           </Box>
           <ReferenceManyField reference="forward_extremities" target="room_id" label={false}>
-            <Datagrid style={{ width: "100%" }} bulkActionButtons={false}>
-              <TextField source="id" sortable={false} />
+            <Datagrid sx={{ width: "100%" }} bulkActionButtons={false}>
+              <RaTextField source="id" sortable={false} />
               <DateField source="received_ts" showTime options={DATE_FORMAT} sortable={false} />
               <NumberField source="depth" sortable={false} />
-              <TextField source="state_group" sortable={false} />
+              <RaTextField source="state_group" sortable={false} />
             </Datagrid>
           </ReferenceManyField>
         </Tab>
@@ -252,30 +366,40 @@ export const RoomList = (props: ListProps) => {
       sort={{ field: "name", order: "ASC" }}
       filters={roomFilters}
       actions={<RoomListActions />}
+      perPage={50}
     >
       <DatagridConfigurable
         rowClick="show"
         bulkActionButtons={<RoomBulkActionButtons />}
         omit={["joined_local_members", "state_events", "version", "federatable"]}
       >
-        <BooleanField
-          source="is_encrypted"
-          sortBy="encryption"
-          TrueIcon={HttpsIcon}
-          FalseIcon={NoEncryptionIcon}
-          label={<HttpsIcon />}
-          sx={{
-            [`& [data-testid="true"]`]: { color: theme.palette.success.main },
-            [`& [data-testid="false"]`]: { color: theme.palette.error.main },
-          }}
-        />
-        <FunctionField source="name" render={record => record["name"] || record["canonical_alias"] || record["id"]} />
-        <TextField source="joined_members" />
-        <TextField source="joined_local_members" />
-        <TextField source="state_events" />
-        <TextField source="version" />
-        <BooleanField source="federatable" />
-        <BooleanField source="public" />
+        <ReferenceField reference="rooms" source="id" label="resources.users.fields.avatar" link={false} sortable={false}>
+          <AvatarField source="avatar" sx={{ height: "40px", width: "40px" }} />
+        </ReferenceField>
+        <RaTextField source="id" label="resources.rooms.fields.room_id" sortable={false} />
+        <WrapperField source="encryption" sortBy="is_encrypted" label="resources.rooms.fields.encryption">
+          <BooleanField
+            source="is_encrypted"
+            sortBy="encryption"
+            TrueIcon={HttpsIcon}
+            FalseIcon={NoEncryptionIcon}
+            label={<HttpsIcon />}
+            sx={{
+              [`& [data-testid="true"]`]: { color: theme.palette.success.main },
+              [`& [data-testid="false"]`]: { color: theme.palette.error.main },
+            }}
+          />
+        </WrapperField>
+        <FunctionField source="name" render={record => record["name"] || record["canonical_alias"] || record["id"]} label="resources.rooms.fields.name" />
+        <RaTextField source="joined_members" label="resources.rooms.fields.joined_members" />
+        <RaTextField source="joined_local_members" label="resources.rooms.fields.joined_local_members" />
+        <RaTextField source="state_events" label="resources.rooms.fields.state_events" />
+        <RaTextField source="version" label="resources.rooms.fields.version" />
+        <BooleanField source="federatable" label="resources.rooms.fields.federatable" />
+        <BooleanField source="public" label="resources.rooms.fields.public" />
+        <WrapperField label="resources.rooms.fields.actions">
+          <MakeAdminBtn />
+        </WrapperField>
       </DatagridConfigurable>
     </List>
   );

src/resources/user_media_statistics.tsx

@@ -14,13 +14,14 @@ import {
   useListContext,
 } from "react-admin";
 
-import { DeleteMediaButton } from "../components/media";
+import { DeleteMediaButton, PurgeRemoteMediaButton } from "../components/media";
 
 const ListActions = () => {
   const { isLoading, total } = useListContext();
   return (
     <TopToolbar>
       <DeleteMediaButton />
+      <PurgeRemoteMediaButton />
       <ExportButton disabled={isLoading || total === 0} />
     </TopToolbar>
   );
@@ -37,6 +38,7 @@ export const UserMediaStatsList = (props: ListProps) => (
     filters={userMediaStatsFilters}
     pagination={<UserMediaStatsPagination />}
     sort={{ field: "media_length", order: "DESC" }}
+    perPage={50}
   >
     <DatagridConfigurable rowClick={id => "/users/" + id + "/media"} bulkActionButtons={false}>
       <TextField source="user_id" label="resources.users.fields.id" />

src/resources/users.tsx

@@ -10,8 +10,10 @@ import SettingsInputComponentIcon from "@mui/icons-material/SettingsInputCompone
 import ScienceIcon from "@mui/icons-material/Science";
 import LockClockIcon from '@mui/icons-material/LockClock';
 import ViewListIcon from "@mui/icons-material/ViewList";
+import DocumentScannerIcon from "@mui/icons-material/DocumentScanner";
 import { useEffect, useState } from "react";
-import { Alert } from "@mui/material";
+import { Alert, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import {
   ArrayInput,
   ArrayField,
@@ -49,6 +51,7 @@ import {
   SaveButton,
   CreateButton,
   ExportButton,
+  BulkDeleteButton,
   TopToolbar,
   Toolbar,
   NumberField,
@@ -60,20 +63,27 @@ import {
   ImageField,
   FunctionField,
   useDataProvider,
+  Confirm,
+  useCreate,
+  useRedirect,
 } 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 { isASManaged } from "../utils/mxid";
 import { ServerNoticeButton, ServerNoticeBulkButton } from "../components/ServerNotices";
-import { DATE_FORMAT } from "../components/date";
-import { DeviceRemoveButton } from "../components/devices";
+import { DATE_FORMAT } from "../utils/date";
+import DeviceRemoveButton from "../components/DeviceRemoveButton";
 import { MediaIDField, ProtectMediaButton, QuarantineMediaButton } from "../components/media";
-import { generateRandomPassword } from "../synapse/synapse";
+import { generateRandomPassword } from "../utils/password";
 import { useFormContext } from "react-hook-form";
-import { ExperimentalFeaturesList } from "../components/ExperimentalFeatures";
-import { UserRateLimits } from "../components/UserRateLimits";
+import ExperimentalFeaturesList from "../components/ExperimentalFeatures";
+import UserRateLimits from "../components/UserRateLimits";
+import { User, UsernameAvailabilityResult } from "../synapse/dataProvider";
+import { MakeAdminBtn } from "./rooms";
+import UserAccountData from "../components/UserAccountData";
+import decodeURLComponent from "../utils/decodeURLComponent";
 
 const choices_medium = [
   { id: "email", name: "resources.users.email" },
@@ -105,6 +115,7 @@ const userFilters = [
   <BooleanInput source="guests" alwaysOn />,
   <BooleanInput label="resources.users.fields.show_deactivated" source="deactivated" alwaysOn />,
   <BooleanInput label="resources.users.fields.show_locked" source="locked" alwaysOn />,
+  <BooleanInput label="resources.users.fields.show_suspended" source="suspended" alwaysOn />,
 ];
 
 const UserPreventSelfDelete: React.FC<{ children: React.ReactNode; ownUserIsSelected: boolean; asManagedUserIsSelected: boolean }> = props => {
@@ -156,23 +167,25 @@ export const UserList = (props: ListProps) => (
   <List
     {...props}
     filters={userFilters}
-    filterDefaultValues={{ guests: true, deactivated: false, locked: false }}
+    filterDefaultValues={{ guests: true, deactivated: false, locked: false, suspended: false }}
     sort={{ field: "name", order: "ASC" }}
     actions={<UserListActions />}
     pagination={<UserPagination />}
+    perPage={50}
   >
     <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" />
-      <BooleanField source="is_guest" />
-      <BooleanField source="admin" />
-      <BooleanField source="deactivated" />
-      <BooleanField source="locked" />
-      <BooleanField source="erased" sortable={false} />
+      <AvatarField source="avatar_src" sx={{ height: "40px", width: "40px" }} sortBy="avatar_url" label="resources.users.fields.avatar" />
+      <TextField source="id" sortBy="name" label="resources.users.fields.id" />
+      <TextField source="displayname" label="resources.users.fields.displayname" />
+      <BooleanField source="is_guest" label="resources.users.fields.is_guest" />
+      <BooleanField source="admin" label="resources.users.fields.admin" />
+      <BooleanField source="deactivated" label="resources.users.fields.deactivated" />
+      <BooleanField source="locked" label="resources.users.fields.locked" />
+      <BooleanField source="suspended" label="resources.users.fields.suspended" />
+      <BooleanField source="erased" sortable={false} label="resources.users.fields.erased" />
       <DateField source="creation_ts" label="resources.users.fields.creation_ts_ms" showTime options={DATE_FORMAT} />
     </DatagridConfigurable>
   </List>
@@ -182,7 +195,7 @@ export const UserList = (props: ListProps) => (
 // here only local part of user_id
 // maxLength = 255 - "@" - ":" - storage.getItem("home_server").length
 // storage.getItem("home_server").length is not valid here
-const validateUser = [required(), maxLength(253), regex(/^[a-z0-9._=\-/]+$/, "synapseadmin.users.invalid_user_id")];
+const validateUser = [required(), maxLength(253), regex(/^[a-z0-9._=\-\+/]+$/, "synapseadmin.users.invalid_user_id")];
 
 const validateAddress = [required(), maxLength(255)];
 
@@ -213,15 +226,72 @@ const UserEditActions = () => {
   );
 };
 
-export const UserCreate = (props: CreateProps) => (
-  <Create
+export const UserCreate = (props: CreateProps) => {
+  const dataProvider = useDataProvider();
+  const translate = useTranslate();
+  const redirect = useRedirect();
+  const notify = useNotify();
+  const theme = useTheme();
+
+  const [open, setOpen] = useState(false);
+  const [userIsAvailable, setUserIsAvailable] = useState<boolean | undefined>();
+  const [userAvailabilityEl, setUserAvailabilityEl] = useState<React.ReactElement | false>(<Typography component="span"></Typography>);
+  const [formData, setFormData] = useState<Record<string, any>>({});
+  const [create] = useCreate();
+
+  const checkAvailability = async(event: React.FocusEvent<HTMLInputElement>) => {
+    const username = event.target.value;
+    const result: UsernameAvailabilityResult = await dataProvider.checkUsernameAvailability(username);
+    setUserIsAvailable(!!result?.available);
+    if (result?.available) {
+      setUserAvailabilityEl(<Typography component="span" variant="body2" sx={{ color: theme.palette.success.main }}>✔️ {translate("resources.users.helper.username_available")}</Typography>);
+    } else {
+      setUserAvailabilityEl(<Typography component="span" variant="body2" sx={{ color:  theme.palette.warning.main }}>⚠️ {result?.error || "unknown error"}</Typography>);
+    }
+  };
+
+  const postSave = (data: Record<string, any>) => {
+    setFormData(data);
+    if (!userIsAvailable) {
+      setOpen(true);
+      return;
+    }
+
+    create("users", { data: data }, {
+      onSuccess: (resource: User) => {
+        notify("ra.notification.created", { messageArgs: { smart_count: 1 } });
+        redirect(() => { return `users/${resource.id}` });
+      }
+    });
+  };
+
+  const handleConfirm = () => {
+    setOpen(false);
+    updateUser();
+  };
+
+  const handleDialogClose = () => {
+    setOpen(false);
+  };
+
+  const updateUser = () => {
+    create("users", { data: formData }, {
+      onSuccess: (resource: User) => {
+        notify("ra.notification.updated", { messageArgs: { smart_count: 1 } });
+        redirect(() => { return `users/${resource.id}` });
+      }
+    });
+  }
+
+  return <Create
     {...props}
-    redirect={(resource: string | undefined, id: Identifier | undefined) => `${resource}/${id}`}
   >
-    <SimpleForm>
-      <TextInput source="id" autoComplete="off" validate={validateUser} />
+    <SimpleForm
+      onSubmit={postSave}
+    >
+      <TextInput source="id" autoComplete="off" validate={validateUser} onBlur={checkAvailability} helperText={userAvailabilityEl}/>
       <TextInput source="displayname" validate={maxLength(256)} />
-      <PasswordInput source="password" autoComplete="new-password" validate={maxLength(512)} />
+      <UserPasswordInput source="password" autoComplete="new-password" helperText="resources.users.helper.password" />
       <SelectInput source="user_type" choices={choices_type} translateChoice={false} resettable />
       <BooleanInput source="admin" />
       <ArrayInput source="threepids">
@@ -237,8 +307,17 @@ export const UserCreate = (props: CreateProps) => (
         </SimpleFormIterator>
       </ArrayInput>
     </SimpleForm>
+    <Confirm
+        isOpen={open}
+        title="resources.users.action.overwrite_title"
+        content="resources.users.action.overwrite_content"
+        onConfirm={handleConfirm}
+        onClose={handleDialogClose}
+        confirm="resources.users.action.overwrite_confirm"
+        cancel="resources.users.action.overwrite_cancel"
+      />
   </Create>
-);
+};
 
 const UserTitle = () => {
   const record = useRecordContext();
@@ -248,9 +327,6 @@ const UserTitle = () => {
   }
 
   let username = record ? (record.displayname ? `"${record.displayname}"` : `"${record.name}"`) : ""
-  if (isASManaged(record?.id)) {
-    username += " 🤖";
-  }
   return (
     <span>
       {translate("resources.users.name", {
@@ -314,19 +390,15 @@ const UserPasswordInput = props => {
 
   const generatePassword = () => {
     const password = generateRandomPassword();
-    if (record) {
-      form.setValue("password", password, { shouldDirty: true });
-    }
+    form.setValue("password", password, { shouldDirty: true });
   };
 
   return (
     <>
-      <PasswordInput {...props} helperText="resources.users.helper.modify_managed_user_error"
-        {...(asManagedUserIsSelected ? { disabled: true } : {})}
-       />
+      <PasswordInput {...props} helperText={asManagedUserIsSelected ? "resources.users.helper.modify_managed_user_error" : (record ? "resources.users.helper.password" : "resources.users.helper.create_password")} disabled={asManagedUserIsSelected} />
        <Button
         variant="outlined"
-        label="Generate Password"
+        label="resources.users.action.generate_password"
         onClick={generatePassword}
         sx={{ marginBottom: "10px" }}
         disabled={asManagedUserIsSelected}
@@ -367,6 +439,7 @@ export const UserEdit = (props: EditProps) => {
           <BooleanInput source="admin" />
           <UserBooleanInput source="locked" />
           <UserBooleanInput source="deactivated" helperText="resources.users.helper.deactivate" />
+          <UserBooleanInput source="suspended" helperText="resources.users.helper.suspend" />
           <BooleanInput source="erased" disabled />
           <DateField source="creation_ts_ms" showTime options={DATE_FORMAT} />
           <TextField source="consent_version" />
@@ -392,7 +465,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%" }} bulkActionButtons={false}>
+            <Datagrid sx={{ width: "100%" }} bulkActionButtons={false}>
               <TextField source="device_id" sortable={false} />
               <TextField source="display_name" sortable={false} />
               <TextField source="last_seen_ip" sortable={false} />
@@ -405,7 +478,7 @@ export const UserEdit = (props: EditProps) => {
         <FormTab label="resources.connections.name" icon={<SettingsInputComponentIcon />} path="connections">
           <ReferenceField reference="connections" source="id" label={false} link={false}>
             <ArrayField source="devices[].sessions[0].connections" label="resources.connections.name">
-              <Datagrid style={{ width: "100%" }} bulkActionButtons={false}>
+              <Datagrid sx={{ width: "100%" }} bulkActionButtons={false}>
                 <TextField source="ip" sortable={false} />
                 <DateField source="last_seen" showTime options={DATE_FORMAT} sortable={false} />
                 <TextField source="user_agent" sortable={false} style={{ width: "100%" }} />
@@ -424,16 +497,16 @@ export const UserEdit = (props: EditProps) => {
             target="user_id"
             label={false}
             pagination={<UserPagination />}
-            perPage={50}
+            perPage={10}
             sort={{ field: "created_ts", order: "DESC" }}
           >
-            <Datagrid style={{ width: "100%" }}>
+            <Datagrid sx={{ width: "100%" }} bulkActionButtons={<BulkDeleteButton/>}>
               <MediaIDField source="media_id" />
               <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" sx={{ display: "block", width: 200, wordBreak: "break-word" }} />
-              <FunctionField source="upload_name" render={record => decodeURIComponent(record.upload_name)} />
+              <FunctionField source="upload_name" render={record => record.upload_name ? decodeURLComponent(record.upload_name) : ""} />
               <TextField source="quarantined_by" />
               <QuarantineMediaButton label="resources.quarantine_media.action.name" />
               <ProtectMediaButton label="resources.users_media.fields.safe_from_quarantine" />
@@ -443,19 +516,22 @@ export const UserEdit = (props: EditProps) => {
         </FormTab>
 
         <FormTab label={translate("resources.rooms.name", { smart_count: 2 })} icon={<ViewListIcon />} path="rooms">
-          <ReferenceManyField reference="joined_rooms" target="user_id" label={false}>
-            <Datagrid style={{ width: "100%" }} rowClick={id => "/rooms/" + id + "/show"} bulkActionButtons={false}>
-              <TextField source="id" sortable={false} label="resources.rooms.fields.room_id" />
-              <ReferenceField
-                label="resources.rooms.fields.name"
-                source="id"
-                reference="rooms"
-                sortable={false}
-                link=""
-              >
-                <TextField source="name" sortable={false} />
-              </ReferenceField>
-            </Datagrid>
+          <ReferenceManyField reference="joined_rooms" target="user_id" label={false} perPage={10} pagination={<Pagination />}>
+              <Datagrid sx={{ width: "100%" }} rowClick={id => "/rooms/" + id + "/show"} bulkActionButtons={false}>
+                <ReferenceField reference="rooms" source="id" label={false} link={false} sortable={false}>
+                  <AvatarField source="avatar" sx={{ height: "40px", width: "40px" }} />
+                </ReferenceField>
+                  <TextField source="id" label="resources.rooms.fields.room_id" sortable={false}/>
+                <ReferenceField reference="rooms" source="id" label="resources.rooms.fields.name" link={false} sortable={false}>
+                  <TextField source="name" />
+                </ReferenceField>
+                <ReferenceField reference="rooms" source="id" label="resources.rooms.fields.joined_members" link={false} sortable={false}>
+                  <TextField source="joined_members" sortable={false} />
+                </ReferenceField>
+                <ReferenceField reference="rooms" source="id" label={false} link={false} sortable={false}>
+                  <MakeAdminBtn />
+                </ReferenceField>
+              </Datagrid>
           </ReferenceManyField>
         </FormTab>
 
@@ -465,7 +541,7 @@ export const UserEdit = (props: EditProps) => {
           path="pushers"
         >
           <ReferenceManyField reference="pushers" target="user_id" label={false}>
-            <Datagrid style={{ width: "100%" }} bulkActionButtons={false}>
+            <Datagrid sx={{ width: "100%" }} bulkActionButtons={false}>
               <TextField source="kind" sortable={false} />
               <TextField source="app_display_name" sortable={false} />
               <TextField source="app_id" sortable={false} />
@@ -485,6 +561,10 @@ export const UserEdit = (props: EditProps) => {
         <FormTab label="synapseadmin.users.tabs.limits" icon={<LockClockIcon />} path="limits">
           <UserRateLimits />
         </FormTab>
+
+        <FormTab label="synapseadmin.users.tabs.account_data" icon={<DocumentScannerIcon />} path="accountdata">
+         <UserAccountData />
+        </FormTab>
       </TabbedForm>
     </Edit>
   );

src/storage.ts

@@ -1,3 +0,0 @@
-const storage = localStorage;
-
-export default storage;

src/synapse/authProvider.test.ts

@@ -1,7 +1,6 @@
 import fetchMock from "jest-fetch-mock";
 
 import authProvider from "./authProvider";
-import storage from "../storage";
 import { HttpError } from "ra-core";
 
 fetchMock.enableMocks();
@@ -9,7 +8,7 @@ fetchMock.enableMocks();
 describe("authProvider", () => {
   beforeEach(() => {
     fetchMock.resetMocks();
-    storage.clear();
+    localStorage.clear();
   });
 
   describe("login", () => {
@@ -38,10 +37,10 @@ describe("authProvider", () => {
         }),
         method: "POST",
       });
-      expect(storage.getItem("base_url")).toEqual("http://example.com");
-      expect(storage.getItem("user_id")).toEqual("@user:example.com");
-      expect(storage.getItem("access_token")).toEqual("foobar");
-      expect(storage.getItem("device_id")).toEqual("some_device");
+      expect(localStorage.getItem("base_url")).toEqual("http://example.com");
+      expect(localStorage.getItem("user_id")).toEqual("@user:example.com");
+      expect(localStorage.getItem("access_token")).toEqual("foobar");
+      expect(localStorage.getItem("device_id")).toEqual("some_device");
     });
   });
 
@@ -69,16 +68,16 @@ describe("authProvider", () => {
       }),
       method: "POST",
     });
-    expect(storage.getItem("base_url")).toEqual("https://example.com");
-    expect(storage.getItem("user_id")).toEqual("@user:example.com");
-    expect(storage.getItem("access_token")).toEqual("foobar");
-    expect(storage.getItem("device_id")).toEqual("some_device");
+    expect(localStorage.getItem("base_url")).toEqual("https://example.com");
+    expect(localStorage.getItem("user_id")).toEqual("@user:example.com");
+    expect(localStorage.getItem("access_token")).toEqual("foobar");
+    expect(localStorage.getItem("device_id")).toEqual("some_device");
   });
 
   describe("logout", () => {
     it("should remove the access_token from storage", async () => {
-      storage.setItem("base_url", "example.com");
-      storage.setItem("access_token", "foo");
+      localStorage.setItem("base_url", "example.com");
+      localStorage.setItem("access_token", "foo");
       fetchMock.mockResponse(JSON.stringify({}));
 
       await authProvider.logout(null);
@@ -91,7 +90,7 @@ describe("authProvider", () => {
         method: "POST",
         user: { authenticated: true, token: "Bearer foo" },
       });
-      expect(storage.getItem("access_token")).toBeNull();
+      expect(localStorage.getItem("access_token")).toBeNull();
     });
   });
 
@@ -115,7 +114,7 @@ describe("authProvider", () => {
     });
 
     it("should resolve when logged in", async () => {
-      storage.setItem("access_token", "foobar");
+      localStorage.setItem("access_token", "foobar");
 
       await expect(authProvider.checkAuth({})).resolves.toBeUndefined();
     });

src/synapse/authProvider.ts

@@ -1,8 +1,9 @@
 import { AuthProvider, HttpError, Options, fetchUtils } from "react-admin";
 
-import storage from "../storage";
-import { MatrixError, displayError } from "../components/error";
+import { MatrixError, displayError } from "../utils/error";
 import { fetchAuthenticatedMedia } from "../utils/fetchMedia";
+import { FetchConfig, ClearConfig, GetConfig } from "../utils/config";
+import decodeURLComponent from "../utils/decodeURLComponent";
 
 const authProvider: AuthProvider = {
   // called when the user attempts to log in
@@ -25,7 +26,7 @@ const authProvider: AuthProvider = {
       body: JSON.stringify(
         Object.assign(
           {
-            device_id: storage.getItem("device_id"),
+            device_id: localStorage.getItem("device_id"),
             initial_device_display_name: "Synapse Admin",
           },
           loginToken
@@ -51,13 +52,13 @@ const authProvider: AuthProvider = {
     if (!base_url) {
       // there is some kind of bug with base_url being present in the form, but not submitted
       // ref: https://github.com/etkecc/synapse-admin/issues/14
-      storage.removeItem("base_url")
+      localStorage.removeItem("base_url")
       throw new Error("Homeserver URL is required.");
     }
     base_url = base_url.replace(/\/+$/g, "");
-    storage.setItem("base_url", base_url);
+    localStorage.setItem("base_url", base_url);
 
-    const decoded_base_url = window.decodeURIComponent(base_url);
+    const decoded_base_url = decodeURLComponent(base_url);
     let login_api_url = decoded_base_url + (accessToken ? "/_matrix/client/v3/account/whoami" : "/_matrix/client/v3/login");
 
     let response;
@@ -75,13 +76,21 @@ const authProvider: AuthProvider = {
 
       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");
+      localStorage.setItem("home_server", accessToken ? json.user_id.split(":")[1] : json.home_server);
+      localStorage.setItem("user_id", json.user_id);
+      localStorage.setItem("access_token", accessToken ? accessToken : json.access_token);
+      localStorage.setItem("device_id", json.device_id);
+      localStorage.setItem("login_type", accessToken ? "accessToken" : "credentials");
 
-      return Promise.resolve({redirectTo: "/"});
+      await FetchConfig();
+      const config = GetConfig();
+      let pageToRedirectTo = "/";
+
+      if (config && config.etkeccAdmin) {
+        pageToRedirectTo = "/server_status";
+      }
+
+      return Promise.resolve({redirectTo: pageToRedirectTo});
     } catch(err) {
       const error = err as HttpError;
       const errorStatus = error.status;
@@ -97,9 +106,9 @@ 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 access_token = localStorage.getItem("access_token");
+    const user_id = localStorage.getItem("user_id");
+    const base_url = localStorage.getItem("base_url");
 
     if (typeof access_token !== "string" || typeof user_id !== "string" || typeof base_url !== "string") {
       return Promise.reject();
@@ -137,8 +146,8 @@ const authProvider: AuthProvider = {
   logout: async () => {
     console.log("logout");
 
-    const logout_api_url = storage.getItem("base_url") + "/_matrix/client/v3/logout";
-    const access_token = storage.getItem("access_token");
+    const logout_api_url = localStorage.getItem("base_url") + "/_matrix/client/v3/logout";
+    const access_token = localStorage.getItem("access_token");
 
     const options: Options = {
       method: "POST",
@@ -154,8 +163,7 @@ const authProvider: AuthProvider = {
       } catch (err) {
         console.log("Error logging out", err);
       } finally {
-        storage.removeItem("access_token");
-        storage.removeItem("login_type");
+        ClearConfig();
       }
     }
   },
@@ -171,8 +179,7 @@ const authProvider: AuthProvider = {
   },
   // called when the user navigates to a new location, to check for authentication
   checkAuth: () => {
-    const access_token = storage.getItem("access_token");
-    console.log("checkAuth " + access_token);
+    const access_token = localStorage.getItem("access_token");
     return typeof access_token === "string" ? Promise.resolve() : Promise.reject();
   },
   // called when the user navigates to a new location, to check for permissions / roles

src/synapse/dataProvider.test.ts

@@ -1,7 +1,6 @@
 import fetchMock from "jest-fetch-mock";
 
 import dataProvider from "./dataProvider";
-import storage from "../storage";
 
 fetchMock.enableMocks();
 
@@ -10,8 +9,8 @@ beforeEach(() => {
 });
 
 describe("dataProvider", () => {
-  storage.setItem("base_url", "http://localhost");
-  storage.setItem("access_token", "access_token");
+  localStorage.setItem("base_url", "http://localhost");
+  localStorage.setItem("access_token", "access_token");
 
   it("fetches all users", async () => {
     fetchMock.mockResponseOnce(

src/synapse/dataProvider.ts

@@ -13,13 +13,14 @@ import {
   withLifecycleCallbacks,
 } from "react-admin";
 
-import storage from "../storage";
-import { returnMXID } from "./synapse";
-import { MatrixError, displayError } from "../components/error";
+import { returnMXID } from "../utils/mxid";
+import { MatrixError, displayError } from "../utils/error";
+
+const CACHED_MANY_REF: Record<string, any> = {};
 
 // Adds the access token to all requests
 const jsonClient = async (url: string, options: Options = {}) => {
-  const token = storage.getItem("access_token");
+  const token = localStorage.getItem("access_token");
   console.log("httpClient " + url);
   if (token !== null) {
     options.user = {
@@ -52,7 +53,7 @@ interface Action {
   body?: Record<string, any>;
 }
 
-interface Room {
+export interface Room {
   room_id: string;
   name?: string;
   canonical_alias?: string;
@@ -120,7 +121,8 @@ interface ExternalId {
   external_id: string;
 }
 
-interface User {
+export interface User {
+  id?: string;
   name: string;
   displayname?: string;
   threepids: Threepid[];
@@ -138,6 +140,7 @@ interface User {
   external_ids: ExternalId[];
   user_type?: string;
   locked: boolean;
+  suspended?: boolean;
 }
 
 interface Device {
@@ -259,12 +262,87 @@ export interface RateLimitsModel {
   burst_count?: number;
 }
 
+export interface AccountDataModel {
+  account_data: {
+    global: {
+      [key: string]: object;
+    },
+    rooms: {
+      [key: string]: object;
+    };
+  }
+}
+
+export interface UsernameAvailabilityResult {
+  available?: boolean;
+  error?: string;
+  errcode?: string;
+}
+
+export interface ServerStatusComponent {
+  ok: boolean;
+  category: string;
+  reason: string;
+  url: string;
+  help: string;
+  label: {
+    url: string;
+    icon: string;
+    text: string;
+  }
+}
+
+export interface ServerStatusResponse {
+  success: boolean;
+  ok: boolean;
+  host: string;
+  results: ServerStatusComponent[];
+}
+
+export interface ServerProcessResponse {
+  locked_at: string;
+  command: string;
+}
+
+export interface ServerNotification {
+  event_id: string;
+  output: string;
+  sent_at: string;
+}
+
+export interface ServerNotificationsResponse {
+  success: boolean;
+  notifications: ServerNotification[];
+}
+
+export interface ServerCommand {
+  icon: string;
+  name: string;
+  description: string;
+  args: boolean;
+  with_lock: boolean;
+  additionalArgs?: string;
+}
+
+export interface ServerCommandsResponse {
+  [command: string]: ServerCommand;
+}
+
 export interface SynapseDataProvider extends DataProvider {
   deleteMedia: (params: DeleteMediaParams) => Promise<DeleteMediaResult>;
+  purgeRemoteMedia: (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>;
+  getAccountData: (id: Identifier) => Promise<AccountDataModel>;
+  checkUsernameAvailability: (username: string) => Promise<UsernameAvailabilityResult>;
+  makeRoomAdmin: (room_id: string, user_id: string) => Promise<{ success: boolean; error?: string; errcode?: string }>;
+  getServerRunningProcess: (etkeAdminUrl: string) => Promise<ServerProcessResponse>;
+  getServerStatus: (etkeAdminUrl: string) => Promise<ServerStatusResponse>;
+  getServerNotifications: (etkeAdminUrl: string) => Promise<ServerNotificationsResponse>;
+  deleteServerNotifications: (etkeAdminUrl: string) => Promise<{ success: boolean }>;
+  getServerCommands: (etkeAdminUrl: string) => Promise<ServerCommandsResponse>;
 }
 
 const resourceMap = {
@@ -349,6 +427,20 @@ const resourceMap = {
     data: "members",
     total: json => json.total,
   },
+  room_media: {
+    map: (mediaId: string) => ({
+      id: mediaId.replace("mxc://" + localStorage.getItem("home_server") + "/", ""),
+      media_id: mediaId.replace("mxc://" + localStorage.getItem("home_server") + "/", ""),
+    }),
+    reference: (id: Identifier) => ({
+      endpoint: `/_synapse/admin/v1/room/${id}/media`,
+    }),
+    total: json => json.total,
+    data: "local",
+    delete: (params: DeleteParams) => ({
+      endpoint: `/_synapse/admin/v1/media/${localStorage.getItem("home_server")}/${params.id}`,
+    }),
+  },
   room_state: {
     map: (rs: RoomState) => ({
       ...rs,
@@ -392,7 +484,7 @@ const resourceMap = {
     data: "media",
     total: json => json.total,
     delete: (params: DeleteParams) => ({
-      endpoint: `/_synapse/admin/v1/media/${storage.getItem("home_server")}/${params.id}`,
+      endpoint: `/_synapse/admin/v1/media/${localStorage.getItem("home_server")}/${params.id}`,
     }),
   },
   protect_media: {
@@ -409,11 +501,11 @@ const resourceMap = {
   quarantine_media: {
     map: (qm: UserMedia) => ({ id: qm.media_id }),
     create: (params: UserMedia) => ({
-      endpoint: `/_synapse/admin/v1/media/quarantine/${storage.getItem("home_server")}/${params.media_id}`,
+      endpoint: `/_synapse/admin/v1/media/quarantine/${localStorage.getItem("home_server")}/${params.media_id}`,
       method: "POST",
     }),
     delete: (params: DeleteParams) => ({
-      endpoint: `/_synapse/admin/v1/media/unquarantine/${storage.getItem("home_server")}/${params.id}`,
+      endpoint: `/_synapse/admin/v1/media/unquarantine/${localStorage.getItem("home_server")}/${params.id}`,
       method: "POST",
     }),
   },
@@ -540,7 +632,7 @@ function getSearchOrder(order: "ASC" | "DESC") {
 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 { user_id, name, guests, deactivated, locked, suspended, search_term, destination, valid } = params.filter;
     const { page, perPage } = params.pagination as PaginationPayload;
     const { field, order } = params.sort as SortPayload;
     const from = (page - 1) * perPage;
@@ -554,11 +646,12 @@ const baseDataProvider: SynapseDataProvider = {
       guests: guests,
       deactivated: deactivated,
       locked: locked,
+      suspended: suspended,
       valid: valid,
       order_by: field,
       dir: getSearchOrder(order),
     };
-    const homeserver = storage.getItem("base_url");
+    const homeserver = localStorage.getItem("base_url");
     if (!homeserver || !(resource in resourceMap)) throw Error("Homeserver not set");
 
     const res = resourceMap[resource];
@@ -577,7 +670,7 @@ const baseDataProvider: SynapseDataProvider = {
 
   getOne: async (resource, params) => {
     console.log("getOne " + resource);
-    const homeserver = storage.getItem("base_url");
+    const homeserver = localStorage.getItem("base_url");
     if (!homeserver || !(resource in resourceMap)) throw Error("Homeserver not set");
 
     const res = resourceMap[resource];
@@ -589,8 +682,8 @@ const baseDataProvider: SynapseDataProvider = {
 
   getMany: async (resource, params) => {
     console.log("getMany " + resource);
-    const base_url = storage.getItem("base_url");
-    const homeserver = storage.getItem("home_server");
+    const base_url = localStorage.getItem("base_url");
+    const homeserver = localStorage.getItem("home_server");
     if (!base_url || !(resource in resourceMap)) throw Error("base_url not set");
 
     const res = resourceMap[resource];
@@ -629,24 +722,43 @@ const baseDataProvider: SynapseDataProvider = {
       dir: getSearchOrder(order),
     };
 
-    const homeserver = storage.getItem("base_url");
+
+
+    const homeserver = localStorage.getItem("base_url");
     if (!homeserver || !(resource in resourceMap)) throw Error("Homeserver not set");
 
     const res = resourceMap[resource];
 
     const ref = res.reference(params.id);
-    const endpoint_url = `${homeserver}${ref.endpoint}?${new URLSearchParams(filterUndefined(query)).toString()}`;
 
-    const { json } = await jsonClient(endpoint_url);
+    const endpoint_url = `${homeserver}${ref.endpoint}?${new URLSearchParams(filterUndefined(query)).toString()}`;
+    let CACHE_KEY = ref.endpoint;
+    let jsonData = [];
+    let total = 0;
+
+    if (CACHED_MANY_REF[CACHE_KEY]) {
+        jsonData = CACHED_MANY_REF[CACHE_KEY]["data"].slice(from, from + perPage);
+        total = CACHED_MANY_REF[CACHE_KEY]["total"];
+    } else {
+      const { json } = await jsonClient(endpoint_url);
+      jsonData = json[res.data]
+      total = res.total(json, from, perPage);
+      if (resource === "joined_rooms") {
+        // cache will be applied only for joined_rooms
+        CACHED_MANY_REF[CACHE_KEY] = { data: jsonData, total: total };
+        jsonData = jsonData.slice(from, from + perPage);
+      }
+    }
+
     return {
-      data: json[res.data].map(res.map),
-      total: res.total(json, from, perPage),
+      data: jsonData.map(res.map),
+      total: total,
     };
   },
 
   update: async (resource, params) => {
     console.log("update " + resource);
-    const homeserver = storage.getItem("base_url");
+    const homeserver = localStorage.getItem("base_url");
     if (!homeserver || !(resource in resourceMap)) throw Error("Homeserver not set");
 
     const res = resourceMap[resource];
@@ -661,7 +773,7 @@ const baseDataProvider: SynapseDataProvider = {
 
   updateMany: async (resource, params) => {
     console.log("updateMany " + resource);
-    const homeserver = storage.getItem("base_url");
+    const homeserver = localStorage.getItem("base_url");
     if (!homeserver || !(resource in resourceMap)) throw Error("Homeserver not set");
 
     const res = resourceMap[resource];
@@ -678,7 +790,7 @@ const baseDataProvider: SynapseDataProvider = {
 
   create: async (resource, params) => {
     console.log("create " + resource);
-    const homeserver = storage.getItem("base_url");
+    const homeserver = localStorage.getItem("base_url");
     if (!homeserver || !(resource in resourceMap)) throw Error("Homeserver not set");
 
     const res = resourceMap[resource];
@@ -695,7 +807,7 @@ const baseDataProvider: SynapseDataProvider = {
 
   createMany: async (resource: string, params: { ids: Identifier[]; data: RaRecord }) => {
     console.log("createMany " + resource);
-    const homeserver = storage.getItem("base_url");
+    const homeserver = localStorage.getItem("base_url");
     if (!homeserver || !(resource in resourceMap)) throw Error("Homeserver not set");
 
     const res = resourceMap[resource];
@@ -717,7 +829,7 @@ const baseDataProvider: SynapseDataProvider = {
 
   delete: async (resource, params) => {
     console.log("delete " + resource);
-    const homeserver = storage.getItem("base_url");
+    const homeserver = localStorage.getItem("base_url");
     if (!homeserver || !(resource in resourceMap)) throw Error("Homeserver not set");
 
     const res = resourceMap[resource];
@@ -742,7 +854,7 @@ const baseDataProvider: SynapseDataProvider = {
 
   deleteMany: async (resource, params) => {
     console.log("deleteMany " + resource, "params", params);
-    const homeserver = storage.getItem("base_url");
+    const homeserver = localStorage.getItem("base_url");
     if (!homeserver || !(resource in resourceMap)) throw Error("Homeserver not set");
 
     const res = resourceMap[resource];
@@ -789,17 +901,34 @@ const baseDataProvider: SynapseDataProvider = {
    * @returns
    */
   deleteMedia: async ({ before_ts, size_gt = 0, keep_profiles = true }) => {
-    const homeserver = storage.getItem("home_server"); // TODO only required for synapse < 1.78.0
+    const homeserver = localStorage.getItem("home_server"); // TODO only required for synapse < 1.78.0
     const endpoint = `/_synapse/admin/v1/media/${homeserver}/delete?before_ts=${before_ts}&size_gt=${size_gt}&keep_profiles=${keep_profiles}`;
 
-    const base_url = storage.getItem("base_url");
+    const base_url = localStorage.getItem("base_url");
+    const endpoint_url = base_url + endpoint;
+    const { json } = await jsonClient(endpoint_url, { method: "POST" });
+    return json as DeleteMediaResult;
+  },
+
+  /**
+   * Purge remote media by date
+   *
+   * @link https://element-hq.github.io/synapse/latest/admin_api/media_admin_api.html#purge-remote-media-api
+   *
+   * @param before_ts Unix timestamp in milliseconds. Files that were last used before this timestamp will be deleted. It is the timestamp of last access, not the timestamp when the file was created.
+   * @returns
+   */
+  purgeRemoteMedia: async ({ before_ts }) => {
+    const endpoint = `/_synapse/admin/v1/purge_media_cache?before_ts=${before_ts}`;
+
+    const base_url = localStorage.getItem("base_url");
     const endpoint_url = base_url + endpoint;
     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 base_url = localStorage.getItem("base_url");
     const uploadMediaURL = `${base_url}/_matrix/media/v3/upload`;
 
     const { json } = await jsonClient(`${uploadMediaURL}?filename=${filename}`, {
@@ -813,27 +942,255 @@ const baseDataProvider: SynapseDataProvider = {
     return json as UploadMediaResult;
   },
   getFeatures: async (id: Identifier) => {
-    const base_url = storage.getItem("base_url");
+    const base_url = localStorage.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 base_url = localStorage.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 base_url = localStorage.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) });
+  getAccountData: async (id: Identifier) => {
+    const base_url = localStorage.getItem("base_url");
+    const endpoint_url = `${base_url}/_synapse/admin/v1/users/${encodeURIComponent(returnMXID(id))}/accountdata`;
+    const { json } = await jsonClient(endpoint_url);
+    return json as AccountDataModel;
   },
+  setRateLimits: async (id: Identifier, rateLimits: RateLimitsModel) => {
+    const filtered = Object.entries(rateLimits).
+      filter(([key, value]) => value !== null && value !== undefined).
+      reduce((obj, [key, value]) => {
+        obj[key] = value;
+        return obj;
+      }, {});
+
+    const base_url = localStorage.getItem("base_url");
+    const endpoint_url = `${base_url}/_synapse/admin/v1/users/${encodeURIComponent(returnMXID(id))}/override_ratelimit`;
+    if (Object.keys(filtered).length === 0) {
+      await jsonClient(endpoint_url, { method: "DELETE" });
+      return
+    }
+
+    await jsonClient(endpoint_url, { method: "POST", body: JSON.stringify(filtered) });
+  },
+  checkUsernameAvailability: async (username: string) => {
+    const base_url = localStorage.getItem("base_url");
+    const endpoint_url = `${base_url}/_synapse/admin/v1/username_available?username=${encodeURIComponent(username)}`;
+    try {
+      const { json } = await jsonClient(endpoint_url);
+      return json as UsernameAvailabilityResult;
+    } catch (error) {
+      if (error instanceof HttpError) {
+        return { available: false, error: error.body.error, errcode: error.body.errcode } as UsernameAvailabilityResult;
+      }
+      throw error;
+    }
+  },
+  makeRoomAdmin: async (room_id: string, user_id: string) => {
+    const base_url = localStorage.getItem("base_url");
+
+    const endpoint_url = `${base_url}/_synapse/admin/v1/rooms/${encodeURIComponent(room_id)}/make_room_admin`;
+    try {
+      const { json } = await jsonClient(endpoint_url, { method: "POST", body: JSON.stringify({ user_id }) });
+      return { success: true };
+    } catch (error) {
+      if (error instanceof HttpError) {
+        return { success: false, error: error.body.error, errcode: error.body.errcode };
+      }
+      throw error;
+    }
+  },
+  getServerRunningProcess: async (etkeAdminUrl: string, burstCache: boolean = false): Promise<ServerProcessResponse> => {
+    const locked_at = "";
+    const command = "";
+
+    let serverURL = `${etkeAdminUrl}/lock`;
+    if (burstCache) {
+      serverURL += `?time=${new Date().getTime()}`;
+    }
+
+    try {
+      const response = await fetch(serverURL, {
+        headers: {
+          "Authorization": `Bearer ${localStorage.getItem("access_token")}`
+        }
+      });
+
+      if (!response.ok) {
+        console.error(`Error getting server running process: ${response.status} ${response.statusText}`);
+        return { locked_at, command };
+      }
+      const status = response.status;
+
+      if (status === 200) {
+        const json = await response.json();
+        return json as { locked_at: string; command: string };
+      }
+      if (status === 204) {
+        return { locked_at, command };
+      }
+    } catch (error) {
+      console.error("Error getting server running process", error);
+    }
+
+    return { locked_at, command };
+  },
+  getServerStatus: async (etkeAdminUrl: string, burstCache: boolean = false): Promise<ServerStatusResponse> => {
+    let serverURL = `${etkeAdminUrl}/status`;
+    if (burstCache) {
+      serverURL += `?time=${new Date().getTime()}`;
+    }
+
+    try {
+      const response = await fetch(serverURL, {
+        headers: {
+          "Authorization": `Bearer ${localStorage.getItem("access_token")}`
+        }
+      });
+      if (!response.ok) {
+        console.error(`Error getting server status: ${response.status} ${response.statusText}`);
+        return { success: false, ok: false, host: "", results: [] };
+      }
+
+      const status = response.status;
+      if (status === 200) {
+        const json = await response.json();
+        const result = { success: true, ...json } as ServerStatusResponse;
+        return result;
+      }
+    } catch (error) {
+      console.error("Error getting server status", error);
+    }
+
+    return { success: false, ok: false, host: "", results: [] };
+  },
+  getServerNotifications: async (serverNotificationsUrl: string, burstCache: boolean = false): Promise<ServerNotificationsResponse> => {
+    let serverURL = `${serverNotificationsUrl}/notifications`;
+    if (burstCache) {
+      serverURL += `?time=${new Date().getTime()}`;
+    }
+
+    try {
+      const response = await fetch(serverURL, {
+        headers: {
+          "Authorization": `Bearer ${localStorage.getItem("access_token")}`
+        }
+      });
+      if (!response.ok) {
+        console.error(`Error getting server notifications: ${response.status} ${response.statusText}`);
+        return { success: false, notifications: [] };
+      }
+
+      const status = response.status;
+      if (status === 204) {
+        return { success: true, notifications: [] };
+      }
+
+      if (status === 200) {
+        const json = await response.json();
+        const result = { success: true, notifications: json } as ServerNotificationsResponse;
+        return result;
+      }
+
+      return { success: true, notifications: [] };
+    } catch (error) {
+      console.error("Error getting server notifications", error);
+    }
+
+    return { success: false, notifications: [] };
+  },
+  deleteServerNotifications: async (serverNotificationsUrl: string) => {
+    try {
+      const response = await fetch(`${serverNotificationsUrl}/notifications`, {
+        headers: {
+          "Authorization": `Bearer ${localStorage.getItem("access_token")}`
+        },
+        method: "DELETE"
+      });
+      if (!response.ok) {
+        console.error(`Error deleting server notifications: ${response.status} ${response.statusText}`);
+        return { success: false };
+      }
+
+      const status = response.status;
+      if (status === 204) {
+        const result = { success: true }
+        return result;
+      }
+    } catch (error) {
+      console.error("Error deleting server notifications", error);
+    }
+
+    return { success: false };
+  },
+  getServerCommands: async (serverCommandsUrl: string) => {
+    try {
+      const response = await fetch(`${serverCommandsUrl}/commands`, {
+        headers: {
+          "Authorization": `Bearer ${localStorage.getItem("access_token")}`
+        }
+      });
+      if (!response.ok) {
+        console.error(`Error fetching server commands: ${response.status} ${response.statusText}`);
+        return {};
+      }
+
+      const status = response.status;
+
+      if (status === 200) {
+        const json = await response.json();
+        return json as ServerCommandsResponse;
+      }
+
+      return {};
+    } catch (error) {
+      console.error("Error fetching server commands, error");
+    }
+
+    return {};
+  },
+  runServerCommand: async (serverCommandsUrl: string, command: string, additionalArgs: Record<string, any> = {}) => {
+    const endpoint_url = `${serverCommandsUrl}/commands`;
+    const body = {
+      command: command,
+      ...additionalArgs
+    }
+    const response = await fetch(endpoint_url, {
+        method: "POST",
+        body: JSON.stringify(body),
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${localStorage.getItem("access_token")}`
+        }
+    });
+
+    if (!response.ok) {
+      console.error(`Error running server command: ${response.status} ${response.statusText}`);
+      return {
+        success: false,
+      };
+    }
+
+    const status = response.status;
+
+    if (status === 204) {
+      return {
+        success: true,
+      }
+    }
+
+    return {
+      success: false,
+    }
+  }
 };
 
 const dataProvider = withLifecycleCallbacks(baseDataProvider, [
@@ -866,13 +1223,13 @@ const dataProvider = withLifecycleCallbacks(baseDataProvider, [
     },
     beforeDelete: async (params: DeleteParams<any>, dataProvider: DataProvider) => {
       if (params.meta?.deleteMedia) {
-        const base_url = storage.getItem("base_url");
+        const base_url = localStorage.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 base_url = localStorage.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: [] }) });
       }
@@ -883,13 +1240,13 @@ const dataProvider = withLifecycleCallbacks(baseDataProvider, [
       await Promise.all(
         params.ids.map(async id => {
           if (params.meta?.deleteMedia) {
-            const base_url = storage.getItem("base_url");
+            const base_url = localStorage.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 base_url = localStorage.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: [] }) });
           }

src/synapse/matrix.test.ts

@@ -1,4 +1,4 @@
-import { isValidBaseUrl, splitMxid } from "./synapse";
+import { isValidBaseUrl, splitMxid } from "./matrix";
 
 describe("splitMxid", () => {
   it("splits valid MXIDs", () =>

src/synapse/matrix.ts

@@ -1,6 +1,6 @@
 import { Identifier, fetchUtils } from "react-admin";
 
-import storage from "../storage";
+import { isMXID } from "../utils/mxid";
 
 export const splitMxid = mxid => {
   const re = /^@(?<name>[a-zA-Z0-9._=\-/]+):(?<domain>[a-zA-Z0-9\-.]+\.[a-zA-Z]+)$/;
@@ -49,51 +49,7 @@ export const getSupportedFeatures = async baseUrl => {
  * @returns array of supported login flows
  */
 export const getSupportedLoginFlows = async baseUrl => {
-  const loginFlowsUrl = `${baseUrl}/_matrix/client/r0/login`;
+  const loginFlowsUrl = `${baseUrl}/_matrix/client/v3/login`;
   const response = await fetchUtils.fetchJson(loginFlowsUrl, { method: "GET" });
   return response.json.flows;
 };
-
-/**
- * Generate a random MXID for current homeserver
- * @returns full MXID as string
- */
-export function generateRandomMxId(): string {
-  const homeserver = storage.getItem("home_server");
-  const characters = "0123456789abcdefghijklmnopqrstuvwxyz";
-  const localpart = Array.from(crypto.getRandomValues(new Uint32Array(8)))
-    .map(x => characters[x % characters.length])
-    .join("");
-  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 = 64): string {
-  const characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~`!@#$%^&*()_-+={[}]|:;'.?/<>,";
-  return Array.from(crypto.getRandomValues(new Uint32Array(length)))
-    .map(x => characters[x % characters.length])
-    .join("");
-}

src/utils/config.ts

@@ -0,0 +1,101 @@
+export interface Config {
+  restrictBaseUrl: string | string[];
+  asManagedUsers: RegExp[];
+  menu: MenuItem[];
+  etkeccAdmin?: string;
+}
+
+export interface MenuItem {
+  label: string;
+  icon: string;
+  url: string;
+}
+
+export const WellKnownKey = "cc.etke.synapse-admin";
+
+// current configuration
+let config: Config = {
+  restrictBaseUrl: "",
+  asManagedUsers: [],
+  menu: [],
+  etkeccAdmin: ""
+};
+
+export const FetchConfig = async () => {
+  // load config.json and honor vite base url (import.meta.env.BASE_URL)
+  // if that url doesn't have a trailing slash - add it
+  let configJSONUrl = "config.json"
+  if (import.meta.env.BASE_URL) {
+    configJSONUrl = `${import.meta.env.BASE_URL.replace(/\/?$/, '/')}config.json`;
+  }
+  try {
+    const resp = await fetch(configJSONUrl);
+    const configJSON = await resp.json();
+    console.log("Loaded", configJSONUrl, configJSON);
+    LoadConfig(configJSON);
+  } catch (e) {
+    console.error(e);
+  }
+
+  let protocol = "https";
+  const baseURL = localStorage.getItem("base_url");
+  if (baseURL && baseURL.startsWith("http://")) {
+    protocol = "http";
+  }
+
+  // if home_server is set, try to load https://home_server/.well-known/matrix/client
+  const homeserver = localStorage.getItem("home_server");
+  if (homeserver) {
+    try {
+      const resp = await fetch(`${protocol}://${homeserver}/.well-known/matrix/client`);
+      const configWK = await resp.json();
+      if (!configWK[WellKnownKey]) {
+        console.log(`Loaded ${protocol}://${homeserver}.well-known/matrix/client, but it doesn't contain ${WellKnownKey} key, skipping`, configWK);
+      } else {
+        console.log(`Loaded ${protocol}://${homeserver}.well-known/matrix/client`, configWK);
+        LoadConfig(configWK[WellKnownKey]);
+      }
+    } catch (e) {
+      console.log(`${protocol}://${homeserver}/.well-known/matrix/client not found, skipping`, e);
+    }
+  }
+}
+
+// load config from context
+// we deliberately processing each key separately to avoid overwriting the whole config, loosing some keys, and messing
+// with typescript types
+export const LoadConfig = (context: any) => {
+  if (context?.restrictBaseUrl) {
+    config.restrictBaseUrl = context.restrictBaseUrl as string | string[];
+  }
+
+  if (context?.asManagedUsers) {
+    config.asManagedUsers = context.asManagedUsers.map((regex: string) => new RegExp(regex));
+  }
+
+  let menu: MenuItem[] = [];
+  if (context?.menu) {
+    menu = context.menu as MenuItem[];
+  }
+  if (menu.length > 0) {
+    config.menu = menu;
+  }
+
+  if (context?.etkeccAdmin) {
+    config.etkeccAdmin = context.etkeccAdmin;
+  }
+}
+
+// get config
+export const GetConfig = (): Config => {
+  return config;
+}
+
+
+// clear config
+export const ClearConfig = () => {
+  // config.json
+  config = {} as Config;
+  // session
+  localStorage.clear();
+}

src/utils/date.ts

@@ -0,0 +1,54 @@
+export const DATE_FORMAT: Intl.DateTimeFormatOptions = {
+  year: "numeric",
+  month: "2-digit",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+};
+
+export const dateParser = (v: string | number | Date): number => {
+  const d = new Date(v);
+  return d.getTime();
+};
+
+export const dateFormatter = (v: string | number | Date | undefined | null): string => {
+  if (v === undefined || v === null) return "";
+  const d = new Date(v);
+
+  const pad = "00";
+  const year = d.getFullYear().toString();
+  const month = (pad + (d.getMonth() + 1).toString()).slice(-2);
+  const day = (pad + d.getDate().toString()).slice(-2);
+  const hour = (pad + d.getHours().toString()).slice(-2);
+  const minute = (pad + d.getMinutes().toString()).slice(-2);
+
+  // target format yyyy-MM-ddThh:mm
+  return `${year}-${month}-${day}T${hour}:${minute}`;
+};
+
+// assuming date is in format "2025-02-26 20:52:00" where no timezone is specified
+export const getTimeSince = (dateToCompare: string) => {
+  const nowUTC = new Date().getTime();
+  if (!dateToCompare.includes("Z")) {
+    dateToCompare = dateToCompare + "Z";
+  }
+  const past = new Date(dateToCompare);
+
+  const pastUTC = past.getTime();
+  const diffInMs = nowUTC - pastUTC;
+
+  const diffInMinutes = Math.floor(diffInMs / (1000 * 60));
+
+  if (diffInMinutes < 1) return "a couple of seconds";
+  if (diffInMinutes === 1) return "1 minute";
+  if (diffInMinutes < 60) return `${diffInMinutes} minutes`;
+  if (diffInMinutes < 120) return "1 hour";
+  if (diffInMinutes < 24 * 60) return `${Math.floor(diffInMinutes / 60)} hours`;
+  if (diffInMinutes < 48 * 60) return "1 day";
+  if (diffInMinutes < 7 * 24 * 60) return `${Math.floor(diffInMinutes / (24 * 60))} days`;
+  if (diffInMinutes < 14 * 24 * 60) return "1 week";
+  if (diffInMinutes < 30 * 24 * 60) return `${Math.floor(diffInMinutes / (7 * 24 * 60))} weeks`;
+  if (diffInMinutes < 60 * 24 * 60) return "1 month";
+  return `${Math.floor(diffInMinutes / (30 * 24 * 60))} months`;
+};

src/utils/decodeURLComponent.ts

@@ -0,0 +1,15 @@
+/**
+ * Decode a URI component, and if it fails, return the original string.
+ * @param str The string to decode.
+ * @returns The decoded string, or the original string if decoding fails.
+ * @example decodeURIComponent("Hello%20World") // "Hello World"
+ */
+const decodeURLComponent = (str: any): any => {
+  try {
+    return decodeURIComponent(str);
+  } catch (e) {
+    return str;
+  }
+}
+
+export default decodeURLComponent;

src/utils/fetchMedia.ts

@@ -1,9 +1,6 @@
-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");
     }
@@ -15,8 +12,8 @@ export const getServerAndMediaIdFromMxcUrl = (mxcUrl: string): { serverName: str
 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 homeserver = localStorage.getItem("base_url");
+  const accessToken = localStorage.getItem("access_token");
 
   const { serverName, mediaId } = getServerAndMediaIdFromMxcUrl(mxcUrl);
   if (!serverName || !mediaId) {
@@ -40,4 +37,4 @@ export const fetchAuthenticatedMedia = async (mxcUrl: string, type: MediaType):
   });
 
   return response;
-};
+};

src/utils/icons.ts

@@ -0,0 +1,26 @@
+import AnnouncementIcon from '@mui/icons-material/Announcement';
+import EngineeringIcon from '@mui/icons-material/Engineering';
+import HelpCenterIcon from '@mui/icons-material/HelpCenter';
+import SupportAgentIcon from '@mui/icons-material/SupportAgent';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import PieChartIcon from '@mui/icons-material/PieChart';
+import UpgradeIcon from '@mui/icons-material/Upgrade';
+import RouterIcon from '@mui/icons-material/Router';
+import PriceCheckIcon from '@mui/icons-material/PriceCheck';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
+
+export const Icons = {
+  Announcement: AnnouncementIcon,
+  Engineering: EngineeringIcon,
+  HelpCenter: HelpCenterIcon,
+  SupportAgent: SupportAgentIcon,
+  Default: OpenInNewIcon,
+  PieChart: PieChartIcon,
+  Upgrade: UpgradeIcon,
+  Router: RouterIcon,
+  PriceCheck: PriceCheckIcon,
+  RestartAlt: RestartAltIcon,
+  // Add more icons as needed
+};
+
+export const DefaultIcon = Icons.Default;

src/utils/mxid.ts

@@ -0,0 +1,61 @@
+import { Identifier } from "ra-core";
+import { GetConfig } from "../utils/config";
+
+const mxidPattern = /^@[^@:]+:[^@:]+$/;
+
+/*
+ * Check if id is a valid Matrix ID (user)
+ * @param id The ID to check
+ * @returns Whether the ID is a valid Matrix ID
+ */
+export const isMXID = (id: string | Identifier): boolean => mxidPattern.test(id as string);
+
+/**
+ * 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 managedUsers = GetConfig().asManagedUsers;
+  if (!managedUsers) {
+    return false;
+  }
+  return managedUsers.some(regex => regex.test(id as string));
+};
+
+/**
+ * Generate a random MXID for current homeserver
+ * @returns full MXID as string
+ */
+export function generateRandomMXID(): string {
+  const homeserver = localStorage.getItem("home_server");
+  const characters = "0123456789abcdefghijklmnopqrstuvwxyz";
+  const localpart = Array.from(crypto.getRandomValues(new Uint32Array(8)))
+    .map(x => characters[x % characters.length])
+    .join("");
+  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 inputStr = input as string;
+  const homeserver = localStorage.getItem("home_server") || "";
+
+  // when homeserver is not (just) a domain name, but a domain:port or even an IPv6 address
+  if (homeserver != "" && inputStr.endsWith(homeserver) && inputStr.startsWith("@")) {
+    return inputStr; // Already a valid MXID
+  }
+
+  // Check if the input already looks like a valid MXID (i.e., starts with "@" and contains ":")
+  if (isMXID(input)) {
+    return inputStr; // 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' && inputStr.startsWith('@') ? inputStr.slice(1) : inputStr;
+  return `@${localpart}:${homeserver}`;
+}

src/utils/password.ts

@@ -0,0 +1,10 @@
+/**
+ * Generate a random user password
+ * @returns a new random password as string
+ */
+export function generateRandomPassword(length = 64): string {
+  const characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~`!@#$%^&*()_-+={[}]|:;'.?/<>,";
+  return Array.from(crypto.getRandomValues(new Uint32Array(length)))
+    .map(x => characters[x % characters.length])
+    .join("");
+}

testdata/element/config.json

@@ -0,0 +1,9 @@
+{
+  "default_hs_url": "http://localhost:8008",
+  "default_is_url": "https://vector.im",
+  "integrations_ui_url": "https://scalar.vector.im/",
+  "integrations_rest_url": "https://scalar.vector.im/api",
+  "bug_report_endpoint_url": "https://riot.im/bugreports/submit",
+  "enableLabs": true
+}
+

testdata/element/nginx.conf

@@ -0,0 +1,34 @@
+worker_processes  1;
+error_log /var/log/nginx/error.log warn;
+pid /tmp/nginx.pid;
+events {
+	worker_connections  1024;
+}
+http {
+	client_body_temp_path /tmp/client_body_temp;
+	proxy_temp_path /tmp/proxy_temp;
+	fastcgi_temp_path /tmp/fastcgi_temp;
+	uwsgi_temp_path /tmp/uwsgi_temp;
+	scgi_temp_path /tmp/scgi_temp;
+	include       /etc/nginx/mime.types;
+	default_type  application/octet-stream;
+
+	log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+					  '$status $body_bytes_sent "$http_referer" '
+					  '"$http_user_agent" "$http_x_forwarded_for"';
+	access_log  /var/log/nginx/access.log  main;
+	sendfile        on;
+	keepalive_timeout  65;
+	server {
+		listen       8080;
+		server_name  localhost;
+		location / {
+			root   /usr/share/nginx/html;
+			index  index.html index.htm;
+		}
+		error_page   500 502 503 504  /50x.html;
+		location = /50x.html {
+			root   /usr/share/nginx/html;
+		}
+	}
+}

testdata/synapse/homeserver.yaml

@@ -78,7 +78,7 @@ password_config:
 pid_file: /homeserver.pid
 presence:
   enabled: true
-public_baseurl: http://synapse:8008/
+public_baseurl: http://localhost:8008/
 push:
   include_content: true
 rc_admin_redaction:
@@ -149,7 +149,7 @@ saml2_config:
   sp_config: null
   user_mapping_provider:
     config: null
-server_name: synapse
+server_name: synapse:8008
 signing_key_path: /config/synapse.signing.key
 spam_checker: []
 sso: null