Merge tag '0.5.0' into amp.chat

Change-Id: I410e194bc7b153c69e00f40a4486a46924cd510a

.dockerignore

@@ -1,5 +1,4 @@
 # Exclude a bunch of stuff which can make the build context a larger than it needs to be
-.git/
 tests/
 build/
 lib/

Dockerfile

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

README.md

@@ -4,7 +4,7 @@
 
 This project is built using [react-admin](https://marmelab.com/react-admin/).
 
-It needs at least Synapse v1.13.0 for all functions to work as expected!
+It needs at least Synapse v1.18.0 for all functions to work as expected!
 
 ## Step-By-Step install:
 
@@ -29,3 +29,8 @@ Steps for 2):
 ## Screenshots
 
 ![Screenshots](./screenshots.jpg)
+
+## Development
+
+- Use `yarn test` to run all style, lint and unit tests
+- Use `yarn fix` to fix the coding style

package.json

@@ -1,6 +1,6 @@
 {
   "name": "synapse-admin",
-  "version": "0.2.1",
+  "version": "AMP/2020.08",
   "description": "Admin GUI for the Matrix.org server Synapse",
   "author": "Awesome Technologies Innovationslabor GmbH",
   "license": "Apache-2.0",
@@ -12,19 +12,24 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^5.1.1",
     "@testing-library/react": "^10.0.2",
-    "@testing-library/user-event": "^10.0.1",
+    "@testing-library/user-event": "^12.0.11",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.1",
     "eslint-plugin-prettier": "^3.1.2",
+    "jest-fetch-mock": "^3.0.3",
     "prettier": "^2.0.0"
   },
   "dependencies": {
+    "@progress/kendo-drawing": "^1.6.0",
+    "@progress/kendo-react-pdf": "^3.10.1",
+    "babel-preset-jest": "^24.9.0",
     "prop-types": "^15.7.2",
+    "qrcode.react": "^1.0.0",
     "ra-language-german": "^2.1.2",
     "react": "^16.13.1",
-    "react-admin": "^3.4.0",
+    "react-admin": "^3.7.0",
     "react-dom": "^16.13.1",
     "react-scripts": "^3.4.1"
   },

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,12 +4,14 @@ 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 } from "./components/rooms";
+import { RoomList, RoomCreate, RoomShow } from "./components/rooms";
 import LoginPage from "./components/LoginPage";
 import UserIcon from "@material-ui/icons/Group";
 import { ViewListIcon as RoomIcon } from "@material-ui/icons/ViewList";
 import germanMessages from "./i18n/de";
 import englishMessages from "./i18n/en";
+import ShowUserPdf from "./components/ShowUserPdf";
+import { Route } from "react-router-dom";
 
 // TODO: Can we use lazy loading together with browser locale?
 const messages = {
@@ -27,6 +29,9 @@ const App = () => (
     authProvider={authProvider}
     dataProvider={dataProvider}
     i18nProvider={i18nProvider}
+    customRoutes={[
+      <Route key="showpdf" path="/showpdf" component={ShowUserPdf} />,
+    ]}
   >
     <Resource
       name="users"
@@ -35,8 +40,16 @@ const App = () => (
       edit={UserEdit}
       icon={UserIcon}
     />
-    <Resource name="rooms" list={RoomList} icon={RoomIcon} />
+    <Resource
+      name="rooms"
+      list={RoomList}
+      create={RoomCreate}
+      show={RoomShow}
+      icon={RoomIcon}
+    />
     <Resource name="connections" />
+    <Resource name="devices" />
+    <Resource name="room_members" />
     <Resource name="servernotices" />
   </Admin>
 );

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/devices.js

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

src/components/rooms.js

@@ -1,16 +1,35 @@
 import React from "react";
+import { connect } from "react-redux";
 import {
-  Datagrid,
-  List,
-  TextField,
-  Pagination,
+  AutocompleteArrayInput,
+  BooleanInput,
   BooleanField,
+  Create,
+  Datagrid,
+  Filter,
+  FormTab,
+  List,
+  Pagination,
+  ReferenceArrayInput,
+  ReferenceField,
+  ReferenceManyField,
+  SelectField,
+  Show,
+  Tab,
+  TabbedForm,
+  TabbedShowLayout,
+  TextField,
+  TextInput,
   useTranslate,
 } from "react-admin";
 import get from "lodash/get";
-import { Tooltip, Typography } from "@material-ui/core";
+import { Tooltip, Typography, Chip } from "@material-ui/core";
 import HttpsIcon from "@material-ui/icons/Https";
 import NoEncryptionIcon from "@material-ui/icons/NoEncryption";
+import PageviewIcon from "@material-ui/icons/Pageview";
+import UserIcon from "@material-ui/icons/Group";
+import ViewListIcon from "@material-ui/icons/ViewList";
+import VisibilityIcon from "@material-ui/icons/Visibility";
 
 const RoomPagination = props => (
   <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
@@ -42,27 +61,303 @@ const EncryptionField = ({ source, record = {}, emptyText }) => {
   );
 };
 
-export const RoomList = props => (
-  <List
-    {...props}
-    pagination={<RoomPagination />}
-    sort={{ field: "name", order: "ASC" }}
-  >
-    <Datagrid>
-      <EncryptionField
-        source="is_encrypted"
-        sortBy="encryption"
-        label={<HttpsIcon />}
-      />
-      <TextField source="room_id" sortable={false} />
-      <TextField source="name" />
-      <TextField source="canonical_alias" />
-      <TextField source="joined_members" />
-      <TextField source="joined_local_members" />
-      <TextField source="state_events" />
-      <TextField source="version" />
-      <BooleanField source="federatable" />
-      <BooleanField source="public" />
-    </Datagrid>
-  </List>
+const validateDisplayName = fieldval =>
+  fieldval === undefined
+    ? "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="#"
+        />
+        <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)} {record ? `"${record.name}"` : ""}
+    </span>
+  );
+};
+
+export const RoomShow = props => {
+  const translate = useTranslate();
+  return (
+    <Show {...props} title={<RoomTitle />}>
+      <TabbedShowLayout>
+        <Tab label="synapseadmin.rooms.tabs.basic" icon={<ViewListIcon />}>
+          <TextField source="room_id" />
+          <TextField source="name" />
+          <TextField source="canonical_alias" />
+          <TextField source="creator" />
+        </Tab>
+
+        <Tab
+          label="synapseadmin.rooms.tabs.detail"
+          icon={<PageviewIcon />}
+          path="detail"
+        >
+          <TextField source="joined_members" />
+          <TextField source="joined_local_members" />
+          <TextField source="state_events" />
+          <TextField source="version" />
+          <TextField
+            source="encryption"
+            emptyText={translate("resources.rooms.enums.unencrypted")}
+          />
+        </Tab>
+
+        <Tab label="synapseadmin.rooms.tabs.members" icon={<UserIcon />}>
+          <ReferenceManyField
+            reference="room_members"
+            target="room_id"
+            addLabel={false}
+          >
+            <Datagrid
+              style={{ width: "100%" }}
+              rowClick={(id, basePath, record) => "/users/" + id}
+            >
+              <TextField
+                source="id"
+                sortable={false}
+                label="resources.users.fields.id"
+              />
+              <ReferenceField
+                label="resources.users.fields.displayname"
+                source="id"
+                reference="users"
+                sortable={false}
+                link=""
+              >
+                <TextField source="displayname" sortable={false} />
+              </ReferenceField>
+            </Datagrid>
+          </ReferenceManyField>
+        </Tab>
+
+        <Tab
+          label="synapseadmin.rooms.tabs.permission"
+          icon={<VisibilityIcon />}
+          path="permission"
+        >
+          <BooleanField source="federatable" />
+          <BooleanField source="public" />
+          <SelectField
+            source="join_rules"
+            choices={[
+              { id: "public", name: "resources.rooms.enums.join_rules.public" },
+              { id: "knock", name: "resources.rooms.enums.join_rules.knock" },
+              { id: "invite", name: "resources.rooms.enums.join_rules.invite" },
+              {
+                id: "private",
+                name: "resources.rooms.enums.join_rules.private",
+              },
+            ]}
+          />
+          <SelectField
+            source="guest_access"
+            choices={[
+              {
+                id: "can_join",
+                name: "resources.rooms.enums.guest_access.can_join",
+              },
+              {
+                id: "forbidden",
+                name: "resources.rooms.enums.guest_access.forbidden",
+              },
+            ]}
+          />
+          <SelectField
+            source="history_visibility"
+            choices={[
+              {
+                id: "invited",
+                name: "resources.rooms.enums.history_visibility.invited",
+              },
+              {
+                id: "joined",
+                name: "resources.rooms.enums.history_visibility.joined",
+              },
+              {
+                id: "shared",
+                name: "resources.rooms.enums.history_visibility.shared",
+              },
+              {
+                id: "world_readable",
+                name: "resources.rooms.enums.history_visibility.world_readable",
+              },
+            ]}
+          />
+        </Tab>
+      </TabbedShowLayout>
+    </Show>
+  );
+};
+const RoomFilter = ({ ...props }) => {
+  const translate = useTranslate();
+  return (
+    <Filter {...props}>
+      <Chip
+        label={translate("resources.rooms.fields.joined_local_members")}
+        source="joined_local_members"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
+      />
+      <Chip
+        label={translate("resources.rooms.fields.state_events")}
+        source="state_events"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
+      />
+      <Chip
+        label={translate("resources.rooms.fields.version")}
+        source="version"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
+      />
+      <Chip
+        label={translate("resources.rooms.fields.federatable")}
+        source="federatable"
+        defaultValue={false}
+        style={{ marginBottom: 8 }}
+      />
+    </Filter>
+  );
+};
+
+const FilterableRoomList = ({ ...props }) => {
+  const filter = props.roomFilters;
+  const localMembersFilter =
+    filter && filter.joined_local_members ? true : false;
+  const stateEventsFilter = filter && filter.state_events ? true : false;
+  const versionFilter = filter && filter.version ? true : false;
+  const federateableFilter = filter && filter.federatable ? true : false;
+
+  return (
+    <List
+      {...props}
+      pagination={<RoomPagination />}
+      sort={{ field: "name", order: "ASC" }}
+      filters={<RoomFilter />}
+    >
+      <Datagrid rowClick="show">
+        <EncryptionField
+          source="is_encrypted"
+          sortBy="encryption"
+          label={<HttpsIcon />}
+        />
+        <TextField source="name" />
+        <TextField source="joined_members" />
+        {localMembersFilter && <TextField source="joined_local_members" />}
+        {stateEventsFilter && <TextField source="state_events" />}
+        {versionFilter && <TextField source="version" />}
+        {federateableFilter && <BooleanField source="federatable" />}
+        <BooleanField source="public" />
+      </Datagrid>
+    </List>
+  );
+};
+
+function mapStateToProps(state) {
+  return {
+    roomFilters: state.admin.resources.rooms.list.params.displayedFilters,
+  };
+}
+
+export const RoomList = connect(mapStateToProps)(FilterableRoomList);

src/components/users.js

@@ -1,7 +1,8 @@
-import React, { Fragment } from "react";
+import React, { cloneElement, Fragment } from "react";
 import Avatar from "@material-ui/core/Avatar";
 import PersonPinIcon from "@material-ui/icons/PersonPin";
 import ContactMailIcon from "@material-ui/icons/ContactMail";
+import DevicesIcon from "@material-ui/icons/Devices";
 import SettingsInputComponentIcon from "@material-ui/icons/SettingsInputComponent";
 import {
   ArrayInput,
@@ -22,7 +23,9 @@ import {
   PasswordInput,
   TextField,
   TextInput,
+  SearchInput,
   ReferenceField,
+  ReferenceManyField,
   SelectInput,
   BulkDeleteButton,
   DeleteButton,
@@ -30,8 +33,14 @@ import {
   regex,
   useTranslate,
   Pagination,
+  CreateButton,
+  ExportButton,
+  TopToolbar,
+  sanitizeListRestProps,
 } from "react-admin";
+import SaveQrButton from "./SaveQrButton";
 import { ServerNoticeButton, ServerNoticeBulkButton } from "./ServerNotices";
+import { DeviceRemoveButton } from "./devices";
 import { makeStyles } from "@material-ui/core/styles";
 
 const useStyles = makeStyles({
@@ -46,12 +55,52 @@ const useStyles = makeStyles({
   },
 });
 
+const UserListActions = ({
+  currentSort,
+  className,
+  resource,
+  filters,
+  displayedFilters,
+  exporter, // you can hide ExportButton if exporter = (null || false)
+  filterValues,
+  permanentFilter,
+  hasCreate, // you can hide CreateButton if hasCreate = false
+  basePath,
+  selectedIds,
+  onUnselectItems,
+  showFilter,
+  maxResults,
+  total,
+  ...rest
+}) => (
+  <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
+    {filters &&
+      cloneElement(filters, {
+        resource,
+        showFilter,
+        displayedFilters,
+        filterValues,
+        context: "button",
+      })}
+    <CreateButton basePath={basePath} />
+    <ExportButton
+      disabled={total === 0}
+      resource={resource}
+      sort={currentSort}
+      filter={{ ...filterValues, ...permanentFilter }}
+      exporter={exporter}
+      maxResults={maxResults}
+    />
+  </TopToolbar>
+);
+
 const UserPagination = props => (
   <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
 );
 
 const UserFilter = props => (
   <Filter {...props}>
+    <SearchInput source="user_id" alwaysOn />
     <BooleanInput source="guests" alwaysOn />
     <BooleanInput
       label="resources.users.fields.show_deactivated"
@@ -86,6 +135,7 @@ export const UserList = props => {
       {...props}
       filters={<UserFilter />}
       filterDefaultValues={{ guests: true, deactivated: false }}
+      actions={<UserListActions maxResults={10000} />}
       bulkActionButtons={<UserBulkActionButtons />}
       pagination={<UserPagination />}
     >
@@ -96,7 +146,7 @@ export const UserList = props => {
           className={classes.small}
         />
         <TextField source="id" sortable={false} />
-        <TextField source="displayname" sortable={false} />
+        <TextField source="displayname" />
         <BooleanField source="is_guest" sortable={false} />
         <BooleanField source="admin" sortable={false} />
         <BooleanField source="deactivated" sortable={false} />
@@ -105,6 +155,75 @@ export const UserList = props => {
   );
 };
 
+function generateRandomUser() {
+  const homeserver = localStorage.getItem("home_server");
+  const user_id =
+    "@" +
+    Array(8)
+      .fill("0123456789abcdefghijklmnopqrstuvwxyz")
+      .map(
+        x =>
+          x[
+            Math.floor(
+              (crypto.getRandomValues(new Uint32Array(1))[0] /
+                (0xffffffff + 1)) *
+                x.length
+            )
+          ]
+      )
+      .join("") +
+    ":" +
+    homeserver;
+
+  const password = Array(20)
+    .fill(
+      "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~!@-#$"
+    )
+    .map(
+      x =>
+        x[
+          Math.floor(
+            (crypto.getRandomValues(new Uint32Array(1))[0] / (0xffffffff + 1)) *
+              x.length
+          )
+        ]
+    )
+    .join("");
+
+  return {
+    id: user_id,
+    password: password,
+  };
+}
+
+// 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._=\-/]+:.*/,
@@ -115,7 +234,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"
         title={translate("resources.users.helper.erase")}
@@ -126,8 +255,8 @@ 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" />
@@ -159,12 +288,17 @@ const UserTitle = ({ record }) => {
     </span>
   );
 };
+
 export const UserEdit = props => {
   const classes = useStyles();
+  const translate = useTranslate();
   return (
     <Edit {...props} title={<UserTitle />}>
       <TabbedForm toolbar={<UserEditToolbar />}>
-        <FormTab label="resources.users.name" icon={<PersonPinIcon />}>
+        <FormTab
+          label={translate("resources.users.name", { smart_count: 1 })}
+          icon={<PersonPinIcon />}
+        >
           <AvatarField
             source="avatar_src"
             sortable={false}
@@ -210,6 +344,37 @@ export const UserEdit = props => {
             </SimpleFormIterator>
           </ArrayInput>
         </FormTab>
+        <FormTab
+          label={translate("resources.devices.name", { smart_count: 2 })}
+          icon={<DevicesIcon />}
+          path="devices"
+        >
+          <ReferenceManyField
+            reference="devices"
+            target="user_id"
+            addLabel={false}
+          >
+            <Datagrid style={{ width: "100%" }}>
+              <TextField source="device_id" sortable={false} />
+              <TextField source="display_name" sortable={false} />
+              <TextField source="last_seen_ip" sortable={false} />
+              <DateField
+                source="last_seen_ts"
+                showTime
+                options={{
+                  year: "numeric",
+                  month: "2-digit",
+                  day: "2-digit",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  second: "2-digit",
+                }}
+                sortable={false}
+              />
+              <DeviceRemoveButton />
+            </Datagrid>
+          </ReferenceManyField>
+        </FormTab>
         <FormTab
           label="resources.connections.name"
           icon={<SettingsInputComponentIcon />}

src/i18n/de.js

@@ -11,10 +11,32 @@ export default {
       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",
     },
+    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",
+        detail: "Details",
+        permission: "Berechtigungen",
+      },
+    },
   },
   resources: {
     users: {
@@ -28,7 +50,7 @@ export default {
         id: "Benutzer-ID",
         name: "Name",
         is_guest: "Gast",
-        admin: "Admin",
+        admin: "Server Administrator",
         deactivated: "Deaktiviert",
         guests: "Zeige Gäste",
         show_deactivated: "Zeige deaktivierte Benutzer",
@@ -42,6 +64,11 @@ export default {
         address: "Adresse",
         creation_ts_ms: "Zeitpunkt der Erstellung",
         consent_version: "Zugestimmte Geschäftsbedingungen",
+        // Devices:
+        device_id: "Geräte-ID",
+        display_name: "Gerätename",
+        last_seen_ts: "Zeitstempel",
+        last_seen_ip: "IP-Adresse",
       },
       helper: {
         deactivate: "Deaktivierte Nutzer können nicht wieder aktiviert werden.",
@@ -58,12 +85,38 @@ export default {
         name: "Name",
         canonical_alias: "Alias",
         joined_members: "Mitglieder",
-        joined_local_members: "lokale Mitglieder",
+        invite_members: "Mitglieder einladen",
+        invitees: "Einladungen",
+        joined_local_members: "Lokale Mitglieder",
         state_events: "Ereignisse",
         version: "Version",
         is_encrypted: "Verschlüsselt",
-        federatable: "Fö­de­riert",
+        encryption: "Verschlüsselungs-Algorithmus",
+        federatable: "Fö­de­rierbar",
         public: "Öffentlich",
+        creator: "Ersteller",
+        join_rules: "Beitrittsregeln",
+        guest_access: "Gastzugriff",
+        history_visibility: "Historie-Sichtbarkeit",
+      },
+      enums: {
+        join_rules: {
+          public: "Öffentlich",
+          knock: "Auf Anfrage",
+          invite: "Nur auf Einladung",
+          private: "Privat",
+        },
+        guest_access: {
+          can_join: "Gäste können beitreten",
+          forbidden: "Gäste können nicht beitreten",
+        },
+        history_visibility: {
+          invited: "Ab Einladung",
+          joined: "Ab Beitritt",
+          shared: "Ab Setzen der Einstellung",
+          world_readable: "Jeder",
+        },
+        unencrypted: "Nicht verschlüsselt",
       },
     },
     connections: {
@@ -74,6 +127,17 @@ export default {
         user_agent: "User Agent",
       },
     },
+    devices: {
+      name: "Gerät |||| Geräte",
+      action: {
+        erase: {
+          title: "Entferne %{id}",
+          content: 'Möchten Sie das Gerät "%{name}" wirklich entfernen?',
+          success: "Gerät erfolgreich entfernt.",
+          failure: "Beim Entfernen ist ein Fehler aufgetreten.",
+        },
+      },
+    },
     servernotices: {
       name: "Serverbenachrichtigungen",
       send: "Servernachricht versenden",

src/i18n/en.js

@@ -6,14 +6,37 @@ export default {
     auth: {
       base_url: "Homeserver URL",
       welcome: "Welcome to Synapse-admin",
+      server_version: "Synapse version",
       username_error: "Please enter fully qualified user ID: '@user:domain'",
       protocol_error: "URL has to start with 'http://' or 'https://'",
       url_error: "Not a valid Matrix server URL",
     },
+    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",
     },
+    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",
+        detail: "Details",
+        permission: "Permissions",
+      },
+    },
   },
   resources: {
     users: {
@@ -27,7 +50,7 @@ export default {
         id: "User-ID",
         name: "Name",
         is_guest: "Guest",
-        admin: "Admin",
+        admin: "Server Administrator",
         deactivated: "Deactivated",
         guests: "Show guests",
         show_deactivated: "Show deactivated users",
@@ -41,6 +64,11 @@ export default {
         address: "Address",
         creation_ts_ms: "Creation timestamp",
         consent_version: "Consent version",
+        // Devices:
+        device_id: "Device-ID",
+        display_name: "Device name",
+        last_seen_ts: "Timestamp",
+        last_seen_ip: "IP address",
       },
       helper: {
         deactivate: "Deactivated users cannot be reactivated",
@@ -57,12 +85,38 @@ export default {
         name: "Name",
         canonical_alias: "Alias",
         joined_members: "Members",
+        invite_members: "Invite Members",
+        invitees: "Invitations",
         joined_local_members: "local members",
         state_events: "State events",
         version: "Version",
         is_encrypted: "Encrypted",
+        encryption: "Encryption",
         federatable: "Federatable",
         public: "Public",
+        creator: "Creator",
+        join_rules: "Join rules",
+        guest_access: "Guest access",
+        history_visibility: "History visibility",
+      },
+      enums: {
+        join_rules: {
+          public: "Public",
+          knock: "Knock",
+          invite: "Invite",
+          private: "Private",
+        },
+        guest_access: {
+          can_join: "Guests can join",
+          forbidden: "Guests can not join",
+        },
+        history_visibility: {
+          invited: "Since invited",
+          joined: "Since joined",
+          shared: "Since shared",
+          world_readable: "Anyone",
+        },
+        unencrypted: "Unencrypted",
       },
     },
     connections: {
@@ -73,6 +127,17 @@ export default {
         user_agent: "User agent",
       },
     },
+    devices: {
+      name: "Device |||| Devices",
+      action: {
+        erase: {
+          title: "Removing %{id}",
+          content: 'Are you sure you want to remove the device "%{name}"?',
+          success: "Device successfully removed.",
+          failure: "An error has occurred.",
+        },
+      },
+    },
     servernotices: {
       name: "Server Notices",
       send: "Send server notices",

src/setupTests.js

@@ -1,4 +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/dataProvider.js

@@ -35,6 +35,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,
     }),
@@ -45,8 +46,8 @@ const resourceMap = {
       body: data,
       method: "PUT",
     }),
-    delete: id => ({
-      endpoint: `/_synapse/admin/v1/deactivate/${id}`,
+    delete: params => ({
+      endpoint: `/_synapse/admin/v1/deactivate/${params.id}`,
       body: { erase: true },
       method: "POST",
     }),
@@ -63,9 +64,44 @@ const resourceMap = {
       public: !!r.public,
     }),
     data: "rooms",
-    total: json => {
-      return json.total_rooms;
-    },
+    total: json => json.total_rooms,
+    create: data => ({
+      endpoint: "/_matrix/client/r0/createRoom",
+      body: {
+        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",
+    }),
+  },
+  devices: {
+    map: d => ({
+      ...d,
+      id: d.device_id,
+    }),
+    data: "devices",
+    reference: id => ({
+      endpoint: `/_synapse/admin/v2/users/${id}/devices`,
+    }),
+    delete: params => ({
+      endpoint: `/_synapse/admin/v2/users/${params.user_id}/devices/${params.id}`,
+    }),
   },
   connections: {
     path: "/_synapse/admin/v1/whois",
@@ -75,6 +111,15 @@ const resourceMap = {
     }),
     data: "connections",
   },
+  room_members: {
+    map: m => ({
+      id: m,
+    }),
+    reference: id => ({
+      endpoint: `/_synapse/admin/v1/rooms/${id}/members`,
+    }),
+    data: "members",
+  },
   servernotices: {
     map: n => ({ id: n.event_id }),
     create: data => ({
@@ -166,30 +211,18 @@ const dataProvider = {
   },
 
   getManyReference: (resource, params) => {
-    // FIXME
     console.log("getManyReference " + resource);
-    const { page, perPage } = params.pagination;
-    const { field, order } = params.sort;
-    const query = {
-      sort: JSON.stringify([field, order]),
-      range: JSON.stringify([(page - 1) * perPage, page * perPage - 1]),
-      filter: JSON.stringify({
-        ...params.filter,
-        [params.target]: params.id,
-      }),
-    };
 
     const homeserver = localStorage.getItem("base_url");
     if (!homeserver || !(resource in resourceMap)) return Promise.reject();
 
     const res = resourceMap[resource];
 
-    const endpoint_url = homeserver + res.path;
-    const url = `${endpoint_url}?${stringify(query)}`;
+    const ref = res["reference"](params.id);
+    const endpoint_url = homeserver + ref.endpoint;
 
-    return jsonClient(url).then(({ headers, json }) => ({
-      data: json,
-      total: parseInt(headers.get("content-range").split("/").pop(), 10),
+    return jsonClient(endpoint_url).then(({ headers, json }) => ({
+      data: json[res.data].map(res.map),
     }));
   },
 
@@ -276,11 +309,11 @@ const dataProvider = {
     const res = resourceMap[resource];
 
     if ("delete" in res) {
-      const del = res["delete"](params.id);
+      const del = res["delete"](params);
       const endpoint_url = homeserver + del.endpoint;
       return jsonClient(endpoint_url, {
-        method: del.method,
-        body: JSON.stringify(del.body),
+        method: "method" in del ? del.method : "DELETE",
+        body: "body" in del ? JSON.stringify(del.body) : null,
       }).then(({ json }) => ({
         data: json,
       }));
@@ -305,11 +338,11 @@ const dataProvider = {
     if ("delete" in res) {
       return Promise.all(
         params.ids.map(id => {
-          const del = res["delete"](id);
+          const del = res["delete"]({ ...params, id: id });
           const endpoint_url = homeserver + del.endpoint;
           return jsonClient(endpoint_url, {
-            method: del.method,
-            body: JSON.stringify(del.body),
+            method: "method" in del ? del.method : "DELETE",
+            body: "body" in del ? JSON.stringify(del.body) : null,
           });
         })
       ).then(responses => ({

src/synapse/dataProvider.test.js

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