mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

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
Download patch file Download diff file Expand all files Collapse all files

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