add linking of a device to the Registration logic

js/background.js

@@ -374,7 +374,10 @@
     if (Whisper.Import.isIncomplete()) {
       window.log.info('Import was interrupted, showing import error screen');
       appView.openImporter();
-    } else if (Whisper.Registration.isDone()) {
+    } else if (
+      Whisper.Registration.isDone() &&
+      !window.textsecure.storage.user.isSignInByLinking()
+    ) {
       connect();
       appView.openInbox({
         initialLoadComplete,

package.json

@@ -15,7 +15,7 @@
   "main": "main.js",
   "scripts": {
     "prepare": "patch-package",
-    "postinstall": "husky install",
+    "postinstall": "yarn custom-react-mentions-build && electron-builder install-app-deps && rimraf node_modules/dtrace-provider && husky install",
     "custom-react-mentions-build": "cd node_modules/react-mentions && yarn install --node_modules=../node_modules && yarn build && rimraf node_modules/react node_modules/react-dom && cd ..",
     "start": "cross-env NODE_APP_INSTANCE=$MULTI electron .",
     "start-prod": "cross-env NODE_ENV=production NODE_APP_INSTANCE=devprod$MULTI electron .",

ts/components/session/SessionRegistrationView.tsx

@@ -1,39 +1,45 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { AccentText } from './AccentText';
 
 import { RegistrationTabs } from './registration/RegistrationTabs';
 import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
 import { SessionToastContainer } from './SessionToastContainer';
 import { lightTheme, SessionTheme } from '../../state/ducks/SessionTheme';
+import { setSignInByLinking } from '../../session/utils/User';
 
-export const SessionRegistrationView = () => (
-  <SessionTheme theme={lightTheme}>
-    <div className="session-content">
-      <SessionToastContainer theme={lightTheme} />
-      <div id="error" className="collapse" />
-      <div className="session-content-header">
-        <div className="session-content-close-button">
-          <SessionIconButton
-            iconSize={SessionIconSize.Medium}
-            iconType={SessionIconType.Exit}
-            onClick={() => {
-              window.close();
-            }}
-            theme={lightTheme}
-          />
+export const SessionRegistrationView = () => {
+  useEffect(() => {
+    setSignInByLinking(false);
+  }, []);
+  return (
+    <SessionTheme theme={lightTheme}>
+      <div className="session-content">
+        <SessionToastContainer theme={lightTheme} />
+        <div id="error" className="collapse" />
+        <div className="session-content-header">
+          <div className="session-content-close-button">
+            <SessionIconButton
+              iconSize={SessionIconSize.Medium}
+              iconType={SessionIconType.Exit}
+              onClick={() => {
+                window.close();
+              }}
+              theme={lightTheme}
+            />
+          </div>
+          <div className="session-content-session-button">
+            <img alt="brand" src="./images/session/brand.svg" />
+          </div>
         </div>
-        <div className="session-content-session-button">
-          <img alt="brand" src="./images/session/brand.svg" />
+        <div className="session-content-body">
+          <div className="session-content-accent">
+            <AccentText />
+          </div>
+          <div className="session-content-registration">
+            <RegistrationTabs theme={lightTheme} />
+          </div>
         </div>
       </div>
-      <div className="session-content-body">
-        <div className="session-content-accent">
-          <AccentText />
-        </div>
-        <div className="session-content-registration">
-          <RegistrationTabs theme={lightTheme} />
-        </div>
-      </div>
-    </div>
-  </SessionTheme>
-);
+    </SessionTheme>
+  );
+};

ts/components/session/registration/RegistrationTabs.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 
-import { StringUtils, ToastUtils, UserUtils } from '../../../session/utils';
+import {
+  PromiseUtils,
+  StringUtils,
+  ToastUtils,
+  UserUtils,
+} from '../../../session/utils';
 import { ConversationController } from '../../../session/conversations';
 import { removeAll } from '../../../data/data';
 import { SignUpTab } from './SignUpTab';
@@ -140,6 +145,8 @@ export async function signUp(signUpDetails: {
     await UserUtils.setLastProfileUpdateTimestamp(Date.now());
     trigger('openInbox');
   } catch (e) {
+    await resetRegistration();
+
     ToastUtils.pushToastError(
       'registrationError',
       `Error: ${e.message || 'Something went wrong'}`
@@ -188,6 +195,7 @@ export async function signInWithRecovery(signInDetails: {
     );
     trigger('openInbox');
   } catch (e) {
+    await resetRegistration();
     ToastUtils.pushToastError(
       'registrationError',
       `Error: ${e.message || 'Something went wrong'}`
@@ -211,10 +219,37 @@ export async function signInWithLinking(signInDetails: {
     await resetRegistration();
     await window.setPassword(password);
     await AccountManager.signInByLinkingDevice(userRecoveryPhrase, 'english');
+
+    let displayNameFromNetwork = '';
+
+    await PromiseUtils.waitForTask(done => {
+      window.Whisper.events.on(
+        'configurationMessageReceived',
+        (displayName: string) => {
+          window.Whisper.events.off('configurationMessageReceived');
+          UserUtils.setSignInByLinking(false);
+          done(displayName);
+
+          displayNameFromNetwork = displayName;
+        }
+      );
+    }, 30000);
+    if (displayNameFromNetwork.length) {
+      // display name, avatars, groups and contacts should already be handled when this event was triggered.
+      window.log.info('We got a displayName from network: ');
+    } else {
+      window.log.info(
+        'Got a config message from network but without a displayName...'
+      );
+      throw new Error(
+        'Got a config message from network but without a displayName...'
+      );
+    }
     // Do not set the lastProfileUpdateTimestamp.
     // We expect to get a display name from a configuration message while we are loading messages of this user
     trigger('openInbox');
   } catch (e) {
+    await resetRegistration();
     ToastUtils.pushToastError(
       'registrationError',
       `Error: ${e.message || 'Something went wrong'}`

ts/components/session/registration/SignInTab.tsx

@@ -1,10 +1,16 @@
 import React, { useState } from 'react';
+import { Flex } from '../Flex';
 import {
   SessionButton,
   SessionButtonColor,
   SessionButtonType,
 } from '../SessionButton';
-import { signInWithRecovery, validatePassword } from './RegistrationTabs';
+import { SessionSpinner } from '../SessionSpinner';
+import {
+  signInWithLinking,
+  signInWithRecovery,
+  validatePassword,
+} from './RegistrationTabs';
 import { RegistrationUserDetails } from './RegistrationUserDetails';
 import { TermsAndConditions } from './TermsAndConditions';
 
@@ -16,8 +22,6 @@ export enum SignInMode {
 // tslint:disable: use-simple-attributes
 // tslint:disable: react-unused-props-and-state
 
-export interface Props {}
-
 const LinkDeviceButton = (props: { onLinkDeviceButtonClicked: () => any }) => {
   return (
     <SessionButton
@@ -94,7 +98,7 @@ const SignInButtons = (props: {
   );
 };
 
-export const SignInTab = (props: Props) => {
+export const SignInTab = () => {
   const [signInMode, setSignInMode] = useState(SignInMode.Default);
   const [recoveryPhrase, setRecoveryPhrase] = useState('');
   const [recoveryPhraseError, setRecoveryPhraseError] = useState(
@@ -106,6 +110,7 @@ export const SignInTab = (props: Props) => {
   const [passwordVerify, setPasswordVerify] = useState('');
   const [passwordErrorString, setPasswordErrorString] = useState('');
   const [passwordFieldsMatch, setPasswordFieldsMatch] = useState(false);
+  const [loading, setIsLoading] = useState(false);
 
   const isRecovery = signInMode === SignInMode.UsingRecoveryPhrase;
   const isLinking = signInMode === SignInMode.LinkDevice;
@@ -126,7 +131,8 @@ export const SignInTab = (props: Props) => {
   // Seed is mandatory no matter which mode
   const seedOK = recoveryPhrase && !recoveryPhraseError;
 
-  const activateContinueButton = seedOK && displayNameOK && passwordsOK;
+  const activateContinueButton =
+    seedOK && displayNameOK && passwordsOK && !loading;
 
   return (
     <div className="session-registration__content">
@@ -178,11 +184,13 @@ export const SignInTab = (props: Props) => {
           setSignInMode(SignInMode.UsingRecoveryPhrase);
           setRecoveryPhrase('');
           setDisplayName('');
+          setIsLoading(false);
         }}
         onLinkDeviceButtonClicked={() => {
           setSignInMode(SignInMode.LinkDevice);
           setRecoveryPhrase('');
           setDisplayName('');
+          setIsLoading(false);
         }}
       />
       <SignInContinueButton
@@ -196,15 +204,20 @@ export const SignInTab = (props: Props) => {
               verifyPassword: passwordVerify,
             });
           } else if (isLinking) {
+            setIsLoading(true);
             await signInWithLinking({
               userRecoveryPhrase: recoveryPhrase,
               password,
               verifyPassword: passwordVerify,
             });
+            setIsLoading(false);
           }
         }}
         disabled={!activateContinueButton}
       />
+      <Flex container={true} justifyContent="center">
+        <SessionSpinner loading={loading} />
+      </Flex>
       {showTermsAndConditions && <TermsAndConditions />}
     </div>
   );

ts/receiver/contentMessage.ts

@@ -21,6 +21,8 @@ import { handleNewClosedGroup } from './closedGroups';
 import { KeyPairRequestManager } from './keyPairRequestManager';
 import { requestEncryptionKeyPair } from '../session/group';
 import { ConfigurationMessage } from '../session/messages/outgoing/content/ConfigurationMessage';
+import { configurationMessageReceived, trigger } from '../shims/events';
+import _ from 'lodash';
 
 export async function handleContentMessage(envelope: EnvelopePlus) {
   try {
@@ -413,7 +415,8 @@ export async function innerHandleContentMessage(
 
     // Be sure to check for the UserUtils.isSignInByLinking() if you add another if here
     if (content.configurationMessage) {
-      await handleConfigurationMessage(
+      // this one can be quite long (downloads profilePictures and everything, is do not block)
+      void handleConfigurationMessage(
         envelope,
         content.configurationMessage as SignalService.ConfigurationMessage
       );
@@ -536,7 +539,7 @@ async function handleOurProfileUpdate(
   ourPubkey: string
 ) {
   const latestProfileUpdateTimestamp = UserUtils.getLastProfileUpdateTimestamp();
-  if (latestProfileUpdateTimestamp && sentAt > latestProfileUpdateTimestamp) {
+  if (!latestProfileUpdateTimestamp || sentAt > latestProfileUpdateTimestamp) {
     window?.log?.info(
       `Handling our profileUdpate ourLastUpdate:${latestProfileUpdateTimestamp}, envelope sent at: ${sentAt}`
     );
@@ -558,6 +561,8 @@ async function handleOurProfileUpdate(
       profilePicture,
     };
     await updateProfile(ourConversation, lokiProfile, profileKey);
+    UserUtils.setLastProfileUpdateTimestamp(_.toNumber(sentAt));
+    trigger(configurationMessageReceived, displayName);
   }
 }
 
@@ -625,6 +630,30 @@ async function handleGroupsAndContactsFromConfigMessage(
       void OpenGroup.join(current);
     }
   }
+  if (configMessage.contacts?.length) {
+    await Promise.all(
+      configMessage.contacts.map(async c => {
+        try {
+          if (!c.publicKey) {
+            return;
+          }
+          const contactConvo = await ConversationController.getInstance().getOrCreateAndWait(
+            toHex(c.publicKey),
+            'private'
+          );
+          const profile = {
+            displayName: c.name,
+            profilePictre: c.profilePicture,
+          };
+          await updateProfile(contactConvo, profile, c.profileKey);
+        } catch (e) {
+          window?.log?.warn(
+            'failed to handle  a new closed group from configuration message'
+          );
+        }
+      })
+    );
+  }
 }
 
 export async function handleConfigurationMessage(
@@ -648,6 +677,7 @@ export async function handleConfigurationMessage(
     configurationMessage,
     ourPubkey
   );
+
   await handleGroupsAndContactsFromConfigMessage(
     envelope,
     configurationMessage

ts/session/conversations/index.ts

@@ -10,6 +10,7 @@ import {
   ConversationModel,
 } from '../../models/conversation';
 import { BlockedNumberController } from '../../util';
+import { PubKey } from '../types';
 
 // It's not only data from the db which is stored on the MessageController entries, we could fetch this again. What we cannot fetch from the db and which is stored here is all listeners a particular messages is linked to for instance. We will be able to get rid of this once we don't use backbone models at all
 export class ConversationController {
@@ -169,7 +170,7 @@ export class ConversationController {
   }
 
   public async getOrCreateAndWait(
-    id: any,
+    id: string | PubKey,
     type: 'private' | 'group'
   ): Promise<ConversationModel> {
     const initialPromise =
@@ -182,7 +183,7 @@ export class ConversationController {
           new Error('getOrCreateAndWait: invalid id passed.')
         );
       }
-      const pubkey = id && id.key ? id.key : id;
+      const pubkey = id && (id as any).key ? (id as any).key : id;
       const conversation = this.getOrCreate(pubkey, type);
 
       if (conversation) {

ts/shims/events.ts

@@ -2,3 +2,5 @@ export function trigger(name: string, param1?: any, param2?: any) {
   // @ts-ignore
   window.Whisper.events.trigger(name, param1, param2);
 }
+
+export const configurationMessageReceived = 'configurationMessageReceived';

ts/util/accountManager.ts

@@ -107,7 +107,7 @@ export class AccountManager {
     const pubKeyString = toHex(identityKeyPair.pubKey);
 
     // await for the first configuration message to come in.
-    await AccountManager.registrationDone(pubKeyString, profileName);
+    await AccountManager.registrationDone(pubKeyString, '');
   }
   /**
    * This is a signup. User has no recovery and does not try to link a device
@@ -216,7 +216,6 @@ export class AccountManager {
       ourPrimary: window.textsecure.storage.get('primaryDevicePubKey'),
     };
     trigger('userChanged', user);
-
     window.Whisper.Registration.markDone();
     window.log.info('dispatching registration event');
     trigger('registration_done');