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

@@ -107,6 +107,9 @@ The following changes are already implemented:
 * 🎞️ [Add "Media" tab for rooms](https://github.com/etkecc/synapse-admin/pull/196)
 * 📞 [Support E.164-based Matrix IDs (MSC4009)](https://github.com/etkecc/synapse-admin/pull/214)
 * 🛑 [Add support for Account Suspension (MSC3823)](https://github.com/etkecc/synapse-admin/pull/195)
+* 🗑️ [Add "Purge Remote Media" button](https://github.com/etkecc/synapse-admin/pull/237)
+* [Respect base url (`BASE_PATH` / `vite build --base`) when loading `config.json`](https://github.com/etkecc/synapse-admin/pull/274)
+* [Add Users' Account Data tab](https://github.com/etkecc/synapse-admin/pull/276)
 
 #### exclusive for [etke.cc](https://etke.cc) customers
 
@@ -114,13 +117,14 @@ We at [etke.cc](https://etke.cc) attempting to develop everything open-source, b
 The following list contains such features - they are only available for [etke.cc](https://etke.cc) customers.
 
 * 📊 [Server Status indicator and page](https://github.com/etkecc/synapse-admin/pull/182)
+* 📬 [Server Notifications indicator and page](https://github.com/etkecc/synapse-admin/pull/240)
 
 ### Development
 
 `just run-dev` to start the development stack (depending on your system speed, you may want to re-run this command if
    user creation fails)
 
-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,
@@ -130,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.
@@ -255,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"
@@ -283,7 +290,7 @@ Example for Traefik:
 ```yml
 services:
   traefik:
-    image: traefik:mimolette
+    image: traefik:v3
     restart: unless-stopped
     ports:
       - 80:80
@@ -296,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.13.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.1",
+    "@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.14.0",
-    "@typescript-eslint/parser": "^8.15.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.2",
+    "@typescript-eslint/parser": "^8.19.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.16.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,37 +38,37 @@
     "react-test-renderer": "^18.3.1",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
-    "typescript": "^5.7.2",
-    "typescript-eslint": "^8.17.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": {
-    "@emotion/react": "^11.13.5",
-    "@emotion/styled": "^11.13.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@haleos/ra-language-german": "^1.0.0",
     "@haxqer/ra-language-chinese": "^4.16.2",
-    "@mui/icons-material": "^6.1.9",
-    "@mui/material": "^6.1.10",
-    "@mui/utils": "^5.16.8",
-    "@tanstack/react-query": "^5.62.3",
+    "@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.1",
+    "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.1",
+    "react-admin": "^5.5.2",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.54.0",
+    "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/App.tsx

@@ -25,6 +25,7 @@ import authProvider from "./synapse/authProvider";
 import dataProvider from "./synapse/dataProvider";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import ServerStatusPage from "./components/etke.cc/ServerStatusPage";
+import ServerNotificationsPage from "./components/etke.cc/ServerNotificationsPage";
 
 // TODO: Can we use lazy loading together with browser locale?
 const messages = {
@@ -65,6 +66,7 @@ export const App = () => (
       <CustomRoutes>
         <Route path="/import_users" element={<UserImport />} />
         <Route path="/server_status" element={<ServerStatusPage />} />
+        <Route path="/server_notifications" element={<ServerNotificationsPage />} />
       </CustomRoutes>
       <Resource {...users} />
       <Resource {...rooms} />

src/components/AdminLayout.tsx

@@ -5,6 +5,7 @@ import { Icons, DefaultIcon } from "../utils/icons";
 import { MenuItem, GetConfig, ClearConfig } from "../utils/config";
 import Footer from "./Footer";
 import ServerStatusBadge from "./etke.cc/ServerStatusBadge";
+import { ServerNotificationsBadge } from "./etke.cc/ServerNotificationsBadge";
 
 const AdminUserMenu = () => {
   const [open, setOpen] = useState(false);
@@ -50,6 +51,7 @@ const AdminAppBar = () => {
   return (<AppBar userMenu={<AdminUserMenu />}>
     <TitlePortal />
     <ServerStatusBadge />
+    <ServerNotificationsBadge />
     <InspectorButton />
   </AppBar>);
 };

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/etke.cc/README.md

@@ -28,3 +28,15 @@ Server Status page. This page contains the following information:
 * Overall server status (up/updating/has issues)
 * Details about the currently running command (if any)
 * Details about the server's components statuses (up/down with error details and suggested actions) by categories
+
+### Server Notifications icon
+
+![Server Notifications icon](../../../screenshots/etke.cc/server-notifications/badge.webp)
+
+In the application bar the new notifications icon is displayed that shows the number of unread (not removed) notifications
+
+### Server Notifications page
+
+![Server Notifications Page](../../../screenshots/etke.cc/server-notifications/page.webp)
+
+When you click on a notification from the [Server Notifications icon](#server-notifications-icon)'s list in the application bar, you will be redirected to the Server Notifications page. This page contains the full text of all the notifications you have about your server.

src/components/etke.cc/ServerNotificationsBadge.tsx

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

src/components/etke.cc/ServerNotificationsPage.tsx

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

src/components/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();
@@ -124,6 +125,80 @@ export const DeleteMediaButton = (props: ButtonProps) => {
   );
 };
 
+const PurgeRemoteMediaDialog = ({ open, onClose, onSubmit }) => {
+  const translate = useTranslate();
+
+  const PurgeRemoteMediaToolbar = (props: ToolbarProps) => (
+    <Toolbar {...props}>
+      <SaveButton label="purge_remote_media.action.send" icon={<DeleteSweepIcon />} />
+      <Button label="ra.action.cancel" onClick={onClose}>
+        <IconCancel />
+      </Button>
+    </Toolbar>
+  );
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>{translate("purge_remote_media.action.send")}</DialogTitle>
+      <DialogContent>
+        <DialogContentText>{translate("purge_remote_media.helper.send")}</DialogContentText>
+        <SimpleForm toolbar={<PurgeRemoteMediaToolbar />} onSubmit={onSubmit}>
+          <DateTimeInput
+            source="before_ts"
+            label="purge_remote_media.fields.before_ts"
+            defaultValue={0}
+            parse={dateParser}
+          />
+        </SimpleForm>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export const PurgeRemoteMediaButton = (props: ButtonProps) => {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const notify = useNotify();
+  const dataProvider = useDataProvider<SynapseDataProvider>();
+  const { mutate: purgeRemoteMedia, isPending } = useMutation({
+    mutationFn: (values: DeleteMediaParams) => dataProvider.purgeRemoteMedia(values),
+    onSuccess: () => {
+      notify("purge_remote_media.action.send_success");
+      closeDialog();
+    },
+    onError: () => {
+      notify("purge_remote_media.action.send_failure", {
+        type: "error",
+      });
+    },
+  });
+
+  const openDialog = () => setOpen(true);
+  const closeDialog = () => setOpen(false);
+
+  return (
+    <>
+      <Button
+        {...props}
+        label="purge_remote_media.action.send"
+        onClick={openDialog}
+        disabled={isPending}
+        sx={{
+          "&:hover": {
+            // Reset on mouse devices
+            "@media (hover: none)": {
+              backgroundColor: "transparent",
+            },
+          },
+        }}
+      >
+        <DeleteSweepIcon />
+      </Button>
+      <PurgeRemoteMediaDialog open={open} onClose={closeDialog} onSubmit={purgeRemoteMedia} />
+    </>
+  );
+};
+
 export const ProtectMediaButton = (props: ButtonProps) => {
   const record = useRecordContext();
   const translate = useTranslate();
@@ -407,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;
@@ -430,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",
@@ -147,6 +149,20 @@ const de: SynapseTranslationMessages = {
       send: "Diese API löscht die lokalen Medien von der Festplatte des eigenen Servers. Dies umfasst alle lokalen Miniaturbilder und Kopien von Medien. Diese API wirkt sich nicht auf Medien aus, die sich in externen Medien-Repositories befinden.",
     },
   },
+  purge_remote_media: {
+    name: "Externe Medien",
+    fields: {
+      before_ts: "letzter Zugriff vor",
+    },
+    action: {
+      send: "Externe Medien löschen",
+      send_success: "Die Anfrage zum Löschen externer Medien wurde gesendet.",
+      send_failure: "Bei der Anfrage zum Löschen externer Medien ist ein Fehler aufgetreten.",
+    },
+    helper: {
+      send: "Diese API löscht den externen Medien-Cache von der Festplatte Ihres eigenen Servers. Dazu gehören alle lokalen Thumbnails und Kopien heruntergeladener Medien. Diese API beeinflusst nicht die Medien, die in das eigene Medienarchiv des Servers hochgeladen wurden.",
+    },
+  },
   resources: {
     users: {
       name: "Benutzer",
@@ -215,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: {
@@ -120,6 +121,20 @@ const en: SynapseTranslationMessages = {
       send: "This API deletes the local media from the disk of your own server. This includes any local thumbnails and copies of media downloaded. This API will not affect media that has been uploaded to external media repositories.",
     },
   },
+  purge_remote_media: {
+    name: "Remote Media",
+    fields: {
+      before_ts: "last access before",
+    },
+    action: {
+      send: "Purge remote media",
+      send_success: "Purge remote media request has been sent.",
+      send_failure: "An error has occurred with the purge remote media request.",
+    },
+    helper: {
+      send: "This API purges the remote media cache from the disk of your own server. This includes any local thumbnails and copies of media downloaded. This API will not affect media that has been uploaded to the server's own media repository.",
+    },
+  },
   resources: {
     users: {
       name: "User |||| Users",
@@ -188,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: {
@@ -114,6 +114,20 @@ const fa: SynapseTranslationMessages = {
       send: "این API رسانه های محلی را از دیسک سرور خود حذف می کند. این شامل هر تصویر کوچک محلی و کپی از رسانه دانلود شده است. این API بر رسانه‌هایی که در مخازن رسانه خارجی آپلود شده‌اند تأثیری نخواهد گذاشت.",
     },
   },
+  purge_remote_media: {
+    name: "رسانه‌های از راه دور",
+    fields: {
+      before_ts: "آخرین دسترسی قبل از",
+    },
+    action: {
+      send: "پاک کردن رسانه‌های از راه دور",
+      send_success: "درخواست پاک کردن رسانه‌های از راه دور ارسال شد.",
+      send_failure: "درخواست برای پاک کردن رسانه‌های از راه دور با خطا مواجه شد.",
+    },
+    helper: {
+      send: "این API کش رسانه‌های از راه دور را از دیسک سرور شما پاک می‌کند. این شامل هر گونه بندانگشتی محلی و نسخه‌های رسانه‌های دانلود شده می‌شود. این API بر رسانه‌های آپلود شده به مخزن رسانه سرور تأثیری نخواهد داشت.",
+    },
+  },
   resources: {
     users: {
       name: "کاربر |||| کاربران",
@@ -181,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: {
@@ -117,6 +117,20 @@ const fr: SynapseTranslationMessages = {
       send: "Cette API supprime les médias locaux du disque de votre propre serveur. Cela inclut toutes les vignettes locales et les copies des médias téléchargés. Cette API n'affectera pas les médias qui ont été téléversés dans des dépôts de médias externes.",
     },
   },
+  purge_remote_media: {
+    name: "Médias distants",
+    fields: {
+      before_ts: "dernier accès avant",
+    },
+    action: {
+      send: "Purger les médias distants",
+      send_success: "La demande de purge des médias distants a été envoyée.",
+      send_failure: "Une erreur est survenue lors de la demande de purge des médias distants.",
+    },
+    helper: {
+      send: "Cette API purge le cache des médias distants du disque de votre propre serveur. Cela inclut toutes les vignettes locales et les copies des médias téléchargés. Cette API n'affectera pas les médias qui ont été téléchargés dans le dépôt de médias du serveur.",
+    },
+  },
   resources: {
     users: {
       name: "Utilisateur |||| Utilisateurs",
@@ -183,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
@@ -112,6 +112,20 @@ interface SynapseTranslationMessages extends TranslationMessages {
       send: string;
     };
   };
+  purge_remote_media: {
+    name: string;
+    fields: {
+      before_ts: string;
+    };
+    action: {
+      send: string;
+      send_success: string;
+      send_failure: string;
+    };
+    helper: {
+      send: string;
+    };
+  };
   resources: {
     users: {
       name: string;
@@ -181,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: {
@@ -114,6 +114,20 @@ const it: SynapseTranslationMessages = {
       send: "Questa API cancella i media locali dal disco del tuo server. Questo include anche ogni miniatura e copia del media scaricato. Questa API non inciderà sui media che sono stati caricati nei repository esterni.",
     },
   },
+  purge_remote_media: {
+    name: "Media Remoti",
+    fields: {
+      before_ts: "ultimo accesso prima di",
+    },
+    action: {
+      send: "Elimina media remoti",
+      send_success: "La richiesta per eliminare i media remoti è stata inviata.",
+      send_failure: "Si è verificato un errore con la richiesta di eliminazione dei media remoti.",
+    },
+    helper: {
+      send: "Questa API elimina la cache dei media remoti dal disco del tuo server. Questo include qualsiasi miniatura locale e copie di media scaricati. Questa API non influirà sui media che sono stati caricati nel repository multimediale del server.",
+    },
+  },
   resources: {
     users: {
       name: "Utente |||| Utenti",
@@ -181,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: "Данные комнаты",
@@ -150,6 +155,20 @@ const ru: SynapseTranslationMessages = {
       Данный API не затрагивает файлы, загруженные во внешние хранилища.",
     },
   },
+  purge_remote_media: {
+    name: "Внешние медиа",
+    fields: {
+      before_ts: "последний доступ до",
+    },
+    action: {
+      send: "Очистить внешние медиа",
+      send_success: "Запрос на очистку внешних медиа был отправлен.",
+      send_failure: "Произошла ошибка при запросе очистки внешних медиа.",
+    },
+    helper: {
+      send: "Этот API очищает кэш внешних медиа с диска вашего сервера. Это включает любые локальные миниатюры и копии загруженных медиа. Этот API не повлияет на медиа, которые были загружены в собственное медиа-хранилище сервера.",
+    },
+  },
   resources: {
     users: {
       name: "Пользователь |||| Пользователи",
@@ -218,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: {
@@ -142,6 +144,20 @@ const zh: SynapseTranslationMessages = {
       send: "这个API会删除您硬盘上的本地媒体。包含了任何的本地缓存和下载的媒体备份。这个API不会影响上传到外部媒体存储库上的媒体文件。",
     },
   },
+  purge_remote_media: {
+    name: "远程媒体",
+    fields: {
+      before_ts: "最后访问于之前",
+    },
+    action: {
+      send: "清除远程媒体",
+      send_success: "远程媒体清除请求已发送。",
+      send_failure: "发生错误，远程媒体清除请求未成功。",
+    },
+    helper: {
+      send: "此API清除您服务器磁盘上的远程媒体缓存。这包括任何本地缩略图和下载的媒体副本。此API不会影响已经上传到服务器媒体存储库的媒体。",
+    },
+  },
   resources: {
     users: {
       name: "用户",
@@ -207,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(
-        <AdminContext i18nProvider={i18nProvider}>
-          <LoginPage />
-        </AdminContext>
+        <BrowserRouter>
+          <AdminContext i18nProvider={i18nProvider}>
+            <LoginPage />
+          </AdminContext>
+        </BrowserRouter>
       );
     });
 
@@ -33,13 +36,15 @@ describe("LoginForm", () => {
 
   it("renders with single restricted homeserver", () => {
     render(
-      <AppContext.Provider
-        value={{ restrictBaseUrl: "https://matrix.example.com", asManagedUsers: [], menu: [] }}
-      >
+      <BrowserRouter>
+        <AppContext.Provider
+          value={{ restrictBaseUrl: "https://matrix.example.com", asManagedUsers: [], menu: [] }}
+        >
         <AdminContext i18nProvider={i18nProvider}>
           <LoginPage />
-        </AdminContext>
-      </AppContext.Provider>
+          </AdminContext>
+        </AppContext.Provider>
+      </BrowserRouter>
     );
 
     screen.getByText(englishMessages.synapseadmin.auth.welcome);
@@ -56,14 +61,16 @@ describe("LoginForm", () => {
   it("renders with multiple restricted homeservers", async () => {
     render(
       <AppContext.Provider
-        value={{
-          restrictBaseUrl: ["https://matrix.example.com", "https://matrix.example.org"],
-          asManagedUsers: [],
+          value={{
+            restrictBaseUrl: ["https://matrix.example.com", "https://matrix.example.org"],
+            asManagedUsers: [],
           menu: [],
         }}
       >
         <AdminContext i18nProvider={i18nProvider}>
-          <LoginPage />
+          <BrowserRouter>
+            <LoginPage />
+          </BrowserRouter>
         </AdminContext>
       </AppContext.Provider>
     );

src/pages/LoginPage.tsx

@@ -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/user_media_statistics.tsx

@@ -14,13 +14,14 @@ import {
   useListContext,
 } from "react-admin";
 
-import { DeleteMediaButton } from "../components/media";
+import { DeleteMediaButton, PurgeRemoteMediaButton } from "../components/media";
 
 const ListActions = () => {
   const { isLoading, total } = useListContext();
   return (
     <TopToolbar>
       <DeleteMediaButton />
+      <PurgeRemoteMediaButton />
       <ExportButton disabled={isLoading || total === 0} />
     </TopToolbar>
   );

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";
@@ -50,6 +51,7 @@ import {
   SaveButton,
   CreateButton,
   ExportButton,
+  BulkDeleteButton,
   TopToolbar,
   Toolbar,
   NumberField,
@@ -80,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" },
@@ -496,13 +500,13 @@ export const UserEdit = (props: EditProps) => {
             perPage={50}
             sort={{ field: "created_ts", order: "DESC" }}
           >
-            <Datagrid sx={{ width: "100%" }}>
+            <Datagrid sx={{ width: "100%" }} bulkActionButtons={<BulkDeleteButton/>}>
               <MediaIDField source="media_id" />
               <DateField source="created_ts" showTime options={DATE_FORMAT} />
               <DateField source="last_access_ts" showTime options={DATE_FORMAT} />
               <NumberField source="media_length" />
               <TextField source="media_type" sx={{ display: "block", width: 200, wordBreak: "break-word" }} />
-              <FunctionField source="upload_name" render={record => decodeURIComponent(record.upload_name)} />
+              <FunctionField source="upload_name" render={record => record.upload_name ? decodeURLComponent(record.upload_name) : ""} />
               <TextField source="quarantined_by" />
               <QuarantineMediaButton label="resources.quarantine_media.action.name" />
               <ProtectMediaButton label="resources.users_media.fields.safe_from_quarantine" />
@@ -524,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>
@@ -555,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;
@@ -80,11 +81,7 @@ const authProvider: AuthProvider = {
       localStorage.setItem("access_token", accessToken ? accessToken : json.access_token);
       localStorage.setItem("device_id", json.device_id);
       localStorage.setItem("login_type", accessToken ? "accessToken" : "credentials");
-
-      // when doing access token auth, config is not fetched, so we need to do it here
-      if (accessToken) {
-        await FetchConfig();
-      }
+      await FetchConfig();
 
       return Promise.resolve({redirectTo: "/"});
     } catch(err) {

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;
@@ -291,16 +302,31 @@ export interface ServerProcessResponse {
   command?: string;
 }
 
+export interface ServerNotification {
+  event_id: string;
+  output: string;
+  sent_at: string;
+}
+
+export interface ServerNotificationsResponse {
+  success: boolean;
+  notifications: ServerNotification[];
+}
+
 export interface SynapseDataProvider extends DataProvider {
   deleteMedia: (params: DeleteMediaParams) => Promise<DeleteMediaResult>;
+  purgeRemoteMedia: (params: DeleteMediaParams) => Promise<DeleteMediaResult>;
   uploadMedia: (params: UploadMediaParams) => Promise<UploadMediaResult>;
   updateFeatures: (id: Identifier, features: ExperimentalFeaturesModel) => Promise<void>;
   getRateLimits: (id: Identifier) => Promise<RateLimitsModel>;
   setRateLimits: (id: Identifier, rateLimits: RateLimitsModel) => Promise<void>;
+  getAccountData: (id: Identifier) => Promise<AccountDataModel>;
   checkUsernameAvailability: (username: string) => Promise<UsernameAvailabilityResult>;
   makeRoomAdmin: (room_id: string, user_id: string) => Promise<{ success: boolean; error?: string; errcode?: string }>;
   getServerRunningProcess: (etkeAdminUrl: string) => Promise<ServerProcessResponse>;
   getServerStatus: (etkeAdminUrl: string) => Promise<ServerStatusResponse>;
+  getServerNotifications: (etkeAdminUrl: string) => Promise<ServerNotificationsResponse>;
+  deleteServerNotifications: (etkeAdminUrl: string) => Promise<{ success: boolean }>;
 }
 
 const resourceMap = {
@@ -849,6 +875,23 @@ const baseDataProvider: SynapseDataProvider = {
     return json as DeleteMediaResult;
   },
 
+  /**
+   * Purge remote media by date
+   *
+   * @link https://element-hq.github.io/synapse/latest/admin_api/media_admin_api.html#purge-remote-media-api
+   *
+   * @param before_ts Unix timestamp in milliseconds. Files that were last used before this timestamp will be deleted. It is the timestamp of last access, not the timestamp when the file was created.
+   * @returns
+   */
+  purgeRemoteMedia: async ({ before_ts }) => {
+    const endpoint = `/_synapse/admin/v1/purge_media_cache?before_ts=${before_ts}`;
+
+    const base_url = localStorage.getItem("base_url");
+    const endpoint_url = base_url + endpoint;
+    const { json } = await jsonClient(endpoint_url, { method: "POST" });
+    return json as DeleteMediaResult;
+  },
+
   uploadMedia: async ({ file, filename, content_type }: UploadMediaParams) => {
     const base_url = localStorage.getItem("base_url");
     const uploadMediaURL = `${base_url}/_matrix/media/v3/upload`;
@@ -880,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).
@@ -977,6 +1026,60 @@ const baseDataProvider: SynapseDataProvider = {
     }
 
     return { success: false, ok: false, host: "", results: [] };
+  },
+  getServerNotifications: async (serverNotificationsUrl: string): Promise<ServerNotificationsResponse> => {
+    try {
+      const response = await fetch(`${serverNotificationsUrl}/notifications`, {
+        headers: {
+          "Authorization": `Bearer ${localStorage.getItem("access_token")}`
+        }
+      });
+      if (!response.ok) {
+        console.error(`Error getting server notifications: ${response.status} ${response.statusText}`);
+        return { success: false, notifications: [] };
+      }
+
+      const status = response.status;
+      if (status === 204) {
+        return { success: true, notifications: [] };
+      }
+
+      if (status === 200) {
+        const json = await response.json();
+        const result = { success: true, notifications: json } as ServerNotificationsResponse;
+        return result;
+      }
+
+      return { success: true, notifications: [] };
+    } catch (error) {
+      console.error("Error getting server notifications", error);
+    }
+
+    return { success: false, notifications: [] };
+  },
+  deleteServerNotifications: async (serverNotificationsUrl: string) => {
+    try {
+      const response = await fetch(`${serverNotificationsUrl}/notifications`, {
+        headers: {
+          "Authorization": `Bearer ${localStorage.getItem("access_token")}`
+        },
+        method: "DELETE"
+      });
+      if (!response.ok) {
+        console.error(`Error deleting server notifications: ${response.status} ${response.statusText}`);
+        return { success: false };
+      }
+
+      const status = response.status;
+      if (status === 204) {
+        const result = { success: true }
+        return result;
+      }
+    } catch (error) {
+      console.error("Error deleting server notifications", error);
+    }
+
+    return { success: false };
   }
 };
 

src/utils/config.ts

@@ -22,32 +22,43 @@ 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);
   }
 
+  let protocol = "https";
+  const baseURL = localStorage.getItem("base_url");
+  if (baseURL && baseURL.startsWith("http://")) {
+    protocol = "http";
+  }
+
   // if home_server is set, try to load https://home_server/.well-known/matrix/client
   const homeserver = localStorage.getItem("home_server");
   if (homeserver) {
     try {
-      const resp = await fetch(`https://${homeserver}/.well-known/matrix/client`);
-        const configWK = await resp.json();
+      const resp = await fetch(`${protocol}://${homeserver}/.well-known/matrix/client`);
+      const configWK = await resp.json();
       if (!configWK[WellKnownKey]) {
-        console.log(`Loaded https://${homeserver}.well-known/matrix/client, but it doesn't contain ${WellKnownKey} key, skipping`, configWK);
+        console.log(`Loaded ${protocol}://${homeserver}.well-known/matrix/client, but it doesn't contain ${WellKnownKey} key, skipping`, configWK);
       } else {
-        console.log(`Loaded https://${homeserver}.well-known/matrix/client`, configWK);
+        console.log(`Loaded ${protocol}://${homeserver}.well-known/matrix/client`, configWK);
         LoadConfig(configWK[WellKnownKey]);
       }
     } catch (e) {
-      console.log(`https://${homeserver}/.well-known/matrix/client not found, skipping`, e);
+      console.log(`${protocol}://${homeserver}/.well-known/matrix/client not found, skipping`, e);
     }
   }
-
 }
 
 // load config from context

src/utils/decodeURLComponent.ts

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

src/utils/mxid.ts

@@ -16,7 +16,11 @@ export const isMXID = (id: string | Identifier): boolean => mxidPattern.test(id
  * @returns Whether the user is managed by an application service
  */
 export const isASManaged = (id: string | Identifier): boolean => {
-  return GetConfig().asManagedUsers.some(regex => regex.test(id as string));
+  const managedUsers = GetConfig().asManagedUsers;
+  if (!managedUsers) {
+    return false;
+  }
+  return managedUsers.some(regex => regex.test(id as string));
 };
 
 /**
@@ -38,14 +42,20 @@ export function generateRandomMXID(): string {
  * @returns full MXID as string
  */
 export function returnMXID(input: string | Identifier): string {
-  const homeserver = localStorage.getItem("home_server");
+  const inputStr = input as string;
+  const homeserver = localStorage.getItem("home_server") || "";
+
+  // when homeserver is not (just) a domain name, but a domain:port or even an IPv6 address
+  if (homeserver != "" && inputStr.endsWith(homeserver) && inputStr.startsWith("@")) {
+    return inputStr; // Already a valid MXID
+  }
 
   // Check if the input already looks like a valid MXID (i.e., starts with "@" and contains ":")
   if (isMXID(input)) {
-    return input as string; // Already a valid MXID
+    return inputStr; // Already a valid MXID
   }
 
   // If input is not a valid MXID, assume it's a localpart and construct the MXID
-  const localpart = typeof input === 'string' && input.startsWith('@') ? input.slice(1) : input;
+  const localpart = typeof input === 'string' && inputStr.startsWith('@') ? inputStr.slice(1) : inputStr;
   return `@${localpart}:${homeserver}`;
 }

testdata/element/config.json

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

testdata/element/nginx.conf

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

testdata/synapse/homeserver.yaml

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