[WIP] Human Edition of Element Web prototype

package.json

@@ -44,7 +44,7 @@
     "start:all": "echo THIS IS FOR LEGACY PURPOSES ONLY. && yarn start:build",
     "start:build": "babel src -w -s -d lib --verbose --extensions \".ts,.js\"",
     "lint": "yarn lint:types && yarn lint:js && yarn lint:style",
-    "lint:js": "eslint --max-warnings 0 src test",
+    "lint:js": "eslint src test",
     "lint:js-fix": "eslint --fix src test",
     "lint:types": "tsc --noEmit --jsx react",
     "lint:style": "stylelint \"res/css/**/*.scss\"",

res/css/_components.scss

@@ -261,6 +261,7 @@
 @import "./views/settings/_CryptographyPanel.scss";
 @import "./views/settings/_DevicesPanel.scss";
 @import "./views/settings/_E2eAdvancedPanel.scss";
+@import "./views/settings/_E2eTrustPanel.scss";
 @import "./views/settings/_EmailAddresses.scss";
 @import "./views/settings/_FontScalingPanel.scss";
 @import "./views/settings/_ImageSizePanel.scss";

res/css/views/settings/_E2eTrustPanel.scss

@@ -0,0 +1,28 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+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_E2eTrustPanel {
+    .mx_Slider {
+        margin: 0 20px;
+        .mx_Slider_selectionDot {
+            display: none;
+        }
+        .mx_Slider_label {
+            margin-top: 8px;
+            color: $primary-content;
+        }
+    }
+}

src/DeviceListener.ts

@@ -59,6 +59,14 @@ export default class DeviceListener {
     // The set of device IDs we're currently displaying toasts for
     private displayingToastsForDeviceIds = new Set<string>();
 
+    private hasViewedEncryptedRoom = false;
+
+    public async viewingEncryptedRoom() {
+        this.hasViewedEncryptedRoom = true;
+        this.dismissedThisDeviceToast = false;
+        return this.recheck();
+    }
+
     static sharedInstance() {
         if (!window.mxDeviceListener) window.mxDeviceListener = new DeviceListener();
         return window.mxDeviceListener;
@@ -211,9 +219,11 @@ export default class DeviceListener {
         // If we're in the middle of a secret storage operation, we're likely
         // modifying the state involved here, so don't add new toasts to setup.
         if (isSecretStorageBeingAccessed()) return false;
-        // Show setup toasts once the user is in at least one encrypted room.
-        const cli = MatrixClientPeg.get();
-        return cli && cli.getRooms().some(r => cli.isRoomEncrypted(r.roomId));
+        // // Show setup toasts once the user is in at least one encrypted room.
+        // const cli = MatrixClientPeg.get();
+        // return cli && cli.getRooms().some(r => cli.isRoomEncrypted(r.roomId));
+        // Show setup toasts once the user tries to view an encrypted room
+        return this.hasViewedEncryptedRoom;
     }
 
     private async recheck() {

src/SlashCommands.tsx

@@ -1010,14 +1010,14 @@ export const Commands = [
                             if (device.getFingerprint() === fingerprint) {
                                 throw newTranslatableError('Session already verified!');
                             } else {
-                                throw newTranslatableError('WARNING: Session already verified, but keys do NOT MATCH!');
+                                throw newTranslatableError('WARNING: Device already verified, but keys do NOT MATCH!');
                             }
                         }
 
                         if (device.getFingerprint() !== fingerprint) {
                             const fprint = device.getFingerprint();
                             throw newTranslatableError(
-                                'WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and session' +
+                                'WARNING: KEY VERIFICATION FAILED! The signing key for %(userId)s and device' +
                                     ' %(deviceId)s is "%(fprint)s" which does not match the provided key ' +
                                     '"%(fingerprint)s". This could mean your communications are being intercepted!',
                                 {
@@ -1038,7 +1038,7 @@ export const Commands = [
                                 <p>
                                     {
                                         _t('The signing key you provided matches the signing key you received ' +
-                                            'from %(userId)s\'s session %(deviceId)s. Session marked as verified.',
+                                            'from %(userId)s\'s device %(deviceId)s. Device marked as verified.',
                                         { userId, deviceId })
                                     }
                                 </p>

src/async-components/views/dialogs/security/CreateKeyBackupDialog.tsx

@@ -373,12 +373,12 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
         let introText;
         if (this.state.copied) {
             introText = _t(
-                "Your Security Key has been <b>copied to your clipboard</b>, paste it to:",
+                "Your recovery key has been <b>copied to your clipboard</b>, paste it to:",
                 {}, { b: s => <b>{ s }</b> },
             );
         } else if (this.state.downloaded) {
             introText = _t(
-                "Your Security Key is in your <b>Downloads</b> folder.",
+                "Your recovery key is in your <b>Downloads</b> folder.",
                 {}, { b: s => <b>{ s }</b> },
             );
         }
@@ -419,7 +419,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent<IProps, I
         return <div>
             { _t(
                 "Without setting up Secure Message Recovery, you won't be able to restore your " +
-                "encrypted message history if you log out or use another session.",
+                "encrypted message history if you log out or use another device.",
             ) }
             <DialogButtons primaryButton={_t('Set up Secure Message Recovery')}
                 onPrimaryButtonClick={this.onSetUpClick}

src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx

@@ -501,9 +501,9 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
             >
                 <div className="mx_CreateSecretStorageDialog_optionTitle">
                     <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_secureBackup" />
-                    { _t("Generate a Security Key") }
+                    { _t("Generate a secure messaging recovery key") }
                 </div>
-                <div>{ _t("We'll generate a Security Key for you to store somewhere safe, like a password manager or a safe.") }</div>
+                <div>{ _t("We'll generate a secure messaging recovery key for you to store somewhere safe, like a password manager or a safe.") }</div>
             </StyledRadioButton>
         );
     }
@@ -522,7 +522,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
                     <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_securePhrase" />
                     { _t("Enter a Security Phrase") }
                 </div>
-                <div>{ _t("Use a secret phrase only you know, and optionally save a Security Key to use for backup.") }</div>
+                <div>{ _t("Use a secret phrase only you know, and optionally save a recovery key to use for backup.") }</div>
             </StyledRadioButton>
         );
     }
@@ -586,7 +586,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
 
         return <form onSubmit={this.onMigrateFormSubmit}>
             <p>{ _t(
-                "Upgrade this session to allow it to verify other sessions, " +
+                "Upgrade this device to allow it to verify other devices, " +
                 "granting them access to encrypted messages and marking them " +
                 "as trusted for other users.",
             ) }</p>
@@ -718,7 +718,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
 
         return <div>
             <p>{ _t(
-                "Store your Security Key somewhere safe, like a password manager or a safe, " +
+                "Store your recovery key somewhere safe, like a password manager or a safe, " +
                 "as it's used to safeguard your encrypted data.",
             ) }</p>
             <div className="mx_CreateSecretStorageDialog_primaryContainer mx_CreateSecretStorageDialog_recoveryKeyPrimarycontainer">
@@ -799,7 +799,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent<IProp
             case Phase.ConfirmSkip:
                 return _t('Are you sure?');
             case Phase.ShowKey:
-                return _t('Save your Security Key');
+                return _t('Save your recovery key');
             case Phase.Storing:
                 return _t('Setting up keys');
             default:

src/async-components/views/dialogs/security/ImportE2eKeysDialog.tsx

@@ -122,13 +122,13 @@ export default class ImportE2eKeysDialog extends React.Component<IProps, IState>
         return (
             <BaseDialog className='mx_importE2eKeysDialog'
                 onFinished={this.props.onFinished}
-                title={_t("Import room keys")}
+                title={_t("Import message keys")}
             >
                 <form onSubmit={this.onFormSubmit}>
                     <div className="mx_Dialog_content">
                         <p>
                             { _t(
-                                'This process allows you to import encryption keys ' +
+                                'This process allows you to import message encryption keys ' +
                                 'that you had previously exported from another Matrix ' +
                                 'client. You will then be able to decrypt any ' +
                                 'messages that the other client could decrypt.',

src/async-components/views/dialogs/security/NewRecoveryMethodDialog.tsx

@@ -71,7 +71,7 @@ export default class NewRecoveryMethodDialog extends React.PureComponent<IProps>
             content = <div>
                 { newMethodDetected }
                 <p>{ _t(
-                    "This session is encrypting history using the new recovery method.",
+                    "This device is encrypting history using the new recovery method.",
                 ) }</p>
                 { hackWarning }
                 <DialogButtons

src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog.tsx

@@ -53,12 +53,12 @@ export default class RecoveryMethodRemovedDialog extends React.PureComponent<IPr
             >
                 <div>
                     <p>{ _t(
-                        "This session has detected that your Security Phrase and key " +
+                        "This device has detected that your Security Phrase and key " +
                         "for Secure Messages have been removed.",
                     ) }</p>
                     <p>{ _t(
-                        "If you did this accidentally, you can setup Secure Messages on " +
-                        "this session which will re-encrypt this session's message " +
+                        "If you did this accidentally, you can set up Secure Messages on " +
+                        "this device which will re-encrypt this device's message " +
                         "history with a new recovery method.",
                     ) }</p>
                     <p className="warning">{ _t(

src/components/structures/MatrixChat.tsx

@@ -91,7 +91,6 @@ import { showToast as showMobileGuideToast } from '../../toasts/MobileGuideToast
 import { shouldUseLoginForWelcome } from "../../utils/pages";
 import RoomListStore from "../../stores/room-list/RoomListStore";
 import { RoomUpdateCause } from "../../stores/room-list/models";
-import SecurityCustomisations from "../../customisations/Security";
 import Spinner from "../views/elements/Spinner";
 import QuestionDialog from "../views/dialogs/QuestionDialog";
 import UserSettingsDialog from '../views/dialogs/UserSettingsDialog';
@@ -375,18 +374,36 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             return;
         }
 
-        const crossSigningIsSetUp = cli.getStoredCrossSigningForUser(cli.getUserId());
-        if (crossSigningIsSetUp) {
-            if (SecurityCustomisations.SHOW_ENCRYPTION_SETUP_UI === false) {
-                this.onLoggedIn();
-            } else {
-                this.setStateForNewView({ view: Views.COMPLETE_SECURITY });
-            }
-        } else if (await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing")) {
-            this.setStateForNewView({ view: Views.E2E_SETUP });
-        } else {
-            this.onLoggedIn();
+        if (MatrixClientPeg.currentUserIsJustRegistered()) {
+            // auto generate a recovery key
+            const recoveryKey = await cli.createRecoveryKeyFromPassphrase();
+
+            // use grace period for auth:
+            await cli.crypto.bootstrapCrossSigning({
+                setupNewCrossSigning: true,
+                authUploadDeviceSigningKeys: async (makeRequest) => { await makeRequest(undefined); },
+            });
+
+            await cli.bootstrapSecretStorage({
+                setupNewKeyBackup: true,
+                setupNewSecretStorage: true,
+                createSecretStorageKey: () => Promise.resolve(recoveryKey),
+            });
         }
+        // const crossSigningIsSetUp = cli.getStoredCrossSigningForUser(cli.getUserId());
+        // if (crossSigningIsSetUp) {
+        //     if (SecurityCustomisations.SHOW_ENCRYPTION_SETUP_UI === false) {
+        //         this.onLoggedIn();
+        //     } else {
+        //         this.setStateForNewView({ view: Views.COMPLETE_SECURITY });
+        //     }
+        // } else if (await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing")) {
+        //     this.setStateForNewView({ view: Views.E2E_SETUP });
+        // } else {
+        //     this.onLoggedIn();
+        // }
+        this.onLoggedIn();
+
         this.setState({ pendingInitialSync: false });
     }
 
@@ -1496,7 +1513,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
             Modal.createTrackedDialog('Signed out', '', ErrorDialog, {
                 title: _t('Signed Out'),
-                description: _t('For security, this session has been signed out. Please sign in again.'),
+                description: _t('For security, this device has been signed out. Please sign in again.'),
             });
 
             dis.dispatch({

src/components/structures/RoomView.tsx

@@ -107,6 +107,7 @@ import { DoAfterSyncPreparedPayload } from '../../dispatcher/payloads/DoAfterSyn
 import FileDropTarget from './FileDropTarget';
 import Measured from '../views/elements/Measured';
 import { FocusComposerPayload } from '../../dispatcher/payloads/FocusComposerPayload';
+import DeviceListener from '../../DeviceListener';
 import { haveRendererForEvent } from "../../events/EventTileFactory";
 
 const DEBUG = false;
@@ -1139,6 +1140,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             e2eStatus = await shieldStatusForRoom(this.context, room);
         }
 
+        await DeviceListener.sharedInstance().viewingEncryptedRoom();
+
         if (this.unmounted) return;
         this.setState({ e2eStatus });
     }

src/components/structures/UserMenu.tsx

@@ -316,17 +316,12 @@ export default class UserMenu extends React.Component<IProps, IState> {
         this.setState({ contextMenuPosition: null }); // also close the menu
     };
 
-    private onSignOutClick = async (ev: ButtonEvent) => {
+    private onSignOutClick = (ev: ButtonEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
 
-        const cli = MatrixClientPeg.get();
-        if (!cli || !cli.isCryptoEnabled() || !(await cli.exportRoomKeys())?.length) {
-            // log out without user prompt if they have no local megolm sessions
-            dis.dispatch({ action: 'logout' });
-        } else {
-            Modal.createTrackedDialog('Logout from LeftPanel', '', LogoutDialog);
-        }
+        // always open dialog which will handle confirmation if needed
+        Modal.createTrackedDialog('Logout from LeftPanel', '', LogoutDialog, { noConfirm: true });
 
         this.setState({ contextMenuPosition: null }); // also close the menu
     };
@@ -439,8 +434,18 @@ export default class UserMenu extends React.Component<IProps, IState> {
                 />
                 <IconizedContextMenuOption
                     iconClassName="mx_UserMenu_iconLock"
-                    label={_t("Security & Privacy")}
-                    onClick={(e) => this.onSettingsOpen(e, UserTab.Security)}
+                    label={_t("Account")}
+                    onClick={(e) => this.onSettingsOpen(e, UserTab.Account)}
+                />
+                <IconizedContextMenuOption
+                    iconClassName="mx_UserMenu_iconLock"
+                    label={_t("Secure messaging")}
+                    onClick={(e) => this.onSettingsOpen(e, UserTab.SecureMessaging)}
+                />
+                <IconizedContextMenuOption
+                    iconClassName="mx_UserMenu_iconLock"
+                    label={_t("Privacy")}
+                    onClick={(e) => this.onSettingsOpen(e, UserTab.Privacy)}
                 />
                 <IconizedContextMenuOption
                     iconClassName="mx_UserMenu_iconSettings"

src/components/structures/auth/CompleteSecurity.tsx

@@ -69,8 +69,8 @@ export default class CompleteSecurity extends React.Component<IProps, IState> {
                 icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
                 title = _t("Unable to verify this device");
             } else {
-                icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
-                title = _t("Verify this device");
+                icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_normal" />;
+                title = _t("Secure messaging setup");
             }
         } else if (phase === Phase.Done) {
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_verified" />;
@@ -79,11 +79,11 @@ export default class CompleteSecurity extends React.Component<IProps, IState> {
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
             title = _t("Are you sure?");
         } else if (phase === Phase.Busy) {
-            icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
+            icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_normal" />;
             title = _t("Verify this device");
         } else if (phase === Phase.ConfirmReset) {
             icon = <span className="mx_CompleteSecurity_headerIcon mx_E2EIcon_warning" />;
-            title = _t("Really reset verification keys?");
+            title = _t("Are you sure?");
         } else if (phase === Phase.Finished) {
             // SetupEncryptionBody will take care of calling onFinished, we don't need to do anything
         } else {

src/components/structures/auth/ForgotPassword.tsx

@@ -180,8 +180,8 @@ export default class ForgotPassword extends React.Component<IProps, IState> {
                 <div>
                     { _t(
                         "Changing your password will reset any end-to-end encryption keys " +
-                        "on all of your sessions, making encrypted chat history unreadable. Set up " +
-                        "Key Backup or export your room keys from another session before resetting your " +
+                        "on all of your devices, making encrypted chat history unreadable. Set up " +
+                        "Key Backup or export your message keys from another device before resetting your " +
                         "password.",
                     ) }
                 </div>,