diff --git a/res/css/_components.scss b/res/css/_components.scss index 6ce8d6efa9..be140b2de7 100644 --- a/res/css/_components.scss +++ b/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"; diff --git a/res/css/views/dialogs/_RestoreKeyBackupDialog.scss b/res/css/views/dialogs/_RestoreKeyBackupDialog.scss new file mode 100644 index 0000000000..69e00c416a --- /dev/null +++ b/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; +} diff --git a/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js b/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js index a0451a9201..5c02fd1227 100644 --- a/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js +++ b/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({ ; } else { const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); + + let keyStatus; + if (this.state.recoveryKey.length === 0) { + keyStatus =
; + } else if (this.state.recoveryKeyValid) { + keyStatus =
+ {"\uD83D\uDC4D "}{_t("This looks like a valid recovery key!")} +
; + } else { + keyStatus =
+ {"\uD83D\uDC4E "}{_t("Not a valid recovery key")} +
; + } + content =
{_t("Please enter the recovery key generated when you set up key backup")}