Merge branch 'master' into amp.chat

Change-Id: Iac4e56401aab3f7f39b623b617990ec1952f8cd0

package.json

@@ -20,7 +20,10 @@
     "prettier": "^2.0.0"
   },
   "dependencies": {
+    "@progress/kendo-drawing": "^1.6.0",
+    "@progress/kendo-react-pdf": "^3.10.1",
     "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",

src/App.js

@@ -10,6 +10,8 @@ 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"

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,132 @@
+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",
+    },
+    header: {
+      height: 144,
+      width: 534,
+      marginLeft: 32,
+      marginTop: 15,
+    },
+    name: {
+      width: 233,
+      fontSize: 40,
+      float: "left",
+      marginTop: 15,
+    },
+    logo: {
+      width: 90,
+      marginTop: 20,
+      marginRight: 32,
+      float: "left",
+    },
+    code: {
+      marginLeft: 330,
+      marginTop: 86,
+    },
+    qr: {
+      marginRight: 40,
+      float: "right",
+    },
+    note: {
+      fontSize: 18,
+      marginTop: 100,
+      marginLeft: 32,
+      marginRight: 32,
+    },
+  }));
+
+  const classes = useStyles();
+
+  var resume;
+
+  const exportPDF = () => {
+    resume.save();
+  };
+
+  var qrCode = "";
+  var displayname = "";
+
+  if (
+    props.location.state &&
+    props.location.state.id &&
+    props.location.state.password
+  ) {
+    const { id, password } = props.location.state;
+
+    const username = id.substring(1, id.indexOf(":"));
+    const 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.code}>Ihr persönlicher Anmeldecode:</div>
+          <div className={classes.header}>
+            <div className={classes.name}>{displayname}</div>
+            <img className={classes.logo} alt="Logo" src="images/logo.png" />
+            <div className={classes.qr}>{qrCode}</div>
+          </div>
+          <div className={classes.note}>
+            Hier können Sie Ihre selbst gewählte Schlüsselsicherungs-Passphrase
+            notieren:
+            <br />
+            <br />
+            <br />
+            <hr />
+          </div>
+        </div>
+      </PDFExport>
+    </div>
+  );
+};
+
+export default ShowUserPdf;

src/components/users.js

@@ -21,6 +21,7 @@ import {
   PasswordInput,
   TextField,
   TextInput,
+  SearchInput,
   ReferenceField,
   SelectInput,
   BulkDeleteButton,
@@ -30,6 +31,7 @@ import {
   useTranslate,
   Pagination,
 } from "react-admin";
+import SaveQrButton from "./SaveQrButton";
 
 const UserPagination = props => (
   <Pagination {...props} rowsPerPageOptions={[10, 25, 50, 100, 500, 1000]} />
@@ -37,6 +39,7 @@ const UserPagination = props => (
 
 const UserFilter = props => (
   <Filter {...props}>
+    <SearchInput source="q" alwaysOn />
     <BooleanInput source="guests" alwaysOn />
     <BooleanInput
       label="resources.users.fields.show_deactivated"
@@ -93,6 +96,75 @@ export const UserList = props => (
   </List>
 );
 
+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._=\-/]+:.*/,
@@ -103,7 +175,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")}
@@ -113,8 +195,8 @@ const UserEditToolbar = props => {
 };
 
 export const UserCreate = props => (
-  <Create {...props}>
+  <Create record={generateRandomUser()} {...props}>
-    <SimpleForm>
+    <SimpleForm toolbar={<UserCreateToolbar />}>
       <TextInput source="id" autoComplete="off" validate={validateUser} />
       <TextInput source="displayname" />
       <PasswordInput source="password" autoComplete="new-password" />

src/i18n/de.js

@@ -7,6 +7,11 @@ export default {
       homeserver: "Heimserver",
       welcome: "Willkommen bei Synapse-admin",
     },
+    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",
@@ -61,4 +66,15 @@ export default {
       },
     },
   },
+  ra: {
+    ...germanMessages.ra,
+    input: {
+      ...germanMessages.ra.input,
+      password: {
+        ...germanMessages.ra.input.password,
+        toggle_hidden: "Anzeigen",
+        toggle_visible: "Verstecken",
+      },
+    },
+  },
 };

src/i18n/en.js

@@ -7,6 +7,11 @@ export default {
       homeserver: "Homeserver",
       welcome: "Welcome to Synapse-admin",
     },
+    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",

src/synapse/dataProvider.js

@@ -88,6 +88,25 @@ const dataProvider = {
     const homeserver_url = homeserver + res.path;
     const url = `${homeserver_url}?${stringify(query)}`;
 
+    // searching for users is not implemented in admin api
+    if (params.filter.q) {
+      console.log("searching");
+      const search_query = { limit: perPage, search_term: params.filter.q };
+      const search_url =
+        homeserver + `/_matrix/client/r0/user_directory/search`;
+      return jsonClient(search_url, {
+        method: "POST",
+        body: JSON.stringify(search_query),
+      }).then(({ json }) => ({
+        data: json["results"].map(u => ({
+          ...u,
+          id: u.user_id,
+          name: u.user_id,
+        })),
+        total: json.limited ? perPage * 2 : json.results.length,
+      }));
+    }
+
     return jsonClient(url).then(({ json }) => ({
       data: json[res.data].map(res.map),
       total: res.total(json, from, perPage),

yarn.lock

@@ -1235,6 +1235,25 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
+"@progress/kendo-drawing@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@progress/kendo-drawing/-/kendo-drawing-1.6.0.tgz#66e9df431f52c7dd9fd5567be80dcbfa3a162281"
+  integrity sha512-9dGlFvW9fMgqAgcbLi+SfTeMUpNYdoVthwNxwAtsRQ+QwcgXJcdzFpLrLBXp17pXpDDFpiOyMqiwjffNGwtc3w==
+  dependencies:
+    pako "^1.0.5"
+
+"@progress/kendo-file-saver@^1.0.1":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@progress/kendo-file-saver/-/kendo-file-saver-1.0.7.tgz#5b602115d1b0b5e26f3e52451a3ed7c29ed76c51"
+  integrity sha512-8tsho/+DATzfTW4BBaHrkF3C3jqH2/bQ+XbjqA0KfmTiBRVK6ygK+tkvkYeDhFlQBbJ02MmJlEC6OmXvXRFkUg==
+
+"@progress/kendo-react-pdf@^3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@progress/kendo-react-pdf/-/kendo-react-pdf-3.10.1.tgz#348517daaddb366bbe840a92ec2fffbfd07ac2d2"
+  integrity sha512-2EKfQCwLFEa+mgCLKQ70iWVu7q2Dh/wJl6pPJ6Ix42BA7SiA2k5UmDk819FLY9pnMgv7WDxwqBP+8CvdkLoP5w==
+  dependencies:
+    "@progress/kendo-file-saver" "^1.0.1"
+
 "@redux-saga/core@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@redux-saga/core/-/core-1.1.3.tgz#3085097b57a4ea8db5528d58673f20ce0950f6a4"
@@ -7908,7 +7927,7 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
-pako@~1.0.5:
+pako@^1.0.5, pako@~1.0.5:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
@@ -9076,6 +9095,20 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+qr.js@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
+  integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
+
+qrcode.react@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-1.0.0.tgz#7e8889db3b769e555e8eb463d4c6de221c36d5de"
+  integrity sha512-jBXleohRTwvGBe1ngV+62QvEZ/9IZqQivdwzo9pJM4LQMoCM2VnvNBnKdjvGnKyDZ/l0nCDgsPod19RzlPvm/Q==
+  dependencies:
+    loose-envify "^1.4.0"
+    prop-types "^15.6.0"
+    qr.js "0.0.0"
+
 qs@6.7.0:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"