Add buttons to erase users (#32)

Change-Id: I9b5644394d213dc66b30e39f19e9e392b69a0be3

.dockerignore

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

.gitignore

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

.prettierrc

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

.travis.yml

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

Dockerfile

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

LICENSE

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

README.md

@@ -0,0 +1,9 @@
+[![Build Status](https://travis-ci.org/Awesome-Technologies/synapse-admin.svg?branch=master)](https://travis-ci.org/Awesome-Technologies/synapse-admin)
+
+# Synapse admin ui
+
+This project is built using [react-admin](https://marmelab.com/react-admin/).
+
+Use `yarn install` after cloning this repo.
+
+Use `yarn start` to launch the webserver.

asset-manifest.json

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

data/example.csv

@@ -1,3 +0,0 @@
-id,displayname,password,is_guest,admin,deactivated
-testuser22,Jane Doe,secretpassword,false,true,false
-,John Doe,,false,false,false

index.html

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

package.json

@@ -0,0 +1,58 @@
+{
+  "name": "synapse-admin",
+  "version": "0.1.0",
+  "description": "Admin GUI for the Matrix.org server Synapse",
+  "author": "Awesome Technologies Innovationslabor GmbH",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Awesome-Technologies/synapse-admin"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.1.1",
+    "@testing-library/react": "^10.0.2",
+    "@testing-library/user-event": "^10.0.1",
+    "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",
+    "prettier": "^2.0.0"
+  },
+  "dependencies": {
+    "prop-types": "^15.7.2",
+    "ra-language-german": "^2.1.2",
+    "react": "^16.13.1",
+    "react-admin": "^3.4.0",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^3.4.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "fix:other": "yarn prettier --write",
+    "fix:code": "yarn test:lint --fix",
+    "fix": "yarn fix:code && yarn fix:other",
+    "prettier": "prettier \"**/*.{js,jsx,json,md,scss,yaml,yml}\"",
+    "test:code": "react-scripts test",
+    "test:lint": "eslint --ignore-path .gitignore --ext .js,.jsx .",
+    "test:style": "yarn prettier --list-different",
+    "test": "yarn test:style && yarn test:lint && yarn test:code",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Synapse-Admin"
+    />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Synapse-Admin</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/robots.txt

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

src/App.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { Admin, Resource, resolveBrowserLocale } from "react-admin";
+import polyglotI18nProvider from "ra-i18n-polyglot";
+import authProvider from "./synapse/authProvider";
+import dataProvider from "./synapse/dataProvider";
+import { UserList, UserCreate, UserEdit } from "./components/users";
+import { RoomList } 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";
+
+// TODO: Can we use lazy loading together with browser locale?
+const messages = {
+  de: germanMessages,
+  en: englishMessages,
+};
+const i18nProvider = polyglotI18nProvider(
+  locale => (messages[locale] ? messages[locale] : messages.en),
+  resolveBrowserLocale()
+);
+
+const App = () => (
+  <Admin
+    loginPage={LoginPage}
+    authProvider={authProvider}
+    dataProvider={dataProvider}
+    i18nProvider={i18nProvider}
+  >
+    <Resource
+      name="users"
+      list={UserList}
+      create={UserCreate}
+      edit={UserEdit}
+      icon={UserIcon}
+    />
+    <Resource name="rooms" list={RoomList} icon={RoomIcon} />
+    <Resource name="connections" />
+  </Admin>
+);
+
+export default App;

src/App.test.js

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

src/components/LoginPage.js

@@ -0,0 +1,198 @@
+import React, { useState } from "react";
+import {
+  Notification,
+  useLogin,
+  useNotify,
+  useLocale,
+  useSetLocale,
+  useTranslate,
+} from "react-admin";
+import { Field, Form } from "react-final-form";
+import {
+  Avatar,
+  Button,
+  Card,
+  CardActions,
+  CircularProgress,
+  MenuItem,
+  Select,
+  TextField,
+} from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import LockIcon from "@material-ui/icons/Lock";
+
+const useStyles = makeStyles(theme => ({
+  main: {
+    display: "flex",
+    flexDirection: "column",
+    minHeight: "100vh",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    background: "url(./images/floating-cogs.svg)",
+    backgroundColor: "#f9f9f9",
+    backgroundRepeat: "no-repeat",
+    backgroundSize: "cover",
+  },
+  card: {
+    minWidth: 300,
+    marginTop: "6em",
+  },
+  avatar: {
+    margin: "1em",
+    display: "flex",
+    justifyContent: "center",
+  },
+  icon: {
+    backgroundColor: theme.palette.secondary.main,
+  },
+  hint: {
+    marginTop: "1em",
+    display: "flex",
+    justifyContent: "center",
+    color: theme.palette.grey[500],
+  },
+  form: {
+    padding: "0 1em 1em 1em",
+  },
+  input: {
+    marginTop: "1em",
+  },
+  actions: {
+    padding: "0 1em 1em 1em",
+  },
+}));
+
+const LoginPage = ({ theme }) => {
+  const classes = useStyles({ theme });
+  const login = useLogin();
+  const notify = useNotify();
+  const [loading, setLoading] = useState(false);
+  var locale = useLocale();
+  const setLocale = useSetLocale();
+  const translate = useTranslate();
+  const homeserver = localStorage.getItem("base_url");
+
+  const renderInput = ({
+    meta: { touched, error } = {},
+    input: { ...inputProps },
+    ...props
+  }) => (
+    <TextField
+      error={!!(touched && error)}
+      helperText={touched && error}
+      {...inputProps}
+      {...props}
+      fullWidth
+    />
+  );
+
+  const validate = values => {
+    const errors = {};
+    if (!values.homeserver) {
+      errors.homeserver = translate("ra.validation.required");
+    }
+    if (!values.username) {
+      errors.username = translate("ra.validation.required");
+    }
+    if (!values.password) {
+      errors.password = translate("ra.validation.required");
+    }
+    return errors;
+  };
+
+  const handleSubmit = auth => {
+    setLoading(true);
+    login(auth).catch(error => {
+      setLoading(false);
+      notify(
+        typeof error === "string"
+          ? error
+          : typeof error === "undefined" || !error.message
+          ? "ra.auth.sign_in_error"
+          : error.message,
+        "warning"
+      );
+    });
+  };
+
+  return (
+    <Form
+      initialValues={{ homeserver: homeserver }}
+      onSubmit={handleSubmit}
+      validate={validate}
+      render={({ handleSubmit }) => (
+        <form onSubmit={handleSubmit} noValidate>
+          <div className={classes.main}>
+            <Card className={classes.card}>
+              <div className={classes.avatar}>
+                <Avatar className={classes.icon}>
+                  <LockIcon />
+                </Avatar>
+              </div>
+              <div className={classes.hint}>
+                {translate("synapseadmin.auth.welcome")}
+              </div>
+              <div className={classes.form}>
+                <div className={classes.input}>
+                  <Select
+                    value={locale}
+                    onChange={e => {
+                      setLocale(e.target.value);
+                    }}
+                    fullWidth
+                    disabled={loading}
+                  >
+                    <MenuItem value="de">Deutsch</MenuItem>
+                    <MenuItem value="en">English</MenuItem>
+                  </Select>
+                </div>
+                <div className={classes.input}>
+                  <Field
+                    autoFocus
+                    name="homeserver"
+                    component={renderInput}
+                    label={translate("synapseadmin.auth.homeserver")}
+                    disabled={loading}
+                  />
+                </div>
+                <div className={classes.input}>
+                  <Field
+                    name="username"
+                    component={renderInput}
+                    label={translate("ra.auth.username")}
+                    disabled={loading}
+                  />
+                </div>
+                <div className={classes.input}>
+                  <Field
+                    name="password"
+                    component={renderInput}
+                    label={translate("ra.auth.password")}
+                    type="password"
+                    disabled={loading}
+                  />
+                </div>
+              </div>
+              <CardActions className={classes.actions}>
+                <Button
+                  variant="contained"
+                  type="submit"
+                  color="primary"
+                  disabled={loading}
+                  className={classes.button}
+                  fullWidth
+                >
+                  {loading && <CircularProgress size={25} thickness={2} />}
+                  {translate("ra.auth.sign_in")}
+                </Button>
+              </CardActions>
+            </Card>
+            <Notification />
+          </div>
+        </form>
+      )}
+    />
+  );
+};
+
+export default LoginPage;

src/components/LoginPage.test.js

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

src/components/rooms.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Datagrid, List, TextField, Pagination } from "react-admin";
+
+const RoomPagination = props => (
+  <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
+);
+
+export const RoomList = props => (
+  <List {...props} pagination={<RoomPagination />}>
+    <Datagrid>
+      <TextField source="room_id" />
+      <TextField source="name" />
+      <TextField source="canonical_alias" />
+      <TextField source="joined_members" />
+    </Datagrid>
+  </List>
+);

src/components/users.js

@@ -0,0 +1,198 @@
+import React, { Fragment } from "react";
+import PersonPinIcon from "@material-ui/icons/PersonPin";
+import SettingsInputComponentIcon from "@material-ui/icons/SettingsInputComponent";
+import {
+  ArrayInput,
+  ArrayField,
+  Datagrid,
+  DateField,
+  Create,
+  Edit,
+  List,
+  Filter,
+  Toolbar,
+  SimpleForm,
+  SimpleFormIterator,
+  TabbedForm,
+  FormTab,
+  BooleanField,
+  BooleanInput,
+  ImageField,
+  PasswordInput,
+  TextField,
+  TextInput,
+  ReferenceField,
+  SelectInput,
+  BulkDeleteButton,
+  DeleteButton,
+  SaveButton,
+  regex,
+  useTranslate,
+  Pagination,
+} from "react-admin";
+
+const UserPagination = props => (
+  <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
+);
+
+const UserFilter = props => (
+  <Filter {...props}>
+    <BooleanInput source="guests" alwaysOn />
+    <BooleanInput
+      label="resources.users.fields.show_deactivated"
+      source="deactivated"
+      alwaysOn
+    />
+  </Filter>
+);
+
+const UserBulkActionButtons = props => {
+  const translate = useTranslate();
+  return (
+    <Fragment>
+      <BulkDeleteButton
+        {...props}
+        label="resources.users.action.erase"
+        title={translate("resources.users.helper.erase")}
+      />
+    </Fragment>
+  );
+};
+
+export const UserList = props => (
+  <List
+    {...props}
+    filters={<UserFilter />}
+    filterDefaultValues={{ guests: true, deactivated: false }}
+    bulkActionButtons={<UserBulkActionButtons />}
+    pagination={<UserPagination />}
+  >
+    <Datagrid rowClick="edit">
+      <ReferenceField
+        source="Avatar"
+        reference="users"
+        link={false}
+        sortable={false}
+      >
+        <ImageField source="avatar_url" title="displayname" />
+      </ReferenceField>
+      <TextField source="id" />
+      {/* Hack since the users endpoint does not give displaynames in the list*/}
+      <ReferenceField
+        source="name"
+        reference="users"
+        link={false}
+        sortable={false}
+      >
+        <TextField source="displayname" />
+      </ReferenceField>
+      <BooleanField source="is_guest" sortable={false} />
+      <BooleanField source="admin" sortable={false} />
+      <BooleanField source="deactivated" sortable={false} />
+    </Datagrid>
+  </List>
+);
+
+// https://matrix.org/docs/spec/appendices#user-identifiers
+const validateUser = regex(
+  /^@[a-z0-9._=\-/]+:.*/,
+  "synapseadmin.users.invalid_user_id"
+);
+
+const UserEditToolbar = props => {
+  const translate = useTranslate();
+  return (
+    <Toolbar {...props}>
+      <SaveButton submitOnEnter={true} />
+      <DeleteButton
+        label="resources.users.action.erase"
+        title={translate("resources.users.helper.erase")}
+      />
+    </Toolbar>
+  );
+};
+
+export const UserCreate = props => (
+  <Create {...props}>
+    <SimpleForm>
+      <TextInput source="id" autoComplete="off" validate={validateUser} />
+      <TextInput source="displayname" />
+      <PasswordInput source="password" autoComplete="new-password" />
+      <BooleanInput source="admin" />
+      <ArrayInput source="threepids">
+        <SimpleFormIterator>
+          <SelectInput
+            source="medium"
+            choices={[
+              { id: "email", name: "resources.users.email" },
+              { id: "msisdn", name: "resources.users.msisdn" },
+            ]}
+          />
+          <TextInput source="address" />
+        </SimpleFormIterator>
+      </ArrayInput>
+    </SimpleForm>
+  </Create>
+);
+
+export const UserEdit = props => (
+  <Edit {...props}>
+    <TabbedForm toolbar={<UserEditToolbar />}>
+      <FormTab label="resources.users.name" icon={<PersonPinIcon />}>
+        <TextInput source="id" disabled />
+        <TextInput source="displayname" />
+        <PasswordInput source="password" autoComplete="new-password" />
+        <BooleanInput source="admin" />
+        <BooleanInput
+          source="deactivated"
+          helperText="resources.users.helper.deactivate"
+        />
+        <ArrayInput source="threepids">
+          <SimpleFormIterator>
+            <SelectInput
+              source="medium"
+              choices={[
+                { id: "email", name: "resources.users.email" },
+                { id: "msisdn", name: "resources.users.msisdn" },
+              ]}
+            />
+            <TextInput source="address" />
+          </SimpleFormIterator>
+        </ArrayInput>
+      </FormTab>
+      <FormTab
+        label="resources.connections.name"
+        icon={<SettingsInputComponentIcon />}
+      >
+        <ReferenceField reference="connections" source="id" addLabel={false}>
+          <ArrayField
+            source="devices[].sessions[0].connections"
+            label="resources.connections.name"
+          >
+            <Datagrid style={{ width: "100%" }}>
+              <TextField source="ip" sortable={false} />
+              <DateField
+                source="last_seen"
+                showTime
+                options={{
+                  year: "numeric",
+                  month: "2-digit",
+                  day: "2-digit",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  second: "2-digit",
+                }}
+                sortable={false}
+              />
+              <TextField
+                source="user_agent"
+                sortable={false}
+                style={{ width: "100%" }}
+              />
+            </Datagrid>
+          </ArrayField>
+        </ReferenceField>
+      </FormTab>
+    </TabbedForm>
+  </Edit>
+);

src/i18n/de.js

@@ -0,0 +1,64 @@
+import germanMessages from "ra-language-german";
+
+export default {
+  ...germanMessages,
+  synapseadmin: {
+    auth: {
+      homeserver: "Heimserver",
+      welcome: "Willkommen bei Synapse-admin",
+    },
+    users: {
+      invalid_user_id:
+        "Muss eine vollständige Matrix Benutzer-ID sein, z.B. @benutzer_id:homeserver",
+    },
+  },
+  resources: {
+    users: {
+      backtolist: "Zurück zur Liste",
+      name: "Benutzer",
+      email: "E-Mail",
+      msisdn: "Telefon",
+      fields: {
+        avatar: "Avatar",
+        id: "Benutzer-ID",
+        name: "Name",
+        is_guest: "Gast",
+        admin: "Admin",
+        deactivated: "Deaktiviert",
+        guests: "Zeige Gäste",
+        show_deactivated: "Zeige deaktivierte Benutzer",
+        user_id: "Suche Benutzer",
+        displayname: "Anzeigename",
+        password: "Passwort",
+        avatar_url: "Avatar URL",
+        medium: "Medium",
+        threepids: "3PIDs",
+        address: "Adresse",
+      },
+      helper: {
+        deactivate: "Deaktivierte Nutzer können nicht wieder aktiviert werden.",
+        erase: "DSGVO konformes Löschen der Benutzerdaten",
+      },
+      action: {
+        erase: "Lösche Benutzerdaten",
+      },
+    },
+    rooms: {
+      name: "Raum |||| Räume",
+      fields: {
+        room_id: "Raum-ID",
+        name: "Name",
+        canonical_alias: "Alias",
+        joined_members: "Mitglieder",
+      },
+    },
+    connections: {
+      name: "Verbindungen",
+      fields: {
+        last_seen: "Datum",
+        ip: "IP-Adresse",
+        user_agent: "User Agent",
+      },
+    },
+  },
+};

src/i18n/en.js

@@ -0,0 +1,64 @@
+import englishMessages from "ra-language-english";
+
+export default {
+  ...englishMessages,
+  synapseadmin: {
+    auth: {
+      homeserver: "Homeserver",
+      welcome: "Welcome to Synapse-admin",
+    },
+    users: {
+      invalid_user_id:
+        "Must be a fully qualified Matrix user-id, e.g. @user_id:homeserver",
+    },
+  },
+  resources: {
+    users: {
+      backtolist: "Back to list",
+      name: "User |||| Users",
+      email: "Email",
+      msisdn: "Phone",
+      fields: {
+        avatar: "Avatar",
+        id: "User-ID",
+        name: "Name",
+        is_guest: "Guest",
+        admin: "Admin",
+        deactivated: "Deactivated",
+        guests: "Show guests",
+        show_deactivated: "Show deactivated users",
+        user_id: "Search user",
+        displayname: "Displayname",
+        password: "Password",
+        avatar_url: "Avatar URL",
+        medium: "Medium",
+        threepids: "3PIDs",
+        address: "Address",
+      },
+      helper: {
+        deactivate: "Deactivated users cannot be reactivated",
+        erase: "Mark the user as GDPR-erased",
+      },
+      action: {
+        erase: "Erase user data",
+      },
+    },
+    rooms: {
+      name: "Room |||| Rooms",
+      fields: {
+        room_id: "Room-ID",
+        name: "Name",
+        canonical_alias: "Alias",
+        joined_members: "Members",
+      },
+    },
+    connections: {
+      name: "Connections",
+      fields: {
+        last_seen: "Date",
+        ip: "IP address",
+        user_agent: "User agent",
+      },
+    },
+  },
+};

src/index.js

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

src/setupTests.js

@@ -0,0 +1,4 @@
+import { configure } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+
+configure({ adapter: new Adapter() });

src/synapse/authProvider.js

@@ -0,0 +1,73 @@
+import { fetchUtils } from "react-admin";
+
+const ensureHttpsForUrl = url => {
+  if (/^https:\/\//i.test(url)) {
+    return url;
+  }
+  const domain = url.replace(/http.?:\/\//g, "");
+  return "https://" + domain;
+};
+
+const stripTrailingSlash = str => {
+  if (!str) {
+    return;
+  }
+  return str.endsWith("/") ? str.slice(0, -1) : str;
+};
+
+const authProvider = {
+  // called when the user attempts to log in
+  login: ({ homeserver, username, password }) => {
+    console.log("login ");
+    const options = {
+      method: "POST",
+      body: JSON.stringify({
+        type: "m.login.password",
+        user: username,
+        password: password,
+      }),
+    };
+
+    const url = window.decodeURIComponent(homeserver);
+    const trimmed_url = url.trim().replace(/\s/g, "");
+    const login_api_url =
+      ensureHttpsForUrl(trimmed_url) + "/_matrix/client/r0/login";
+
+    return fetchUtils.fetchJson(login_api_url, options).then(({ json }) => {
+      const normalized_base_url = stripTrailingSlash(
+        json.well_known["m.homeserver"].base_url
+      );
+      localStorage.setItem("base_url", normalized_base_url);
+      localStorage.setItem("home_server_url", json.home_server);
+      localStorage.setItem("user_id", json.user_id);
+      localStorage.setItem("access_token", json.access_token);
+      localStorage.setItem("device_id", json.device_id);
+    });
+  },
+  // called when the user clicks on the logout button
+  logout: () => {
+    console.log("logout ");
+    localStorage.removeItem("access_token");
+    return Promise.resolve();
+  },
+  // called when the API returns an error
+  checkError: ({ status }) => {
+    console.log("checkError " + status);
+    if (status === 401 || status === 403) {
+      return Promise.reject();
+    }
+    return Promise.resolve();
+  },
+  // called when the user navigates to a new location, to check for authentication
+  checkAuth: () => {
+    const access_token = localStorage.getItem("access_token");
+    console.log("checkAuth " + access_token);
+    return typeof access_token == "string"
+      ? Promise.resolve()
+      : Promise.reject();
+  },
+  // called when the user navigates to a new location, to check for permissions / roles
+  getPermissions: () => Promise.resolve(),
+};
+
+export default authProvider;

src/synapse/dataProvider.js

@@ -0,0 +1,266 @@
+import { fetchUtils } from "react-admin";
+import { stringify } from "query-string";
+
+// Adds the access token to all requests
+const jsonClient = (url, options = {}) => {
+  const token = localStorage.getItem("access_token");
+  console.log("httpClient " + url);
+  if (token != null) {
+    options.user = {
+      authenticated: true,
+      token: `Bearer ${token}`,
+    };
+  }
+  return fetchUtils.fetchJson(url, options);
+};
+
+const resourceMap = {
+  users: {
+    path: "/_synapse/admin/v2/users",
+    map: u => ({
+      ...u,
+      id: u.name,
+      is_guest: !!u.is_guest,
+      admin: !!u.admin,
+      deactivated: !!u.deactivated,
+    }),
+    data: "users",
+    total: (json, from, perPage) => {
+      return json.next_token
+        ? parseInt(json.next_token, 10) + perPage
+        : from + json.users.length;
+    },
+    delete: id => ({
+      endpoint: `/_synapse/admin/v1/deactivate/${id}`,
+      body: { erase: true },
+      method: "POST",
+    }),
+  },
+  rooms: {
+    path: "/_synapse/admin/v1/rooms",
+    map: r => ({
+      ...r,
+      id: r.room_id,
+      alias: r.canonical_alias,
+      members: r.joined_members,
+    }),
+    data: "rooms",
+    total: json => {
+      return json.total_rooms;
+    },
+  },
+  connections: {
+    path: "/_synapse/admin/v1/whois",
+    map: c => ({
+      ...c,
+      id: c.user_id,
+    }),
+    data: "connections",
+  },
+};
+
+function filterNullValues(key, value) {
+  // Filtering out null properties
+  if (value === null) {
+    return undefined;
+  }
+  return value;
+}
+
+const dataProvider = {
+  getList: (resource, params) => {
+    console.log("getList " + resource);
+    const { user_id, guests, deactivated } = params.filter;
+    const { page, perPage } = params.pagination;
+    const from = (page - 1) * perPage;
+    const query = {
+      from: from,
+      limit: perPage,
+      user_id: user_id,
+      guests: guests,
+      deactivated: deactivated,
+    };
+    const homeserver = localStorage.getItem("base_url");
+    if (!homeserver || !(resource in resourceMap)) return Promise.reject();
+
+    const res = resourceMap[resource];
+
+    const homeserver_url = homeserver + res.path;
+    const url = `${homeserver_url}?${stringify(query)}`;
+
+    return jsonClient(url).then(({ json }) => ({
+      data: json[res.data].map(res.map),
+      total: res.total(json, from, perPage),
+    }));
+  },
+
+  getOne: (resource, params) => {
+    console.log("getOne " + resource);
+    const homeserver = localStorage.getItem("base_url");
+    if (!homeserver || !(resource in resourceMap)) return Promise.reject();
+
+    const res = resourceMap[resource];
+
+    const homeserver_url = homeserver + res.path;
+    return jsonClient(`${homeserver_url}/${params.id}`).then(({ json }) => ({
+      data: res.map(json),
+    }));
+  },
+
+  getMany: (resource, params) => {
+    console.log("getMany " + resource);
+    const homeserver = localStorage.getItem("base_url");
+    if (!homeserver || !(resource in resourceMap)) return Promise.reject();
+
+    const res = resourceMap[resource];
+
+    const homeserver_url = homeserver + res.path;
+    return Promise.all(
+      params.ids.map(id => jsonClient(`${homeserver_url}/${id}`))
+    ).then(responses => ({
+      data: responses.map(({ json }) => res.map(json)),
+    }));
+  },
+
+  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 homeserver_url = homeserver + res.path;
+    const url = `${homeserver_url}?${stringify(query)}`;
+
+    return jsonClient(url).then(({ headers, json }) => ({
+      data: json,
+      total: parseInt(headers.get("content-range").split("/").pop(), 10),
+    }));
+  },
+
+  update: (resource, params) => {
+    console.log("update " + resource);
+    const homeserver = localStorage.getItem("base_url");
+    if (!homeserver || !(resource in resourceMap)) return Promise.reject();
+
+    const res = resourceMap[resource];
+
+    const homeserver_url = homeserver + res.path;
+    return jsonClient(`${homeserver_url}/${params.data.id}`, {
+      method: "PUT",
+      body: JSON.stringify(params.data, filterNullValues),
+    }).then(({ json }) => ({
+      data: res.map(json),
+    }));
+  },
+
+  updateMany: (resource, params) => {
+    console.log("updateMany " + resource);
+    const homeserver = localStorage.getItem("base_url");
+    if (!homeserver || !(resource in resourceMap)) return Promise.reject();
+
+    const res = resourceMap[resource];
+
+    const homeserver_url = homeserver + res.path;
+    return Promise.all(
+      params.ids.map(id => jsonClient(`${homeserver_url}/${id}`), {
+        method: "PUT",
+        body: JSON.stringify(params.data, filterNullValues),
+      })
+    ).then(responses => ({
+      data: responses.map(({ json }) => json),
+    }));
+  },
+
+  create: (resource, params) => {
+    console.log("create " + resource);
+    const homeserver = localStorage.getItem("base_url");
+    if (!homeserver || !(resource in resourceMap)) return Promise.reject();
+
+    const res = resourceMap[resource];
+
+    const homeserver_url = homeserver + res.path;
+    return jsonClient(`${homeserver_url}/${params.data.id}`, {
+      method: "PUT",
+      body: JSON.stringify(params.data, filterNullValues),
+    }).then(({ json }) => ({
+      data: res.map(json),
+    }));
+  },
+
+  delete: (resource, params) => {
+    console.log("delete " + resource);
+    const homeserver = localStorage.getItem("base_url");
+    if (!homeserver || !(resource in resourceMap)) return Promise.reject();
+
+    const res = resourceMap[resource];
+
+    if ("delete" in res) {
+      const del = res["delete"](params.id);
+      const homeserver_url = homeserver + del.endpoint;
+      return jsonClient(homeserver_url, {
+        method: del.method,
+        body: JSON.stringify(del.body),
+      }).then(({ json }) => ({
+        data: json,
+      }));
+    } else {
+      const homeserver_url = homeserver + res.path;
+      return jsonClient(`${homeserver_url}/${params.id}`, {
+        method: "DELETE",
+        body: JSON.stringify(params.data, filterNullValues),
+      }).then(({ json }) => ({
+        data: json,
+      }));
+    }
+  },
+
+  deleteMany: (resource, params) => {
+    console.log("deleteMany " + resource);
+    const homeserver = localStorage.getItem("base_url");
+    if (!homeserver || !(resource in resourceMap)) return Promise.reject();
+
+    const res = resourceMap[resource];
+
+    if ("delete" in res) {
+      return Promise.all(
+        params.ids.map(id => {
+          const del = res["delete"](id);
+          const homeserver_url = homeserver + del.endpoint;
+          return jsonClient(homeserver_url, {
+            method: del.method,
+            body: JSON.stringify(del.body),
+          });
+        })
+      ).then(responses => ({
+        data: responses.map(({ json }) => json),
+      }));
+    } else {
+      const homeserver_url = homeserver + res.path;
+      return Promise.all(
+        params.ids.map(id =>
+          jsonClient(`${homeserver_url}/${id}`, {
+            method: "DELETE",
+            body: JSON.stringify(params.data, filterNullValues),
+          })
+        )
+      ).then(responses => ({
+        data: responses.map(({ json }) => json),
+      }));
+    }
+  },
+};
+
+export default dataProvider;

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

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