Add credentials to PDF

Fix Umlauts in PDF
Reorder elements of PDF

Change-Id: I49335584ef282e4b960275013ea7d16053b9f773

public/index.html

@@ -9,6 +9,32 @@
       name="description"
       content="Synapse-Admin"
     />
+    <style>
+      @font-face {
+        font-family: "DejaVu Sans";
+        src: url("%PUBLIC_URL%/fonts/DejaVu/DejaVuSans.ttf") format("truetype");
+      }
+      @font-face {
+        font-family: "DejaVu Sans";
+        font-weight: bold;
+        src: url("%PUBLIC_URL%/fonts/DejaVu/DejaVuSans-Bold.ttf") format("truetype");
+      }
+      @font-face {
+        font-family: "DejaVu Sans";
+        font-style: italic;
+        src: url("%PUBLIC_URL%/fonts/DejaVu/DejaVuSans-Oblique.ttf") format("truetype");
+      }
+      @font-face {
+        font-family: "DejaVu Sans";
+        font-weight: bold;
+        font-style: italic;
+        src: url("%PUBLIC_URL%/fonts/DejaVu/DejaVuSans-Oblique.ttf") format("truetype");
+      }
+      @font-face {
+        font-family: "DejaVu Sans Mono";
+        src: url("%PUBLIC_URL%/fonts/DejaVu/DejaVuSans-Mono.ttf") format("truetype");
+      }
+    </style>
     <!--
       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/

src/components/ShowUserPdf.js

@@ -33,6 +33,8 @@ const ShowUserPdf = props => {
       margin: "auto",
       overflowX: "hidden",
       overflowY: "hidden",
+      fontFamily: "DejaVu Sans, Sans-Serif",
+      fontSize: 15,
     },
     header: {
       height: 144,
@@ -41,24 +43,41 @@ const ShowUserPdf = props => {
       marginTop: 15,
     },
     name: {
-      width: 233,
+      width: 240,
-      fontSize: 40,
+      fontSize: 35,
       float: "left",
-      marginTop: 15,
+      marginTop: 100,
     },
     logo: {
       width: 90,
-      marginTop: 20,
+      marginTop: 50,
-      marginRight: 32,
+      marginRight: 70,
-      float: "left",
+      float: "right",
     },
-    code: {
+    body: {
-      marginLeft: 330,
+      clear: "both",
+    },
+    table_cell: {
+      verticalAlign: "top",
+    },
+    code_note: {
+      marginLeft: 32,
       marginTop: 86,
     },
     qr: {
-      marginRight: 40,
+      marginTop: 15,
-      float: "right",
+      marginLeft: 32,
+    },
+    credentials_note: {
+      marginTop: 86,
+      marginLeft: 10,
+    },
+    credentials_text: {
+      marginLeft: 10,
+      fontSize: 12,
+    },
+    credentials: {
+      fontFamily: "DejaVu Sans Mono, monospace",
     },
     note: {
       fontSize: 18,
@@ -78,16 +97,21 @@ const ShowUserPdf = props => {
 
   var qrCode = "";
   var displayname = "";
+  var id = "";
+  var password = "";
+  var username = "";
+  var serverUrl = "";
 
   if (
     props.location.state &&
     props.location.state.id &&
     props.location.state.password
   ) {
-    const { id, password } = props.location.state;
+    id = props.location.state.id;
+    password = props.location.state.password;
 
-    const username = id.substring(1, id.indexOf(":"));
+    username = id.substring(1, id.indexOf(":"));
-    const serverUrl = "https://" + id.substring(id.indexOf(":") + 1);
+    serverUrl = "https://" + id.substring(id.indexOf(":") + 1);
 
     const qrString = calculateQrString(serverUrl, username, password);
 
@@ -109,19 +133,73 @@ const ShowUserPdf = props => {
         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}>
+          <div className={classes.body}>
-            Hier können Sie Ihre selbst gewählte Schlüsselsicherungs-Passphrase
+            <table>
-            notieren:
+              <tbody>
-            <br />
+                <tr>
-            <br />
+                  <td width="200px">
-            <br />
+                    <div className={classes.code_note}>
-            <hr />
+                      Ihr persönlicher Anmeldecode:
+                    </div>
+                  </td>
+                  <td className={classes.table_cell}>
+                    <div className={classes.credentials_note}>
+                      Ihre persönlichen Zugangsdaten:
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <div className={classes.qr}>{qrCode}</div>
+                  </td>
+                  <td className={classes.table_cell}>
+                    <div className={classes.credentials_text}>
+                      <br />
+                      <table>
+                        <tbody>
+                          <tr>
+                            <td>Heimserver:</td>
+                            <td>
+                              <span className={classes.credentials}>
+                                {serverUrl}
+                              </span>
+                            </td>
+                          </tr>
+                          <tr>
+                            <td>Benutzername:</td>
+                            <td>
+                              <span className={classes.credentials}>
+                                {username}
+                              </span>
+                            </td>
+                          </tr>
+                          <tr>
+                            <td>Passwort:</td>
+                            <td>
+                              <span className={classes.credentials}>
+                                {password}
+                              </span>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <div className={classes.note}>
+              Hier können Sie Ihre selbst gewählte
+              Schlüsselsicherungs-Passphrase notieren:
+              <br />
+              <br />
+              <br />
+              <hr />
+            </div>
           </div>
         </div>
       </PDFExport>