Show if recovery key is valid

res/css/_components.scss

@@ -40,6 +40,7 @@
 @import "./views/dialogs/_EncryptedEventDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";
 @import "./views/dialogs/_QuestionDialog.scss";
+@import "./views/dialogs/_RestoreKeyBackupDialog.scss";
 @import "./views/dialogs/_RoomUpgradeDialog.scss";
 @import "./views/dialogs/_SetEmailDialog.scss";
 @import "./views/dialogs/_SetMxIdDialog.scss";

res/css/views/dialogs/_RestoreKeyBackupDialog.scss

@@ -0,0 +1,19 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RestoreKeyBackupDialog_keyStatus {
+    height: 30px;
+}

src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js

@@ -24,6 +24,10 @@ import Promise from 'bluebird';
 
 import { _t, _td } from '../../../../languageHandler';
 
+function isRecoveryKeyValid(r) {
+    return MatrixClientPeg.get().isValidRecoveryKey(r.replace(/ /g, ''));
+}
+
 /**
  * Dialog for restoring e2e keys from a backup and the user's recovery key
  */
@@ -36,6 +40,7 @@ export default React.createClass({
             restoreError: null,
             recoveryKey: "",
             recoverInfo: null,
+            recoveryKeyValid: false,
         };
     },
 
@@ -52,7 +57,10 @@ export default React.createClass({
     },
 
     _onRecoveryKeyChange: function(e) {
-        this.setState({recoveryKey: e.target.value});
+        this.setState({
+            recoveryKey: e.target.value,
+            recoveryKeyValid: isRecoveryKeyValid(e.target.value),
+        });
     },
 
     _onRecoverClick: async function() {
@@ -125,6 +133,20 @@ export default React.createClass({
             </div>;
         } else {
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+
+            let keyStatus;
+            if (this.state.recoveryKey.length === 0) {
+                keyStatus = <div className="mx_RestoreKeyBackupDialog_keyStatus"></div>;
+            } else if (this.state.recoveryKeyValid) {
+                keyStatus = <div className="mx_RestoreKeyBackupDialog_keyStatus">
+                    {"\uD83D\uDC4D "}{_t("This looks like a valid recovery key!")}
+                </div>;
+            } else {
+                keyStatus = <div className="mx_RestoreKeyBackupDialog_keyStatus">
+                    {"\uD83D\uDC4E "}{_t("Not a valid recovery key")}
+                </div>;
+            }
+
             content = <div>
                 {_t("Please enter the recovery key generated when you set up key backup")}<br />
                 <textarea 
@@ -133,11 +155,13 @@ export default React.createClass({
                     style={{width: "90%"}}
                     autoFocus={true}
                 />
+                {keyStatus}
                 <DialogButtons primaryButton={_t('Recover')}
                     onPrimaryButtonClick={this._onRecoverClick}
                     hasCancel={true}
                     onCancel={this._onCancel}
                     focus={false}
+                    primaryDisabled={!this.state.recoveryKeyValid}
                 />
             </div>;
         }

src/components/views/elements/DialogButtons.js

@@ -43,7 +43,11 @@ module.exports = React.createClass({
 
         focus: PropTypes.bool,
 
+        // disables the primary and cancel buttons
         disabled: PropTypes.bool,
+
+        // disables only the primary button
+        primaryDisabled: PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -73,7 +77,7 @@ module.exports = React.createClass({
                 <button className={primaryButtonClassName}
                     onClick={this.props.onPrimaryButtonClick}
                     autoFocus={this.props.focus}
-                    disabled={this.props.disabled}
+                    disabled={this.props.disabled || this.props.primaryDisabled}
                 >
                     { this.props.primaryButton }
                 </button>

src/i18n/strings/en_EN.json

@@ -972,6 +972,8 @@
     "No backup found!": "No backup found!",
     "Failed to decrypt %(failedCount)s sessions!": "Failed to decrypt %(failedCount)s sessions!",
     "Restored %(sessionCount)s session keys": "Restored %(sessionCount)s session keys",
+    "This looks like a valid recovery key!": "This looks like a valid recovery key!",
+    "Not a valid recovery key": "Not a valid recovery key",
     "Please enter the recovery key generated when you set up key backup": "Please enter the recovery key generated when you set up key backup",
     "Recover": "Recover",
     "Restore Key Backup": "Restore Key Backup",