Get standalone registration working in development

Whisper.events.trigger('openStandalone') to open the standalone
registration view.

// FREEBIE

background.html

@@ -719,6 +719,45 @@
     </div>
   </script>
 
+  <script type='text/x-tmpl-mustache' id='standalone'>
+    <header>
+      <div class='container'>
+        <div class='row'>
+          <div class='col-xs-2 col-md-1'>
+            <img id='textsecure-icon' src='images/icon_250.png'/>
+          </div>
+          <div class='col-xs-10 col-md-11'>
+            <h1>Create your Signal Account</h1>
+            <h4 class='tagline'>Private messaging from your web browser.</h4>
+          </div>
+        </div>
+      </div>
+    </header>
+    <div class='container'>
+      <div class='col-xs-offset-1 col-md-6'>
+        <div class='narrow'>
+          <div id="phone-number-input">
+            <div class="phone-input-form">
+                <div id="number-container" class="number-container">
+                  <input type="tel" class="number" placeholder="Phone Number" />
+                </div>
+            </div>
+          </div>
+          <div class='clearfix'>
+            <button id="request-sms" class="btn btn-info">Send SMS</button>
+            <button id="request-voice" class="btn btn-info" tabindex=-1>Call</button>
+          </div>
+          <form id='form'>
+            <h2></h2>
+            <input class='form-control' type="text" pattern="\s*[0-9]{3}-?[0-9]{3}\s*" title="Enter your 6-digit verification code. If you did not receive a code, click Call or Send SMS to request a new one" id="code" placeholder="Verification Code" autocomplete='off'>
+            <button id="verifyCode" class="btn btn-info" data-loading-text="Please wait...">Register</button>
+            <div id='error' class='collapse'></div>
+          </form>
+          <div id=status></div>
+        </div>
+      </div>
+    </div>
+  </script>
   <script type='text/javascript' src='js/components.js'></script>
   <script type='text/javascript' src='js/reliable_trigger.js'></script>
   <script type='text/javascript' src='js/database.js'></script>
@@ -779,6 +818,7 @@
   <script type='text/javascript' src='js/views/identity_key_send_error_view.js'></script>
   <script type='text/javascript' src='js/views/migration_view.js'></script>
   <script type="text/javascript" src="js/views/phone-input-view.js"></script>
+  <script type='text/javascript' src='js/views/standalone_registration_view.js'></script>
   <script type='text/javascript' src='js/views/app_view.js'></script>
 
   <script type='text/javascript' src='js/wall_clock_listener.js'></script>

js/register.js

@@ -3,84 +3,9 @@
  */
 ;(function() {
     'use strict';
+
     extension.windows.getBackground(function(bg) {
-        var accountManager = new bg.getAccountManager();
+        var view = new bg.StandaloneRegistrationView({el: $('body')});
-
-        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);
-            });
-        });
     });
 
 })();

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.openView(this.installView);
-          this.el.append(this.installView.el);
+        },
+        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.closeInstaller();
-            this.installView.remove();
-            this.installView = null;
-          }
 
           if (!this.inboxView) {
             return ConversationController.loadPromise().then(function() {
@@ -38,13 +51,11 @@
                   window: window,
                   initialLoadComplete: initialLoadComplete
                 });
-                this.el.innerHTML = "";
+                this.openView(this.inboxView);
-                this.el.append(this.inboxView.el);
             }.bind(this));
           } else {
             if (!$.contains(this.$el, this.inboxView.$el)) {
-                this.el.innerHTML = "";
+                this.openView(this.inboxView);
-                this.el.append(this.inboxView.el);
             }
             window.focus(); // FIXME
             return Promise.resolve();

js/views/phone-input-view.js

@@ -9,17 +9,13 @@
         tagName: 'div',
         className: 'phone-input',
         templateName: 'phone-number',
-        render: function() {
+        initialize: function() {
-            this.$el.html($(Mustache.render(this.template)));
             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();

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');
+            }
+        }
+    });
+})();

package.json

@@ -81,6 +81,7 @@
       "js/**",
       "stylesheets/*.css",
       "!js/register.js",
+      "!js/views/standalone_registration_view.js",
       "preload.js",
       "main.js",
       "menu.js",

register.html

@@ -6,46 +6,46 @@
   <link rel="stylesheet" href="stylesheets/options.css">
 </head>
 <body>
-  <header>
+  <script type='text/x-tmpl-mustache' id='standalone'>
-    <div class='container'>
+    <header>
-      <div class='row'>
+      <div class='container'>
-        <div class='col-xs-2 col-md-1'>
+        <div class='row'>
-          <img id='textsecure-icon' src='/images/icon_250.png'/>
+          <div class='col-xs-2 col-md-1'>
-        </div>
+            <img id='textsecure-icon' src='/images/icon_250.png'/>
-        <div class='col-xs-10 col-md-11'>
+          </div>
-          <h1>Create your Signal Account</h1>
+          <div class='col-xs-10 col-md-11'>
-          <h4 class='tagline'>Private messaging from your web browser.</h4>
+            <h1>Create your Signal Account</h1>
-        </div>
+            <h4 class='tagline'>Private messaging from your web browser.</h4>
-      </div>
-    </div>
-  </header>
-  <div class='container'>
-    <div class='col-xs-offset-1 col-md-6'>
-      <div class='narrow'>
-        <div id="phone-number-input">
-          <div class="phone-input-form">
-              <div id="number-container" class="number-container">
-                <input type="tel" class="number" placeholder="Phone Number" />
-              </div>
           </div>
         </div>
-        <div class='clearfix'>
+      </div>
-          <button id="request-sms" class="btn btn-info">Send SMS</button>
+    </header>
-          <button id="request-voice" class="btn btn-info" tabindex=-1>Call</button>
+    <div class='container'>
+      <div class='col-xs-offset-1 col-md-6'>
+        <div class='narrow'>
+          <div id="phone-number-input">
+            <div class="phone-input-form">
+                <div id="number-container" class="number-container">
+                  <input type="tel" class="number" placeholder="Phone Number" />
+                </div>
+            </div>
+          </div>
+          <div class='clearfix'>
+            <button id="request-sms" class="btn btn-info">Send SMS</button>
+            <button id="request-voice" class="btn btn-info" tabindex=-1>Call</button>
+          </div>
+          <form id='form'>
+            <h2></h2>
+            <input class='form-control' type="text" pattern="\s*[0-9]{3}-?[0-9]{3}\s*" title="Enter your 6-digit verification code. If you did not receive a code, click Call or Send SMS to request a new one" id="code" placeholder="Verification Code" autocomplete='off'>
+            <button id="verifyCode" class="btn btn-info" data-loading-text="Please wait...">Register</button>
+            <div id='error' class='collapse'></div>
+          </form>
+          <div id=status></div>
         </div>
-        <form id='form'>
-          <h2></h2>
-          <input class='form-control' type="text" pattern="\s*[0-9]{3}-?[0-9]{3}\s*" title="Enter your 6-digit verification code. If you did not receive a code, click Call or Send SMS to request a new one" id="code" placeholder="Verification Code" autocomplete='off'>
-          <button id="verifyCode" class="btn btn-info" data-loading-text="Please wait...">Register</button>
-          <div id='error' class='collapse'></div>
-        </form>
-        <div id=status></div>
       </div>
     </div>
-
-  </div>
-  <script type="text/x-tmpl-mustache" id="phone-number">
   </script>
+  <script type="text/x-tmpl-mustache" id="phone-number"></script>
   <script type="text/javascript" src="js/components.js"></script>
   <script type="text/javascript" src="js/database.js"></script>