Merge tag '0.8.0' into amp.chat

Change-Id: I2e362a911083149c82a8c11b6c4594bb4c760a33

.env

@@ -1,5 +0,0 @@
-# This setting allows to fix the homeserver.
-# If you set this setting, the user will not be able to select
-# the server and have to use synapse-admin with this server.
-
-#REACT_APP_SERVER=https://yourmatrixserver.example.com

.github/workflows/build-test.yml

@@ -1,21 +0,0 @@
-name: build-test
-
-on:
-  push:
-    branches: ["master"]
-  pull_request:
-
-jobs:
-  check:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Setup node
-        uses: actions/setup-node@v2
-        with:
-          node-version: 14
-      - name: Install dependencies
-        run: yarn --frozen-lockfile
-      - name: Run tests
-        run: yarn test

.github/workflows/docker-release.yml

@@ -1,36 +0,0 @@
-name: Create docker image(s) and push to docker hub
-
-on:
-  push:
-    tags:
-      - '[0-9]+\.[0-9]+\.[0-9]+'
-
-jobs:
-  docker:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v1
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
-      - name: Login to DockerHub
-        uses: docker/login-action@v1
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - name: Build and push
-        uses: docker/build-push-action@v2
-        with:
-          context: .
-          platforms: linux/amd64,linux/arm64
-          push: true
-          tags: awesometechnologies/synapse-admin:latest
-      - name: Update repo description
-        uses: peter-evans/dockerhub-description@v2
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-          repository: awesometechnologies/synapse-admin

.github/workflows/github-release.yml

@@ -1,28 +0,0 @@
-name: Create release tarball and attach to tag
-
-on:
-  push:
-    tags:
-      - "*"
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: "14"
-      - run: yarn install
-      - run: yarn build
-      - run: |
-          version=`git describe --dirty --tags || echo unknown`
-          mkdir -p dist
-          cp -r build synapse-admin-$version
-          tar chvzf dist/synapse-admin-$version.tar.gz synapse-admin-$version
-      - uses: softprops/action-gh-release@b7e450da2a4b4cb4bfbae528f788167786cfcedf
-        with:
-          files: dist/*.tar.gz
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.travis.yml

@@ -1,5 +1,5 @@
 language: node_js
 node_js:
-  - lts/*
+  - 13
 
 cache: yarn

README.md

@@ -1,14 +1,13 @@
 [![Build Status](https://travis-ci.org/Awesome-Technologies/synapse-admin.svg?branch=master)](https://travis-ci.org/Awesome-Technologies/synapse-admin)
-[![build-test](https://github.com/Awesome-Technologies/synapse-admin/actions/workflows/build-test.yml/badge.svg)](https://github.com/Awesome-Technologies/synapse-admin/actions/workflows/build-test.yml)
 
 # Synapse admin ui
 
 This project is built using [react-admin](https://marmelab.com/react-admin/).
 
-It needs at least Synapse v1.38.0 for all functions to work as expected!
+It needs at least Synapse v1.27.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://matrix-org.github.io/synapse/develop/admin_api/version_api.html).
+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.
 
@@ -17,41 +16,26 @@ You need access to the following endpoints:
 - `/_matrix`
 - `/_synapse/admin`
 
-See also [Synapse administration endpoints](https://matrix-org.github.io/synapse/develop/reverse_proxy.html#synapse-administration-endpoints)
+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 three options:
+You have two options:
 
-1.  Download the tarball and serve with any webserver
-2.  Download the source code from github and run using nodejs
-3.  Run the Docker container
+1.  Download the source code from github and run using nodejs
+2.  Run the Docker container
 
 Steps for 1):
 
-- make sure you have a webserver installed that can serve static files (any webserver like nginx or apache will do)
-- configure a vhost for synapse admin on your webserver
-- download the .tar.gz from the latest release: https://github.com/Awesome-Technologies/synapse-admin/releases/latest
-- unpack the .tar.gz
-- move or symlink the `synapse-admin-x.x.x` into your vhosts root dir
-- open the url of the vhost in your browser
-
-Steps for 2):
-
 - 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`
 
-You can fix the homeserver, so that the user can no longer define it himself.
-Either you define it at startup (e.g. `REACT_APP_SERVER=https://yourmatrixserver.example.com yarn start`)
-or by editing it in the [.env](.env) file. See also the
-[documentation](https://create-react-app.dev/docs/adding-custom-environment-variables/).
+Steps for 2):
 
-Steps for 3):
-
-- run the Docker container from the public docker registry: `docker run -p 8080:80 awesometechnologies/synapse-admin` or use the [docker-compose.yml](docker-compose.yml): `docker-compose up -d`
+- run the Docker container from the public docker registry: `docker run -p 8080:80 awesometechnologies/synapse-admin` or use the (docker-compose.yml)[docker-compose.yml]: `docker-compose up -d`
 
   > note: if you're building on an architecture other than amd64 (for example a raspberry pi), make sure to define a maximum ram for node. otherwise the build will fail.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "synapse-admin",
-  "version": "0.8.3",
+  "version": "AMP/2021.05",
   "description": "Admin GUI for the Matrix.org server Synapse",
   "author": "Awesome Technologies Innovationslabor GmbH",
   "license": "Apache-2.0",
@@ -11,24 +11,30 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.1.1",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^13.1.8",
-    "eslint": "^7.25.0",
-    "eslint-config-prettier": "^8.3.0",
+    "@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.2.0",
-    "ra-test": "^3.15.0"
+    "prettier": "^2.0.0",
+    "ra-test": "^3.14.0"
   },
   "dependencies": {
+    "@progress/kendo-drawing": "^1.6.0",
+    "@progress/kendo-react-pdf": "^3.10.1",
+    "babel-preset-jest": "^24.9.0",
     "papaparse": "^5.2.0",
     "prop-types": "^15.7.2",
+    "qrcode.react": "^1.0.0",
     "ra-language-chinese": "^2.0.10",
-    "ra-language-german": "^3.13.4",
+    "ra-language-german": "^2.1.2",
     "react": "^17.0.0",
-    "react-admin": "^3.15.0",
-    "react-dom": "^17.0.2",
-    "react-scripts": "^4.0.0"
+    "react-admin": "^3.14.0",
+    "react-dom": "^16.14.0",
+    "react-scripts": "^3.4.4"
   },
   "scripts": {
     "start": "REACT_APP_VERSION=$(git describe --tags) react-scripts start",
@@ -36,7 +42,7 @@
     "fix:other": "yarn prettier --write",
     "fix:code": "yarn test:lint --fix",
     "fix": "yarn fix:code && yarn fix:other",
-    "prettier": "prettier --ignore-path .gitignore \"**/*.{js,jsx,json,md,scss,yaml,yml}\"",
+    "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",

public/index.html

@@ -9,6 +9,32 @@
       name="description"
       content="Synapse-Admin"
     />
+    <style>
+      @font-face {
+        font-family: "DejaVu Sans";
+        src: url("%PUBLIC_URL%/fonts/DejaVu/DejaVuSans.ttf") format("truetype");
+      }
+      @font-face {
+        font-family: "DejaVu Sans";
+        font-weight: bold;
+        src: url("%PUBLIC_URL%/fonts/DejaVu/DejaVuSans-Bold.ttf") format("truetype");
+      }
+      @font-face {
+        font-family: "DejaVu Sans";
+        font-style: italic;
+        src: url("%PUBLIC_URL%/fonts/DejaVu/DejaVuSans-Oblique.ttf") format("truetype");
+      }
+      @font-face {
+        font-family: "DejaVu Sans";
+        font-weight: bold;
+        font-style: italic;
+        src: url("%PUBLIC_URL%/fonts/DejaVu/DejaVuSans-Oblique.ttf") format("truetype");
+      }
+      @font-face {
+        font-family: "DejaVu Sans Mono";
+        src: url("%PUBLIC_URL%/fonts/DejaVu/DejaVuSans-Mono.ttf") format("truetype");
+      }
+    </style>
     <!--
       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/
@@ -46,4 +72,4 @@
       </a>
     </footer>
   </body>
-</html>
+</html>

src/App.js

@@ -4,7 +4,7 @@ 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 { RoomList, RoomCreate, RoomShow, RoomEdit } from "./components/rooms";
 import { ReportList, ReportShow } from "./components/EventReports";
 import LoginPage from "./components/LoginPage";
 import UserIcon from "@material-ui/icons/Group";
@@ -19,6 +19,7 @@ import { Route } from "react-router-dom";
 import germanMessages from "./i18n/de";
 import englishMessages from "./i18n/en";
 import chineseMessages from "./i18n/zh";
+import ShowUserPdf from "./components/ShowUserPdf";
 
 // TODO: Can we use lazy loading together with browser locale?
 const messages = {
@@ -39,7 +40,7 @@ const App = () => (
     dataProvider={dataProvider}
     i18nProvider={i18nProvider}
     customRoutes={[
-      <Route key="userImport" path="/import_users" component={ImportFeature} />,
+      <Route key="showpdf" path="/showpdf" component={ShowUserPdf} />,
     ]}
   >
     <Resource
@@ -49,7 +50,14 @@ const App = () => (
       edit={UserEdit}
       icon={UserIcon}
     />
-    <Resource name="rooms" list={RoomList} show={RoomShow} icon={RoomIcon} />
+    <Resource
+      name="rooms"
+      list={RoomList}
+      create={RoomCreate}
+      show={RoomShow}
+      edit={RoomEdit}
+      icon={RoomIcon}
+    />
     <Resource
       name="user_media_statistics"
       list={UserMediaStatsList}
@@ -73,7 +81,6 @@ const App = () => (
     <Resource name="joined_rooms" />
     <Resource name="pushers" />
     <Resource name="servernotices" />
-    <Resource name="forward_extremities" />
     <Resource name="room_state" />
   </Admin>
 );

src/App.test.js

@@ -1,9 +1,14 @@
 import React from "react";
-import { render } from "@testing-library/react";
+import { TestContext } from "ra-test";
+import { shallow } from "enzyme";
 import App from "./App";
 
 describe("App", () => {
   it("renders", () => {
-    render(<App />);
+    shallow(
+      <TestContext>
+        <App />
+      </TestContext>
+    );
   });
 });

src/components/LoginPage.js

@@ -82,7 +82,6 @@ const LoginPage = ({ theme }) => {
   const setLocale = useSetLocale();
   const translate = useTranslate();
   const base_url = localStorage.getItem("base_url");
-  const cfg_base_url = process.env.REACT_APP_SERVER;
 
   const renderInput = ({
     meta: { touched, error } = {},
@@ -112,9 +111,7 @@ const LoginPage = ({ theme }) => {
       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})?[^?&\s]*$/
-        )
+        !values.base_url.match(/^(http|https):\/\/[a-zA-Z0-9\-.]+(:\d{1,5})?$/)
       ) {
         errors.base_url = translate("synapseadmin.auth.url_error");
       }
@@ -150,7 +147,7 @@ const LoginPage = ({ theme }) => {
     const [serverVersion, setServerVersion] = useState("");
 
     const handleUsernameChange = _ => {
-      if (formData.base_url || cfg_base_url) return;
+      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`;
@@ -202,7 +199,6 @@ const LoginPage = ({ theme }) => {
             label={translate("ra.auth.username")}
             disabled={loading}
             onBlur={handleUsernameChange}
-            resettable
             fullWidth
           />
         </div>
@@ -213,7 +209,6 @@ const LoginPage = ({ theme }) => {
             label={translate("ra.auth.password")}
             type="password"
             disabled={loading}
-            resettable
             fullWidth
           />
         </div>
@@ -222,8 +217,7 @@ const LoginPage = ({ theme }) => {
             name="base_url"
             component={renderInput}
             label={translate("synapseadmin.auth.base_url")}
-            disabled={cfg_base_url || loading}
-            resettable
+            disabled={loading}
             fullWidth
           />
         </div>
@@ -234,7 +228,7 @@ const LoginPage = ({ theme }) => {
 
   return (
     <Form
-      initialValues={{ base_url: cfg_base_url || base_url }}
+      initialValues={{ base_url: base_url }}
       onSubmit={handleSubmit}
       validate={validate}
       render={({ handleSubmit }) => (

src/components/LoginPage.test.js

@@ -1,11 +1,11 @@
 import React from "react";
-import { render } from "@testing-library/react";
 import { TestContext } from "ra-test";
+import { shallow } from "enzyme";
 import LoginPage from "./LoginPage";
 
 describe("LoginForm", () => {
   it("renders", () => {
-    render(
+    shallow(
       <TestContext>
         <LoginPage />
       </TestContext>

src/components/RoomDirectory.js

@@ -171,14 +171,10 @@ const RoomDirectoryFilter = ({ ...props }) => {
   );
 };
 
-export const FilterableRoomDirectoryList = ({
-  roomDirectoryFilters,
-  dispatch,
-  ...props
-}) => {
+export const FilterableRoomDirectoryList = ({ ...props }) => {
   const classes = useStyles();
   const translate = useTranslate();
-  const filter = roomDirectoryFilters;
+  const filter = props.roomDirectoryFilters;
   const roomIdFilter = filter && filter.room_id ? true : false;
   const topicFilter = filter && filter.topic ? true : false;
   const canonicalAliasFilter = filter && filter.canonical_alias ? true : false;

src/components/SaveQrButton.js

@@ -0,0 +1,35 @@
+import React, { useCallback } from "react";
+import { SaveButton, useCreate, useRedirect, useNotify } from "react-admin";
+
+const SaveQrButton = props => {
+  const [create] = useCreate("users");
+  const redirectTo = useRedirect();
+  const notify = useNotify();
+  const { basePath } = props;
+
+  const handleSave = useCallback(
+    (values, redirect) => {
+      create(
+        {
+          payload: { data: { ...values } },
+        },
+        {
+          onSuccess: ({ data: newRecord }) => {
+            notify("ra.notification.created", "info", {
+              smart_count: 1,
+            });
+            redirectTo(redirect, basePath, newRecord.id, {
+              password: values.password,
+              ...newRecord,
+            });
+          },
+        }
+      );
+    },
+    [create, notify, redirectTo, basePath]
+  );
+
+  return <SaveButton {...props} onSave={handleSave} />;
+};
+
+export default SaveQrButton;

src/components/ShowUserPdf.js

@@ -0,0 +1,210 @@
+import React from "react";
+import { Title, Button } from "react-admin";
+import { makeStyles } from "@material-ui/core/styles";
+import { PDFExport } from "@progress/kendo-react-pdf";
+import QRCode from "qrcode.react";
+
+function xor(a, b) {
+  var res = "";
+  for (var i = 0; i < a.length; i++) {
+    res += String.fromCharCode(a.charCodeAt(i) ^ b.charCodeAt(i % b.length));
+  }
+  return res;
+}
+
+function calculateQrString(serverUrl, username, password) {
+  const magicString = "wo9k5tep252qxsa5yde7366kugy6c01w7oeeya9hrmpf0t7ii7";
+  var urlString = "user=" + username + "&password=" + password;
+
+  urlString = xor(urlString, magicString); // xor with magic string
+  urlString = btoa(urlString); // to base64
+
+  return serverUrl + "/#" + urlString;
+}
+
+const ShowUserPdf = props => {
+  const useStyles = makeStyles(theme => ({
+    page: {
+      height: 800,
+      width: 566,
+      padding: "none",
+      backgroundColor: "white",
+      boxShadow: "5px 5px 5px black",
+      margin: "auto",
+      overflowX: "hidden",
+      overflowY: "hidden",
+      fontFamily: "DejaVu Sans, Sans-Serif",
+      fontSize: 15,
+    },
+    header: {
+      height: 144,
+      width: 534,
+      marginLeft: 32,
+      marginTop: 15,
+    },
+    name: {
+      width: 240,
+      fontSize: 35,
+      float: "left",
+      marginTop: 100,
+    },
+    logo: {
+      width: 90,
+      marginTop: 50,
+      marginRight: 70,
+      float: "right",
+    },
+    body: {
+      clear: "both",
+    },
+    table_cell: {
+      verticalAlign: "top",
+    },
+    code_note: {
+      marginLeft: 32,
+      marginTop: 86,
+    },
+    qr: {
+      marginTop: 15,
+      marginLeft: 32,
+    },
+    credentials_note: {
+      marginTop: 86,
+      marginLeft: 10,
+    },
+    credentials_text: {
+      marginLeft: 10,
+      fontSize: 12,
+    },
+    credentials: {
+      fontFamily: "DejaVu Sans Mono, monospace",
+    },
+    note: {
+      fontSize: 18,
+      marginTop: 100,
+      marginLeft: 32,
+      marginRight: 32,
+    },
+  }));
+
+  const classes = useStyles();
+
+  var resume;
+
+  const exportPDF = () => {
+    resume.save();
+  };
+
+  var qrCode = "";
+  var displayname = "";
+  var id = "";
+  var password = "";
+  var username = "";
+  var serverUrl = "";
+
+  if (
+    props.location.state &&
+    props.location.state.id &&
+    props.location.state.password
+  ) {
+    id = props.location.state.id;
+    password = props.location.state.password;
+
+    username = id.substring(1, id.indexOf(":"));
+    serverUrl = "https://" + id.substring(id.indexOf(":") + 1);
+
+    const qrString = calculateQrString(serverUrl, username, password);
+
+    qrCode = <QRCode value={qrString} size={128} />;
+    displayname = props.location.state.displayname;
+  }
+
+  return (
+    <div>
+      <Title title="PDF" />
+      <Button label="synapseadmin.action.download_pdf" onClick={exportPDF} />
+
+      <PDFExport
+        paperSize={"A4"}
+        fileName="User.pdf"
+        title=""
+        subject=""
+        keywords=""
+        ref={r => (resume = r)}
+      >
+        <div className={classes.page}>
+          <div className={classes.header}>
+            <div className={classes.name}>{displayname}</div>
+            <img className={classes.logo} alt="Logo" src="images/logo.png" />
+          </div>
+          <div className={classes.body}>
+            <table>
+              <tbody>
+                <tr>
+                  <td width="200px">
+                    <div className={classes.code_note}>
+                      Ihr persönlicher Anmeldecode:
+                    </div>
+                  </td>
+                  <td className={classes.table_cell}>
+                    <div className={classes.credentials_note}>
+                      Ihre persönlichen Zugangsdaten:
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <div className={classes.qr}>{qrCode}</div>
+                  </td>
+                  <td className={classes.table_cell}>
+                    <div className={classes.credentials_text}>
+                      <br />
+                      <table>
+                        <tbody>
+                          <tr>
+                            <td>Heimserver:</td>
+                            <td>
+                              <span className={classes.credentials}>
+                                {serverUrl}
+                              </span>
+                            </td>
+                          </tr>
+                          <tr>
+                            <td>Benutzername:</td>
+                            <td>
+                              <span className={classes.credentials}>
+                                {username}
+                              </span>
+                            </td>
+                          </tr>
+                          <tr>
+                            <td>Passwort:</td>
+                            <td>
+                              <span className={classes.credentials}>
+                                {password}
+                              </span>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <div className={classes.note}>
+              Hier können Sie Ihre selbst gewählte
+              Schlüsselsicherungs-Passphrase notieren:
+              <br />
+              <br />
+              <br />
+              <hr />
+            </div>
+          </div>
+        </div>
+      </PDFExport>
+    </div>
+  );
+};
+
+export default ShowUserPdf;

src/components/media.js

@@ -2,7 +2,6 @@ import React, { Fragment, useState } from "react";
 import classnames from "classnames";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import { makeStyles } from "@material-ui/core/styles";
-import { Tooltip } from "@material-ui/core";
 import {
   BooleanInput,
   Button,
@@ -11,22 +10,16 @@ import {
   SaveButton,
   SimpleForm,
   Toolbar,
-  useCreate,
   useDelete,
   useNotify,
-  useRefresh,
   useTranslate,
 } from "react-admin";
-import BlockIcon from "@material-ui/icons/Block";
-import ClearIcon from "@material-ui/icons/Clear";
-import DeleteSweepIcon from "@material-ui/icons/DeleteSweep";
+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";
-import IconCancel from "@material-ui/icons/Cancel";
-import LockIcon from "@material-ui/icons/Lock";
-import LockOpenIcon from "@material-ui/icons/LockOpen";
+import DeleteSweepIcon from "@material-ui/icons/DeleteSweep";
 
 const useStyles = makeStyles(
   theme => ({
@@ -150,178 +143,3 @@ export const DeleteMediaButton = props => {
     </Fragment>
   );
 };
-
-export const ProtectMediaButton = props => {
-  const { record } = props;
-  const translate = useTranslate();
-  const refresh = useRefresh();
-  const notify = useNotify();
-  const [create, { loading }] = useCreate("protect_media");
-  const [deleteOne] = useDelete("protect_media");
-
-  if (!record) return null;
-
-  const handleProtect = () => {
-    create(
-      { payload: { data: record } },
-      {
-        onSuccess: () => {
-          notify("resources.protect_media.action.send_success");
-          refresh();
-        },
-        onFailure: () =>
-          notify("resources.protect_media.action.send_failure", "error"),
-      }
-    );
-  };
-
-  const handleUnprotect = () => {
-    deleteOne(
-      { payload: { ...record } },
-      {
-        onSuccess: () => {
-          notify("resources.protect_media.action.send_success");
-          refresh();
-        },
-        onFailure: () =>
-          notify("resources.protect_media.action.send_failure", "error"),
-      }
-    );
-  };
-
-  return (
-    /*
-    Wrapping Tooltip with <div>
-    https://github.com/marmelab/react-admin/issues/4349#issuecomment-578594735
-    */
-    <Fragment>
-      {record.quarantined_by && (
-        <Tooltip
-          title={translate("resources.protect_media.action.none", {
-            _: "resources.protect_media.action.none",
-          })}
-        >
-          <div>
-            {/*
-            Button instead BooleanField for
-            consistent appearance and position in the column
-            */}
-            <Button disabled={true}>
-              <ClearIcon />
-            </Button>
-          </div>
-        </Tooltip>
-      )}
-      {record.safe_from_quarantine && (
-        <Tooltip
-          title={translate("resources.protect_media.action.delete", {
-            _: "resources.protect_media.action.delete",
-          })}
-          arrow
-        >
-          <div>
-            <Button onClick={handleUnprotect} disabled={loading}>
-              <LockIcon />
-            </Button>
-          </div>
-        </Tooltip>
-      )}
-      {!record.safe_from_quarantine && !record.quarantined_by && (
-        <Tooltip
-          title={translate("resources.protect_media.action.create", {
-            _: "resources.protect_media.action.create",
-          })}
-        >
-          <div>
-            <Button onClick={handleProtect} disabled={loading}>
-              <LockOpenIcon />
-            </Button>
-          </div>
-        </Tooltip>
-      )}
-    </Fragment>
-  );
-};
-
-export const QuarantineMediaButton = props => {
-  const { record } = props;
-  const translate = useTranslate();
-  const refresh = useRefresh();
-  const notify = useNotify();
-  const [create, { loading }] = useCreate("quarantine_media");
-  const [deleteOne] = useDelete("quarantine_media");
-
-  if (!record) return null;
-
-  const handleQuarantaine = () => {
-    create(
-      { payload: { data: record } },
-      {
-        onSuccess: () => {
-          notify("resources.quarantine_media.action.send_success");
-          refresh();
-        },
-        onFailure: () =>
-          notify("resources.quarantine_media.action.send_failure", "error"),
-      }
-    );
-  };
-
-  const handleRemoveQuarantaine = () => {
-    deleteOne(
-      { payload: { ...record } },
-      {
-        onSuccess: () => {
-          notify("resources.quarantine_media.action.send_success");
-          refresh();
-        },
-        onFailure: () =>
-          notify("resources.quarantine_media.action.send_failure", "error"),
-      }
-    );
-  };
-
-  return (
-    <Fragment>
-      {record.safe_from_quarantine && (
-        <Tooltip
-          title={translate("resources.quarantine_media.action.none", {
-            _: "resources.quarantine_media.action.none",
-          })}
-        >
-          <div>
-            <Button disabled={true}>
-              <ClearIcon />
-            </Button>
-          </div>
-        </Tooltip>
-      )}
-      {record.quarantined_by && (
-        <Tooltip
-          title={translate("resources.quarantine_media.action.delete", {
-            _: "resources.quarantine_media.action.delete",
-          })}
-        >
-          <div>
-            <Button onClick={handleRemoveQuarantaine} disabled={loading}>
-              <BlockIcon color="error" />
-            </Button>
-          </div>
-        </Tooltip>
-      )}
-      {!record.safe_from_quarantine && !record.quarantined_by && (
-        <Tooltip
-          title={translate("resources.quarantine_media.action.create", {
-            _: "resources.quarantine_media.action.create",
-          })}
-        >
-          <div>
-            <Button onClick={handleQuarantaine} disabled={loading}>
-              <BlockIcon />
-            </Button>
-          </div>
-        </Tooltip>
-      )}
-    </Fragment>
-  );
-};

src/components/rooms.js

@@ -1,38 +1,59 @@
 import React, { Fragment } from "react";
 import { connect } from "react-redux";
+import { Route, Link } from "react-router-dom";
 import {
+  AutocompleteArrayInput,
+  AutocompleteInput,
+  BooleanInput,
   BooleanField,
   BulkDeleteButton,
-  DateField,
+  Button,
+  Create,
+  Edit,
   Datagrid,
+  DateField,
   DeleteButton,
   Filter,
+  FormTab,
   List,
-  NumberField,
   Pagination,
+  ReferenceArrayInput,
   ReferenceField,
+  ReferenceInput,
   ReferenceManyField,
   SearchInput,
   SelectField,
   Show,
+  SimpleForm,
   Tab,
+  TabbedForm,
   TabbedShowLayout,
   TextField,
+  TextInput,
+  Toolbar,
   TopToolbar,
-  useRecordContext,
+  useDataProvider,
+  useRefresh,
   useTranslate,
 } from "react-admin";
 import get from "lodash/get";
-import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
-import { Tooltip, Typography, Chip } from "@material-ui/core";
-import FastForwardIcon from "@material-ui/icons/FastForward";
+import {
+  Tooltip,
+  Typography,
+  Chip,
+  Drawer,
+  styled,
+  withStyles,
+  Select,
+  MenuItem,
+} 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";
+import ContentSave from "@material-ui/icons/Save";
 import EventIcon from "@material-ui/icons/Event";
 import {
   RoomDirectoryBulkDeleteButton,
@@ -41,13 +62,6 @@ import {
   RoomDirectorySaveButton,
 } from "./RoomDirectory";
 
-const useStyles = makeStyles(theme => ({
-  helper_forward_extremities: {
-    fontFamily: "Roboto, Helvetica, Arial, sans-serif",
-    margin: "0.5em",
-  },
-}));
-
 const RoomPagination = props => (
   <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
 );
@@ -78,20 +92,368 @@ const EncryptionField = ({ source, record = {}, emptyText }) => {
   );
 };
 
-const RoomTitle = ({ record }) => {
-  const translate = useTranslate();
-  var name = "";
-  if (record) {
-    name = record.name !== "" ? record.name : record.id;
+const validateDisplayName = fieldval => {
+  return fieldval == null
+    ? "synapseadmin.rooms.room_name_required"
+    : fieldval.length === 0
+    ? "synapseadmin.rooms.room_name_required"
+    : undefined;
+};
+
+function approximateAliasLength(alias, homeserver) {
+  /* TODO maybe handle punycode in homeserver name */
+
+  var te;
+
+  // Support for TextEncoder is quite widespread, but the polyfill is
+  // pretty large; We will only underestimate the size with the regular
+  // length attribute of String, so we never prevent the user from using
+  // an alias that is short enough for the server, but too long for our
+  // heuristic.
+  try {
+    te = new TextEncoder();
+  } catch (err) {
+    if (err instanceof ReferenceError) {
+      te = undefined;
+    }
   }
 
+  const aliasLength = te === undefined ? alias.length : te.encode(alias).length;
+
+  return "#".length + aliasLength + ":".length + homeserver.length;
+}
+
+const validateAlias = fieldval => {
+  if (fieldval === undefined) {
+    return undefined;
+  }
+  const homeserver = localStorage.getItem("home_server");
+
+  if (approximateAliasLength(fieldval, homeserver) > 255) {
+    return "synapseadmin.rooms.alias_too_long";
+  }
+};
+
+const removeLeadingWhitespace = fieldVal =>
+  fieldVal === undefined ? undefined : fieldVal.trimStart();
+const replaceAllWhitespace = fieldVal =>
+  fieldVal === undefined ? undefined : fieldVal.replace(/\s/, "_");
+const removeLeadingSigil = fieldVal =>
+  fieldVal === undefined
+    ? undefined
+    : fieldVal.startsWith("#")
+    ? fieldVal.substr(1)
+    : fieldVal;
+
+const validateHasAliasIfPublic = formdata => {
+  let errors = {};
+  if (formdata.public) {
+    if (
+      formdata.canonical_alias === undefined ||
+      formdata.canonical_alias.trim().length === 0
+    ) {
+      errors.canonical_alias = "synapseadmin.rooms.alias_required_if_public";
+    }
+  }
+  return errors;
+};
+
+export const RoomCreate = props => (
+  <Create {...props}>
+    <TabbedForm validate={validateHasAliasIfPublic}>
+      <FormTab label="synapseadmin.rooms.details" icon={<ViewListIcon />}>
+        <TextInput
+          source="name"
+          parse={removeLeadingWhitespace}
+          validate={validateDisplayName}
+        />
+        <TextInput
+          source="canonical_alias"
+          parse={fv => replaceAllWhitespace(removeLeadingSigil(fv))}
+          validate={validateAlias}
+          placeholder="#"
+        />
+        <ReferenceInput
+          reference="users"
+          source="owner"
+          filterToQuery={searchText => ({ user_id: searchText })}
+        >
+          <AutocompleteInput
+            optionText="displayname"
+            suggestionText="displayname"
+          />
+        </ReferenceInput>
+        <BooleanInput source="public" label="synapseadmin.rooms.make_public" />
+        <BooleanInput
+          source="encrypt"
+          initialValue={true}
+          label="synapseadmin.rooms.encrypt"
+        />
+      </FormTab>
+      <FormTab
+        label="resources.rooms.fields.invite_members"
+        icon={<UserIcon />}
+      >
+        <ReferenceArrayInput
+          reference="users"
+          source="invitees"
+          filterToQuery={searchText => ({ user_id: searchText })}
+        >
+          <AutocompleteArrayInput
+            optionText="displayname"
+            suggestionText="displayname"
+          />
+        </ReferenceArrayInput>
+      </FormTab>
+    </TabbedForm>
+  </Create>
+);
+
+const RoomTitle = ({ record }) => {
+  const translate = useTranslate();
   return (
     <span>
-      {translate("resources.rooms.name", 1)} {name}
+      {translate("resources.rooms.name", 1)} {record ? `"${record.name}"` : ""}
     </span>
   );
 };
 
+// Explicitely passing "to" prop
+// Toolbar adds all kinds of unsupported props to its children :(
+const StyledLink = styles => {
+  const Styled = styled(Link)(styles);
+  return ({ to, children }) => <Styled to={to}>{children}</Styled>;
+};
+
+const RoomMemberEditToolbar = ({ backLink, translate, onSave, ...props }) => {
+  const SaveLink = StyledLink({
+    textDecoration: "none",
+  });
+  const CancelLink = StyledLink({
+    textDecoration: "none",
+    marginLeft: "1em",
+  });
+  const SaveIcon = styled(ContentSave)({
+    width: "1rem",
+    marginRight: "0.25em",
+  });
+
+  return (
+    <Toolbar {...props}>
+      <SaveLink to={backLink}>
+        <Button onClick={onSave} variant="contained">
+          <React.Fragment>
+            <SaveIcon />
+            {translate("ra.action.save")}
+          </React.Fragment>
+        </Button>
+      </SaveLink>
+      <CancelLink to={backLink}>
+        <Button>
+          <React.Fragment>{translate("ra.action.cancel")}</React.Fragment>
+        </Button>
+      </CancelLink>
+    </Toolbar>
+  );
+};
+
+const RoomMemberIdField = ({ memberId, data = {} }) => {
+  const value = get(data[memberId], "id");
+
+  return (
+    <Typography component="span" variant="body2">
+      {value}
+    </Typography>
+  );
+};
+
+const RoomMemberRoleInput = ({ memberId, data = {}, translate, onChange }) => {
+  const roleValue = get(data[memberId], "role");
+  const [role, setRole] = React.useState(roleValue);
+
+  React.useEffect(() => {
+    onChange(roleValue);
+  }, [onChange, roleValue]);
+
+  return (
+    <React.Fragment>
+      <Select
+        labelId="demo-simple-select-label"
+        id="demo-simple-select"
+        value={role}
+        onChange={event => {
+          setRole(event.target.value);
+          onChange(event.target.value);
+        }}
+      >
+        <MenuItem value={"user"}>
+          {translate("resources.users.roles.user")}
+        </MenuItem>
+        <MenuItem value={"mod"}>
+          {translate("resources.users.roles.mod")}
+        </MenuItem>
+        <MenuItem value={"admin"}>
+          {translate("resources.users.roles.admin")}
+        </MenuItem>
+      </Select>
+    </React.Fragment>
+  );
+};
+
+const RoomMemberEdit = ({ backLink, memberId, ...props }) => {
+  const translate = useTranslate();
+  const refresh = useRefresh();
+  const dataProvider = useDataProvider();
+
+  const [role, setRole] = React.useState();
+
+  const { id } = props;
+
+  return (
+    <Edit title=" " {...props}>
+      <SimpleForm
+        toolbar={
+          <RoomMemberEditToolbar
+            backLink={backLink}
+            translate={translate}
+            onSave={() => {
+              dataProvider
+                .update("rooms", {
+                  data: {
+                    id,
+                    member_roles: [{ member_id: memberId, role }],
+                  },
+                })
+                .then(() => {
+                  refresh();
+                });
+            }}
+          />
+        }
+      >
+        <ReferenceManyField
+          reference="room_members"
+          target="room_id"
+          label="resources.users.fields.id"
+        >
+          <RoomMemberIdField memberId={memberId} />
+        </ReferenceManyField>
+        <ReferenceManyField
+          reference="room_members"
+          target="room_id"
+          label="resources.users.fields.role"
+        >
+          <RoomMemberRoleInput
+            memberId={memberId}
+            translate={translate}
+            onChange={setRole}
+          />
+        </ReferenceManyField>
+      </SimpleForm>
+    </Edit>
+  );
+};
+
+const drawerStyles = {
+  paper: {
+    width: 300,
+  },
+};
+const StyledDrawer = withStyles(drawerStyles)(({ classes, ...props }) => (
+  <Drawer {...props} classes={classes} />
+));
+
+export const RoomEdit = props => {
+  const translate = useTranslate();
+
+  return (
+    <React.Fragment>
+      <Edit {...props} title={<RoomTitle />}>
+        <TabbedForm>
+          <FormTab label="synapseadmin.rooms.tabs.members" icon={<UserIcon />}>
+            <ReferenceArrayInput
+              reference="users"
+              source="invitees"
+              filterToQuery={searchText => ({ user_id: searchText })}
+            >
+              <AutocompleteArrayInput
+                optionText="displayname"
+                suggestionText="displayname"
+              />
+            </ReferenceArrayInput>
+
+            <ReferenceManyField
+              reference="room_members"
+              target="room_id"
+              addLabel={false}
+            >
+              <Datagrid
+                style={{ width: "100%" }}
+                rowClick={(id, basePath, record) =>
+                  `/rooms/${encodeURIComponent(
+                    record.parentId
+                  )}/${encodeURIComponent(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>
+                <SelectField
+                  source="role"
+                  label="resources.users.fields.role"
+                  choices={[
+                    {
+                      id: "user",
+                      name: translate("resources.users.roles.user"),
+                    },
+                    { id: "mod", name: translate("resources.users.roles.mod") },
+                    {
+                      id: "admin",
+                      name: translate("resources.users.roles.admin"),
+                    },
+                  ]}
+                />
+              </Datagrid>
+            </ReferenceManyField>
+          </FormTab>
+        </TabbedForm>
+      </Edit>
+      <Route path="/rooms/:roomId/:memberId">
+        {({ match }) => {
+          const isMatch = !!match && !!match.params;
+
+          return (
+            <StyledDrawer open={isMatch} anchor="right">
+              {isMatch ? (
+                <RoomMemberEdit
+                  {...props}
+                  memberId={
+                    isMatch ? decodeURIComponent(match.params.memberId) : null
+                  }
+                  backLink={`/rooms/${match.params.roomId}`}
+                />
+              ) : (
+                <div />
+              )}
+            </StyledDrawer>
+          );
+        }}
+      </Route>
+    </React.Fragment>
+  );
+};
+
 const RoomShowActions = ({ basePath, data, resource }) => {
   var roomDirectoryStatus = "";
   if (data) {
@@ -119,7 +481,6 @@ const RoomShowActions = ({ basePath, data, resource }) => {
 };
 
 export const RoomShow = props => {
-  const classes = useStyles({ props });
   const translate = useTranslate();
   return (
     <Show {...props} actions={<RoomShowActions />} title={<RoomTitle />}>
@@ -231,7 +592,6 @@ export const RoomShow = props => {
             ]}
           />
         </Tab>
-
         <Tab
           label={translate("resources.room_state.name", { smart_count: 2 })}
           icon={<EventIcon />}
@@ -268,40 +628,6 @@ export const RoomShow = props => {
             </Datagrid>
           </ReferenceManyField>
         </Tab>
-
-        <Tab
-          label="resources.forward_extremities.name"
-          icon={<FastForwardIcon />}
-          path="forward_extremities"
-        >
-          <div className={classes.helper_forward_extremities}>
-            {translate("resources.rooms.helper.forward_extremities")}
-          </div>
-          <ReferenceManyField
-            reference="forward_extremities"
-            target="room_id"
-            addLabel={false}
-          >
-            <Datagrid style={{ width: "100%" }}>
-              <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={false}
-              />
-              <NumberField source="depth" sortable={false} />
-              <TextField source="state_group" sortable={false} />
-            </Datagrid>
-          </ReferenceManyField>
-        </Tab>
       </TabbedShowLayout>
     </Show>
   );
@@ -353,22 +679,8 @@ const RoomFilter = ({ ...props }) => {
   );
 };
 
-const RoomNameField = props => {
-  const { source } = props;
-  const record = useRecordContext(props);
-  return (
-    <span>{record[source] || record["canonical_alias"] || record["id"]}</span>
-  );
-};
-
-RoomNameField.propTypes = {
-  label: PropTypes.string,
-  record: PropTypes.object,
-  source: PropTypes.string.isRequired,
-};
-
-const FilterableRoomList = ({ roomFilters, dispatch, ...props }) => {
-  const filter = roomFilters;
+const FilterableRoomList = ({ ...props }) => {
+  const filter = props.roomFilters;
   const localMembersFilter =
     filter && filter.joined_local_members ? true : false;
   const stateEventsFilter = filter && filter.state_events ? true : false;
@@ -389,7 +701,7 @@ const FilterableRoomList = ({ roomFilters, dispatch, ...props }) => {
           sortBy="encryption"
           label={<HttpsIcon />}
         />
-        <RoomNameField source="name" />
+        <TextField source="name" />
         <TextField source="joined_members" />
         {localMembersFilter && <TextField source="joined_local_members" />}
         {stateEventsFilter && <TextField source="state_events" />}

src/components/users.js

@@ -1,13 +1,12 @@
 import React, { cloneElement, Fragment } from "react";
 import Avatar from "@material-ui/core/Avatar";
-import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
+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 PersonPinIcon from "@material-ui/icons/PersonPin";
-import SettingsInputComponentIcon from "@material-ui/icons/SettingsInputComponent";
 import ViewListIcon from "@material-ui/icons/ViewList";
 import {
   ArrayInput,
@@ -29,14 +28,16 @@ import {
   PasswordInput,
   TextField,
   TextInput,
+  SearchInput,
   ReferenceField,
   ReferenceManyField,
-  SearchInput,
+  SelectField,
   SelectInput,
   BulkDeleteButton,
   DeleteButton,
   SaveButton,
   regex,
+  useRedirect,
   useTranslate,
   Pagination,
   CreateButton,
@@ -45,18 +46,11 @@ import {
   sanitizeListRestProps,
   NumberField,
 } from "react-admin";
-import { Link } from "react-router-dom";
+import SaveQrButton from "./SaveQrButton";
 import { ServerNoticeButton, ServerNoticeBulkButton } from "./ServerNotices";
 import { DeviceRemoveButton } from "./devices";
-import { ProtectMediaButton, QuarantineMediaButton } from "./media";
 import { makeStyles } from "@material-ui/core/styles";
 
-const redirect = () => {
-  return {
-    pathname: "/import_users",
-  };
-};
-
 const useStyles = makeStyles({
   small: {
     height: "40px",
@@ -87,6 +81,7 @@ const UserListActions = ({
   total,
   ...rest
 }) => {
+  const redirectTo = useRedirect();
   return (
     <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
       {filters &&
@@ -106,10 +101,6 @@ const UserListActions = ({
         exporter={exporter}
         maxResults={maxResults}
       />
-      {/* Add your custom actions */}
-      <Button component={Link} to={redirect} label="CSV Import">
-        <GetAppIcon style={{ transform: "rotate(180deg)", fontSize: "20" }} />
-      </Button>
     </TopToolbar>
   );
 };
@@ -158,7 +149,6 @@ export const UserList = props => {
       {...props}
       filters={<UserFilter />}
       filterDefaultValues={{ guests: true, deactivated: false }}
-      sort={{ field: "name", order: "ASC" }}
       actions={<UserListActions maxResults={10000} />}
       bulkActionButtons={<UserBulkActionButtons />}
       pagination={<UserPagination />}
@@ -166,19 +156,55 @@ export const UserList = props => {
       <Datagrid rowClick="edit">
         <AvatarField
           source="avatar_src"
+          sortable={false}
           className={classes.small}
-          sortBy="avatar_url"
         />
-        <TextField source="id" sortBy="name" />
+        <TextField source="id" sortable={false} />
         <TextField source="displayname" />
-        <BooleanField source="is_guest" />
-        <BooleanField source="admin" />
-        <BooleanField source="deactivated" />
+        <BooleanField source="is_guest" sortable={false} />
+        <BooleanField source="admin" sortable={false} />
+        <SelectField
+          source="user_type"
+          choices={[
+            { id: null, name: "resources.users.type.default" },
+            { id: "free", name: "resources.users.type.free" },
+            { id: "limited", name: "resources.users.type.limited" },
+          ]}
+        />
+        <BooleanField source="deactivated" sortable={false} />
       </Datagrid>
     </List>
   );
 };
 
+// redirect to the related Author show page
+const redirect = (basePath, id, data) => {
+  return {
+    pathname: "/showpdf",
+    state: {
+      id: data.id,
+      displayname: data.displayname,
+      password: data.password,
+    },
+  };
+};
+
+const UserCreateToolbar = props => (
+  <Toolbar {...props}>
+    <SaveQrButton
+      label="synapseadmin.action.save_and_show"
+      redirect={redirect}
+      submitOnEnter={true}
+    />
+    <SaveButton
+      label="synapseadmin.action.save_only"
+      redirect="list"
+      submitOnEnter={false}
+      variant="text"
+    />
+  </Toolbar>
+);
+
 // https://matrix.org/docs/spec/appendices#user-identifiers
 const validateUser = regex(
   /^@[a-z0-9._=\-/]+:.*/,
@@ -230,7 +256,17 @@ const UserEditToolbar = props => {
   const translate = useTranslate();
   return (
     <Toolbar {...props}>
-      <SaveButton submitOnEnter={true} />
+      <SaveQrButton
+        label="synapseadmin.action.save_and_show"
+        redirect={redirect}
+        submitOnEnter={true}
+      />
+      <SaveButton
+        label="synapseadmin.action.save_only"
+        redirect="list"
+        submitOnEnter={false}
+        variant="text"
+      />
       <DeleteButton
         label="resources.users.action.erase"
         confirmTitle={translate("resources.users.helper.erase", {
@@ -244,12 +280,20 @@ const UserEditToolbar = props => {
 };
 
 export const UserCreate = props => (
-  <Create {...props}>
-    <SimpleForm>
+  <Create record={generateRandomUser()} {...props}>
+    <SimpleForm toolbar={<UserCreateToolbar />}>
       <TextInput source="id" autoComplete="off" validate={validateUser} />
       <TextInput source="displayname" />
       <PasswordInput source="password" autoComplete="new-password" />
       <BooleanInput source="admin" />
+      <SelectInput
+        source="user_type"
+        choices={[
+          { id: null, name: "resources.users.type.default" },
+          { id: "free", name: "resources.users.type.free" },
+          { id: "limited", name: "resources.users.type.limited" },
+        ]}
+      />
       <ArrayInput source="threepids">
         <SimpleFormIterator>
           <SelectInput
@@ -277,6 +321,7 @@ const UserTitle = ({ record }) => {
     </span>
   );
 };
+
 export const UserEdit = props => {
   const classes = useStyles();
   const translate = useTranslate();
@@ -295,6 +340,15 @@ export const UserEdit = props => {
           <TextInput source="id" disabled />
           <TextInput source="displayname" />
           <PasswordInput source="password" autoComplete="new-password" />
+          <SelectInput
+            source="user_type"
+            choices={[
+              { id: null, name: "resources.users.type.default" },
+              { id: "free", name: "resources.users.type.free" },
+              { id: "limited", name: "resources.users.type.limited" },
+            ]}
+            emptyText="resources.users.type.default"
+          />
           <BooleanInput source="admin" />
           <BooleanInput
             source="deactivated"
@@ -334,23 +388,6 @@ export const UserEdit = props => {
           </ArrayInput>
         </FormTab>
 
-        <FormTab
-          label="synapseadmin.users.tabs.sso"
-          icon={<AssignmentIndIcon />}
-          path="sso"
-        >
-          <ArrayField source="external_ids" label={false}>
-            <Datagrid style={{ width: "100%" }}>
-              <TextField source="auth_provider" sortable={false} />
-              <TextField
-                source="external_id"
-                label="resources.users.fields.id"
-                sortable={false}
-              />
-            </Datagrid>
-          </ArrayField>
-        </FormTab>
-
         <FormTab
           label={translate("resources.devices.name", { smart_count: 2 })}
           icon={<DevicesIcon />}
@@ -434,7 +471,6 @@ export const UserEdit = props => {
             addLabel={false}
             pagination={<UserPagination />}
             perPage={50}
-            sort={{ field: "created_ts", order: "DESC" }}
           >
             <Datagrid style={{ width: "100%" }}>
               <DateField
@@ -448,6 +484,7 @@ export const UserEdit = props => {
                   minute: "2-digit",
                   second: "2-digit",
                 }}
+                sortable={false}
               />
               <DateField
                 source="last_access_ts"
@@ -460,14 +497,14 @@ export const UserEdit = props => {
                   minute: "2-digit",
                   second: "2-digit",
                 }}
+                sortable={false}
               />
-              <TextField source="media_id" />
-              <NumberField source="media_length" />
-              <TextField source="media_type" />
-              <TextField source="upload_name" />
-              <TextField source="quarantined_by" />
-              <QuarantineMediaButton label="resources.quarantine_media.action.name" />
-              <ProtectMediaButton label="resources.users_media.fields.safe_from_quarantine" />
+              <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 mutationMode="pessimistic" redirect={false} />
             </Datagrid>
           </ReferenceManyField>

src/i18n/de.js

@@ -1,6 +1,6 @@
 import germanMessages from "ra-language-german";
 
-const de = {
+export default {
   ...germanMessages,
   synapseadmin: {
     auth: {
@@ -11,13 +11,25 @@ const de = {
       protocol_error: "Die URL muss mit 'http://' oder 'https://' beginnen",
       url_error: "Keine gültige Matrix Server URL",
     },
+    action: {
+      save_and_show: "Speichern und QR Code erzeugen",
+      save_only: "Nur speichern",
+      download_pdf: "PDF speichern",
+    },
     users: {
       invalid_user_id:
         "Muss eine vollständige Matrix Benutzer-ID sein, z.B. @benutzer_id:homeserver",
-      tabs: { sso: "SSO" },
     },
     rooms: {
       details: "Raumdetails",
+      room_name: "Raumname",
+      make_public: "Öffentlicher Raum",
+      encrypt: "Verschlüsselter Raum",
+      room_name_required: "Muss angegeben werden",
+      alias_required_if_public: "Muss für öffentliche Räume angegeben werden.",
+      alias: "Alias",
+      alias_too_long:
+        "Darf zusammen mit der Domain des Homeservers 255 bytes nicht überschreiten",
       tabs: {
         basic: "Allgemein",
         members: "Mitglieder",
@@ -121,7 +133,18 @@ const de = {
         address: "Adresse",
         creation_ts_ms: "Zeitpunkt der Erstellung",
         consent_version: "Zugestimmte Geschäftsbedingungen",
-        auth_provider: "Provider",
+        user_type: "Kontotyp",
+        // Devices:
+        device_id: "Geräte-ID",
+        display_name: "Gerätename",
+        last_seen_ts: "Zeitstempel",
+        last_seen_ip: "IP-Adresse",
+        role: "Rolle",
+      },
+      type: {
+        default: "Standard",
+        free: "Basic",
+        limited: "Eingeschränkt",
       },
       helper: {
         deactivate:
@@ -131,6 +154,11 @@ const de = {
       action: {
         erase: "Lösche Benutzerdaten",
       },
+      roles: {
+        user: "Nutzer",
+        mod: "Moderator",
+        admin: "Administrator",
+      },
     },
     rooms: {
       name: "Raum |||| Räume",
@@ -139,6 +167,8 @@ const de = {
         name: "Name",
         canonical_alias: "Alias",
         joined_members: "Mitglieder",
+        invite_members: "Mitglieder einladen",
+        invitees: "Einladungen",
         joined_local_members: "Lokale Mitglieder",
         joined_local_devices: "Lokale Endgeräte",
         state_events: "Zustandsereignisse / Komplexität",
@@ -154,10 +184,6 @@ const de = {
         topic: "Thema",
         avatar: "Avatar",
       },
-      helper: {
-        forward_extremities:
-          "Forward extremities are the leaf events at the end of a Directed acyclic graph (DAG) in a room, aka events that have no children. The more exist in a room, the more state resolution that Synapse needs to perform (hint: it's an expensive operation). While Synapse has code to prevent too many of these existing at one time in a room, bugs can sometimes make them crop up again. If a room has >10 forward extremities, it's worth checking which room is the culprit and potentially removing them using the SQL queries mentioned in #1760.",
-      },
       enums: {
         join_rules: {
           public: "Öffentlich",
@@ -242,7 +268,7 @@ const de = {
         media_type: "Typ",
         upload_name: "Dateiname",
         quarantined_by: "Zur Quarantäne hinzugefügt",
-        safe_from_quarantine: "Schutz vor Quarantäne",
+        safe_from_quarantine: "Geschützt vor Quarantäne",
         created_ts: "Erstellt",
         last_access_ts: "Letzter Zugriff",
       },
@@ -260,26 +286,8 @@ const de = {
         send_failure: "Beim Versenden ist ein Fehler aufgetreten.",
       },
       helper: {
-        send: "Diese API löscht die lokalen Medien von der Festplatte des eigenen Servers. Dies umfasst alle lokalen Miniaturbilder und Kopien von Medien. Diese API wirkt sich nicht auf Medien aus, die sich in externen Medien-Repositories befinden.",
-      },
-    },
-    protect_media: {
-      action: {
-        create: "Ungeschützt, Schutz erstellen",
-        delete: "Geschützt, Schutz aufheben",
-        none: "In Quarantäne",
-        send_success: "Erfolgreich den Schutz-Status geändert.",
-        send_failure: "Beim Versenden ist ein Fehler aufgetreten.",
-      },
-    },
-    quarantine_media: {
-      action: {
-        name: "Quarantäne",
-        create: "Zur Quarantäne hinzufügen",
-        delete: "In Quarantäne, Quarantäne aufheben",
-        none: "Geschützt vor Quarantäne",
-        send_success: "Erfolgreich den Quarantäne-Status geändert.",
-        send_failure: "Beim Versenden ist ein Fehler aufgetreten.",
+        send:
+          "Diese API löscht die lokalen Medien von der Festplatte des eigenen Servers. Dies umfasst alle lokalen Miniaturbilder und Kopien von Medien. Diese API wirkt sich nicht auf Medien aus, die sich in externen Medien-Repositories befinden.",
       },
     },
     pushers: {
@@ -308,7 +316,8 @@ const de = {
         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.',
+        send:
+          'Sendet eine Serverbenachrichtigung an die ausgewählten Nutzer. Hierfür muss das Feature "Server Notices" auf dem Server aktiviert sein.',
       },
     },
     user_media_statistics: {
@@ -318,15 +327,6 @@ const de = {
         media_length: "Größe der Dateien",
       },
     },
-    forward_extremities: {
-      name: "Vorderextremitäten",
-      fields: {
-        id: "Event-ID",
-        received_ts: "Zeitstempel",
-        depth: "Tiefe",
-        state_group: "Zustandsgruppe",
-      },
-    },
     room_state: {
       name: "Zustandsereignisse",
       fields: {
@@ -381,10 +381,5 @@ const de = {
       empty: "Keine Einträge vorhanden",
       invite: "",
     },
-    navigation: {
-      ...germanMessages.ra.navigation,
-      skip_nav: "Zum Inhalt springen",
-    },
   },
 };
-export default de;

src/i18n/en.js

@@ -1,6 +1,6 @@
 import englishMessages from "ra-language-english";
 
-const en = {
+export default {
   ...englishMessages,
   synapseadmin: {
     auth: {
@@ -11,12 +11,25 @@ const en = {
       protocol_error: "URL has to start with 'http://' or 'https://'",
       url_error: "Not a valid Matrix server URL",
     },
+    action: {
+      save_and_show: "Create QR code",
+      save_only: "Save",
+      download_pdf: "Download PDF",
+    },
     users: {
       invalid_user_id:
         "Must be a fully qualified Matrix user-id, e.g. @user_id:homeserver",
-      tabs: { sso: "SSO" },
     },
     rooms: {
+      details: "Room Details",
+      room_name: "Room Name",
+      make_public: "Make room public",
+      encrypt: "Encrypt room",
+      room_name_required: "Must be provided",
+      alias_required_if_public: "Must be provided for a public room",
+      alias: "Alias",
+      alias_too_long:
+        "Must not exceed 255 bytes including the domain of the homeserver.",
       tabs: {
         basic: "Basic",
         members: "Members",
@@ -120,7 +133,17 @@ const en = {
         address: "Address",
         creation_ts_ms: "Creation timestamp",
         consent_version: "Consent version",
-        auth_provider: "Provider",
+        // Devices:
+        device_id: "Device-ID",
+        display_name: "Device name",
+        last_seen_ts: "Timestamp",
+        last_seen_ip: "IP address",
+        role: "Role",
+      },
+      type: {
+        default: "Standard",
+        free: "Basic",
+        limited: "Limited",
       },
       helper: {
         deactivate: "You must provide a password to re-activate an account.",
@@ -129,6 +152,11 @@ const en = {
       action: {
         erase: "Erase user data",
       },
+      roles: {
+        user: "User",
+        mod: "Moderator",
+        admin: "Administrator",
+      },
     },
     rooms: {
       name: "Room |||| Rooms",
@@ -137,6 +165,8 @@ const en = {
         name: "Name",
         canonical_alias: "Alias",
         joined_members: "Members",
+        invite_members: "Invite Members",
+        invitees: "Invitations",
         joined_local_members: "Local members",
         joined_local_devices: "Local devices",
         state_events: "State events / Complexity",
@@ -152,10 +182,6 @@ const en = {
         topic: "Topic",
         avatar: "Avatar",
       },
-      helper: {
-        forward_extremities:
-          "Forward extremities are the leaf events at the end of a Directed acyclic graph (DAG) in a room, aka events that have no children. The more exist in a room, the more state resolution that Synapse needs to perform (hint: it's an expensive operation). While Synapse has code to prevent too many of these existing at one time in a room, bugs can sometimes make them crop up again. If a room has >10 forward extremities, it's worth checking which room is the culprit and potentially removing them using the SQL queries mentioned in #1760.",
-      },
       enums: {
         join_rules: {
           public: "Public",
@@ -234,7 +260,7 @@ const en = {
       name: "Media",
       fields: {
         media_id: "Media ID",
-        media_length: "File Size (in Bytes)",
+        media_length: "Lenght",
         media_type: "Type",
         upload_name: "File name",
         quarantined_by: "Quarantined by",
@@ -256,26 +282,8 @@ const en = {
         send_failure: "An error has occurred.",
       },
       helper: {
-        send: "This API deletes the local media from the disk of your own server. This includes any local thumbnails and copies of media downloaded. This API will not affect media that has been uploaded to external media repositories.",
-      },
-    },
-    protect_media: {
-      action: {
-        create: "Unprotected, create protection",
-        delete: "Protected, remove protection",
-        none: "In quarantine",
-        send_success: "Successfully changed the protection status.",
-        send_failure: "An error has occurred.",
-      },
-    },
-    quarantine_media: {
-      action: {
-        name: "Quarantine",
-        create: "Add to quarantine",
-        delete: "In quarantine, unquarantine",
-        none: "Protected from quarantine",
-        send_success: "Successfully changed the quarantine status.",
-        send_failure: "An error has occurred.",
+        send:
+          "This API deletes the local media from the disk of your own server. This includes any local thumbnails and copies of media downloaded. This API will not affect media that has been uploaded to external media repositories.",
       },
     },
     pushers: {
@@ -304,7 +312,8 @@ const en = {
         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.',
+        send:
+          'Sends a server notice to the selected users. The feature "Server Notices" has to be activated at the server.',
       },
     },
     user_media_statistics: {
@@ -314,15 +323,6 @@ const en = {
         media_length: "Media length",
       },
     },
-    forward_extremities: {
-      name: "Forward Extremities",
-      fields: {
-        id: "Event ID",
-        received_ts: "Timestamp",
-        depth: "Depth",
-        state_group: "State group",
-      },
-    },
     room_state: {
       name: "State events",
       fields: {
@@ -351,4 +351,3 @@ const en = {
     },
   },
 };
-export default en;

src/i18n/zh.js

@@ -1,6 +1,6 @@
 import chineseMessages from "ra-language-chinese";
 
-const zh = {
+export default {
   ...chineseMessages,
   synapseadmin: {
     auth: {
@@ -245,7 +245,8 @@ const zh = {
         send_failure: "出现了一个错误。",
       },
       helper: {
-        send: "这个API会删除您硬盘上的本地媒体。包含了任何的本地缓存和下载的媒体备份。这个API不会影响上传到外部媒体存储库上的媒体文件。",
+        send:
+          "这个API会删除您硬盘上的本地媒体。包含了任何的本地缓存和下载的媒体备份。这个API不会影响上传到外部媒体存储库上的媒体文件。",
       },
     },
     pushers: {
@@ -274,7 +275,8 @@ const zh = {
         send_failure: "出现了一个错误。",
       },
       helper: {
-        send: '向选中的用户发送服务器提示。服务器配置中的 "服务器提示(Server Notices)" 选项需要被设置为启用。',
+        send:
+          '向选中的用户发送服务器提示。服务器配置中的 "服务器提示(Server Notices)" 选项需要被设置为启用。',
       },
     },
     user_media_statistics: {
@@ -286,4 +288,3 @@ const zh = {
     },
   },
 };
-export default zh;

src/setupTests.js

@@ -1,3 +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

@@ -3,9 +3,6 @@ import { fetchUtils } from "react-admin";
 const authProvider = {
   // called when the user attempts to log in
   login: ({ base_url, username, password }) => {
-    // force homeserver for protection in case the form is manipulated
-    base_url = process.env.REACT_APP_SERVER || base_url;
-
     console.log("login ");
     const options = {
       method: "POST",
@@ -13,7 +10,6 @@ const authProvider = {
         type: "m.login.password",
         user: username,
         password: password,
-        device_id: localStorage.getItem("device_id"),
         initial_device_display_name: "Synapse Admin",
       }),
     };
@@ -21,7 +17,6 @@ const authProvider = {
     // 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
-    base_url = base_url.replace(/\/+$/g, "");
     localStorage.setItem("base_url", base_url);
 
     const decoded_base_url = window.decodeURIComponent(base_url);
@@ -53,6 +48,7 @@ const authProvider = {
     if (typeof access_token === "string") {
       fetchUtils.fetchJson(logout_api_url, options).then(({ json }) => {
         localStorage.removeItem("access_token");
+        localStorage.removeItem("device_id");
       });
     }
     return Promise.resolve();

src/synapse/dataProvider.js

@@ -25,6 +25,16 @@ const mxcUrlToHttp = mxcUrl => {
   return `${homeserver}/_matrix/media/r0/thumbnail/${serverName}/${mediaId}?width=24&height=24&method=scale`;
 };
 
+const powerLevelToRole = powerLevel =>
+  powerLevel < 100 ? (powerLevel < 50 ? "user" : "mod") : "admin";
+
+const POWER_LEVELS = {
+  admin: 100,
+  mod: 50,
+  user: 0,
+};
+const roleToPowerLevel = role => POWER_LEVELS[role] || 0;
+
 const resourceMap = {
   users: {
     path: "/_synapse/admin/v2/users",
@@ -35,6 +45,7 @@ const resourceMap = {
       is_guest: !!u.is_guest,
       admin: !!u.admin,
       deactivated: !!u.deactivated,
+      displayname: u.display_name || u.displayname,
       // need timestamp in milliseconds
       creation_ts_ms: u.creation_ts * 1000,
     }),
@@ -63,12 +74,45 @@ const resourceMap = {
       public: !!r.public,
     }),
     data: "rooms",
-    total: json => {
-      return json.total_rooms;
+    total: json => json.total_rooms,
+    create: data => ({
+      endpoint: "/_synapse/admin/v1/rooms",
+      body: {
+        owner: data.owner,
+        name: data.name,
+        room_alias_name: data.canonical_alias,
+        visibility: data.public ? "public" : "private",
+        invite:
+          Array.isArray(data.invitees) && data.invitees.length > 0
+            ? data.invitees
+            : undefined,
+        initial_state: data.encrypt
+          ? [
+              {
+                type: "m.room.encryption",
+                state_key: "",
+                content: {
+                  algorithm: "m.megolm.v1.aes-sha2",
+                },
+              },
+            ]
+          : undefined,
+      },
+      method: "POST",
+    }),
+    transformBeforeUpdate: data => {
+      return {
+        ...data,
+        member_roles: (data.member_roles || []).map(member => ({
+          member_id: member.member_id,
+          power_level: roleToPowerLevel(member.role),
+        })),
+      };
     },
     delete: params => ({
-      endpoint: `/_synapse/admin/v1/rooms/${params.id}`,
+      endpoint: `/_synapse/admin/v1/rooms/${params.id}/delete`,
       body: { block: false },
+      method: "POST",
     }),
   },
   reports: {
@@ -182,32 +226,6 @@ const resourceMap = {
       method: "POST",
     }),
   },
-  protect_media: {
-    map: pm => ({ id: pm.media_id }),
-    create: params => ({
-      endpoint: `/_synapse/admin/v1/media/protect/${params.media_id}`,
-      method: "POST",
-    }),
-    delete: params => ({
-      endpoint: `/_synapse/admin/v1/media/unprotect/${params.media_id}`,
-      method: "POST",
-    }),
-  },
-  quarantine_media: {
-    map: qm => ({ id: qm.media_id }),
-    create: params => ({
-      endpoint: `/_synapse/admin/v1/media/quarantine/${localStorage.getItem(
-        "home_server"
-      )}/${params.media_id}`,
-      method: "POST",
-    }),
-    delete: params => ({
-      endpoint: `/_synapse/admin/v1/media/unquarantine/${localStorage.getItem(
-        "home_server"
-      )}/${params.media_id}`,
-      method: "POST",
-    }),
-  },
   servernotices: {
     map: n => ({ id: n.event_id }),
     create: data => ({
@@ -233,22 +251,6 @@ const resourceMap = {
       return json.total;
     },
   },
-  forward_extremities: {
-    map: fe => ({
-      ...fe,
-      id: fe.event_id,
-    }),
-    reference: id => ({
-      endpoint: `/_synapse/admin/v1/rooms/${id}/forward_extremities`,
-    }),
-    data: "results",
-    total: json => {
-      return json.count;
-    },
-    delete: params => ({
-      endpoint: `/_synapse/admin/v1/rooms/${params.id}/forward_extremities`,
-    }),
-  },
   room_directory: {
     path: "/_matrix/client/r0/publicRooms",
     map: rd => ({
@@ -324,7 +326,7 @@ const dataProvider = {
   },
 
   getOne: (resource, params) => {
-    console.log("getOne " + resource);
+    console.log("getOne " + resource, params);
     const homeserver = localStorage.getItem("base_url");
     if (!homeserver || !(resource in resourceMap)) return Promise.reject();
 
@@ -355,13 +357,10 @@ const dataProvider = {
   getManyReference: (resource, params) => {
     console.log("getManyReference " + resource);
     const { page, perPage } = params.pagination;
-    const { field, order } = params.sort;
     const from = (page - 1) * perPage;
     const query = {
       from: from,
       limit: perPage,
-      order_by: field,
-      dir: getSearchOrder(order),
     };
 
     const homeserver = localStorage.getItem("base_url");
@@ -385,10 +384,13 @@ const dataProvider = {
 
     const res = resourceMap[resource];
 
+    const transform = res.transformBeforeUpdate || (x => x);
+    const data = transform(params.data);
+
     const endpoint_url = homeserver + res.path;
     return jsonClient(`${endpoint_url}/${params.data.id}`, {
       method: "PUT",
-      body: JSON.stringify(params.data, filterNullValues),
+      body: JSON.stringify(data, filterNullValues),
     }).then(({ json }) => ({
       data: res.map(json),
     }));