thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Refactor phone number input view

Browse source 
Moves validation logic to its own view to be shared on index and options
pages.
This commit is contained in:
Emily Chao 2015-01-14 13:59:40 -10:00 committed by lilia
parent 44007ca58f
commit 5d3020b9ed
8 changed files with 117 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
index.html
View file

@ -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>

41
js/options.js
View file

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

5
js/views/new_conversation_view.js
View file

@ -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');

64
js/views/phone-input-view.js Normal file
View file

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

20
options.html
View file

@ -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>

2
stylesheets/manifest.css
View file

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

7
stylesheets/manifest.css.map Normal file
View file

File diff suppressed because one or more lines are too long

10
stylesheets/options.css
View file

@ -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;