+ {this.renderRegistrationContent()}
+
+ {this.renderSignInButtons()}
+ {this.getRenderTermsConditionAgreement()}
+
+ );
+ }
+
+ private renderRegistrationContent() {
+ const { signInMode, signUpMode } = this.state;
+
+ if (signInMode === SignInMode.UsingSeed) {
+ return (
+ {
+ if (contentEditable) {
+ this.onSecondDeviceSessionIDChanged(e);
+ }
+ }}
+ />
+ );
+ }
+
+ private onSecondDeviceSessionIDChanged(e: any) {
+ e.preventDefault();
+ const hexEncodedPubKey = e.target.innerHTML;
+ this.setState({
+ primaryDevicePubKey: hexEncodedPubKey,
+ });
+ }
+
+ private renderSignInButtons() {
+ const { signInMode } = this.state;
+
+ const or = window.i18n('or');
+
+ if (signInMode === SignInMode.Default) {
+ return (
+
+ {this.renderRestoreUsingSeedButton(
+ SessionButtonType.BrandOutline,
+ SessionButtonColor.Green
+ )}
+
{or}
+ {this.renderLinkDeviceToExistingAccountButton()}
+
+ );
+ }
+
+ if (signInMode === SignInMode.LinkingDevice) {
+ return (
+
+ {this.renderContinueYourSessionButton()}
+
{or}
+ {this.renderRestoreUsingSeedButton(
+ SessionButtonType.BrandOutline,
+ SessionButtonColor.Green
+ )}
+
+ );
+ }
+
+ return (
+
+ {this.renderContinueYourSessionButton()}
+
{or}
+ {this.renderLinkDeviceToExistingAccountButton()}
+
+ );
+ }
+
+ private renderTermsConditionAgreement() {
+ // FIXME link to our Terms and Conditions and privacy statement
+
+ return (
+
+
+
+ );
+ }
+
+ private handleContinueYourSessionClick() {
+ if (this.state.signInMode === SignInMode.UsingSeed) {
+ this.register('english').ignore();
+ } else {
+ this.registerSecondaryDevice().ignore();
+ }
+ }
+
+ private renderContinueYourSessionButton() {
+ return (
+
{
+ this.handleContinueYourSessionClick();
+ }}
+ buttonType={SessionButtonType.Brand}
+ buttonColor={SessionButtonColor.Green}
+ text={window.i18n('continueYourSession')}
+ />
+ );
+ }
+
+ private renderRestoreUsingSeedButton(
+ buttonType: SessionButtonType,
+ buttonColor: SessionButtonColor
+ ) {
+ return (
+ {
+ this.cancelSecondaryDevice().ignore();
+ this.setState({
+ signInMode: SignInMode.UsingSeed,
+ primaryDevicePubKey: '',
+ mnemonicSeed: '',
+ displayName: '',
+ signUpMode: SignUpMode.Default,
+ });
+ //FIXME ugly hack to empty the content editable div used on enter session ID
+ window.Session.emptyContentEditableDivs();
+ }}
+ buttonType={buttonType}
+ buttonColor={buttonColor}
+ text={window.i18n('restoreUsingSeed')}
+ />
+ );
+ }
+
+ private renderLinkDeviceToExistingAccountButton() {
+ return (
+ {
+ this.setState({
+ signInMode: SignInMode.LinkingDevice,
+ mnemonicSeed: '',
+ displayName: '',
+ signUpMode: SignUpMode.Default,
+ });
+ }}
+ buttonType={SessionButtonType.BrandOutline}
+ buttonColor={SessionButtonColor.White}
+ text={window.i18n('linkDeviceToExistingAccount')}
+ />
+ );
+ }
+
+ private handlePressEnter() {
+ const { signInMode, signUpMode } = this.state;
+ if (signUpMode === SignUpMode.EnterDetails) {
+ this.onCompleteSignUpClick();
+
+ return;
+ }
+
+ if (signInMode === SignInMode.UsingSeed) {
+ this.handleContinueYourSessionClick();
+
+ return;
+ }
+ }
+
+ private trim(value: string) {
+ return value ? value.trim() : value;
+ }
+
+ private validatePassword() {
+ const input = this.trim(this.state.password);
+ const confirmationInput = this.trim(this.state.validatePassword);
+
+ // If user hasn't set a value then skip
+ if (!input && !confirmationInput) {
+ return null;
+ }
+
+ const error = window.passwordUtil.validatePassword(input, window.i18n);
+ if (error) {
+ return error;
+ }
+
+ if (input !== confirmationInput) {
+ return "Password don't match";
+ }
+
+ return null;
+ }
+
+ private onValidatePassword() {
+ const passwordValidation = this.validatePassword();
+ if (passwordValidation) {
+ this.setState({ passwordErrorString: passwordValidation });
+ } else {
+ // Show green box around inputs that match
+ const input = this.trim(this.state.password);
+ const confirmationInput = this.trim(this.state.validatePassword);
+ const passwordFieldsMatch =
+ input !== undefined && input === confirmationInput;
+
+ this.setState({
+ passwordErrorString: '',
+ passwordFieldsMatch,
+ });
+ }
+ }
+
+ private sanitiseNameInput(val: string) {
+ return val.trim().replace(window.displayNameRegex, '');
+ }
+
+ private async resetRegistration() {
+ await window.Signal.Data.removeAllIdentityKeys();
+ await window.Signal.Data.removeAllPrivateConversations();
+ window.Whisper.Registration.remove();
+ // Do not remove all items since they are only set
+ // at startup.
+ window.textsecure.storage.remove('identityKey');
+ window.textsecure.storage.remove('secondaryDeviceStatus');
+ window.ConversationController.reset();
+ await window.ConversationController.load();
+ window.Whisper.RotateSignedPreKeyListener.stop(window.Whisper.events);
+ }
+
+ private async register(language: string) {
+ const { password, mnemonicSeed, displayName } = this.state;
+ // Make sure the password is valid
+ if (this.validatePassword()) {
+ //this.showToast(window.i18n('invalidPassword'));
+ return;
+ }
+ if (!mnemonicSeed) {
+ return;
+ }
+ if (!displayName) {
+ return;
+ }
+
+ // Ensure we clear the secondary device registration status
+ window.textsecure.storage.remove('secondaryDeviceStatus');
+
+ try {
+ await this.resetRegistration();
+
+ await window.setPassword(password);
+ await this.accountManager.registerSingleDevice(
+ mnemonicSeed,
+ language,
+ displayName
+ );
+ trigger('openInbox');
+ } catch (e) {
+ if (typeof e === 'string') {
+ //this.showToast(e);
+ }
+ //this.log(e);
+ }
+ }
+
+ private async cancelSecondaryDevice() {
+ window.Whisper.events.off(
+ 'secondaryDeviceRegistration',
+ this.onSecondaryDeviceRegistered
+ );
+
+ await this.resetRegistration();
+ }
+
+ private async registerSecondaryDevice() {
+ // tslint:disable-next-line: no-backbone-get-set-outside-model
+ if (window.textsecure.storage.get('secondaryDeviceStatus') === 'ongoing') {
+ return;
+ }
+ await this.resetRegistration();
+ window.textsecure.storage.put('secondaryDeviceStatus', 'ongoing');
+
+ const primaryPubKey = this.state.primaryDevicePubKey;
+
+ // Ensure only one listener
+ window.Whisper.events.off(
+ 'secondaryDeviceRegistration',
+ this.onSecondaryDeviceRegistered
+ );
+ window.Whisper.events.once(
+ 'secondaryDeviceRegistration',
+ this.onSecondaryDeviceRegistered
+ );
+
+ const onError = async (error: any) => {
+ window.console.error(error);
+
+ await this.resetRegistration();
+ };
+
+ const c = new window.Whisper.Conversation({
+ id: primaryPubKey,
+ type: 'private',
+ });
+
+ const validationError = c.validateNumber();
+ if (validationError) {
+ onError('Invalid public key').ignore();
+
+ return;
+ }
+ try {
+ const fakeMnemonic = this.state.mnemonicSeed;
+
+ await this.accountManager.registerSingleDevice(
+ fakeMnemonic,
+ 'english',
+ null
+ );
+
+ await this.accountManager.requestPairing(primaryPubKey);
+ const pubkey = window.textsecure.storage.user.getNumber();
+ const words = window.mnemonic.pubkey_to_secret_words(pubkey);
+ window.console.log('pubkey_to_secret_words');
+ window.console.log(`Here is your secret:\n${words}`);
+ } catch (e) {
+ window.console.log(e);
+ //onError(e);
+ }
+ }
+
+ private async onSecondaryDeviceRegistered() {
+ // Ensure the left menu is updated
+ trigger('userChanged', { isSecondaryDevice: true });
+ // will re-run the background initialisation
+ trigger('registration_done');
+ trigger('openInbox');
+ }
+}
diff --git a/ts/components/session/SessionButton.tsx b/ts/components/session/SessionButton.tsx
index 894a58dcc..62b0aebd2 100644
--- a/ts/components/session/SessionButton.tsx
+++ b/ts/components/session/SessionButton.tsx
@@ -42,13 +42,18 @@ export class SessionButton extends React.PureComponent {
public render() {
const { buttonType, buttonColor, text } = this.props;
+ const buttonTypes = [];
+
+ buttonTypes.push(buttonType);
+ if (buttonType.includes('-outline')) {
+ buttonTypes.push(buttonType.replace('-outline', ''));
+ }
+
return (
{
- this.clickHandler(e);
- }}
- className={classNames('session-button', buttonType, buttonColor)}
+ className={classNames('session-button', ...buttonTypes, buttonColor)}
role="button"
+ onClick={this.clickHandler}
>
{text}
diff --git a/ts/components/session/SessionHTMLRenderer.tsx b/ts/components/session/SessionHTMLRenderer.tsx
new file mode 100644
index 000000000..24e7c4bc8
--- /dev/null
+++ b/ts/components/session/SessionHTMLRenderer.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import DOMPurify from 'dompurify';
+
+interface ReceivedProps {
+ html: string;
+ tag?: string;
+ key?: any;
+}
+
+type Props = ReceivedProps;
+
+export const SessionHtmlRenderer: React.SFC = ({
+ tag = 'div',
+ key,
+ html,
+}) => {
+ const clean = DOMPurify.sanitize(html, {
+ USE_PROFILES: { html: true },
+ FORBID_ATTR: ['style', 'script'],
+ });
+
+ return React.createElement(tag, {
+ key,
+ dangerouslySetInnerHTML: { __html: clean },
+ });
+};
diff --git a/ts/components/session/SessionInput.tsx b/ts/components/session/SessionInput.tsx
new file mode 100644
index 000000000..b4789ae9a
--- /dev/null
+++ b/ts/components/session/SessionInput.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+
+import classNames from 'classnames';
+import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
+
+interface Props {
+ label: string;
+ type: string;
+ value?: string;
+ placeholder: string;
+ enableShowHide?: boolean;
+ onValueChanged?: any;
+ onEnterPressed?: any;
+}
+
+interface State {
+ inputValue: string;
+ forceShow: boolean;
+}
+
+export class SessionInput extends React.PureComponent {
+ constructor(props: any) {
+ super(props);
+
+ this.updateInputValue = this.updateInputValue.bind(this);
+ this.renderShowHideButton = this.renderShowHideButton.bind(this);
+
+ this.state = {
+ inputValue: '',
+ forceShow: false,
+ };
+ }
+
+ public render() {
+ const { placeholder, type, label, value, enableShowHide } = this.props;
+ const { inputValue, forceShow } = this.state;
+
+ const correctType = forceShow ? 'text' : type;
+
+ return (
+
+
+ {
+ this.updateInputValue(e);
+ }}
+ className={classNames(
+ enableShowHide ? 'session-input-floating-label-show-hide' : ''
+ )}
+ onKeyPress={event => {
+ event.persist();
+ if (event.key === 'Enter' && this.props.onEnterPressed) {
+ this.props.onEnterPressed();
+ }
+ }}
+ />
+
+ {enableShowHide && this.renderShowHideButton()}
+
+
+
+ );
+ }
+
+ private renderShowHideButton() {
+ return (
+ {
+ this.setState({
+ forceShow: !this.state.forceShow,
+ });
+ }}
+ />
+ );
+ }
+
+ private updateInputValue(e: any) {
+ e.preventDefault();
+ this.setState({
+ inputValue: e.target.value,
+ });
+
+ if (this.props.onValueChanged) {
+ this.props.onValueChanged(e.target.value);
+ }
+ }
+}
diff --git a/ts/components/session/SessionRegistrationView.tsx b/ts/components/session/SessionRegistrationView.tsx
new file mode 100644
index 000000000..3da95f6b5
--- /dev/null
+++ b/ts/components/session/SessionRegistrationView.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { AccentText } from './AccentText';
+
+import { RegistrationTabs } from './RegistrationTabs';
+import { SessionIconButton, SessionIconSize, SessionIconType } from './icon';
+
+export const SessionRegistrationView: React.FC = () => (
+
+
+
+ {
+ window.close();
+ }}
+ />
+
+
+
+
+
+
+
+
+
+