Bump version to 0.8.5

Change-Id: I8c8f0af01d693bb76dbf706a92fdd4dfa6ba9a8b

.github/workflows/docker-release.yml

@@ -2,8 +2,14 @@ name: Create docker image(s) and push to docker hub
 
 on:
   push:
+    # Sequence of patterns matched against refs/heads
+    # prettier-ignore
+    branches:    
+      # Push events on master branch
+      - master
+    # Sequence of patterns matched against refs/tags
     tags:        
-      - '[0-9]+\.[0-9]+\.[0-9]+'
+      - '[0-9]+\.[0-9]+\.[0-9]+'             # Push events to 0.X.X tag
 
 jobs:
   docker:
@@ -21,16 +27,25 @@ jobs:
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - name: Build and push
+      - name: Calculate docker image tag
+        id: set-tag
+        run: |
+          case "${GITHUB_REF}" in
+              refs/heads/master|refs/heads/main)
+                  tag=latest
+                  ;;
+              refs/tags/*)
+                  tag=${GITHUB_REF#refs/tags/}
+                  ;;
+              *)
+                  tag=${GITHUB_SHA}
+                  ;;
+          esac
+          echo "::set-output name=tag::$tag"
+      - name: Build and Push Tag
         uses: docker/build-push-action@v2
         with:
           context: .
-          platforms: linux/amd64,linux/arm64
           push: true
-          tags: awesometechnologies/synapse-admin:latest
+          tags: "awesometechnologies/synapse-admin:${{ steps.set-tag.outputs.tag }}"
-      - name: Update repo description
+          platforms: linux/amd64,linux/arm64
-        uses: peter-evans/dockerhub-description@v2
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-          repository: awesometechnologies/synapse-admin

.github/workflows/edge_ghpage.yml

@@ -0,0 +1,26 @@
+name: Build and Deploy Edge version to GH Pages
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+      - master
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v2.3.1
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "14"
+      - name: Install and Build 🔧
+        run: |
+          yarn install
+          yarn build
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@4.1.5
+        with:
+          branch: gh-pages
+          folder: build

.github/workflows/github-release.yml

@@ -8,6 +8,9 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      packages: write
 
     steps:
       - uses: actions/checkout@v2

.prettierrc

@@ -7,5 +7,5 @@
   "trailingComma": "es5",
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
-  "arrowParens": "avoid",
+  "arrowParens": "avoid"
 }

Dockerfile

@@ -1,5 +1,5 @@
 # Builder
-FROM node:current as builder
+FROM node:lts as builder
 
 WORKDIR /src
 

README.md

@@ -5,7 +5,7 @@
 
 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.42.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).
@@ -19,15 +19,15 @@ You need access to the following endpoints:
 
 See also [Synapse administration endpoints](https://matrix-org.github.io/synapse/develop/reverse_proxy.html#synapse-administration-endpoints)
 
-## Step-By-Step install:
+## Step-By-Step install
 
 You have three options:
 
-1.  Download the tarball and serve with any webserver
+1.  [Download the tarball and serve with any webserver](#steps-for-1)
-2.  Download the source code from github and run using nodejs
+2.  [Download the source code from github and run using nodejs](#steps-for-2)
-3.  Run the Docker container
+3.  [Run the Docker container](#steps-for-3)
 
-Steps for 1):
+### 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
@@ -36,7 +36,7 @@ Steps for 1):
 - 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):
+### 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`
@@ -49,7 +49,7 @@ Either you define it at startup (e.g. `REACT_APP_SERVER=https://yourmatrixserver
 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 3):
+### 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`
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "synapse-admin",
-  "version": "AMP/2021.08",
+  "version": "0.8.5",
   "description": "Admin GUI for the Matrix.org server Synapse",
   "author": "Awesome Technologies Innovationslabor GmbH",
   "license": "Apache-2.0",
@@ -21,12 +21,8 @@
     "ra-test": "^3.15.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",
     "react": "^17.0.0",

public/index.html

@@ -9,32 +9,6 @@
       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/

src/App.js

@@ -4,22 +4,27 @@ 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, RoomCreate, RoomShow, RoomEdit } from "./components/rooms";
+import { RoomList, RoomShow } from "./components/rooms";
 import { ReportList, ReportShow } from "./components/EventReports";
-import ImportFeature from "./components/ImportFeature";
 import LoginPage from "./components/LoginPage";
 import UserIcon from "@material-ui/icons/Group";
+import ConfirmationNumberIcon from "@material-ui/icons/ConfirmationNumber";
 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 FolderSharedIcon from "@material-ui/icons/FolderShared";
+import { ImportFeature } from "./components/ImportFeature";
+import {
+  RegistrationTokenCreate,
+  RegistrationTokenEdit,
+  RegistrationTokenList,
+} from "./components/RegistrationTokens";
 import { RoomDirectoryList } from "./components/RoomDirectory";
 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 = {
@@ -40,8 +45,7 @@ const App = () => (
     dataProvider={dataProvider}
     i18nProvider={i18nProvider}
     customRoutes={[
-      <Route key="csvImport" path="/importcsv" component={ImportFeature} />,
+      <Route key="userImport" path="/import_users" component={ImportFeature} />,
-      <Route key="showpdf" path="/showpdf" component={ShowUserPdf} />,
     ]}
   >
     <Resource
@@ -51,14 +55,7 @@ const App = () => (
       edit={UserEdit}
       icon={UserIcon}
     />
-    <Resource
+    <Resource name="rooms" list={RoomList} show={RoomShow} icon={RoomIcon} />
-      name="rooms"
-      list={RoomList}
-      create={RoomCreate}
-      show={RoomShow}
-      edit={RoomEdit}
-      icon={RoomIcon}
-    />
     <Resource
       name="user_media_statistics"
       list={UserMediaStatsList}
@@ -75,6 +72,13 @@ const App = () => (
       list={RoomDirectoryList}
       icon={FolderSharedIcon}
     />
+    <Resource
+      name="registration_tokens"
+      list={RegistrationTokenList}
+      create={RegistrationTokenCreate}
+      edit={RegistrationTokenEdit}
+      icon={ConfirmationNumberIcon}
+    />
     <Resource name="connections" />
     <Resource name="devices" />
     <Resource name="room_members" />

src/components/EventReports.js

@@ -15,6 +15,15 @@ import {
 import PageviewIcon from "@material-ui/icons/Pageview";
 import ViewListIcon from "@material-ui/icons/ViewList";
 
+const date_format = {
+  year: "numeric",
+  month: "2-digit",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+};
+
 const ReportPagination = props => (
   <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
 );
@@ -33,14 +42,7 @@ export const ReportShow = props => {
           <DateField
             source="received_ts"
             showTime
-            options={{
+            options={date_format}
-              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">
@@ -72,14 +74,7 @@ export const ReportShow = props => {
           <DateField
             source="event_json.origin_server_ts"
             showTime
-            options={{
+            options={date_format}
-              year: "numeric",
-              month: "2-digit",
-              day: "2-digit",
-              hour: "2-digit",
-              minute: "2-digit",
-              second: "2-digit",
-            }}
             sortable={true}
           />
           <ReferenceField source="sender" reference="users">
@@ -116,14 +111,7 @@ export const ReportList = ({ ...props }) => {
         <DateField
           source="received_ts"
           showTime
-          options={{
+          options={date_format}
-            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" />

src/components/ImportFeature.js

@@ -20,7 +20,6 @@ import {
 import { useTranslate } from "ra-core";
 import Container from "@material-ui/core/Container/Container";
 import { generateRandomUser } from "./users";
-import ShowUserPdf from "./ShowUserPdf";
 
 const LOGGING = true;
 
@@ -60,8 +59,6 @@ const FilePicker = props => {
 
   const [progress, setProgress] = useState(null);
 
-  const [pdfRecords, setPdfRecords] = useState(null);
-
   const [importResults, setImportResults] = useState(null);
   const [skippedRecords, setSkippedRecords] = useState(null);
 
@@ -69,23 +66,17 @@ const FilePicker = props => {
   const [passwordMode, setPasswordMode] = useState(true);
   const [useridMode, setUseridMode] = useState("ignore");
 
-  const [showingPdf, setShowingPdf] = useState(false);
-
   const translate = useTranslate();
   const notify = useNotify();
 
   const dataProvider = useDataProvider();
 
   const onFileChange = async e => {
-    if (progress !== null) {
+    if (progress !== null) return;
-      return;
+
-    }
-    if (LOGGING) console.log("onFileChange was called");
     setValues(null);
     setError(null);
     setStats(null);
-    setPdfRecords(null);
-
     setImportResults(null);
     const file = e.target.files ? e.target.files[0] : null;
     /* Let's refuse some unreasonably big files instead of freezing
@@ -135,11 +126,6 @@ const FilePicker = props => {
     });
 
     if (eF.length !== 0) {
-      if (LOGGING) {
-        console.log(meta.fields);
-        console.log(eF);
-        console.log(oF);
-      }
       setError(
         translate("import_users.error.required_field", { field: eF[0] })
       );
@@ -240,9 +226,6 @@ const FilePicker = props => {
       setProgress,
       setError
     );
-
-    setPdfRecords(results.recordsForPdf);
-
     setImportResults(results);
     // offer CSV download of skipped or errored records
     // (so that the user doesn't have to filter out successful
@@ -268,8 +251,6 @@ const FilePicker = props => {
     let skippedRecords = [];
     let erroredRecords = [];
     let succeededRecords = [];
-    let recordsForPdf = [];
-
     let changeStats = {
       toAdmin: 0,
       toGuest: 0,
@@ -384,14 +365,6 @@ const FilePicker = props => {
                 await dataProvider.create("users", { data: recordData });
               }
               succeededRecords.push(recordData);
-
-              if (recordData.password !== undefined) {
-                recordsForPdf.push({
-                  id: recordData.id,
-                  password: recordData.password,
-                  displayname: recordData.displayname,
-                });
-              }
             }
           );
         };
@@ -416,7 +389,6 @@ const FilePicker = props => {
       erroredRecords,
       succeededRecords,
       totalRecordCount: entriesCount,
-      recordsForPdf,
       changeStats,
       wasDryRun: dryRun,
     };
@@ -646,10 +618,6 @@ const FilePicker = props => {
               <br />,
             ]
           : ""}
-        {translate(
-          "import_users.cards.results.for_print",
-          importResults.recordsForPdf.length
-        )}
         <br />
         {importResults.wasDryRun && [
           translate("import_users.cards.results.simulated_only"),
@@ -687,43 +655,20 @@ const FilePicker = props => {
       </CardActions>
     );
 
-  let pdfDisplay =
+  let allCards = [];
-    pdfRecords && showingPdf && pdfRecords.length ? (
+  if (uploadCard) allCards.push(uploadCard);
-      <ShowUserPdf records={pdfRecords} />
+  if (errorCards) allCards.push(errorCards);
-    ) : null;
+  if (conflictCards) allCards.push(conflictCards);
+  if (statsCards) allCards.push(...statsCards);
+  if (startImportCard) allCards.push(startImportCard);
+  if (resultsCard) allCards.push(resultsCard);
 
-  let pdfActions = pdfRecords ? (
+  let cardContainer = <Card>{allCards}</Card>;
-    <CardActions>
-      <Button
-        size="large"
-        onClick={e => {
-          setShowingPdf(true);
-        }}
-      >
-        {translate("import_users.goToPdf")}
-      </Button>
-    </CardActions>
-  ) : null;
 
-  if (pdfRecords && showingPdf) {
+  return [
-    return <Card>{pdfDisplay}</Card>;
+    <Title defaultTitle={translate("import_users.title")} />,
-  } else {
+    cardContainer,
-    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);
-    if (pdfActions) allCards.push(pdfActions);
-
-    let cardContainer = <Card>{allCards}</Card>;
-
-    return [
-      <Title defaultTitle={translate("import_users.title")} />,
-      cardContainer,
-    ];
-  }
 };
 
 export const ImportFeature = FilePicker;

src/components/LoginPage.js

@@ -78,11 +78,48 @@ const LoginPage = ({ theme }) => {
   const login = useLogin();
   const notify = useNotify();
   const [loading, setLoading] = useState(false);
+  const [supportPassAuth, setSupportPassAuth] = useState(true);
   var locale = useLocale();
   const setLocale = useSetLocale();
   const translate = useTranslate();
   const base_url = localStorage.getItem("base_url");
   const cfg_base_url = process.env.REACT_APP_SERVER;
+  const [ssoBaseUrl, setSSOBaseUrl] = useState("");
+  const loginToken = /\?loginToken=([a-zA-Z0-9_-]+)/.exec(window.location.href);
+
+  if (loginToken) {
+    const ssoToken = loginToken[1];
+    console.log("SSO token is", ssoToken);
+    // Prevent further requests
+    window.history.replaceState(
+      {},
+      "",
+      window.location.href.replace(loginToken[0], "#").split("#")[0]
+    );
+    const baseUrl = localStorage.getItem("sso_base_url");
+    localStorage.removeItem("sso_base_url");
+    if (baseUrl) {
+      const auth = {
+        base_url: baseUrl,
+        username: null,
+        password: null,
+        loginToken: ssoToken,
+      };
+      console.log("Base URL is:", baseUrl);
+      console.log("SSO Token is:", ssoToken);
+      console.log("Let's try token login...");
+      login(auth).catch(error => {
+        alert(
+          typeof error === "string"
+            ? error
+            : typeof error === "undefined" || !error.message
+            ? "ra.auth.sign_in_error"
+            : error.message
+        );
+        console.error(error);
+      });
+    }
+  }
 
   const renderInput = ({
     meta: { touched, error } = {},
@@ -137,6 +174,14 @@ const LoginPage = ({ theme }) => {
     });
   };
 
+  const handleSSO = () => {
+    localStorage.setItem("sso_base_url", ssoBaseUrl);
+    const ssoFullUrl = `${ssoBaseUrl}/_matrix/client/r0/login/sso/redirect?redirectUrl=${encodeURIComponent(
+      window.location.href
+    )}`;
+    window.location.href = ssoFullUrl;
+  };
+
   const extractHomeServer = username => {
     const usernameRegex = /@[a-zA-Z0-9._=\-/]+:([a-zA-Z0-9\-.]+\.[a-zA-Z]+)/;
     if (!username) return null;
@@ -188,6 +233,31 @@ const LoginPage = ({ theme }) => {
           .catch(_ => {
             setServerVersion("");
           });
+
+        // Set SSO Url
+        const authMethodUrl = `${formData.base_url}/_matrix/client/r0/login`;
+        let supportPass = false,
+          supportSSO = false;
+        fetchUtils
+          .fetchJson(authMethodUrl, { method: "GET" })
+          .then(({ json }) => {
+            json.flows.forEach(f => {
+              if (f.type === "m.login.password") {
+                supportPass = true;
+              } else if (f.type === "m.login.sso") {
+                supportSSO = true;
+              }
+            });
+            setSupportPassAuth(supportPass);
+            if (supportSSO) {
+              setSSOBaseUrl(formData.base_url);
+            } else {
+              setSSOBaseUrl("");
+            }
+          })
+          .catch(_ => {
+            setSSOBaseUrl("");
+          });
       },
       [formData.base_url]
     );
@@ -200,7 +270,7 @@ const LoginPage = ({ theme }) => {
             name="username"
             component={renderInput}
             label={translate("ra.auth.username")}
-            disabled={loading}
+            disabled={loading || !supportPassAuth}
             onBlur={handleUsernameChange}
             resettable
             fullWidth
@@ -212,7 +282,7 @@ const LoginPage = ({ theme }) => {
             component={renderInput}
             label={translate("ra.auth.password")}
             type="password"
-            disabled={loading}
+            disabled={loading || !supportPassAuth}
             resettable
             fullWidth
           />
@@ -273,13 +343,24 @@ const LoginPage = ({ theme }) => {
                   variant="contained"
                   type="submit"
                   color="primary"
-                  disabled={loading}
+                  disabled={loading || !supportPassAuth}
                   className={classes.button}
                   fullWidth
                 >
                   {loading && <CircularProgress size={25} thickness={2} />}
                   {translate("ra.auth.sign_in")}
                 </Button>
+                <Button
+                  variant="contained"
+                  color="secondary"
+                  onClick={handleSSO}
+                  disabled={loading || ssoBaseUrl === ""}
+                  className={classes.button}
+                  fullWidth
+                >
+                  {loading && <CircularProgress size={25} thickness={2} />}
+                  {translate("synapseadmin.auth.sso_sign_in")}
+                </Button>
               </CardActions>
             </Card>
             <Notification />

src/components/RegistrationTokens.js

@@ -0,0 +1,132 @@
+import React from "react";
+import {
+  BooleanInput,
+  Create,
+  Datagrid,
+  DateField,
+  DateTimeInput,
+  Edit,
+  Filter,
+  List,
+  maxValue,
+  number,
+  NumberField,
+  NumberInput,
+  regex,
+  SimpleForm,
+  TextInput,
+  TextField,
+  Toolbar,
+} from "react-admin";
+
+const date_format = {
+  year: "numeric",
+  month: "2-digit",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+};
+
+const validateToken = [regex(/^[A-Za-z0-9._~-]{0,64}$/)];
+const validateUsesAllowed = [number()];
+const validateLength = [number(), maxValue(64)];
+
+const dateParser = v => {
+  const d = new Date(v);
+  if (isNaN(d)) return 0;
+  return d.getTime();
+};
+
+const dateFormatter = v => {
+  if (v === undefined || v === null) return;
+  const d = new Date(v);
+
+  const pad = "00";
+  const year = d.getFullYear().toString();
+  const month = (pad + (d.getMonth() + 1).toString()).slice(-2);
+  const day = (pad + d.getDate().toString()).slice(-2);
+  const hour = (pad + d.getHours().toString()).slice(-2);
+  const minute = (pad + d.getMinutes().toString()).slice(-2);
+
+  // target format yyyy-MM-ddThh:mm
+  return `${year}-${month}-${day}T${hour}:${minute}`;
+};
+
+const RegistrationTokenFilter = props => (
+  <Filter {...props}>
+    <BooleanInput source="valid" alwaysOn />
+  </Filter>
+);
+
+export const RegistrationTokenList = props => {
+  return (
+    <List
+      {...props}
+      filters={<RegistrationTokenFilter />}
+      filterDefaultValues={{ valid: true }}
+      pagination={false}
+      perPage={500}
+    >
+      <Datagrid rowClick="edit">
+        <TextField source="token" sortable={false} />
+        <NumberField source="uses_allowed" sortable={false} />
+        <NumberField source="pending" sortable={false} />
+        <NumberField source="completed" sortable={false} />
+        <DateField
+          source="expiry_time"
+          showTime
+          options={date_format}
+          sortable={false}
+        />
+      </Datagrid>
+    </List>
+  );
+};
+
+export const RegistrationTokenCreate = props => (
+  <Create {...props}>
+    <SimpleForm redirect="list" toolbar={<Toolbar alwaysEnableSaveButton />}>
+      <TextInput
+        source="token"
+        autoComplete="off"
+        validate={validateToken}
+        resettable
+      />
+      <NumberInput
+        source="length"
+        validate={validateLength}
+        helperText="resources.registration_tokens.helper.length"
+        step={1}
+      />
+      <NumberInput
+        source="uses_allowed"
+        validate={validateUsesAllowed}
+        step={1}
+      />
+      <DateTimeInput source="expiry_time" parse={dateParser} />
+    </SimpleForm>
+  </Create>
+);
+
+export const RegistrationTokenEdit = props => {
+  return (
+    <Edit {...props}>
+      <SimpleForm>
+        <TextInput source="token" disabled />
+        <NumberInput source="pending" disabled />
+        <NumberInput source="completed" disabled />
+        <NumberInput
+          source="uses_allowed"
+          validate={validateUsesAllowed}
+          step={1}
+        />
+        <DateTimeInput
+          source="expiry_time"
+          parse={dateParser}
+          format={dateFormatter}
+        />
+      </SimpleForm>
+    </Edit>
+  );
+};

src/components/RoomDirectory.js

@@ -59,7 +59,7 @@ export const RoomDirectoryBulkDeleteButton = props => (
   <BulkDeleteButton
     {...props}
     label="resources.room_directory.action.erase"
-    undoable={false}
+    mutationMode="pessimistic"
     confirmTitle="resources.room_directory.action.title"
     confirmContent="resources.room_directory.action.content"
     resource="room_directory"
@@ -191,7 +191,7 @@ export const FilterableRoomDirectoryList = ({
       filters={<RoomDirectoryFilter />}
       perPage={100}
     >
-      <Datagrid>
+      <Datagrid rowClick={(id, basePath, record) => "/rooms/" + id + "/show"}>
         <AvatarField
           source="avatar_src"
           sortable={false}

src/components/SaveQrButton.js

@@ -1,35 +0,0 @@
-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/ServerNotices.js

@@ -24,7 +24,10 @@ const ServerNoticeDialog = ({ open, loading, onClose, onSend }) => {
 
   const ServerNoticeToolbar = props => (
     <Toolbar {...props}>
-      <SaveButton label="resources.servernotices.action.send" />
+      <SaveButton
+        label="resources.servernotices.action.send"
+        disabled={props.pristine}
+      />
       <Button label="ra.action.cancel" onClick={onClose}>
         <IconCancel />
       </Button>

src/components/ShowUserPdf.js

@@ -1,263 +0,0 @@
-import React, { useRef } 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";
-import { string, any } from "prop-types";
-
-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";
-  const origUrlString = "user=" + username + "&password=" + password;
-
-  var urlString = xor(origUrlString, magicString); // xor with magic string
-  if (origUrlString !== xor(urlString, magicString)) {
-    console.error(
-      "xoring this url string with magicString twice gave different results:",
-      origUrlString,
-      urlString,
-      xor(urlString, magicString)
-    );
-  }
-  urlString = btoa(urlString); // to base64
-
-  return serverUrl + "/#" + urlString;
-}
-
-UserPdfPage.propTypes = {
-  classes: any,
-  displayname: string,
-  qrCode: any,
-  serverUrl: string,
-  username: string,
-  password: string,
-};
-
-function UserPdfPage({
-  classes,
-  displayname,
-  qrCode,
-  serverUrl,
-  username,
-  password,
-}) {
-  return (
-    <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>
-  );
-}
-
-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 ShowUserPdf = props => {
-  const classes = useStyles();
-  const userPdf = useRef(null);
-
-  const exportPDF = () => {
-    userPdf.current.save();
-  };
-
-  let userRecords;
-
-  if (props.records) {
-    userRecords = props.records;
-  }
-
-  if (
-    props.location &&
-    props.location.state &&
-    props.location.state.id &&
-    props.location.state.password
-  ) {
-    userRecords = [
-      {
-        id: props.location.state.id,
-        password: props.location.state.password,
-        displayname: props.location.state.displayname,
-      },
-    ];
-  }
-
-  return (
-    <div>
-      <Title title="PDF" />
-      <Button label="synapseadmin.action.download_pdf" onClick={exportPDF} />
-
-      <PDFExport
-        paperSize={"A4"}
-        fileName="Users.pdf"
-        title=""
-        subject=""
-        keywords=""
-        ref={userPdf}
-        //ref={r => (resume = r)}
-      >
-        {userRecords.map(record => {
-          if (record.id && record.password) {
-            const username = record.id.substring(1, record.id.indexOf(":"));
-            const serverUrl =
-              "https://" + record.id.substring(record.id.indexOf(":") + 1);
-            const qrString = calculateQrString(
-              serverUrl,
-              username,
-              record.password
-            );
-            const qrCode = <QRCode value={qrString} size={128} />;
-            return (
-              <UserPdfPage
-                classes={classes}
-                displayname={record.displayname}
-                qrCode={qrCode}
-                serverUrl={serverUrl}
-                username={username}
-                password={record.password}
-              />
-            );
-          } else {
-            /* Skip empty PDF pages */
-            return null;
-          }
-        })}
-      </PDFExport>
-    </div>
-  );
-};
-
-export default ShowUserPdf;

src/components/devices.js

@@ -8,7 +8,7 @@ import {
 } 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 { alpha } from "@material-ui/core/styles/colorManipulator";
 import classnames from "classnames";
 
 const useStyles = makeStyles(
@@ -16,7 +16,7 @@ const useStyles = makeStyles(
     deleteButton: {
       color: theme.palette.error.main,
       "&:hover": {
-        backgroundColor: fade(theme.palette.error.main, 0.12),
+        backgroundColor: alpha(theme.palette.error.main, 0.12),
         // Reset on mouse devices
         "@media (hover: none)": {
           backgroundColor: "transparent",

src/components/media.js

@@ -1,6 +1,6 @@
 import React, { Fragment, useState } from "react";
 import classnames from "classnames";
-import { fade } from "@material-ui/core/styles/colorManipulator";
+import { alpha } from "@material-ui/core/styles/colorManipulator";
 import { makeStyles } from "@material-ui/core/styles";
 import { Tooltip } from "@material-ui/core";
 import {
@@ -33,7 +33,7 @@ const useStyles = makeStyles(
     deleteButton: {
       color: theme.palette.error.main,
       "&:hover": {
-        backgroundColor: fade(theme.palette.error.main, 0.12),
+        backgroundColor: alpha(theme.palette.error.main, 0.12),
         // Reset on mouse devices
         "@media (hover: none)": {
           backgroundColor: "transparent",

src/components/rooms.js

@@ -1,56 +1,31 @@
 import React, { Fragment } from "react";
 import { connect } from "react-redux";
-import { Route, Link } from "react-router-dom";
 import {
-  AutocompleteArrayInput,
-  AutocompleteInput,
-  BooleanInput,
   BooleanField,
   BulkDeleteButton,
-  Button,
-  Create,
-  Edit,
-  Datagrid,
   DateField,
+  Datagrid,
   DeleteButton,
   Filter,
-  FormTab,
   List,
   NumberField,
   Pagination,
-  ReferenceArrayInput,
   ReferenceField,
-  ReferenceInput,
   ReferenceManyField,
   SearchInput,
   SelectField,
   Show,
-  SimpleForm,
   Tab,
-  TabbedForm,
   TabbedShowLayout,
   TextField,
-  TextInput,
-  Toolbar,
   TopToolbar,
-  useDataProvider,
   useRecordContext,
-  useRefresh,
   useTranslate,
 } from "react-admin";
 import get from "lodash/get";
 import PropTypes from "prop-types";
 import { makeStyles } from "@material-ui/core/styles";
-import {
+import { Tooltip, Typography, Chip } from "@material-ui/core";
-  Tooltip,
-  Typography,
-  Chip,
-  Drawer,
-  styled,
-  withStyles,
-  Select,
-  MenuItem,
-} from "@material-ui/core";
 import FastForwardIcon from "@material-ui/icons/FastForward";
 import HttpsIcon from "@material-ui/icons/Https";
 import NoEncryptionIcon from "@material-ui/icons/NoEncryption";
@@ -58,7 +33,6 @@ 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,
@@ -67,6 +41,15 @@ import {
   RoomDirectorySaveButton,
 } from "./RoomDirectory";
 
+const date_format = {
+  year: "numeric",
+  month: "2-digit",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+};
+
 const useStyles = makeStyles(theme => ({
   helper_forward_extremities: {
     fontFamily: "Roboto, Helvetica, Arial, sans-serif",
@@ -104,368 +87,20 @@ const EncryptionField = ({ source, record = {}, emptyText }) => {
   );
 };
 
-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();
+  var name = "";
+  if (record) {
+    name = record.name !== "" ? record.name : record.id;
+  }
+
   return (
     <span>
-      {translate("resources.rooms.name", 1)} {record ? `"${record.name}"` : ""}
+      {translate("resources.rooms.name", 1)} {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) {
@@ -621,14 +256,7 @@ export const RoomShow = props => {
               <DateField
                 source="origin_server_ts"
                 showTime
-                options={{
+                options={date_format}
-                  year: "numeric",
-                  month: "2-digit",
-                  day: "2-digit",
-                  hour: "2-digit",
-                  minute: "2-digit",
-                  second: "2-digit",
-                }}
                 sortable={false}
               />
               <TextField source="content" sortable={false} />
@@ -661,14 +289,7 @@ export const RoomShow = props => {
               <DateField
                 source="received_ts"
                 showTime
-                options={{
+                options={date_format}
-                  year: "numeric",
-                  month: "2-digit",
-                  day: "2-digit",
-                  hour: "2-digit",
-                  minute: "2-digit",
-                  second: "2-digit",
-                }}
                 sortable={false}
               />
               <NumberField source="depth" sortable={false} />
@@ -689,7 +310,7 @@ const RoomBulkActionButtons = props => (
       {...props}
       confirmTitle="resources.rooms.action.erase.title"
       confirmContent="resources.rooms.action.erase.content"
-      undoable={false}
+      mutationMode="pessimistic"
     />
   </Fragment>
 );

src/components/users.js

@@ -13,12 +13,10 @@ import {
   ArrayInput,
   ArrayField,
   Button,
-  CreateButton,
   Datagrid,
   DateField,
   Create,
   Edit,
-  ExportButton,
   List,
   Filter,
   Toolbar,
@@ -31,31 +29,33 @@ import {
   PasswordInput,
   TextField,
   TextInput,
-  SearchInput,
   ReferenceField,
   ReferenceManyField,
-  SelectField,
+  SearchInput,
   SelectInput,
   BulkDeleteButton,
   DeleteButton,
   SaveButton,
+  maxLength,
   regex,
+  required,
   useTranslate,
   Pagination,
+  CreateButton,
+  ExportButton,
   TopToolbar,
   sanitizeListRestProps,
   NumberField,
 } from "react-admin";
-import SaveQrButton from "./SaveQrButton";
+import { Link } from "react-router-dom";
 import { ServerNoticeButton, ServerNoticeBulkButton } from "./ServerNotices";
 import { DeviceRemoveButton } from "./devices";
 import { ProtectMediaButton, QuarantineMediaButton } from "./media";
 import { makeStyles } from "@material-ui/core/styles";
-import { Link } from "react-router-dom";
 
 const redirect = () => {
   return {
-    pathname: "/importcsv",
+    pathname: "/import_users",
   };
 };
 
@@ -71,6 +71,15 @@ const useStyles = makeStyles({
   },
 });
 
+const date_format = {
+  year: "numeric",
+  month: "2-digit",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+};
+
 const UserListActions = ({
   currentSort,
   className,
@@ -144,7 +153,7 @@ const UserBulkActionButtons = props => (
       {...props}
       label="resources.users.action.erase"
       confirmTitle="resources.users.helper.erase"
-      undoable={false}
+      mutationMode="pessimistic"
     />
   </Fragment>
 );
@@ -175,53 +184,29 @@ export const UserList = props => {
         <TextField source="displayname" />
         <BooleanField source="is_guest" />
         <BooleanField source="admin" />
-        <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" />
+        <DateField
+          source="creation_ts"
+          label="resources.users.fields.creation_ts_ms"
+          showTime
+          options={date_format}
+        />
       </Datagrid>
     </List>
   );
 };
 
-// redirect to the related Author show page
-const redirectToPdf = (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={redirectToPdf}
-      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(
+// here only local part of user_id
-  /^@[a-z0-9._=\-/]+:.*/,
+// maxLength = 255 - "@" - ":" - localStorage.getItem("home_server").length
-  "synapseadmin.users.invalid_user_id"
+// localStorage.getItem("home_server").length is not valid here
-);
+const validateUser = [
+  required(),
+  maxLength(253),
+  regex(/^[a-z0-9._=\-/]+$/, "synapseadmin.users.invalid_user_id"),
+];
+
+const validateAddress = [required(), maxLength(255)];
 
 export function generateRandomUser() {
   const homeserver = localStorage.getItem("home_server");
@@ -268,17 +253,7 @@ const UserEditToolbar = props => {
   const translate = useTranslate();
   return (
     <Toolbar {...props}>
-      <SaveQrButton
+      <SaveButton submitOnEnter={true} disabled={props.pristine} />
-        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", {
@@ -292,20 +267,16 @@ const UserEditToolbar = props => {
 };
 
 export const UserCreate = props => (
-  <Create record={generateRandomUser()} {...props}>
+  <Create {...props}>
-    <SimpleForm toolbar={<UserCreateToolbar />}>
+    <SimpleForm>
       <TextInput source="id" autoComplete="off" validate={validateUser} />
-      <TextInput source="displayname" />
+      <TextInput source="displayname" validate={maxLength(256)} />
-      <PasswordInput source="password" autoComplete="new-password" />
+      <PasswordInput
-      <BooleanInput source="admin" />
+        source="password"
-      <SelectInput
+        autoComplete="new-password"
-        source="user_type"
+        validate={maxLength(512)}
-        choices={[
-          { id: null, name: "resources.users.type.default" },
-          { id: "free", name: "resources.users.type.free" },
-          { id: "limited", name: "resources.users.type.limited" },
-        ]}
       />
+      <BooleanInput source="admin" />
       <ArrayInput source="threepids">
         <SimpleFormIterator>
           <SelectInput
@@ -314,8 +285,19 @@ export const UserCreate = props => (
               { id: "email", name: "resources.users.email" },
               { id: "msisdn", name: "resources.users.msisdn" },
             ]}
+            validate={required()}
+          />
+          <TextInput source="address" validate={validateAddress} />
+        </SimpleFormIterator>
+      </ArrayInput>
+      <ArrayInput source="external_ids" label="synapseadmin.users.tabs.sso">
+        <SimpleFormIterator>
+          <TextInput source="auth_provider" validate={required()} />
+          <TextInput
+            source="external_id"
+            label="resources.users.fields.id"
+            validate={required()}
           />
-          <TextInput source="address" />
         </SimpleFormIterator>
       </ArrayInput>
     </SimpleForm>
@@ -333,7 +315,6 @@ const UserTitle = ({ record }) => {
     </span>
   );
 };
-
 export const UserEdit = props => {
   const classes = useStyles();
   const translate = useTranslate();
@@ -352,32 +333,12 @@ 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"
             helperText="resources.users.helper.deactivate"
           />
-          <DateField
+          <DateField source="creation_ts_ms" showTime options={date_format} />
-            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>
 
@@ -405,16 +366,16 @@ export const UserEdit = props => {
           icon={<AssignmentIndIcon />}
           path="sso"
         >
-          <ArrayField source="external_ids" label={false}>
+          <ArrayInput source="external_ids" label={false}>
-            <Datagrid style={{ width: "100%" }}>
+            <SimpleFormIterator>
-              <TextField source="auth_provider" sortable={false} />
+              <TextInput source="auth_provider" validate={required()} />
-              <TextField
+              <TextInput
                 source="external_id"
                 label="resources.users.fields.id"
-                sortable={false}
+                validate={required()}
               />
-            </Datagrid>
+            </SimpleFormIterator>
-          </ArrayField>
+          </ArrayInput>
         </FormTab>
 
         <FormTab
@@ -434,14 +395,7 @@ export const UserEdit = props => {
               <DateField
                 source="last_seen_ts"
                 showTime
-                options={{
+                options={date_format}
-                  year: "numeric",
-                  month: "2-digit",
-                  day: "2-digit",
-                  hour: "2-digit",
-                  minute: "2-digit",
-                  second: "2-digit",
-                }}
                 sortable={false}
               />
               <DeviceRemoveButton />
@@ -469,14 +423,7 @@ export const UserEdit = props => {
                 <DateField
                   source="last_seen"
                   showTime
-                  options={{
+                  options={date_format}
-                    year: "numeric",
-                    month: "2-digit",
-                    day: "2-digit",
-                    hour: "2-digit",
-                    minute: "2-digit",
-                    second: "2-digit",
-                  }}
                   sortable={false}
                 />
                 <TextField
@@ -503,29 +450,11 @@ export const UserEdit = props => {
             sort={{ field: "created_ts", order: "DESC" }}
           >
             <Datagrid style={{ width: "100%" }}>
-              <DateField
+              <DateField source="created_ts" showTime options={date_format} />
-                source="created_ts"
-                showTime
-                options={{
-                  year: "numeric",
-                  month: "2-digit",
-                  day: "2-digit",
-                  hour: "2-digit",
-                  minute: "2-digit",
-                  second: "2-digit",
-                }}
-              />
               <DateField
                 source="last_access_ts"
                 showTime
-                options={{
+                options={date_format}
-                  year: "numeric",
-                  month: "2-digit",
-                  day: "2-digit",
-                  hour: "2-digit",
-                  minute: "2-digit",
-                  second: "2-digit",
-                }}
               />
               <TextField source="media_id" />
               <NumberField source="media_length" />

src/i18n/de.js

@@ -10,27 +10,14 @@ const de = {
       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",
-    },
+      sso_sign_in: "Anmeldung mit SSO",
-    action: {
-      save_and_show: "Speichern und QR Code erzeugen",
-      save_only: "Nur speichern",
-      download_pdf: "PDF speichern",
     },
     users: {
-      invalid_user_id:
+      invalid_user_id: "Lokaler Anteil der Matrix Benutzer-ID ohne Homeserver.",
-        "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",
@@ -105,14 +92,11 @@ const de = {
         with_error:
           "%{smart_count} Eintrag mit Fehlern ||| %{smart_count} Einträge mit Fehlern",
         simulated_only: "Import-Vorgang war nur simuliert",
-        for_print:
-          "%{smart_count} Eintrag zum Drucken verfügbar |||| %{smart_count} Einträge zum Drucken verfügbar",
       },
     },
   },
   resources: {
     users: {
-      backtolist: "Zurück zur Liste",
       name: "Benutzer",
       email: "E-Mail",
       msisdn: "Telefon",
@@ -137,18 +121,6 @@ const de = {
         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:
@@ -158,11 +130,6 @@ const de = {
       action: {
         erase: "Lösche Benutzerdaten",
       },
-      roles: {
-        user: "Nutzer",
-        mod: "Moderator",
-        admin: "Administrator",
-      },
     },
     rooms: {
       name: "Raum |||| Räume",
@@ -171,8 +138,6 @@ 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",
@@ -387,6 +352,19 @@ const de = {
         send_failure: "Beim Entfernen ist ein Fehler aufgetreten.",
       },
     },
+    registration_tokens: {
+      name: "Registrierungstoken",
+      fields: {
+        token: "Token",
+        valid: "Gültige Token",
+        uses_allowed: "Anzahl",
+        pending: "Ausstehend",
+        completed: "Abgeschlossen",
+        expiry_time: "Ablaufzeit",
+        length: "Länge",
+      },
+      helper: { length: "Länge des Tokens, wenn kein Token vorgegeben wird." },
+    },
   },
   ra: {
     ...germanMessages.ra,
@@ -407,7 +385,7 @@ const de = {
       },
     },
     notification: {
-      ...germanMessages.ra.notifiaction,
+      ...germanMessages.ra.notification,
       logged_out: "Abgemeldet",
     },
     page: {

src/i18n/en.js

@@ -10,27 +10,13 @@ const en = {
       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",
-    },
+      sso_sign_in: "Sign in with SSO",
-    action: {
-      save_and_show: "Create QR code",
-      save_only: "Save",
-      download_pdf: "Download PDF",
     },
     users: {
-      invalid_user_id:
+      invalid_user_id: "Localpart of a Matrix user-id without homeserver.",
-        "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",
@@ -105,14 +91,11 @@ const en = {
         with_error:
           "%{smart_count} entry with errors ||| %{smart_count} entries with errors",
         simulated_only: "Run was only simulated",
-        for_print:
-          "%{smart_count} entry available for printing |||| %{smart_count} entries available for printing",
       },
     },
   },
   resources: {
     users: {
-      backtolist: "Back to list",
       name: "User |||| Users",
       email: "Email",
       msisdn: "Phone",
@@ -137,17 +120,6 @@ const en = {
         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.",
@@ -156,11 +128,6 @@ const en = {
       action: {
         erase: "Erase user data",
       },
-      roles: {
-        user: "User",
-        mod: "Moderator",
-        admin: "Administrator",
-      },
     },
     rooms: {
       name: "Room |||| Rooms",
@@ -169,8 +136,6 @@ 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",
@@ -209,10 +174,12 @@ const en = {
         },
         unencrypted: "Unencrypted",
       },
-      erase: {
+      action: {
-        title: "Delete room",
+        erase: {
-        content:
+          title: "Delete room",
-          "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!",
+          content:
+            "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: {
@@ -384,5 +351,18 @@ const en = {
       },
     },
   },
+  registration_tokens: {
+    name: "Registration tokens",
+    fields: {
+      token: "Token",
+      valid: "Valid token",
+      uses_allowed: "Uses allowed",
+      pending: "Pending",
+      completed: "Completed",
+      expiry_time: "Expiry time",
+      length: "Length",
+    },
+    helper: { length: "Length of the token if no token is given." },
+  },
 };
 export default en;

src/i18n/zh.js

@@ -10,10 +10,12 @@ const zh = {
       username_error: "请输入完整有效的用户 ID: '@user:domain'",
       protocol_error: "URL 需要以'http://'或'https://'作为起始",
       url_error: "不是一个有效的 Matrix 服务器地址",
+      sso_sign_in: "使用 SSO 登录",
     },
     users: {
       invalid_user_id:
         "必须要是一个有效的 Matrix 用户 ID ，例如 @user_id:homeserver",
+      tabs: { sso: "SSO" },
     },
     rooms: {
       tabs: {
@@ -98,7 +100,6 @@ const zh = {
   },
   resources: {
     users: {
-      backtolist: "回到列表",
       name: "用户",
       email: "邮箱",
       msisdn: "电话",

src/synapse/authProvider.js

@@ -2,20 +2,31 @@ import { fetchUtils } from "react-admin";
 
 const authProvider = {
   // called when the user attempts to log in
-  login: ({ base_url, username, password }) => {
+  login: ({ base_url, username, password, loginToken }) => {
     // 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",
-      body: JSON.stringify({
+      body: JSON.stringify(
-        type: "m.login.password",
+        Object.assign(
-        user: username,
+          {
-        password: password,
+            device_id: localStorage.getItem("device_id"),
-        device_id: localStorage.getItem("device_id"),
+            initial_device_display_name: "Synapse Admin",
-        initial_device_display_name: "Synapse Admin",
+          },
-      }),
+          loginToken
+            ? {
+                type: "m.login.token",
+                token: loginToken,
+              }
+            : {
+                type: "m.login.password",
+                user: username,
+                password: password,
+              }
+        )
+      ),
     };
 
     // use the base_url from login instead of the well_known entry from the

src/synapse/dataProvider.js

@@ -25,13 +25,6 @@ const mxcUrlToHttp = mxcUrl => {
   return `${homeserver}/_matrix/media/r0/thumbnail/${serverName}/${mediaId}?width=24&height=24&method=scale`;
 };
 
-const POWER_LEVELS = {
-  admin: 100,
-  mod: 50,
-  user: 0,
-};
-const roleToPowerLevel = role => POWER_LEVELS[role] || 0;
-
 const resourceMap = {
   users: {
     path: "/_synapse/admin/v2/users",
@@ -42,14 +35,15 @@ 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,
     }),
     data: "users",
     total: json => json.total,
     create: data => ({
-      endpoint: `/_synapse/admin/v2/users/${data.id}`,
+      endpoint: `/_synapse/admin/v2/users/@${data.id}:${localStorage.getItem(
+        "home_server"
+      )}`,
       body: data,
       method: "PUT",
     }),
@@ -71,40 +65,8 @@ const resourceMap = {
       public: !!r.public,
     }),
     data: "rooms",
-    total: json => json.total_rooms,
+    total: json => {
-    create: data => ({
+      return json.total_rooms;
-      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}`,
@@ -313,6 +275,25 @@ const resourceMap = {
       method: "PUT",
     }),
   },
+  registration_tokens: {
+    path: "/_synapse/admin/v1/registration_tokens",
+    map: rt => ({
+      ...rt,
+      id: rt.token,
+    }),
+    data: "registration_tokens",
+    total: json => {
+      return json.registration_tokens.length;
+    },
+    create: params => ({
+      endpoint: "/_synapse/admin/v1/registration_tokens/new",
+      body: params,
+      method: "POST",
+    }),
+    delete: params => ({
+      endpoint: `/_synapse/admin/v1/registration_tokens/${params.id}`,
+    }),
+  },
 };
 
 function filterNullValues(key, value) {
@@ -334,7 +315,8 @@ function getSearchOrder(order) {
 const dataProvider = {
   getList: (resource, params) => {
     console.log("getList " + resource);
-    const { user_id, name, guests, deactivated, search_term } = params.filter;
+    const { user_id, name, guests, deactivated, search_term, valid } =
+      params.filter;
     const { page, perPage } = params.pagination;
     const { field, order } = params.sort;
     const from = (page - 1) * perPage;
@@ -346,6 +328,7 @@ const dataProvider = {
       name: name,
       guests: guests,
       deactivated: deactivated,
+      valid: valid,
       order_by: field,
       dir: getSearchOrder(order),
     };
@@ -364,7 +347,7 @@ const dataProvider = {
   },
 
   getOne: (resource, params) => {
-    console.log("getOne " + resource, params);
+    console.log("getOne " + resource);
     const homeserver = localStorage.getItem("base_url");
     if (!homeserver || !(resource in resourceMap)) return Promise.reject();
 
@@ -425,13 +408,10 @@ 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(data, filterNullValues),
+      body: JSON.stringify(params.data, filterNullValues),
     }).then(({ json }) => ({
       data: res.map(json),
     }));