Dialogs for device pairing requests - Primary device side

pull/433/head
sachaaaaa 6 years ago
parent 33d789b688
commit ac4038e86a

@ -245,6 +245,40 @@
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='device-pairing-dialog'>
<div class="content">
<!-- Waiting for request -->
<div class="waitingForRequestView">
<h4>{{ waitingForRequestTitle }}</h4>
<div class='buttons'>
<button class="cancel">{{ cancelText }}</button>
</div>
</div>
<!-- Request Received -->
<div class="requestReceivedView" style="display: none;">
<h4>{{ requestReceivedTitle }}</h4>
Please verify that the pubkey shown here is your secondary device pubkey!
<p class="secondaryPubKey"></p>
<div class='buttons'>
<button class="skip">{{ skipText }}</button>
<button id="allowPairing">{{ allowPairingText }}</button>
</div>
</div>
<!-- Request accepted -->
<div class="requestAcceptedView" style="display: none;">
<h4>{{ requestAcceptedTitle }}</h4>
Sending pairing authorisation to:
<p class="secondaryPubKey"></p>
<p class="transmissionStatus">Please be patient...</p>
<div class='buttons'>
<button class="ok" style="display: none;">{{ okText }}</button>
</div>
</div>
</div>
</script>
<script type='text/x-tmpl-mustache' id='beta-disclaimer-dialog'>
<div class="content">
<div class="betaDisclaimerView" style="display: none;">
@ -693,6 +727,7 @@
<script type='text/javascript' src='js/views/app_view.js'></script>
<script type='text/javascript' src='js/views/import_view.js'></script>
<script type='text/javascript' src='js/views/clear_data_view.js'></script>
<script type='text/javascript' src='js/views/device_pairing_dialog_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>

@ -196,5 +196,15 @@
const dialog = new Whisper.SeedDialogView({ seed });
this.el.append(dialog.el);
},
showDevicePairingDialog() {
const dialog = new Whisper.DevicePairingDialogView();
Whisper.events.on('devicePairingRequestReceived', pubKey =>
dialog.requestReceived(pubKey)
);
dialog.on('devicePairingRequestAccepted', (pubKey, cb) =>
Whisper.events.trigger('devicePairingRequestAccepted', pubKey, cb)
);
this.el.append(dialog.el);
},
});
})();

@ -0,0 +1,91 @@
/* global Whisper, i18n */
// eslint-disable-next-line func-names
(function() {
'use strict';
window.Whisper = window.Whisper || {};
Whisper.DevicePairingDialogView = Whisper.View.extend({
className: 'loki-dialog device-pairing-dialog modal',
templateName: 'device-pairing-dialog',
initialize() {
this.pubKeyRequests = [];
this.pubKey = null;
this.accepted = false;
this.view = '';
this.render();
this.showView();
},
events: {
'click .waitingForRequestView .cancel': 'close',
'click .requestReceivedView .skip': 'skipDevice',
'click #allowPairing': 'allowDevice',
'click .requestAcceptedView .ok': 'close',
},
render_attributes() {
return {
waitingForRequestTitle: 'Waiting for device to register...',
requestReceivedTitle: 'Device Pairing Received',
requestAcceptedTitle: 'Device Pairing Accepted',
cancelText: i18n('cancel'),
skipText: 'Skip',
okText: i18n('ok'),
allowPairingText: 'Allow Pairing',
};
},
requestReceived(secondaryDevicePubKey) {
// FIFO: push at the front of the array with unshift()
this.pubKeyRequests.unshift(secondaryDevicePubKey);
if (!this.pubKey) {
this.nextPubKey();
this.showView('requestReceived');
}
},
allowDevice() {
this.accepted = true;
this.trigger('devicePairingRequestAccepted', this.pubKey, errors =>
this.transmisssionCB(errors)
);
this.showView();
},
transmisssionCB(errors) {
if (!errors) {
this.$('.transmissionStatus').text('Sent successfully');
} else {
this.$('.transmissionStatus').text(errors);
}
this.$('.requestAcceptedView .ok').show();
},
skipDevice() {
this.nextPubKey();
this.showView();
},
nextPubKey() {
// FIFO: pop at the back of the array using pop()
this.pubKey = this.pubKeyRequests.pop();
},
showView() {
const waitingForRequestView = this.$('.waitingForRequestView');
const requestReceivedView = this.$('.requestReceivedView');
const requestAcceptedView = this.$('.requestAcceptedView');
if (this.accepted) {
requestReceivedView.hide();
waitingForRequestView.hide();
requestAcceptedView.show();
} else if (this.pubKey) {
this.$('.secondaryPubKey').text(this.pubKey);
requestReceivedView.show();
waitingForRequestView.hide();
requestAcceptedView.hide();
} else {
waitingForRequestView.show();
requestReceivedView.hide();
requestAcceptedView.hide();
}
},
close() {
this.remove();
},
});
})();
Loading…
Cancel
Save