Add missing translations

Change-Id: Ie46554bcd10dde771c03e7d3fd0c3639f904429d

.dockerignore

@@ -0,0 +1,10 @@
+# Exclude a bunch of stuff which can make the build context a larger than it needs to be
+tests/
+build/
+lib/
+node_modules/
+electron_app/
+karma-reports/
+.idea/
+.tmp/
+config.json*

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "avoid",
+}

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - 13
+
+cache: yarn

Dockerfile

@@ -0,0 +1,17 @@
+# Builder
+FROM node:current as builder
+
+WORKDIR /src
+
+COPY . /src
+RUN yarn --network-timeout=100000 install
+RUN yarn build
+
+
+# App
+FROM nginx:alpine
+
+COPY --from=builder /src/build /app
+
+RUN rm -rf /usr/share/nginx/html \
+ && ln -s /app /usr/share/nginx/html

LICENSE

@@ -0,0 +1,177 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS

README.md

@@ -0,0 +1,48 @@
+[![Build Status](https://travis-ci.org/Awesome-Technologies/synapse-admin.svg?branch=master)](https://travis-ci.org/Awesome-Technologies/synapse-admin)
+
+# Synapse admin ui
+
+This project is built using [react-admin](https://marmelab.com/react-admin/).
+
+It needs at least Synapse v1.23.0 for all functions to work as expected!
+
+You get your server version with the request `/_synapse/admin/v1/server_version`.
+See also [Synapse version API](https://github.com/matrix-org/synapse/blob/develop/docs/admin_api/version_api.rst).
+
+After entering the URL on the login page of synapse-admin the server version appears below the input field.
+
+You need access to the following endpoints:
+
+- `/_matrix`
+- `/_synapse/admin`
+
+See also [Synapse administration endpoints](https://github.com/matrix-org/synapse/blob/develop/docs/reverse_proxy.md#synapse-administration-endpoints)
+
+## Step-By-Step install:
+
+You have two options:
+
+1.  Download the source code from github and run using nodejs
+2.  Run the Docker container
+
+Steps for 1):
+
+- make sure you have installed the following: git, yarn, nodejs
+- download the source code: `git clone https://github.com/Awesome-Technologies/synapse-admin.git`
+- change into downloaded directory: `cd synapse-admin`
+- download dependencies: `yarn install`
+- start web server: `yarn start`
+
+Steps for 2):
+
+- run the Docker container: `docker run -p 8080:80 awesometechnologies/synapse-admin`
+- browse to http://localhost:8080
+
+## Screenshots
+
+![Screenshots](./screenshots.jpg)
+
+## Development
+
+- Use `yarn test` to run all style, lint and unit tests
+- Use `yarn fix` to fix the coding style

asset-manifest.json

@@ -1,10 +0,0 @@
-{
-  "files": {
-    "main.js": "./static/js/main.fc285a6d.js",
-    "index.html": "./index.html",
-    "main.fc285a6d.js.map": "./static/js/main.fc285a6d.js.map"
-  },
-  "entrypoints": [
-    "static/js/main.fc285a6d.js"
-  ]
-}

index.html

@@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Synapse-Admin"/><link rel="manifest" href="./manifest.json"/><title>Synapse-Admin</title><script defer="defer" src="./static/js/main.fc285a6d.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><footer style="position:relative;z-index:2;height:2em;margin-top:-2em;line-height:2em;background-color:#eee;border:.5px solid #ddd"><a id="copyright" href="https://github.com/Awesome-Technologies/synapse-admin" style="margin-left:1em;color:#888;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:100;font-size:.8em;text-decoration:none">Synapse-Admin <b>()</b> by Awesome Technologies Innovationslabor GmbH</a></footer></body></html>

package.json

@@ -0,0 +1,61 @@
+{
+  "name": "synapse-admin",
+  "version": "0.7.0",
+  "description": "Admin GUI for the Matrix.org server Synapse",
+  "author": "Awesome Technologies Innovationslabor GmbH",
+  "license": "Apache-2.0",
+  "homepage": ".",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Awesome-Technologies/synapse-admin"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.1.1",
+    "@testing-library/react": "^10.0.2",
+    "@testing-library/user-event": "^12.0.11",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-plugin-prettier": "^3.1.2",
+    "jest-fetch-mock": "^3.0.3",
+    "prettier": "^2.0.0"
+  },
+  "dependencies": {
+    "papaparse": "^5.2.0",
+    "prop-types": "^15.7.2",
+    "ra-language-german": "^2.1.2",
+    "react": "^16.13.1",
+    "react-admin": "^3.10.0",
+    "react-dom": "^16.14.0",
+    "react-scripts": "^3.4.4"
+  },
+  "scripts": {
+    "start": "REACT_APP_VERSION=$(git describe --tags) react-scripts start",
+    "build": "REACT_APP_VERSION=$(git describe --tags) react-scripts build",
+    "fix:other": "yarn prettier --write",
+    "fix:code": "yarn test:lint --fix",
+    "fix": "yarn fix:code && yarn fix:other",
+    "prettier": "prettier \"**/*.{js,jsx,json,md,scss,yaml,yml}\"",
+    "test:code": "react-scripts test",
+    "test:lint": "eslint --ignore-path .gitignore --ext .js,.jsx .",
+    "test:style": "yarn prettier --list-different",
+    "test": "yarn test:style && yarn test:lint && yarn test:code",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/data/example.csv

@@ -1,3 +1,3 @@
 id,displayname,password,is_guest,admin,deactivated
-testuser22,Jane Doe,secretpassword,false,true,false
+@testuser22:example.org,Jane Doe,secretpassword,false,true,false
 ,John Doe,,false,false,false

public/index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Synapse-Admin"
+    />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Synapse-Admin</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+    <footer
+      style="position: relative; z-index: 2; height: 2em; margin-top: -2em; line-height: 2em; background-color: #eee; border: 0.5px solid #ddd">
+      <a id="copyright" href="https://github.com/Awesome-Technologies/synapse-admin"
+        style="margin-left: 1em; color: #888; font-family: Roboto, Helvetica, Arial, sans-serif; font-weight: 100; font-size: 0.8em; text-decoration: none;">
+        Synapse-Admin <b>(%REACT_APP_VERSION%)</b> by Awesome Technologies Innovationslabor GmbH
+      </a>
+    </footer>
+  </body>
+</html>

public/robots.txt

@@ -1,3 +1,2 @@
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
-Disallow: /

src/App.js

@@ -0,0 +1,70 @@
+import React from "react";
+import { Admin, Resource, resolveBrowserLocale } from "react-admin";
+import polyglotI18nProvider from "ra-i18n-polyglot";
+import authProvider from "./synapse/authProvider";
+import dataProvider from "./synapse/dataProvider";
+import { UserList, UserCreate, UserEdit } from "./components/users";
+import { RoomList, RoomShow } from "./components/rooms";
+import { ReportList, ReportShow } from "./components/EventReports";
+import LoginPage from "./components/LoginPage";
+import UserIcon from "@material-ui/icons/Group";
+import EqualizerIcon from "@material-ui/icons/Equalizer";
+import { UserMediaStatsList } from "./components/statistics";
+import RoomIcon from "@material-ui/icons/ViewList";
+import ReportIcon from "@material-ui/icons/Warning";
+import { ImportFeature } from "./components/ImportFeature";
+import { Route } from "react-router-dom";
+import germanMessages from "./i18n/de";
+import englishMessages from "./i18n/en";
+
+// TODO: Can we use lazy loading together with browser locale?
+const messages = {
+  de: germanMessages,
+  en: englishMessages,
+};
+const i18nProvider = polyglotI18nProvider(
+  locale => (messages[locale] ? messages[locale] : messages.en),
+  resolveBrowserLocale()
+);
+
+const App = () => (
+  <Admin
+    disableTelemetry
+    loginPage={LoginPage}
+    authProvider={authProvider}
+    dataProvider={dataProvider}
+    i18nProvider={i18nProvider}
+    customRoutes={[
+      <Route key="userImport" path="/import_users" component={ImportFeature} />,
+    ]}
+  >
+    <Resource
+      name="users"
+      list={UserList}
+      create={UserCreate}
+      edit={UserEdit}
+      icon={UserIcon}
+    />
+    <Resource name="rooms" list={RoomList} show={RoomShow} icon={RoomIcon} />
+    <Resource
+      name="user_media_statistics"
+      list={UserMediaStatsList}
+      icon={EqualizerIcon}
+    />
+    <Resource
+      name="reports"
+      list={ReportList}
+      show={ReportShow}
+      icon={ReportIcon}
+    />
+    <Resource name="connections" />
+    <Resource name="devices" />
+    <Resource name="room_members" />
+    <Resource name="users_media" />
+    <Resource name="joined_rooms" />
+    <Resource name="pushers" />
+    <Resource name="servernotices" />
+  </Admin>
+);
+
+export default App;

src/App.test.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { TestContext } from "react-admin";
+import { shallow } from "enzyme";
+import App from "./App";
+
+describe("App", () => {
+  it("renders", () => {
+    shallow(
+      <TestContext>
+        <App />
+      </TestContext>
+    );
+  });
+});

src/components/EventReports.js

@@ -0,0 +1,135 @@
+import React from "react";
+import {
+  Datagrid,
+  DateField,
+  List,
+  NumberField,
+  Pagination,
+  ReferenceField,
+  Show,
+  Tab,
+  TabbedShowLayout,
+  TextField,
+  useTranslate,
+} from "react-admin";
+import PageviewIcon from "@material-ui/icons/Pageview";
+import ViewListIcon from "@material-ui/icons/ViewList";
+
+const ReportPagination = props => (
+  <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
+);
+
+export const ReportShow = props => {
+  const translate = useTranslate();
+  return (
+    <Show {...props}>
+      <TabbedShowLayout>
+        <Tab
+          label={translate("synapseadmin.reports.tabs.basic", {
+            smart_count: 1,
+          })}
+          icon={<ViewListIcon />}
+        >
+          <DateField
+            source="received_ts"
+            showTime
+            options={{
+              year: "numeric",
+              month: "2-digit",
+              day: "2-digit",
+              hour: "2-digit",
+              minute: "2-digit",
+              second: "2-digit",
+            }}
+            sortable={true}
+          />
+          <ReferenceField source="user_id" reference="users">
+            <TextField source="id" />
+          </ReferenceField>
+          <NumberField source="score" />
+          <TextField source="reason" />
+          <TextField source="name" />
+          <TextField
+            source="canonical_alias"
+            label="resources.rooms.fields.canonical_alias"
+          />
+          <ReferenceField
+            source="room_id"
+            reference="rooms"
+            link="show"
+            label="resources.rooms.fields.room_id"
+          >
+            <TextField source="id" />
+          </ReferenceField>
+        </Tab>
+
+        <Tab
+          label="synapseadmin.reports.tabs.detail"
+          icon={<PageviewIcon />}
+          path="detail"
+        >
+          {" "}
+          <DateField
+            source="event_json.origin_server_ts"
+            showTime
+            options={{
+              year: "numeric",
+              month: "2-digit",
+              day: "2-digit",
+              hour: "2-digit",
+              minute: "2-digit",
+              second: "2-digit",
+            }}
+            sortable={true}
+          />
+          <ReferenceField source="sender" reference="users">
+            <TextField source="id" />
+          </ReferenceField>
+          <TextField source="event_id" />
+          <TextField source="event_json.origin" />
+          <TextField source="event_json.type" />
+          <TextField source="event_json.content.msgtype" />
+          <TextField source="event_json.content.body" />
+          <TextField source="event_json.content.format" />
+          <TextField source="event_json.content.formatted_body" />
+          <TextField source="event_json.content.algorithm" />
+          <TextField
+            source="event_json.content.device_id"
+            label="resources.users.fields.device_id"
+          />
+        </Tab>
+      </TabbedShowLayout>
+    </Show>
+  );
+};
+
+export const ReportList = ({ ...props }) => {
+  return (
+    <List
+      {...props}
+      pagination={<ReportPagination />}
+      sort={{ field: "received_ts", order: "DESC" }}
+      bulkActionButtons={false}
+    >
+      <Datagrid rowClick="show">
+        <TextField source="id" sortable={false} />
+        <DateField
+          source="received_ts"
+          showTime
+          options={{
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+          }}
+          sortable={true}
+        />
+        <TextField sortable={false} source="user_id" />
+        <TextField sortable={false} source="name" />
+        <TextField sortable={false} source="score" />
+      </Datagrid>
+    </List>
+  );
+};

src/components/ImportFeature.js

@@ -0,0 +1,674 @@
+import React, { useState } from "react";
+import {
+  Button as ReactAdminButton,
+  useDataProvider,
+  useNotify,
+  Title,
+} from "react-admin";
+import { parse as parseCsv, unparse as unparseCsv } from "papaparse";
+import GetAppIcon from "@material-ui/icons/GetApp";
+import {
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  FormControlLabel,
+  Checkbox,
+  NativeSelect,
+} from "@material-ui/core";
+import { useTranslate } from "ra-core";
+import Container from "@material-ui/core/Container/Container";
+import { generateRandomUser } from "./users";
+
+const LOGGING = true;
+
+export const ImportButton = ({ label, variant = "text" }) => {
+  return (
+    <ReactAdminButton
+      color="primary"
+      component="span"
+      variant={variant}
+      label={label}
+    >
+      <GetAppIcon style={{ transform: "rotate(180deg)", fontSize: "20" }} />
+    </ReactAdminButton>
+  );
+};
+
+const expectedFields = ["id", "displayname"].sort();
+const optionalFields = [
+  "user_type",
+  "guest",
+  "admin",
+  "deactivated",
+  "avatar_url",
+  "password",
+].sort();
+
+function TranslatableOption({ value, text }) {
+  const translate = useTranslate();
+  return <option value={value}>{translate(text)}</option>;
+}
+
+const FilePicker = props => {
+  const [values, setValues] = useState(null);
+  const [error, setError] = useState(null);
+  const [stats, setStats] = useState(null);
+  const [dryRun, setDryRun] = useState(true);
+
+  const [progress, setProgress] = useState(null);
+
+  const [importResults, setImportResults] = useState(null);
+  const [skippedRecords, setSkippedRecords] = useState(null);
+
+  const [conflictMode, setConflictMode] = useState("stop");
+  const [passwordMode, setPasswordMode] = useState(true);
+  const [useridMode, setUseridMode] = useState("ignore");
+
+  const translate = useTranslate();
+  const notify = useNotify();
+
+  const dataProvider = useDataProvider();
+
+  const onFileChange = async e => {
+    if (progress !== null) return;
+
+    setValues(null);
+    setError(null);
+    setStats(null);
+    setImportResults(null);
+    const file = e.target.files ? e.target.files[0] : null;
+    /* Let's refuse some unreasonably big files instead of freezing
+     * up the browser */
+    if (file.size > 100000000) {
+      const message = translate("import_users.errors.unreasonably_big", {
+        size: (file.size / (1024 * 1024)).toFixed(2),
+      });
+      notify(message);
+      setError(message);
+      return;
+    }
+    try {
+      parseCsv(file, {
+        header: true,
+        skipEmptyLines: true /* especially for a final EOL in the csv file */,
+        complete: result => {
+          if (result.error) {
+            setError(result.error);
+          }
+          /* Papaparse is very lenient, we may be able to salvage
+           * the data in the file. */
+          verifyCsv(result, { setValues, setStats, setError });
+        },
+      });
+    } catch {
+      setError(true);
+      return null;
+    }
+  };
+
+  const verifyCsv = (
+    { data, meta, errors },
+    { setValues, setStats, setError }
+  ) => {
+    /* First, verify the presence of required fields */
+    let eF = Array.from(expectedFields);
+    let oF = Array.from(optionalFields);
+
+    meta.fields.forEach(name => {
+      if (eF.includes(name)) {
+        eF = eF.filter(v => v !== name);
+      }
+      if (oF.includes(name)) {
+        oF = oF.filter(v => v !== name);
+      }
+    });
+
+    if (eF.length !== 0) {
+      setError(
+        translate("import_users.error.required_field", { field: eF[0] })
+      );
+      return false;
+    }
+
+    // XXX after deciding on how "name" and friends should be handled below,
+    //     this place will want changes, too.
+
+    /* Collect some stats to prevent sneaky csv files from adding admin
+       users or something.
+     */
+    let stats = {
+      user_types: { default: 0 },
+      is_guest: 0,
+      admin: 0,
+      deactivated: 0,
+      password: 0,
+      avatar_url: 0,
+      id: 0,
+
+      total: data.length,
+    };
+
+    data.forEach((line, idx) => {
+      if (line.user_type === undefined || line.user_type === "") {
+        stats.user_types.default++;
+      } else {
+        stats.user_types[line.user_type] += 1;
+      }
+      /* XXX correct the csv export that react-admin offers for the users
+       * resource so it gives sensible field names and doesn't duplicate
+       * id as "name"?
+       */
+      if (meta.fields.includes("name")) {
+        delete line.name;
+      }
+      if (meta.fields.includes("user_type")) {
+        delete line.user_type;
+      }
+      if (meta.fields.includes("is_admin")) {
+        line.admin = line.is_admin;
+        delete line.is_admin;
+      }
+
+      ["is_guest", "admin", "deactivated"].forEach(f => {
+        if (line[f] === "true") {
+          stats[f]++;
+          line[f] = true; // we need true booleans instead of strings
+        } else {
+          if (line[f] !== "false" && line[f] !== "") {
+            errors.push(
+              translate("import_users.error.invalid_value", {
+                field: f,
+                row: idx,
+              })
+            );
+          }
+          line[f] = false; // default values to false
+        }
+      });
+
+      if (line.password !== undefined && line.password !== "") {
+        stats.password++;
+      }
+
+      if (line.avatar_url !== undefined && line.avatar_url !== "") {
+        stats.avatar_url++;
+      }
+
+      if (line.id !== undefined && line.id !== "") {
+        stats.id++;
+      }
+    });
+
+    if (errors.length > 0) {
+      setError(errors);
+    }
+    setStats(stats);
+    setValues(data);
+
+    return true;
+  };
+
+  const runImport = async e => {
+    if (progress !== null) {
+      notify("import_users.errors.already_in_progress");
+      return;
+    }
+
+    const results = await doImport(
+      dataProvider,
+      values,
+      conflictMode,
+      passwordMode,
+      useridMode,
+      dryRun,
+      setProgress,
+      setError
+    );
+    setImportResults(results);
+    // offer CSV download of skipped or errored records
+    // (so that the user doesn't have to filter out successful
+    // records manually when fixing stuff in the CSV)
+    setSkippedRecords(unparseCsv(results.skippedRecords));
+    if (LOGGING) console.log("Skipped records:");
+    if (LOGGING) console.log(skippedRecords);
+  };
+
+  // XXX every single one of the requests will restart the activity indicator
+  //     which doesn't look very good.
+
+  const doImport = async (
+    dataProvider,
+    data,
+    conflictMode,
+    passwordMode,
+    useridMode,
+    dryRun,
+    setProgress,
+    setError
+  ) => {
+    let skippedRecords = [];
+    let erroredRecords = [];
+    let succeededRecords = [];
+    let changeStats = {
+      toAdmin: 0,
+      toGuest: 0,
+      toRegular: 0,
+      replacedPassword: 0,
+    };
+    let entriesDone = 0;
+    let entriesCount = data.length;
+    try {
+      setProgress({ done: entriesDone, limit: entriesCount });
+      for (const entry of data) {
+        let userRecord = {};
+        let overwriteData = {};
+        // No need to do a bunch of cryptographic random number getting if
+        // we are using neither a generated password nor a generated user id.
+        if (
+          useridMode === "ignore" ||
+          entry.id === undefined ||
+          entry.password === undefined ||
+          passwordMode === false
+        ) {
+          overwriteData = generateRandomUser();
+          // Ignoring IDs or the entry lacking an ID means we keep the
+          // ID field in the overwrite data.
+          if (!(useridMode === "ignore" || entry.id === undefined)) {
+            delete overwriteData.id;
+          }
+
+          // Not using passwords from the csv or this entry lacking a password
+          // means we keep the password field in the overwrite data.
+          if (
+            !(
+              passwordMode === false ||
+              entry.password === undefined ||
+              entry.password === ""
+            )
+          ) {
+            delete overwriteData.password;
+          }
+        }
+        /* TODO record update stats (especially admin no -> yes, deactivated x -> !x, ... */
+        Object.assign(userRecord, entry);
+        Object.assign(userRecord, overwriteData);
+
+        /* For these modes we will consider the ID that's in the record.
+         * If the mode is "stop", we will not continue adding more records, and
+         * we will offer information on what was already added and what was
+         * skipped.
+         *
+         * If the mode is "skip", we record the record for later, but don't
+         * send it to the server.
+         *
+         * If the mode is "update", we change fields that are reasonable to
+         * update.
+         *  - If the "password mode" is "true" (i.e. "use passwords from csv"):
+         *    - if the record has a password
+         *      - send the password along with the record
+         *    - if the record has no password
+         *      - generate a new password
+         *  - If the "password mode" is "false"
+         *    - never generate a new password to update existing users with
+         */
+
+        /* We just act as if there are no IDs in the CSV, so every user will be
+         * created anew.
+         * We do a simple retry loop so that an accidental hit on an existing ID
+         * doesn't trip us up.
+         */
+        if (LOGGING)
+          console.log(
+            "will check for existence of record " + JSON.stringify(userRecord)
+          );
+        let retries = 0;
+        const submitRecord = recordData => {
+          return dataProvider.getOne("users", { id: recordData.id }).then(
+            async alreadyExists => {
+              if (LOGGING) console.log("already existed");
+
+              if (useridMode === "update" || conflictMode === "skip") {
+                skippedRecords.push(recordData);
+              } else if (conflictMode === "stop") {
+                throw new Error(
+                  translate("import_users.error.id_exits", {
+                    id: recordData.id,
+                  })
+                );
+              } else {
+                const overwriteData = generateRandomUser();
+                const newRecordData = Object.assign({}, recordData, {
+                  id: overwriteData.id,
+                });
+                retries++;
+                if (retries > 512) {
+                  console.warn("retry loop got stuck? pathological situation?");
+                  skippedRecords.push(recordData);
+                } else {
+                  await submitRecord(newRecordData);
+                }
+              }
+            },
+            async okToSubmit => {
+              if (LOGGING)
+                console.log(
+                  "OK to create record " +
+                    recordData.id +
+                    " (" +
+                    recordData.displayname +
+                    ")."
+                );
+
+              if (!dryRun) {
+                await dataProvider.create("users", { data: recordData });
+              }
+              succeededRecords.push(recordData);
+            }
+          );
+        };
+
+        await submitRecord(userRecord);
+        entriesDone++;
+        setProgress({ done: entriesDone, limit: data.length });
+      }
+
+      setProgress(null);
+    } catch (e) {
+      setError(
+        translate("import_users.error.at_entry", {
+          entry: entriesDone + 1,
+          message: e.message,
+        })
+      );
+      setProgress(null);
+    }
+    return {
+      skippedRecords,
+      erroredRecords,
+      succeededRecords,
+      totalRecordCount: entriesCount,
+      changeStats,
+      wasDryRun: dryRun,
+    };
+  };
+
+  const downloadSkippedRecords = () => {
+    const element = document.createElement("a");
+    console.log(skippedRecords);
+    const file = new Blob([skippedRecords], {
+      type: "text/comma-separated-values",
+    });
+    element.href = URL.createObjectURL(file);
+    element.download = "skippedRecords.csv";
+    document.body.appendChild(element); // Required for this to work in FireFox
+    element.click();
+  };
+
+  const onConflictModeChanged = async e => {
+    if (progress !== null) {
+      return;
+    }
+
+    const value = e.target.value;
+    setConflictMode(value);
+  };
+
+  const onPasswordModeChange = e => {
+    if (progress !== null) {
+      return;
+    }
+
+    setPasswordMode(e.target.checked);
+  };
+
+  const onUseridModeChanged = async e => {
+    if (progress !== null) {
+      return;
+    }
+
+    const value = e.target.value;
+    setUseridMode(value);
+  };
+
+  const onDryRunModeChanged = ev => {
+    if (progress !== null) {
+      return;
+    }
+    setDryRun(ev.target.checked);
+  };
+
+  // render individual small components
+
+  const statsCards = stats &&
+    !importResults && [
+      <Container>
+        <CardHeader
+          title={translate("import_users.cards.importstats.header")}
+        />
+        <CardContent>
+          <div>
+            {translate(
+              "import_users.cards.importstats.users_total",
+              stats.total
+            )}
+          </div>
+          <div>
+            {translate(
+              "import_users.cards.importstats.guest_count",
+              stats.is_guest
+            )}
+          </div>
+          <div>
+            {translate(
+              "import_users.cards.importstats.admin_count",
+              stats.admin
+            )}
+          </div>
+        </CardContent>
+      </Container>,
+      <Container>
+        <CardHeader title={translate("import_users.cards.ids.header")} />
+        <CardContent>
+          <div>
+            {stats.id === stats.total
+              ? translate("import_users.cards.ids.all_ids_present")
+              : translate("import_users.cards.ids.count_ids_present", stats.id)}
+          </div>
+          {stats.id > 0 ? (
+            <div>
+              <NativeSelect
+                onChange={onUseridModeChanged}
+                value={useridMode}
+                enabled={(progress !== null).toString()}
+              >
+                <TranslatableOption
+                  value="ignore"
+                  text="import_users.cards.ids.mode.ignore"
+                />
+                <TranslatableOption
+                  value="update"
+                  text="import_users.cards.ids.mode.update"
+                />
+              </NativeSelect>
+            </div>
+          ) : (
+            ""
+          )}
+        </CardContent>
+      </Container>,
+      <Container>
+        <CardHeader title={translate("import_users.cards.passwords.header")} />
+        <CardContent>
+          <div>
+            {stats.password === stats.total
+              ? translate("import_users.cards.passwords.all_passwords_present")
+              : translate(
+                  "import_users.cards.passwords.count_passwords_present",
+                  stats.password
+                )}
+          </div>
+          {stats.password > 0 ? (
+            <div>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={passwordMode}
+                    enabled={(progress !== null).toString()}
+                    onChange={onPasswordModeChange}
+                  />
+                }
+                label={translate("import_users.cards.passwords.use_passwords")}
+              />
+            </div>
+          ) : (
+            ""
+          )}
+        </CardContent>
+      </Container>,
+    ];
+
+  let conflictCards = stats && !importResults && (
+    <Container>
+      <CardHeader title={translate("import_users.cards.conflicts.header")} />
+      <CardContent>
+        <div>
+          <NativeSelect
+            onChange={onConflictModeChanged}
+            value={conflictMode}
+            enabled={(progress !== null).toString()}
+          >
+            <TranslatableOption
+              value="stop"
+              text="import_users.cards.conflicts.mode.stop"
+            />
+            <TranslatableOption
+              value="skip"
+              text="import_users.cards.conflicts.mode.skip"
+            />
+          </NativeSelect>
+        </div>
+      </CardContent>
+    </Container>
+  );
+
+  let errorCards = error && (
+    <Container>
+      <CardHeader title={translate("import_users.error.error")} />
+      <CardContent>
+        {(Array.isArray(error) ? error : [error]).map(e => (
+          <div>{e}</div>
+        ))}
+      </CardContent>
+    </Container>
+  );
+
+  let uploadCard = !importResults && (
+    <Container>
+      <CardHeader title={translate("import_users.cards.upload.header")} />
+      <CardContent>
+        {translate("import_users.cards.upload.explanation")}
+        <a href="./data/example.csv">example.csv</a>
+        <br />
+        <br />
+        <input
+          type="file"
+          onChange={onFileChange}
+          enabled={(progress !== null).toString()}
+        />
+      </CardContent>
+    </Container>
+  );
+
+  let resultsCard = importResults && (
+    <CardContent>
+      <CardHeader title={translate("import_users.cards.results.header")} />
+      <div>
+        {translate(
+          "import_users.cards.results.total",
+          importResults.totalRecordCount
+        )}
+        <br />
+        {translate(
+          "import_users.cards.results.successful",
+          importResults.succeededRecords.length
+        )}
+        <br />
+        {importResults.skippedRecords.length
+          ? [
+              translate(
+                "import_users.cards.results.skipped",
+                importResults.skippedRecords.length
+              ),
+              <div>
+                <button onClick={downloadSkippedRecords}>
+                  {translate("import_users.cards.results.download_skipped")}
+                </button>
+              </div>,
+              <br />,
+            ]
+          : ""}
+        {importResults.erroredRecords.length
+          ? [
+              translate(
+                "import_users.cards.results.skipped",
+                importResults.erroredRecords.length
+              ),
+              <br />,
+            ]
+          : ""}
+        <br />
+        {importResults.wasDryRun && [
+          translate("import_users.cards.results.simulated_only"),
+          <br />,
+        ]}
+      </div>
+    </CardContent>
+  );
+
+  let startImportCard =
+    !values || values.length === 0 || importResults ? undefined : (
+      <CardActions>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={dryRun}
+              onChange={onDryRunModeChanged}
+              enabled={(progress !== null).toString()}
+            />
+          }
+          label={translate("import_users.cards.startImport.simulate_only")}
+        />
+        <Button
+          size="large"
+          onClick={runImport}
+          enabled={(progress !== null).toString()}
+        >
+          {translate("import_users.cards.startImport.run_import")}
+        </Button>
+        {progress !== null ? (
+          <div>
+            {progress.done} of {progress.limit} done
+          </div>
+        ) : null}
+      </CardActions>
+    );
+
+  let allCards = [];
+  if (uploadCard) allCards.push(uploadCard);
+  if (errorCards) allCards.push(errorCards);
+  if (conflictCards) allCards.push(conflictCards);
+  if (statsCards) allCards.push(...statsCards);
+  if (startImportCard) allCards.push(startImportCard);
+  if (resultsCard) allCards.push(resultsCard);
+
+  let cardContainer = <Card>{allCards}</Card>;
+
+  return [
+    <Title defaultTitle={translate("import_users.title")} />,
+    cardContainer,
+  ];
+};
+
+export const ImportFeature = FilePicker;

src/components/LoginPage.js

@@ -0,0 +1,286 @@
+import React, { useState, useEffect } from "react";
+import {
+  fetchUtils,
+  FormDataConsumer,
+  Notification,
+  useLogin,
+  useNotify,
+  useLocale,
+  useSetLocale,
+  useTranslate,
+  PasswordInput,
+  TextInput,
+} from "react-admin";
+import { Form, useForm } from "react-final-form";
+import {
+  Avatar,
+  Button,
+  Card,
+  CardActions,
+  CircularProgress,
+  MenuItem,
+  Select,
+  TextField,
+} from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import LockIcon from "@material-ui/icons/Lock";
+
+const useStyles = makeStyles(theme => ({
+  main: {
+    display: "flex",
+    flexDirection: "column",
+    minHeight: "calc(100vh - 1em)",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    background: "url(./images/floating-cogs.svg)",
+    backgroundColor: "#f9f9f9",
+    backgroundRepeat: "no-repeat",
+    backgroundSize: "cover",
+  },
+  card: {
+    minWidth: "30em",
+    marginTop: "6em",
+    marginBottom: "6em",
+  },
+  avatar: {
+    margin: "1em",
+    display: "flex",
+    justifyContent: "center",
+  },
+  icon: {
+    backgroundColor: theme.palette.secondary.main,
+  },
+  hint: {
+    marginTop: "1em",
+    display: "flex",
+    justifyContent: "center",
+    color: theme.palette.grey[500],
+  },
+  form: {
+    padding: "0 1em 1em 1em",
+  },
+  input: {
+    marginTop: "1em",
+  },
+  actions: {
+    padding: "0 1em 1em 1em",
+  },
+  serverVersion: {
+    color: "#9e9e9e",
+    fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+    marginBottom: "1em",
+    marginLeft: "0.5em",
+  },
+}));
+
+const LoginPage = ({ theme }) => {
+  const classes = useStyles({ theme });
+  const login = useLogin();
+  const notify = useNotify();
+  const [loading, setLoading] = useState(false);
+  var locale = useLocale();
+  const setLocale = useSetLocale();
+  const translate = useTranslate();
+  const base_url = localStorage.getItem("base_url");
+
+  const renderInput = ({
+    meta: { touched, error } = {},
+    input: { ...inputProps },
+    ...props
+  }) => (
+    <TextField
+      error={!!(touched && error)}
+      helperText={touched && error}
+      {...inputProps}
+      {...props}
+      fullWidth
+    />
+  );
+
+  const validate = values => {
+    const errors = {};
+    if (!values.username) {
+      errors.username = translate("ra.validation.required");
+    }
+    if (!values.password) {
+      errors.password = translate("ra.validation.required");
+    }
+    if (!values.base_url) {
+      errors.base_url = translate("ra.validation.required");
+    } else {
+      if (!values.base_url.match(/^(http|https):\/\//)) {
+        errors.base_url = translate("synapseadmin.auth.protocol_error");
+      } else if (
+        !values.base_url.match(/^(http|https):\/\/[a-zA-Z0-9\-.]+(:\d{1,5})?$/)
+      ) {
+        errors.base_url = translate("synapseadmin.auth.url_error");
+      }
+    }
+    return errors;
+  };
+
+  const handleSubmit = auth => {
+    setLoading(true);
+    login(auth).catch(error => {
+      setLoading(false);
+      notify(
+        typeof error === "string"
+          ? error
+          : typeof error === "undefined" || !error.message
+          ? "ra.auth.sign_in_error"
+          : error.message,
+        "warning"
+      );
+    });
+  };
+
+  const extractHomeServer = username => {
+    const usernameRegex = /@[a-zA-Z0-9._=\-/]+:([a-zA-Z0-9\-.]+\.[a-zA-Z]+)/;
+    if (!username) return null;
+    const res = username.match(usernameRegex);
+    if (res) return res[1];
+    return null;
+  };
+
+  const UserData = ({ formData }) => {
+    const form = useForm();
+    const [serverVersion, setServerVersion] = useState("");
+
+    const handleUsernameChange = _ => {
+      if (formData.base_url) return;
+      // check if username is a full qualified userId then set base_url accordially
+      const home_server = extractHomeServer(formData.username);
+      const wellKnownUrl = `https://${home_server}/.well-known/matrix/client`;
+      if (home_server) {
+        // fetch .well-known entry to get base_url
+        fetchUtils
+          .fetchJson(wellKnownUrl, { method: "GET" })
+          .then(({ json }) => {
+            form.change("base_url", json["m.homeserver"].base_url);
+          })
+          .catch(_ => {
+            // if there is no .well-known entry, try the home server name
+            form.change("base_url", `https://${home_server}`);
+          });
+      }
+    };
+
+    useEffect(
+      _ => {
+        if (
+          !formData.base_url ||
+          !formData.base_url.match(/^(http|https):\/\/[a-zA-Z0-9\-.]+$/)
+        )
+          return;
+        const versionUrl = `${formData.base_url}/_synapse/admin/v1/server_version`;
+        fetchUtils
+          .fetchJson(versionUrl, { method: "GET" })
+          .then(({ json }) => {
+            setServerVersion(
+              `${translate("synapseadmin.auth.server_version")} ${
+                json["server_version"]
+              }`
+            );
+          })
+          .catch(_ => {
+            setServerVersion("");
+          });
+      },
+      [formData.base_url]
+    );
+
+    return (
+      <div>
+        <div className={classes.input}>
+          <TextInput
+            autoFocus
+            name="username"
+            component={renderInput}
+            label={translate("ra.auth.username")}
+            disabled={loading}
+            onBlur={handleUsernameChange}
+            fullWidth
+          />
+        </div>
+        <div className={classes.input}>
+          <PasswordInput
+            name="password"
+            component={renderInput}
+            label={translate("ra.auth.password")}
+            type="password"
+            disabled={loading}
+            fullWidth
+          />
+        </div>
+        <div className={classes.input}>
+          <TextInput
+            name="base_url"
+            component={renderInput}
+            label={translate("synapseadmin.auth.base_url")}
+            disabled={loading}
+            fullWidth
+          />
+        </div>
+        <div className={classes.serverVersion}>{serverVersion}</div>
+      </div>
+    );
+  };
+
+  return (
+    <Form
+      initialValues={{ base_url: base_url }}
+      onSubmit={handleSubmit}
+      validate={validate}
+      render={({ handleSubmit }) => (
+        <form onSubmit={handleSubmit} noValidate>
+          <div className={classes.main}>
+            <Card className={classes.card}>
+              <div className={classes.avatar}>
+                <Avatar className={classes.icon}>
+                  <LockIcon />
+                </Avatar>
+              </div>
+              <div className={classes.hint}>
+                {translate("synapseadmin.auth.welcome")}
+              </div>
+              <div className={classes.form}>
+                <div className={classes.input}>
+                  <Select
+                    value={locale}
+                    onChange={e => {
+                      setLocale(e.target.value);
+                    }}
+                    fullWidth
+                    disabled={loading}
+                  >
+                    <MenuItem value="de">Deutsch</MenuItem>
+                    <MenuItem value="en">English</MenuItem>
+                  </Select>
+                </div>
+                <FormDataConsumer>
+                  {formDataProps => <UserData {...formDataProps} />}
+                </FormDataConsumer>
+              </div>
+              <CardActions className={classes.actions}>
+                <Button
+                  variant="contained"
+                  type="submit"
+                  color="primary"
+                  disabled={loading}
+                  className={classes.button}
+                  fullWidth
+                >
+                  {loading && <CircularProgress size={25} thickness={2} />}
+                  {translate("ra.auth.sign_in")}
+                </Button>
+              </CardActions>
+            </Card>
+            <Notification />
+          </div>
+        </form>
+      )}
+    />
+  );
+};
+
+export default LoginPage;

src/components/LoginPage.test.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { TestContext } from "react-admin";
+import { shallow } from "enzyme";
+import LoginPage from "./LoginPage";
+
+describe("LoginForm", () => {
+  it("renders", () => {
+    shallow(
+      <TestContext>
+        <LoginPage />
+      </TestContext>
+    );
+  });
+});

src/components/Menu.js

@@ -0,0 +1,39 @@
+// in src/Menu.js
+import * as React from "react";
+import { useSelector } from "react-redux";
+import { useMediaQuery } from "@material-ui/core";
+import { MenuItemLink, getResources } from "react-admin";
+import DefaultIcon from "@material-ui/icons/ViewList";
+import LabelIcon from "@material-ui/icons/Label";
+
+const Menu = ({ onMenuClick, logout }) => {
+  const isXSmall = useMediaQuery(theme => theme.breakpoints.down("xs"));
+  const open = useSelector(state => state.admin.ui.sidebarOpen);
+  const resources = useSelector(getResources);
+  return (
+    <div>
+      {resources.map(resource => (
+        <MenuItemLink
+          key={resource.name}
+          to={`/${resource.name}`}
+          primaryText={
+            (resource.options && resource.options.label) || resource.name
+          }
+          leftIcon={resource.icon ? <resource.icon /> : <DefaultIcon />}
+          onClick={onMenuClick}
+          sidebarIsOpen={open}
+        />
+      ))}
+      <MenuItemLink
+        to="/custom-route"
+        primaryText="Miscellaneous"
+        leftIcon={<LabelIcon />}
+        onClick={onMenuClick}
+        sidebarIsOpen={open}
+      />
+      {isXSmall && logout}
+    </div>
+  );
+};
+
+export default Menu;

src/components/ServerNotices.js

@@ -0,0 +1,148 @@
+import React, { Fragment, useState } from "react";
+import {
+  Button,
+  SaveButton,
+  SimpleForm,
+  TextInput,
+  Toolbar,
+  required,
+  useCreate,
+  useMutation,
+  useNotify,
+  useTranslate,
+  useUnselectAll,
+} from "react-admin";
+import MessageIcon from "@material-ui/icons/Message";
+import IconCancel from "@material-ui/icons/Cancel";
+import Dialog from "@material-ui/core/Dialog";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogTitle from "@material-ui/core/DialogTitle";
+
+const ServerNoticeDialog = ({ open, loading, onClose, onSend }) => {
+  const translate = useTranslate();
+
+  const ServerNoticeToolbar = props => (
+    <Toolbar {...props}>
+      <SaveButton label="resources.servernotices.action.send" />
+      <Button label="ra.action.cancel" onClick={onClose}>
+        <IconCancel />
+      </Button>
+    </Toolbar>
+  );
+
+  return (
+    <Dialog open={open} onClose={onClose} loading={loading}>
+      <DialogTitle>
+        {translate("resources.servernotices.action.send")}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          {translate("resources.servernotices.helper.send")}
+        </DialogContentText>
+        <SimpleForm
+          toolbar={<ServerNoticeToolbar />}
+          submitOnEnter={false}
+          redirect={false}
+          save={onSend}
+        >
+          <TextInput
+            source="body"
+            label="resources.servernotices.fields.body"
+            fullWidth
+            multiline
+            rows="4"
+            resettable
+            validate={required()}
+          />
+        </SimpleForm>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export const ServerNoticeButton = ({ record }) => {
+  const [open, setOpen] = useState(false);
+  const notify = useNotify();
+  const [create, { loading }] = useCreate("servernotices");
+
+  const handleDialogOpen = () => setOpen(true);
+  const handleDialogClose = () => setOpen(false);
+
+  const handleSend = values => {
+    create(
+      { payload: { data: { id: record.id, ...values } } },
+      {
+        onSuccess: () => {
+          notify("resources.servernotices.action.send_success");
+          handleDialogClose();
+        },
+        onFailure: () =>
+          notify("resources.servernotices.action.send_failure", "error"),
+      }
+    );
+  };
+
+  return (
+    <Fragment>
+      <Button
+        label="resources.servernotices.send"
+        onClick={handleDialogOpen}
+        disabled={loading}
+      >
+        <MessageIcon />
+      </Button>
+      <ServerNoticeDialog
+        open={open}
+        onClose={handleDialogClose}
+        onSend={handleSend}
+      />
+    </Fragment>
+  );
+};
+
+export const ServerNoticeBulkButton = ({ selectedIds }) => {
+  const [open, setOpen] = useState(false);
+  const notify = useNotify();
+  const unselectAll = useUnselectAll();
+  const [createMany, { loading }] = useMutation();
+
+  const handleDialogOpen = () => setOpen(true);
+  const handleDialogClose = () => setOpen(false);
+
+  const handleSend = values => {
+    createMany(
+      {
+        type: "createMany",
+        resource: "servernotices",
+        payload: { ids: selectedIds, data: values },
+      },
+      {
+        onSuccess: ({ data }) => {
+          notify("resources.servernotices.action.send_success");
+          unselectAll("users");
+          handleDialogClose();
+        },
+        onFailure: error =>
+          notify("resources.servernotices.action.send_failure", "error"),
+      }
+    );
+  };
+
+  return (
+    <Fragment>
+      <Button
+        label="resources.servernotices.send"
+        onClick={handleDialogOpen}
+        disabled={loading}
+      >
+        <MessageIcon />
+      </Button>
+      <ServerNoticeDialog
+        open={open}
+        onClose={handleDialogClose}
+        onSend={handleSend}
+      />
+    </Fragment>
+  );
+};

src/components/devices.js

@@ -0,0 +1,89 @@
+import React, { Fragment, useState } from "react";
+import {
+  Button,
+  useMutation,
+  useNotify,
+  Confirm,
+  useRefresh,
+} from "react-admin";
+import ActionDelete from "@material-ui/icons/Delete";
+import { makeStyles } from "@material-ui/core/styles";
+import { fade } from "@material-ui/core/styles/colorManipulator";
+import classnames from "classnames";
+
+const useStyles = makeStyles(
+  theme => ({
+    deleteButton: {
+      color: theme.palette.error.main,
+      "&:hover": {
+        backgroundColor: fade(theme.palette.error.main, 0.12),
+        // Reset on mouse devices
+        "@media (hover: none)": {
+          backgroundColor: "transparent",
+        },
+      },
+    },
+  }),
+  { name: "RaDeleteDeviceButton" }
+);
+
+export const DeviceRemoveButton = props => {
+  const { record } = props;
+  const classes = useStyles(props);
+  const [open, setOpen] = useState(false);
+  const refresh = useRefresh();
+  const notify = useNotify();
+
+  const [removeDevice, { loading }] = useMutation();
+
+  if (!record) return null;
+
+  const handleClick = () => setOpen(true);
+  const handleDialogClose = () => setOpen(false);
+
+  const handleConfirm = () => {
+    removeDevice(
+      {
+        type: "delete",
+        resource: "devices",
+        payload: {
+          id: record.id,
+          user_id: record.user_id,
+        },
+      },
+      {
+        onSuccess: () => {
+          notify("resources.devices.action.erase.success");
+          refresh();
+        },
+        onFailure: () =>
+          notify("resources.devices.action.erase.failure", "error"),
+      }
+    );
+    setOpen(false);
+  };
+
+  return (
+    <Fragment>
+      <Button
+        label="ra.action.remove"
+        onClick={handleClick}
+        className={classnames("ra-delete-button", classes.deleteButton)}
+      >
+        <ActionDelete />
+      </Button>
+      <Confirm
+        isOpen={open}
+        loading={loading}
+        onConfirm={handleConfirm}
+        onClose={handleDialogClose}
+        title="resources.devices.action.erase.title"
+        content="resources.devices.action.erase.content"
+        translateOptions={{
+          id: record.id,
+          name: record.display_name ? record.display_name : record.id,
+        }}
+      />
+    </Fragment>
+  );
+};

src/components/rooms.js

@@ -0,0 +1,290 @@
+import React, { Fragment } from "react";
+import { connect } from "react-redux";
+import {
+  BooleanField,
+  BulkDeleteWithConfirmButton,
+  Datagrid,
+  DeleteButton,
+  Filter,
+  List,
+  Pagination,
+  ReferenceField,
+  ReferenceManyField,
+  SearchInput,
+  SelectField,
+  Show,
+  Tab,
+  TabbedShowLayout,
+  TextField,
+  TopToolbar,
+  useTranslate,
+} from "react-admin";
+import get from "lodash/get";
+import { Tooltip, Typography, Chip } from "@material-ui/core";
+import HttpsIcon from "@material-ui/icons/Https";
+import NoEncryptionIcon from "@material-ui/icons/NoEncryption";
+import PageviewIcon from "@material-ui/icons/Pageview";
+import UserIcon from "@material-ui/icons/Group";
+import ViewListIcon from "@material-ui/icons/ViewList";
+import VisibilityIcon from "@material-ui/icons/Visibility";
+
+const RoomPagination = props => (
+  <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
+);
+
+const EncryptionField = ({ source, record = {}, emptyText }) => {
+  const translate = useTranslate();
+  const value = get(record, source);
+  let ariaLabel = value === false ? "ra.boolean.false" : "ra.boolean.true";
+
+  if (value === false || value === true) {
+    return (
+      <Typography component="span" variant="body2">
+        <Tooltip title={translate(ariaLabel, { _: ariaLabel })}>
+          {value === true ? (
+            <HttpsIcon data-testid="true" htmlColor="limegreen" />
+          ) : (
+            <NoEncryptionIcon data-testid="false" color="error" />
+          )}
+        </Tooltip>
+      </Typography>
+    );
+  }
+
+  return (
+    <Typography component="span" variant="body2">
+      {emptyText}
+    </Typography>
+  );
+};
+
+const RoomTitle = ({ record }) => {
+  const translate = useTranslate();
+  var name = "";
+  if (record) {
+    name = record.name !== "" ? record.name : record.id;
+  }
+
+  return (
+    <span>
+      {translate("resources.rooms.name", 1)} {name}
+    </span>
+  );
+};
+
+const RoomShowActions = ({ basePath, data, resource }) => {
+  const translate = useTranslate();
+  return (
+    <TopToolbar>
+      <DeleteButton
+        basePath={basePath}
+        record={data}
+        resource={resource}
+        undoable={false}
+        confirmTitle={translate("synapseadmin.rooms.delete.title")}
+        confirmContent={translate("synapseadmin.rooms.delete.message")}
+      />
+    </TopToolbar>
+  );
+};
+
+export const RoomShow = props => {
+  const translate = useTranslate();
+  return (
+    <Show {...props} actions={<RoomShowActions />} title={<RoomTitle />}>
+      <TabbedShowLayout>
+        <Tab label="synapseadmin.rooms.tabs.basic" icon={<ViewListIcon />}>
+          <TextField source="room_id" />
+          <TextField source="name" />
+          <TextField source="canonical_alias" />
+          <TextField source="creator" />
+        </Tab>
+
+        <Tab
+          label="synapseadmin.rooms.tabs.detail"
+          icon={<PageviewIcon />}
+          path="detail"
+        >
+          <TextField source="joined_members" />
+          <TextField source="joined_local_members" />
+          <TextField source="state_events" />
+          <TextField source="version" />
+          <TextField
+            source="encryption"
+            emptyText={translate("resources.rooms.enums.unencrypted")}
+          />
+        </Tab>
+
+        <Tab label="synapseadmin.rooms.tabs.members" icon={<UserIcon />}>
+          <ReferenceManyField
+            reference="room_members"
+            target="room_id"
+            addLabel={false}
+          >
+            <Datagrid
+              style={{ width: "100%" }}
+              rowClick={(id, basePath, record) => "/users/" + id}
+            >
+              <TextField
+                source="id"
+                sortable={false}
+                label="resources.users.fields.id"
+              />
+              <ReferenceField
+                label="resources.users.fields.displayname"
+                source="id"
+                reference="users"
+                sortable={false}
+                link=""
+              >
+                <TextField source="displayname" sortable={false} />
+              </ReferenceField>
+            </Datagrid>
+          </ReferenceManyField>
+        </Tab>
+
+        <Tab
+          label="synapseadmin.rooms.tabs.permission"
+          icon={<VisibilityIcon />}
+          path="permission"
+        >
+          <BooleanField source="federatable" />
+          <BooleanField source="public" />
+          <SelectField
+            source="join_rules"
+            choices={[
+              { id: "public", name: "resources.rooms.enums.join_rules.public" },
+              { id: "knock", name: "resources.rooms.enums.join_rules.knock" },
+              { id: "invite", name: "resources.rooms.enums.join_rules.invite" },
+              {
+                id: "private",
+                name: "resources.rooms.enums.join_rules.private",
+              },
+            ]}
+          />
+          <SelectField
+            source="guest_access"
+            choices={[
+              {
+                id: "can_join",
+                name: "resources.rooms.enums.guest_access.can_join",
+              },
+              {
+                id: "forbidden",
+                name: "resources.rooms.enums.guest_access.forbidden",
+              },
+            ]}
+          />
+          <SelectField
+            source="history_visibility"
+            choices={[
+              {
+                id: "invited",
+                name: "resources.rooms.enums.history_visibility.invited",
+              },
+              {
+                id: "joined",
+                name: "resources.rooms.enums.history_visibility.joined",
+              },
+              {
+                id: "shared",
+                name: "resources.rooms.enums.history_visibility.shared",
+              },
+              {
+                id: "world_readable",
+                name: "resources.rooms.enums.history_visibility.world_readable",
+              },
+            ]}
+          />
+        </Tab>
+      </TabbedShowLayout>
+    </Show>
+  );
+};
+
+const RoomBulkActionButtons = props => (
+  <Fragment>
+    <BulkDeleteWithConfirmButton {...props} />
+  </Fragment>
+);
+
+const RoomFilter = ({ ...props }) => {
+  const translate = useTranslate();
+  return (
+    <Filter {...props}>
+      <SearchInput source="search_term" alwaysOn />
+      <Chip
+        label={translate("resources.rooms.fields.joined_local_members")}
+        source="joined_local_members"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
+      />
+      <Chip
+        label={translate("resources.rooms.fields.state_events")}
+        source="state_events"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
+      />
+      <Chip
+        label={translate("resources.rooms.fields.version")}
+        source="version"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
+      />
+      <Chip
+        label={translate("resources.rooms.fields.federatable")}
+        source="federatable"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
+      />
+    </Filter>
+  );
+};
+
+const FilterableRoomList = ({ ...props }) => {
+  const filter = props.roomFilters;
+  const localMembersFilter =
+    filter && filter.joined_local_members ? true : false;
+  const stateEventsFilter = filter && filter.state_events ? true : false;
+  const versionFilter = filter && filter.version ? true : false;
+  const federateableFilter = filter && filter.federatable ? true : false;
+  const translate = useTranslate();
+
+  return (
+    <List
+      {...props}
+      pagination={<RoomPagination />}
+      sort={{ field: "name", order: "ASC" }}
+      filters={<RoomFilter />}
+      bulkActionButtons={
+        <RoomBulkActionButtons
+          confirmTitle={translate("synapseadmin.rooms.delete.title")}
+          confirmContent={translate("synapseadmin.rooms.delete.message")}
+        />
+      }
+    >
+      <Datagrid rowClick="show">
+        <EncryptionField
+          source="is_encrypted"
+          sortBy="encryption"
+          label={<HttpsIcon />}
+        />
+        <TextField source="name" />
+        <TextField source="joined_members" />
+        {localMembersFilter && <TextField source="joined_local_members" />}
+        {stateEventsFilter && <TextField source="state_events" />}
+        {versionFilter && <TextField source="version" />}
+        {federateableFilter && <BooleanField source="federatable" />}
+        <BooleanField source="public" />
+      </Datagrid>
+    </List>
+  );
+};
+
+function mapStateToProps(state) {
+  return {
+    roomFilters: state.admin.resources.rooms.list.params.displayedFilters,
+  };
+}
+
+export const RoomList = connect(mapStateToProps)(FilterableRoomList);

src/components/statistics.js

@@ -0,0 +1,42 @@
+import React from "react";
+import {
+  Datagrid,
+  Filter,
+  List,
+  NumberField,
+  TextField,
+  SearchInput,
+  Pagination,
+} from "react-admin";
+
+const UserMediaStatsPagination = props => (
+  <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
+);
+
+const UserMediaStatsFilter = props => (
+  <Filter {...props}>
+    <SearchInput source="search_term" alwaysOn />
+  </Filter>
+);
+
+export const UserMediaStatsList = props => {
+  return (
+    <List
+      {...props}
+      filters={<UserMediaStatsFilter />}
+      pagination={<UserMediaStatsPagination />}
+      sort={{ field: "media_length", order: "DESC" }}
+      bulkActionButtons={false}
+    >
+      <Datagrid rowClick={(id, basePath, record) => "/users/" + id + "/media"}>
+        <TextField source="user_id" label="resources.users.fields.id" />
+        <TextField
+          source="displayname"
+          label="resources.users.fields.displayname"
+        />
+        <NumberField source="media_count" />
+        <NumberField source="media_length" />
+      </Datagrid>
+    </List>
+  );
+};

src/components/users.js

@@ -0,0 +1,518 @@
+import React, { cloneElement, Fragment } from "react";
+import Avatar from "@material-ui/core/Avatar";
+import PersonPinIcon from "@material-ui/icons/PersonPin";
+import ContactMailIcon from "@material-ui/icons/ContactMail";
+import DevicesIcon from "@material-ui/icons/Devices";
+import GetAppIcon from "@material-ui/icons/GetApp";
+import SettingsInputComponentIcon from "@material-ui/icons/SettingsInputComponent";
+import NotificationsIcon from "@material-ui/icons/Notifications";
+import PermMediaIcon from "@material-ui/icons/PermMedia";
+import ViewListIcon from "@material-ui/icons/ViewList";
+import {
+  ArrayInput,
+  ArrayField,
+  Button,
+  Datagrid,
+  DateField,
+  Create,
+  Edit,
+  List,
+  Filter,
+  Toolbar,
+  SimpleForm,
+  SimpleFormIterator,
+  TabbedForm,
+  FormTab,
+  BooleanField,
+  BooleanInput,
+  PasswordInput,
+  TextField,
+  TextInput,
+  ReferenceField,
+  ReferenceManyField,
+  SearchInput,
+  SelectInput,
+  BulkDeleteButton,
+  DeleteButton,
+  SaveButton,
+  regex,
+  useRedirect,
+  useTranslate,
+  Pagination,
+  CreateButton,
+  ExportButton,
+  TopToolbar,
+  sanitizeListRestProps,
+  NumberField,
+} from "react-admin";
+import { ServerNoticeButton, ServerNoticeBulkButton } from "./ServerNotices";
+import { DeviceRemoveButton } from "./devices";
+import { makeStyles } from "@material-ui/core/styles";
+
+const redirect = (basePath, id, data) => {
+  return {
+    pathname: "/import_users",
+  };
+};
+
+const useStyles = makeStyles({
+  small: {
+    height: "40px",
+    width: "40px",
+  },
+  large: {
+    height: "120px",
+    width: "120px",
+    float: "right",
+  },
+});
+
+const UserListActions = ({
+  currentSort,
+  className,
+  resource,
+  filters,
+  displayedFilters,
+  exporter, // you can hide ExportButton if exporter = (null || false)
+  filterValues,
+  permanentFilter,
+  hasCreate, // you can hide CreateButton if hasCreate = false
+  basePath,
+  selectedIds,
+  onUnselectItems,
+  showFilter,
+  maxResults,
+  total,
+  ...rest
+}) => {
+  const redirectTo = useRedirect();
+  return (
+    <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
+      {filters &&
+        cloneElement(filters, {
+          resource,
+          showFilter,
+          displayedFilters,
+          filterValues,
+          context: "button",
+        })}
+      <CreateButton basePath={basePath} />
+      <ExportButton
+        disabled={total === 0}
+        resource={resource}
+        sort={currentSort}
+        filter={{ ...filterValues, ...permanentFilter }}
+        exporter={exporter}
+        maxResults={maxResults}
+      />
+      {/* Add your custom actions */}
+      <Button
+        onClick={() => {
+          redirectTo(redirect);
+        }}
+        label="CSV Import"
+      >
+        <GetAppIcon style={{ transform: "rotate(180deg)", fontSize: "20" }} />
+      </Button>
+    </TopToolbar>
+  );
+};
+
+UserListActions.defaultProps = {
+  selectedIds: [],
+  onUnselectItems: () => null,
+};
+
+const UserPagination = props => (
+  <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
+);
+
+const UserFilter = props => (
+  <Filter {...props}>
+    <SearchInput source="name" alwaysOn />
+    <BooleanInput source="guests" alwaysOn />
+    <BooleanInput
+      label="resources.users.fields.show_deactivated"
+      source="deactivated"
+      alwaysOn
+    />
+  </Filter>
+);
+
+const UserBulkActionButtons = props => {
+  const translate = useTranslate();
+  return (
+    <Fragment>
+      <ServerNoticeBulkButton {...props} />
+      <BulkDeleteButton
+        {...props}
+        label="resources.users.action.erase"
+        title={translate("resources.users.helper.erase")}
+      />
+    </Fragment>
+  );
+};
+
+const AvatarField = ({ source, className, record = {} }) => (
+  <Avatar src={record[source]} className={className} />
+);
+
+export const UserList = props => {
+  const classes = useStyles();
+  return (
+    <List
+      {...props}
+      filters={<UserFilter />}
+      filterDefaultValues={{ guests: true, deactivated: false }}
+      actions={<UserListActions maxResults={10000} />}
+      bulkActionButtons={<UserBulkActionButtons />}
+      pagination={<UserPagination />}
+    >
+      <Datagrid rowClick="edit">
+        <AvatarField
+          source="avatar_src"
+          sortable={false}
+          className={classes.small}
+        />
+        <TextField source="id" sortable={false} />
+        <TextField source="displayname" sortable={false} />
+        <BooleanField source="is_guest" sortable={false} />
+        <BooleanField source="admin" sortable={false} />
+        <BooleanField source="deactivated" sortable={false} />
+      </Datagrid>
+    </List>
+  );
+};
+
+// https://matrix.org/docs/spec/appendices#user-identifiers
+const validateUser = regex(
+  /^@[a-z0-9._=\-/]+:.*/,
+  "synapseadmin.users.invalid_user_id"
+);
+
+export function generateRandomUser() {
+  const homeserver = localStorage.getItem("home_server");
+  const user_id =
+    "@" +
+    Array(8)
+      .fill("0123456789abcdefghijklmnopqrstuvwxyz")
+      .map(
+        x =>
+          x[
+            Math.floor(
+              (crypto.getRandomValues(new Uint32Array(1))[0] /
+                (0xffffffff + 1)) *
+                x.length
+            )
+          ]
+      )
+      .join("") +
+    ":" +
+    homeserver;
+
+  const password = Array(20)
+    .fill(
+      "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~!@-#$"
+    )
+    .map(
+      x =>
+        x[
+          Math.floor(
+            (crypto.getRandomValues(new Uint32Array(1))[0] / (0xffffffff + 1)) *
+              x.length
+          )
+        ]
+    )
+    .join("");
+
+  return {
+    id: user_id,
+    password: password,
+  };
+}
+
+const UserEditToolbar = props => {
+  const translate = useTranslate();
+  return (
+    <Toolbar {...props}>
+      <SaveButton submitOnEnter={true} />
+      <DeleteButton
+        label="resources.users.action.erase"
+        title={translate("resources.users.helper.erase")}
+      />
+      <ServerNoticeButton />
+    </Toolbar>
+  );
+};
+
+export const UserCreate = props => (
+  <Create {...props}>
+    <SimpleForm>
+      <TextInput source="id" autoComplete="off" validate={validateUser} />
+      <TextInput source="displayname" />
+      <PasswordInput source="password" autoComplete="new-password" />
+      <BooleanInput source="admin" />
+      <ArrayInput source="threepids">
+        <SimpleFormIterator>
+          <SelectInput
+            source="medium"
+            choices={[
+              { id: "email", name: "resources.users.email" },
+              { id: "msisdn", name: "resources.users.msisdn" },
+            ]}
+          />
+          <TextInput source="address" />
+        </SimpleFormIterator>
+      </ArrayInput>
+    </SimpleForm>
+  </Create>
+);
+
+const UserTitle = ({ record }) => {
+  const translate = useTranslate();
+  return (
+    <span>
+      {translate("resources.users.name", {
+        smart_count: 1,
+      })}{" "}
+      {record ? `"${record.displayname}"` : ""}
+    </span>
+  );
+};
+export const UserEdit = props => {
+  const classes = useStyles();
+  const translate = useTranslate();
+  return (
+    <Edit {...props} title={<UserTitle />}>
+      <TabbedForm toolbar={<UserEditToolbar />}>
+        <FormTab
+          label={translate("resources.users.name", { smart_count: 1 })}
+          icon={<PersonPinIcon />}
+        >
+          <AvatarField
+            source="avatar_src"
+            sortable={false}
+            className={classes.large}
+          />
+          <TextInput source="id" disabled />
+          <TextInput source="displayname" />
+          <PasswordInput source="password" autoComplete="new-password" />
+          <BooleanInput source="admin" />
+          <BooleanInput
+            source="deactivated"
+            helperText="resources.users.helper.deactivate"
+          />
+          <DateField
+            source="creation_ts_ms"
+            showTime
+            options={{
+              year: "numeric",
+              month: "2-digit",
+              day: "2-digit",
+              hour: "2-digit",
+              minute: "2-digit",
+              second: "2-digit",
+            }}
+          />
+          <TextField source="consent_version" />
+        </FormTab>
+
+        <FormTab
+          label="resources.users.threepid"
+          icon={<ContactMailIcon />}
+          path="threepid"
+        >
+          <ArrayInput source="threepids">
+            <SimpleFormIterator>
+              <SelectInput
+                source="medium"
+                choices={[
+                  { id: "email", name: "resources.users.email" },
+                  { id: "msisdn", name: "resources.users.msisdn" },
+                ]}
+              />
+              <TextInput source="address" />
+            </SimpleFormIterator>
+          </ArrayInput>
+        </FormTab>
+
+        <FormTab
+          label={translate("resources.devices.name", { smart_count: 2 })}
+          icon={<DevicesIcon />}
+          path="devices"
+        >
+          <ReferenceManyField
+            reference="devices"
+            target="user_id"
+            addLabel={false}
+          >
+            <Datagrid style={{ width: "100%" }}>
+              <TextField source="device_id" sortable={false} />
+              <TextField source="display_name" sortable={false} />
+              <TextField source="last_seen_ip" sortable={false} />
+              <DateField
+                source="last_seen_ts"
+                showTime
+                options={{
+                  year: "numeric",
+                  month: "2-digit",
+                  day: "2-digit",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  second: "2-digit",
+                }}
+                sortable={false}
+              />
+              <DeviceRemoveButton />
+            </Datagrid>
+          </ReferenceManyField>
+        </FormTab>
+
+        <FormTab
+          label="resources.connections.name"
+          icon={<SettingsInputComponentIcon />}
+          path="connections"
+        >
+          <ReferenceField
+            reference="connections"
+            source="id"
+            addLabel={false}
+            link={false}
+          >
+            <ArrayField
+              source="devices[].sessions[0].connections"
+              label="resources.connections.name"
+            >
+              <Datagrid style={{ width: "100%" }}>
+                <TextField source="ip" sortable={false} />
+                <DateField
+                  source="last_seen"
+                  showTime
+                  options={{
+                    year: "numeric",
+                    month: "2-digit",
+                    day: "2-digit",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                    second: "2-digit",
+                  }}
+                  sortable={false}
+                />
+                <TextField
+                  source="user_agent"
+                  sortable={false}
+                  style={{ width: "100%" }}
+                />
+              </Datagrid>
+            </ArrayField>
+          </ReferenceField>
+        </FormTab>
+
+        <FormTab
+          label={translate("resources.users_media.name", { smart_count: 2 })}
+          icon={<PermMediaIcon />}
+          path="media"
+        >
+          <ReferenceManyField
+            reference="users_media"
+            target="user_id"
+            addLabel={false}
+            pagination={<UserPagination />}
+            perPage={50}
+          >
+            <Datagrid style={{ width: "100%" }}>
+              <DateField
+                source="created_ts"
+                showTime
+                options={{
+                  year: "numeric",
+                  month: "2-digit",
+                  day: "2-digit",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  second: "2-digit",
+                }}
+                sortable={false}
+              />
+              <DateField
+                source="last_access_ts"
+                showTime
+                options={{
+                  year: "numeric",
+                  month: "2-digit",
+                  day: "2-digit",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  second: "2-digit",
+                }}
+                sortable={false}
+              />
+              <TextField source="media_id" sortable={false} />
+              <NumberField source="media_length" sortable={false} />
+              <TextField source="media_type" sortable={false} />
+              <TextField source="upload_name" sortable={false} />
+              <TextField source="quarantined_by" sortable={false} />
+              <BooleanField source="safe_from_quarantine" sortable={false} />
+              <DeleteButton undoable={false} redirect={false} />
+            </Datagrid>
+          </ReferenceManyField>
+        </FormTab>
+
+        <FormTab
+          label={translate("resources.rooms.name", { smart_count: 2 })}
+          icon={<ViewListIcon />}
+          path="rooms"
+        >
+          <ReferenceManyField
+            reference="joined_rooms"
+            target="user_id"
+            addLabel={false}
+          >
+            <Datagrid
+              style={{ width: "100%" }}
+              rowClick={(id, basePath, record) => "/rooms/" + id + "/show"}
+            >
+              <TextField
+                source="id"
+                sortable={false}
+                label="resources.rooms.fields.room_id"
+              />
+              <ReferenceField
+                label="resources.rooms.fields.name"
+                source="id"
+                reference="rooms"
+                sortable={false}
+                link=""
+              >
+                <TextField source="name" sortable={false} />
+              </ReferenceField>
+            </Datagrid>
+          </ReferenceManyField>
+        </FormTab>
+
+        <FormTab
+          label={translate("resources.pushers.name", { smart_count: 2 })}
+          icon={<NotificationsIcon />}
+          path="pushers"
+        >
+          <ReferenceManyField
+            reference="pushers"
+            target="user_id"
+            addLabel={false}
+          >
+            <Datagrid style={{ width: "100%" }}>
+              <TextField source="kind" sortable={false} />
+              <TextField source="app_display_name" sortable={false} />
+              <TextField source="app_id" sortable={false} />
+              <TextField source="data.url" sortable={false} />
+              <TextField source="device_display_name" sortable={false} />
+              <TextField source="lang" sortable={false} />
+              <TextField source="profile_tag" sortable={false} />
+              <TextField source="pushkey" sortable={false} />
+            </Datagrid>
+          </ReferenceManyField>
+        </FormTab>
+      </TabbedForm>
+    </Edit>
+  );
+};

src/i18n/de.js

@@ -0,0 +1,305 @@
+import germanMessages from "ra-language-german";
+
+export default {
+  ...germanMessages,
+  synapseadmin: {
+    auth: {
+      base_url: "Heimserver URL",
+      welcome: "Willkommen bei Synapse-admin",
+      server_version: "Synapse Version",
+      username_error: "Bitte vollständigen Nutzernamen angeben: '@user:domain'",
+      protocol_error: "Die URL muss mit 'http://' oder 'https://' beginnen",
+      url_error: "Keine gültige Matrix Server URL",
+    },
+    users: {
+      invalid_user_id:
+        "Muss eine vollständige Matrix Benutzer-ID sein, z.B. @benutzer_id:homeserver",
+    },
+    rooms: {
+      details: "Raumdetails",
+      tabs: {
+        basic: "Allgemein",
+        members: "Mitglieder",
+        detail: "Details",
+        permission: "Berechtigungen",
+      },
+      delete: {
+        title: "Raum löschen",
+        message:
+          "Sind Sie sicher dass Sie den Raum löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden. Alle Nachrichten und Medien, die der Raum beinhaltet werden vom Server gelöscht!",
+      },
+    },
+    reports: { tabs: { basic: "Allgemein", detail: "Details" } },
+  },
+  import_users: {
+    error: {
+      at_entry: "Bei Eintrag %{entry}: %{message}",
+      error: "Fehler",
+      required_field: "Pflichtfeld '%{field}' fehlt",
+      invalid_value:
+        "Ungültiger Wert in Zeile %{row}. Feld '%{field}' darf nur die Werte 'true' oder 'false' enthalten",
+      unreasonably_big: "Datei ist zu groß für den Import (%{size} Megabytes)",
+      already_in_progress: "Es läuft bereits ein Import",
+      id_exits: "ID %{id} existiert bereits",
+    },
+    title: "Benutzer aus CSV importieren",
+    goToPdf: "Gehe zum PDF",
+    cards: {
+      importstats: {
+        header: "Benutzer importieren",
+        users_total:
+          "%{smart_count} Benutzer in der CSV Datei |||| %{smart_count} Benutzer in der CSV Datei",
+        guest_count: "%{smart_count} Gast |||| %{smart_count} Gäste",
+        admin_count:
+          "%{smart_count} Server Administrator |||| %{smart_count} Server Administratoren",
+      },
+      conflicts: {
+        header: "Konfliktstrategie",
+        mode: {
+          stop: "Stoppe bei Fehlern",
+          skip: "Zeige Fehler und überspringe fehlerhafte Einträge",
+        },
+      },
+      ids: {
+        header: "IDs",
+        all_ids_present: "IDs in jedem Eintrag vorhanden",
+        count_ids_present:
+          "%{smart_count} Eintrag mit ID |||| %{smart_count} Einträge mit IDs",
+        mode: {
+          ignore: "Ignoriere IDs der CSV-Datei und erstelle neue",
+          update: "Aktualisiere existierende Benutzer",
+        },
+      },
+      passwords: {
+        header: "Passwörter",
+        all_passwords_present: "Passwörter in jedem Eintrag vorhanden",
+        count_passwords_present:
+          "%{smart_count} Eintrag mit Passwort |||| %{smart_count} Einträge mit Passwörtern",
+        use_passwords: "Verwende Passwörter aus der CSV Datei",
+      },
+      upload: {
+        header: "CSV Datei importieren",
+        explanation:
+          "Hier können Sie eine Datei mit kommagetrennten Daten hochladen, die verwendet werden um Benutzer anzulegen oder zu ändern. Die Datei muss mindestens die Felder 'id' und 'displayname' enthalten. Hier können Sie eine Beispieldatei herunterladen und anpassen: ",
+      },
+      startImport: {
+        simulate_only: "Nur simulieren",
+        run_import: "Importieren",
+      },
+      results: {
+        header: "Ergebnis",
+        total:
+          "%{smart_count} Eintrag insgesamt |||| %{smart_count} Einträge insgesamt",
+        successful: "%{smart_count} Einträge erfolgreich importiert",
+        skipped: "%{smart_count} Einträge übersprungen",
+        download_skipped: "Übersprungene Einträge herunterladen",
+        with_error:
+          "%{smart_count} Eintrag mit Fehlern ||| %{smart_count} Einträge mit Fehlern",
+        simulated_only: "Import-Vorgang war nur simuliert",
+      },
+    },
+  },
+  resources: {
+    users: {
+      backtolist: "Zurück zur Liste",
+      name: "Benutzer",
+      email: "E-Mail",
+      msisdn: "Telefon",
+      threepid: "E-Mail / Telefon",
+      fields: {
+        avatar: "Avatar",
+        id: "Benutzer-ID",
+        name: "Name",
+        is_guest: "Gast",
+        admin: "Server Administrator",
+        deactivated: "Deaktiviert",
+        guests: "Zeige Gäste",
+        show_deactivated: "Zeige deaktivierte Benutzer",
+        user_id: "Suche Benutzer",
+        displayname: "Anzeigename",
+        password: "Passwort",
+        avatar_url: "Avatar URL",
+        avatar_src: "Avatar",
+        medium: "Medium",
+        threepids: "3PIDs",
+        address: "Adresse",
+        creation_ts_ms: "Zeitpunkt der Erstellung",
+        consent_version: "Zugestimmte Geschäftsbedingungen",
+      },
+      helper: {
+        deactivate:
+          "Sie müssen ein Passwort angeben, um ein Konto wieder zu aktivieren.",
+        erase: "DSGVO konformes Löschen der Benutzerdaten",
+      },
+      action: {
+        erase: "Lösche Benutzerdaten",
+      },
+    },
+    rooms: {
+      name: "Raum |||| Räume",
+      fields: {
+        room_id: "Raum-ID",
+        name: "Name",
+        canonical_alias: "Alias",
+        joined_members: "Mitglieder",
+        joined_local_members: "Lokale Mitglieder",
+        state_events: "Ereignisse",
+        version: "Version",
+        is_encrypted: "Verschlüsselt",
+        encryption: "Verschlüsselungs-Algorithmus",
+        federatable: "Fö­de­rierbar",
+        public: "Öffentlich",
+        creator: "Ersteller",
+        join_rules: "Beitrittsregeln",
+        guest_access: "Gastzugriff",
+        history_visibility: "Historie-Sichtbarkeit",
+      },
+      enums: {
+        join_rules: {
+          public: "Öffentlich",
+          knock: "Auf Anfrage",
+          invite: "Nur auf Einladung",
+          private: "Privat",
+        },
+        guest_access: {
+          can_join: "Gäste können beitreten",
+          forbidden: "Gäste können nicht beitreten",
+        },
+        history_visibility: {
+          invited: "Ab Einladung",
+          joined: "Ab Beitritt",
+          shared: "Ab Setzen der Einstellung",
+          world_readable: "Jeder",
+        },
+        unencrypted: "Nicht verschlüsselt",
+      },
+    },
+    reports: {
+      name: "Ereignisbericht |||| Ereignisberichte",
+      fields: {
+        id: "ID",
+        received_ts: "Meldezeit",
+        user_id: "Meldender",
+        name: "Raumname",
+        score: "Wert",
+        reason: "Grund",
+        event_id: "Event-ID",
+        event_json: {
+          origin: "Ursprungsserver",
+          origin_server_ts: "Sendezeit",
+          type: "Eventtyp",
+          content: {
+            msgtype: "Inhaltstyp",
+            body: "Nachrichteninhalt",
+            format: "Nachrichtenformat",
+            formatted_body: "Formatierter Nachrichteninhalt",
+            algorithm: "Verschlüsselungsalgorithmus",
+          },
+        },
+      },
+    },
+    connections: {
+      name: "Verbindungen",
+      fields: {
+        last_seen: "Datum",
+        ip: "IP-Adresse",
+        user_agent: "User Agent",
+      },
+    },
+    devices: {
+      name: "Gerät |||| Geräte",
+      fields: {
+        device_id: "Geräte-ID",
+        display_name: "Gerätename",
+        last_seen_ts: "Zeitstempel",
+        last_seen_ip: "IP-Adresse",
+      },
+      action: {
+        erase: {
+          title: "Entferne %{id}",
+          content: 'Möchten Sie das Gerät "%{name}" wirklich entfernen?',
+          success: "Gerät erfolgreich entfernt.",
+          failure: "Beim Entfernen ist ein Fehler aufgetreten.",
+        },
+      },
+    },
+    users_media: {
+      name: "Medien",
+      fields: {
+        media_id: "Medien ID",
+        media_length: "Größe",
+        media_type: "Typ",
+        upload_name: "Dateiname",
+        quarantined_by: "Zur Quarantäne hinzugefügt",
+        safe_from_quarantine: "Geschützt vor Quarantäne",
+        created_ts: "Erstellt",
+        last_access_ts: "Letzter Zugriff",
+      },
+    },
+    pushers: {
+      name: "Pusher |||| Pushers",
+      fields: {
+        app: "App",
+        app_display_name: "App-Anzeigename",
+        app_id: "App ID",
+        device_display_name: "Geräte-Anzeigename",
+        kind: "Art",
+        lang: "Sprache",
+        profile_tag: "Profil-Tag",
+        pushkey: "Pushkey",
+        data: { url: "URL" },
+      },
+    },
+    servernotices: {
+      name: "Serverbenachrichtigungen",
+      send: "Servernachricht versenden",
+      fields: {
+        body: "Nachricht",
+      },
+      action: {
+        send: "Sende Nachricht",
+        send_success: "Nachricht erfolgreich versendet.",
+        send_failure: "Beim Versenden ist ein Fehler aufgetreten.",
+      },
+      helper: {
+        send:
+          'Sendet eine Serverbenachrichtigung an die ausgewählten Nutzer. Hierfür muss das Feature "Server Notices" auf dem Server aktiviert sein.',
+      },
+    },
+    user_media_statistics: {
+      name: "Dateien je Benutzer",
+      fields: {
+        media_count: "Anzahl der Dateien",
+        media_length: "Größe der Dateien",
+      },
+    },
+  },
+  ra: {
+    ...germanMessages.ra,
+    action: {
+      ...germanMessages.ra.action,
+      unselect: "Abwählen",
+    },
+    auth: {
+      ...germanMessages.ra.auth,
+      auth_check_error: "Anmeldung fehlgeschlagen",
+    },
+    input: {
+      ...germanMessages.ra.input,
+      password: {
+        ...germanMessages.ra.input.password,
+        toggle_hidden: "Anzeigen",
+        toggle_visible: "Verstecken",
+      },
+    },
+    notification: {
+      ...germanMessages.ra.notifiaction,
+      logged_out: "Abgemeldet",
+    },
+    page: {
+      ...germanMessages.ra.page,
+      empty: "Keine Einträge vorhanden",
+      invite: "",
+    },
+  },
+};

src/i18n/en.js

@@ -0,0 +1,275 @@
+import englishMessages from "ra-language-english";
+
+export default {
+  ...englishMessages,
+  synapseadmin: {
+    auth: {
+      base_url: "Homeserver URL",
+      welcome: "Welcome to Synapse-admin",
+      server_version: "Synapse version",
+      username_error: "Please enter fully qualified user ID: '@user:domain'",
+      protocol_error: "URL has to start with 'http://' or 'https://'",
+      url_error: "Not a valid Matrix server URL",
+    },
+    users: {
+      invalid_user_id:
+        "Must be a fully qualified Matrix user-id, e.g. @user_id:homeserver",
+    },
+    rooms: {
+      tabs: {
+        basic: "Basic",
+        members: "Members",
+        detail: "Details",
+        permission: "Permissions",
+      },
+      delete: {
+        title: "Delete room",
+        message:
+          "Are you sure you want to delete the room? This cannot be undone. All messages and shared media in the room will be deleted from the server!",
+      },
+    },
+    reports: { tabs: { basic: "Basic", detail: "Details" } },
+  },
+  import_users: {
+    error: {
+      at_entry: "At entry %{entry}: %{message}",
+      error: "Error",
+      required_field: "Required field '%{field}' is not present",
+      invalid_value:
+        "Invalid value on line %{row}. '%{field}' field may only be 'true' or 'false'",
+      unreasonably_big:
+        "Refused to load unreasonably big file of %{size} megabytes",
+      already_in_progress: "An import run is already in progress",
+      id_exits: "ID %{id} already present",
+    },
+    title: "Import users via CSV",
+    goToPdf: "Go to PDF",
+    cards: {
+      importstats: {
+        header: "Import users",
+        users_total:
+          "%{smart_count} user in CSV file |||| %{smart_count} users in CSV file",
+        guest_count: "%{smart_count} guest |||| %{smart_count} guests",
+        admin_count: "%{smart_count} admin |||| %{smart_count} admins",
+      },
+      conflicts: {
+        header: "Conflict strategy",
+        mode: {
+          stop: "Stop on conflict",
+          skip: "Show error and skip on conflict",
+        },
+      },
+      ids: {
+        header: "IDs",
+        all_ids_present: "IDs present on every entry",
+        count_ids_present:
+          "%{smart_count} entry with ID |||| %{smart_count} entries with IDs",
+        mode: {
+          ignore: "Ignore IDs in CSV and create new ones",
+          update: "Update existing records",
+        },
+      },
+      passwords: {
+        header: "Passwords",
+        all_passwords_present: "Passwords present on every entry",
+        count_passwords_present:
+          "%{smart_count} entry with password |||| %{smart_count} entries with passwords",
+        use_passwords: "Use passwords from CSV",
+      },
+      upload: {
+        header: "Input CSV file",
+        explanation:
+          "Here you can upload a file with comma separated values that is processed to create or update users. The file must include the fields 'id' and 'displayname'. You can download and adapt an example file here: ",
+      },
+      startImport: {
+        simulate_only: "Simulate only",
+        run_import: "Import",
+      },
+      results: {
+        header: "Import results",
+        total:
+          "%{smart_count} entry in total |||| %{smart_count} entries in total",
+        successful: "%{smart_count} entries successfully imported",
+        skipped: "%{smart_count} entries skipped",
+        download_skipped: "Download skipped records",
+        with_error:
+          "%{smart_count} entry with errors ||| %{smart_count} entries with errors",
+        simulated_only: "Run was only simulated",
+      },
+    },
+  },
+  resources: {
+    users: {
+      backtolist: "Back to list",
+      name: "User |||| Users",
+      email: "Email",
+      msisdn: "Phone",
+      threepid: "Email / Phone",
+      fields: {
+        avatar: "Avatar",
+        id: "User-ID",
+        name: "Name",
+        is_guest: "Guest",
+        admin: "Server Administrator",
+        deactivated: "Deactivated",
+        guests: "Show guests",
+        show_deactivated: "Show deactivated users",
+        user_id: "Search user",
+        displayname: "Displayname",
+        password: "Password",
+        avatar_url: "Avatar URL",
+        avatar_src: "Avatar",
+        medium: "Medium",
+        threepids: "3PIDs",
+        address: "Address",
+        creation_ts_ms: "Creation timestamp",
+        consent_version: "Consent version",
+      },
+      helper: {
+        deactivate: "You must provide a password to re-activate an account.",
+        erase: "Mark the user as GDPR-erased",
+      },
+      action: {
+        erase: "Erase user data",
+      },
+    },
+    rooms: {
+      name: "Room |||| Rooms",
+      fields: {
+        room_id: "Room-ID",
+        name: "Name",
+        canonical_alias: "Alias",
+        joined_members: "Members",
+        joined_local_members: "Local members",
+        state_events: "State events",
+        version: "Version",
+        is_encrypted: "Encrypted",
+        encryption: "Encryption",
+        federatable: "Federatable",
+        public: "Public",
+        creator: "Creator",
+        join_rules: "Join rules",
+        guest_access: "Guest access",
+        history_visibility: "History visibility",
+      },
+      enums: {
+        join_rules: {
+          public: "Public",
+          knock: "Knock",
+          invite: "Invite",
+          private: "Private",
+        },
+        guest_access: {
+          can_join: "Guests can join",
+          forbidden: "Guests can not join",
+        },
+        history_visibility: {
+          invited: "Since invited",
+          joined: "Since joined",
+          shared: "Since shared",
+          world_readable: "Anyone",
+        },
+        unencrypted: "Unencrypted",
+      },
+    },
+    reports: {
+      name: "Reported event |||| Reported events",
+      fields: {
+        id: "ID",
+        received_ts: "report time",
+        user_id: "announcer",
+        name: "name of the room",
+        score: "score",
+        reason: "reason",
+        event_id: "event ID",
+        event_json: {
+          origin: "origin server",
+          origin_server_ts: "time of send",
+          type: "event typ",
+          content: {
+            msgtype: "content type",
+            body: "content",
+            format: "format",
+            formatted_body: "formatted content",
+            algorithm: "algorithm",
+          },
+        },
+      },
+    },
+    connections: {
+      name: "Connections",
+      fields: {
+        last_seen: "Date",
+        ip: "IP address",
+        user_agent: "User agent",
+      },
+    },
+    devices: {
+      name: "Device |||| Devices",
+      fields: {
+        device_id: "Device-ID",
+        display_name: "Device name",
+        last_seen_ts: "Timestamp",
+        last_seen_ip: "IP address",
+      },
+      action: {
+        erase: {
+          title: "Removing %{id}",
+          content: 'Are you sure you want to remove the device "%{name}"?',
+          success: "Device successfully removed.",
+          failure: "An error has occurred.",
+        },
+      },
+    },
+    users_media: {
+      name: "Media",
+      fields: {
+        media_id: "Media ID",
+        media_length: "Lenght",
+        media_type: "Type",
+        upload_name: "File name",
+        quarantined_by: "Quarantined by",
+        safe_from_quarantine: "Safe from quarantine",
+        created_ts: "Created",
+        last_access_ts: "Last access",
+      },
+    },
+    pushers: {
+      name: "Pusher |||| Pushers",
+      fields: {
+        app: "App",
+        app_display_name: "App display name",
+        app_id: "App ID",
+        device_display_name: "Device display name",
+        kind: "Kind",
+        lang: "Language",
+        profile_tag: "Profile tag",
+        pushkey: "Pushkey",
+        data: { url: "URL" },
+      },
+    },
+    servernotices: {
+      name: "Server Notices",
+      send: "Send server notices",
+      fields: {
+        body: "Message",
+      },
+      action: {
+        send: "Send note",
+        send_success: "Server notice successfully sent.",
+        send_failure: "An error has occurred.",
+      },
+      helper: {
+        send:
+          'Sends a server notice to the selected users. The feature "Server Notices" has to be activated at the server.',
+      },
+    },
+    user_media_statistics: {
+      name: "Users' media",
+      fields: {
+        media_count: "Media count",
+        media_length: "Media length",
+      },
+    },
+  },
+};

src/index.js

@@ -0,0 +1,5 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+
+ReactDOM.render(<App />, document.getElementById("root"));

src/setupTests.js

@@ -0,0 +1,6 @@
+import { configure } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+import fetchMock from "jest-fetch-mock";
+
+configure({ adapter: new Adapter() });
+fetchMock.enableMocks();

src/synapse/authProvider.js

@@ -0,0 +1,73 @@
+import { fetchUtils } from "react-admin";
+
+const authProvider = {
+  // called when the user attempts to log in
+  login: ({ base_url, username, password }) => {
+    console.log("login ");
+    const options = {
+      method: "POST",
+      body: JSON.stringify({
+        type: "m.login.password",
+        user: username,
+        password: password,
+        initial_device_display_name: "Synapse Admin",
+      }),
+    };
+
+    // use the base_url from login instead of the well_known entry from the
+    // server, since the admin might want to access the admin API via some
+    // private address
+    localStorage.setItem("base_url", base_url);
+
+    const decoded_base_url = window.decodeURIComponent(base_url);
+    const login_api_url = decoded_base_url + "/_matrix/client/r0/login";
+
+    return fetchUtils.fetchJson(login_api_url, options).then(({ json }) => {
+      localStorage.setItem("home_server", json.home_server);
+      localStorage.setItem("user_id", json.user_id);
+      localStorage.setItem("access_token", json.access_token);
+      localStorage.setItem("device_id", json.device_id);
+    });
+  },
+  // called when the user clicks on the logout button
+  logout: () => {
+    console.log("logout");
+
+    const logout_api_url =
+      localStorage.getItem("base_url") + "/_matrix/client/r0/logout";
+    const token = localStorage.getItem("access_token");
+
+    const options = {
+      method: "POST",
+      user: {
+        authenticated: true,
+        token: `Bearer ${token}`,
+      },
+    };
+
+    return fetchUtils.fetchJson(logout_api_url, options).then(({ json }) => {
+      localStorage.removeItem("access_token");
+      localStorage.removeItem("device_id");
+    });
+  },
+  // called when the API returns an error
+  checkError: ({ status }) => {
+    console.log("checkError " + status);
+    if (status === 401 || status === 403) {
+      return Promise.reject();
+    }
+    return Promise.resolve();
+  },
+  // called when the user navigates to a new location, to check for authentication
+  checkAuth: () => {
+    const access_token = localStorage.getItem("access_token");
+    console.log("checkAuth " + access_token);
+    return typeof access_token == "string"
+      ? Promise.resolve()
+      : Promise.reject();
+  },
+  // called when the user navigates to a new location, to check for permissions / roles
+  getPermissions: () => Promise.resolve(),
+};
+
+export default authProvider;

src/synapse/dataProvider.js

@@ -0,0 +1,428 @@
+import { fetchUtils } from "react-admin";
+import { stringify } from "query-string";
+
+// Adds the access token to all requests
+const jsonClient = (url, options = {}) => {
+  const token = localStorage.getItem("access_token");
+  console.log("httpClient " + url);
+  if (token != null) {
+    options.user = {
+      authenticated: true,
+      token: `Bearer ${token}`,
+    };
+  }
+  return fetchUtils.fetchJson(url, options);
+};
+
+const mxcUrlToHttp = mxcUrl => {
+  const homeserver = localStorage.getItem("base_url");
+  const re = /^mxc:\/\/([^/]+)\/(\w+)/;
+  var ret = re.exec(mxcUrl);
+  console.log("mxcClient " + ret);
+  if (ret == null) return null;
+  const serverName = ret[1];
+  const mediaId = ret[2];
+  return `${homeserver}/_matrix/media/r0/thumbnail/${serverName}/${mediaId}?width=24&height=24&method=scale`;
+};
+
+const resourceMap = {
+  users: {
+    path: "/_synapse/admin/v2/users",
+    map: u => ({
+      ...u,
+      id: u.name,
+      avatar_src: mxcUrlToHttp(u.avatar_url),
+      is_guest: !!u.is_guest,
+      admin: !!u.admin,
+      deactivated: !!u.deactivated,
+      // need timestamp in milliseconds
+      creation_ts_ms: u.creation_ts * 1000,
+    }),
+    data: "users",
+    total: json => json.total,
+    create: data => ({
+      endpoint: `/_synapse/admin/v2/users/${data.id}`,
+      body: data,
+      method: "PUT",
+    }),
+    delete: params => ({
+      endpoint: `/_synapse/admin/v1/deactivate/${params.id}`,
+      body: { erase: true },
+      method: "POST",
+    }),
+  },
+  rooms: {
+    path: "/_synapse/admin/v1/rooms",
+    map: r => ({
+      ...r,
+      id: r.room_id,
+      alias: r.canonical_alias,
+      members: r.joined_members,
+      is_encrypted: !!r.encryption,
+      federatable: !!r.federatable,
+      public: !!r.public,
+    }),
+    data: "rooms",
+    total: json => {
+      return json.total_rooms;
+    },
+    delete: params => ({
+      endpoint: `/_synapse/admin/v1/rooms/${params.id}/delete`,
+      body: { block: false },
+      method: "POST",
+    }),
+  },
+  reports: {
+    path: "/_synapse/admin/v1/event_reports",
+    map: er => ({
+      ...er,
+      id: er.id,
+    }),
+    data: "event_reports",
+    total: json => json.total,
+  },
+  devices: {
+    map: d => ({
+      ...d,
+      id: d.device_id,
+    }),
+    data: "devices",
+    total: json => {
+      return json.total;
+    },
+    reference: id => ({
+      endpoint: `/_synapse/admin/v2/users/${id}/devices`,
+    }),
+    delete: params => ({
+      endpoint: `/_synapse/admin/v2/users/${params.user_id}/devices/${params.id}`,
+    }),
+  },
+  connections: {
+    path: "/_synapse/admin/v1/whois",
+    map: c => ({
+      ...c,
+      id: c.user_id,
+    }),
+    data: "connections",
+  },
+  room_members: {
+    map: m => ({
+      id: m,
+    }),
+    reference: id => ({
+      endpoint: `/_synapse/admin/v1/rooms/${id}/members`,
+    }),
+    data: "members",
+    total: json => {
+      return json.total;
+    },
+  },
+  pushers: {
+    map: p => ({
+      ...p,
+      id: p.pushkey,
+    }),
+    reference: id => ({
+      endpoint: `/_synapse/admin/v1/users/${id}/pushers`,
+    }),
+    data: "pushers",
+    total: json => {
+      return json.total;
+    },
+  },
+  joined_rooms: {
+    map: jr => ({
+      id: jr,
+    }),
+    reference: id => ({
+      endpoint: `/_synapse/admin/v1/users/${id}/joined_rooms`,
+    }),
+    data: "joined_rooms",
+    total: json => {
+      return json.total;
+    },
+  },
+  users_media: {
+    map: um => ({
+      ...um,
+      id: um.media_id,
+    }),
+    reference: id => ({
+      endpoint: `/_synapse/admin/v1/users/${id}/media`,
+    }),
+    data: "media",
+    total: json => {
+      return json.total;
+    },
+    delete: params => ({
+      endpoint: `/_synapse/admin/v1/media/${localStorage.getItem(
+        "home_server"
+      )}/${params.id}`,
+    }),
+  },
+  servernotices: {
+    map: n => ({ id: n.event_id }),
+    create: data => ({
+      endpoint: "/_synapse/admin/v1/send_server_notice",
+      body: {
+        user_id: data.id,
+        content: {
+          msgtype: "m.text",
+          body: data.body,
+        },
+      },
+      method: "POST",
+    }),
+  },
+  user_media_statistics: {
+    path: "/_synapse/admin/v1/statistics/users/media",
+    map: usms => ({
+      ...usms,
+      id: usms.user_id,
+    }),
+    data: "users",
+    total: json => {
+      return json.total;
+    },
+  },
+};
+
+function filterNullValues(key, value) {
+  // Filtering out null properties
+  if (value === null) {
+    return undefined;
+  }
+  return value;
+}
+
+function getSearchOrder(order) {
+  if (order === "DESC") {
+    return "b";
+  } else {
+    return "f";
+  }
+}
+
+const dataProvider = {
+  getList: (resource, params) => {
+    console.log("getList " + resource);
+    const { user_id, name, guests, deactivated, search_term } = params.filter;
+    const { page, perPage } = params.pagination;
+    const { field, order } = params.sort;
+    const from = (page - 1) * perPage;
+    const query = {
+      from: from,
+      limit: perPage,
+      user_id: user_id,
+      search_term: search_term,
+      name: name,
+      guests: guests,
+      deactivated: deactivated,
+      order_by: field,
+      dir: getSearchOrder(order),
+    };
+    const homeserver = localStorage.getItem("base_url");
+    if (!homeserver || !(resource in resourceMap)) return Promise.reject();
+
+    const res = resourceMap[resource];
+
+    const endpoint_url = homeserver + res.path;
+    const url = `${endpoint_url}?${stringify(query)}`;
+
+    return jsonClient(url).then(({ json }) => ({
+      data: json[res.data].map(res.map),
+      total: res.total(json, from, perPage),
+    }));
+  },
+
+  getOne: (resource, params) => {
+    console.log("getOne " + resource);
+    const homeserver = localStorage.getItem("base_url");
+    if (!homeserver || !(resource in resourceMap)) return Promise.reject();
+
+    const res = resourceMap[resource];
+
+    const endpoint_url = homeserver + res.path;
+    return jsonClient(`${endpoint_url}/${params.id}`).then(({ json }) => ({
+      data: res.map(json),
+    }));
+  },
+
+  getMany: (resource, params) => {
+    console.log("getMany " + resource);
+    const homeserver = localStorage.getItem("base_url");
+    if (!homeserver || !(resource in resourceMap)) return Promise.reject();
+
+    const res = resourceMap[resource];
+
+    const endpoint_url = homeserver + res.path;
+    return Promise.all(
+      params.ids.map(id => jsonClient(`${endpoint_url}/${id}`))
+    ).then(responses => ({
+      data: responses.map(({ json }) => res.map(json)),
+      total: responses.length,
+    }));
+  },
+
+  getManyReference: (resource, params) => {
+    console.log("getManyReference " + resource);
+    const { page, perPage } = params.pagination;
+    const from = (page - 1) * perPage;
+    const query = {
+      from: from,
+      limit: perPage,
+    };
+
+    const homeserver = localStorage.getItem("base_url");
+    if (!homeserver || !(resource in resourceMap)) return Promise.reject();
+
+    const res = resourceMap[resource];
+
+    const ref = res["reference"](params.id);
+    const endpoint_url = `${homeserver}${ref.endpoint}?${stringify(query)}`;
+
+    return jsonClient(endpoint_url).then(({ headers, json }) => ({
+      data: json[res.data].map(res.map),
+      total: res.total(json, from, perPage),
+    }));
+  },
+
+  update: (resource, params) => {
+    console.log("update " + resource);
+    const homeserver = localStorage.getItem("base_url");
+    if (!homeserver || !(resource in resourceMap)) return Promise.reject();
+
+    const res = resourceMap[resource];
+
+    const endpoint_url = homeserver + res.path;
+    return jsonClient(`${endpoint_url}/${params.data.id}`, {
+      method: "PUT",
+      body: JSON.stringify(params.data, filterNullValues),
+    }).then(({ json }) => ({
+      data: res.map(json),
+    }));
+  },
+
+  updateMany: (resource, params) => {
+    console.log("updateMany " + resource);
+    const homeserver = localStorage.getItem("base_url");
+    if (!homeserver || !(resource in resourceMap)) return Promise.reject();
+
+    const res = resourceMap[resource];
+
+    const endpoint_url = homeserver + res.path;
+    return Promise.all(
+      params.ids.map(id => jsonClient(`${endpoint_url}/${id}`), {
+        method: "PUT",
+        body: JSON.stringify(params.data, filterNullValues),
+      })
+    ).then(responses => ({
+      data: responses.map(({ json }) => json),
+    }));
+  },
+
+  create: (resource, params) => {
+    console.log("create " + resource);
+    const homeserver = localStorage.getItem("base_url");
+    if (!homeserver || !(resource in resourceMap)) return Promise.reject();
+
+    const res = resourceMap[resource];
+    if (!("create" in res)) return Promise.reject();
+
+    const create = res["create"](params.data);
+    const endpoint_url = homeserver + create.endpoint;
+    return jsonClient(endpoint_url, {
+      method: create.method,
+      body: JSON.stringify(create.body, filterNullValues),
+    }).then(({ json }) => ({
+      data: res.map(json),
+    }));
+  },
+
+  createMany: (resource, params) => {
+    console.log("createMany " + resource);
+    const homeserver = localStorage.getItem("base_url");
+    if (!homeserver || !(resource in resourceMap)) return Promise.reject();
+
+    const res = resourceMap[resource];
+    if (!("create" in res)) return Promise.reject();
+
+    return Promise.all(
+      params.ids.map(id => {
+        params.data.id = id;
+        const cre = res["create"](params.data);
+        const endpoint_url = homeserver + cre.endpoint;
+        return jsonClient(endpoint_url, {
+          method: cre.method,
+          body: JSON.stringify(cre.body, filterNullValues),
+        });
+      })
+    ).then(responses => ({
+      data: responses.map(({ json }) => json),
+    }));
+  },
+
+  delete: (resource, params) => {
+    console.log("delete " + resource);
+    const homeserver = localStorage.getItem("base_url");
+    if (!homeserver || !(resource in resourceMap)) return Promise.reject();
+
+    const res = resourceMap[resource];
+
+    if ("delete" in res) {
+      const del = res["delete"](params);
+      const endpoint_url = homeserver + del.endpoint;
+      return jsonClient(endpoint_url, {
+        method: "method" in del ? del.method : "DELETE",
+        body: "body" in del ? JSON.stringify(del.body) : null,
+      }).then(({ json }) => ({
+        data: json,
+      }));
+    } else {
+      const endpoint_url = homeserver + res.path;
+      return jsonClient(`${endpoint_url}/${params.id}`, {
+        method: "DELETE",
+        body: JSON.stringify(params.data, filterNullValues),
+      }).then(({ json }) => ({
+        data: json,
+      }));
+    }
+  },
+
+  deleteMany: (resource, params) => {
+    console.log("deleteMany " + resource);
+    const homeserver = localStorage.getItem("base_url");
+    if (!homeserver || !(resource in resourceMap)) return Promise.reject();
+
+    const res = resourceMap[resource];
+
+    if ("delete" in res) {
+      return Promise.all(
+        params.ids.map(id => {
+          const del = res["delete"]({ ...params, id: id });
+          const endpoint_url = homeserver + del.endpoint;
+          return jsonClient(endpoint_url, {
+            method: "method" in del ? del.method : "DELETE",
+            body: "body" in del ? JSON.stringify(del.body) : null,
+          });
+        })
+      ).then(responses => ({
+        data: responses.map(({ json }) => json),
+      }));
+    } else {
+      const endpoint_url = homeserver + res.path;
+      return Promise.all(
+        params.ids.map(id =>
+          jsonClient(`${endpoint_url}/${id}`, {
+            method: "DELETE",
+            body: JSON.stringify(params.data, filterNullValues),
+          })
+        )
+      ).then(responses => ({
+        data: responses.map(({ json }) => json),
+      }));
+    }
+  },
+};
+
+export default dataProvider;

src/synapse/dataProvider.test.js

@@ -0,0 +1,78 @@
+import dataProvider from "./dataProvider";
+
+beforeEach(() => {
+  fetch.resetMocks();
+});
+
+describe("dataProvider", () => {
+  localStorage.setItem("base_url", "http://localhost");
+  localStorage.setItem("access_token", "access_token");
+
+  it("fetches all users", async () => {
+    fetch.mockResponseOnce(
+      JSON.stringify({
+        users: [
+          {
+            name: "user_id1",
+            password_hash: "password_hash1",
+            is_guest: 0,
+            admin: 0,
+            user_type: null,
+            deactivated: 0,
+            displayname: "User One",
+          },
+          {
+            name: "user_id2",
+            password_hash: "password_hash2",
+            is_guest: 0,
+            admin: 1,
+            user_type: null,
+            deactivated: 0,
+            displayname: "User Two",
+          },
+        ],
+        next_token: "100",
+        total: 200,
+      })
+    );
+
+    const users = await dataProvider.getList("users", {
+      pagination: { page: 1, perPage: 5 },
+      sort: { field: "title", order: "ASC" },
+      filter: { author_id: 12 },
+    });
+
+    expect(users["data"][0]["id"]).toEqual("user_id1");
+    expect(users["total"]).toEqual(200);
+    expect(fetch).toHaveBeenCalledTimes(1);
+  });
+
+  it("fetches one user", async () => {
+    fetch.mockResponseOnce(
+      JSON.stringify({
+        name: "user_id1",
+        password: "user_password",
+        displayname: "User",
+        threepids: [
+          {
+            medium: "email",
+            address: "user@mail_1.com",
+          },
+          {
+            medium: "email",
+            address: "user@mail_2.com",
+          },
+        ],
+        avatar_url: "mxc://localhost/user1",
+        admin: false,
+        deactivated: false,
+      })
+    );
+
+    const user = await dataProvider.getOne("users", { id: "user_id1" });
+
+    expect(user["data"]["id"]).toEqual("user_id1");
+    expect(user["data"]["displayname"]).toEqual("User");
+    expect(fetch).toHaveBeenCalledTimes(1);
+  });
+});

static/js/main.fc285a6d.js.LICENSE.txt

@@ -1,116 +0,0 @@
-/* @license
-Papa Parse
-v5.4.1
-https://github.com/mholt/PapaParse
-License: MIT
-*/
-
-/*!
- * inflection
- * Copyright(c) 2011 Ben Lin <ben@dreamerslab.com>
- * MIT Licensed
- *
- * @fileoverview
- * A port of inflection-js to node.js module.
- */
-
-/**
- * @license React
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @remix-run/router v1.15.1
- *
- * Copyright (c) Remix Software Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-
-/**
- * React Router DOM v6.22.1
- *
- * Copyright (c) Remix Software Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-
-/**
- * React Router v6.22.1
- *
- * Copyright (c) Remix Software Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */