diff --git a/background.html b/background.html index 76118f047..549e1b794 100644 --- a/background.html +++ b/background.html @@ -719,6 +719,45 @@ + @@ -779,6 +818,7 @@ + diff --git a/js/register.js b/js/register.js index 0589a74cc..297d6ab91 100644 --- a/js/register.js +++ b/js/register.js @@ -3,84 +3,9 @@ */ ;(function() { 'use strict'; - extension.windows.getBackground(function(bg) { - var accountManager = new bg.getAccountManager(); - - function log(s) { - console.log(s); - $('#status').text(s); - } - - function validateCode() { - var verificationCode = $('#code').val().replace(/\D/g, ''); - if (verificationCode.length == 6) { - return verificationCode; - } - } - - function displayError(error) { - $('#error').hide().text(error).addClass('in').fadeIn(); - } - - var phoneView = new Whisper.PhoneInputView({el: $('#phone-number-input')}); - phoneView.$el.find('input.number').intlTelInput(); - - var number = bg.textsecure.storage.user.getNumber(); - if (number) { - $('input.number').val(number); - } - $('input.number').on('validation', function() { - if ($('#number-container').hasClass('valid')) { - $('#request-sms, #request-voice').removeAttr('disabled'); - } else { - $('#request-sms, #request-voice').prop('disabled', 'disabled'); - } - }); - - $('#code').on('change', function() { - if (!validateCode()) { - $('#code').addClass('invalid'); - } else { - $('#code').removeClass('invalid'); - } - }); - - $('#request-voice').click(function() { - $('#error').hide(); - var number = phoneView.validateNumber(); - if (number) { - accountManager.requestVoiceVerification(number).catch(displayError); - $('#step2').addClass('in').fadeIn(); - } else { - $('#number-container').addClass('invalid'); - } - }); - - $('#request-sms').click(function() { - $('#error').hide(); - var number = phoneView.validateNumber(); - if (number) { - accountManager.requestSMSVerification(number).catch(displayError); - $('#step2').addClass('in').fadeIn(); - } else { - $('#number-container').addClass('invalid'); - } - }); - - $('#form').submit(function(e) { - e.preventDefault(); - var number = phoneView.validateNumber(); - var verificationCode = $('#code').val().replace(/\D+/g, ""); - - bg.storage.put('first_install_ran', 1); - accountManager.registerSingleDevice(number, verificationCode).then(function() { - bg.openInbox(); - window.close(); - }).catch(function(e) { - log(e); - }); - }); + extension.windows.getBackground(function(bg) { + var view = new bg.StandaloneRegistrationView({el: $('body')}); }); })(); diff --git a/js/views/app_view.js b/js/views/app_view.js index e628203b2..b27ad4a51 100644 --- a/js/views/app_view.js +++ b/js/views/app_view.js @@ -8,28 +8,41 @@ this.inboxView = null; this.installView = null; this.events = options.events; + this.events.on('openStandalone', this.openStandaloneInstaller, this); this.events.on('openConversation', this.openConversation, this); this.events.on('openInstaller', this.openInstaller, this); this.events.on('openInbox', this.openInbox, this); }, + openView: function(view) { + this.el.innerHTML = ""; + this.el.append(view.el); + }, openInstaller: function() { + this.closeInstaller(); this.installView = new Whisper.InstallView(); if (Whisper.Registration.everDone()) { this.installView.selectStep(3); this.installView.hideDots(); } - this.el.innerHTML = ""; - this.el.append(this.installView.el); + this.openView(this.installView); + }, + openStandaloneInstaller: function() { + this.closeInstaller(); + this.installView = new Whisper.StandaloneRegistrationView(); + this.openView(this.installView); + }, + closeInstaller: function() { + if (this.installView) { + this.installView.remove(); + this.installView = null; + } }, openInbox: function(options) { options = options || {}; _.defaults(options, {initialLoadComplete: false}); console.log('open inbox'); - if (this.installView) { - this.installView.remove(); - this.installView = null; - } + this.closeInstaller(); if (!this.inboxView) { return ConversationController.loadPromise().then(function() { @@ -38,13 +51,11 @@ window: window, initialLoadComplete: initialLoadComplete }); - this.el.innerHTML = ""; - this.el.append(this.inboxView.el); + this.openView(this.inboxView); }.bind(this)); } else { if (!$.contains(this.$el, this.inboxView.$el)) { - this.el.innerHTML = ""; - this.el.append(this.inboxView.el); + this.openView(this.inboxView); } window.focus(); // FIXME return Promise.resolve(); diff --git a/js/views/phone-input-view.js b/js/views/phone-input-view.js index 48c4c80d0..a43c0e4b7 100644 --- a/js/views/phone-input-view.js +++ b/js/views/phone-input-view.js @@ -9,17 +9,13 @@ tagName: 'div', className: 'phone-input', templateName: 'phone-number', - render: function() { - this.$el.html($(Mustache.render(this.template))); + initialize: function() { this.$('input.number').intlTelInput(); - return this; }, - events: { 'change': 'validateNumber', 'keyup': 'validateNumber' }, - validateNumber: function() { var input = this.$('input.number'); var regionCode = this.$('li.active').attr('data-country-code').toUpperCase(); diff --git a/js/views/standalone_registration_view.js b/js/views/standalone_registration_view.js new file mode 100644 index 000000000..eab7723ed --- /dev/null +++ b/js/views/standalone_registration_view.js @@ -0,0 +1,86 @@ +/* + * vim: ts=4:sw=4:expandtab + */ +(function () { + 'use strict'; + window.Whisper = window.Whisper || {}; + + Whisper.StandaloneRegistrationView = Whisper.View.extend({ + templateName: 'standalone', + id: 'install', + className: 'main', + initialize: function() { + this.accountManager = getAccountManager(); + + var number = textsecure.storage.user.getNumber(); + if (number) { + $('input.number').val(number); + } + this.render(); + this.phoneView = new Whisper.PhoneInputView({el: this.$('#phone-number-input')}); + }, + events: { + 'submit #form': 'submit', + 'validation input.number': 'onValidation', + 'change #code': 'onChangeCode', + 'click #request-voice': 'requestVoice', + 'click #request-sms': 'requestSMSVerification', + }, + submit: function(e) { + e.preventDefault(); + var number = this.phoneView.validateNumber(); + var verificationCode = $('#code').val().replace(/\D+/g, ""); + + this.accountManager.registerSingleDevice(number, verificationCode).then(function() { + Whisper.events.trigger('openInbox'); + }).catch(this.log.bind(this)); + }, + log: function (s) { + console.log(s); + this.$('#status').text(s); + }, + validateCode: function() { + var verificationCode = $('#code').val().replace(/\D/g, ''); + if (verificationCode.length == 6) { + return verificationCode; + } + }, + displayError: function(error) { + this.$('#error').hide().text(error).addClass('in').fadeIn(); + }, + onValidation: function() { + if (this.$('#number-container').hasClass('valid')) { + this.$('#request-sms, #request-voice').removeAttr('disabled'); + } else { + this.$('#request-sms, #request-voice').prop('disabled', 'disabled'); + } + }, + onChangeCode: function() { + if (!this.validateCode()) { + this.$('#code').addClass('invalid'); + } else { + this.$('#code').removeClass('invalid'); + } + }, + requestVoice: function() { + this.$('#error').hide(); + var number = this.phoneView.validateNumber(); + if (number) { + this.accountManager.requestVoiceVerification(number).catch(this.displayError.bind(this)); + this.$('#step2').addClass('in').fadeIn(); + } else { + this.$('#number-container').addClass('invalid'); + } + }, + requestSMSVerification: function() { + $('#error').hide(); + var number = this.phoneView.validateNumber(); + if (number) { + this.accountManager.requestSMSVerification(number).catch(this.displayError.bind(this)); + this.$('#step2').addClass('in').fadeIn(); + } else { + this.$('#number-container').addClass('invalid'); + } + } + }); +})(); diff --git a/package.json b/package.json index 2d498f486..1039e0131 100644 --- a/package.json +++ b/package.json @@ -81,6 +81,7 @@ "js/**", "stylesheets/*.css", "!js/register.js", + "!js/views/standalone_registration_view.js", "preload.js", "main.js", "menu.js", diff --git a/register.html b/register.html index 65ce6b73a..22417988b 100644 --- a/register.html +++ b/register.html @@ -6,46 +6,46 @@ -
-
-
-
- -
-
-

Create your Signal Account

-

Private messaging from your web browser.

+ +