signal-desktop/js/views/install_view.js

/*
 * vim: ts=4:sw=4:expandtab
 */
(function() {
  'use strict';
  window.Whisper = window.Whisper || {};

  var Steps = {
    INSTALL_SIGNAL: 2,
    SCAN_QR_CODE: 3,
    ENTER_NAME: 4,
    PROGRESS_BAR: 5,
    TOO_MANY_DEVICES: 'TooManyDevices',
    NETWORK_ERROR: 'NetworkError',
  };

  var DEVICE_NAME_SELECTOR = 'input.device-name';
  var CONNECTION_ERROR = -1;
  var TOO_MANY_DEVICES = 411;

  Whisper.InstallView = Whisper.View.extend({
    templateName: 'link-flow-template',
    className: 'main full-screen-flow',
    events: {
      'click .try-again': 'connect',
      'click .finish': 'finishLinking',
      // the actual next step happens in confirmNumber() on submit form #link-phone
    },
    initialize: function(options) {
      options = options || {};

      this.selectStep(Steps.SCAN_QR_CODE);
      this.connect();
      this.on('disconnected', this.reconnect);

      // Keep data around if it's a re-link, or the middle of a light import
      this.shouldRetainData =
        Whisper.Registration.everDone() || options.hasExistingData;
    },
    render_attributes: function() {
      var errorMessage;

      if (this.error) {
        if (
          this.error.name === 'HTTPError' &&
          this.error.code == TOO_MANY_DEVICES
        ) {
          errorMessage = i18n('installTooManyDevices');
        } else if (
          this.error.name === 'HTTPError' &&
          this.error.code == CONNECTION_ERROR
        ) {
          errorMessage = i18n('installConnectionFailed');
        } else if (this.error.message === 'websocket closed') {
          // AccountManager.registerSecondDevice uses this specific
          //   'websocket closed' error message
          errorMessage = i18n('installConnectionFailed');
        }

        return {
          isError: true,
          errorHeader: 'Something went wrong!',
          errorMessage,
          errorButton: 'Try again',
        };
      }

      return {
        isStep3: this.step === Steps.SCAN_QR_CODE,
        linkYourPhone: i18n('linkYourPhone'),
        signalSettings: i18n('signalSettings'),
        linkedDevices: i18n('linkedDevices'),
        androidFinalStep: i18n('plusButton'),
        appleFinalStep: i18n('linkNewDevice'),

        isStep4: this.step === Steps.ENTER_NAME,
        chooseName: i18n('chooseDeviceName'),
        finishLinkingPhoneButton: i18n('finishLinkingPhone'),

        isStep5: this.step === Steps.PROGRESS_BAR,
        syncing: i18n('initialSync'),
      };
    },
    selectStep: function(step) {
      this.step = step;
      this.render();
    },
    connect: function() {
      this.error = null;
      this.selectStep(Steps.SCAN_QR_CODE);
      this.clearQR();
      if (this.timeout) {
        clearTimeout(this.timeout);
        this.timeout = null;
      }

      var accountManager = getAccountManager();

      accountManager
        .registerSecondDevice(
          this.setProvisioningUrl.bind(this),
          this.confirmNumber.bind(this)
        )
        .catch(this.handleDisconnect.bind(this));
    },
    handleDisconnect: function(e) {
      console.log('provisioning failed', e.stack);

      this.error = e;
      this.render();

      if (e.message === 'websocket closed') {
        this.trigger('disconnected');
      } else if (
        e.name !== 'HTTPError' ||
        (e.code !== CONNECTION_ERROR && e.code !== TOO_MANY_DEVICES)
      ) {
        throw e;
      }
    },
    reconnect: function() {
      if (this.timeout) {
        clearTimeout(this.timeout);
        this.timeout = null;
      }
      this.timeout = setTimeout(this.connect.bind(this), 10000);
    },
    clearQR: function() {
      this.$('#qr img').remove();
      this.$('#qr canvas').remove();
      this.$('#qr .container').show();
      this.$('#qr').removeClass('ready');
    },
    setProvisioningUrl: function(url) {
      if ($('#qr').length === 0) {
        console.log('Did not find #qr element in the DOM!');
        return;
      }

      this.$('#qr .container').hide();
      this.qr = new QRCode(this.$('#qr')[0]).makeCode(url);
      this.$('#qr').removeAttr('title');
      this.$('#qr').addClass('ready');
    },
    setDeviceNameDefault: function() {
      var deviceName = textsecure.storage.user.getDeviceName();

      this.$(DEVICE_NAME_SELECTOR).val(deviceName || window.config.hostname);
      this.$(DEVICE_NAME_SELECTOR).focus();
    },
    finishLinking: function() {
      // We use a form so we get submit-on-enter behavior
      this.$('#link-phone').submit();
    },
    confirmNumber: function(number) {
      var tsp = textsecure.storage.protocol;

      window.removeSetupMenuItems();
      this.selectStep(Steps.ENTER_NAME);
      this.setDeviceNameDefault();

      return new Promise(
        function(resolve, reject) {
          this.$('#link-phone').submit(
            function(e) {
              e.stopPropagation();
              e.preventDefault();

              var name = this.$(DEVICE_NAME_SELECTOR).val();
              name = name.replace(/\0/g, ''); // strip unicode null
              if (name.trim().length === 0) {
                this.$(DEVICE_NAME_SELECTOR).focus();
                return;
              }

              this.selectStep(Steps.PROGRESS_BAR);

              var finish = function() {
                resolve(name);
              };

              // Delete all data from database unless we're in the middle
              //   of a re-link, or we are finishing a light import. Without this,
              //   app restarts at certain times can cause weird things to happen,
              //   like data from a previous incomplete light import showing up
              //   after a new install.
              if (this.shouldRetainData) {
                return finish();
              }

              tsp.removeAllData().then(finish, function(error) {
                console.log(
                  'confirmNumber: error clearing database',
                  error && error.stack ? error.stack : error
                );
                finish();
              });
            }.bind(this)
          );
        }.bind(this)
      );
    },
  });
})();