Merge branch 'develop' into travis/react-warnings/3-componentCannotDidMount

src/components/views/dialogs/ConfirmUserActionDialog.js

@@ -55,7 +55,8 @@ export default createReactClass({
         askReason: false,
     }),
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount: function() {
         this._reasonField = null;
     },
 

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -279,6 +279,7 @@ export default class DeviceVerifyDialog extends React.Component {
             onDone={this._onSasMatchesClick}
             isSelf={MatrixClientPeg.get().getUserId() === this.props.userId}
             onStartEmoji={this._onUseSasClick}
+            inDialog={true}
         />;
     }
 

src/components/views/dialogs/IncomingSasDialog.js

@@ -196,7 +196,8 @@ export default class IncomingSasDialog extends React.Component {
             sas={this._showSasEvent.sas}
             onCancel={this._onCancelClick}
             onDone={this._onSasMatchesClick}
-            isSelf={this.props.verifier.userId == MatrixClientPeg.get().getUserId()}
+            isSelf={this.props.verifier.userId === MatrixClientPeg.get().getUserId()}
+            inDialog={true}
         />;
     }
 

src/components/views/dialogs/InteractiveAuthDialog.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+Copyright 2020 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.
@@ -23,6 +24,7 @@ import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 import AccessibleButton from '../elements/AccessibleButton';
+import {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
 
 export default createReactClass({
     displayName: 'InteractiveAuthDialog',
@@ -44,12 +46,36 @@ export default createReactClass({
 
         onFinished: PropTypes.func.isRequired,
 
+        // Optional title and body to show when not showing a particular stage
         title: PropTypes.string,
+        body: PropTypes.string,
+
+        // Optional title and body pairs for particular stages and phases within
+        // those stages. Object structure/example is:
+        // {
+        //     "org.example.stage_type": {
+        //         1: {
+        //             "body": "This is a body for phase 1" of org.example.stage_type,
+        //             "title": "Title for phase 1 of org.example.stage_type"
+        //         },
+        //         2: {
+        //             "body": "This is a body for phase 2 of org.example.stage_type",
+        //             "title": "Title for phase 2 of org.example.stage_type"
+        //             "continueText": "Confirm identity with Example Auth",
+        //             "continueKind": "danger"
+        //         }
+        //     }
+        // }
+        aestheticsForStagePhases: PropTypes.object,
     },
 
     getInitialState: function() {
         return {
             authError: null,
+
+            // See _onUpdateStagePhase()
+            uiaStage: null,
+            uiaStagePhase: null,
         };
     },
 
@@ -57,12 +83,21 @@ export default createReactClass({
         if (success) {
             this.props.onFinished(true, result);
         } else {
-            this.setState({
-                authError: result,
-            });
+            if (result === ERROR_USER_CANCELLED) {
+                this.props.onFinished(false, null);
+            } else {
+                this.setState({
+                    authError: result,
+                });
+            }
         }
     },
 
+    _onUpdateStagePhase: function(newStage, newPhase) {
+        // We copy the stage and stage phase params into state for title selection in render()
+        this.setState({uiaStage: newStage, uiaStagePhase: newPhase});
+    },
+
     _onDismissClick: function() {
         this.props.onFinished(false);
     },
@@ -71,6 +106,23 @@ export default createReactClass({
         const InteractiveAuth = sdk.getComponent("structures.InteractiveAuth");
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
+        // Let's pick a title, body, and other params text that we'll show to the user. The order
+        // is most specific first, so stagePhase > our props > defaults.
+
+        let title = this.state.authError ? 'Error' : (this.props.title || _t('Authentication'));
+        let body = this.state.authError ? null : this.props.body;
+        let continueText = null;
+        let continueKind = null;
+        if (!this.state.authError && this.props.aestheticsForStagePhases) {
+            if (this.props.aestheticsForStagePhases[this.state.uiaStage]) {
+                const aesthetics = this.props.aestheticsForStagePhases[this.state.uiaStage][this.state.uiaStagePhase];
+                if (aesthetics && aesthetics.title) title = aesthetics.title;
+                if (aesthetics && aesthetics.body) body = aesthetics.body;
+                if (aesthetics && aesthetics.continueText) continueText = aesthetics.continueText;
+                if (aesthetics && aesthetics.continueKind) continueKind = aesthetics.continueKind;
+            }
+        }
+
         let content;
         if (this.state.authError) {
             content = (
@@ -88,11 +140,16 @@ export default createReactClass({
         } else {
             content = (
                 <div id='mx_Dialog_content'>
-                    <InteractiveAuth ref={this._collectInteractiveAuth}
+                    {body}
+                    <InteractiveAuth
+                        ref={this._collectInteractiveAuth}
                         matrixClient={this.props.matrixClient}
                         authData={this.props.authData}
                         makeRequest={this.props.makeRequest}
                         onAuthFinished={this._onAuthFinished}
+                        onStagePhaseChange={this._onUpdateStagePhase}
+                        continueText={continueText}
+                        continueKind={continueKind}
                     />
                 </div>
             );
@@ -101,7 +158,7 @@ export default createReactClass({
         return (
             <BaseDialog className="mx_InteractiveAuthDialog"
                 onFinished={this.props.onFinished}
-                title={this.state.authError ? 'Error' : (this.props.title || _t('Authentication'))}
+                title={title}
                 contentId='mx_Dialog_content'
             >
                 { content }

src/components/views/dialogs/RoomSettingsDialog.js

@@ -36,12 +36,12 @@ export default class RoomSettingsDialog extends React.Component {
         onFinished: PropTypes.func.isRequired,
     };
 
-    componentWillMount() {
+    componentDidMount() {
         this._dispatcherRef = dis.register(this._onAction);
     }
 
     componentWillUnmount() {
-        dis.unregister(this._dispatcherRef);
+        if (this._dispatcherRef) dis.unregister(this._dispatcherRef);
     }
 
     _onAction = (payload) => {

src/components/views/dialogs/RoomUpgradeDialog.js

@@ -30,7 +30,7 @@ export default createReactClass({
         onFinished: PropTypes.func.isRequired,
     },
 
-    componentWillMount: async function() {
+    componentDidMount: async function() {
         const recommended = await this.props.room.getRecommendedVersion();
         this._targetVersion = recommended.version;
         this.setState({busy: false});

src/components/views/dialogs/SetPasswordDialog.js

@@ -75,8 +75,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
-        console.info('SetPasswordDialog component will mount');
+    componentDidMount: function() {
+        console.info('SetPasswordDialog component did mount');
     },
 
     _onPasswordChanged: function(res) {

src/components/views/dialogs/ShareDialog.js

@@ -121,7 +121,7 @@ export default class ShareDialog extends React.Component {
         });
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (this.props.target instanceof Room) {
             const permalinkCreator = new RoomPermalinkCreator(this.props.target);
             permalinkCreator.load();

src/components/views/dialogs/UnknownDeviceDialog.js

@@ -87,7 +87,7 @@ export default createReactClass({
         onSend: PropTypes.func.isRequired,
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         MatrixClientPeg.get().on("deviceVerificationChanged", this._onDeviceVerificationChanged);
     },
 

src/components/views/dialogs/VerificationRequestDialog.js

@@ -48,6 +48,7 @@ export default class VerificationRequestDialog extends React.Component {
                 verificationRequestPromise={this.props.verificationRequestPromise}
                 onClose={this.props.onFinished}
                 member={member}
+                inDialog={true}
             />
         </BaseDialog>;
     }