Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/olympics

res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss

@@ -37,6 +37,10 @@ limitations under the License.
         flex: 0 0 auto;
         margin-left: 30px;
     }
+
+    details .mx_AccessibleButton {
+        margin: 1em 0; // emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules
+    }
 }
 
 .mx_CreateSecretStorageDialog .mx_Dialog_title {

src/DeviceListener.js

@@ -77,8 +77,8 @@ export default class DeviceListener {
         this._recheck();
     }
 
-    _onDeviceVerificationChanged = (users) => {
+    _onDeviceVerificationChanged = (userId) => {
-        if (!users.includes(MatrixClientPeg.get().getUserId())) return;
+        if (userId !== MatrixClientPeg.get().getUserId()) return;
         this._recheck();
     }
 

src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js

@@ -480,7 +480,9 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             )}</p>
 
             <div className="mx_CreateSecretStorageDialog_passPhraseContainer">
-                <Field type="password"
+                <Field
+                    type="password"
+                    id="mx_CreateSecretStorageDialog_passPhraseField"
                     className="mx_CreateSecretStorageDialog_passPhraseField"
                     onChange={this._onPassPhraseChange}
                     onKeyPress={this._onPassPhraseKeyPress}
@@ -512,9 +514,9 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
 
             <details>
                 <summary>{_t("Advanced")}</summary>
-                <p><AccessibleButton kind='primary' onClick={this._onSkipPassPhraseClick} >
+                <AccessibleButton kind='primary' onClick={this._onSkipPassPhraseClick} >
                     {_t("Set up with a recovery key")}
-                </AccessibleButton></p>
+                </AccessibleButton>
             </details>
         </div>;
     }

src/components/views/right_panel/EncryptionPanel.js

@@ -36,7 +36,7 @@ const EncryptionPanel = ({verificationRequest, member, onClose}) => {
         setRequest(verificationRequest);
     }, [verificationRequest]);
 
-    const [phase, setPhase] = useState(request.phase);
+    const [phase, setPhase] = useState(request && request.phase);
     const changeHandler = useCallback(() => {
         // handle transitions -> cancelled for mismatches which fire a modal instead of showing a card
         if (request && request.cancelled && MISMATCHES.includes(request.cancellationCode)) {

src/components/views/right_panel/UserInfo.js

@@ -1092,22 +1092,32 @@ export const useDevices = (userId) => {
     // Listen to changes
     useEffect(() => {
         let cancel = false;
-        const onDeviceVerificationChanged = (_userId, device) => {
+        const updateDevices = async () => {
-            if (_userId === userId) {
+            const newDevices = await cli.getStoredDevicesForUser(userId);
-                // no need to re-download the whole thing; just update our copy of the list.
+            if (cancel) return;
-
+            setDevices(newDevices);
-                // Promise.resolve to handle transition from static result to promise; can be removed in future
-                Promise.resolve(cli.getStoredDevicesForUser(userId)).then((devices) => {
-                    if (cancel) return;
-                    setDevices(devices);
-                });
-            }
         };
+        const onDevicesUpdated = (users) => {
+            if (!users.includes(userId)) return;
+            updateDevices();
+        };
+        const onDeviceVerificationChanged = (_userId, device) => {
+            if (_userId !== userId) return;
+            updateDevices();
+        };
+        const onUserTrustStatusChanged = (_userId, trustStatus) => {
+            if (_userId !== userId) return;
+            updateDevices();
+        };
+        cli.on("crypto.devicesUpdated", onDevicesUpdated);
         cli.on("deviceVerificationChanged", onDeviceVerificationChanged);
+        cli.on("userTrustStatusChanged", onUserTrustStatusChanged);
         // Handle being unmounted
         return () => {
             cancel = true;
+            cli.removeListener("crypto.devicesUpdated", onDevicesUpdated);
             cli.removeListener("deviceVerificationChanged", onDeviceVerificationChanged);
+            cli.removeListener("userTrustStatusChanged", onUserTrustStatusChanged);
         };
     }, [cli, userId]);