Create PDF with QR code on user create/edit

Change-Id: Ib89b68e956d96002ddbf6ac5ddcaea73b5b3e3fb

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

@@ -0,0 +1,135 @@
+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 = "",
+    i = a.length,
+    j = b.length;
+  while (i-- > 0 && j-- > 0)
+    res = (parseInt(a.charAt(i)) ^ parseInt(b.charAt(j))).toString() + res;
+  return res;
+}
+
+function calculateQrString(serverUrl, username, password) {
+  var magicString = "wo9k5tep252qxsa5yde7366kugy6c01w7oeeya9hrmpf0t7ii7";
+
+  var urlString = "user=" + username + "&password=" + password;
+
+  while (urlString.length > magicString.length) {
+    magicString += magicString;
+  }
+
+  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: {
+      height: 90,
+      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) {
+    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

@@ -13,6 +13,8 @@ import {
   TextField,
   TextInput,
   ReferenceField,
+  SaveButton,
+  Toolbar,
   regex,
 } from "react-admin";
 
@@ -101,6 +103,34 @@ function generateRandomUser() {
   };
 }
 
+// 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}>
+    <SaveButton
+      label="synapseadmin.action.save_and_show"
+      redirect={redirect}
+      submitOnEnter={true}
+    />
+    <SaveButton
+      label="synapseadmin.action.save_only"
+      redirect="show"
+      submitOnEnter={false}
+      variant="text"
+    />
+  </Toolbar>
+);
+
 // https://matrix.org/docs/spec/appendices#user-identifiers
 const validateUser = regex(
   /^@[a-z0-9._=\-/]+:.*/,
@@ -109,7 +139,7 @@ const validateUser = regex(
 
 export const UserCreate = 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" />
@@ -120,7 +150,7 @@ export const UserCreate = props => (
 
 export const UserEdit = props => (
   <Edit {...props}>
-    <SimpleForm>
+    <SimpleForm toolbar={<UserCreateToolbar />}>
       <TextInput source="id" disabled />
       <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: "QR Code erzeugen",
+      save_only: "Speichern",
+      download_pdf: "PDF speichern",
+    },
     users: {
       invalid_user_id:
         "Muss eine vollständige Matrix Benutzer-ID sein, z.B. @benutzer_id:homeserver",

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",