Merge pull request #2342 from matrix-org/bwindels/topleftsignoutdialog

Redesign: confirm sign out from top left menu

src/components/structures/UserSettings.js

@@ -382,32 +382,8 @@ module.exports = React.createClass({
     },
 
     onLogoutClicked: function(ev) {
-        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-        Modal.createTrackedDialog('Logout E2E Export', '', QuestionDialog, {
-            title: _t("Sign out"),
-            description:
-                <div>
-             { _t("For security, logging out will delete any end-to-end " +
-                  "encryption keys from this browser. If you want to be able " +
-                  "to decrypt your conversation history from future Riot sessions, " +
-                  "please export your room keys for safe-keeping.") }
-                </div>,
-            button: _t("Sign out"),
-            extraButtons: [
-                <button key="export" className="mx_Dialog_primary"
-                        onClick={this._onExportE2eKeysClicked}>
-                   { _t("Export E2E room keys") }
-                </button>,
-            ],
-            onFinished: (confirmed) => {
-                if (confirmed) {
-                    dis.dispatch({action: 'logout'});
-                    if (this.props.onFinished) {
-                        this.props.onFinished();
-                    }
-                }
-            },
-        });
+        const LogoutDialog = sdk.getComponent("dialogs.LogoutDialog");
+        Modal.createTrackedDialog('Logout E2E Export', '', LogoutDialog);
     },
 
     onPasswordChangeError: function(err) {

src/components/views/context_menus/TopLeftMenu.js

@@ -17,6 +17,8 @@ limitations under the License.
 import React from 'react';
 import dis from '../../../dispatcher';
 import { _t } from '../../../languageHandler';
+import LogoutDialog from "../dialogs/LogoutDialog";
+import Modal from "../../../Modal";
 
 export class TopLeftMenu extends React.Component {
     constructor() {
@@ -42,7 +44,7 @@ export class TopLeftMenu extends React.Component {
     }
 
     signOut() {
-        dis.dispatch({action: 'logout'});
+        Modal.createTrackedDialog('Logout E2E Export', '', LogoutDialog);
         this.closeMenu();
     }
 

src/components/views/dialogs/LogoutDialog.js

@@ -0,0 +1,62 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import QuestionDialog from './QuestionDialog';
+import Modal from '../../../Modal';
+import dis from '../../../dispatcher';
+import { _t } from '../../../languageHandler';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+
+export default (props) => {
+    const description = _t("For security, logging out will delete any end-to-end " +
+                  "encryption keys from this browser. If you want to be able " +
+                  "to decrypt your conversation history from future Riot sessions, " +
+                  "please export your room keys for safe-keeping.");
+
+    const onExportE2eKeysClicked = () => {
+        Modal.createTrackedDialogAsync('Export E2E Keys', '',
+            import('../../../async-components/views/dialogs/ExportE2eKeysDialog'),
+            {
+                matrixClient: MatrixClientPeg.get(),
+            },
+        );
+    };
+
+    const onFinished = (confirmed) => {
+        if (confirmed) {
+            dis.dispatch({action: 'logout'});
+        }
+        // close dialog
+        if (props.onFinished) {
+            props.onFinished();
+        }
+    };
+
+    return (<QuestionDialog
+        hasCancelButton={true}
+        title={_t("Sign out")}
+        description={<div>{description}</div>}
+        button={_t("Sign out")}
+        extraButtons={[
+            (<button key="export" className="mx_Dialog_primary"
+                    onClick={onExportE2eKeysClicked}>
+               { _t("Export E2E room keys") }
+            </button>),
+        ]}
+        onFinished={onFinished}
+    />);
+};