From bbce37b92f8c1684e0427d6afa096e58e9e9061d Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 24 Apr 2020 15:39:54 +0100
Subject: [PATCH 1/2] Make icon change in SetupEncryptionDialog

Fixes https://github.com/vector-im/riot-web/issues/13368
---
 .../views/dialogs/SetupEncryptionDialog.js    | 49 ++++++++++++++++---
 1 file changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/components/views/dialogs/SetupEncryptionDialog.js b/src/components/views/dialogs/SetupEncryptionDialog.js
index f32a289a29..71b7574551 100644
--- a/src/components/views/dialogs/SetupEncryptionDialog.js
+++ b/src/components/views/dialogs/SetupEncryptionDialog.js
@@ -14,16 +14,49 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import React from 'react';
+import PropTypes from 'prop-types';
 import SetupEncryptionBody from '../../structures/auth/SetupEncryptionBody';
 import BaseDialog from './BaseDialog';
 import { _t } from '../../../languageHandler';
+import { SetupEncryptionStore, PHASE_DONE } from '../../../stores/SetupEncryptionStore';
 
-export default function SetupEncryptionDialog({onFinished}) {
-    return <BaseDialog
-        headerImage={require("../../../../res/img/e2e/warning.svg")}
-        onFinished={onFinished}
-        title={_t("Verify this session")}
-    >
-        <SetupEncryptionBody onFinished={onFinished} />
-    </BaseDialog>;
+function iconFromPhase(phase) {
+    if (phase === PHASE_DONE) {
+        return require("../../../../res/img/e2e/verified.svg");
+    } else {
+        return require("../../../../res/img/e2e/warning.svg");
+    }
+}
+
+export default class SetupEncryptionDialog extends React.Component {
+    static propTypes = {
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    constructor() {
+        super();
+
+        this.store = SetupEncryptionStore.sharedInstance();
+        this.store.on("update", this._onStoreUpdate);
+        this.state = {icon: iconFromPhase(this.store.phase)};
+    }
+
+    componentWillUnmount() {
+        this.store.removeListener("update", this._onStoreUpdate);
+    }
+
+    _onStoreUpdate = () => {
+        this.setState({icon: iconFromPhase(this.store.phase)});
+    };
+
+    render() {
+        return <BaseDialog
+            headerImage={this.state.icon}
+            onFinished={this.props.onFinished}
+            title={_t("Verify this session")}
+        >
+            <SetupEncryptionBody onFinished={this.props.onFinished} />
+        </BaseDialog>;
+    }
 }

From 6460f6303cb63644a262e16384e06888a4dd3e06 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 24 Apr 2020 17:36:02 +0100
Subject: [PATCH 2/2] Move store subscribe to didmount

---
 src/components/views/dialogs/SetupEncryptionDialog.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/views/dialogs/SetupEncryptionDialog.js b/src/components/views/dialogs/SetupEncryptionDialog.js
index 71b7574551..d7723de588 100644
--- a/src/components/views/dialogs/SetupEncryptionDialog.js
+++ b/src/components/views/dialogs/SetupEncryptionDialog.js
@@ -38,10 +38,13 @@ export default class SetupEncryptionDialog extends React.Component {
         super();
 
         this.store = SetupEncryptionStore.sharedInstance();
-        this.store.on("update", this._onStoreUpdate);
         this.state = {icon: iconFromPhase(this.store.phase)};
     }
 
+    componentDidMount() {
+        this.store.on("update", this._onStoreUpdate);
+    }
+
     componentWillUnmount() {
         this.store.removeListener("update", this._onStoreUpdate);
     }