Merge branch 'master' into user_cts

.github/workflows/docker-release.yml

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

.github/workflows/github-release.yml

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

Dockerfile

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

README.md

@@ -5,7 +5,7 @@
 
 This project is built using [react-admin](https://marmelab.com/react-admin/).
 
-It needs at least Synapse v1.40.0 for all functions to work as expected!
+It needs at least Synapse v1.41.0 for all functions to work as expected!
 
 You get your server version with the request `/_synapse/admin/v1/server_version`.
 See also [Synapse version API](https://matrix-org.github.io/synapse/develop/admin_api/version_api.html).
@@ -21,13 +21,23 @@ See also [Synapse administration endpoints](https://matrix-org.github.io/synapse
 
 ## Step-By-Step install:
 
-You have two options:
+You have three options:
 
-1.  Download the source code from github and run using nodejs
-2.  Run the Docker container
+1.  Download the tarball and serve with any webserver
+2.  Download the source code from github and run using nodejs
+3.  Run the Docker container
 
 Steps for 1):
 
+- make sure you have a webserver installed that can serve static files (any webserver like nginx or apache will do)
+- configure a vhost for synapse admin on your webserver
+- download the .tar.gz from the latest release: https://github.com/Awesome-Technologies/synapse-admin/releases/latest
+- unpack the .tar.gz
+- move or symlink the `synapse-admin-x.x.x` into your vhosts root dir
+- open the url of the vhost in your browser
+
+Steps for 2):
+
 - make sure you have installed the following: git, yarn, nodejs
 - download the source code: `git clone https://github.com/Awesome-Technologies/synapse-admin.git`
 - change into downloaded directory: `cd synapse-admin`
@@ -39,7 +49,7 @@ Either you define it at startup (e.g. `REACT_APP_SERVER=https://yourmatrixserver
 or by editing it in the [.env](.env) file. See also the
 [documentation](https://create-react-app.dev/docs/adding-custom-environment-variables/).
 
-Steps for 2):
+Steps for 3):
 
 - run the Docker container from the public docker registry: `docker run -p 8080:80 awesometechnologies/synapse-admin` or use the [docker-compose.yml](docker-compose.yml): `docker-compose up -d`
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "synapse-admin",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "Admin GUI for the Matrix.org server Synapse",
   "author": "Awesome Technologies Innovationslabor GmbH",
   "license": "Apache-2.0",
@@ -36,7 +36,7 @@
     "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}\"",
+    "prettier": "prettier --ignore-path .gitignore \"**/*.{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",

src/components/RoomDirectory.js

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

src/components/ServerNotices.js

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

src/components/media.js

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

src/components/rooms.js

@@ -315,7 +315,7 @@ const RoomBulkActionButtons = props => (
       {...props}
       confirmTitle="resources.rooms.action.erase.title"
       confirmContent="resources.rooms.action.erase.content"
-      undoable={false}
+      mutationMode="pessimistic"
     />
   </Fragment>
 );

src/components/users.js

@@ -1,13 +1,13 @@
 import React, { cloneElement, Fragment } from "react";
 import Avatar from "@material-ui/core/Avatar";
-import PersonPinIcon from "@material-ui/icons/PersonPin";
 import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
 import ContactMailIcon from "@material-ui/icons/ContactMail";
 import DevicesIcon from "@material-ui/icons/Devices";
 import GetAppIcon from "@material-ui/icons/GetApp";
-import SettingsInputComponentIcon from "@material-ui/icons/SettingsInputComponent";
 import NotificationsIcon from "@material-ui/icons/Notifications";
 import PermMediaIcon from "@material-ui/icons/PermMedia";
+import PersonPinIcon from "@material-ui/icons/PersonPin";
+import SettingsInputComponentIcon from "@material-ui/icons/SettingsInputComponent";
 import ViewListIcon from "@material-ui/icons/ViewList";
 import {
   ArrayInput,
@@ -36,7 +36,9 @@ import {
   BulkDeleteButton,
   DeleteButton,
   SaveButton,
+  maxLength,
   regex,
+  required,
   useTranslate,
   Pagination,
   CreateButton,
@@ -48,6 +50,7 @@ import {
 import { Link } from "react-router-dom";
 import { ServerNoticeButton, ServerNoticeBulkButton } from "./ServerNotices";
 import { DeviceRemoveButton } from "./devices";
+import { ProtectMediaButton, QuarantineMediaButton } from "./media";
 import { makeStyles } from "@material-ui/core/styles";
 
 const redirect = () => {
@@ -141,7 +144,7 @@ const UserBulkActionButtons = props => (
       {...props}
       label="resources.users.action.erase"
       confirmTitle="resources.users.helper.erase"
-      undoable={false}
+      mutationMode="pessimistic"
     />
   </Fragment>
 );
@@ -192,10 +195,16 @@ export const UserList = props => {
 };
 
 // https://matrix.org/docs/spec/appendices#user-identifiers
-const validateUser = regex(
-  /^@[a-z0-9._=\-/]+:.*/,
-  "synapseadmin.users.invalid_user_id"
-);
+// here only local part of user_id
+// maxLength = 255 - "@" - ":" - localStorage.getItem("home_server").length
+// localStorage.getItem("home_server").length is not valid here
+const validateUser = [
+  required(),
+  maxLength(253),
+  regex(/^[a-z0-9._=\-/]+$/, "synapseadmin.users.invalid_user_id"),
+];
+
+const validateAddress = [required(), maxLength(255)];
 
 export function generateRandomUser() {
   const homeserver = localStorage.getItem("home_server");
@@ -242,7 +251,7 @@ const UserEditToolbar = props => {
   const translate = useTranslate();
   return (
     <Toolbar {...props}>
-      <SaveButton submitOnEnter={true} />
+      <SaveButton submitOnEnter={true} disabled={props.pristine} />
       <DeleteButton
         label="resources.users.action.erase"
         confirmTitle={translate("resources.users.helper.erase", {
@@ -259,8 +268,12 @@ export const UserCreate = props => (
   <Create {...props}>
     <SimpleForm>
       <TextInput source="id" autoComplete="off" validate={validateUser} />
-      <TextInput source="displayname" />
-      <PasswordInput source="password" autoComplete="new-password" />
+      <TextInput source="displayname" validate={maxLength(256)} />
+      <PasswordInput
+        source="password"
+        autoComplete="new-password"
+        validate={maxLength(512)}
+      />
       <BooleanInput source="admin" />
       <ArrayInput source="threepids">
         <SimpleFormIterator>
@@ -270,8 +283,19 @@ export const UserCreate = props => (
               { id: "email", name: "resources.users.email" },
               { id: "msisdn", name: "resources.users.msisdn" },
             ]}
+            validate={required()}
+          />
+          <TextInput source="address" validate={validateAddress} />
+        </SimpleFormIterator>
+      </ArrayInput>
+      <ArrayInput source="external_ids" label="synapseadmin.users.tabs.sso">
+        <SimpleFormIterator>
+          <TextInput source="auth_provider" validate={required()} />
+          <TextInput
+            source="external_id"
+            label="resources.users.fields.id"
+            validate={required()}
           />
-          <TextInput source="address" />
         </SimpleFormIterator>
       </ArrayInput>
     </SimpleForm>
@@ -351,16 +375,16 @@ export const UserEdit = props => {
           icon={<AssignmentIndIcon />}
           path="sso"
         >
-          <ArrayField source="external_ids" label={false}>
-            <Datagrid style={{ width: "100%" }}>
-              <TextField source="auth_provider" sortable={false} />
-              <TextField
+          <ArrayInput source="external_ids" label={false}>
+            <SimpleFormIterator>
+              <TextInput source="auth_provider" validate={required()} />
+              <TextInput
                 source="external_id"
                 label="resources.users.fields.id"
-                sortable={false}
+                validate={required()}
               />
-            </Datagrid>
-          </ArrayField>
+            </SimpleFormIterator>
+          </ArrayInput>
         </FormTab>
 
         <FormTab
@@ -478,7 +502,8 @@ export const UserEdit = props => {
               <TextField source="media_type" />
               <TextField source="upload_name" />
               <TextField source="quarantined_by" />
-              <BooleanField source="safe_from_quarantine" />
+              <QuarantineMediaButton label="resources.quarantine_media.action.name" />
+              <ProtectMediaButton label="resources.users_media.fields.safe_from_quarantine" />
               <DeleteButton mutationMode="pessimistic" redirect={false} />
             </Datagrid>
           </ReferenceManyField>

src/i18n/de.js

@@ -12,8 +12,7 @@ const de = {
       url_error: "Keine gültige Matrix Server URL",
     },
     users: {
-      invalid_user_id:
-        "Muss eine vollständige Matrix Benutzer-ID sein, z.B. @benutzer_id:homeserver",
+      invalid_user_id: "Lokaler Anteil der Matrix Benutzer-ID ohne Homeserver.",
       tabs: { sso: "SSO" },
     },
     rooms: {
@@ -242,7 +241,7 @@ const de = {
         media_type: "Typ",
         upload_name: "Dateiname",
         quarantined_by: "Zur Quarantäne hinzugefügt",
-        safe_from_quarantine: "Geschützt vor Quarantäne",
+        safe_from_quarantine: "Schutz vor Quarantäne",
         created_ts: "Erstellt",
         last_access_ts: "Letzter Zugriff",
       },
@@ -263,6 +262,25 @@ const de = {
         send: "Diese API löscht die lokalen Medien von der Festplatte des eigenen Servers. Dies umfasst alle lokalen Miniaturbilder und Kopien von Medien. Diese API wirkt sich nicht auf Medien aus, die sich in externen Medien-Repositories befinden.",
       },
     },
+    protect_media: {
+      action: {
+        create: "Ungeschützt, Schutz erstellen",
+        delete: "Geschützt, Schutz aufheben",
+        none: "In Quarantäne",
+        send_success: "Erfolgreich den Schutz-Status geändert.",
+        send_failure: "Beim Versenden ist ein Fehler aufgetreten.",
+      },
+    },
+    quarantine_media: {
+      action: {
+        name: "Quarantäne",
+        create: "Zur Quarantäne hinzufügen",
+        delete: "In Quarantäne, Quarantäne aufheben",
+        none: "Geschützt vor Quarantäne",
+        send_success: "Erfolgreich den Quarantäne-Status geändert.",
+        send_failure: "Beim Versenden ist ein Fehler aufgetreten.",
+      },
+    },
     pushers: {
       name: "Pusher |||| Pushers",
       fields: {

src/i18n/en.js

@@ -12,8 +12,7 @@ const en = {
       url_error: "Not a valid Matrix server URL",
     },
     users: {
-      invalid_user_id:
-        "Must be a fully qualified Matrix user-id, e.g. @user_id:homeserver",
+      invalid_user_id: "Localpart of a Matrix user-id without homeserver.",
       tabs: { sso: "SSO" },
     },
     rooms: {
@@ -259,6 +258,25 @@ const en = {
         send: "This API deletes the local media from the disk of your own server. This includes any local thumbnails and copies of media downloaded. This API will not affect media that has been uploaded to external media repositories.",
       },
     },
+    protect_media: {
+      action: {
+        create: "Unprotected, create protection",
+        delete: "Protected, remove protection",
+        none: "In quarantine",
+        send_success: "Successfully changed the protection status.",
+        send_failure: "An error has occurred.",
+      },
+    },
+    quarantine_media: {
+      action: {
+        name: "Quarantine",
+        create: "Add to quarantine",
+        delete: "In quarantine, unquarantine",
+        none: "Protected from quarantine",
+        send_success: "Successfully changed the quarantine status.",
+        send_failure: "An error has occurred.",
+      },
+    },
     pushers: {
       name: "Pusher |||| Pushers",
       fields: {

src/synapse/dataProvider.js

@@ -41,7 +41,9 @@ const resourceMap = {
     data: "users",
     total: json => json.total,
     create: data => ({
-      endpoint: `/_synapse/admin/v2/users/${data.id}`,
+      endpoint: `/_synapse/admin/v2/users/@${data.id}:${localStorage.getItem(
+        "home_server"
+      )}`,
       body: data,
       method: "PUT",
     }),
@@ -182,6 +184,32 @@ const resourceMap = {
       method: "POST",
     }),
   },
+  protect_media: {
+    map: pm => ({ id: pm.media_id }),
+    create: params => ({
+      endpoint: `/_synapse/admin/v1/media/protect/${params.media_id}`,
+      method: "POST",
+    }),
+    delete: params => ({
+      endpoint: `/_synapse/admin/v1/media/unprotect/${params.media_id}`,
+      method: "POST",
+    }),
+  },
+  quarantine_media: {
+    map: qm => ({ id: qm.media_id }),
+    create: params => ({
+      endpoint: `/_synapse/admin/v1/media/quarantine/${localStorage.getItem(
+        "home_server"
+      )}/${params.media_id}`,
+      method: "POST",
+    }),
+    delete: params => ({
+      endpoint: `/_synapse/admin/v1/media/unquarantine/${localStorage.getItem(
+        "home_server"
+      )}/${params.media_id}`,
+      method: "POST",
+    }),
+  },
   servernotices: {
     map: n => ({ id: n.event_id }),
     create: data => ({