Refactor phone number input view

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

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>