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

Create install flow

Browse source 
* Refactor options.js into a view
* Break up install flow into a series of screens
* Remove bootstrap
* Make installer window static size, mostly to facilitate positioning

// FREEBIE
This commit is contained in:
lilia 2015-11-02 19:19:30 -08:00
parent 675be2b569
commit 14cb6b58a2
12 changed files with 1299 additions and 6461 deletions
Download patch file Download diff file Expand all files Collapse all files

4
js/chromium.js
View file

@ -165,7 +165,9 @@
extension.windows.open({
id: id,
url: url,
bounds: { width: 800, height: 666 }
bounds: { width: 800, height: 666, },
minWidth: 800,
minHeight: 666
});
}
};

130
js/options.js
View file

@ -4,97 +4,49 @@
;(function() {
'use strict';
extension.windows.getBackground(function(bg) {
$('.notifications .on button').click(function() {
bg.Whisper.Notifications.disable();
initOptions();
});
$('.notifications .off button').click(function() {
bg.Whisper.Notifications.enable(initOptions);
initOptions();
});
function initOptions() {
if (bg.Whisper.Notifications.isEnabled()) {
$('.notifications .on').show();
$('.notifications .off').hide();
} else {
$('.notifications .on').hide();
$('.notifications .off').show();
}
}
function setProvisioningUrl(url) {
$('#status').text('');
new QRCode($('#qr')[0]).makeCode(url);
}
function confirmNumber(number) {
return new Promise(function(resolve, reject) {
$('#qr').hide();
$('.confirmation-dialog .number').text(number);
$('.confirmation-dialog .cancel').click(function(e) {
reject();
bg.storage.onready(function() {
$(function() {
var view = new Whisper.InstallView({
el: $('#install'),
deviceName: bg.textsecure.storage.user.getDeviceName()
});
$('.confirmation-dialog .ok').click(function(e) {
e.stopPropagation();
var name = $('#device-name').val();
if (name.trim().length === 0) {
return;
}
$('.confirmation-dialog').hide();
$('.progress-dialog').show();
$('.progress-dialog .status').text('Generating Keys');
resolve(name);
});
$('.modal-container').show();
if (bg.textsecure.registration.isDone()) {
view.selectStep(3);
}
view.$el.show();
var accountManager = new bg.getAccountManager();
var init = function() {
view.clearQR();
accountManager.registerSecondDevice(
view.setProvisioningUrl.bind(view),
view.confirmNumber.bind(view),
view.incrementCounter.bind(view)
).then(function() {
var launch = function() {
bg.openInbox();
bg.removeEventListener('textsecure:contactsync', launch);
clearTimeout(timeout);
window.close();
};
var timeout = setTimeout(launch, 60000);
bg.addEventListener('textsecure:contactsync', launch);
view.showSync();
}).catch(function(e) {
if (e.message === 'websocket closed') {
init();
} else if (e.name === 'HTTPError' && e.code == 411) {
view.showTooManyDevices();
}
else {
throw e;
}
});
};
$('.error-dialog .ok').click(init);
init();
});
}
var counter = 0;
function incrementCounter() {
$('.progress-dialog .bar').css('width', (++counter * 100 / 100) + '%');
}
$('.modal-container .cancel').click(function() {
$('.modal-container').hide();
});
$(function() {
var accountManager = new bg.getAccountManager();
var init = function() {
$('#init-setup').show().addClass('in');
$('#qr').html('');
$('#status').text("Connecting...");
accountManager.registerSecondDevice(setProvisioningUrl, confirmNumber, incrementCounter).then(function() {
var launch = function() {
bg.openInbox();
bg.removeEventListener('textsecure:contactsync', launch);
clearTimeout(timeout);
window.close();
};
var timeout = setTimeout(launch, 60000);
bg.addEventListener('textsecure:contactsync', launch);
$('.progress-dialog .status').text('Syncing groups and contacts');
$('.progress-dialog .bar').addClass('progress-bar-striped active');
}).catch(function(e) {
if (e.message === 'websocket closed') {
init();
} else if (e.name === 'HTTPError' && e.code == 411) {
$('.progress-dialog').hide();
$('.error-dialog').show();
$('.error-dialog .ok').click(function(e) {
chrome.runtime.reload();
});
}
else {
throw e;
}
});
};
init();
});
});
})();

67
js/views/install_view.js Normal file
View file

@ -0,0 +1,67 @@
/*
* vim: ts=4:sw=4:expandtab
*/
(function () {
'use strict';
window.Whisper = window.Whisper || {};
Whisper.InstallView = Whisper.View.extend({
initialize: function(options) {
this.counter = 0;
this.$('#device-name').val(options.deviceName);
this.$('#step1').show();
},
events: function() {
return {
'click .step1': this.selectStep.bind(this, 1),
'click .step2': this.selectStep.bind(this, 2),
'click .step3': this.selectStep.bind(this, 3)
};
},
clearQR: function() {
this.$('#qr').text("Connecting...");
},
setProvisioningUrl: function(url) {
this.$('#qr').html('');
new QRCode(this.$('#qr')[0]).makeCode(url);
},
confirmNumber: function(number) {
this.$('#step4 .number').text(libphonenumber.format(
libphonenumber.parse(number),
libphonenumber.PhoneNumberFormat.INTERNATIONAL
));
this.selectStep(4);
this.$('#device-name').focus();
return new Promise(function(resolve, reject) {
this.$('#step4 .cancel').click(function(e) {
reject();
});
this.$('#sync').click(function(e) {
e.stopPropagation();
var name = this.$('#device-name').val();
if (name.trim().length === 0) {
this.$('#device-name').focus();
return;
}
this.$('.progress-dialog .status').text('Generating Keys');
this.selectStep(5);
resolve(name);
}.bind(this));
}.bind(this));
},
incrementCounter: function() {
this.$('.progress-dialog .bar').css('width', (++this.counter * 100 / 100) + '%');
},
selectStep: function(step) {
this.$('.step').hide();
this.$('#step' + step).show();
},
showSync: function() {
this.$('.progress-dialog .status').text('Syncing groups and contacts');
this.$('.progress-dialog .bar').addClass('progress-bar-striped active');
},
showTooManyDevices: function() {
this.selectStep('TooManyDevices');
}
});
})();