Merge pull request #3967 from matrix-org/t3chguy/cs_verification_decoration

Right Panel Verification improvements

res/css/views/right_panel/_UserInfo.scss

@@ -264,6 +264,9 @@ limitations under the License.
         display: block;
         margin: 16px 0;
     }
+    button.mx_UserInfo_verify {
+        width: 100%; // FIXME get rid of this once we get rid of DialogButtons here
+    }
 }
 
 .mx_UserInfo.mx_UserInfo_smallAvatar {

src/components/views/right_panel/EncryptionPanel.js

@@ -36,7 +36,7 @@ const EncryptionPanel = ({verificationRequest, member, onClose}) => {
         setRequest(verificationRequest);
     }, [verificationRequest]);
 
-    const [phase, setPhase] = useState(false);
+    const [phase, setPhase] = useState(undefined);
     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)) {
@@ -71,7 +71,7 @@ const EncryptionPanel = ({verificationRequest, member, onClose}) => {
         setRequest(verificationRequest);
     }, [member.userId]);
 
-    const requested = request && phase === PHASE_REQUESTED;
+    const requested = request && (phase === PHASE_REQUESTED || phase === undefined);
     if (!request || requested) {
         return <EncryptionInfo onStartVerification={onStartVerification} member={member} pending={requested} />;
     } else {

src/components/views/right_panel/VerificationPanel.js

@@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React from "react";
+import PropTypes from "prop-types";
 
 import * as sdk from '../../../index';
 import {verificationMethods} from 'matrix-js-sdk/src/crypto';
@@ -23,6 +24,8 @@ import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {_t} from "../../../languageHandler";
 import E2EIcon from "../rooms/E2EIcon";
 import {
+    PHASE_UNSENT,
+    PHASE_REQUESTED,
     PHASE_READY,
     PHASE_DONE,
     PHASE_STARTED,
@@ -31,6 +34,20 @@ import {
 import Spinner from "../elements/Spinner";
 
 export default class VerificationPanel extends React.PureComponent {
+    static propTypes = {
+        request: PropTypes.object.isRequired,
+        member: PropTypes.object.isRequired,
+        phase: PropTypes.oneOf([
+            PHASE_UNSENT,
+            PHASE_REQUESTED,
+            PHASE_READY,
+            PHASE_STARTED,
+            PHASE_CANCELLED,
+            PHASE_DONE,
+        ]).isRequired,
+        onClose: PropTypes.func.isRequired,
+    };
+
     constructor(props) {
         super(props);
         this.state = {};
@@ -147,11 +164,11 @@ export default class VerificationPanel extends React.PureComponent {
     }
 
     render() {
-        const {member} = this.props;
+        const {member, phase} = this.props;
 
         const displayName = member.displayName || member.name || member.userId;
 
-        switch (this.props.phase) {
+        switch (phase) {
             case PHASE_READY:
                 return this.renderQRPhase();
             case PHASE_STARTED:
@@ -174,6 +191,7 @@ export default class VerificationPanel extends React.PureComponent {
             case PHASE_CANCELLED:
                 return this.renderCancelledPhase();
         }
+        console.error("VerificationPanel unhandled phase:", phase);
         return null;
     }
 

src/components/views/rooms/MemberInfo.js

@@ -1113,7 +1113,8 @@ export default createReactClass({
             }
         }
 
-        const avatarUrl = this.props.member.getMxcAvatarUrl();
+        const {member} = this.props;
+        const avatarUrl = member.avatarUrl || (member.getMxcAvatarUrl && member.getMxcAvatarUrl());
         let avatarElement;
         if (avatarUrl) {
             const httpUrl = this.context.mxcUrlToHttp(avatarUrl, 800, 800);

src/components/views/verification/VerificationShowSas.js

@@ -27,7 +27,8 @@ function capFirst(s) {
 
 export default class VerificationShowSas extends React.Component {
     static propTypes = {
-        displayName: PropTypes.string.isRequired,
+        pending: PropTypes.bool,
+        displayName: PropTypes.string, // required if pending is true
         onDone: PropTypes.func.isRequired,
         onCancel: PropTypes.func.isRequired,
         sas: PropTypes.object.isRequired,
@@ -95,7 +96,7 @@ export default class VerificationShowSas extends React.Component {
             confirm = <DialogButtons
                 primaryButton={_t("They match")}
                 onPrimaryButtonClick={this.onMatchClick}
-                primaryButtonClassName="mx_UserInfo_verify"
+                primaryButtonClass="mx_UserInfo_verify"
                 cancelButton={_t("They don't match")}
                 onCancel={this.props.onCancel}
                 cancelButtonClass="mx_UserInfo_verify"

src/settings/Settings.js

@@ -147,6 +147,7 @@ export const SETTINGS = {
         displayName: _td("Enable cross-signing to verify per-user instead of per-device (in development)"),
         supportedLevels: LEVELS_FEATURE,
         default: false,
+        controller: new ReloadOnChangeController(),
     },
     "feature_event_indexing": {
         isFeature: true,