Merge pull request #914 from matrix-org/rav/key_formatting

Group e2e keys into blocks of 4 characters

src/components/structures/UserSettings.js

@@ -29,6 +29,7 @@ const Email = require('../../email');
 const AddThreepid = require('../../AddThreepid');
 const SdkConfig = require('../../SdkConfig');
 import AccessibleButton from '../views/elements/AccessibleButton';
+import * as FormattingUtils from '../../utils/FormattingUtils';
 
 // if this looks like a release, use the 'version' from package.json; else use
 // the git sha. Prepend version with v, to look like riot-web version
@@ -603,7 +604,12 @@ module.exports = React.createClass({
     _renderCryptoInfo: function() {
         const client = MatrixClientPeg.get();
         const deviceId = client.deviceId;
-        const identityKey = client.getDeviceEd25519Key() || "<not supported>";
+        let identityKey = client.getDeviceEd25519Key();
+        if (!identityKey) {
+             identityKey = "<not supported>";
+        } else {
+            identityKey = FormattingUtils.formatCryptoKey(identityKey);
+        }
 
         let importExportButtons = null;
 

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -18,10 +18,12 @@ limitations under the License.
 import React from 'react';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
+import * as FormattingUtils from '../../../utils/FormattingUtils';
 
 export default function DeviceVerifyDialog(props) {
     const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
 
+    const key = FormattingUtils.formatCryptoKey(props.device.getFingerprint());
     const body = (
         <div>
             <p>
@@ -34,7 +36,7 @@ export default function DeviceVerifyDialog(props) {
                 <ul>
                     <li><label>Device name:</label> <span>{ props.device.getDisplayName() }</span></li>
                     <li><label>Device ID:</label> <span><code>{ props.device.deviceId}</code></span></li>
-                    <li><label>Device key:</label> <span><code><b>{ props.device.getFingerprint() }</b></code></span></li>
+                    <li><label>Device key:</label> <span><code><b>{ key }</b></code></span></li>
                 </ul>
             </div>
             <p>

src/utils/FormattingUtils.js

@@ -26,3 +26,14 @@ export function formatCount(count) {
    if (count < 100000000) return (count / 1000000).toFixed(0) + "M";
    return (count / 1000000000).toFixed(1) + "B"; // 10B is enough for anyone, right? :S
 }
+
+/**
+ * format a key into groups of 4 characters, for easier visual inspection
+ *
+ * @param {string} key key to format
+ *
+ * @return {string}
+ */
+export function formatCryptoKey(key) {
+    return key.match(/.{1,4}/g).join(" ");
+}