[WIP] Human Edition of Element Web prototype

package.json

@@ -49,7 +49,7 @@
     "start:all": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n build,reskindex \"yarn start:build\" \"yarn reskindex:watch\"",
     "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\"",

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/components/structures/MatrixChat.tsx

@@ -93,7 +93,6 @@ import { shouldUseLoginForWelcome } from "../../utils/pages";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 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, { UserTab } from '../views/dialogs/UserSettingsDialog';
@@ -376,18 +375,20 @@ 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();
-        }
+        // 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 });
     }
 

src/components/structures/RoomView.tsx

@@ -109,6 +109,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';
 
 const DEBUG = false;
 let debuglog = function(msg: string) {};
@@ -1140,6 +1141,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

@@ -441,8 +441,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

@@ -71,8 +71,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" />;
@@ -81,11 +81,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/SetupEncryptionBody.tsx

@@ -166,15 +166,15 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
                 return (
                     <div>
                         <p>{ _t(
-                            "It looks like you don't have a Security Key or any other devices you can " +
-                            "verify against.  This device will not be able to access old encrypted messages. " +
+                            "It looks like you don't have a recovery key or any other devices you can use to complete " +
+                            "the setup of secure messaging. As a result, this device won't be able to access past encrypted messages. " +
                             "In order to verify your identity on this device, you'll need to reset " +
-                            "your verification keys.",
+                            "secure messaging completely.",
                         ) }</p>
 
                         <div className="mx_CompleteSecurity_actionRow">
                             <AccessibleButton kind="primary" onClick={this.onResetConfirmClick}>
-                                { _t("Proceed with reset") }
+                                { _t("Reset secure messaging") }
                             </AccessibleButton>
                         </div>
                     </div>
@@ -183,9 +183,9 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
                 const store = SetupEncryptionStore.sharedInstance();
                 let recoveryKeyPrompt;
                 if (store.keyInfo && keyHasPassphrase(store.keyInfo)) {
-                    recoveryKeyPrompt = _t("Verify with Security Key or Phrase");
+                    recoveryKeyPrompt = _t("Use recovery key or passphrase");
                 } else if (store.keyInfo) {
-                    recoveryKeyPrompt = _t("Verify with Security Key");
+                    recoveryKeyPrompt = _t("Use recovery key");
                 }
 
                 let useRecoveryKeyButton;
@@ -198,22 +198,25 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
                 let verifyButton;
                 if (store.hasDevicesToVerifyAgainst) {
                     verifyButton = <AccessibleButton kind="primary" onClick={this.onVerifyClick}>
-                        { _t("Verify with another device") }
+                        { _t("Use another device") }
                     </AccessibleButton>;
                 }
 
                 return (
                     <div>
                         <p>{ _t(
-                            "Verify your identity to access encrypted messages and prove your identity to others.",
+                            "Setup secure messaging on this device to access past encrypted messages and allow others to trust it.",
+                        ) }</p>
+                        <p>{ _t(
+                            "Please select how you would like to do the setup.",
                         ) }</p>
 
                         <div className="mx_CompleteSecurity_actionRow">
                             { verifyButton }
                             { useRecoveryKeyButton }
                         </div>
                         <div className="mx_SetupEncryptionBody_reset">
-                            { _t("Forgotten or lost all recovery methods? <a>Reset all</a>", null, {
+                            { _t("Forgotten or lost all setup methods? <a>Reset secure messaging</a>", null, {
                                 a: (sub) => <button
                                     onClick={this.onResetClick}
                                     className="mx_SetupEncryptionBody_reset_link mx_Dialog_nonDialogButton">
@@ -228,12 +231,12 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
             let message;
             if (this.state.backupInfo) {
                 message = <p>{ _t(
-                    "Your new device is now verified. It has access to your " +
-                    "encrypted messages, and other users will see it as trusted.",
+                    "Secure messaging is now setup on this device and you can access your past encrypted message. " +
+                    "Others will see this device as trusted.",
                 ) }</p>;
             } else {
                 message = <p>{ _t(
-                    "Your new device is now verified. Other users will see it as trusted.",
+                    "Secure messaging is now setup on this device and others will see it as trusted.",
                 ) }</p>;
             }
             return (
@@ -254,21 +257,21 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
             return (
                 <div>
                     <p>{ _t(
-                        "Without verifying, you won't have access to all your messages " +
-                        "and may appear as untrusted to others.",
+                        "Without setting up secure messaging you won't have access to past encrypted messages. " +
+                        "This device may also appear as untrusted to others.",
                     ) }</p>
                     <div className="mx_CompleteSecurity_actionRow">
                         <AccessibleButton
                             kind="danger_outline"
                             onClick={this.onSkipConfirmClick}
                         >
-                            { _t("I'll verify later") }
+                            { _t("Setup later") }
                         </AccessibleButton>
                         <AccessibleButton
                             kind="primary"
                             onClick={this.onSkipBackClick}
                         >
-                            { _t("Go Back") }
+                            { _t("Go back") }
                         </AccessibleButton>
                     </div>
                 </div>
@@ -277,14 +280,12 @@ export default class SetupEncryptionBody extends React.Component<IProps, IState>
             return (
                 <div>
                     <p>{ _t(
-                        "Resetting your verification keys cannot be undone. After resetting, " +
-                        "you won't have access to old encrypted messages, and any friends who " +
-                        "have previously verified you will see security warnings until you " +
-                        "re-verify with them.",
+                        "By resetting secure messaging you will lose access to your past encrypted messages. " +
+                        "Also, any contact who has previously verified you will see this device as untrusted.",
                     ) }</p>
                     <p>{ _t(
-                        "Please only proceed if you're sure you've lost all of your other " +
-                        "devices and your security key.",
+                        "You should only proceed if you are certain that you cannot access your other devices and have lost " +
+                        "your recovery key.",
                     ) }</p>
 
                     <div className="mx_CompleteSecurity_actionRow">