From 5d3020b9edd72f5d197bdef988809a05eadf0b66 Mon Sep 17 00:00:00 2001
From: Emily Chao <elchao96@live.com>
Date: Wed, 14 Jan 2015 13:59:40 -1000
Subject: [PATCH] Refactor phone number input view

Moves validation logic to its own view to be shared on index and options
pages.
---
 index.html                        | 13 ++++++-
 js/options.js                     | 41 ++++++--------------
 js/views/new_conversation_view.js |  5 ++-
 js/views/phone-input-view.js      | 64 +++++++++++++++++++++++++++++++
 options.html                      | 20 ++++++----
 stylesheets/manifest.css          |  2 +
 stylesheets/manifest.css.map      |  7 ++++
 stylesheets/options.css           | 10 ++---
 8 files changed, 117 insertions(+), 45 deletions(-)
 create mode 100644 js/views/phone-input-view.js
 create mode 100644 stylesheets/manifest.css.map

diff --git a/index.html b/index.html
index 5937a5768e76..821ead5910d8 100644
--- a/index.html
+++ b/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>
diff --git a/js/options.js b/js/options.js
index f097ac093e42..9240b50de4a1 100644
--- a/js/options.js
+++ b/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) {
-                $('#regionCode').append(
-                    $('<option>', { value: regionCode, text: countryName })
-                );
+            $('input.number').on('keyup', function() {
+                if ($('#number-container').hasClass('valid')) {
+                    $('#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');
                     });
                 });
 
diff --git a/js/views/new_conversation_view.js b/js/views/new_conversation_view.js
index b57e26fa1d09..162aad7014fb 100644
--- a/js/views/new_conversation_view.js
+++ b/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');
diff --git a/js/views/phone-input-view.js b/js/views/phone-input-view.js
new file mode 100644
index 000000000000..cd032313354d
--- /dev/null
+++ b/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');
+            }
+        }
+    });
+})();
diff --git a/options.html b/options.html
index f9b228b29872..1857808a9170 100644
--- a/options.html
+++ b/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'>
-                <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 id="phone-number-input"></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>
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 214cfbb1fb81..5a7d9da48834 100644
--- a/stylesheets/manifest.css
+++ b/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 */
diff --git a/stylesheets/manifest.css.map b/stylesheets/manifest.css.map
new file mode 100644
index 000000000000..8f9126855ba6
--- /dev/null
+++ b/stylesheets/manifest.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["settings/_reset.scss","context/_title_bar.scss","context/_notifications.scss","view/_search.scss","view/_gutter.scss","settings/_swatchbook.scss","view/_conversation.scss","view/_send_message_area.scss"],
+"names": [],
+"file": "manifest.css"
+}
diff --git a/stylesheets/options.css b/stylesheets/options.css
index 5686fbff81c7..bf96283b4e62 100644
--- a/stylesheets/options.css
+++ b/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;