feat: name check on shields (#17009)

src/script/components/VerificationBadge/VerificationBadges.tsx

@@ -17,10 +17,12 @@
  *
  */
 
-import {CSSProperties} from 'react';
+import {CSSProperties, useEffect, useMemo, useRef, useState} from 'react';
 
 import {CSSObject} from '@emotion/react';
 import {ConversationProtocol} from '@wireapp/api-client/lib/conversation';
+import {stringifyQualifiedId} from '@wireapp/core/lib/util/qualifiedIdUtil';
+import {container} from 'tsyringe';
 
 import {
   CertificateExpiredIcon,
@@ -33,12 +35,15 @@ import {
 
 import {ClientEntity} from 'src/script/client';
 import {ConversationVerificationState} from 'src/script/conversation/ConversationVerificationState';
+import {checkUserHandle} from 'src/script/conversation/ConversationVerificationStateHandler';
 import {MLSStatuses, WireIdentity} from 'src/script/E2EIdentity/E2EIdentityVerification';
 import {Conversation} from 'src/script/entity/Conversation';
 import {User} from 'src/script/entity/User';
 import {useUserIdentity} from 'src/script/hooks/useDeviceIdentities';
+import {UserState} from 'src/script/user/UserState';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 import {StringIdentifer, t} from 'Util/LocalizerUtil';
+import {waitFor} from 'Util/waitFor';
 
 type VerificationBadgeContext = 'user' | 'conversation' | 'device';
 
@@ -76,6 +81,17 @@ const useConversationVerificationState = (conversation: Conversation) => {
   return {MLS: mlsState, proteus: proteusVerificationState};
 };
 
+const useMLSStatus = ({identity, user}: {identity?: WireIdentity; user?: User}) => {
+  if (!identity || !user) {
+    return {MLSStatus: undefined};
+  }
+
+  const matchingName = identity.displayName === user.name();
+  const matchingHandle = checkUserHandle(identity, user);
+
+  return {MLSStatus: matchingName && matchingHandle ? identity.status : undefined};
+};
+
 export const UserVerificationBadges = ({
   user,
   groupId,
@@ -85,8 +101,9 @@ export const UserVerificationBadges = ({
   groupId?: string;
   isSelfUser?: boolean;
 }) => {
-  const {status: MLSStatus} = useUserIdentity(user.qualifiedId, groupId, isSelfUser);
   const {is_verified: isProteusVerified} = useKoSubscribableChildren(user, ['is_verified']);
+  const {deviceIdentities} = useUserIdentity(user.qualifiedId, groupId, isSelfUser);
+  const {MLSStatus} = useMLSStatus({identity: deviceIdentities ? deviceIdentities[0] : undefined, user});
 
   return <VerificationBadges context="user" isProteusVerified={isProteusVerified} MLSStatus={MLSStatus} />;
 };
@@ -98,7 +115,35 @@ export const DeviceVerificationBadges = ({
   device: ClientEntity;
   getIdentity?: (deviceId: string) => WireIdentity | undefined;
 }) => {
-  const MLSStatus = getIdentity?.(device.id)?.status;
+  const userState = useRef(container.resolve(UserState));
+  const identity = useMemo(() => getIdentity?.(device.id), [device, getIdentity]);
+  const [user, setUser] = useState<User | undefined>(undefined);
+
+  useEffect(() => {
+    // using active flag in combination with the cleanup to prevent race conditions
+    let active = true;
+    void loadUser();
+    return () => {
+      active = false;
+    };
+
+    async function loadUser() {
+      if (!identity) {
+        return;
+      }
+      const userEntity = await waitFor(() =>
+        userState.current
+          .users()
+          .find(user => stringifyQualifiedId(user.qualifiedId) === stringifyQualifiedId(identity.qualifiedUserId)),
+      );
+      if (!active) {
+        return;
+      }
+      setUser(userEntity);
+    }
+  }, [identity]);
+
+  const {MLSStatus} = useMLSStatus({identity, user});
 
   return (
     <VerificationBadges context="device" isProteusVerified={!!device.meta?.isVerified?.()} MLSStatus={MLSStatus} />

src/script/conversation/ConversationVerificationStateHandler/MLS/MLSStateHandler.ts

@@ -125,15 +125,6 @@ class MLSConversationVerificationStateHandler {
     await this.checkAllConversationsVerificationState();
   };
 
-  private checkUserHandle = (identity: WireIdentity, user: User): boolean => {
-    // WireIdentity handle format is "{scheme}%40{username}@{domain}"
-    // Example: wireapp://%40hans.wurst@elna.wire.link
-    const {handle: identityHandle} = identity;
-    // We only want to check the username part of the handle
-    const {username, domain} = user;
-    return identityHandle.includes(`${username()}@${domain}`);
-  };
-
   private checkAllUserCredentialsInConversation = async (
     conversation: MLSCapableConversation,
   ): Promise<{
@@ -169,7 +160,7 @@ class MLSConversationVerificationStateHandler {
         }
 
         const matchingName = identity.displayName === user.name();
-        const matchingHandle = this.checkUserHandle(identity, user);
+        const matchingHandle = checkUserHandle(identity, user);
         if (!matchingHandle || !matchingName) {
           this.logger.warn(`User identity and user entity do not match for userId: ${stringifiedQualifiedId}`);
           userVerificationState = UserVerificationState.SOME_INVALID;
@@ -237,6 +228,15 @@ class MLSConversationVerificationStateHandler {
   };
 }
 
+export const checkUserHandle = (identity: WireIdentity, user: User): boolean => {
+  // WireIdentity handle format is "{scheme}%40{username}@{domain}"
+  // Example: wireapp://%40hans.wurst@elna.wire.link
+  const {handle: identityHandle} = identity;
+  // We only want to check the username part of the handle
+  const {username, domain} = user;
+  return identityHandle.includes(`${username()}@${domain}`);
+};
+
 export const registerMLSConversationVerificationStateHandler = (
   domain: string,
   onConversationVerificationStateChange: OnConversationE2EIVerificationStateChange = () => {},