clear storage on logout

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

* final fixes, refactoring, updated readme

.github/dependabot.yml

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

.github/workflows/workflow.yml

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

README.md

@@ -1,4 +1,16 @@
-# Synapse Admin UI [![GitHub license](https://img.shields.io/github/license/Awesome-Technologies/synapse-admin)](https://github.com/Awesome-Technologies/synapse-admin/blob/master/LICENSE)
+<p align="center">
+  <img alt="Synapse Admin Logo" src="./public/images/logo.webp" height="140" />
+  <h3 align="center">
+    Synapse Admin<br>
+    <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">
+  </h3>
+  <p align="center">Manager your Synapse homeserver with ease</p>
+</p>
+
+---
 
 ![Screenshots](./screenshots.jpg)
 
@@ -13,6 +25,7 @@ This project is built using [react-admin](https://marmelab.com/react-admin/).
 * [Configuration](#configuration)
   * [Restricting available homeserver](#restricting-available-homeserver)
   * [Protecting appservice managed users](#protecting-appservice-managed-users)
+  * [Adding custom menu items](#adding-custom-menu-items)
   * [Providing support URL](#providing-support-url)
 * [Usage](#usage)
   * [Supported Synapse](#supported-synapse)
@@ -22,7 +35,7 @@ This project is built using [react-admin](https://marmelab.com/react-admin/).
     * [Steps for 1)](#steps-for-1)
     * [Steps for 2)](#steps-for-2)
     * [Steps for 3)](#steps-for-3)
-  * [Serving Synapse-Admin on a different path](#serving-synapse-admin-on-a-different-path)
+  * [Serving Synapse Admin on a different path](#serving-synapse-admin-on-a-different-path)
 * [Development](#development-1)
 
 <!-- vim-markdown-toc -->
@@ -53,8 +66,9 @@ The following changes are already implemented:
 * [Fix redirect URL after user creation](https://github.com/etkecc/synapse-admin/pull/16)
 * [Display actual Synapse errors](https://github.com/etkecc/synapse-admin/pull/17)
 * [Fix base_url being undefined on unsuccessful login](https://github.com/etkecc/synapse-admin/pull/18)
-* [Put the version into manifest.json](https://github.com/Awesome-Technologies/synapse-admin/issues/507) (CI only)
-* [Federation page improvements](https://github.com/Awesome-Technologies/synapse-admin/pull/583) (using theme colors)
+* [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)
@@ -66,6 +80,17 @@ The following changes are already implemented:
 * [Authenticated Media support](https://github.com/etkecc/synapse-admin/pull/51)
 * [Better media preview/download](https://github.com/etkecc/synapse-admin/pull/53)
 * [Login with access token](https://github.com/etkecc/synapse-admin/pull/58)
+* [Fix footer causing vertical scrollbar](https://github.com/etkecc/synapse-admin/pull/60)
+* [Custom Menu Items](https://github.com/etkecc/synapse-admin/pull/79)
+* [Add user profile to the top menu](https://github.com/etkecc/synapse-admin/pull/80)
+* [Enable visual customization](https://github.com/etkecc/synapse-admin/pull/81)
+* [Fix room state events display](https://github.com/etkecc/synapse-admin/pull/100)
+* [Sanitize CSV on import](https://github.com/etkecc/synapse-admin/pull/101)
+* Allow setting version using `SYNAPSE_ADMIN_VERSION` environment variable on build (if git is not available)
+* [Add option to control user's experimental features](https://github.com/etkecc/synapse-admin/pull/111)
+* [Add random password generation on user create/edit form](https://github.com/etkecc/synapse-admin/pull/123)
+* [Add option to set user's rate limits](https://github.com/etkecc/synapse-admin/pull/125)
+* [Support configuration via /.well-known/matrix/client](https://github.com/etkecc/synapse-admin/pull/126)
 
 _the list will be updated as new changes are added_
 
@@ -82,7 +107,11 @@ After that open `http://localhost:5173` in your browser, login using the followi
 
 ## Configuration
 
-You can use `config.json` file to configure synapse-admin
+You can use `config.json` file to configure Synapse Admin instance,
+and `/.well-known/matrix/client` file to provide Synapse Admin configuration specifically for your homeserver.
+In the latter case, any instance of Synapse Admin will automatically pick up the configuration from the homeserver.
+Note that configuration inside the `/.well-known/matrix/client` file should go under the `cc.etke.synapse-admin` key,
+and it will override the configuration from the `config.json` file.
 
 The `config.json` can be injected into a Docker container using a bind mount.
 
@@ -107,6 +136,16 @@ Edit `config.json` to restrict either to a single homeserver:
 }
 ```
 
+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
@@ -115,6 +154,16 @@ or to a list of homeservers:
 }
 ```
 
+similar for `/.well-known/matrix/client`:
+
+```json
+{
+  "cc.etke.synapse-admin": {
+    "restrictBaseUrl": ["https://your-first-matrix-server.example.com", "https://your-second-matrix-server.example.com"]
+  }
+}
+```
+
 ### Protecting appservice managed users
 
 To avoid accidental adjustments of appservice-managed users (e.g., puppets created by a bridge) and breaking the bridge,
@@ -128,9 +177,55 @@ Example for [mautrix-telegram](https://github.com/mautrix/telegram)
 }
 ```
 
+similar for `/.well-known/matrix/client`:
+
+```json
+{
+  "cc.etke.synapse-admin": {
+    "asManagedUsers": ["^@telegram_[a-zA-Z0-9]+:example\\.com$"]
+  }
+}
+```
+
+### Adding custom menu items
+
+You can add custom menu items to the main menu by providing a `menu` array in the `config.json`.
+
+```json
+{
+  "menu": [
+    {
+      "label": "Contact support",
+      "icon": "SupportAgent",
+      "url": "https://github.com/etkecc/synapse-admin/issues"
+    }
+  ]
+}
+```
+
+similar for `/.well-known/matrix/client`:
+
+```json
+{
+  "cc.etke.synapse-admin": {
+    "menu": [
+      {
+        "label": "Contact support",
+        "icon": "SupportAgent",
+        "url": "https://github.com/etkecc/synapse-admin/issues"
+      }
+    ]
+  }
+}
+```
+
+Where `icon` is one of the [preloaded icons](./src/components/icons.ts)
+
 ### Providing support URL
 
-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`.
+**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
 {
@@ -138,6 +233,16 @@ Synapse-Admin provides a support link in the main menu - `Contact support`. By d
 }
 ```
 
+similar for `/.well-known/matrix/client`:
+
+```json
+{
+  "cc.etke.synapse-admin": {
+    "supportURL": "https://example.com/support"
+  }
+}
+```
+
 ## Usage
 
 ### Supported Synapse
@@ -217,7 +322,7 @@ You have three options:
 
 - browse to http://localhost:8080
 
-### Serving Synapse-Admin on a different path
+### Serving Synapse Admin on a different path
 
 The path prefix where synapse-admin is served can only be changed during the build step.
 
@@ -225,7 +330,7 @@ If you downloaded the source code, use `yarn build --base=/my-prefix` to set a p
 
 If you want to build your own Docker container, use the `BASE_PATH` argument.
 
-We do not support directly changing the path where Synapse-Admin is served in the pre-built Docker container. Instead please use a reverse proxy if you need to move Synapse-Admin to a different base path. If you want to serve multiple applications with different paths on the same domain, you need a reverse proxy anyway.
+We do not support directly changing the path where Synapse Admin is served in the pre-built Docker container. Instead please use a reverse proxy if you need to move Synapse Admin to a different base path. If you want to serve multiple applications with different paths on the same domain, you need a reverse proxy anyway.
 
 Example for Traefik:
 

index.html

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

package.json

@@ -3,7 +3,7 @@
   "version": "0.10.3",
   "description": "Admin GUI for the Matrix.org server Synapse",
   "type": "module",
-  "author": "Awesome Technologies Innovationslabor GmbH",
+  "author": "etke.cc (originally by Awesome Technologies Innovationslabor GmbH)",
   "license": "Apache-2.0",
   "homepage": ".",
   "repository": {
@@ -11,25 +11,25 @@
     "url": "https://github.com/etkecc/synapse-admin"
   },
   "devDependencies": {
-    "@eslint/js": "^9.7.0",
+    "@eslint/js": "^9.13.0",
     "@testing-library/dom": "^10.0.0",
-    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.13",
-    "@types/lodash": "^4.17.7",
-    "@types/node": "^20.14.12",
-    "@types/papaparse": "^5.3.14",
-    "@types/react": "^18.3.3",
-    "@typescript-eslint/eslint-plugin": "^7.16.1",
-    "@typescript-eslint/parser": "^7.16.1",
-    "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^8.57.0",
+    "@types/jest": "^29.5.14",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^22.8.7",
+    "@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",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-unused-imports": "^3.2.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
     "eslint-plugin-yaml": "^1.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -38,41 +38,42 @@
     "react-test-renderer": "^18.3.1",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
-    "typescript": "^5.4.5",
-    "typescript-eslint": "^7.16.1",
-    "vite": "^5.4.6",
-    "vite-plugin-version-mark": "^0.1.0"
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.12.2",
+    "vite": "^5.4.10",
+    "vite-plugin-version-mark": "^0.1.2"
   },
   "dependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@haleos/ra-language-german": "^1.0.0",
     "@haxqer/ra-language-chinese": "^4.16.2",
-    "@mui/icons-material": "^6.1.1",
-    "@mui/material": "^6.1.1",
-    "@tanstack/react-query": "^5.56.2",
+    "@mui/icons-material": "^6.1.5",
+    "@mui/material": "^6.1.6",
+    "@mui/utils": "^5.16.6",
+    "@tanstack/react-query": "^5.59.19",
     "history": "^5.3.0",
     "lodash": "^4.17.21",
     "papaparse": "^5.4.1",
-    "ra-core": "^5.2.0",
-    "ra-i18n-polyglot": "^5.2.0",
-    "ra-language-english": "^5.2.0",
+    "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.2.0",
+    "ra-language-french": "^5.3.1",
     "ra-language-italian": "^3.13.1",
     "ra-language-russian": "^4.14.2",
     "react": "^18.3.1",
-    "react-admin": "^5.2.0",
+    "react-admin": "^5.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.53.0",
+    "react-hook-form": "^7.53.1",
     "react-is": "^18.3.1",
     "react-router": "^6.26.2",
-    "react-router-dom": "^6.26.2"
+    "react-router-dom": "^6.27.0"
   },
   "scripts": {
     "start": "vite serve",
     "build": "vite build",
-    "lint": "eslint --ignore-path .gitignore --ext .ts,.tsx,.yml,.yaml .",
+    "lint": "ESLINT_USE_FLAT_CONFIG=false eslint --ignore-path .gitignore --ignore-pattern testdata/ --ext .ts,.tsx,.yml,.yaml .",
     "fix": "yarn lint --fix",
     "test": "yarn jest",
     "test:watch": "yarn jest --watch"

public/manifest.json

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

src/App.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import fetchMock from "jest-fetch-mock";
 fetchMock.enableMocks();
 
@@ -9,4 +9,4 @@ describe("App", () => {
     render(<App />);
     await screen.findAllByText("Welcome to Synapse-admin");
   });
-});
+});

src/App.tsx

@@ -23,6 +23,7 @@ import users from "./resources/users";
 import authProvider from "./synapse/authProvider";
 import dataProvider from "./synapse/dataProvider";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import Footer from "./components/Footer";
 
 // TODO: Can we use lazy loading together with browser locale?
 const messages = {
@@ -81,6 +82,7 @@ const App = () => (
       <Resource name="room_state" />
       <Resource name="destination_rooms" />
     </Admin>
+    <Footer />
   </QueryClientProvider>
 );
 

src/AppContext.tsx

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

src/components/AdminLayout.tsx

@@ -1,17 +1,8 @@
-import { AppBar, Confirm, Layout, Logout, Menu, useLogout, UserMenu } from "react-admin";
-import LiveHelpIcon from "@mui/icons-material/LiveHelp";
+import { AppBar, TitlePortal, InspectorButton, Confirm, Layout, Logout, Menu, useLogout, UserMenu } from "react-admin";
 import { LoginMethod } from "../pages/LoginPage";
-import { useState } from "react";
-
-const DEFAULT_SUPPORT_LINK = "https://github.com/etkecc/synapse-admin/issues";
-const supportLink = (): string => {
-  try {
-    new URL(localStorage.getItem("support_url") || ""); // Check if the URL is valid
-    return localStorage.getItem("support_url") || DEFAULT_SUPPORT_LINK;
-  } catch (e) {
-    return DEFAULT_SUPPORT_LINK;
-  }
-};
+import { useEffect, useState, Suspense } from "react";
+import { Icons, DefaultIcon } from "./icons";
+import { ClearConfig } from "./config";
 
 const AdminUserMenu = () => {
   const [open, setOpen] = useState(false);
@@ -31,8 +22,7 @@ const AdminUserMenu = () => {
 
   const handleDialogClose = () => {
     setOpen(false);
-    localStorage.removeItem("access_token");
-    localStorage.removeItem("login_type");
+    ClearConfig();
     window.location.reload();
   };
 
@@ -54,17 +44,60 @@ const AdminUserMenu = () => {
   );
 };
 
-const AdminAppBar = () => <AppBar userMenu={<AdminUserMenu />} />;
+const AdminAppBar = () => {
+  return (<AppBar userMenu={<AdminUserMenu />}>
+    <TitlePortal />
+    <InspectorButton />
+  </AppBar>);
+};
 
-const AdminMenu = () => (
-  <Menu>
-    <Menu.ResourceItems />
-    <Menu.Item to={supportLink()} target="_blank" primaryText="Contact support" leftIcon={<LiveHelpIcon />} />
-  </Menu>
-);
+const AdminMenu = (props) => {
+  const [menu, setMenu] = useState([]);
+
+  useEffect(() => {
+    const menuConfig = localStorage.getItem('menu');
+    if (menuConfig) {
+      try {
+        setMenu(JSON.parse(menuConfig));
+      } catch (e) {
+        console.error('Error parsing menu configuration', e);
+      }
+    }
+  }, []);
+
+  return (
+    <Menu {...props}>
+      <Menu.ResourceItems />
+      {menu.map((item, index) => {
+        const { url, icon, label } = item;
+        const IconComponent = Icons[icon] as React.ComponentType<any> | undefined;
+
+        return (
+          <Suspense key={index}>
+            <Menu.Item
+              to={url}
+              target="_blank"
+              primaryText={label}
+              leftIcon={IconComponent ? <IconComponent /> : <DefaultIcon />}
+              onClick={props.onMenuClick}
+            />
+          </Suspense>
+        );
+      })}
+    </Menu>
+  );
+};
 
 export const AdminLayout = ({ children }) => (
-  <Layout appBar={AdminAppBar} menu={AdminMenu}>
+  <Layout appBar={AdminAppBar} menu={AdminMenu} sx={{
+      ['& .RaLayout-appFrame']: {
+        minHeight: '90vh',
+        height: '90vh',
+      },
+      ['& .RaLayout-content']: {
+        marginBottom: '3rem',
+      },
+    }}>
     {children}
   </Layout>
 );

src/components/ExperimentalFeatures.tsx

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

src/components/Footer.tsx

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

src/components/ImportFeature.tsx

@@ -121,6 +121,7 @@ const FilePicker = () => {
 
   const verifyCsv = ({ data, meta, errors }: ParseResult<ImportLine>, { setValues, setStats, setError }) => {
     /* First, verify the presence of required fields */
+    meta.fields = meta.fields?.map(f => f.trim().toLowerCase());
     const missingFields = expectedFields.filter(eF => !meta.fields?.find(mF => eF === mF));
 
     if (missingFields.length > 0) {
@@ -147,6 +148,15 @@ const FilePicker = () => {
     };
 
     const errorMessages = errors.map(e => e.message);
+    // sanitize the data first
+    data = data.map(line => {
+      const newLine = {} as ImportLine;
+      for (const [key, value] of Object.entries(line)) {
+        newLine[key.trim().toLowerCase()] = value;
+      }
+      return newLine;
+    });
+    // process the data
     data.forEach((line, idx) => {
       if (line.user_type === undefined || line.user_type === "") {
         stats.user_types.default++;
@@ -173,6 +183,7 @@ const FilePicker = () => {
           line[f] = true; // we need true booleans instead of strings
         } else {
           if (line[f] !== "false" && line[f] !== "") {
+            console.log("invalid value", line[f], "for field " + f + " in row " + idx);
             errorMessages.push(
               translate("import_users.error.invalid_value", {
                 field: f,

src/components/UserRateLimits.tsx

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

src/components/config.ts

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

src/components/icons.ts

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

src/i18n/de.ts

@@ -2,7 +2,7 @@ import { formalGermanMessages } from "@haleos/ra-language-german";
 
 import { SynapseTranslationMessages } from ".";
 
-const de: SynapseTranslationMessages = {
+const fixedGermanMessages = {
   ...formalGermanMessages,
   ra: {
     ...formalGermanMessages.ra,
@@ -10,8 +10,30 @@ const de: SynapseTranslationMessages = {
       ...formalGermanMessages.ra.navigation,
       no_filtered_results: "Keine Ergebnisse",
       clear_filters: "Alle Filter entfernen",
+      add_filter: "Filter hinzufügen",
+    },
+    action: {
+      ...formalGermanMessages.ra.action,
+      update_application: "Anwendung aktualisieren",
+    },
+    page: {
+      ...formalGermanMessages.ra.page,
+      empty: "Leer",
+      access_denied: "Zugriff verweigert",
+      authentication_error: "Authentifizierungsfehler",
+    },
+    message: {
+      ...formalGermanMessages.ra.message,
+      access_denied:
+        "Sie haben nicht die richtigen Berechtigungen um auf diese Seite zuzugreifen.",
+      authentication_error:
+        "Der Authentifizierungsserver hat einen Fehler zurückgegeben und Ihre Anmeldedaten konnten nicht überprüft werden.",
     },
   },
+}
+
+const de: SynapseTranslationMessages = {
+  ...fixedGermanMessages,
   synapseadmin: {
     auth: {
       base_url: "Heimserver URL",
@@ -33,7 +55,7 @@ const de: SynapseTranslationMessages = {
     },
     users: {
       invalid_user_id: "Lokaler Anteil der Matrix Benutzer-ID ohne Homeserver.",
-      tabs: { sso: "SSO" },
+      tabs: { sso: "SSO", experimental: "Experimentell", limits: "Rate Limits" },
     },
     rooms: {
       details: "Raumdetails",
@@ -168,7 +190,14 @@ const de: SynapseTranslationMessages = {
         erase_avatar: "Avatar löschen",
         delete_media: "Alle von dem/den Benutzer(n) hochgeladenen Medien löschen",
         redact_events: "Schwärzen aller vom Benutzer gesendeten Ereignisse (-s)",
+        generate_password: "Passwort generieren",
       },
+      limits: {
+        messages_per_second: "Nachrichten pro Sekunde",
+        messages_per_second_text: "Die Anzahl der Aktionen, die in einer Sekunde durchgeführt werden können. 0 bedeutet, dass die Rate-Limitierung für diesen Benutzer deaktiviert ist.",
+        burst_count: "Burst-Anzahl",
+        burst_count_text: "Die Anzahl der Aktionen, die vor der Begrenzung durchgeführt werden können.",
+      }
     },
     rooms: {
       name: "Raum |||| Räume",

src/i18n/en.ts

@@ -25,7 +25,11 @@ const en: SynapseTranslationMessages = {
     },
     users: {
       invalid_user_id: "Localpart of a Matrix user-id without homeserver.",
-      tabs: { sso: "SSO" },
+      tabs: {
+        sso: "SSO",
+        experimental: "Experimental",
+        limits: "Rate Limits",
+      },
     },
     rooms: {
       details: "Room details",
@@ -159,7 +163,14 @@ const en: SynapseTranslationMessages = {
         erase_avatar: "Erase avatar",
         delete_media: "Delete all media uploaded by the user(-s)",
         redact_events: "Redact all events sent by the user(-s)",
+        generate_password: "Generate password",
       },
+      limits: {
+        messages_per_second: "Messages per second",
+        messages_per_second_text: "The number of actions that can be performed in a second. 0 mean that ratelimiting is disabled for this user",
+        burst_count: "Burst count",
+        burst_count_text: "How many actions that can be performed before being limited.",
+      }
     },
     rooms: {
       name: "Room |||| Rooms",

src/i18n/fa.ts

@@ -24,7 +24,7 @@ const fa: SynapseTranslationMessages = {
     },
     users: {
       invalid_user_id: "بخش محلی یک شناسه کاربری ماتریکس بدون سرور خانگی.",
-      tabs: { sso: "SSO" },
+      tabs: { sso: "SSO", experimental: "تجربی", limits: "محدودیت ها" },
     },
     rooms: {
       tabs: {
@@ -155,7 +155,14 @@ const fa: SynapseTranslationMessages = {
         erase_avatar: "محو الصورة الرمزية",
         delete_media: "حذف جميع الوسائط التي تم تحميلها بواسطة المستخدم (المستخدمين)",
         redact_events: "تنقيح جميع الأحداث المرسلة من قبل المستخدم (-s)",
+        generate_password: "توليد رمز عبور",
       },
+      limits: {
+        messages_per_second: "پیام در ثانیه",
+        messages_per_second_text: "تعداد عملیاتی که می تواند در یک ثانیه انجام شود. 0 به معنای غیرفعال کردن محدودیت برای این کاربر است.",
+        burst_count: "تعداد پیچیدگی",
+        burst_count_text: "تعداد عملیاتی که می تواند قبل از محدودیت انجام شود.",
+      }
     },
     rooms: {
       name: "اتاق |||| اتاق ها",
@@ -207,6 +214,11 @@ const fa: SynapseTranslationMessages = {
           title: "حذف اتاق",
           content:
             "آیا مطمئن هستید که می خواهید اتاق را حذف کنید؟ این قابل بازگشت نیست. همه پیام ها و رسانه های مشترک در اتاق از سرور حذف می شوند!",
+          fields: {
+            block: "حذف",
+          },
+          success: "اتاق با موفقیت حذف شد.",
+          failure: "خطایی رخ داده است.",
         },
       },
     },

src/i18n/fr.ts

@@ -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" },
+      tabs: { sso: "Authentification unique", experimental: "Expérimental", limits: "Limites" },
     },
     rooms: {
       tabs: {
@@ -157,7 +157,14 @@ const fr: SynapseTranslationMessages = {
         erase_avatar: "Effacer l'avatar",
         delete_media: "Supprimer tous les médias téléchargés par le(s) utilisateur(s)",
         redact_events: "Expurger tous les événements envoyés par l'utilisateur(-s)",
+        generate_password: "Générer un mot de passe",
       },
+      limits: {
+        messages_per_second: "Messages par seconde",
+        messages_per_second_text: "Le nombre d'actions que l'utilisateur peut effectuer par seconde. 0 signifie que la limitation est désactivée pour cet utilisateur.",
+        burst_count: "Compteur de pics",
+        burst_count_text: "Le nombre d'actions que l'utilisateur peut effectuer avant d'être limité.",
+      }
     },
     rooms: {
       name: "Salon |||| Salons",

src/i18n/index.d.ts

@@ -22,7 +22,7 @@ interface SynapseTranslationMessages extends TranslationMessages {
     };
     users: {
       invalid_user_id: string;
-      tabs: { sso: string };
+      tabs: { sso: string; experimental: string; limits: string; };
     };
     rooms: {
       details?: string; // TODO: fa, fr, it, zh
@@ -155,6 +155,13 @@ interface SynapseTranslationMessages extends TranslationMessages {
         erase_avatar: string;
         delete_media: string;
         redact_events: string;
+        generate_password: string;
+      };
+      limits: {
+        messages_per_second: string;
+        messages_per_second_text: string;
+        burst_count: string;
+        burst_count_text: string;
       };
     };
     rooms: {

src/i18n/it.ts

@@ -24,7 +24,7 @@ const it: SynapseTranslationMessages = {
     },
     users: {
       invalid_user_id: "ID utente non valido su questo homeserver.",
-      tabs: { sso: "SSO" },
+      tabs: { sso: "SSO", experimental: "Sperimentale", limits: "Limiti" },
     },
     rooms: {
       tabs: {
@@ -156,7 +156,14 @@ const it: SynapseTranslationMessages = {
         erase_avatar: "Cancella l'avatar dell'utente",
         delete_media: "Elimina tutti i media caricati dall'utente(-s)",
         redact_events: "Ridurre tutti gli eventi inviati dall'utente(-s)",
+        generate_password: "Genera password",
       },
+      limits: {
+        messages_per_second: "Messaggi al secondo",
+        messages_per_second_text: "Il numero di azioni che l'utente può eseguire al secondo. 0 significa che la limitazione è disabilitata per questo utente.",
+        burst_count: "Burst-conteggio",
+        burst_count_text: "Il numero di azioni che l'utente può eseguire prima di essere limitato.",
+      }
     },
     rooms: {
       name: "Stanza |||| Stanze",

src/i18n/ru.ts

@@ -2,7 +2,7 @@ import russianMessages from "ra-language-russian";
 
 import { SynapseTranslationMessages } from ".";
 
-const ru: SynapseTranslationMessages = {
+const fixedRussianMessages = {
   ...russianMessages,
   ra: {
     ...russianMessages.ra,
@@ -11,7 +11,24 @@ const ru: SynapseTranslationMessages = {
       no_filtered_results: "Нет результатов",
       clear_filters: "Все фильтры сбросить",
     },
+    page: {
+      ...russianMessages.ra.page,
+      empty: "Пусто",
+      access_denied: "Доступ запрещен",
+      authentication_error: "Ошибка аутентификации",
+    },
+    message: {
+      ...russianMessages.ra.message,
+      access_denied:
+        "У вас нет прав доступа к этой странице.",
+      authentication_error:
+        "Сервер аутентификации вернул ошибку и не смог проверить ваши учетные данные.",
+    },
   },
+}
+
+const ru: SynapseTranslationMessages = {
+  ...fixedRussianMessages,
   synapseadmin: {
     auth: {
       base_url: "Адрес домашнего сервера",
@@ -33,7 +50,7 @@ const ru: SynapseTranslationMessages = {
     },
     users: {
       invalid_user_id: "Локальная часть ID пользователя Matrix без адреса домашнего сервера.",
-      tabs: { sso: "SSO" },
+      tabs: { sso: "SSO", experimental: "Экспериментальные", limits: "Ограничения" },
     },
     rooms: {
       details: "Данные комнаты",
@@ -176,8 +193,15 @@ const ru: SynapseTranslationMessages = {
         erase_avatar: "Удалить аватар",
         delete_media: "Удаление всех медиафайлов, загруженных пользователем (-ами)",
         redact_events: "Удаление всех событий, отправленных пользователем (-ами)",
+        generate_password: "Сгенерировать пароль",
       },
-      },
+      limits: {
+        messages_per_second: "Сообщений в секунду",
+        messages_per_second_text: "Количество действий, которые могут быть выполнены в секунду. 0 означает, что ограничение на количество действий отключено для этого пользователя.",
+        burst_count: "Burst-счётчик",
+        burst_count_text: "Количество действий, которые могут быть выполнены до ограничения.",
+      }
+    },
       rooms: {
         name: "Комната |||| Комнаты",
         fields: {

src/i18n/zh.ts

@@ -2,7 +2,7 @@ import chineseMessages from "@haxqer/ra-language-chinese";
 
 import { SynapseTranslationMessages } from ".";
 
-const zh: SynapseTranslationMessages = {
+const fixedChineseMessages = {
   ...chineseMessages,
   ra: {
     ...chineseMessages.ra,
@@ -11,7 +11,27 @@ const zh: SynapseTranslationMessages = {
       no_filtered_results: "没有结果",
       clear_filters: "清除所有过滤器",
     },
+    action: {
+      ...chineseMessages.ra.action,
+      update_application: "Anwendung aktualisieren",
+    },
+    page: {
+      ...chineseMessages.ra.page,
+      access_denied: "拒绝访问",
+      authentication_error: "认证错误",
+    },
+    message: {
+      ...chineseMessages.ra.message,
+      access_denied:
+        "您没有访问此页面的权限。",
+      authentication_error:
+        "身份验证服务器返回错误，无法验证您的凭据。",
+    },
   },
+}
+
+const zh: SynapseTranslationMessages = {
+  ...fixedChineseMessages,
   synapseadmin: {
     auth: {
       base_url: "服务器 URL",
@@ -32,7 +52,7 @@ const zh: SynapseTranslationMessages = {
     },
     users: {
       invalid_user_id: "必须要是一个有效的 Matrix 用户 ID ，例如 @user_id:homeserver",
-      tabs: { sso: "SSO" },
+      tabs: { sso: "SSO", experimental: "实验性", limits: "限制" },
     },
     rooms: {
       tabs: {
@@ -160,7 +180,14 @@ const zh: SynapseTranslationMessages = {
         erase_avatar: "抹掉头像",
         delete_media: "删除用户上传的所有媒体",
         redact_events: "重新编辑用户（-s）发送的所有事件",
+        generate_password: "生成密码",
       },
+      limits: {
+        messages_per_second: "每秒消息数",
+        messages_per_second_text: "每秒可以执行的操作数。0 表示禁用此用户的限制。",
+        burst_count: "Burst-计数",
+        burst_count_text: "在限制之前可以执行的操作数。",
+      }
     },
     rooms: {
       name: "房间",

src/index.tsx

@@ -3,23 +3,42 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 
 import App from "./App";
+import { Config, WellKnownKey, LoadConfig } from "./components/config";
 import { AppContext } from "./AppContext";
 import storage from "./storage";
 
-fetch("config.json")
-  .then(res => res.json())
-  .then(props => {
-    if (props.asManagedUsers) {
-      storage.setItem("as_managed_users", JSON.stringify(props.asManagedUsers));
+// 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);
     }
-    if (props.supportURL) {
-      storage.setItem("support_url", props.supportURL);
-    }
-    return createRoot(document.getElementById("root")).render(
+  } catch (e) {
+    console.log(`https://${homeserver}/.well-known/matrix/client not found, skipping`, e);
+  }
+}
+
+createRoot(document.getElementById("root")).render(
       <React.StrictMode>
         <AppContext.Provider value={props}>
           <App />
         </AppContext.Provider>
       </React.StrictMode>
-    )
-  });
+);

src/pages/LoginPage.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect } from "react";
 
-import LockIcon from "@mui/icons-material/Lock";
 import { Avatar, Box, Button, Card, CardActions, CircularProgress, MenuItem, Select, Tab, Tabs, Typography } from "@mui/material";
 import {
   Form,
@@ -34,7 +33,7 @@ const LoginPage = () => {
   const login = useLogin();
   const notify = useNotify();
   const { restrictBaseUrl } = useAppContext();
-  const allowSingleBaseUrl = typeof restrictBaseUrl === "string";
+  const allowSingleBaseUrl = typeof restrictBaseUrl === "string" && restrictBaseUrl !== "";
   const allowMultipleBaseUrls =
     Array.isArray(restrictBaseUrl) &&
     restrictBaseUrl.length > 0 &&
@@ -249,9 +248,7 @@ const LoginPage = () => {
             {loading ? (
               <CircularProgress size={25} thickness={2} />
             ) : (
-              <Avatar className="icon">
-                <LockIcon />
-              </Avatar>
+              <Avatar sx={{ width: "120px", height: "120px" }} src="./images/logo.webp"/>
             )}
           </Box>
           <Box className="hint">{translate("synapseadmin.auth.welcome")}</Box>
@@ -270,12 +267,12 @@ const LoginPage = () => {
               ))}
             </Select>
             <FormDataConsumer>{formDataProps => <UserData {...formDataProps} />}</FormDataConsumer>
-            <CardActions className="actions">
+            {loginMethod === "credentials" && <CardActions className="actions">
               <Button
                 variant="contained"
                 type="submit"
                 color="primary"
-                disabled={loading || !supportPassAuth && loginMethod !== "accessToken"}
+                disabled={loading || !supportPassAuth}
                 fullWidth
               >
                 {translate("ra.auth.sign_in")}
@@ -289,7 +286,18 @@ const LoginPage = () => {
               >
                 {translate("synapseadmin.auth.sso_sign_in")}
               </Button>
-            </CardActions>
+            </CardActions>}
+            {loginMethod === "accessToken" && <CardActions className="actions">
+              <Button
+                variant="contained"
+                type="submit"
+                color="primary"
+                disabled={loading}
+                fullWidth
+              >
+                {translate("ra.auth.sign_in")}
+              </Button>
+            </CardActions>}
           </Box>
         </Card>
       </LoginFormBox>

src/resources/destinations.tsx

@@ -8,6 +8,7 @@ import ErrorIcon from '@mui/icons-material/Error';
 import {
   Button,
   Datagrid,
+  DatagridConfigurable,
   DateField,
   List,
   ListProps,
@@ -123,14 +124,14 @@ export const DestinationList = (props: ListProps) => {
       pagination={<DestinationPagination />}
       sort={{ field: "destination", order: "ASC" }}
     >
-      <Datagrid rowClick={id => `${id}/show/rooms`} bulkActionButtons={false}>
+      <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" />
         <DestinationReconnectButton />
-      </Datagrid>
+      </DatagridConfigurable>
     </List>
   );
 };

src/resources/registration_tokens.tsx

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

src/resources/reports.tsx

@@ -3,6 +3,7 @@ import ViewListIcon from "@mui/icons-material/ViewList";
 import ReportIcon from "@mui/icons-material/Warning";
 import {
   Datagrid,
+  DatagridConfigurable,
   DateField,
   DeleteButton,
   List,
@@ -90,13 +91,13 @@ const ReportShowActions = () => {
 
 export const ReportList = (props: ListProps) => (
   <List {...props} pagination={<ReportPagination />} sort={{ field: "received_ts", order: "DESC" }}>
-    <Datagrid rowClick="show" bulkActionButtons={false}>
+    <DatagridConfigurable rowClick="show" bulkActionButtons={false}>
       <TextField source="id" sortable={false} />
       <DateField source="received_ts" showTime options={DATE_FORMAT} sortable={true} />
       <TextField sortable={false} source="user_id" />
       <TextField sortable={false} source="name" />
       <TextField sortable={false} source="score" />
-    </Datagrid>
+    </DatagridConfigurable>
   </List>
 );
 

src/resources/rooms.tsx

@@ -187,7 +187,7 @@ export const RoomShow = (props: ShowProps) => {
             <Datagrid style={{ width: "100%" }} bulkActionButtons={false}>
               <TextField source="type" sortable={false} />
               <DateField source="origin_server_ts" showTime options={DATE_FORMAT} sortable={false} />
-              <TextField source="content" sortable={false} />
+              <FunctionField source="content" sortable={false} render={record => `${JSON.stringify(record.content, null, 2)}`} />
               <ReferenceField source="sender" reference="users" sortable={false}>
                 <TextField source="id" />
               </ReferenceField>

src/resources/user_media_statistics.tsx

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

src/resources/users.tsx

@@ -7,14 +7,17 @@ import NotificationsIcon from "@mui/icons-material/Notifications";
 import PermMediaIcon from "@mui/icons-material/PermMedia";
 import PersonPinIcon from "@mui/icons-material/PersonPin";
 import SettingsInputComponentIcon from "@mui/icons-material/SettingsInputComponent";
+import ScienceIcon from "@mui/icons-material/Science";
+import LockClockIcon from '@mui/icons-material/LockClock';
 import ViewListIcon from "@mui/icons-material/ViewList";
 import { useEffect, useState } from "react";
-import { Alert, ownerDocument } from "@mui/material";
+import { Alert } from "@mui/material";
 import {
   ArrayInput,
   ArrayField,
   Button,
   Datagrid,
+  DatagridConfigurable,
   DateField,
   Create,
   CreateProps,
@@ -53,10 +56,10 @@ import {
   useNotify,
   Identifier,
   ToolbarClasses,
-  RaRecord,
   ImageInput,
   ImageField,
   FunctionField,
+  useDataProvider,
 } from "react-admin";
 import { Link } from "react-router-dom";
 
@@ -67,6 +70,10 @@ import { ServerNoticeButton, ServerNoticeBulkButton } from "../components/Server
 import { DATE_FORMAT } from "../components/date";
 import { DeviceRemoveButton } from "../components/devices";
 import { MediaIDField, ProtectMediaButton, QuarantineMediaButton } from "../components/media";
+import { generateRandomPassword } from "../synapse/synapse";
+import { useFormContext } from "react-hook-form";
+import { ExperimentalFeaturesList } from "../components/ExperimentalFeatures";
+import { UserRateLimits } from "../components/UserRateLimits";
 
 const choices_medium = [
   { id: "email", name: "resources.users.email" },
@@ -125,8 +132,6 @@ const UserBulkActionButtons = () => {
   const [asManagedUserIsSelected, setAsManagedUserIsSelected] = useState(false);
   const selectedIds = record.selectedIds;
   const ownUserId = localStorage.getItem("user_id");
-  const notify = useNotify();
-  const translate = useTranslate();
 
   useEffect(() => {
     setOwnUserIsSelected(selectedIds.includes(ownUserId));
@@ -156,7 +161,7 @@ export const UserList = (props: ListProps) => (
     actions={<UserListActions />}
     pagination={<UserPagination />}
   >
-    <Datagrid
+    <DatagridConfigurable
       rowClick={(id: Identifier, resource: string) => `/${resource}/${id}`}
       bulkActionButtons={<UserBulkActionButtons />}
     >
@@ -169,7 +174,7 @@ export const UserList = (props: ListProps) => (
       <BooleanField source="locked" />
       <BooleanField source="erased" sortable={false} />
       <DateField source="creation_ts" label="resources.users.fields.creation_ts_ms" showTime options={DATE_FORMAT} />
-    </Datagrid>
+    </DatagridConfigurable>
   </List>
 );
 
@@ -237,11 +242,11 @@ export const UserCreate = (props: CreateProps) => (
 
 const UserTitle = () => {
   const record = useRecordContext();
+  const translate = useTranslate();
   if (!record) {
     return null;
   }
 
-  const translate = useTranslate();
   let username = record ? (record.displayname ? `"${record.displayname}"` : `"${record.name}"`) : ""
   if (isASManaged(record?.id)) {
     username += " 🤖";
@@ -300,12 +305,33 @@ const UserBooleanInput = props => {
 const UserPasswordInput = props => {
   const record = useRecordContext();
   let asManagedUserIsSelected = false;
+
+  // Get form context to update field value
+  const form = useFormContext();
   if (record) {
     asManagedUserIsSelected = isASManaged(record.id);
   }
 
+  const generatePassword = () => {
+    const password = generateRandomPassword();
+    if (record) {
+      form.setValue("password", password, { shouldDirty: true });
+    }
+  };
+
   return (
-      <PasswordInput {...props} helperText="resources.users.helper.modify_managed_user_error" disabled={asManagedUserIsSelected} />
+    <>
+      <PasswordInput {...props} helperText="resources.users.helper.modify_managed_user_error"
+        {...(asManagedUserIsSelected ? { disabled: true } : {})}
+       />
+       <Button
+        variant="outlined"
+        label="Generate Password"
+        onClick={generatePassword}
+        sx={{ marginBottom: "10px" }}
+        disabled={asManagedUserIsSelected}
+      />
+    </>
   );
 };
 
@@ -313,7 +339,11 @@ export const UserEdit = (props: EditProps) => {
   const translate = useTranslate();
 
   return (
-    <Edit {...props} title={<UserTitle />} actions={<UserEditActions />} mutationMode="pessimistic">
+    <Edit {...props} title={<UserTitle />} actions={<UserEditActions />} mutationMode="pessimistic" queryOptions={{
+      meta: {
+        include: ["features"] // Tell your dataProvider to include features
+      }
+    }}>
       <TabbedForm toolbar={<UserEditToolbar />}>
         <FormTab label={translate("resources.users.name", { smart_count: 1 })} icon={<PersonPinIcon />}>
           <AvatarField source="avatar_src" sx={{ height: "120px", width: "120px" }} />
@@ -447,6 +477,14 @@ export const UserEdit = (props: EditProps) => {
             </Datagrid>
           </ReferenceManyField>
         </FormTab>
+
+        <FormTab label="synapseadmin.users.tabs.experimental" icon={<ScienceIcon />} path="experimental">
+          <ExperimentalFeaturesList />
+        </FormTab>
+
+        <FormTab label="synapseadmin.users.tabs.limits" icon={<LockClockIcon />} path="limits">
+          <UserRateLimits />
+        </FormTab>
       </TabbedForm>
     </Edit>
   );

src/synapse/authProvider.test.ts

@@ -30,7 +30,7 @@ describe("authProvider", () => {
       });
 
       expect(ret).toEqual({redirectTo: "/"});
-      expect(fetch).toBeCalledWith("http://example.com/_matrix/client/r0/login", {
+      expect(fetch).toHaveBeenCalledWith("http://example.com/_matrix/client/v3/login", {
         body: '{"device_id":null,"initial_device_display_name":"Synapse Admin","type":"m.login.password","identifier":{"type":"m.id.user","user":"@user:example.com"},"password":"secret"}',
         headers: new Headers({
           Accept: "application/json",
@@ -61,7 +61,7 @@ describe("authProvider", () => {
     });
 
     expect(ret).toEqual({redirectTo: "/"});
-    expect(fetch).toHaveBeenCalledWith("https://example.com/_matrix/client/r0/login", {
+    expect(fetch).toHaveBeenCalledWith("https://example.com/_matrix/client/v3/login", {
       body: '{"device_id":null,"initial_device_display_name":"Synapse Admin","type":"m.login.token","token":"login_token"}',
       headers: new Headers({
         Accept: "application/json",
@@ -83,7 +83,7 @@ describe("authProvider", () => {
 
       await authProvider.logout(null);
 
-      expect(fetch).toBeCalledWith("example.com/_matrix/client/r0/logout", {
+      expect(fetch).toHaveBeenCalledWith("example.com/_matrix/client/v3/logout", {
         headers: new Headers({
           Accept: "application/json",
           Authorization: "Bearer foo",
@@ -123,7 +123,9 @@ describe("authProvider", () => {
 
   describe("getPermissions", () => {
     it("should do nothing", async () => {
-      await expect(authProvider.getPermissions(null)).resolves.toBeUndefined();
+      if (authProvider.getPermissions) {
+        await expect(authProvider.getPermissions(null)).resolves.toBeUndefined();
+      }
     });
   });
 });

src/synapse/authProvider.ts

@@ -1,7 +1,9 @@
-import { AuthProvider, HttpError, Options, fetchUtils, useTranslate } from "react-admin";
+import { AuthProvider, HttpError, Options, fetchUtils } from "react-admin";
 
 import storage from "../storage";
 import { MatrixError, displayError } from "../components/error";
+import { fetchAuthenticatedMedia } from "../utils/fetchMedia";
+import { ClearConfig } from "../components/config";
 
 const authProvider: AuthProvider = {
   // called when the user attempts to log in
@@ -57,7 +59,7 @@ const authProvider: AuthProvider = {
     storage.setItem("base_url", base_url);
 
     const decoded_base_url = window.decodeURIComponent(base_url);
-    let login_api_url = decoded_base_url + (accessToken ? "/_matrix/client/v3/account/whoami" : "/_matrix/client/r0/login");
+    let login_api_url = decoded_base_url + (accessToken ? "/_matrix/client/v3/account/whoami" : "/_matrix/client/v3/login");
 
     let response;
 
@@ -74,7 +76,7 @@ const authProvider: AuthProvider = {
 
       response = await fetchUtils.fetchJson(login_api_url, options);
       const json = response.json;
-      storage.setItem("home_server", accessToken ? base_url : json.home_server);
+      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);
@@ -95,11 +97,48 @@ 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");
+
+    if (typeof access_token !== "string" || typeof user_id !== "string" || typeof base_url !== "string") {
+      return Promise.reject();
+    }
+
+    const options: Options = {
+      headers: new Headers({
+        Accept: "application/json",
+        Authorization: `Bearer ${access_token}`,
+      }),
+    };
+
+    const whoami_api_url = base_url + `/_matrix/client/v3/profile/${user_id}`;
+
+    try {
+      let avatar_url = "";
+      const response = await fetchUtils.fetchJson(whoami_api_url, options);
+      if (response.json.avatar_url) {
+        const mediaresp = await fetchAuthenticatedMedia(response.json.avatar_url, "thumbnail");
+        const blob = await mediaresp.blob();
+        avatar_url = URL.createObjectURL(blob);
+      }
+
+      return Promise.resolve({
+        id: user_id,
+        fullName: response.json.displayname,
+        avatar: avatar_url,
+      });
+    } catch (err) {
+      console.log("Error getting identity", err);
+      return Promise.reject();
+    }
+  },
   // called when the user clicks on the logout button
   logout: async () => {
     console.log("logout");
 
-    const logout_api_url = storage.getItem("base_url") + "/_matrix/client/r0/logout";
+    const logout_api_url = storage.getItem("base_url") + "/_matrix/client/v3/logout";
     const access_token = storage.getItem("access_token");
 
     const options: Options = {
@@ -116,8 +155,7 @@ const authProvider: AuthProvider = {
       } catch (err) {
         console.log("Error logging out", err);
       } finally {
-        storage.removeItem("access_token");
-        storage.removeItem("login_type");
+        ClearConfig();
       }
     }
   },

src/synapse/dataProvider.ts

@@ -248,9 +248,23 @@ export interface UploadMediaResult {
   content_uri: string;
 }
 
+export interface ExperimentalFeaturesModel {
+  features: {
+    [key: string]: boolean;
+  };
+}
+
+export interface RateLimitsModel {
+  messages_per_second?: number;
+  burst_count?: number;
+}
+
 export interface SynapseDataProvider extends DataProvider {
   deleteMedia: (params: DeleteMediaParams) => Promise<DeleteMediaResult>;
   uploadMedia: (params: UploadMediaParams) => Promise<UploadMediaResult>;
+  updateFeatures: (id: Identifier, features: ExperimentalFeaturesModel) => Promise<void>;
+  getRateLimits: (id: Identifier) => Promise<RateLimitsModel>;
+  setRateLimits: (id: Identifier, rateLimits: RateLimitsModel) => Promise<void>;
 }
 
 const resourceMap = {
@@ -575,13 +589,28 @@ const baseDataProvider: SynapseDataProvider = {
 
   getMany: async (resource, params) => {
     console.log("getMany " + resource);
-    const homeserver = storage.getItem("base_url");
-    if (!homeserver || !(resource in resourceMap)) throw Error("Homerserver not set");
+    const base_url = storage.getItem("base_url");
+    const homeserver = storage.getItem("home_server");
+    if (!base_url || !(resource in resourceMap)) throw Error("base_url not set");
 
     const res = resourceMap[resource];
 
-    const endpoint_url = homeserver + res.path;
-    const responses = await Promise.all(params.ids.map(id => jsonClient(`${endpoint_url}/${encodeURIComponent(id)}`)));
+    const endpoint_url = base_url + res.path;
+    const responses = await Promise.all(params.ids.map(id => {
+      // edge case: when user is external / federated, homeserver will return error, as querying external users via
+      // /_synapse/admin/v2/users is not allowed.
+      // That leads to an issue when a user is referenced (e.g., in room state datagrid) - the user cell is just empty.
+      // To avoid that, we fake the response with one specific field (name) which is used in the datagrid.
+      if (homeserver && resource === "users") {
+        if (!(<string>id).endsWith(homeserver)) {
+          const json = {
+              name: id,
+          };
+          return Promise.resolve({ json });
+        }
+      }
+      return jsonClient(`${endpoint_url}/${encodeURIComponent(id)}`);
+    }));
     return {
       data: responses.map(({ json }) => res.map(json)),
       total: responses.length,
@@ -783,6 +812,28 @@ const baseDataProvider: SynapseDataProvider = {
     });
     return json as UploadMediaResult;
   },
+  getFeatures: async (id: Identifier) => {
+    const base_url = storage.getItem("base_url");
+    const endpoint_url = `${base_url}/_synapse/admin/v1/experimental_features/${encodeURIComponent(returnMXID(id))}`;
+    const { json } = await jsonClient(endpoint_url);
+    return json.features as ExperimentalFeaturesModel;
+  },
+  updateFeatures: async (id: Identifier, features: ExperimentalFeaturesModel) => {
+    const base_url = storage.getItem("base_url");
+    const endpoint_url = `${base_url}/_synapse/admin/v1/experimental_features/${encodeURIComponent(returnMXID(id))}`;
+    await jsonClient(endpoint_url, { method: "PUT", body: JSON.stringify({ features }) });
+  },
+  getRateLimits: async (id: Identifier) => {
+    const base_url = storage.getItem("base_url");
+    const endpoint_url = `${base_url}/_synapse/admin/v1/users/${encodeURIComponent(returnMXID(id))}/override_ratelimit`;
+    const { json } = await jsonClient(endpoint_url);
+    return json as RateLimitsModel;
+  },
+  setRateLimits: async (id: Identifier, rateLimits: RateLimitsModel) => {
+    const base_url = storage.getItem("base_url");
+    const endpoint_url = `${base_url}/_synapse/admin/v1/users/${encodeURIComponent(returnMXID(id))}/override_ratelimit`;
+    await jsonClient(endpoint_url, { method: "POST", body: JSON.stringify(rateLimits) });
+  },
 };
 
 const dataProvider = withLifecycleCallbacks(baseDataProvider, [
@@ -791,6 +842,12 @@ const dataProvider = withLifecycleCallbacks(baseDataProvider, [
     beforeUpdate: async (params: UpdateParams<any>, dataProvider: DataProvider) => {
       const avatarFile = params.data.avatar_file?.rawFile;
       const avatarErase = params.data.avatar_erase;
+      const rates = params.data.rates;
+
+      if (rates) {
+        await dataProvider.setRateLimits(params.id, rates);
+        delete params.data.rates;
+      }
 
       if (avatarErase) {
         params.data.avatar_url = "";

src/synapse/synapse.ts

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

vite.config.ts

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