QR code completion
Vincent
5 years ago
parent
798eb402cb
commit
659d4412bd
@ -0,0 +1,209 @@
|
||||
/* global
|
||||
Whisper,
|
||||
i18n,
|
||||
libloki,
|
||||
textsecure,
|
||||
ConversationController,
|
||||
$,
|
||||
QRCode,
|
||||
*/
|
||||
|
||||
// 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.reset();
|
||||
this.render();
|
||||
this.showView();
|
||||
this.qr = new QRCode(this.$('#qr')[0], {
|
||||
correctLevel: QRCode.CorrectLevel.L,
|
||||
});
|
||||
this.qr.makeCode(textsecure.storage.user.getNumber());
|
||||
},
|
||||
reset() {
|
||||
this.pubKey = null;
|
||||
this.accepted = false;
|
||||
this.isListening = false;
|
||||
this.pubKeyToUnpair = null;
|
||||
this.success = false;
|
||||
},
|
||||
events: {
|
||||
'click #startPairing': 'startReceivingRequests',
|
||||
'click #close': 'close',
|
||||
'click .waitingForRequestView .cancel': 'stopReceivingRequests',
|
||||
'click .requestReceivedView .skip': 'skipDevice',
|
||||
'click #allowPairing': 'allowDevice',
|
||||
'click .requestAcceptedView .ok': 'stopReceivingRequests',
|
||||
'click .confirmUnpairView .cancel': 'stopReceivingRequests',
|
||||
'click .confirmUnpairView .unpairDevice': 'confirmUnpairDevice',
|
||||
},
|
||||
render_attributes() {
|
||||
return {
|
||||
defaultTitle: i18n('pairedDevices'),
|
||||
waitingForRequestTitle: i18n('waitingForDeviceToRegister'),
|
||||
requestReceivedTitle: i18n('devicePairingReceived'),
|
||||
requestAcceptedTitle: i18n('devicePairingAccepted'),
|
||||
startPairingText: i18n('pairNewDevice'),
|
||||
cancelText: i18n('cancel'),
|
||||
unpairDevice: i18n('unpairDevice'),
|
||||
closeText: i18n('close'),
|
||||
skipText: i18n('skip'),
|
||||
okText: i18n('ok'),
|
||||
allowPairingText: i18n('allowPairing'),
|
||||
confirmUnpairViewTitle: i18n('confirmUnpairingTitle'),
|
||||
};
|
||||
},
|
||||
startReceivingRequests() {
|
||||
this.trigger('startReceivingRequests');
|
||||
this.isListening = true;
|
||||
this.showView();
|
||||
},
|
||||
stopReceivingRequests() {
|
||||
if (this.success) {
|
||||
const deviceAlias = this.$('#deviceAlias')[0].value.trim();
|
||||
const conv = ConversationController.get(this.pubKey);
|
||||
if (conv) {
|
||||
conv.setNickname(deviceAlias);
|
||||
}
|
||||
}
|
||||
this.trigger('stopReceivingRequests');
|
||||
this.reset();
|
||||
this.showView();
|
||||
},
|
||||
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(i18n('provideDeviceAlias'));
|
||||
this.$('#deviceAliasView').show();
|
||||
this.$('#deviceAlias').on('input', e => {
|
||||
if (e.target.value.trim()) {
|
||||
this.$('.requestAcceptedView .ok').removeAttr('disabled');
|
||||
} else {
|
||||
this.$('.requestAcceptedView .ok').attr('disabled', true);
|
||||
}
|
||||
});
|
||||
this.$('.requestAcceptedView .ok').show();
|
||||
this.$('.requestAcceptedView .ok').attr('disabled', true);
|
||||
this.success = true;
|
||||
} else {
|
||||
this.$('.transmissionStatus').text(errors);
|
||||
this.$('.requestAcceptedView .ok').show();
|
||||
}
|
||||
},
|
||||
skipDevice() {
|
||||
this.trigger('devicePairingRequestRejected', this.pubKey);
|
||||
this.nextPubKey();
|
||||
this.showView();
|
||||
},
|
||||
nextPubKey() {
|
||||
// FIFO: pop at the back of the array using pop()
|
||||
this.pubKey = this.pubKeyRequests.pop();
|
||||
},
|
||||
async confirmUnpairDevice() {
|
||||
this.trigger('deviceUnpairingRequested', this.pubKeyToUnpair);
|
||||
this.reset();
|
||||
this.showView();
|
||||
},
|
||||
requestUnpairDevice(pubKey) {
|
||||
this.pubKeyToUnpair = pubKey;
|
||||
this.showView();
|
||||
},
|
||||
getPubkeyName(pubKey) {
|
||||
const secretWords = window.mnemonic.pubkey_to_secret_words(pubKey);
|
||||
const conv = ConversationController.get(pubKey);
|
||||
const deviceAlias = conv ? conv.getNickname() : 'Unnamed Device';
|
||||
return `${deviceAlias} (pairing secret: <i>${secretWords}</i>)`;
|
||||
},
|
||||
async showView() {
|
||||
const defaultView = this.$('.defaultView');
|
||||
const waitingForRequestView = this.$('.waitingForRequestView');
|
||||
const requestReceivedView = this.$('.requestReceivedView');
|
||||
const requestAcceptedView = this.$('.requestAcceptedView');
|
||||
const confirmUnpairView = this.$('.confirmUnpairView');
|
||||
if (this.pubKeyToUnpair) {
|
||||
defaultView.hide();
|
||||
requestReceivedView.hide();
|
||||
waitingForRequestView.hide();
|
||||
requestAcceptedView.hide();
|
||||
confirmUnpairView.show();
|
||||
const name = this.getPubkeyName(this.pubKeyToUnpair);
|
||||
this.$('.confirmUnpairView #pubkey').html(name);
|
||||
} else if (!this.isListening) {
|
||||
requestReceivedView.hide();
|
||||
waitingForRequestView.hide();
|
||||
requestAcceptedView.hide();
|
||||
confirmUnpairView.hide();
|
||||
|
||||
const ourPubKey = textsecure.storage.user.getNumber();
|
||||
defaultView.show();
|
||||
const pubKeys = await libloki.storage.getSecondaryDevicesFor(ourPubKey);
|
||||
this.$('#pairedPubKeys').empty();
|
||||
if (pubKeys && pubKeys.length > 0) {
|
||||
this.$('#startPairing').attr('disabled', true);
|
||||
pubKeys.forEach(x => {
|
||||
const name = this.getPubkeyName(x);
|
||||
const li = $('<li>').html(name);
|
||||
if (window.lokiFeatureFlags.multiDeviceUnpairing) {
|
||||
const link = $('<a>')
|
||||
.text('Unpair')
|
||||
.attr('href', '#');
|
||||
link.on('click', () => this.requestUnpairDevice(x));
|
||||
li.append(' - ');
|
||||
li.append(link);
|
||||
}
|
||||
this.$('#pairedPubKeys').append(li);
|
||||
});
|
||||
} else {
|
||||
this.$('#startPairing').removeAttr('disabled');
|
||||
this.$('#pairedPubKeys').append('<li>No paired devices</li>');
|
||||
}
|
||||
} else if (this.accepted) {
|
||||
defaultView.hide();
|
||||
requestReceivedView.hide();
|
||||
waitingForRequestView.hide();
|
||||
requestAcceptedView.show();
|
||||
} else if (this.pubKey) {
|
||||
const secretWords = window.mnemonic.pubkey_to_secret_words(this.pubKey);
|
||||
this.$('.secretWords').text(secretWords);
|
||||
requestReceivedView.show();
|
||||
waitingForRequestView.hide();
|
||||
requestAcceptedView.hide();
|
||||
defaultView.hide();
|
||||
} else {
|
||||
waitingForRequestView.show();
|
||||
requestReceivedView.hide();
|
||||
requestAcceptedView.hide();
|
||||
defaultView.hide();
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.remove();
|
||||
this.qr.clear();
|
||||
if (this.pubKey && !this.accepted) {
|
||||
this.trigger('devicePairingRequestRejected', this.pubKey);
|
||||
}
|
||||
this.trigger('close');
|
||||
},
|
||||
});
|
||||
})();
|
||||
@ -0,0 +1,165 @@
|
||||
import React from 'react';
|
||||
import { QRCode } from 'react-qrcode'
|
||||
|
||||
import { SessionModal } from './session/SessionModal';
|
||||
import { SessionButton } from './session/SessionButton';
|
||||
|
||||
|
||||
interface Props {
|
||||
i18n: any,
|
||||
onClose: any,
|
||||
pubKeyToUnpair: string | null;
|
||||
pubKey: string | null;
|
||||
}
|
||||
|
||||
interface State {
|
||||
accepted: boolean;
|
||||
isListening: boolean;
|
||||
success: boolean;
|
||||
loading: boolean;
|
||||
data: Array<any>;
|
||||
}
|
||||
|
||||
export class DevicePairingDialog extends React.Component<Props, State> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
|
||||
this.closeDialog = this.closeDialog.bind(this);
|
||||
this.onKeyUp = this.onKeyUp.bind(this);
|
||||
this.startReceivingRequests = this.startReceivingRequests.bind(this);
|
||||
this.stopReceivingRequests = this.stopReceivingRequests.bind(this);
|
||||
this.getPubkeyName = this.getPubkeyName.bind(this);
|
||||
|
||||
this.state = {
|
||||
accepted: false,
|
||||
isListening: false,
|
||||
success: false,
|
||||
loading: true,
|
||||
data: [],
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getSecondaryDevices();
|
||||
}
|
||||
|
||||
private async getSecondaryDevices(){
|
||||
const secondaryDevices = await window.libloki.storage.getSecondaryDevicesFor(this.props.pubKey);
|
||||
this.setState({
|
||||
data: secondaryDevices,
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
|
||||
public render() {
|
||||
const {i18n, } = this.props;
|
||||
|
||||
|
||||
const newData = ['053e18835c106a5f9f463a44a9d7ff9a26281d529285a047bd969cfc59d4ab8607'];
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
data: newData,
|
||||
});
|
||||
}, 2000);
|
||||
|
||||
return (
|
||||
<>
|
||||
{ ! this.state.loading ? (
|
||||
<SessionModal
|
||||
title={i18n('pairedDevices')}
|
||||
onOk={() => null}
|
||||
onClose={this.closeDialog}
|
||||
>
|
||||
{ this.state.isListening ? (
|
||||
<div>
|
||||
{i18n('waitingForDeviceToRegister')}
|
||||
<div className="spacer-lg"></div>
|
||||
|
||||
<div id="qr">
|
||||
<QRCode value={window.textsecure.storage.user.getNumber()}/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<>
|
||||
{this.state.data.length == 0 ? (
|
||||
<>
|
||||
<div>{i18n('noPairedDevices')}</div>
|
||||
<div className="spacer-lg"></div>
|
||||
|
||||
<div className="session-modal__button-group__center">
|
||||
<SessionButton
|
||||
text = {i18n('pairNewDevice')}
|
||||
onClick = {this.startReceivingRequests}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
: (
|
||||
<>
|
||||
{
|
||||
this.state.data.map((pubKey: any) => {
|
||||
const pubKeyInfo = this.getPubkeyName(pubKey);
|
||||
return (
|
||||
<p>
|
||||
{ pubKeyInfo.deviceAlias }
|
||||
<br/>
|
||||
<span className="text-subtle">Pairing Secret:</span> { pubKeyInfo.secretWords }
|
||||
</p>
|
||||
);
|
||||
})
|
||||
}
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
</>
|
||||
)}
|
||||
</SessionModal>
|
||||
) : null }
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
private startReceivingRequests() {
|
||||
this.setState({
|
||||
isListening: true,
|
||||
});
|
||||
}
|
||||
|
||||
private getPubkeyName(pubKey: string) {
|
||||
const secretWords = window.mnemonic.pubkey_to_secret_words(pubKey);
|
||||
const conv = window.ConversationController.get(this.props.pubKey);
|
||||
const deviceAlias = conv ? conv.getNickname() : 'Unnamed Device';
|
||||
return {deviceAlias, secretWords};
|
||||
}
|
||||
|
||||
private stopReceivingRequests() {
|
||||
if (this.state.success) {
|
||||
const conv = window.ConversationController.get(this.props.pubKey);
|
||||
//if (conv) {
|
||||
// conv.setNickname(this.props.deviceAlias);
|
||||
//}
|
||||
}
|
||||
this.forceUpdate();
|
||||
}
|
||||
|
||||
|
||||
private onKeyUp(event: any) {
|
||||
switch (event.key) {
|
||||
case 'Esc':
|
||||
case 'Escape':
|
||||
this.closeDialog();
|
||||
break;
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
private closeDialog() {
|
||||
window.removeEventListener('keyup', this.onKeyUp);
|
||||
this.props.onClose();
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue