Refactor phone number input view

Moves validation logic to its own view to be shared on index and options
pages.

index.html

@@ -42,6 +42,16 @@
             <div>Add members: <input name='members' class='members' role=tagsinput></div>
             <button class='send'>Update</button>
         </script>
+        <script type="text/x-tmpl-mustache" id="phone-number">
+            <div class="phone-input-form">
+                <select class="regionCode">
+                    <option value="ZZ" selected>Country</option>
+                </select>
+                <div class="number-container">
+                    <input type="text" class="number" placeholder="Phone Number" />
+                </div>
+            </div>
+        </script>
         <script type='text/x-tmpl-mustache' id='conversation'>
             <div class='discussion-container'></div>
             <div class='send-message-area'>
@@ -93,7 +103,7 @@
         </script>
         <script type='text/x-tmpl-mustache' id='new-message-form'>
           <form class='send message'>
-            <input type='text' name='number' class='number' placeholder='Phone number'>
+            <div class="phone-number-input"></div>
             <div class='send-message-area'>
                 <div class='message-composer'>
                     <input name='message' class='send-message' rows='6' type='textarea'>
@@ -160,6 +170,7 @@
         <script type="text/javascript" src="js/views/attachment_view.js"></script>
         <script type="text/javascript" src="js/views/message_view.js"></script>
         <script type="text/javascript" src="js/views/message_list_view.js"></script>
+        <script type="text/javascript" src="js/views/phone-input-view.js"></script>
         <script type="text/javascript" src="js/views/conversation_list_item_view.js"></script>
         <script type="text/javascript" src="js/views/conversation_list_view.js"></script>
         <script type="text/javascript" src="js/views/conversation_view.js"></script>

js/options.js

@@ -15,24 +15,6 @@
  */
 
 ;(function() {
-    function validateNumber() {
-        try {
-            var regionCode = $('#regionCode').val();
-            var number     = $('#number').val();
-
-            var parsedNumber = libphonenumber.util.verifyNumber(number, regionCode);
-
-            $('#regionCode').val(libphonenumber.util.getRegionCodeForNumber(parsedNumber));
-            $('#number-container').removeClass('invalid');
-            $('#number-container').addClass('valid');
-            $('#request-sms, #request-voice').removeAttr('disabled');
-            return parsedNumber;
-        } catch(e) {
-            $('#number-container').removeClass('valid');
-            $('#request-sms, #request-voice').prop('disabled', 'disabled');
-        }
-    };
-
     function validateCode() {
         var verificationCode = $('#code').val().replace(/\D/g, '');
         if (verificationCode.length == 6) {
@@ -45,18 +27,19 @@
     };
 
     $(function() {
+        var phoneView = new Whisper.PhoneInputView({el: $('#phone-number-input')});
         if (textsecure.registration.isDone()) {
             $('#complete-number').text(textsecure.utils.unencodeNumber(textsecure.storage.getUnencrypted("number_id"))[0]);//TODO: no
             $('#setup-complete').show().addClass('in');
         } else {
             $('#choose-setup').show().addClass('in');
-            $('#number').keyup(validateNumber);
-            $('#regionCode').change(validateNumber);
 
-            $.each(libphonenumber.util.getAllRegionCodes(), function (regionCode, countryName) {
+            $('input.number').on('keyup', function() {
-                $('#regionCode').append(
+                if ($('#number-container').hasClass('valid')) {
-                    $('<option>', { value: regionCode, text: countryName })
+                    $('#request-sms, #request-voice').removeAttr('disabled');
-                );
+                } else {
+                    $('#request-sms, #request-voice').prop('disabled', 'disabled');
+                }
             });
 
             $('#code').on('change', function() {
@@ -68,7 +51,7 @@
 
             $('#request-voice').click(function() {
                 $('#error').hide();
-                var number = validateNumber();
+                var number = phoneView.validateNumber();
                 if (number) {
                     textsecure.api.requestVerificationVoice(number).catch(displayError);
                     $('#step2').addClass('in').fadeIn();
@@ -79,7 +62,7 @@
 
             $('#request-sms').click(function() {
                 $('#error').hide();
-                var number = validateNumber();
+                var number = phoneView.validateNumber();
                 if (number) {
                     textsecure.api.requestVerificationSMS(number).catch(displayError);
                     $('#step2').addClass('in').fadeIn();
@@ -96,14 +79,14 @@
                 $('#single-device .back').click(function() {
                     $('#single-device').fadeOut(function() {
                         $('#choose-setup').addClass('in').fadeIn();
-                        $('#number').removeClass('invalid');
+                        $('input.number').removeClass('invalid');
                     });
                 });
 
                 $('#single-device form').submit(function(e) {
                     e.preventDefault();
                     $('#error').hide();
-                    var number = validateNumber();
+                    var number = phoneView.validateNumber();
                     var verificationCode = validateCode();
                     if (number && verificationCode) {
                         $('#verifyCode').prop('disabled', 'disabled');
@@ -146,7 +129,7 @@
                 $('#multi-device .back').click(function() {
                     $('#multi-device').fadeOut(function() {
                         $('#choose-setup').addClass('in').fadeIn();
-                        $('#number').removeClass('invalid');
+                        $('input.number').removeClass('invalid');
                     });
                 });
 

js/views/new_conversation_view.js

@@ -54,8 +54,9 @@ var Whisper = Whisper || {};
       this.template = $('#new-message-form').html();
       Mustache.parse(this.template);
       this.$el.html($(Mustache.render(this.template)));
-      this.input = new MessageRecipientInputView({el: this.$el.find('input.number')});
+      this.input = new Whisper.PhoneInputView({el: this.$el.find('div.phone-number-input')});
       this.fileInput = new Whisper.FileInputView({el: this.$el.find('.attachments')});
+      this.$el.find('#phone-number-input').append(this.input.render().el);
     },
 
     events: {
@@ -65,7 +66,7 @@ var Whisper = Whisper || {};
 
     send: function(e) {
       e.preventDefault();
-      var number = this.input.verifyNumber();
+      var number = this.input.validateNumber();
       if (number) {
         var convo = this.collection.findOrCreateForRecipient(number);
         var message_input = this.$el.find('input.send-message');

js/views/phone-input-view.js

@@ -0,0 +1,64 @@
+/* vim: ts=4:sw=4:expandtab
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+var Whisper = Whisper || {};
+
+(function () {
+    'use strict';
+    Whisper.PhoneInputView = Backbone.View.extend({
+        tagName: 'div',
+        className: 'phone-input',
+        initialize: function() {
+            this.template = $('#phone-number').html();
+            Mustache.parse(this.template);
+            this.render();
+        },
+
+        render: function() {
+            this.$el.html($(Mustache.render(this.template)));
+            var regionCodes = [];
+            var countryNames = [];
+            $.each(libphonenumber.util.getAllRegionCodes(), function(regionCode, countryName) {
+                regionCodes.push(regionCode);
+                countryNames.push(countryName);
+            });
+            for (var i = 0; i < regionCodes.length; i++) {
+                this.$el.find('.regionCode').append($('<option>', { value: regionCodes[i], text: countryNames[i]}));
+            }
+            return this;
+        },
+
+        events: {
+            'change': 'validateNumber',
+            'keyup': 'validateNumber'
+        },
+
+        validateNumber: function() {
+            try {
+                var regionCode = this.$el.find('.regionCode').val();
+                var number = this.$el.find('input.number').val();
+
+                var parsedNumber = libphonenumber.util.verifyNumber(number, regionCode);
+
+                this.$el.find('.regionCode').val(libphonenumber.util.getRegionCodeForNumber(parsedNumber));
+                this.$el.find('.number-container').removeClass('invalid');
+                this.$el.find('.number-container').addClass('valid');
+                return parsedNumber;
+            } catch(e) {
+                this.$el.find('.number-container').removeClass('valid');
+            }
+        }
+    });
+})();

options.html

@@ -53,14 +53,7 @@
         <div class='col-xs-offset-1 col-md-6'>
           <div class='narrow'>
             <div id='step1'>
-              <div id='number-container'>
+              <div id="phone-number-input"></div>
-                <input class='form-control' type="text" id="number" placeholder="Phone Number" tabindex=0>
-              </div>
-              <div>
-                <select class='form-control' id="regionCode">
-                  <option value="ZZ" selected>Country</option>
-                </select>
-              </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>
@@ -91,6 +84,16 @@
       <h3>You are registered on TextSecure with number <span id="complete-number"></span></h3>
     </div>
   </div>
+  <script type="text/x-tmpl-mustache" id="phone-number">
+    <div class="phone-input-form">
+        <select class="regionCode">
+          <option value="ZZ" selected>Country</option>
+        </select>
+        <div class="number-container">
+          <input type="text" class="number" placeholder="Phone Number" />
+        </div>
+    </div>
+  </script>
   <script type="text/javascript" src="js/components.js"></script>
 
   <script type="text/javascript" src="js/libtextsecure.js"></script>
@@ -101,6 +104,7 @@
   <script type="text/javascript" src="js/models/conversations.js"></script>
 
   <script type="text/javascript" src="js/chromium.js"></script>
+  <script type="text/javascript" src="js/views/phone-input-view.js"></script>
   <script type="text/javascript" src="js/options.js"></script>
 </body>
 </html>

stylesheets/manifest.css

@@ -293,3 +293,5 @@ ul.discussion {
 @media screen and (min-width: 822px) {
   .send-message-area {
     padding-right: 258px; } }
+
+/*# sourceMappingURL=manifest.css.map */

stylesheets/options.css

@@ -80,16 +80,16 @@ h2 {
   float: left;
 }
 
-#regionCode {
+.regionCode {
   width: 100%;
   margin-bottom: 1em;
 }
 
-#number-container {
+.number-container {
   position: relative;
   margin-bottom: 0.5em;
 }
-#number-container::after {
+.number-container::after {
   visibility: hidden;
   content: ' ';
   display: inline-block;
@@ -104,13 +104,13 @@ h2 {
   margin: 3px 8px;
   text-align: center;
 }
-#number-container.valid::after {
+.number-container.valid::after {
   visibility: visible;
   content: '✓';
   background-color: #0f9d58;
   color: #ffffff;
 }
-#number-container.invalid::after {
+.number-container.invalid::after {
   visibility: visible;
   content: '!';
   background-color: #f44336;