Prompt for recovery key on login rather than passphrase

Only show passphrase options at all if the user has a passphrase on
their SSSS key.

src/components/structures/auth/SetupEncryptionBody.js

@@ -19,15 +19,26 @@ import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import * as sdk from '../../../index';
+import withValidation from '../../views/elements/Validation';
+import { decodeRecoveryKey } from 'matrix-js-sdk/src/crypto/recoverykey';
 import {
     SetupEncryptionStore,
     PHASE_INTRO,
+    PHASE_RECOVERY_KEY,
     PHASE_BUSY,
     PHASE_DONE,
     PHASE_CONFIRM_SKIP,
     PHASE_FINISHED,
 } from '../../../stores/SetupEncryptionStore';
 
+function keyHasPassphrase(keyInfo) {
+    return (
+        keyInfo.passphrase &&
+        keyInfo.passphrase.salt &&
+        keyInfo.passphrase.iterations
+    );
+}
+
 export default class SetupEncryptionBody extends React.Component {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
@@ -45,6 +56,11 @@ export default class SetupEncryptionBody extends React.Component {
             // Because of the latter, it lives in the state.
             verificationRequest: store.verificationRequest,
             backupInfo: store.backupInfo,
+            recoveryKey: '',
+            // whether the recovery key is a valid recovery key
+            recoveryKeyValid: null,
+            // whether the recovery key is the correct key or not
+            recoveryKeyCorrect: null,
         };
     }
 
@@ -67,9 +83,14 @@ export default class SetupEncryptionBody extends React.Component {
         store.stop();
     }
 
-    _onUsePassphraseClick = async () => {
+    _onUseRecoveryKeyClick = async () => {
         const store = SetupEncryptionStore.sharedInstance();
-        store.usePassPhrase();
+        store.useRecoveryKey();
+    }
+
+    _onRecoveryKeyCancelClick() {
+        const store = SetupEncryptionStore.sharedInstance();
+        store.cancelUseRecoveryKey();
     }
 
     onSkipClick = () => {
@@ -92,6 +113,66 @@ export default class SetupEncryptionBody extends React.Component {
         store.done();
     }
 
+    _onUsePassphraseClick = () => {
+        const store = SetupEncryptionStore.sharedInstance();
+        store.usePassPhrase();
+    }
+
+    _onRecoveryKeyChange = (e) => {
+        this.setState({recoveryKey: e.target.value});
+    }
+
+    _onRecoveryKeyValidate = async (fieldState) => {
+        const result = await this._validateRecoveryKey(fieldState);
+        this.setState({recoveryKeyValid: result.valid});
+        return result;
+    }
+
+    _validateRecoveryKey = withValidation({
+        rules: [
+            {
+                key: "required",
+                test: async (state) => {
+                    try {
+                        const decodedKey = decodeRecoveryKey(state.value);
+                        const correct = await MatrixClientPeg.get().checkSecretStorageKey(
+                            decodedKey, SetupEncryptionStore.sharedInstance().keyInfo,
+                        );
+                        this.setState({
+                            recoveryKeyValid: true,
+                            recoveryKeyCorrect: correct,
+                        });
+                        return correct;
+                    } catch (e) {
+                        this.setState({
+                            recoveryKeyValid: false,
+                            recoveryKeyCorrect: false,
+                        });
+                        return false;
+                    }
+                },
+                invalid: function() {
+                    if (this.state.recoveryKeyValid) {
+                        return _t("This isn't the recovery key for your account");
+                    } else {
+                        return _t("This isn't a valid recovery key");
+                    }
+                },
+                valid: function() {
+                    return _t("Looks good!");
+                },
+            },
+        ],
+    })
+
+    _onRecoveryKeyFormSubmit = (e) => {
+        e.preventDefault();
+        if (!this.state.recoveryKeyCorrect) return;
+
+        const store = SetupEncryptionStore.sharedInstance();
+        store.setupWithRecoveryKey(decodeRecoveryKey(this.state.recoveryKey));
+    }
+
     render() {
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
 
@@ -108,6 +189,13 @@ export default class SetupEncryptionBody extends React.Component {
                 member={MatrixClientPeg.get().getUser(this.state.verificationRequest.otherUserId)}
             />;
         } else if (phase === PHASE_INTRO) {
+            const store = SetupEncryptionStore.sharedInstance();
+            let recoveryKeyPrompt;
+            if (keyHasPassphrase(store.keyInfo)) {
+                recoveryKeyPrompt = _t("Use Recovery Key or Passphrase");
+            } else {
+                recoveryKeyPrompt = _t("Use Recovery Key");
+            }
             return (
                 <div>
                     <p>{_t(
@@ -131,8 +219,8 @@ export default class SetupEncryptionBody extends React.Component {
                     </div>
 
                     <div className="mx_CompleteSecurity_actionRow">
-                        <AccessibleButton kind="link" onClick={this._onUsePassphraseClick}>
-                            {_t("Use Recovery Passphrase or Key")}
+                        <AccessibleButton kind="link" onClick={this._onUseRecoveryKeyClick}>
+                            {recoveryKeyPrompt}
                         </AccessibleButton>
                         <AccessibleButton kind="danger" onClick={this.onSkipClick}>
                             {_t("Skip")}
@@ -140,6 +228,47 @@ export default class SetupEncryptionBody extends React.Component {
                     </div>
                 </div>
             );
+        } else if (phase === PHASE_RECOVERY_KEY) {
+            const store = SetupEncryptionStore.sharedInstance();
+            let keyPrompt;
+            if (keyHasPassphrase(store.keyInfo)) {
+                keyPrompt = _t(
+                    "Enter your Recovery Key or enter a <a>Recovery Passphrase</a> to continue.", {},
+                    {
+                        a: sub => <AccessibleButton
+                            element="span"
+                            className="mx_linkButton"
+                            onClick={this._onUsePassphraseClick}
+                        >{sub}</AccessibleButton>,
+                    },
+                );
+            } else {
+                keyPrompt = _t("Enter your Recovery Key to continue.");
+            }
+
+            const Field = sdk.getComponent('elements.Field');
+            return <form onSubmit={this._onRecoveryKeyFormSubmit}>
+                <p>{keyPrompt}</p>
+                <div className="mx_CompleteSecurity_recoveryKeyEntry">
+                    <Field
+                        type="text"
+                        label={_t('Recovery Key')}
+                        value={this.state.recoveryKey}
+                        onChange={this._onRecoveryKeyChange}
+                        onValidate={this._onRecoveryKeyValidate}
+                    />
+                </div>
+                <div className="mx_CompleteSecurity_actionRow">
+                    <AccessibleButton kind="secondary" onClick={this._onRecoveryKeyCancelClick}>
+                        {_t("Cancel")}
+                    </AccessibleButton>
+                    <AccessibleButton kind="primary"
+                        disabled={!this.state.recoveryKeyCorrect}
+                    >
+                        {_t("Continue")}
+                    </AccessibleButton>
+                </div>
+            </form>;
         } else if (phase === PHASE_DONE) {
             let message;
             if (this.state.backupInfo) {