update README

remove CI hack to include version into manifest.json (now generated on each build automatically)
Generate extended manifest.json on build
2024-10-30 18:49:32 +02:00 · 2024-10-30 18:00:05 +02:00 · 2024-10-30 17:58:33 +02:00 · 2024-10-28 10:55:00 +02:00 · 2024-10-28 10:54:46 +02:00 · 2024-10-28 10:54:27 +02:00
39 changed files with 1731 additions and 1340 deletions
--- a/.github/dependabot.yml
+++ b/.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
--- a/.github/workflows/workflow.yml
+++ b/.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:
--- a/README.md
+++ b/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)

@@ -7,12 +19,13 @@ This project is built using [react-admin](https://marmelab.com/react-admin/).
 <!-- vim-markdown-toc GFM -->

 * [Fork differences](#fork-differences)
-  * [Available via CDN](#available-via-cdn)
+  * [Availability](#availability)
  * [Changes](#changes)
  * [Development](#development)
 * [Configuration](#configuration)
  * [Restricting available homeserver](#restricting-available-homeserver)
  * [Protecting appservice managed users](#protecting-appservice-managed-users)
+  * [Adding custom menu items](#adding-custom-menu-items)
  * [Providing support URL](#providing-support-url)
 * [Usage](#usage)
  * [Supported Synapse](#supported-synapse)
@@ -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 -->
@@ -33,9 +46,11 @@ With [Awesome-Technologies/synapse-admin](https://github.com/Awesome-Technologie
 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.

-### Available via CDN
+### Availability

-On [admin.etke.cc](https://admin.etke.cc) you can find the latest version of this fork.
+* As a core/default component on [etke.cc](https://etke.cc/?utm_source=github&utm_medium=readme&utm_campaign=synapse-admin)
+* Via CDN on [admin.etke.cc](https://admin.etke.cc)
+* As a component in [Matrix-Docker-Ansible-Deploy Playbook](https://github.com/spantaleev/matrix-docker-ansible-deploy/blob/master/docs/configuring-playbook-synapse-admin.md)

 ### Changes

@@ -51,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)
@@ -63,6 +79,13 @@ The following changes are already implemented:
 * [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)

 _the list will be updated as new changes are added_

@@ -125,9 +148,29 @@ Example for [mautrix-telegram](https://github.com/mautrix/telegram)
 }
 ```

+### 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"
+    }
+  ]
+}
+```
+
+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
 {
@@ -214,7 +257,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.

@@ -222,7 +265,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:

--- a/index.html
+++ b/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>
--- a/8
+++ b/8
@@ -25,11 +25,15 @@ run-dev:
 stop-dev:
    @docker-compose -f docker-compose-dev.yml stop

-
+# register a user in the dev stack
 register-user localpart password *admin:
 	docker-compose exec synapse register_new_matrix_user {{ if admin == "1" {"--admin"} else {"--no-admin"} }} -u {{ localpart }} -p {{ password }} -c /config/homeserver.yaml http://localhost:8008

-
+# run yarn {fix,lint,test} commands
+test:
+    @-yarn run fix
+    @-yarn run lint
+    @-yarn run test

 # run the app in a production mode
 run-prod: build
--- a/package.json
+++ b/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.2",
    "@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.12",
+    "@types/node": "^22.8.1",
+    "@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.11.0",
+    "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.5",
+    "@mui/utils": "^5.16.6",
+    "@tanstack/react-query": "^5.59.16",
    "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.1",
+    "ra-i18n-polyglot": "^5.3.0",
+    "ra-language-english": "^5.3.1",
    "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"
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/images/logo.webp
+++ b/public/images/logo.webp
--- a/public/manifest.json
+++ b/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"
-}
--- a/src/App.test.tsx
+++ b/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();

--- a/src/App.tsx
+++ b/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>
 );

--- a/src/AppContext.tsx
+++ b/src/AppContext.tsx
@@ -4,6 +4,13 @@ interface AppContextType {
  restrictBaseUrl: string | string[];
  asManagedUsers: string[];
  supportURL: string;
+  menu: MenuItem[];
+}
+
+interface MenuItem {
+  label: string;
+  icon: string;
+  url: string;
 }

 export const AppContext = createContext({});
--- a/src/components/AdminLayout.tsx
+++ b/src/components/AdminLayout.tsx
@@ -1,26 +1,103 @@
-import { Layout, Menu } 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 { useEffect, useState, Suspense } from "react";
+import { Icons, DefaultIcon } from "./icons";

-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;
+const AdminUserMenu = () => {
+  const [open, setOpen] = useState(false);
+  const logout = useLogout();
+  const checkLoginType = (ev: React.MouseEvent<HTMLDivElement>) => {
+    const loginType: LoginMethod = (localStorage.getItem("login_type") || "credentials") as LoginMethod;
+    if (loginType === "accessToken") {
+      ev.stopPropagation();
+      setOpen(true);
    }
+  };
+
+  const handleConfirm = () => {
+    setOpen(false);
+    logout();
+  };
+
+  const handleDialogClose = () => {
+    setOpen(false);
+    localStorage.removeItem("access_token");
+    localStorage.removeItem("login_type");
+    window.location.reload();
+  };
+
+  return (
+    <UserMenu>
+      <div onClickCapture={checkLoginType}>
+        <Logout />
+      </div>
+      <Confirm
+        isOpen={open}
+        title="synapseadmin.auth.logout_acces_token_dialog.title"
+        content="synapseadmin.auth.logout_acces_token_dialog.content"
+        onConfirm={handleConfirm}
+        onClose={handleDialogClose}
+        confirm="synapseadmin.auth.logout_acces_token_dialog.confirm"
+        cancel="synapseadmin.auth.logout_acces_token_dialog.cancel"
+      />
+    </UserMenu>
+  );
 };

+const AdminAppBar = () => {
+  return (<AppBar userMenu={<AdminUserMenu />}>
+    <TitlePortal />
+    <InspectorButton />
+  </AppBar>);
+};

-const AdminMenu = () => (
-    <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.Item to={supportLink()} target="_blank" primaryText="Contact support" leftIcon={<LiveHelpIcon />} />
+      {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 menu={AdminMenu}>
+  <Layout appBar={AdminAppBar} menu={AdminMenu} sx={{
+      ['& .RaLayout-appFrame']: {
+        minHeight: '90vh',
+        height: '90vh',
+      },
+      ['& .RaLayout-content']: {
+        marginBottom: '3rem',
+      },
+    }}>
    {children}
  </Layout>
 );
--- a/src/components/AvatarField.tsx
+++ b/src/components/AvatarField.tsx
@@ -1,12 +1,11 @@
 import { get } from "lodash";
 import { Avatar, AvatarProps } from "@mui/material";
-import { useRecordContext } from "react-admin";
+import { FieldProps, useRecordContext } from "react-admin";
 import { useState, useEffect, useCallback } from "react";
 import { fetchAuthenticatedMedia } from "../utils/fetchMedia";

-const AvatarField = ({ source, ...rest }: AvatarProps & { source: string, label?: string }) => {
+const AvatarField = ({ source, ...rest }: AvatarProps & FieldProps) => {
  const { alt, classes, sizes, sx, variant } = rest;
-
  const record = useRecordContext(rest);
  const mxcURL = get(record, source)?.toString();

--- a/src/components/Footer.tsx
+++ b/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">
+      <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;
--- a/src/components/ImportFeature.tsx
+++ b/src/components/ImportFeature.tsx
@@ -121,11 +121,8 @@ const FilePicker = () => {

  const verifyCsv = ({ data, meta, errors }: ParseResult<ImportLine>, { setValues, setStats, setError }) => {
    /* First, verify the presence of required fields */
-    const missingFields = expectedFields.filter(eF => {
-      const result = meta.fields?.find(mF => eF === mF);
-      if (result === undefined) { return eF; } // missing field
-      return undefined; // field found
-    });
+    meta.fields = meta.fields?.map(f => f.trim().toLowerCase());
+    const missingFields = expectedFields.filter(eF => !meta.fields?.find(mF => eF === mF));

    if (missingFields.length > 0) {
      setError(translate("import_users.error.required_field", { field: missingFields[0] }));
@@ -151,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++;
@@ -177,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,
--- a/src/components/LoginFormBox.tsx
+++ b/src/components/LoginFormBox.tsx
@@ -0,0 +1,58 @@
+import { styled } from "@mui/material/styles";
+import { Box } from "@mui/material";
+
+const LoginFormBox = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  minHeight: "calc(100vh - 1rem)",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  background: "url(./images/floating-cogs.svg)",
+  backgroundColor: "#f9f9f9",
+  backgroundRepeat: "no-repeat",
+  backgroundSize: "cover",
+
+  [`& .card`]: {
+    width: "30rem",
+    marginTop: "6rem",
+    marginBottom: "6rem",
+  },
+  [`& .avatar`]: {
+    margin: "1rem",
+    display: "flex",
+    justifyContent: "center",
+  },
+  [`& .icon`]: {
+    backgroundColor: theme.palette.grey[500],
+  },
+  [`& .hint`]: {
+    marginTop: "1em",
+    marginBottom: "1em",
+    display: "flex",
+    justifyContent: "center",
+    color: theme.palette.grey[600],
+  },
+  [`& .form`]: {
+    padding: "0 1rem 1rem 1rem",
+  },
+  [`& .select`]: {
+    marginBottom: "2rem",
+  },
+  [`& .actions`]: {
+    padding: "0 1rem 1rem 1rem",
+  },
+  [`& .serverVersion`]: {
+    color: theme.palette.grey[500],
+    fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+    marginLeft: "0.5rem",
+  },
+  [`& .matrixVersions`]: {
+    color: theme.palette.grey[500],
+    fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+    fontSize: "0.8rem",
+    marginBottom: "1rem",
+    marginLeft: "0.5rem",
+  },
+}));
+
+export default LoginFormBox;
--- a/src/components/icons.ts
+++ b/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;
--- a/src/i18n/de.ts
+++ b/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",
@@ -22,6 +44,14 @@ const de: SynapseTranslationMessages = {
      protocol_error: "Die URL muss mit 'http://' oder 'https://' beginnen",
      url_error: "Keine gültige Matrix Server URL",
      sso_sign_in: "Anmeldung mit SSO",
+      credentials: "Anmeldedaten",
+      access_token: "Zugriffstoken",
+      logout_acces_token_dialog: {
+        title: "Sie verwenden ein bestehendes Matrix-Zugriffstoken.",
+        content: "Möchten Sie diese Sitzung (die anderswo, z.B. in einem Matrix-Client, verwendet werden könnte) beenden oder sich nur vom Admin-Panel abmelden?",
+        confirm: "Sitzung beenden",
+        cancel: "Nur vom Admin-Panel abmelden",
+      },
    },
    users: {
      invalid_user_id: "Lokaler Anteil der Matrix Benutzer-ID ohne Homeserver.",
--- a/src/i18n/en.ts
+++ b/src/i18n/en.ts
@@ -14,6 +14,14 @@ const en: SynapseTranslationMessages = {
      protocol_error: "URL has to start with 'http://' or 'https://'",
      url_error: "Not a valid Matrix server URL",
      sso_sign_in: "Sign in with SSO",
+      credentials: "Credentials",
+      access_token: "Access token",
+      logout_acces_token_dialog: {
+        title: "You are using an existing Matrix access token.",
+        content: "Do you want to destroy this session (that could be used elsewhere, e.g. in a Matrix client) or just logout from the admin panel?",
+        confirm: "Destroy session",
+        cancel: "Just logout from admin panel",
+      },
    },
    users: {
      invalid_user_id: "Localpart of a Matrix user-id without homeserver.",
--- a/src/i18n/fa.ts
+++ b/src/i18n/fa.ts
@@ -13,6 +13,14 @@ const fa: SynapseTranslationMessages = {
      protocol_error: "URL باید با 'http://' یا 'https://' شروع شود",
      url_error: "آدرس وارد شده یک سرور معتبر نیست",
      sso_sign_in: "با SSO وارد شوید",
+      credentials: "اعتبارنامه",
+      access_token: "توکن دسترسی",
+      logout_acces_token_dialog: {
+        title: "شما در حال استفاده از یک نشانه دسترسی ماتریکس موجود هستید.",
+        content: "آیا می‌خواهید این جلسه (که می‌تواند در جای دیگر، مانند یک کلاینت ماتریکس استفاده شود) را نابود کنید یا فقط از پنل مدیریت خارج شوید؟",
+        confirm: "نابودی جلسه",
+        cancel: "فقط خروج از پنل مدیریت",
+      },
    },
    users: {
      invalid_user_id: "بخش محلی یک شناسه کاربری ماتریکس بدون سرور خانگی.",
--- a/src/i18n/fr.ts
+++ b/src/i18n/fr.ts
@@ -13,6 +13,14 @@ const fr: SynapseTranslationMessages = {
      protocol_error: "L'URL doit commencer par « http:// » ou « https:// »",
      url_error: "L'URL du serveur Matrix n'est pas valide",
      sso_sign_in: "Se connecter avec l’authentification unique",
+      credentials: "Identifiants",
+      access_token: "Jeton d'accès",
+      logout_acces_token_dialog: {
+        title: "Vous utilisez un jeton d'accès Matrix existant.",
+        content: "Voulez-vous détruire cette session (qui pourrait être utilisée ailleurs, par exemple dans un client Matrix) ou simplement vous déconnecter du panneau d'administration?",
+        confirm: "Détruire la session",
+        cancel: "Se déconnecter simplement du panneau d'administration",
+      },
    },
    users: {
      invalid_user_id: "Partie locale d'un identifiant utilisateur Matrix sans le nom du serveur d’accueil.",
--- a/src/i18n/index.d.ts
+++ b/src/i18n/index.d.ts
@@ -11,6 +11,14 @@ interface SynapseTranslationMessages extends TranslationMessages {
      protocol_error: string;
      url_error: string;
      sso_sign_in: string;
+      credentials: string;
+      access_token: string;
+      logout_acces_token_dialog: {
+        title: string;
+        content: string;
+        confirm: string;
+        cancel: string;
+      };
    };
    users: {
      invalid_user_id: string;
--- a/src/i18n/it.ts
+++ b/src/i18n/it.ts
@@ -13,6 +13,14 @@ const it: SynapseTranslationMessages = {
      protocol_error: "L'URL deve iniziare per 'http://' o 'https://'",
      url_error: "URL del server Matrix non valido",
      sso_sign_in: "Accedi con SSO",
+      credentials: "Credenziali",
+      access_token: "Token di accesso",
+      logout_acces_token_dialog: {
+        title: "Stai utilizzando un token di accesso Matrix esistente.",
+        content: "Vuoi distruggere questa sessione (che potrebbe essere utilizzata altrove, ad esempio in un client Matrix) o semplicemente disconnetterti dal pannello di amministrazione?",
+        confirm: "Distruggi sessione",
+        cancel: "Disconnetti solo dal pannello di amministrazione",
+      },
    },
    users: {
      invalid_user_id: "ID utente non valido su questo homeserver.",
--- a/src/i18n/ru.ts
+++ b/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: "Адрес домашнего сервера",
@@ -22,6 +39,14 @@ const ru: SynapseTranslationMessages = {
      protocol_error: "Адрес должен начинаться с 'http://' или 'https://'",
      url_error: "Неверный адрес сервера Matrix",
      sso_sign_in: "Вход через SSO",
+      credentials: "Учетные данные",
+      access_token: "Токен доступа",
+      logout_acces_token_dialog: {
+        title: "Вы используете существующий токен доступа Matrix.",
+        content: "Вы хотите завершить эту сессию (которая может быть использована в другом месте, например, в клиенте Matrix) или просто выйти из панели администрирования?",
+        confirm: "Завершить сессию",
+        cancel: "Просто выйти из панели администрирования",
+      },
    },
    users: {
      invalid_user_id: "Локальная часть ID пользователя Matrix без адреса домашнего сервера.",
@@ -421,6 +446,6 @@ const ru: SynapseTranslationMessages = {
        },
        helper: { length: "Длина токена, если токен не задан." },
      },
-  },
+},
 };
 export default ru;
--- a/src/i18n/zh.ts
+++ b/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",
@@ -21,6 +41,14 @@ const zh: SynapseTranslationMessages = {
      protocol_error: "URL 需要以'http://'或'https://'作为起始",
      url_error: "不是一个有效的 Matrix 服务器地址",
      sso_sign_in: "使用 SSO 登录",
+      credentials: "凭证",
+      access_token: "访问令牌",
+      logout_acces_token_dialog: {
+        title: "您正在使用现有的 Matrix 访问令牌。",
+        content: "您想销毁此会话（可能在其他地方使用，例如在 Matrix 客户端中）还是仅从管理面板退出？",
+        confirm: "销毁会话",
+        cancel: "仅从管理面板退出",
+      },
    },
    users: {
      invalid_user_id: "必须要是一个有效的 Matrix 用户 ID ，例如 @user_id:homeserver",
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,14 +3,33 @@ import React from "react";
 import { createRoot } from "react-dom/client";

 import App from "./App";
-import { AppContext } from "./AppContext";
+import { AppContext, MenuItem } 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));
-    storage.setItem("support_url", props.supportURL);
+    }
+
+    let menu: MenuItem[] = [];
+    if (props.menu) {
+      menu = props.menu;
+    }
+    if (props.supportURL) {
+      const migratedSupportURL = {
+        label: "Contact support",
+        icon: "SupportAgent",
+        url: props.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));
+    }
+
    return createRoot(document.getElementById("root")).render(
      <React.StrictMode>
        <AppContext.Provider value={props}>
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -1,8 +1,6 @@
 import { useState, useEffect } from "react";

-import LockIcon from "@mui/icons-material/Lock";
-import { Avatar, Box, Button, Card, CardActions, CircularProgress, MenuItem, Select, Typography } from "@mui/material";
-import { styled } from "@mui/material/styles";
+import { Avatar, Box, Button, Card, CardActions, CircularProgress, MenuItem, Select, Tab, Tabs, Typography } from "@mui/material";
 import {
  Form,
  FormDataConsumer,
@@ -17,7 +15,7 @@ import {
  useLocales,
 } from "react-admin";
 import { useFormContext } from "react-hook-form";
-
+import LoginFormBox from "../components/LoginFormBox";
 import { useAppContext } from "../AppContext";
 import {
  getServerVersion,
@@ -29,66 +27,18 @@ import {
 } from "../synapse/synapse";
 import storage from "../storage";

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

 const LoginPage = () => {
  const login = useLogin();
  const notify = useNotify();
  const { restrictBaseUrl } = useAppContext();
  const allowSingleBaseUrl = typeof restrictBaseUrl === "string";
-  const allowMultipleBaseUrls = Array.isArray(restrictBaseUrl);
+  const allowMultipleBaseUrls =
+    Array.isArray(restrictBaseUrl) &&
+    restrictBaseUrl.length > 0 &&
+    restrictBaseUrl[0] !== "" &&
+    restrictBaseUrl[0] !== null;
  const allowAnyBaseUrl = !(allowSingleBaseUrl || allowMultipleBaseUrls);
  const [loading, setLoading] = useState(false);
  const [supportPassAuth, setSupportPassAuth] = useState(true);
@@ -98,8 +48,13 @@ const LoginPage = () => {
  const base_url = allowSingleBaseUrl ? restrictBaseUrl : storage.getItem("base_url");
  const [ssoBaseUrl, setSSOBaseUrl] = useState("");
  const loginToken = /\?loginToken=([a-zA-Z0-9_-]+)/.exec(window.location.href);
+  const [loginMethod, setLoginMethod] = useState<LoginMethod>("credentials");
+
+  useEffect(() => {
+    if (!loginToken) {
+      return;
+    }

-  if (loginToken) {
    const ssoToken = loginToken[1];
    console.log("SSO token is", ssoToken);
    // Prevent further requests
@@ -127,7 +82,7 @@ const LoginPage = () => {
        console.error(error);
      });
    }
-  }
+  }, [loginToken]);

  const validateBaseUrl = value => {
    if (!value.match(/^(http|https):\/\//)) {
@@ -212,6 +167,18 @@ const LoginPage = () => {
    }, [formData.base_url, form]);

    return (
+      <>
+        <Tabs
+          value={loginMethod}
+          onChange={(_, newValue) => setLoginMethod(newValue as LoginMethod)}
+          indicatorColor="primary"
+          textColor="primary"
+          centered
+        >
+          <Tab label={translate("synapseadmin.auth.credentials")} value="credentials" />
+          <Tab label={translate("synapseadmin.auth.access_token")} value="accessToken" />
+        </Tabs>
+        {loginMethod === "credentials" ? (
          <>
            <Box>
              <TextInput
@@ -236,6 +203,18 @@ const LoginPage = () => {
                validate={required()}
              />
            </Box>
+          </>
+        ) : (
+          <Box>
+            <TextInput
+              source="accessToken"
+              label="synapseadmin.auth.access_token"
+              disabled={loading}
+              resettable
+              validate={required()}
+            />
+          </Box>
+        )}
        <Box>
          <TextInput
            source="base_url"
@@ -263,15 +242,13 @@ const LoginPage = () => {

  return (
    <Form defaultValues={{ base_url: base_url }} onSubmit={handleSubmit} mode="onTouched">
-      <FormBox>
+      <LoginFormBox>
        <Card className="card">
          <Box className="avatar">
            {loading ? (
              <CircularProgress size={25} thickness={2} />
            ) : (
-              <Avatar className="icon">
-                <LockIcon />
-              </Avatar>
+              <Avatar sx={{ width: "120px", height: "120px" }} src="./images/logo.webp"/>
            )}
          </Box>
          <Box className="hint">{translate("synapseadmin.auth.welcome")}</Box>
@@ -290,7 +267,7 @@ const LoginPage = () => {
              ))}
            </Select>
            <FormDataConsumer>{formDataProps => <UserData {...formDataProps} />}</FormDataConsumer>
-            <CardActions className="actions">
+            {loginMethod === "credentials" && <CardActions className="actions">
              <Button
                variant="contained"
                type="submit"
@@ -309,10 +286,21 @@ const LoginPage = () => {
              >
                {translate("synapseadmin.auth.sso_sign_in")}
              </Button>
-            </CardActions>
+            </CardActions>}
+            {loginMethod === "accessToken" && <CardActions className="actions">
+              <Button
+                variant="contained"
+                type="submit"
+                color="primary"
+                disabled={loading}
+                fullWidth
+              >
+                {translate("ra.auth.sign_in")}
+              </Button>
+            </CardActions>}
          </Box>
        </Card>
-      </FormBox>
+      </LoginFormBox>
      <Notification />
    </Form>
  );
--- a/src/resources/destinations.tsx
+++ b/src/resources/destinations.tsx
@@ -4,9 +4,11 @@ import AutorenewIcon from "@mui/icons-material/Autorenew";
 import DestinationsIcon from "@mui/icons-material/CloudQueue";
 import FolderSharedIcon from "@mui/icons-material/FolderShared";
 import ViewListIcon from "@mui/icons-material/ViewList";
+import ErrorIcon from '@mui/icons-material/Error';
 import {
  Button,
  Datagrid,
+  DatagridConfigurable,
  DateField,
  List,
  ListProps,
@@ -21,6 +23,7 @@ import {
  Tab,
  TabbedShowLayout,
  TextField,
+  FunctionField,
  TopToolbar,
  useRecordContext,
  useDelete,
@@ -35,13 +38,6 @@ import { get } from "lodash";

 const DestinationPagination = () => <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />;

-const destinationRowSx = (record: RaRecord) => ({
-  backgroundColor: record.retry_last_ts > 0 ? "warning.light" : "primary.contrastText",
-  "& .MuiButtonBase-root": {
-    color: "primary.dark",
-  },
-});
-
 const destinationFilters = [<SearchInput source="destination" alwaysOn />];

 export const DestinationReconnectButton = () => {
@@ -105,7 +101,22 @@ const RetryDateField = (props: DateFieldProps) => {
  return <DateField {...props} />;
 };

+
+const destinationFieldRender = (record: RaRecord) => {
+  if (record.retry_last_ts > 0) {
+    return (
+      <>
+        <ErrorIcon fontSize="inherit" color="error" sx={{verticalAlign: "middle"}}/>
+
+        {record.destination}
+      </>
+    );
+  }
+  return <> {record.destination} </>;
+}
+
 export const DestinationList = (props: ListProps) => {
+  const record = useRecordContext(props);
  return (
    <List
      {...props}
@@ -113,14 +124,14 @@ export const DestinationList = (props: ListProps) => {
      pagination={<DestinationPagination />}
      sort={{ field: "destination", order: "ASC" }}
    >
-      <Datagrid rowSx={destinationRowSx} rowClick={id => `${id}/show/rooms`} bulkActionButtons={false}>
-        <TextField source="destination" />
+      <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>
  );
 };
--- a/src/resources/registration_tokens.tsx
+++ b/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>
 );

--- a/src/resources/reports.tsx
+++ b/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>
 );

--- a/src/resources/rooms.tsx
+++ b/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>
--- a/src/resources/user_media_statistics.tsx
+++ b/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>
 );

--- a/src/resources/users.tsx
+++ b/src/resources/users.tsx
@@ -15,6 +15,7 @@ import {
  ArrayField,
  Button,
  Datagrid,
+  DatagridConfigurable,
  DateField,
  Create,
  CreateProps,
@@ -51,8 +52,8 @@ import {
  NumberField,
  useListContext,
  useNotify,
-  ToolbarClasses,
  Identifier,
+  ToolbarClasses,
  RaRecord,
  ImageInput,
  ImageField,
@@ -147,10 +148,6 @@ const UserBulkActionButtons = () => {
  );
 };

-const usersRowClick = (id: Identifier, resource: string, record: RaRecord): string => {
-  return `/users/${id}`;
-};
-
 export const UserList = (props: ListProps) => (
  <List
    {...props}
@@ -160,8 +157,11 @@ export const UserList = (props: ListProps) => (
    actions={<UserListActions />}
    pagination={<UserPagination />}
  >
-    <Datagrid rowClick={usersRowClick} bulkActionButtons={<UserBulkActionButtons />}>
-      <AvatarField source="avatar_src" sx={{ height: "40px", width: "40px" }} />
+    <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" />
@@ -170,7 +170,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>
 );

@@ -212,9 +212,7 @@ const UserEditActions = () => {
 export const UserCreate = (props: CreateProps) => (
  <Create
    {...props}
-    redirect={(resource, id, data) => {
-      return `users/${id}`;
-    }}
+    redirect={(resource: string | undefined, id: Identifier | undefined) => `${resource}/${id}`}
  >
    <SimpleForm>
      <TextInput source="id" autoComplete="off" validate={validateUser} />
--- a/src/synapse/authProvider.test.ts
+++ b/src/synapse/authProvider.test.ts
@@ -23,14 +23,14 @@ describe("authProvider", () => {
        })
      );

-      const ret: undefined = await authProvider.login({
+      const ret = await authProvider.login({
        base_url: "http://example.com",
        username: "@user:example.com",
        password: "secret",
      });

-      expect(ret).toBe(undefined);
-      expect(fetch).toBeCalledWith("http://example.com/_matrix/client/r0/login", {
+      expect(ret).toEqual({redirectTo: "/"});
+      expect(fetch).toHaveBeenCalledWith("http://example.com/_matrix/client/v3/login", {
        body: '{"device_id":null,"initial_device_display_name":"Synapse Admin","type":"m.login.password","identifier":{"type":"m.id.user","user":"@user:example.com"},"password":"secret"}',
        headers: new Headers({
          Accept: "application/json",
@@ -55,13 +55,13 @@ describe("authProvider", () => {
      })
    );

-    const ret: undefined = await authProvider.login({
+    const ret = await authProvider.login({
      base_url: "https://example.com/",
      loginToken: "login_token",
    });

-    expect(ret).toBe(undefined);
-    expect(fetch).toHaveBeenCalledWith("https://example.com/_matrix/client/r0/login", {
+    expect(ret).toEqual({redirectTo: "/"});
+    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 () => {
+      if (authProvider.getPermissions) {
        await expect(authProvider.getPermissions(null)).resolves.toBeUndefined();
+      }
    });
  });
 });
--- a/src/synapse/authProvider.ts
+++ b/src/synapse/authProvider.ts
@@ -1,7 +1,8 @@
-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";

 const authProvider: AuthProvider = {
  // called when the user attempts to log in
@@ -10,14 +11,16 @@ const authProvider: AuthProvider = {
    username,
    password,
    loginToken,
+    accessToken,
  }: {
    base_url: string;
    username: string;
    password: string;
    loginToken: string;
+    accessToken: string;
  }) => {
    console.log("login ");
-    const options: Options = {
+    let options: Options = {
      method: "POST",
      body: JSON.stringify(
        Object.assign(
@@ -55,11 +58,30 @@ const authProvider: AuthProvider = {
    storage.setItem("base_url", base_url);

    const decoded_base_url = window.decodeURIComponent(base_url);
-    const login_api_url = decoded_base_url + "/_matrix/client/r0/login";
+    let login_api_url = decoded_base_url + (accessToken ? "/_matrix/client/v3/account/whoami" : "/_matrix/client/v3/login");

    let response;
+
    try {
+      if (accessToken) {
+        // this a login with an already obtained access token, let's just validate it
+        options = {
+          headers: new Headers({
+            Accept: 'application/json',
+            Authorization: `Bearer ${accessToken}`,
+          }),
+        };
+      }
+
      response = await fetchUtils.fetchJson(login_api_url, options);
+      const json = response.json;
+      storage.setItem("home_server", accessToken ? json.user_id.split(":")[1] : json.home_server);
+      storage.setItem("user_id", json.user_id);
+      storage.setItem("access_token", accessToken ? accessToken : json.access_token);
+      storage.setItem("device_id", json.device_id);
+      storage.setItem("login_type", accessToken ? "accessToken" : "credentials");
+
+      return Promise.resolve({redirectTo: "/"});
    } catch(err) {
      const error = err as HttpError;
      const errorStatus = error.status;
@@ -73,18 +95,49 @@ const authProvider: AuthProvider = {
        )
      );
    }
+  },
+  getIdentity: async () => {
+    const access_token = storage.getItem("access_token");
+    const user_id = storage.getItem("user_id");
+    const base_url = storage.getItem("base_url");

-    const json = response.json;
-    storage.setItem("home_server", json.home_server);
-    storage.setItem("user_id", json.user_id);
-    storage.setItem("access_token", json.access_token);
-    storage.setItem("device_id", json.device_id);
+    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 = {
@@ -102,6 +155,7 @@ const authProvider: AuthProvider = {
        console.log("Error logging out", err);
      } finally {
        storage.removeItem("access_token");
+        storage.removeItem("login_type");
      }
    }
  },
--- a/src/synapse/dataProvider.ts
+++ b/src/synapse/dataProvider.ts
@@ -575,13 +575,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,
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,10 +8,35 @@ export default defineConfig({
  plugins: [
    react(),
    vitePluginVersionMark({
+      name: "Synapse Admin",
      command: "git describe --tags || git rev-parse --short HEAD",
-      ifMeta: true,
-      ifLog: true,
+      ifMeta: false,
+      ifLog: false,
      ifGlobal: true,
+      outputFile: (version) => ({
+        path: "manifest.json",
+        content: JSON.stringify({
+          name: "Synapse Admin",
+          version: version,
+          description: "Synapse Admin is an admin console for synapse Matrix homeserver with additional features.",
+          categories: ["productivity", "utilities"],
+          orientation: "landscape",
+          icons: [{
+            src: "favicon.ico",
+            sizes: "32x32",
+            type: "image/x-icon"
+          },{
+            src: "images/logo.webp",
+            sizes: "512x512",
+            type: "image/webp",
+            purpose: "any maskable"
+          }],
+          start_url: ".",
+          display: "standalone",
+          theme_color: "#000000",
+          background_color: "#ffffff"
+        }),
+      }),
    }),
  ],
 });
--- a/yarn.lock
+++ b/yarn.lock