Refactor options page and style using bootstrap
This commit is contained in:
lilia
parent
81e4af5827
commit
2bd77693e1
6 changed files with 8676 additions and 227 deletions
285
js/options.js
285
js/options.js
|
|
@ -15,182 +15,193 @@
|
|||
*/
|
||||
|
||||
;(function() {
|
||||
function updateNumberColors() {
|
||||
function validateNumber() {
|
||||
try {
|
||||
if($('#number').val() != "" && $('#regionCode').val() != "")
|
||||
libphonenumber.util.verifyNumber($('#number').val(), $('#regionCode').val());
|
||||
$('#countrycode').removeClass('invalid');
|
||||
$('#number').removeClass('invalid');
|
||||
} catch (numberInvalidError) {
|
||||
console.log(numberInvalidError);
|
||||
$('#countrycode').addClass('invalid');
|
||||
$('#number').addClass('invalid');
|
||||
}
|
||||
}
|
||||
var regionCode = $('#regionCode').val();
|
||||
var number = $('#number').val();
|
||||
|
||||
function isCodeValid() {
|
||||
var verificationCode = $('#code').val().replace(/\D/g, '');
|
||||
return verificationCode.length == 6;
|
||||
}
|
||||
var parsedNumber = libphonenumber.util.verifyNumber(number, regionCode);
|
||||
|
||||
$('#code').on('change', function() {
|
||||
if (!isCodeValid())
|
||||
$('#code').addClass('invalid');
|
||||
else
|
||||
$('#code').removeClass('invalid');
|
||||
});
|
||||
|
||||
var single_device = false;
|
||||
|
||||
$('#init-go-single-client').click(function() {
|
||||
try {
|
||||
var parsedNumber = libphonenumber.util.verifyNumber($('#number').val(), $('#regionCode').val());
|
||||
$('#regionCode').val(libphonenumber.util.getRegionCodeForNumber(parsedNumber));
|
||||
$('#number-container').removeClass('invalid');
|
||||
$('#number-container').addClass('valid');
|
||||
$('#request-sms, #request-voice').removeAttr('disabled');
|
||||
return parsedNumber;
|
||||
} catch(e) {
|
||||
alert("Please enter a valid phone number first.");
|
||||
return false;
|
||||
$('#number-container').removeClass('valid');
|
||||
$('#request-sms, #request-voice').prop('disabled', 'disabled');
|
||||
}
|
||||
};
|
||||
|
||||
$('#init-go').text('Setup');
|
||||
$('#countrycode').prop('disabled', 'disabled');
|
||||
$('#number').prop('disabled', 'disabled');
|
||||
$('#init-go-single-client').prop('disabled', 'disabled');
|
||||
$('#init-setup-verification').show();
|
||||
|
||||
single_device = true;
|
||||
|
||||
textsecure.api.requestVerificationCode(parsedNumber).catch(function(error) {
|
||||
//TODO: No alerts
|
||||
if (error.humanReadable)
|
||||
alert(error.humanReadable);
|
||||
else
|
||||
alert(error); // XXX
|
||||
});
|
||||
});
|
||||
|
||||
$('#init-go').click(function() {
|
||||
var parsedNumber = libphonenumber.util.verifyNumber($('#number').val(), $('#regionCode').val());
|
||||
if (!isCodeValid()) {
|
||||
updateCodeColor();
|
||||
return;
|
||||
function validateCode() {
|
||||
var verificationCode = $('#code').val().replace(/\D/g, '');
|
||||
if (verificationCode.length == 6) {
|
||||
return verificationCode;
|
||||
}
|
||||
};
|
||||
|
||||
$('#init-setup').hide();
|
||||
$('#verify1').hide();
|
||||
$('#verify2done').text('');
|
||||
$('#verify3done').text('');
|
||||
$('#verify4done').text('');
|
||||
$('#verify5').hide();
|
||||
$('#verify').show();
|
||||
|
||||
textsecure.registerSingleDevice(parsedNumber, $('#code').val(), function(step) {
|
||||
switch(step) {
|
||||
case 1:
|
||||
$('#verify2done').text('done');
|
||||
break;
|
||||
case 2:
|
||||
$('#verify3done').text('done');
|
||||
break;
|
||||
case 3:
|
||||
$('#complete-number').text(parsedNumber);
|
||||
$('#verify').hide();
|
||||
$('#setup-complete').show();
|
||||
registrationDone();
|
||||
}
|
||||
}).catch(function(error) {
|
||||
//TODO: No alerts...
|
||||
if (error.humanError)
|
||||
alert(error.humanError);
|
||||
else
|
||||
alert(error); //XXX
|
||||
});
|
||||
});
|
||||
function displayError(error) {
|
||||
$('#error').hide().text(error).fadeIn();
|
||||
};
|
||||
|
||||
textsecure.registerOnLoadFunction(function() {
|
||||
$(function() {
|
||||
if (!isRegistrationDone()) {
|
||||
$('#init-setup').show();
|
||||
if (isRegistrationDone()) {
|
||||
$('#complete-number').text(textsecure.utils.unencodeNumber(textsecure.storage.getUnencrypted("number_id"))[0]);//TODO: no
|
||||
$('#setup-complete').show();
|
||||
} else {
|
||||
$('#choose-setup').show();
|
||||
$('#number').keyup(validateNumber);
|
||||
$('#regionCode').change(validateNumber);
|
||||
|
||||
var countrys = libphonenumber.util.getAllRegionCodes();
|
||||
$.each(countrys, function (regionCode, countryName) {
|
||||
$('#regionCode').append($('<option>', {
|
||||
value: regionCode,
|
||||
text : countryName
|
||||
}));
|
||||
$.each(libphonenumber.util.getAllRegionCodes(), function (regionCode, countryName) {
|
||||
$('#regionCode').append(
|
||||
$('<option>', { value: regionCode, text: countryName })
|
||||
);
|
||||
});
|
||||
|
||||
$('#regionCode').change(function(){
|
||||
$('#countrycode').val(libphonenumber.util.getCountryCodeForRegion(this.value));
|
||||
updateNumberColors();
|
||||
$('#code').on('change', function() {
|
||||
if (!validateCode())
|
||||
$('#code').addClass('invalid');
|
||||
else
|
||||
$('#code').removeClass('invalid');
|
||||
});
|
||||
|
||||
$('#countrycode').keyup(function(){
|
||||
$('#regionCode').val(libphonenumber.util.getRegionCodeForCountryCode($('#countrycode').val()));
|
||||
updateNumberColors();
|
||||
$('#request-voice').click(function() {
|
||||
var number = validateNumber();
|
||||
if (number) {
|
||||
textsecure.api.requestVerificationVoice(number).catch(displayError);
|
||||
$('#step2').fadeIn();
|
||||
} else {
|
||||
$('#number-container').addClass('invalid');
|
||||
}
|
||||
});
|
||||
|
||||
$('#number').change(updateNumberColors);
|
||||
$('#request-sms').click(function() {
|
||||
var number = validateNumber();
|
||||
if (number) {
|
||||
textsecure.api.requestVerificationSMS(number).catch(displayError);
|
||||
$('#step2').fadeIn();
|
||||
} else {
|
||||
$('#number-container').addClass('invalid');
|
||||
}
|
||||
});
|
||||
|
||||
// handle form data cached by the browser (after a page ref
|
||||
$('#regionCode').val(libphonenumber.util.getRegionCodeForCountryCode($('#countrycode').val()));
|
||||
updateNumberColors();
|
||||
$('#new-account').click(function(){
|
||||
$('#choose-setup').fadeOut(function() {
|
||||
$('#single-device').fadeIn();
|
||||
});
|
||||
|
||||
textsecure.crypto.prepareTempWebsocket().then(function(cryptoInfo) {
|
||||
var qrCode = new QRCode(document.getElementById('setup-qr'));
|
||||
var socket = textsecure.api.getTempWebsocket();
|
||||
$('#single-device .back').click(function() {
|
||||
$('#single-device').fadeOut(function() {
|
||||
$('#choose-setup').fadeIn();
|
||||
$('#number').removeClass('invalid');
|
||||
});
|
||||
});
|
||||
|
||||
socket.onmessage = function(message) {
|
||||
if (message.uuid) {
|
||||
qrCode.makeCode('textsecure-device-init:/' +
|
||||
'?channel_uuid=' + message.uuid +
|
||||
'&channel_server=' + textsecure.api.relay +
|
||||
'&publicKey=' + btoa(getString(cryptoInfo.publicKey)));
|
||||
$('img').removeAttr('style');
|
||||
$('#left-connecting').hide();
|
||||
$('#left-setup').show();
|
||||
$('#left-reconnecting').hide();
|
||||
} else {
|
||||
$('#init-setup').hide();
|
||||
$('#verify1done').text('');
|
||||
$('#single-device form').submit(function(e) {
|
||||
e.preventDefault();
|
||||
$('#error').hide();
|
||||
var number = validateNumber();
|
||||
var verificationCode = validateCode();
|
||||
if (number && verificationCode) {
|
||||
$('#verify1').hide();
|
||||
$('#verify2done').text('');
|
||||
$('#verify3done').text('');
|
||||
$('#verify4done').text('');
|
||||
$('#verify5done').text('');
|
||||
$('#verify5').hide();
|
||||
$('#verify').show();
|
||||
|
||||
|
||||
textsecure.registerSecondDevice(cryptoInfo, message.message, function(step) {
|
||||
textsecure.registerSingleDevice(number, verificationCode, function(step) {
|
||||
switch(step) {
|
||||
case 1:
|
||||
$('#verify1done').text('done');
|
||||
break;
|
||||
case 2:
|
||||
$('#verify2done').text('done');
|
||||
break;
|
||||
case 3:
|
||||
case 2:
|
||||
$('#verify3done').text('done');
|
||||
break;
|
||||
case 4:
|
||||
//TODO: User needs to verify number before we continue
|
||||
$('#complete-number').text(parsedNumber);
|
||||
$('#verify4done').text('done');
|
||||
case 5:
|
||||
case 3:
|
||||
$('#complete-number').text(number);
|
||||
$('#verify').hide();
|
||||
$('#setup-complete').show();
|
||||
registrationDone();
|
||||
}
|
||||
}).catch(function(error) {
|
||||
//TODO: No alerts...
|
||||
if (error.humanError)
|
||||
displayError(error.humanError);
|
||||
else
|
||||
displayError(error); //XXX
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
socket.ondisconnect = function() {
|
||||
$('#left-connecting').hide();
|
||||
$('#left-setup').hide();
|
||||
$('#left-reconnecting').show();
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
$('#new-device').click(function(){
|
||||
$('#choose-setup').fadeOut(function() {
|
||||
$('#multi-device').fadeIn();
|
||||
});
|
||||
|
||||
$('#multi-device .back').click(function() {
|
||||
$('#multi-device').fadeOut(function() {
|
||||
$('#choose-setup').fadeIn();
|
||||
$('#number').removeClass('invalid');
|
||||
});
|
||||
});
|
||||
|
||||
$('#multi-device .status').text("Connecting...");
|
||||
$('#setup-qr').html('');
|
||||
textsecure.crypto.prepareTempWebsocket().then(function(cryptoInfo) {
|
||||
var qrCode = new QRCode(document.getElementById('setup-qr'));
|
||||
var socket = textsecure.api.getTempWebsocket();
|
||||
|
||||
socket.onmessage = function(message) {
|
||||
if (message.uuid) {
|
||||
qrCode.makeCode('textsecure-device-init:/' +
|
||||
'?channel_uuid=' + message.uuid +
|
||||
'&channel_server=' + textsecure.api.relay +
|
||||
'&publicKey=' + btoa(getString(cryptoInfo.publicKey)));
|
||||
$('img').removeAttr('style');
|
||||
$('#multi-device .status').text("Use your phone to scan the QR code.")
|
||||
} else {
|
||||
$('#init-setup').hide();
|
||||
$('#verify1done').text('');
|
||||
$('#verify2done').text('');
|
||||
$('#verify3done').text('');
|
||||
$('#verify4done').text('');
|
||||
$('#verify5done').text('');
|
||||
$('#verify').show();
|
||||
|
||||
|
||||
textsecure.registerSecondDevice(cryptoInfo, message.message, function(step) {
|
||||
switch(step) {
|
||||
case 1:
|
||||
$('#verify1done').text('done');
|
||||
break;
|
||||
case 2:
|
||||
$('#verify2done').text('done');
|
||||
break;
|
||||
case 3:
|
||||
$('#verify3done').text('done');
|
||||
break;
|
||||
case 4:
|
||||
//TODO: User needs to verify number before we continue
|
||||
$('#complete-number').text(parsedNumber);
|
||||
$('#verify4done').text('done');
|
||||
case 5:
|
||||
$('#verify').hide();
|
||||
$('#setup-complete').show();
|
||||
registrationDone();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
socket.ondisconnect = function() {
|
||||
$('#multi-device .status').text("The push server disconnected, please wait while we reconnect...");
|
||||
};
|
||||
});
|
||||
});
|
||||
} else {
|
||||
$('#complete-number').text(textsecure.utils.unencodeNumber(textsecure.storage.getUnencrypted("number_id"))[0]);//TODO: no
|
||||
$('#setup-complete').show();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue