Refactor phone number input view
Moves validation logic to its own view to be shared on index and options pages.
This commit is contained in:
parent
44007ca58f
commit
5d3020b9ed
8 changed files with 117 additions and 45 deletions
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
@ -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
64
js/views/phone-input-view.js
Normal 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');
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
Loading…
Add table
Add a link
Reference in a new issue