wait until cross-signing keys are fetched to show verify button

This commit is contained in:
Bruno Windels 2020-04-21 18:36:15 +02:00
parent 02ed921d57
commit b8dd68dda2

View file

@ -142,7 +142,7 @@ function useIsEncrypted(cli, room) {
function useHasCrossSigningKeys(cli, member, canVerify, setUpdating) { function useHasCrossSigningKeys(cli, member, canVerify, setUpdating) {
return useAsyncMemo(async () => { return useAsyncMemo(async () => {
if (!canVerify) { if (!canVerify) {
return false; return undefined;
} }
setUpdating(true); setUpdating(true);
try { try {
@ -153,7 +153,7 @@ function useHasCrossSigningKeys(cli, member, canVerify, setUpdating) {
} finally { } finally {
setUpdating(false); setUpdating(false);
} }
}, [cli, member, canVerify], false); }, [cli, member, canVerify], undefined);
} }
function DeviceItem({userId, device}) { function DeviceItem({userId, device}) {
@ -1307,19 +1307,28 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
const hasCrossSigningKeys = const hasCrossSigningKeys =
useHasCrossSigningKeys(cli, member, canVerify, setUpdating ); useHasCrossSigningKeys(cli, member, canVerify, setUpdating );
const showDeviceListSpinner = devices === undefined;
if (canVerify) { if (canVerify) {
// Note: mx_UserInfo_verifyButton is for the end-to-end tests if (hasCrossSigningKeys !== undefined) {
verifyButton = ( // Note: mx_UserInfo_verifyButton is for the end-to-end tests
<AccessibleButton className="mx_UserInfo_field mx_UserInfo_verifyButton" onClick={() => { verifyButton = (
if (hasCrossSigningKeys) { <AccessibleButton className="mx_UserInfo_field mx_UserInfo_verifyButton" onClick={() => {
verifyUser(member); if (hasCrossSigningKeys) {
} else { verifyUser(member);
legacyVerifyUser(member); } else {
} legacyVerifyUser(member);
}}> }
{_t("Verify")} }}>
</AccessibleButton> {_t("Verify")}
); </AccessibleButton>
);
} else if (!showDeviceListSpinner) {
// HACK: only show a spinner if the device section spinner is not shown,
// to avoid showing a double spinner
// We should ask for a design that includes all the different loading states here
const Spinner = sdk.getComponent('elements.Spinner');
verifyButton = <Spinner />;
}
} }
const securitySection = ( const securitySection = (
@ -1328,7 +1337,7 @@ const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
<p>{ text }</p> <p>{ text }</p>
{ verifyButton } { verifyButton }
<DevicesSection <DevicesSection
loading={devices === undefined} loading={showDeviceListSpinner}
devices={devices} devices={devices}
userId={member.userId} /> userId={member.userId} />
</div> </div>