keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

Refactor install view

Browse Source 
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
pull/749/head
lilia 8 years ago
parent df65585e71
commit 44a4ff3b52
5 changed files with 152 additions and 142 deletions
Show Stats Download Patch File Download Diff File

90
background.html
Unescape Escape View File

@ -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>

5
js/background.js
Unescape Escape View File

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

59
js/options.js
Unescape Escape View File

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

49
js/views/install_view.js
Unescape Escape View File

@ -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
Unescape Escape View File

@ -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>

Write Preview
Loading…
Cancel
Save