Refactor install view
Let install view manage the connection to the provisioning socket as well as cleaning up the window on completion, simplifying options.js. Call `remove` so that the view stops listening when the window closes. Move view script and template to background page. Adds ability to hide nav if this isn't our first run. // FREEBIE
This commit is contained in:
lilia
parent
df65585e71
commit
44a4ff3b52
5 changed files with 152 additions and 142 deletions
|
|
@ -508,6 +508,95 @@
|
|||
{{/action }}
|
||||
</script>
|
||||
|
||||
<script type='text/x-tmpl-mustache' id='install_flow_template'>
|
||||
<div id='step1' class='step'>
|
||||
<div class='inner'>
|
||||
<div class='step-body'>
|
||||
<img id='signal-icon' src='/images/icon_250.png'/>
|
||||
<h1>{{ installWelcome }}</h1>
|
||||
<p>{{ installTagline }}</p>
|
||||
</div>
|
||||
<div class='nav'>
|
||||
<div> <a class='button step2'>{{ installGetStartedButton }}</a> </div>
|
||||
<span class='dot step1 selected'></span>
|
||||
<span class='dot step2'></span>
|
||||
<span class='dot step3'></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='step2' class='step'>
|
||||
<div class='inner'>
|
||||
<div class='step-body'>
|
||||
<img id='signal-phone' src='/images/signal-phone.png'>
|
||||
<p>{{{ installSignalLink }}}</p>
|
||||
</div>
|
||||
<div class='nav'>
|
||||
<div> <a class='button step3'>{{ installIHaveSignalButton }}</a> </div>
|
||||
<span class='dot step1'></span>
|
||||
<span class='dot step2 selected'></span>
|
||||
<span class='dot step3'></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='step3' class='step'>
|
||||
<div class='inner'>
|
||||
<div class='step-body'>
|
||||
<div id="qr"></div>
|
||||
<p>{{ installAndroidInstructions }}</p>
|
||||
</div>
|
||||
<div class='nav'>
|
||||
<span class='dot step1'></span>
|
||||
<span class='dot step2'></span>
|
||||
<span class='dot step3 selected'></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id='step4' class='step'>
|
||||
<div class='inner'>
|
||||
<div class='step-body'>
|
||||
<p>{{ installLinkingWithNumber }}</p>
|
||||
<h2 class='number'></h2>
|
||||
<img id='signal-computer' src='/images/signal-laptop.png'>
|
||||
<p>{{ installComputerName }}</p>
|
||||
<div>
|
||||
<input type='text' id='device-name' spellcheck='false' maxlength='50' />
|
||||
</div>
|
||||
</div>
|
||||
<div class='nav'>
|
||||
<div>
|
||||
<input type='submit' class='button' id='sync' value='{{ installFinalButton }}' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id='step5' class='step'>
|
||||
<div class='inner'>
|
||||
<div class='step-body'>
|
||||
<img id='signal-icon' src='/images/icon_250.png'/>
|
||||
<div class='progress-dialog'>
|
||||
<p class='status'></p>
|
||||
<div class='bar-container'><div class='bar progress-bar'></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='nav'>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='stepTooManyDevices' class='step'>
|
||||
<div class='inner error-dialog clearfix'>
|
||||
<div class='panel step-body'>{{ installTooManyDevices }}</div>
|
||||
<div class='nav'>
|
||||
<button class='ok step3'>{{ ok }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type='text/javascript' src='js/components.js'></script>
|
||||
<script type='text/javascript' src='js/database.js'></script>
|
||||
<script type='text/javascript' src='js/debugLog.js'></script>
|
||||
|
|
@ -559,6 +648,7 @@
|
|||
<script type='text/javascript' src='js/views/confirmation_dialog_view.js'></script>
|
||||
<script type='text/javascript' src='js/views/identicon_svg_view.js'></script>
|
||||
<script type='text/javascript' src='js/views/settings_view.js'></script>
|
||||
<script type="text/javascript" src="js/views/install_view.js"></script>
|
||||
|
||||
<script type='text/javascript' src='js/wall_clock_listener.js'></script>
|
||||
<script type='text/javascript' src='js/rotate_signed_prekey_listener.js'></script>
|
||||
|
|
|
|||
|
|
@ -126,14 +126,15 @@
|
|||
storage.put('theme-setting', 'ios');
|
||||
}
|
||||
var syncRequest = new textsecure.SyncRequest(textsecure.messaging, messageReceiver);
|
||||
Whisper.events.trigger('contactsync:begin');
|
||||
syncRequest.addEventListener('success', function() {
|
||||
console.log('sync successful');
|
||||
storage.put('synced_at', Date.now());
|
||||
window.dispatchEvent(new Event('textsecure:contactsync'));
|
||||
Whisper.events.trigger('contactsync');
|
||||
});
|
||||
syncRequest.addEventListener('timeout', function() {
|
||||
console.log('sync timed out');
|
||||
window.dispatchEvent(new Event('textsecure:contactsync'));
|
||||
Whisper.events.trigger('contactsync');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,56 +6,19 @@
|
|||
extension.windows.getBackground(function(bg) {
|
||||
bg.storage.onready(function() {
|
||||
$(function() {
|
||||
var deviceName = bg.textsecure.storage.user.getDeviceName();
|
||||
if (!deviceName) {
|
||||
deviceName = 'Chrome';
|
||||
if (navigator.userAgent.match('Mac OS')) {
|
||||
deviceName += ' on Mac';
|
||||
} else if (navigator.userAgent.match('Linux')) {
|
||||
deviceName += ' on Linux';
|
||||
} else if (navigator.userAgent.match('Windows')) {
|
||||
deviceName += ' on Windows';
|
||||
}
|
||||
}
|
||||
var view = new Whisper.InstallView({
|
||||
el: $('#install'),
|
||||
deviceName: deviceName
|
||||
var Whisper = bg.Whisper;
|
||||
var installView = new Whisper.InstallView({
|
||||
el: $('#install')
|
||||
});
|
||||
if (bg.Whisper.Registration.everDone()) {
|
||||
view.selectStep(3);
|
||||
if (Whisper.Registration.everDone()) {
|
||||
installView.selectStep(3);
|
||||
installView.hideDots();
|
||||
}
|
||||
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);
|
||||
window.close();
|
||||
};
|
||||
bg.addEventListener('textsecure:contactsync', launch);
|
||||
view.showSync();
|
||||
}).catch(function(e) {
|
||||
if (e.message === 'websocket closed') {
|
||||
view.showConnectionError();
|
||||
setTimeout(init, 10000);
|
||||
} else if (e.name === 'HTTPError' && e.code == 411) {
|
||||
view.showTooManyDevices();
|
||||
}
|
||||
else {
|
||||
throw e;
|
||||
}
|
||||
});
|
||||
};
|
||||
$('.error-dialog .ok').click(init);
|
||||
init();
|
||||
installView.$el.show();
|
||||
Whisper.events.on('contactsync', function() {
|
||||
bg.openInbox();
|
||||
window.close();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
|
||||
Whisper.InstallView = Whisper.View.extend({
|
||||
templateName: 'install_flow_template',
|
||||
id: 'install',
|
||||
className: 'main',
|
||||
render_attributes: function() {
|
||||
var playStoreHref = 'https://play.google.com/store/apps/details?id=org.thoughtcrime.securesms';
|
||||
var appStoreHref = 'https://itunes.apple.com/us/app/signal-private-messenger/id874139669';
|
||||
|
|
@ -31,11 +33,53 @@
|
|||
|
||||
this.render();
|
||||
|
||||
this.$('#device-name').val(options.deviceName);
|
||||
var deviceName = textsecure.storage.user.getDeviceName();
|
||||
if (!deviceName) {
|
||||
deviceName = 'Chrome';
|
||||
if (navigator.userAgent.match('Mac OS')) {
|
||||
deviceName += ' on Mac';
|
||||
} else if (navigator.userAgent.match('Linux')) {
|
||||
deviceName += ' on Linux';
|
||||
} else if (navigator.userAgent.match('Windows')) {
|
||||
deviceName += ' on Windows';
|
||||
}
|
||||
}
|
||||
|
||||
this.$('#device-name').val(deviceName);
|
||||
this.$('#step1').show();
|
||||
this.connect();
|
||||
this.on('disconnected', this.reconnect);
|
||||
this.listenTo(Whisper.events, 'contactsync:begin', this.showSync);
|
||||
this.listenTo(Whisper.events, 'contactsync', this.close);
|
||||
},
|
||||
connect: function() {
|
||||
this.clearQR();
|
||||
var accountManager = getAccountManager();
|
||||
accountManager.registerSecondDevice(
|
||||
this.setProvisioningUrl.bind(this),
|
||||
this.confirmNumber.bind(this),
|
||||
this.incrementCounter.bind(this)
|
||||
).catch(this.handleDisconnect.bind(this));
|
||||
},
|
||||
handleDisconnect: function(e) {
|
||||
if (e.message === 'websocket closed') {
|
||||
this.showConnectionError();
|
||||
this.trigger('disconnected');
|
||||
} else if (e.name === 'HTTPError' && e.code == 411) {
|
||||
this.showTooManyDevices();
|
||||
} else {
|
||||
throw e;
|
||||
}
|
||||
},
|
||||
reconnect: function() {
|
||||
setTimeout(this.connect.bind(this), 10000);
|
||||
},
|
||||
close: function() {
|
||||
this.remove();
|
||||
},
|
||||
events: function() {
|
||||
return {
|
||||
'click .error-dialog .ok': 'connect',
|
||||
'click .step1': this.selectStep.bind(this, 1),
|
||||
'click .step2': this.selectStep.bind(this, 2),
|
||||
'click .step3': this.selectStep.bind(this, 3)
|
||||
|
|
@ -94,6 +138,9 @@
|
|||
},
|
||||
showConnectionError: function() {
|
||||
this.$('#qr').text(i18n("installConnectionFailed"));
|
||||
},
|
||||
hideDots: function() {
|
||||
this.$('#step3 .nav .dot').hide();
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
91
options.html
91
options.html
|
|
@ -8,94 +8,6 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id='install' class='main'>
|
||||
<script type='text/x-tmpl-mustache' id='install_flow_template'>
|
||||
<div id='step1' class='step'>
|
||||
<div class='inner'>
|
||||
<div class='step-body'>
|
||||
<img id='signal-icon' src='/images/icon_250.png'/>
|
||||
<h1>{{ installWelcome }}</h1>
|
||||
<p>{{ installTagline }}</p>
|
||||
</div>
|
||||
<div class='nav'>
|
||||
<div> <a class='button step2'>{{ installGetStartedButton }}</a> </div>
|
||||
<span class='dot step1 selected'></span>
|
||||
<span class='dot step2'></span>
|
||||
<span class='dot step3'></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='step2' class='step'>
|
||||
<div class='inner'>
|
||||
<div class='step-body'>
|
||||
<img id='signal-phone' src='/images/signal-phone.png'>
|
||||
<p>{{{ installSignalLink }}}</p>
|
||||
</div>
|
||||
<div class='nav'>
|
||||
<div> <a class='button step3'>{{ installIHaveSignalButton }}</a> </div>
|
||||
<span class='dot step1'></span>
|
||||
<span class='dot step2 selected'></span>
|
||||
<span class='dot step3'></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='step3' class='step'>
|
||||
<div class='inner'>
|
||||
<div class='step-body'>
|
||||
<div id="qr"></div>
|
||||
<p>{{ installAndroidInstructions }}</p>
|
||||
</div>
|
||||
<div class='nav'>
|
||||
<span class='dot step1'></span>
|
||||
<span class='dot step2'></span>
|
||||
<span class='dot step3 selected'></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id='step4' class='step'>
|
||||
<div class='inner'>
|
||||
<div class='step-body'>
|
||||
<p>{{ installLinkingWithNumber }}</p>
|
||||
<h2 class='number'></h2>
|
||||
<img id='signal-computer' src='/images/signal-laptop.png'>
|
||||
<p>{{ installComputerName }}</p>
|
||||
<div>
|
||||
<input type='text' id='device-name' spellcheck='false' maxlength='50' />
|
||||
</div>
|
||||
</div>
|
||||
<div class='nav'>
|
||||
<div>
|
||||
<input type='submit' class='button' id='sync' value='{{ installFinalButton }}' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id='step5' class='step'>
|
||||
<div class='inner'>
|
||||
<div class='step-body'>
|
||||
<img id='signal-icon' src='/images/icon_250.png'/>
|
||||
<div class='progress-dialog'>
|
||||
<p class='status'></p>
|
||||
<div class='bar-container'><div class='bar progress-bar'></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='nav'>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id='stepTooManyDevices' class='step'>
|
||||
<div class='inner error-dialog clearfix'>
|
||||
<div class='panel step-body'>{{ installTooManyDevices }}</div>
|
||||
<div class='nav'>
|
||||
<button class='ok step3'>{{ ok }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="js/components.js"></script>
|
||||
|
|
@ -106,9 +18,6 @@
|
|||
<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/whisper_view.js"></script>
|
||||
<script type="text/javascript" src="js/views/phone-input-view.js"></script>
|
||||
<script type="text/javascript" src="js/views/install_view.js"></script>
|
||||
<script type="text/javascript" src="js/options.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue