diff --git a/res/css/_components.scss b/res/css/_components.scss index 57a34023c0..dbf6e7b8b9 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -57,6 +57,7 @@ @import "./views/dialogs/_DevtoolsDialog.scss"; @import "./views/dialogs/_EncryptedEventDialog.scss"; @import "./views/dialogs/_GroupAddressPicker.scss"; +@import "./views/dialogs/_IncomingSasDialog.scss"; @import "./views/dialogs/_RestoreKeyBackupDialog.scss"; @import "./views/dialogs/_RoomSettingsDialog.scss"; @import "./views/dialogs/_RoomUpgradeDialog.scss"; @@ -126,6 +127,7 @@ @import "./views/rooms/_PinnedEventsPanel.scss"; @import "./views/rooms/_PresenceLabel.scss"; @import "./views/rooms/_ReplyPreview.scss"; +@import "./views/rooms/_RoomBreadcrumbs.scss"; @import "./views/rooms/_RoomDropTarget.scss"; @import "./views/rooms/_RoomHeader.scss"; @import "./views/rooms/_RoomList.scss"; diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss index fb4df53d52..6e435b8e75 100644 --- a/res/css/structures/_TabbedView.scss +++ b/res/css/structures/_TabbedView.scss @@ -28,8 +28,8 @@ limitations under the License. } .mx_TabbedView_tabLabels { - width: 150px; - max-width: 150px; + width: 170px; + max-width: 170px; color: $tab-label-fg-color; position: fixed; } @@ -39,9 +39,8 @@ limitations under the License. cursor: pointer; display: block; border-radius: 3px; - font-size: 12px; - font-weight: 600; - min-height: 20px; // use min-height instead of height to allow the label to overflow a bit + font-size: 14px; + min-height: 24px; // use min-height instead of height to allow the label to overflow a bit margin-bottom: 6px; position: relative; } @@ -55,8 +54,8 @@ limitations under the License. margin-left: 6px; margin-right: 9px; margin-top: 1px; - width: 14px; - height: 14px; + width: 16px; + height: 16px; display: inline-block; } @@ -64,9 +63,9 @@ limitations under the License. display: inline-block; background-color: $tab-label-icon-bg-color; mask-repeat: no-repeat; - mask-size: 14px; + mask-size: 16px; width: 14px; - height: 18px; + height: 22px; mask-position: center; content: ''; vertical-align: middle; @@ -81,7 +80,7 @@ limitations under the License. } .mx_TabbedView_tabPanel { - margin-left: 220px; // 150px sidebar + 70px padding + margin-left: 240px; // 170px sidebar + 70px padding flex-grow: 1; display: flex; flex-direction: column; diff --git a/res/css/views/dialogs/_IncomingSasDialog.scss b/res/css/views/dialogs/_IncomingSasDialog.scss new file mode 100644 index 0000000000..3a9d645a98 --- /dev/null +++ b/res/css/views/dialogs/_IncomingSasDialog.scss @@ -0,0 +1,24 @@ +/* +Copyright 2019 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_IncomingSasDialog_opponentProfile_image { + position: relative; +} + +.mx_IncomingSasDialog_opponentProfile h2 { + display: inline-block; + margin-left: 10px; +} diff --git a/res/css/views/dialogs/_SettingsDialog.scss b/res/css/views/dialogs/_SettingsDialog.scss index 4a9708f6d1..abf0048cfd 100644 --- a/res/css/views/dialogs/_SettingsDialog.scss +++ b/res/css/views/dialogs/_SettingsDialog.scss @@ -16,8 +16,8 @@ limitations under the License. .mx_SettingsDialog { .mx_Dialog { - max-width: 900px; - width: 80%; + max-width: 1000px; + width: 90%; height: 80%; border-radius: 4px; padding-top: 0; @@ -30,7 +30,7 @@ limitations under the License. .mx_TabbedView .mx_SettingsTab { box-sizing: border-box; - min-width: 550px; + min-width: 580px; padding-right: 130px; // Put some padding on the bottom to avoid the settings tab from diff --git a/res/css/views/dialogs/_UnknownDeviceDialog.scss b/res/css/views/dialogs/_UnknownDeviceDialog.scss index a924704769..02e0fb1fe5 100644 --- a/res/css/views/dialogs/_UnknownDeviceDialog.scss +++ b/res/css/views/dialogs/_UnknownDeviceDialog.scss @@ -28,28 +28,28 @@ limitations under the License. flex-direction: column; } +.mx_UnknownDeviceDialog ul { + list-style: none; + padding: 0; +} +// userid +.mx_UnknownDeviceDialog p { + font-weight: bold; + font-size: 16px; +} + .mx_UnknownDeviceDialog .mx_DeviceVerifyButtons { - float: right; + flex-direction: row !important; } .mx_UnknownDeviceDialog .mx_Dialog_content { margin-bottom: 24px; } -.mx_UnknownDeviceDialog .mx_MemberDeviceInfo { - float: right; - clear: both; - padding: 0px; - padding-top: 8px; +.mx_UnknownDeviceDialog_deviceList > li { + padding: 4px; } -.mx_UnknownDeviceDialog .mx_MemberDeviceInfo_textButton { - @mixin mx_DialogButton_small; - background-color: $primary-bg-color; - color: $accent-color; -} - -.mx_UnknownDeviceDialog .mx_UnknownDeviceDialog_deviceList li { - height: 40px; - border-bottom: 1px solid $primary-hairline-color; +.mx_UnknownDeviceDialog_deviceList > li > * { + padding-bottom: 0; } diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss index 8094062628..f42b5eaa6b 100644 --- a/res/css/views/rooms/_AppsDrawer.scss +++ b/res/css/views/rooms/_AppsDrawer.scss @@ -14,6 +14,16 @@ See the License for the specific language governing permissions and limitations under the License. */ +/* +the tile title bar is 5 (top border) + 12 (title, buttons) + 5 (bottom padding) px = 22px +the body is assumed to be 300px (assumed by at least the sticker pickerm, perhaps elsewhere), +so the body height would be 300px - 22px (room for title bar) = 278px +BUT! the sticker picker also assumes it's a little less high than that because the iframe +for the sticker picker doesn't have any padding or margin on it's bottom. +so subtracking another 5px, which brings us at 273px. +*/ +$AppsDrawerBodyHeight: 273px; + .mx_AppsDrawer { margin: 5px; } @@ -83,7 +93,7 @@ limitations under the License. } .mx_AppTile_persistedWrapper { - height: 280px; + height: $AppsDrawerBodyHeight; } .mx_AppTile_mini .mx_AppTile_persistedWrapper { @@ -189,7 +199,7 @@ limitations under the License. } .mx_AppTileBody{ - height: 280px; + height: $AppsDrawerBodyHeight; width: 100%; overflow: hidden; } @@ -208,7 +218,7 @@ limitations under the License. .mx_AppTileBody iframe { width: 100%; - height: 280px; + height: $AppsDrawerBodyHeight; overflow: hidden; border: none; padding: 0; @@ -332,7 +342,7 @@ form.mx_Custom_Widget_Form div { align-items: center; font-weight: bold; position: relative; - height: 280px; + height: $AppsDrawerBodyHeight; } .mx_AppLoading .mx_Spinner { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 7c9a6babea..a8f34565b5 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -533,7 +533,7 @@ limitations under the License. } .mx_EventTile_e2eIcon { - top: 7px; + top: 3px; } .mx_EventTile_editButton { diff --git a/res/css/views/rooms/_RoomBreadcrumbs.scss b/res/css/views/rooms/_RoomBreadcrumbs.scss new file mode 100644 index 0000000000..ba4aec3b6e --- /dev/null +++ b/res/css/views/rooms/_RoomBreadcrumbs.scss @@ -0,0 +1,54 @@ +/* +Copyright 2019 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_RoomBreadcrumbs { + overflow-x: auto; + position: relative; + height: 32px; + margin: 8px; + margin-bottom: 0; + + overflow-x: hidden; + display: flex; + flex-direction: row; + + > * { + margin-left: 4px; + } + + &::after { + content: ""; + position: absolute; + width: 15px; + top: 0; + right: 0; + height: 100%; + background: linear-gradient(to right, rgba(242,245,248,0), rgba(242,245,248,1)); + } + + .mx_RoomBreadcrumbs_animate { + margin-left: 0; + transition: transform 0.3s, width 0.3s; + width: 32px; + transform: scale(1); + } + + .mx_RoomBreadcrumbs_preAnimate { + width: 0; + transform: scale(0); + } +} + diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 220790784e..2024a503ae 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -154,7 +154,7 @@ limitations under the License. } .mx_RoomTile_unread, .mx_RoomTile_highlight { - font-weight: 700 ! important; + font-weight: 700 !important; .mx_RoomTile_name { color: $roomtile-selected-color; @@ -176,7 +176,7 @@ limitations under the License. } .mx_RoomTile:focus { - filter: none ! important; + filter: none !important; background-color: $roomtile-focused-bg-color; } diff --git a/res/css/views/rooms/_Stickers.scss b/res/css/views/rooms/_Stickers.scss index 669ca13545..d33ecc0bb6 100644 --- a/res/css/views/rooms/_Stickers.scss +++ b/res/css/views/rooms/_Stickers.scss @@ -7,8 +7,12 @@ height: 300px; } -.mx_Stickers_content .mx_AppTileFullWidth { - border: none; +#mx_persistedElement_stickerPicker .mx_AppTileFullWidth { + height: unset; + box-sizing: border-box; + border-left: none; + border-right: none; + border-bottom: none; } .mx_Stickers_contentPlaceholder { diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss index a899aec0fa..7fd8bceb50 100644 --- a/res/css/views/settings/tabs/_SettingsTab.scss +++ b/res/css/views/settings/tabs/_SettingsTab.scss @@ -21,7 +21,7 @@ limitations under the License. } .mx_SettingsTab_subheading { - font-size: 14px; + font-size: 16px; display: block; font-family: $font-family; font-weight: 600; @@ -32,7 +32,7 @@ limitations under the License. .mx_SettingsTab_subsectionText { color: $settings-subsection-fg-color; - font-size: 12px; + font-size: 14px; padding-bottom: 12px; display: block; margin: 0 100px 0 0; // Align with the rest of the view @@ -40,16 +40,17 @@ limitations under the License. .mx_SettingsTab_section .mx_SettingsFlag { margin-right: 100px; - height: 25px; margin-bottom: 10px; } .mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label { - vertical-align: bottom; + vertical-align: middle; display: inline-block; - font-size: 12px; + font-size: 14px; color: $primary-fg-color; max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch + box-sizing: border-box; + padding-right: 10px; } .mx_SettingsTab_section .mx_SettingsFlag .mx_ToggleSwitch { diff --git a/res/img/feather-icons/warning-triangle.svg b/res/img/feather-icons/warning-triangle.svg index 02196cbf43..3d18e30fb2 100644 --- a/res/img/feather-icons/warning-triangle.svg +++ b/res/img/feather-icons/warning-triangle.svg @@ -1,5 +1,13 @@ - - - - + + + + + + + + diff --git a/src/Unread.js b/src/Unread.js index 55e60f2a9a..9514ec821b 100644 --- a/src/Unread.js +++ b/src/Unread.js @@ -32,7 +32,7 @@ module.exports = { return false; } else if (ev.getType() == 'm.call.answer' || ev.getType() == 'm.call.hangup') { return false; - } else if (ev.getType == 'm.room.message' && ev.getContent().msgtype == 'm.notify') { + } else if (ev.getType() == 'm.room.message' && ev.getContent().msgtype == 'm.notify') { return false; } const EventTile = sdk.getComponent('rooms.EventTile'); diff --git a/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js b/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js index 2c54344a30..9ceff69467 100644 --- a/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js +++ b/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js @@ -240,7 +240,6 @@ export default React.createClass({ _renderPhasePassPhrase: function() { const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); - const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); let strengthMeter; let helpText; @@ -265,8 +264,15 @@ export default React.createClass({ } return
-

{_t("Secure your encrypted message history with a Recovery Passphrase.")}

-

{_t("You'll need it if you log out or lose access to this device.")}

+

{_t( + "Warning: you should only set up key backup from a trusted computer.", {}, + { b: sub => {sub} }, + )}

+

{_t( + "We'll store an encrypted copy of your keys on our server. " + + "Protect your backup with a passphrase to keep it secure.", + )}

+

{_t("For maximum security, this should be different from your account password.")}

@@ -291,34 +297,12 @@ export default React.createClass({ disabled={!this._passPhraseIsValid()} /> -

{_t( - "If you don't want encrypted message history to be available on other devices, "+ - ".", - {}, - { - button: sub => - {sub} - , - }, - )}

-

{_t( - "Or, if you don't want to create a Recovery Passphrase, skip this step and "+ - ".", - {}, - { - button: sub => - {sub} - , - }, - )}

+
+ {_t("Advanced")} +

+
; }, @@ -353,9 +337,7 @@ export default React.createClass({ const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); return

{_t( - "Type in your Recovery Passphrase to confirm you remember it. " + - "If it helps, add it to your password manager or store it " + - "somewhere safe.", + "Please enter your passphrase a second time to confirm.", )}

@@ -392,7 +374,13 @@ export default React.createClass({ } return
-

{_t("Make a copy of this Recovery Key and keep it safe.")}

+

{_t( + "Your recovery key is a safety net - you can use it to restore " + + "access to your encrypted messages if you forget your passphrase.", + )}

+

{_t( + "Keep your recovery key somewhere very secure, like a password manager (or a safe)", + )}

{bodyText}

@@ -455,10 +443,9 @@ export default React.createClass({ const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); return

{_t( - "Your encryption keys are now being backed up in the background " + - "to your Homeserver. The initial backup could take several minutes. " + - "You can view key backup upload progress in Settings.")}

- + @@ -484,19 +471,19 @@ export default React.createClass({ _titleForPhase: function(phase) { switch (phase) { case PHASE_PASSPHRASE: - return _t('Create a Recovery Passphrase'); + return _t('Secure your backup with a passphrase'); case PHASE_PASSPHRASE_CONFIRM: - return _t('Confirm Recovery Passphrase'); + return _t('Confirm your passphrase'); case PHASE_OPTOUT_CONFIRM: return _t('Warning!'); case PHASE_SHOWKEY: - return _t('Recovery Key'); + return _t('Recovery key'); case PHASE_KEEPITSAFE: return _t('Keep it safe'); case PHASE_BACKINGUP: return _t('Starting backup...'); case PHASE_DONE: - return _t('Backup Started'); + return _t('Success!'); default: return _t("Create Key Backup"); } diff --git a/src/async-components/views/dialogs/keybackup/NewRecoveryMethodDialog.js b/src/async-components/views/dialogs/keybackup/NewRecoveryMethodDialog.js index db86178b5a..28281af771 100644 --- a/src/async-components/views/dialogs/keybackup/NewRecoveryMethodDialog.js +++ b/src/async-components/views/dialogs/keybackup/NewRecoveryMethodDialog.js @@ -39,36 +39,8 @@ export default class NewRecoveryMethodDialog extends React.PureComponent { } onSetupClick = async () => { - // TODO: Should change to a restore key backup flow that checks the - // recovery passphrase while at the same time also cross-signing the - // device as well in a single flow. Since we don't have that yet, we'll - // look for an unverified device and verify it. Note that this means - // we won't restore keys yet; instead we'll only trust the backup for - // sending our own new keys to it. - let backupSigStatus; - try { - backupSigStatus = await MatrixClientPeg.get().isKeyBackupTrusted(this.props.newVersionInfo); - } catch (e) { - console.log("Unable to fetch key backup status", e); - return; - } - - let unverifiedDevice; - for (const sig of backupSigStatus.sigs) { - if (!sig.device.isVerified()) { - unverifiedDevice = sig.device; - break; - } - } - if (!unverifiedDevice) { - console.log("Unable to find a device to verify."); - return; - } - - const DeviceVerifyDialog = sdk.getComponent('views.dialogs.DeviceVerifyDialog'); - Modal.createTrackedDialog('Device Verify Dialog', '', DeviceVerifyDialog, { - userId: MatrixClientPeg.get().credentials.userId, - device: unverifiedDevice, + const RestoreKeyBackupDialog = sdk.getComponent('dialogs.keybackup.RestoreKeyBackupDialog'); + Modal.createTrackedDialog('Restore Backup', '', RestoreKeyBackupDialog, { onFinished: this.props.onFinished, }); } @@ -111,11 +83,6 @@ export default class NewRecoveryMethodDialog extends React.PureComponent { } else { content =
{newMethodDetected} -

{_t( - "Setting up Secure Messages on this device " + - "will re-encrypt this device's message history with " + - "the new recovery method.", - )}

{hackWarning} ); + let breadcrumbs; + if (SettingsStore.isFeatureEnabled("feature_room_breadcrumbs")) { + breadcrumbs = (); + } return (
{ tagPanelContainer }
; } diff --git a/src/components/views/dialogs/DeviceVerifyDialog.js b/src/components/views/dialogs/DeviceVerifyDialog.js index 47ee73c61c..c901942fcd 100644 --- a/src/components/views/dialogs/DeviceVerifyDialog.js +++ b/src/components/views/dialogs/DeviceVerifyDialog.js @@ -60,6 +60,11 @@ export default class DeviceVerifyDialog extends React.Component { } _onSwitchToLegacyClick = () => { + if (this._verifier) { + this._verifier.removeListener('show_sas', this._onVerifierShowSas); + this._verifier.cancel('User cancel'); + this._verifier = null; + } this.setState({mode: MODE_LEGACY}); } @@ -184,11 +189,21 @@ export default class DeviceVerifyDialog extends React.Component { _renderSasVerificationPhaseWaitAccept() { const Spinner = sdk.getComponent("views.elements.Spinner"); + const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton'); return (

{_t("Waiting for partner to accept...")}

+

{_t( + "Nothing appearing? Not all clients support interactive verification yet. " + + ".", + {}, {button: sub => + {sub} + }, + )}

); } diff --git a/src/components/views/dialogs/IncomingSasDialog.js b/src/components/views/dialogs/IncomingSasDialog.js index 2a76e8a904..da2211c10f 100644 --- a/src/components/views/dialogs/IncomingSasDialog.js +++ b/src/components/views/dialogs/IncomingSasDialog.js @@ -16,6 +16,7 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; +import MatrixClientPeg from '../../../MatrixClientPeg'; import sdk from '../../../index'; import { _t } from '../../../languageHandler'; @@ -37,9 +38,12 @@ export default class IncomingSasDialog extends React.Component { this.state = { phase: PHASE_START, sasVerified: false, + opponentProfile: null, + opponentProfileError: null, }; this.props.verifier.on('show_sas', this._onVerifierShowSas); this.props.verifier.on('cancel', this._onVerifierCancel); + this._fetchOpponentProfile(); } componentWillUnmount() { @@ -49,6 +53,21 @@ export default class IncomingSasDialog extends React.Component { this.props.verifier.removeListener('show_sas', this._onVerifierShowSas); } + async _fetchOpponentProfile() { + try { + const prof = await MatrixClientPeg.get().getProfileInfo( + this.props.verifier.userId, + ); + this.setState({ + opponentProfile: prof, + }); + } catch (e) { + this.setState({ + opponentProfileError: e, + }); + } + } + _onFinished = () => { this.props.onFinished(this.state.phase === PHASE_VERIFIED); } @@ -93,10 +112,39 @@ export default class IncomingSasDialog extends React.Component { _renderPhaseStart() { const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); + const Spinner = sdk.getComponent("views.elements.Spinner"); + const BaseAvatar = sdk.getComponent("avatars.BaseAvatar"); + + let profile; + if (this.state.opponentProfile) { + profile =
+ +

{this.state.opponentProfile.displayname}

+
; + } else if (this.state.opponentProfileError) { + profile =
+ +

{this.props.verifier.userId}

+
; + } else { + profile = ; + } return (
-

{this.props.verifier.userId}

+ {profile}

{_t( "Verify this user to mark them as trusted. " + "Trusting users gives you extra peace of mind when using " + diff --git a/src/components/views/dialogs/LogoutDialog.js b/src/components/views/dialogs/LogoutDialog.js index 16b92af1c8..53b9f01da4 100644 --- a/src/components/views/dialogs/LogoutDialog.js +++ b/src/components/views/dialogs/LogoutDialog.js @@ -22,6 +22,10 @@ import { _t } from '../../../languageHandler'; import MatrixClientPeg from '../../../MatrixClientPeg'; export default class LogoutDialog extends React.Component { + defaultProps = { + onFinished: function() {}, + } + constructor() { super(); this._onSettingsLinkClick = this._onSettingsLinkClick.bind(this); @@ -29,13 +33,37 @@ export default class LogoutDialog extends React.Component { this._onFinished = this._onFinished.bind(this); this._onSetRecoveryMethodClick = this._onSetRecoveryMethodClick.bind(this); this._onLogoutConfirm = this._onLogoutConfirm.bind(this); + + this.state = { + loading: false, + backupInfo: null, + error: null, + }; + + if (!MatrixClientPeg.get().getKeyBackupEnabled()) { + this._loadBackupStatus(); + } + } + + async _loadBackupStatus() { + try { + const backupInfo = await MatrixClientPeg.get().getKeyBackupVersion(); + this.setState({ + loading: false, + backupInfo, + }); + } catch (e) { + console.log("Unable to fetch key backup status", e); + this.setState({ + loading: false, + error: e, + }); + } } _onSettingsLinkClick() { // close dialog - if (this.props.onFinished) { - this.props.onFinished(); - } + this.props.onFinished(); } _onExportE2eKeysClicked() { @@ -52,9 +80,7 @@ export default class LogoutDialog extends React.Component { dis.dispatch({action: 'logout'}); } // close dialog - if (this.props.onFinished) { - this.props.onFinished(); - } + this.props.onFinished(); } _onSetRecoveryMethodClick() { @@ -63,72 +89,83 @@ export default class LogoutDialog extends React.Component { ); // close dialog - if (this.props.onFinished) { - this.props.onFinished(); - } + this.props.onFinished(); } _onLogoutConfirm() { dis.dispatch({action: 'logout'}); // close dialog - if (this.props.onFinished) { - this.props.onFinished(); - } + this.props.onFinished(); } render() { const description =

{_t( - "When you log out, you'll lose your secure message history. To prevent " + - "this, set up a recovery method.", - )}

-

{_t( - "Alternatively, advanced users can also manually export encryption keys in " + - "Settings before logging out.", {}, - { - a: sub => {sub}, - }, + "Encrypted messages are secured with end-to-end encryption. " + + "Only you and the recipient(s) have the keys to read these messages.", )}

+

{_t("Back up your keys before signing out to avoid losing them.")}

; if (!MatrixClientPeg.get().getKeyBackupEnabled()) { const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); - const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); + + let dialogContent; + if (this.state.loading) { + const Spinner = sdk.getComponent('views.elements.Spinner'); + + dialogContent = ; + } else { + const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); + let setupButtonCaption; + if (this.state.backupInfo) { + setupButtonCaption = _t("Use Key Backup"); + } else { + // if there's an error fetching the backup info, we'll just assume there's + // no backup for the purpose of the button caption + setupButtonCaption = _t("Start using Key Backup"); + } + + dialogContent =
+
+ { description } +
+ + + +
+ {_t("Advanced")} +

+
+
; + } // Not quite a standard question dialog as the primary button cancels // the action and does something else instead, whilst non-default button // confirms the action. return ( -
- { description } -
- - - + {dialogContent} ); } else { const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog'); return ( - { device.deviceId } - -
- { device.getDisplayName() } - - ); -} - -DeviceListEntry.propTypes = { - userId: PropTypes.string.isRequired, - - // deviceinfo - device: PropTypes.object.isRequired, -}; - - function UserUnknownDeviceList(props) { + const MemberDeviceInfo = sdk.getComponent('rooms.MemberDeviceInfo'); const {userId, userDevices} = props; const deviceListEntries = Object.keys(userDevices).map((deviceId) => - , +
    • , ); return ( diff --git a/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js b/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js index 712d8d2b4e..0f390a02c9 100644 --- a/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js +++ b/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js @@ -230,10 +230,15 @@ export default React.createClass({ const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); title = _t("Enter Recovery Passphrase"); content =
    - {_t( +

    {_t( + "Warning: you should only set up key backup " + + "from a trusted computer.", {}, + { b: sub => {sub} }, + )}

    +

    {_t( "Access your secure message history and set up secure " + "messaging by entering your recovery passphrase.", - )}
    + )}

    - {_t( +

    {_t( + "Warning: you should only set up key backup " + + "from a trusted computer.", {}, + { b: sub => {sub} }, + )}

    +

    {_t( "Access your secure message history and set up secure " + "messaging by entering your recovery key.", - )}
    + )}

    ); + const icon = (
    ); + if (props.onClick) { + return ({ icon }); + } else { + return icon; + } } diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index 8520d804e0..8e1fb5af9f 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -327,6 +327,7 @@ module.exports = withMatrixClient(React.createClass({ top: y, eventTileOps: tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined, collapseReplyThread: replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined, + e2eInfoCallback: () => this.onCryptoClicked(), onFinished: function() { self.setState({menu: false}); }, @@ -773,29 +774,31 @@ module.exports.haveTileForEvent = function(e) { function E2ePadlockUndecryptable(props) { return ( - + ); } function E2ePadlockUnverified(props) { return ( - + ); } function E2ePadlockUnencrypted(props) { return ( - + ); } function E2ePadlock(props) { if (SettingsStore.getValue("alwaysShowEncryptionIcons")) { - return
    ; + return (
    ); } else { - return
    ; + return (
    ); } } diff --git a/src/components/views/rooms/MemberDeviceInfo.js b/src/components/views/rooms/MemberDeviceInfo.js index 67f99e4d1d..ff88c6f6e6 100644 --- a/src/components/views/rooms/MemberDeviceInfo.js +++ b/src/components/views/rooms/MemberDeviceInfo.js @@ -30,7 +30,7 @@ export default class MemberDeviceInfo extends React.Component { mx_MemberDeviceInfo_icon_unverified: this.props.device.isUnverified(), }); const indicator = (
    ); - const deviceName = this.props.device.ambiguous ? + const deviceName = (this.props.device.ambiguous || this.props.showDeviceId) ? (this.props.device.getDisplayName() ? this.props.device.getDisplayName() : "") + " (" + this.props.device.deviceId + ")" : this.props.device.getDisplayName(); diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js index 5df0da7491..f4c600af8d 100644 --- a/src/components/views/rooms/MemberInfo.js +++ b/src/components/views/rooms/MemberInfo.js @@ -941,6 +941,8 @@ module.exports = withMatrixClient(React.createClass({ } let roomMemberDetails = null; + let e2eIconElement; + if (this.props.member.roomId) { // is in room const PowerSelector = sdk.getComponent('elements.PowerSelector'); roomMemberDetails =
    @@ -959,6 +961,11 @@ module.exports = withMatrixClient(React.createClass({ {statusLabel}
    ; + + const isEncrypted = this.props.matrixClient.isRoomEncrypted(this.props.member.roomId); + if (this.state.e2eStatus && isEncrypted) { + e2eIconElement = (); + } } const avatarUrl = this.props.member.getMxcAvatarUrl(); @@ -967,7 +974,7 @@ module.exports = withMatrixClient(React.createClass({ const httpUrl = this.props.matrixClient.mxcUrlToHttp(avatarUrl, 800, 800); avatarElement =
    -
    +
    ; } const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper"); @@ -979,7 +986,7 @@ module.exports = withMatrixClient(React.createClass({ {_t('Close')} - { this.state.e2eStatus ? : undefined } + { e2eIconElement } { memberName }
    { avatarElement } diff --git a/src/components/views/rooms/RoomBreadcrumbs.js b/src/components/views/rooms/RoomBreadcrumbs.js new file mode 100644 index 0000000000..d661d439bf --- /dev/null +++ b/src/components/views/rooms/RoomBreadcrumbs.js @@ -0,0 +1,109 @@ +/* +Copyright 2019 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. +*/ + +'use strict'; +import React from "react"; +import dis from "../../../dispatcher"; +import MatrixClientPeg from "../../../MatrixClientPeg"; +import AccessibleButton from '../elements/AccessibleButton'; +import RoomAvatar from '../avatars/RoomAvatar'; +import classNames from 'classnames'; + +const MAX_ROOMS = 20; + +export default class RoomBreadcrumbs extends React.Component { + constructor(props) { + super(props); + this.state = {rooms: []}; + this.onAction = this.onAction.bind(this); + this._previousRoomId = null; + this._dispatcherRef = null; + } + + componentWillMount() { + this._dispatcherRef = dis.register(this.onAction); + } + + componentWillUnmount() { + dis.unregister(this._dispatcherRef); + } + + componentDidUpdate() { + const rooms = this.state.rooms.slice(); + if (rooms.length) { + const {room, animated} = rooms[0]; + if (!animated) { + rooms[0] = {room, animated: true}; + setTimeout(() => this.setState({rooms}), 0); + } + } + } + + onAction(payload) { + switch (payload.action) { + case 'view_room': + if (this._previousRoomId) { + this._appendRoomId(this._previousRoomId); + } + this._previousRoomId = payload.room_id; + } + } + + _appendRoomId(roomId) { + const room = MatrixClientPeg.get().getRoom(roomId); + if (!room) { + return; + } + const rooms = this.state.rooms.slice(); + const existingIdx = rooms.findIndex((r) => r.room.roomId === room.roomId); + if (existingIdx !== -1) { + rooms.splice(existingIdx, 1); + } + rooms.splice(0, 0, {room, animated: false}); + if (rooms.length > MAX_ROOMS) { + rooms.splice(MAX_ROOMS, rooms.length - MAX_ROOMS); + } + this.setState({rooms}); + } + + _viewRoom(room) { + dis.dispatch({action: "view_room", room_id: room.roomId}); + } + + render() { + // check for collapsed here and + // not at parent so we keep + // rooms in our state + // when collapsing and expanding + if (this.props.collapsed) { + return null; + } + const rooms = this.state.rooms; + const avatars = rooms.map(({room, animated}, i) => { + const isFirst = i === 0; + const classes = classNames({ + "mx_RoomBreadcrumbs_preAnimate": isFirst && !animated, + "mx_RoomBreadcrumbs_animate": isFirst, + }); + return ( + this._viewRoom(room)}> + + + ); + }); + return (
    { avatars }
    ); + } +} diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js index e25b25d110..6e5ccab7f9 100644 --- a/src/components/views/rooms/RoomHeader.js +++ b/src/components/views/rooms/RoomHeader.js @@ -32,6 +32,7 @@ import {CancelButton} from './SimpleRoomHeader'; import SettingsStore from "../../../settings/SettingsStore"; import RoomHeaderButtons from '../right_panel/RoomHeaderButtons'; import E2EIcon from './E2EIcon'; +import * as cryptodevices from '../../../cryptodevices'; module.exports = React.createClass({ displayName: 'RoomHeader', @@ -145,6 +146,12 @@ module.exports = React.createClass({ return !(currentPinEvent.getContent().pinned && currentPinEvent.getContent().pinned.length <= 0); }, + _onShowDevicesClick: function() { + if (this.props.e2eStatus === "warning") { + cryptodevices.showUnknownDeviceDialogForMessages(MatrixClientPeg.get(), this.props.room); + } + }, + render: function() { const RoomAvatar = sdk.getComponent("avatars.RoomAvatar"); const TintableSvg = sdk.getComponent("elements.TintableSvg"); @@ -156,7 +163,7 @@ module.exports = React.createClass({ let pinnedEventsButton = null; const e2eIcon = this.props.e2eStatus ? - : + : undefined; if (this.props.onCancelClick) { diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js index 56eb4b713d..227dd318ed 100644 --- a/src/components/views/rooms/RoomList.js +++ b/src/components/views/rooms/RoomList.js @@ -17,6 +17,7 @@ limitations under the License. 'use strict'; import SettingsStore from "../../../settings/SettingsStore"; +import Timer from "../../../utils/Timer"; const React = require("react"); const ReactDOM = require("react-dom"); @@ -41,6 +42,7 @@ import {Resizer} from '../../../resizer'; import {Layout, Distributor} from '../../../resizer/distributors/roomsublist2'; const HIDE_CONFERENCE_CHANS = true; const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/; +const HOVER_MOVE_TIMEOUT = 1000; function labelForTagName(tagName) { if (tagName.startsWith('u.')) return tagName.slice(2); @@ -73,6 +75,7 @@ module.exports = React.createClass({ getInitialState: function() { + this._hoverClearTimer = null; this._subListRefs = { // key => RoomSubList ref }; @@ -95,7 +98,7 @@ module.exports = React.createClass({ // update overflow indicators this._checkSubListsOverflow(); // don't store height for collapsed sublists - if(!this.collapsedState[key]) { + if (!this.collapsedState[key]) { this.subListSizes[key] = size; window.localStorage.setItem("mx_roomlist_sizes", JSON.stringify(this.subListSizes)); @@ -357,11 +360,32 @@ module.exports = React.createClass({ this.forceUpdate(); }, - onMouseEnter: function(ev) { - this.setState({hover: true}); + onMouseMove: async function(ev) { + if (!this._hoverClearTimer) { + this.setState({hover: true}); + this._hoverClearTimer = new Timer(HOVER_MOVE_TIMEOUT); + this._hoverClearTimer.start(); + let finished = true; + try { + await this._hoverClearTimer.finished(); + } catch (err) { + finished = false; + } + this._hoverClearTimer = null; + if (finished) { + this.setState({hover: false}); + this._delayedRefreshRoomList(); + } + } else { + this._hoverClearTimer.restart(); + } }, onMouseLeave: function(ev) { + if (this._hoverClearTimer) { + this._hoverClearTimer.abort(); + this._hoverClearTimer = null; + } this.setState({hover: false}); // Refresh the room list just in case the user missed something. @@ -774,7 +798,7 @@ module.exports = React.createClass({ return (
    + onMouseMove={this.onMouseMove} onMouseLeave={this.onMouseLeave}> { subListComponents }
    ); diff --git a/src/components/views/rooms/RoomRecoveryReminder.js b/src/components/views/rooms/RoomRecoveryReminder.js index 01dd71db01..12fc78be4e 100644 --- a/src/components/views/rooms/RoomRecoveryReminder.js +++ b/src/components/views/rooms/RoomRecoveryReminder.js @@ -39,6 +39,7 @@ export default class RoomRecoveryReminder extends React.PureComponent { loading: true, error: null, backupInfo: null, + notNowClicked: false, }; } @@ -77,6 +78,10 @@ export default class RoomRecoveryReminder extends React.PureComponent { } } + onOnNotNowClick = () => { + this.setState({notNowClicked: true}); + } + onDontAskAgainClick = () => { // When you choose "Don't ask again" from the room reminder, we show a // dialog to confirm the choice. @@ -104,46 +109,54 @@ export default class RoomRecoveryReminder extends React.PureComponent { } render() { - if (this.state.loading) { + // If there was an error loading just don't display the banner: we'll try again + // next time the user switchs to the room. + if (this.state.error || this.state.loading || this.state.notNowClicked) { return null; } const AccessibleButton = sdk.getComponent("views.elements.AccessibleButton"); - let body; - if (this.state.error) { - body =
    - {_t("Unable to load key backup status")} -
    ; - } else if (this.state.backupInfo) { - // A key backup exists for this account, but we're not using it. - body =
    -

    {_t( - "Secure Key Backup should be active on all of your devices to avoid " + - "losing access to your encrypted messages.", - )}

    -
    ; + let setupCaption; + if (this.state.backupInfo) { + setupCaption = _t("Use Key Backup"); } else { - body = _t( - "Securely back up your decryption keys to the server to make sure " + - "you'll always be able to read your encrypted messages.", - ); + setupCaption = _t("Start using Key Backup"); } return (
    {_t( - "Don't risk losing your encrypted messages!", + "Never lose encrypted messages", )}
    -
    {body}
    +
    +

    {_t( + "Messages in this room are secured with end-to-end " + + "encryption. Only you and the recipient(s) have the " + + "keys to read these messages.", + )}

    +

    {_t( + "Securely back up your keys to avoid losing them. " + + "Learn more.", {}, + { + // TODO: We don't have this link yet: this will prevent the translators + // having to re-translate the string when we do. + a: sub => '', + }, + )}

    +
    - {_t("Activate Secure Key Backup")} + {setupCaption} +

    + { _t("Not now") } +

    - { _t("No thanks, I'll download a copy of my decryption keys before I log out") } + { _t("Don't ask me again") }

    diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index ed214812b5..f9e9d64b9e 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -108,13 +108,6 @@ module.exports = React.createClass({ return statusUser._unstable_statusMessage; }, - onRoomTimeline: function(ev, room) { - if (room !== this.props.room) return; - this.setState({ - notificationCount: this.props.room.getUnreadNotificationCount(), - }); - }, - onRoomName: function(room) { if (room !== this.props.room) return; this.setState({ @@ -159,7 +152,6 @@ module.exports = React.createClass({ componentWillMount: function() { MatrixClientPeg.get().on("accountData", this.onAccountData); - MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline); MatrixClientPeg.get().on("Room.name", this.onRoomName); ActiveRoomObserver.addListener(this.props.room.roomId, this._onActiveRoomChange); this.dispatcherRef = dis.register(this.onAction); @@ -179,7 +171,6 @@ module.exports = React.createClass({ const cli = MatrixClientPeg.get(); if (cli) { MatrixClientPeg.get().removeListener("accountData", this.onAccountData); - MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline); MatrixClientPeg.get().removeListener("Room.name", this.onRoomName); } ActiveRoomObserver.removeListener(this.props.room.roomId, this._onActiveRoomChange); @@ -306,7 +297,7 @@ module.exports = React.createClass({ render: function() { const isInvite = this.props.room.getMyMembership() === "invite"; - const notificationCount = this.state.notificationCount; + const notificationCount = this.props.notificationCount; // var highlightCount = this.props.room.getUnreadNotificationCount("highlight"); const notifBadges = notificationCount > 0 && this._shouldShowNotifBadge(); diff --git a/src/components/views/rooms/Stickerpicker.js b/src/components/views/rooms/Stickerpicker.js index b8fe3afb97..188b42622a 100644 --- a/src/components/views/rooms/Stickerpicker.js +++ b/src/components/views/rooms/Stickerpicker.js @@ -226,6 +226,7 @@ export default class Stickerpicker extends React.Component { showTitle={false} showMinimise={true} showDelete={false} + showCancel={false} showPopout={false} onMinimiseClick={this._onHideStickersClick} handleMinimisePointerEvents={true} diff --git a/src/components/views/settings/KeyBackupPanel.js b/src/components/views/settings/KeyBackupPanel.js index fb870938c7..3976196b57 100644 --- a/src/components/views/settings/KeyBackupPanel.js +++ b/src/components/views/settings/KeyBackupPanel.js @@ -111,10 +111,10 @@ export default class KeyBackupPanel extends React.PureComponent { Modal.createTrackedDialog('Delete Backup', '', QuestionDialog, { title: _t('Delete Backup'), description: _t( - "Delete your backed up encryption keys from the server? " + - "You will no longer be able to use your recovery key to read encrypted message history", + "Are you sure? You will lose your encrypted messages if your " + + "keys are not backed up properly.", ), - button: _t('Delete backup'), + button: _t('Delete Backup'), danger: true, onFinished: (proceed) => { if (!proceed) return; @@ -135,6 +135,10 @@ export default class KeyBackupPanel extends React.PureComponent { render() { const Spinner = sdk.getComponent("elements.Spinner"); const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); + const encryptedMessageAreEncrypted = _t( + "Encrypted messages are secured with end-to-end encryption. " + + "Only you and the recipient(s) have the keys to read these messages.", + ); if (this.state.error) { return ( @@ -145,14 +149,25 @@ export default class KeyBackupPanel extends React.PureComponent { } else if (this.state.loading) { return ; } else if (this.state.backupInfo) { + const EmojiText = sdk.getComponent('elements.EmojiText'); let clientBackupStatus; + let restoreButtonCaption = _t("Restore from Backup"); + if (MatrixClientPeg.get().getKeyBackupEnabled()) { - clientBackupStatus = _t("This device is using key backup"); + clientBackupStatus =
    +

    {encryptedMessageAreEncrypted}

    +

    {_t("This device is backing up your keys. ")}✅

    +
    ; } else { - clientBackupStatus = _t( - "This device is not using key backup. Restore the backup to start using it.", {}, - {b: x => {x}}, - ); + clientBackupStatus =
    +

    {encryptedMessageAreEncrypted}

    +

    {_t( + "This device is not backing up your keys.", {}, + {b: sub => {sub}}, + )}

    +

    {_t("Back up your keys before signing out to avoid losing them.")}

    +
    ; + restoreButtonCaption = _t("Use key backup"); } let uploadStatus; @@ -243,18 +258,25 @@ export default class KeyBackupPanel extends React.PureComponent {

    - { _t("Restore backup") } + {restoreButtonCaption}     - { _t("Delete backup") } + { _t("Delete Backup") }

    ; } else { return
    - {_t("No backup is present")}

    +
    +

    {_t( + "Your keys are not being backed up from this device.", {}, + {b: sub => {sub}}, + )}

    +

    {encryptedMessageAreEncrypted}

    +

    {_t("Back up your keys before signing out to avoid losing them.")}

    +
    - { _t("Start a new backup") } + { _t("Start using Key Backup") }
    ; } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index f48e306641..7376b35fe5 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -270,6 +270,7 @@ "Failed to join room": "Failed to join room", "Message Pinning": "Message Pinning", "Custom user status messages": "Custom user status messages", + "Show recent room avatars above the room list (refresh to apply changes)": "Show recent room avatars above the room list (refresh to apply changes)", "Group & filter rooms by custom tags (refresh to apply changes)": "Group & filter rooms by custom tags (refresh to apply changes)", "Render simple counters in room header": "Render simple counters in room header", "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing", @@ -439,11 +440,14 @@ "Disable Notifications": "Disable Notifications", "Enable Notifications": "Enable Notifications", "Delete Backup": "Delete Backup", - "Delete your backed up encryption keys from the server? You will no longer be able to use your recovery key to read encrypted message history": "Delete your backed up encryption keys from the server? You will no longer be able to use your recovery key to read encrypted message history", - "Delete backup": "Delete backup", + "Are you sure? You will lose your encrypted messages if your keys are not backed up properly.": "Are you sure? You will lose your encrypted messages if your keys are not backed up properly.", + "Encrypted messages are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.": "Encrypted messages are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.", "Unable to load key backup status": "Unable to load key backup status", - "This device is using key backup": "This device is using key backup", - "This device is not using key backup. Restore the backup to start using it.": "This device is not using key backup. Restore the backup to start using it.", + "Restore from Backup": "Restore from Backup", + "This device is backing up your keys. ": "This device is backing up your keys. ", + "This device is not backing up your keys.": "This device is not backing up your keys.", + "Back up your keys before signing out to avoid losing them.": "Back up your keys before signing out to avoid losing them.", + "Use key backup": "Use key backup", "Backing up %(sessionsRemaining)s keys...": "Backing up %(sessionsRemaining)s keys...", "All keys backed up": "All keys backed up", "Backup has a signature from unknown device with ID %(deviceId)s.": "Backup has a signature from unknown device with ID %(deviceId)s.", @@ -457,9 +461,8 @@ "Advanced": "Advanced", "Backup version: ": "Backup version: ", "Algorithm: ": "Algorithm: ", - "Restore backup": "Restore backup", - "No backup is present": "No backup is present", - "Start a new backup": "Start a new backup", + "Your keys are not being backed up from this device.": "Your keys are not being backed up from this device.", + "Start using Key Backup": "Start using Key Backup", "Error saving email notification preferences": "Error saving email notification preferences", "An error occurred whilst saving your email notification preferences.": "An error occurred whilst saving your email notification preferences.", "Keywords": "Keywords", @@ -785,11 +788,12 @@ "You are trying to access a room.": "You are trying to access a room.", "Click here to join the discussion!": "Click here to join the discussion!", "This is a preview of this room. Room interactions have been disabled": "This is a preview of this room. Room interactions have been disabled", - "Secure Key Backup should be active on all of your devices to avoid losing access to your encrypted messages.": "Secure Key Backup should be active on all of your devices to avoid losing access to your encrypted messages.", - "Securely back up your decryption keys to the server to make sure you'll always be able to read your encrypted messages.": "Securely back up your decryption keys to the server to make sure you'll always be able to read your encrypted messages.", - "Don't risk losing your encrypted messages!": "Don't risk losing your encrypted messages!", - "Activate Secure Key Backup": "Activate Secure Key Backup", - "No thanks, I'll download a copy of my decryption keys before I log out": "No thanks, I'll download a copy of my decryption keys before I log out", + "Use Key Backup": "Use Key Backup", + "Never lose encrypted messages": "Never lose encrypted messages", + "Messages in this room are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.": "Messages in this room are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.", + "Securely back up your keys to avoid losing them. Learn more.": "Securely back up your keys to avoid losing them. Learn more.", + "Not now": "Not now", + "Don't ask me again": "Don't ask me again", "Add a topic": "Add a topic", "This room is using an unstable room version. If you aren't expecting this, please upgrade the room.": "This room is using an unstable room version. If you aren't expecting this, please upgrade the room.", "Click here to upgrade to the latest room version.": "Click here to upgrade to the latest room version.", @@ -1061,6 +1065,7 @@ "Verify by comparing a short text string.": "Verify by comparing a short text string.", "Begin Verifying": "Begin Verifying", "Waiting for partner to accept...": "Waiting for partner to accept...", + "Nothing appearing? Not all clients support interactive verification yet. .": "Nothing appearing? Not all clients support interactive verification yet. .", "Waiting for %(userId)s to confirm...": "Waiting for %(userId)s to confirm...", "Use two-way text verification": "Use two-way text verification", "To verify that this device can be trusted, please contact its owner using some other means (e.g. in person or a phone call) and ask them whether the key they see in their User Settings for this device matches the key below:": "To verify that this device can be trusted, please contact its owner using some other means (e.g. in person or a phone call) and ask them whether the key they see in their User Settings for this device matches the key below:", @@ -1100,11 +1105,10 @@ "Clear cache and resync": "Clear cache and resync", "Riot now uses 3-5x less memory, by only loading information about other users when needed. Please wait whilst we resynchronise with the server!": "Riot now uses 3-5x less memory, by only loading information about other users when needed. Please wait whilst we resynchronise with the server!", "Updating Riot": "Updating Riot", - "When you log out, you'll lose your secure message history. To prevent this, set up a recovery method.": "When you log out, you'll lose your secure message history. To prevent this, set up a recovery method.", - "Alternatively, advanced users can also manually export encryption keys in Settings before logging out.": "Alternatively, advanced users can also manually export encryption keys in Settings before logging out.", - "Set a Recovery Method": "Set a Recovery Method", - "I understand, log out without": "I understand, log out without", - "When signing in again, you can access encrypted chat history by restoring your key backup. You'll need your recovery passphrase or, if you didn't set a recovery passphrase, your recovery key (that you downloaded).": "When signing in again, you can access encrypted chat history by restoring your key backup. You'll need your recovery passphrase or, if you didn't set a recovery passphrase, your recovery key (that you downloaded).", + "I don't want my encrypted messages": "I don't want my encrypted messages", + "Manually export keys": "Manually export keys", + "You'll lose access to your encrypted messages": "You'll lose access to your encrypted messages", + "Are you sure you want to sign out?": "Are you sure you want to sign out?", "Thanks for testing the Riot Redesign. If you run into any bugs or visual issues, please let us know on GitHub.": "Thanks for testing the Riot Redesign. If you run into any bugs or visual issues, please let us know on GitHub.", "To help avoid duplicate issues, please view existing issues first (and add a +1) or create a new issue if you can't find it.": "To help avoid duplicate issues, please view existing issues first (and add a +1) or create a new issue if you can't find it.", "Report bugs & give feedback": "Report bugs & give feedback", @@ -1171,6 +1175,7 @@ "Failed to decrypt %(failedCount)s sessions!": "Failed to decrypt %(failedCount)s sessions!", "Restored %(sessionCount)s session keys": "Restored %(sessionCount)s session keys", "Enter Recovery Passphrase": "Enter Recovery Passphrase", + "Warning: you should only set up key backup from a trusted computer.": "Warning: you should only set up key backup from a trusted computer.", "Access your secure message history and set up secure messaging by entering your recovery passphrase.": "Access your secure message history and set up secure messaging by entering your recovery passphrase.", "Next": "Next", "If you've forgotten your recovery passphrase you can use your recovery key or set up new recovery options": "If you've forgotten your recovery passphrase you can use your recovery key or set up new recovery options", @@ -1216,6 +1221,7 @@ "Set status": "Set status", "Set a new status...": "Set a new status...", "View Community": "View Community", + "Hide": "Hide", "Login": "Login", "powered by Matrix": "powered by Matrix", "Robot check is currently unavailable on desktop - please use a web browser": "Robot check is currently unavailable on desktop - please use a web browser", @@ -1487,19 +1493,19 @@ "Import": "Import", "Great! This passphrase looks strong enough.": "Great! This passphrase looks strong enough.", "Keep going...": "Keep going...", - "Secure your encrypted message history with a Recovery Passphrase.": "Secure your encrypted message history with a Recovery Passphrase.", - "You'll need it if you log out or lose access to this device.": "You'll need it if you log out or lose access to this device.", + "We'll store an encrypted copy of your keys on our server. Protect your backup with a passphrase to keep it secure.": "We'll store an encrypted copy of your keys on our server. Protect your backup with a passphrase to keep it secure.", + "For maximum security, this should be different from your account password.": "For maximum security, this should be different from your account password.", "Enter a passphrase...": "Enter a passphrase...", - "If you don't want encrypted message history to be available on other devices, .": "If you don't want encrypted message history to be available on other devices, .", - "Or, if you don't want to create a Recovery Passphrase, skip this step and .": "Or, if you don't want to create a Recovery Passphrase, skip this step and .", + "Set up with a Recovery Key": "Set up with a Recovery Key", "That matches!": "That matches!", "That doesn't match.": "That doesn't match.", "Go back to set it again.": "Go back to set it again.", - "Type in your Recovery Passphrase to confirm you remember it. If it helps, add it to your password manager or store it somewhere safe.": "Type in your Recovery Passphrase to confirm you remember it. If it helps, add it to your password manager or store it somewhere safe.", + "Please enter your passphrase a second time to confirm.": "Please enter your passphrase a second time to confirm.", "Repeat your passphrase...": "Repeat your passphrase...", "As a safety net, you can use it to restore your encrypted message history if you forget your Recovery Passphrase.": "As a safety net, you can use it to restore your encrypted message history if you forget your Recovery Passphrase.", "As a safety net, you can use it to restore your encrypted message history.": "As a safety net, you can use it to restore your encrypted message history.", - "Make a copy of this Recovery Key and keep it safe.": "Make a copy of this Recovery Key and keep it safe.", + "Your recovery key is a safety net - you can use it to restore access to your encrypted messages if you forget your passphrase.": "Your recovery key is a safety net - you can use it to restore access to your encrypted messages if you forget your passphrase.", + "Keep your recovery key somewhere very secure, like a password manager (or a safe)": "Keep your recovery key somewhere very secure, like a password manager (or a safe)", "Your Recovery Key": "Your Recovery Key", "Copy to clipboard": "Copy to clipboard", "Download": "Download", @@ -1508,15 +1514,16 @@ "Print it and store it somewhere safe": "Print it and store it somewhere safe", "Save it on a USB key or backup drive": "Save it on a USB key or backup drive", "Copy it to your personal cloud storage": "Copy it to your personal cloud storage", - "Your encryption keys are now being backed up in the background to your Homeserver. The initial backup could take several minutes. You can view key backup upload progress in Settings.": "Your encryption keys are now being backed up in the background to your Homeserver. The initial backup could take several minutes. You can view key backup upload progress in Settings.", + "Your keys are being backed up (the first backup could take a few minutes).": "Your keys are being backed up (the first backup could take a few minutes).", + "Okay": "Okay", "Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another device.": "Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another device.", "Set up Secure Message Recovery": "Set up Secure Message Recovery", - "Create a Recovery Passphrase": "Create a Recovery Passphrase", - "Confirm Recovery Passphrase": "Confirm Recovery Passphrase", - "Recovery Key": "Recovery Key", + "Secure your backup with a passphrase": "Secure your backup with a passphrase", + "Confirm your passphrase": "Confirm your passphrase", + "Recovery key": "Recovery key", "Keep it safe": "Keep it safe", "Starting backup...": "Starting backup...", - "Backup Started": "Backup Started", + "Success!": "Success!", "Create Key Backup": "Create Key Backup", "Unable to create key backup": "Unable to create key backup", "Retry": "Retry", diff --git a/src/ratelimitedfunc.js b/src/ratelimitedfunc.js index 20f6db79b8..1f15f11d91 100644 --- a/src/ratelimitedfunc.js +++ b/src/ratelimitedfunc.js @@ -20,54 +20,28 @@ limitations under the License. * to update the interface once for all of them. * * Note that the function must not take arguments, since the args - * could be different for each invocarion of the function. + * could be different for each invocation of the function. * * The returned function has a 'cancelPendingCall' property which can be called * on unmount or similar to cancel any pending update. */ -module.exports = function(f, minIntervalMs) { - this.lastCall = 0; - this.scheduledCall = undefined; - const self = this; - const wrapper = function() { - const now = Date.now(); +import { throttle } from "lodash"; - if (self.lastCall < now - minIntervalMs) { - f.apply(this); - // get the time again now the function has finished, so if it - // took longer than the delay time to execute, it doesn't - // immediately become eligible to run again. - self.lastCall = Date.now(); - } else if (self.scheduledCall === undefined) { - self.scheduledCall = setTimeout( - () => { - self.scheduledCall = undefined; - f.apply(this); - // get time again as per above - self.lastCall = Date.now(); - }, - (self.lastCall + minIntervalMs) - now, - ); - } +export default function ratelimitedfunc(fn, time) { + const throttledFn = throttle(fn, time, { + leading: true, + trailing: true, + }); + const _bind = throttledFn.bind; + throttledFn.bind = function() { + const boundFn = _bind.apply(throttledFn, arguments); + boundFn.cancelPendingCall = throttledFn.cancelPendingCall; + return boundFn; }; - // add the cancelPendingCall property - wrapper.cancelPendingCall = function() { - if (self.scheduledCall) { - clearTimeout(self.scheduledCall); - self.scheduledCall = undefined; - } + throttledFn.cancelPendingCall = function() { + throttledFn.cancel(); }; - - // make sure that cancelPendingCall is copied when react rebinds the - // wrapper - const _bind = wrapper.bind; - wrapper.bind = function() { - const rebound = _bind.apply(this, arguments); - rebound.cancelPendingCall = wrapper.cancelPendingCall; - return rebound; - }; - - return wrapper; -}; + return throttledFn; +} diff --git a/src/settings/Settings.js b/src/settings/Settings.js index 9dfbc7d51e..671f46b366 100644 --- a/src/settings/Settings.js +++ b/src/settings/Settings.js @@ -99,6 +99,12 @@ export const SETTINGS = { default: false, controller: new CustomStatusController(), }, + "feature_room_breadcrumbs": { + isFeature: true, + displayName: _td("Show recent room avatars above the room list (refresh to apply changes)"), + supportedLevels: LEVELS_FEATURE, + default: false, + }, "feature_custom_tags": { isFeature: true, displayName: _td("Group & filter rooms by custom tags (refresh to apply changes)"),