Create PDF with QR code on user create/edit

Change-Id: Ib89b68e956d96002ddbf6ac5ddcaea73b5b3e3fb

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;