diff --git a/_locales/en/messages.json b/_locales/en/messages.json index a650828b3..cb18d4063 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -222,7 +222,7 @@ "description": "Message shown if the import went wrong; first paragraph" }, "importErrorSecond": { - "message": "If these steps don't work for you, please submit a debug log (View -> Debug Log) so that we can help you get migrated!", + "message": "If these steps don't work for you, please submit a debug log (View 🠖 Debug Log) so that we can help you get migrated!", "description": "Message shown if the import went wrong; second paragraph" }, "importAgain": { @@ -872,7 +872,7 @@ "message": "Device linking request received." }, "devicePairingRequestReceivedNoListenerDescription": { - "message": "Device linking request received but you are not on the device linking screen. \nFirst go to Settings -> Device -> Link New Device." + "message": "Device linking request received but you are not on the device linking screen. \nGo to Settings 🠖 Device 🠖 Link New Device." }, "waitingForDeviceToRegister": { "message": "Waiting for device to register..." @@ -2379,11 +2379,23 @@ "verifyPassword": { "message": "Verify Password" }, - "devicePairingHeader": { - "message": "1. Open Session on your other device.
2. Navigate to the Linked Devices section in your user account screen.
3. Select 'Link a Device' to prepare your other device for pairing
4. Enter your Session ID below to link this device to your Session ID." + "devicePairingHeaderReassure": { + "message": "Linking may take up to one minute to register on your primary device. Please be patient." + }, + "devicePairingHeader_Step1": { + "message": "Open Session on your other device." + }, + "devicePairingHeader_Step2": { + "message": "Navigate to the Devices section in your user account screen." + }, + "devicePairingHeader_Step3": { + "message": "Select Link New Device to prepare your other device for pairing." + }, + "devicePairingHeader_Step4": { + "message": "Enter your Session ID below to link this device to your Session ID." }, "enterSessionIDHere": { - "message": "Enter other device’s Session ID here" + "message": "Enter your Session ID here" }, "continueYourSession": { "message": "Continue Your Session" diff --git a/js/background.js b/js/background.js index 69dea0a57..85b311577 100644 --- a/js/background.js +++ b/js/background.js @@ -1390,7 +1390,7 @@ title, description, type, - id: 'pairingRequestNoListener', + id: 'pairingRequestReceived', shouldFade: false, }); }); diff --git a/stylesheets/_session_signin.scss b/stylesheets/_session_signin.scss index 65f0eed86..d56891c94 100644 --- a/stylesheets/_session_signin.scss +++ b/stylesheets/_session_signin.scss @@ -75,6 +75,20 @@ &__content { width: 100%; padding-top: 20px; + + &__secret-words { + display: flex; + flex-direction: column; + align-items: center; + background-color: $session-shade-6; + padding: $session-margin-sm $session-margin-lg; + border-radius: 8px; + margin-bottom: $session-margin-md; + + label { + margin-bottom: 5px; + } + } } &__sections { @@ -228,11 +242,17 @@ &-description-long, &-signin-device-pairing-header { padding-top: 10px; - padding-bottom: 10px; + padding-bottom: 20px; color: $session-color-light-grey; text-align: center; font-size: 12px; line-height: 20px; + + ol { + margin-left: 20px; + padding: 0px; + text-align: justify; + } } &-id-editable { diff --git a/ts/components/session/RegistrationTabs.tsx b/ts/components/session/RegistrationTabs.tsx index a024f02fb..140e96286 100644 --- a/ts/components/session/RegistrationTabs.tsx +++ b/ts/components/session/RegistrationTabs.tsx @@ -34,6 +34,7 @@ interface State { selectedTab: TabType; signInMode: SignInMode; signUpMode: SignUpMode; + secretWords: string | undefined; displayName: string; password: string; validatePassword: string; @@ -109,6 +110,7 @@ export class RegistrationTabs extends React.Component<{}, State> { selectedTab: TabType.Create, signInMode: SignInMode.Default, signUpMode: SignUpMode.Default, + secretWords: undefined, displayName: '', password: '', validatePassword: '', @@ -418,10 +420,34 @@ export class RegistrationTabs extends React.Component<{}, State> { return (
- + {this.state.loading ? ( +

{window.i18n('devicePairingHeaderReassure')}

+ ) : ( +
    +
  1. + +
    2. +
  2. + +
    3. +
  3. + +
    4. +
  4. + +
    5. +
+ )}
- {this.renderEnterSessionID(true)} - + {this.renderEnterSessionID(!this.state.loading)} + {this.state.secretWords && ( +
+ +
{this.state.secretWords}
+
+ )} + +
); } @@ -582,28 +608,36 @@ export class RegistrationTabs extends React.Component<{}, State> { password, } = this.state; + const shouldRenderCancel = this.state.signInMode === SignInMode.LinkingDevice && this.state.loading && !!this.state.secretWords; + let enableContinue = true; let text = window.i18n('continueYourSession'); - const displayNameOK = !displayNameError && !!displayName; //display name required - const mnemonicOK = !mnemonicError && !!mnemonicSeed; //Mnemonic required + const displayNameOK = !displayNameError && !!displayName; // Display name required + const mnemonicOK = !mnemonicError && !!mnemonicSeed; // Mnemonic required const passwordsOK = !password || (!passwordErrorString && passwordFieldsMatch); // password is valid if empty, or if no error and fields are matching if (signInMode === SignInMode.UsingSeed) { enableContinue = displayNameOK && mnemonicOK && passwordsOK; } else if (signInMode === SignInMode.LinkingDevice) { - enableContinue = !!primaryDevicePubKey; - text = window.i18n('linkDevice'); + enableContinue = true; + text = window.i18n(shouldRenderCancel ? 'cancel' : 'linkDevice'); } else if (signUpMode === SignUpMode.EnterDetails) { enableContinue = displayNameOK && passwordsOK; } + const onClick = () => { + shouldRenderCancel + ? this.cancelSecondaryDevice() + : this.handleContinueYourSessionClick(); + }; + + const buttonColor = shouldRenderCancel ? SessionButtonColor.White : SessionButtonColor.Green; + return ( { - this.handleContinueYourSessionClick(); - }} + onClick={onClick} buttonType={SessionButtonType.Brand} - buttonColor={SessionButtonColor.Green} + buttonColor={buttonColor} text={text} disabled={!enableContinue} /> @@ -719,6 +753,11 @@ export class RegistrationTabs extends React.Component<{}, State> { window.ConversationController.reset(); await window.ConversationController.load(); window.Whisper.RotateSignedPreKeyListener.stop(window.Whisper.events); + + this.setState({ + loading: false, + secretWords: undefined, + }); } private async register(language: string) { @@ -892,14 +931,8 @@ export class RegistrationTabs extends React.Component<{}, State> { await this.accountManager.requestPairing(primaryPubKey); const pubkey = window.textsecure.storage.user.getNumber(); - const words = window.mnemonic.pubkey_to_secret_words(pubkey); - // window.console.log(`Here is your secret:\n${words}`); - window.pushToast({ - title: `${window.i18n('secretPrompt')}`, - description: words, - id: 'yourSecret', - shouldFade: false, - }); + const secretWords = window.mnemonic.pubkey_to_secret_words(pubkey); + this.setState({secretWords}); } catch (e) { window.console.log(e); await this.resetRegistration();