wrap MakeAdmin button with ReferenceField in user's rooms table, fixes #321

Broken upgrade (now fixed)

.dockerignore

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

Dockerfile.build

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

README.md

@@ -108,6 +108,8 @@ The following changes are already implemented:
 * 📞 [Support E.164-based Matrix IDs (MSC4009)](https://github.com/etkecc/synapse-admin/pull/214)
 * 🛑 [Add support for Account Suspension (MSC3823)](https://github.com/etkecc/synapse-admin/pull/195)
 * 🗑️ [Add "Purge Remote Media" button](https://github.com/etkecc/synapse-admin/pull/237)
+* [Respect base url (`BASE_PATH` / `vite build --base`) when loading `config.json`](https://github.com/etkecc/synapse-admin/pull/274)
+* [Add Users' Account Data tab](https://github.com/etkecc/synapse-admin/pull/276)
 
 #### exclusive for [etke.cc](https://etke.cc) customers
 
@@ -122,7 +124,7 @@ The following list contains such features - they are only available for [etke.cc
 `just run-dev` to start the development stack (depending on your system speed, you may want to re-run this command if
    user creation fails)
 
-This command initializes the development environment (local Synapse server and Postgres DB),
+This command initializes the development environment (local Synapse server, Element Web client app, and Postgres DB),
 and launches the app in a dev mode at `http://localhost:5173`
 
 After that open [http://localhost:5173](http://localhost:5173?username=admin&password=admin&server=http://localhost:8008) in your browser,
@@ -132,6 +134,8 @@ login using the following credentials:
 * Password: admin
 * Homeserver URL: http://localhost:8008
 
+Element Web runs on http://localhost:8080
+
 ### Support
 
 If you have any questions or need help, feel free to join the [community room](https://matrix.to/#/#synapse-admin:etke.cc) or create an issue on GitHub.
@@ -257,6 +261,7 @@ You have three options:
       hostname: synapse-admin
       build:
         context: https://github.com/etkecc/synapse-admin.git
+        dockerfile: Dockerfile.build
         args:
           - BUILDKIT_CONTEXT_KEEP_GIT_DIR=1
         #   - NODE_OPTIONS="--max_old_space_size=1024"
@@ -285,7 +290,7 @@ Example for Traefik:
 ```yml
 services:
   traefik:
-    image: traefik:mimolette
+    image: traefik:v3
     restart: unless-stopped
     ports:
       - 80:80
@@ -298,11 +303,12 @@ services:
     restart: unless-stopped
     labels:
       - "traefik.enable=true"
-      - "traefik.http.routers.synapse-admin.rule=Host(`example.com`)&&PathPrefix(`/admin`)"
-      - "traefik.http.routers.synapse-admin.middlewares=admin,admin_path"
-      - "traefik.http.middlewares.admin.redirectregex.regex=^(.*)/admin/?"
-      - "traefik.http.middlewares.admin.redirectregex.replacement=$${1}/admin/"
-      - "traefik.http.middlewares.admin_path.stripprefix.prefixes=/admin"
+      - "traefik.http.routers.admin.rule=Host(`example.com`) && PathPrefix(`/admin`)"
+      - "traefik.http.services.admin.loadbalancer.server.port=80"
+      - "traefik.http.middlewares.admin-slashless-redirect.redirectregex.regex=(/admin)$$"
+      - "traefik.http.middlewares.admin-slashless-redirect.redirectregex.replacement=$${1}/"
+      - "traefik.http.middlewares.admin-strip-prefix.stripprefix.prefixes=/admin"
+      - "traefik.http.routers.admin.middlewares=admin-slashless-redirect,admin-strip-prefix"
 ```
 
 ## Development

docker-compose-dev.yml

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

docker-compose.yml

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

jest.config.ts

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

justfile

@@ -16,6 +16,8 @@ run-dev:
     @docker-compose -f docker-compose-dev.yml up -d postgres
     @echo "Starting Synapse..."
     @docker-compose -f docker-compose-dev.yml up -d synapse
+    @echo "Starting Element Web..."
+    @docker-compose -f docker-compose-dev.yml up -d element
     @echo "Ensure admin user is registered..."
     @docker-compose -f docker-compose-dev.yml exec synapse register_new_matrix_user --admin -u admin -p admin -c /config/homeserver.yaml http://localhost:8008 || true
     @echo "Starting the app..."

package.json

@@ -11,24 +11,24 @@
     "url": "https://github.com/etkecc/synapse-admin"
   },
   "devDependencies": {
-    "@eslint/js": "^9.17.0",
+    "@eslint/js": "^9.19.0",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
-    "@types/lodash": "^4.17.13",
-    "@types/node": "^22.10.2",
+    "@types/lodash": "^4.17.14",
+    "@types/node": "^22.10.10",
     "@types/papaparse": "^5.3.15",
     "@types/react": "^18.3.12",
-    "@typescript-eslint/eslint-plugin": "^8.18.0",
-    "@typescript-eslint/parser": "^8.18.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.2",
+    "@typescript-eslint/parser": "^8.19.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint": "^9.19.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-unused-imports": "^4.1.4",
     "eslint-plugin-yaml": "^1.0.3",
     "jest": "^29.7.0",
@@ -38,9 +38,9 @@
     "react-test-renderer": "^18.3.1",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.18.0",
-    "vite": "^6.0.3",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.21.0",
+    "vite": "^6.0.11",
     "vite-plugin-version-mark": "^0.1.4"
   },
   "dependencies": {
@@ -48,27 +48,27 @@
     "@emotion/styled": "^11.14.0",
     "@haleos/ra-language-german": "^1.0.0",
     "@haxqer/ra-language-chinese": "^4.16.2",
-    "@mui/icons-material": "^6.2.0",
-    "@mui/material": "^6.2.0",
-    "@mui/utils": "^5.16.8",
-    "@tanstack/react-query": "^5.62.7",
+    "@mui/icons-material": "^6.3.1",
+    "@mui/material": "^6.4.0",
+    "@mui/utils": "^5.16.14",
+    "@tanstack/react-query": "^5.64.2",
     "history": "^5.3.0",
+    "jest-fixed-jsdom": "^0.0.9",
     "lodash": "^4.17.21",
-    "papaparse": "^5.4.1",
-    "ra-core": "^5.4.1",
-    "ra-i18n-polyglot": "^5.3.4",
-    "ra-language-english": "^5.3.4",
+    "papaparse": "^5.5.1",
+    "ra-core": "^5.4.4",
+    "ra-i18n-polyglot": "^5.4.4",
+    "ra-language-english": "^5.4.4",
     "ra-language-farsi": "^5.1.0",
-    "ra-language-french": "^5.4.2",
+    "ra-language-french": "^5.5.2",
     "ra-language-italian": "^3.13.1",
     "ra-language-russian": "^4.14.2",
     "react": "^18.3.1",
-    "react-admin": "^5.4.2",
+    "react-admin": "^5.5.2",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.54.1",
+    "react-hook-form": "^7.54.2",
     "react-is": "^18.3.1",
-    "react-router": "^6.26.2",
-    "react-router-dom": "^6.28.0"
+    "ts-jest-mock-import-meta": "^1.2.1"
   },
   "scripts": {
     "start": "vite serve",

src/App.test.tsx

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

src/components/UserAccountData.tsx

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

src/components/media.tsx

@@ -35,6 +35,7 @@ import { useMutation } from "@tanstack/react-query";
 import { dateParser } from "../utils/date";
 import { DeleteMediaParams, SynapseDataProvider } from "../synapse/dataProvider";
 import { fetchAuthenticatedMedia } from "../utils/fetchMedia";
+import decodeURLComponent from "../utils/decodeURLComponent";
 
 const DeleteMediaDialog = ({ open, onClose, onSubmit }) => {
   const translate = useTranslate();
@@ -481,7 +482,7 @@ export const MediaIDField = ({ source }) => {
 
   let uploadName = mediaID;
   if (get(record, "upload_name")) {
-    uploadName = decodeURIComponent(get(record, "upload_name")?.toString());
+    uploadName = decodeURLComponent(get(record, "upload_name")?.toString());
   }
 
   let mxcURL = mediaID;
@@ -504,7 +505,10 @@ export const ReportMediaContent = ({ source }) => {
     return null;
   }
 
-  const uploadName = decodeURIComponent(get(record, "event_json.content.body")?.toString());
+  let uploadName = "";
+  if (get(record, "event_json.content.body")) {
+    uploadName = decodeURLComponent(get(record, "event_json.content.body")?.toString());
+  }
 
   return <ViewMediaButton mxcURL={mxcURL} label={mxcURL} uploadName={uploadName} mimetype={record.media_type}/>;
 };

src/i18n/de.ts

@@ -15,6 +15,7 @@ const fixedGermanMessages = {
     action: {
       ...formalGermanMessages.ra.action,
       update_application: "Anwendung aktualisieren",
+      select_all_button: "Alle auswählen",
     },
     page: {
       ...formalGermanMessages.ra.page,
@@ -28,6 +29,7 @@ const fixedGermanMessages = {
         "Sie haben nicht die erforderlichen Berechtigungen um auf diese Seite zuzugreifen.",
       authentication_error:
         "Der Authentifizierungsserver hat einen Fehler zurückgegeben und Ihre Anmeldedaten konnten nicht überprüft werden.",
+      select_all_limit_reached: "Es gibt zu viele Elemente, um sie alle auszuwählen. Es wurden nur die ersten %{max} Elemente ausgewählt.",
     },
   },
 }
@@ -55,7 +57,7 @@ const de: SynapseTranslationMessages = {
     },
     users: {
       invalid_user_id: "Lokaler Anteil der Matrix Benutzer-ID ohne Homeserver.",
-      tabs: { sso: "SSO", experimental: "Experimentell", limits: "Rate Limits" },
+      tabs: { sso: "SSO", experimental: "Experimentell", limits: "Rate Limits", account_data: "Kontodaten" },
     },
     rooms: {
       details: "Raumdetails",
@@ -229,6 +231,11 @@ const de: SynapseTranslationMessages = {
         messages_per_second_text: "Die Anzahl der Aktionen, die in einer Sekunde durchgeführt werden können.",
         burst_count: "Burst-Anzahl",
         burst_count_text: "Die Anzahl der Aktionen, die vor der Begrenzung durchgeführt werden können.",
+      },
+      account_data: {
+        title: "Kontodaten",
+        global: "Globale",
+        rooms: "Räume",
       }
     },
     rooms: {

src/i18n/en.ts

@@ -29,6 +29,7 @@ const en: SynapseTranslationMessages = {
         sso: "SSO",
         experimental: "Experimental",
         limits: "Rate Limits",
+        account_data: "Account Data",
       },
     },
     rooms: {
@@ -202,6 +203,11 @@ const en: SynapseTranslationMessages = {
         messages_per_second_text: "The number of actions that can be performed in a second.",
         burst_count: "Burst count",
         burst_count_text: "How many actions that can be performed before being limited.",
+      },
+      account_data: {
+        title: "Account Data",
+        global: "Global",
+        rooms: "Rooms",
       }
     },
     rooms: {

src/i18n/fa.ts

@@ -24,7 +24,7 @@ const fa: SynapseTranslationMessages = {
     },
     users: {
       invalid_user_id: "بخش محلی یک شناسه کاربری ماتریکس بدون سرور خانگی.",
-      tabs: { sso: "SSO", experimental: "تجربی", limits: "محدودیت ها" },
+      tabs: { sso: "SSO", experimental: "تجربی", limits: "محدودیت ها", account_data: "داده های کاربر" },
     },
     rooms: {
       tabs: {
@@ -195,6 +195,11 @@ const fa: SynapseTranslationMessages = {
         messages_per_second_text: "تعداد عملیاتی که می تواند در یک ثانیه انجام شود.",
         burst_count: "تعداد پیچیدگی",
         burst_count_text: "تعداد عملیاتی که می تواند قبل از محدودیت انجام شود.",
+      },
+      account_data: {
+        title: "داده های کاربر",
+        global: "عمومی",
+        rooms: "اتاق ها",
       }
     },
     rooms: {

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", experimental: "Expérimental", limits: "Limites" },
+      tabs: { sso: "Authentification unique", experimental: "Expérimental", limits: "Limites", account_data: "Données du compte" },
     },
     rooms: {
       tabs: {
@@ -197,6 +197,11 @@ const fr: SynapseTranslationMessages = {
         messages_per_second_text: "Le nombre d'actions que l'utilisateur peut effectuer par seconde.",
         burst_count: "Compteur de pics",
         burst_count_text: "Le nombre d'actions que l'utilisateur peut effectuer avant d'être limité.",
+      },
+      account_data: {
+        title: "Données du compte",
+        global: "Globales",
+        rooms: "Salons",
       }
     },
     rooms: {

src/i18n/index.d.ts

@@ -22,7 +22,7 @@ interface SynapseTranslationMessages extends TranslationMessages {
     };
     users: {
       invalid_user_id: string;
-      tabs: { sso: string; experimental: string; limits: string; };
+      tabs: { sso: string; experimental: string; limits: string; account_data: string; };
     };
     rooms: {
       details?: string; // TODO: fa, fr, it, zh
@@ -195,6 +195,11 @@ interface SynapseTranslationMessages extends TranslationMessages {
         burst_count: string;
         burst_count_text: string;
       };
+      account_data: {
+        title: string;
+        global: string;
+        rooms: string;
+      }
     };
     rooms: {
       name: string;

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", experimental: "Sperimentale", limits: "Limiti" },
+      tabs: { sso: "SSO", experimental: "Sperimentale", limits: "Limiti", account_data: "Dati del profilo" },
     },
     rooms: {
       tabs: {
@@ -195,6 +195,11 @@ const it: SynapseTranslationMessages = {
         messages_per_second_text: "Il numero di azioni che l'utente può eseguire al secondo.",
         burst_count: "Burst-conteggio",
         burst_count_text: "Il numero di azioni che l'utente può eseguire prima di essere limitato.",
+      },
+      account_data: {
+        title: "Dati del profilo",
+        global: "Globale",
+        rooms: "Stanza",
       }
     },
     rooms: {

src/i18n/ru.ts

@@ -11,6 +11,10 @@ const fixedRussianMessages = {
       no_filtered_results: "Нет результатов",
       clear_filters: "Все фильтры сбросить",
     },
+    action: {
+      ...russianMessages.ra.action,
+      select_all_button: "Выбрать все",
+    },
     page: {
       ...russianMessages.ra.page,
       empty: "Пусто",
@@ -23,6 +27,7 @@ const fixedRussianMessages = {
         "У вас нет прав доступа к этой странице.",
       authentication_error:
         "Сервер аутентификации вернул ошибку и не смог проверить ваши учетные данные.",
+      select_all_limit_reached: "Слишком много элементов для выбора. Были выбраны только первые %{max} элементов.",
     },
   },
 }
@@ -50,7 +55,7 @@ const ru: SynapseTranslationMessages = {
     },
     users: {
       invalid_user_id: "Локальная часть ID пользователя Matrix без адреса домашнего сервера.",
-      tabs: { sso: "SSO", experimental: "Экспериментальные", limits: "Ограничения" },
+      tabs: { sso: "SSO", experimental: "Экспериментальные", limits: "Ограничения", account_data: "Данные пользователя" },
     },
     rooms: {
       details: "Данные комнаты",
@@ -232,6 +237,11 @@ const ru: SynapseTranslationMessages = {
         messages_per_second_text: "Количество действий, которые могут быть выполнены в секунду.",
         burst_count: "Burst-счётчик",
         burst_count_text: "Количество действий, которые могут быть выполнены до ограничения.",
+      },
+      account_data: {
+        title: "Данные пользователя",
+        global: "Глобальные",
+        rooms: "Комнаты",
       }
     },
     rooms: {

src/i18n/zh.ts

@@ -13,7 +13,8 @@ const fixedChineseMessages = {
     },
     action: {
       ...chineseMessages.ra.action,
-      update_application: "Anwendung aktualisieren",
+      update_application: "更新应用",
+      select_all_button: "全部选择",
     },
     page: {
       ...chineseMessages.ra.page,
@@ -26,6 +27,7 @@ const fixedChineseMessages = {
         "您没有访问此页面的权限。",
       authentication_error:
         "身份验证服务器返回错误，无法验证您的凭据。",
+      select_all_limit_reached: "选择的元素太多。只选择了前 %{max} 个元素。",
     },
   },
 }
@@ -52,7 +54,7 @@ const zh: SynapseTranslationMessages = {
     },
     users: {
       invalid_user_id: "必须要是一个有效的 Matrix 用户 ID ，例如 @user_id:homeserver",
-      tabs: { sso: "SSO", experimental: "实验性", limits: "限制" },
+      tabs: { sso: "SSO", experimental: "实验性", limits: "限制", account_data: "账户数据" },
     },
     rooms: {
       tabs: {
@@ -221,6 +223,11 @@ const zh: SynapseTranslationMessages = {
         messages_per_second_text: "每秒可以执行的操作数。",
         burst_count: "Burst-计数",
         burst_count_text: "在限制之前可以执行的操作数。",
+      },
+      account_data: {
+        title: "账户数据",
+        global: "全局",
+        rooms: "房间",
       }
     },
     rooms: {

src/pages/LoginPage.test.tsx

@@ -2,6 +2,7 @@ import polyglotI18nProvider from "ra-i18n-polyglot";
 
 import { render, screen } from "@testing-library/react";
 import { AdminContext } from "react-admin";
+import { BrowserRouter } from "react-router-dom";
 
 import LoginPage from "./LoginPage";
 import { AppContext } from "../Context";
@@ -14,9 +15,11 @@ describe("LoginForm", () => {
   it("renders with no restriction to homeserver", async () => {
     await act(async () => {
       render(
+        <BrowserRouter>
           <AdminContext i18nProvider={i18nProvider}>
             <LoginPage />
           </AdminContext>
+        </BrowserRouter>
       );
     });
 
@@ -33,6 +36,7 @@ describe("LoginForm", () => {
 
   it("renders with single restricted homeserver", () => {
     render(
+      <BrowserRouter>
         <AppContext.Provider
           value={{ restrictBaseUrl: "https://matrix.example.com", asManagedUsers: [], menu: [] }}
         >
@@ -40,6 +44,7 @@ describe("LoginForm", () => {
           <LoginPage />
           </AdminContext>
         </AppContext.Provider>
+      </BrowserRouter>
     );
 
     screen.getByText(englishMessages.synapseadmin.auth.welcome);
@@ -63,7 +68,9 @@ describe("LoginForm", () => {
         }}
       >
         <AdminContext i18nProvider={i18nProvider}>
+          <BrowserRouter>
             <LoginPage />
+          </BrowserRouter>
         </AdminContext>
       </AppContext.Provider>
     );

src/pages/LoginPage.tsx

@@ -47,7 +47,7 @@ const LoginPage = () => {
   const translate = useTranslate();
   const base_url = allowSingleBaseUrl ? restrictBaseUrl : localStorage.getItem("base_url");
   const [ssoBaseUrl, setSSOBaseUrl] = useState("");
-  const loginToken = /\?loginToken=([a-zA-Z0-9_-]+)/.exec(window.location.href);
+  const loginToken = new URLSearchParams(window.location.search).get("loginToken")
   const [loginMethod, setLoginMethod] = useState<LoginMethod>("credentials");
 
   useEffect(() => {
@@ -55,10 +55,11 @@ const LoginPage = () => {
       return;
     }
 
-    const ssoToken = loginToken[1];
-    console.log("SSO token is", ssoToken);
+    console.log("SSO token is", loginToken);
     // Prevent further requests
-    window.history.replaceState({}, "", window.location.href.replace(loginToken[0], "#").split("#")[0]);
+    const previousUrl = new URL(window.location.toString())
+    previousUrl.searchParams.delete("loginToken")
+    window.history.replaceState({}, "", previousUrl.toString());
     const baseUrl = localStorage.getItem("sso_base_url");
     localStorage.removeItem("sso_base_url");
     if (baseUrl) {
@@ -66,10 +67,10 @@ const LoginPage = () => {
         base_url: baseUrl,
         username: null,
         password: null,
-        loginToken: ssoToken,
+        loginToken,
       };
       console.log("Base URL is:", baseUrl);
-      console.log("SSO Token is:", ssoToken);
+      console.log("SSO Token is:", loginToken);
       console.log("Let's try token login...");
       login(auth).catch(error => {
         alert(

src/resources/users.tsx

@@ -10,6 +10,7 @@ import SettingsInputComponentIcon from "@mui/icons-material/SettingsInputCompone
 import ScienceIcon from "@mui/icons-material/Science";
 import LockClockIcon from '@mui/icons-material/LockClock';
 import ViewListIcon from "@mui/icons-material/ViewList";
+import DocumentScannerIcon from "@mui/icons-material/DocumentScanner";
 import { useEffect, useState } from "react";
 import { Alert, Typography } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
@@ -81,6 +82,8 @@ import ExperimentalFeaturesList from "../components/ExperimentalFeatures";
 import UserRateLimits from "../components/UserRateLimits";
 import { User, UsernameAvailabilityResult } from "../synapse/dataProvider";
 import { MakeAdminBtn } from "./rooms";
+import UserAccountData from "../components/UserAccountData";
+import decodeURLComponent from "../utils/decodeURLComponent";
 
 const choices_medium = [
   { id: "email", name: "resources.users.email" },
@@ -503,7 +506,7 @@ export const UserEdit = (props: EditProps) => {
               <DateField source="last_access_ts" showTime options={DATE_FORMAT} />
               <NumberField source="media_length" />
               <TextField source="media_type" sx={{ display: "block", width: 200, wordBreak: "break-word" }} />
-              <FunctionField source="upload_name" render={record => decodeURIComponent(record.upload_name)} />
+              <FunctionField source="upload_name" render={record => record.upload_name ? decodeURLComponent(record.upload_name) : ""} />
               <TextField source="quarantined_by" />
               <QuarantineMediaButton label="resources.quarantine_media.action.name" />
               <ProtectMediaButton label="resources.users_media.fields.safe_from_quarantine" />
@@ -525,7 +528,9 @@ export const UserEdit = (props: EditProps) => {
                 <ReferenceField reference="rooms" source="id" label="resources.rooms.fields.joined_members" link={false} sortable={false}>
                   <TextField source="joined_members" sortable={false} />
                 </ReferenceField>
+                <ReferenceField reference="rooms" source="id" label={false} link={false} sortable={false}>
                   <MakeAdminBtn />
+                </ReferenceField>
               </Datagrid>
           </ReferenceManyField>
         </FormTab>
@@ -556,6 +561,10 @@ export const UserEdit = (props: EditProps) => {
         <FormTab label="synapseadmin.users.tabs.limits" icon={<LockClockIcon />} path="limits">
           <UserRateLimits />
         </FormTab>
+
+        <FormTab label="synapseadmin.users.tabs.account_data" icon={<DocumentScannerIcon />} path="accountdata">
+         <UserAccountData />
+        </FormTab>
       </TabbedForm>
     </Edit>
   );

src/synapse/authProvider.ts

@@ -3,6 +3,7 @@ import { AuthProvider, HttpError, Options, fetchUtils } from "react-admin";
 import { MatrixError, displayError } from "../utils/error";
 import { fetchAuthenticatedMedia } from "../utils/fetchMedia";
 import { FetchConfig, ClearConfig } from "../utils/config";
+import decodeURLComponent from "../utils/decodeURLComponent";
 
 const authProvider: AuthProvider = {
   // called when the user attempts to log in
@@ -57,7 +58,7 @@ const authProvider: AuthProvider = {
     base_url = base_url.replace(/\/+$/g, "");
     localStorage.setItem("base_url", base_url);
 
-    const decoded_base_url = window.decodeURIComponent(base_url);
+    const decoded_base_url = decodeURLComponent(base_url);
     let login_api_url = decoded_base_url + (accessToken ? "/_matrix/client/v3/account/whoami" : "/_matrix/client/v3/login");
 
     let response;

src/synapse/dataProvider.ts

@@ -260,6 +260,17 @@ export interface RateLimitsModel {
   burst_count?: number;
 }
 
+export interface AccountDataModel {
+  account_data: {
+    global: {
+      [key: string]: object;
+    },
+    rooms: {
+      [key: string]: object;
+    };
+  }
+}
+
 export interface UsernameAvailabilityResult {
   available?: boolean;
   error?: string;
@@ -309,6 +320,7 @@ export interface SynapseDataProvider extends DataProvider {
   updateFeatures: (id: Identifier, features: ExperimentalFeaturesModel) => Promise<void>;
   getRateLimits: (id: Identifier) => Promise<RateLimitsModel>;
   setRateLimits: (id: Identifier, rateLimits: RateLimitsModel) => Promise<void>;
+  getAccountData: (id: Identifier) => Promise<AccountDataModel>;
   checkUsernameAvailability: (username: string) => Promise<UsernameAvailabilityResult>;
   makeRoomAdmin: (room_id: string, user_id: string) => Promise<{ success: boolean; error?: string; errcode?: string }>;
   getServerRunningProcess: (etkeAdminUrl: string) => Promise<ServerProcessResponse>;
@@ -911,6 +923,12 @@ const baseDataProvider: SynapseDataProvider = {
     const { json } = await jsonClient(endpoint_url);
     return json as RateLimitsModel;
   },
+  getAccountData: async (id: Identifier) => {
+    const base_url = localStorage.getItem("base_url");
+    const endpoint_url = `${base_url}/_synapse/admin/v1/users/${encodeURIComponent(returnMXID(id))}/accountdata`;
+    const { json } = await jsonClient(endpoint_url);
+    return json as AccountDataModel;
+  },
   setRateLimits: async (id: Identifier, rateLimits: RateLimitsModel) => {
     const filtered = Object.entries(rateLimits).
       filter(([key, value]) => value !== null && value !== undefined).

src/utils/config.ts

@@ -22,10 +22,16 @@ let config: Config = {
 };
 
 export const FetchConfig = async () => {
+  // load config.json and honor vite base url (import.meta.env.BASE_URL)
+  // if that url doesn't have a trailing slash - add it
+  let configJSONUrl = "config.json"
+  if (import.meta.env.BASE_URL) {
+    configJSONUrl = `${import.meta.env.BASE_URL.replace(/\/?$/, '/')}config.json`;
+  }
   try {
-    const resp = await fetch("config.json");
+    const resp = await fetch(configJSONUrl);
     const configJSON = await resp.json();
-    console.log("Loaded config.json", configJSON);
+    console.log("Loaded", configJSONUrl, configJSON);
     LoadConfig(configJSON);
   } catch (e) {
     console.error(e);

src/utils/decodeURLComponent.ts

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

testdata/element/config.json

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

testdata/element/nginx.conf

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

testdata/synapse/homeserver.yaml

@@ -78,7 +78,7 @@ password_config:
 pid_file: /homeserver.pid
 presence:
   enabled: true
-public_baseurl: http://synapse:8008/
+public_baseurl: http://localhost:8008/
 push:
   include_content: true
 rc_admin_redaction: