From 29af8add5d5fbfa607be40e74944b64cc4e46f35 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 4 Mar 2020 16:10:06 +0100 Subject: [PATCH 1/4] only show verify button if user has uploaded cross-signing keys --- src/components/views/right_panel/UserInfo.js | 44 ++++++++++++++++---- 1 file changed, 36 insertions(+), 8 deletions(-) diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js index 44770d9ccc..f5b6548a83 100644 --- a/src/components/views/right_panel/UserInfo.js +++ b/src/components/views/right_panel/UserInfo.js @@ -136,6 +136,27 @@ function useIsEncrypted(cli, room) { return isEncrypted; } +function useHasCrossSigningKeys(cli, member, canVerify) { + const [waitingForCrossSigningKeys, setWaitingForCrossSigningKeys] = useState(false); + const [hasCrossSigningKeys, setHasCrossSigningKeys] = useState(false); + useEffect(() => { + if (canVerify) { + setWaitingForCrossSigningKeys(true); + (async () => { + try { + await cli.downloadKeys([member.userId]); + const xsi = cli.getStoredCrossSigningForUser(member.userId); + const key = xsi && xsi.getId(); + setHasCrossSigningKeys(!!key); + } finally { + setWaitingForCrossSigningKeys(false); + } + })(); + } + }, [canVerify, cli, member]); + return {waitingForCrossSigningKeys, hasCrossSigningKeys}; +} + async function verifyDevice(userId, device) { const cli = MatrixClientPeg.get(); const member = cli.getUser(userId); @@ -1324,20 +1345,27 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => { let verifyButton; const homeserverSupportsCrossSigning = useHomeserverSupportsCrossSigning(cli); - if ( - SettingsStore.isFeatureEnabled("feature_cross_signing") && - homeserverSupportsCrossSigning - ) { - const userTrust = cli.checkUserTrust(member.userId); - const userVerified = userTrust.isCrossSigningVerified(); - const isMe = member.userId === cli.getUserId(); - if (isRoomEncrypted && !userVerified && !isMe) { + const userTrust = cli.checkUserTrust(member.userId); + const userVerified = userTrust.isCrossSigningVerified(); + const isMe = member.userId === cli.getUserId(); + const canVerify = SettingsStore.isFeatureEnabled("feature_cross_signing") && + homeserverSupportsCrossSigning && + isRoomEncrypted && !userVerified && !isMe; + + const {hasCrossSigningKeys, waitingForCrossSigningKeys} = + useHasCrossSigningKeys(cli, member, canVerify); + + if (canVerify) { + if (hasCrossSigningKeys) { verifyButton = ( verifyUser(member)}> {_t("Verify")} ); + } else if (waitingForCrossSigningKeys) { + const Spinner = sdk.getComponent("elements.Spinner"); + verifyButton = ; } } From afc7273d1002fb69380299b392bd474cc2460644 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 4 Mar 2020 16:58:04 +0100 Subject: [PATCH 2/4] use pendingUpdateCount rather, so we don't show multiple spinners --- src/components/views/right_panel/UserInfo.js | 63 ++++++++++---------- 1 file changed, 32 insertions(+), 31 deletions(-) diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js index f5b6548a83..07b2248644 100644 --- a/src/components/views/right_panel/UserInfo.js +++ b/src/components/views/right_panel/UserInfo.js @@ -17,7 +17,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, {useCallback, useMemo, useState, useEffect, useContext} from 'react'; +import React, {useCallback, useMemo, useState, useEffect, useContext, useRef} from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import {Group, RoomMember, User} from 'matrix-js-sdk'; @@ -136,25 +136,28 @@ function useIsEncrypted(cli, room) { return isEncrypted; } -function useHasCrossSigningKeys(cli, member, canVerify) { - const [waitingForCrossSigningKeys, setWaitingForCrossSigningKeys] = useState(false); - const [hasCrossSigningKeys, setHasCrossSigningKeys] = useState(false); +function useHasCrossSigningKeys(cli, member, canVerify, setUpdating) { + // use a ref to setUpdating because we don't want to rerun + // the useAsyncMemo hook when it changes. + const updatingRef = useRef(); useEffect(() => { - if (canVerify) { - setWaitingForCrossSigningKeys(true); - (async () => { - try { - await cli.downloadKeys([member.userId]); - const xsi = cli.getStoredCrossSigningForUser(member.userId); - const key = xsi && xsi.getId(); - setHasCrossSigningKeys(!!key); - } finally { - setWaitingForCrossSigningKeys(false); - } - })(); + updatingRef.current = setUpdating; + }, [setUpdating]); + + return useAsyncMemo(async () => { + if (!canVerify) { + return false; } - }, [canVerify, cli, member]); - return {waitingForCrossSigningKeys, hasCrossSigningKeys}; + updatingRef.current(true); + try { + await cli.downloadKeys([member.userId]); + const xsi = cli.getStoredCrossSigningForUser(member.userId); + const key = xsi && xsi.getId(); + return !!key; + } finally { + updatingRef.current(false); + } + }, [cli, member, canVerify], false); } async function verifyDevice(userId, device) { @@ -1353,20 +1356,18 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => { homeserverSupportsCrossSigning && isRoomEncrypted && !userVerified && !isMe; - const {hasCrossSigningKeys, waitingForCrossSigningKeys} = - useHasCrossSigningKeys(cli, member, canVerify); + const setUpdating = useCallback((updating) => { + setPendingUpdateCount(pendingUpdateCount + (updating ? 1 : -1)); + }, [setPendingUpdateCount, pendingUpdateCount]); + const hasCrossSigningKeys = + useHasCrossSigningKeys(cli, member, canVerify, setUpdating ); - if (canVerify) { - if (hasCrossSigningKeys) { - verifyButton = ( - verifyUser(member)}> - {_t("Verify")} - - ); - } else if (waitingForCrossSigningKeys) { - const Spinner = sdk.getComponent("elements.Spinner"); - verifyButton = ; - } + if (canVerify && hasCrossSigningKeys) { + verifyButton = ( + verifyUser(member)}> + {_t("Verify")} + + ); } let devicesSection; From 8a964dbff0c789dc511bf8c445752ea632c1520e Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 4 Mar 2020 17:19:06 +0100 Subject: [PATCH 3/4] avoid ref by getting count in setter callback --- src/components/views/right_panel/UserInfo.js | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js index 07b2248644..e844018527 100644 --- a/src/components/views/right_panel/UserInfo.js +++ b/src/components/views/right_panel/UserInfo.js @@ -17,7 +17,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, {useCallback, useMemo, useState, useEffect, useContext, useRef} from 'react'; +import React, {useCallback, useMemo, useState, useEffect, useContext} from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import {Group, RoomMember, User} from 'matrix-js-sdk'; @@ -137,25 +137,18 @@ function useIsEncrypted(cli, room) { } function useHasCrossSigningKeys(cli, member, canVerify, setUpdating) { - // use a ref to setUpdating because we don't want to rerun - // the useAsyncMemo hook when it changes. - const updatingRef = useRef(); - useEffect(() => { - updatingRef.current = setUpdating; - }, [setUpdating]); - return useAsyncMemo(async () => { if (!canVerify) { return false; } - updatingRef.current(true); + setUpdating(true); try { await cli.downloadKeys([member.userId]); const xsi = cli.getStoredCrossSigningForUser(member.userId); const key = xsi && xsi.getId(); return !!key; } finally { - updatingRef.current(false); + setUpdating(false); } }, [cli, member, canVerify], false); } @@ -1356,9 +1349,9 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => { homeserverSupportsCrossSigning && isRoomEncrypted && !userVerified && !isMe; - const setUpdating = useCallback((updating) => { - setPendingUpdateCount(pendingUpdateCount + (updating ? 1 : -1)); - }, [setPendingUpdateCount, pendingUpdateCount]); + const setUpdating = (updating) => { + setPendingUpdateCount(count => count + (updating ? 1 : -1)); + }; const hasCrossSigningKeys = useHasCrossSigningKeys(cli, member, canVerify, setUpdating ); From a5cd0a7d5f120696277974a4e3ba64e7ce4419b5 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Thu, 5 Mar 2020 11:09:45 +0100 Subject: [PATCH 4/4] indent by 4 spaces --- src/components/views/right_panel/UserInfo.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/right_panel/UserInfo.js b/src/components/views/right_panel/UserInfo.js index e844018527..b8ba6968a4 100644 --- a/src/components/views/right_panel/UserInfo.js +++ b/src/components/views/right_panel/UserInfo.js @@ -1346,8 +1346,8 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => { const userVerified = userTrust.isCrossSigningVerified(); const isMe = member.userId === cli.getUserId(); const canVerify = SettingsStore.isFeatureEnabled("feature_cross_signing") && - homeserverSupportsCrossSigning && - isRoomEncrypted && !userVerified && !isMe; + homeserverSupportsCrossSigning && + isRoomEncrypted && !userVerified && !isMe; const setUpdating = (updating) => { setPendingUpdateCount(count => count + (updating ? 1 : -1));