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

Nest key verification inside conflict dialogs

Browse source 
// FREEBIE
This commit is contained in:
lilia 2016-03-23 12:33:50 -07:00
parent c4fcbd8cbe
commit 6fe9c3f964
8 changed files with 123 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
_locales/en/messages.json
View file

@ -22,16 +22,18 @@
}
},
"acceptNewKey": {
"message": "Accept new key"
"message": "Accept",
"description": "Label for a button to accept a new identity key"
},
"verify": {
"message": "Verify"
},
"newIdentity": {
"message": "New Identity"
"message": "New Identity",
"description": "Header for a key change dialog"
},
"identityChanged": {
"message": "This contact's identity key has changed. This could either mean that someone is trying to intercept your communication, or this contact simply re-installed Signal and now has a new identity key."
"message": "This contact is using a new Signal identity. This could either mean that someone is trying to intercept your communication, or this contact simply re-installed Signal. You may wish to verify their new identity."
},
"outgoingKeyConflict": {
"message": "This contact's identity key has changed. Click to process and display."
@ -242,5 +244,13 @@
"messageNotSent": {
"message": "Message not sent.",
"description": "Informational label, appears on messages that failed to send"
},
"showMore": {
"message": "Details",
"description": "Displays the details of a key change"
},
"showLess": {
"message": "Hide details",
"description": "Hides the details of a key change"
}
}

19
background.html
View file

@ -235,8 +235,12 @@
<script type='text/x-tmpl-mustache' id='group-member-list'>
<div class='container'></div>
</script>
<script type='text/x-tmpl-mustache' id='key-verification'>
<script type='text/x-tmpl-mustache' id='key_verification_panel'>
<div class='container'>
{{> key_verification }}
</div>
</script>
<script type='text/x-tmpl-mustache' id='key_verification'>
<p> {{theirIdentity}} </p>
{{ ^their_key }}
<div class='placeholder'>{{ their_key_unknown }}</div>
@ -250,7 +254,6 @@
<div class='key'>
{{ #your_key }} <span>{{ . }}</span> {{ /your_key }}
</div>
</div>
</script>
<!-- index -->
<script type='text/x-tmpl-mustache' id='group_info_input'>
@ -305,15 +308,13 @@
<div class='clearfix'>
<h3>{{ newIdentity }}</h3>
{{> avatar }}
<span class='name'>{{ name }}
<button class='conflict'><span>{{ verify }}</span></button>
<button class='cancel hide'><span>{{ cancel }}</span></button>
</span>
<span class='name'>{{ name }}</span>
<button class='resolve'>{{ resolve }}</button>
<span class='hideKeys hide'> {{ hideKeys }} </span>
<span class='showKeys'> {{ showKeys }} </span>
</div>
<div class='content hide'>
<div class='keys hide'>
<p> {{ message }} </p>
<p> {{{ verifyContact }}} </p>
<p><button class='resolve'>{{ resolve }}</button></p>
</div>
</script>
<script type='text/x-tmpl-mustache' id='window-controls'>

2
js/views/conversation_view.js
View file

@ -162,7 +162,7 @@
var our_number = textsecure.storage.user.getNumber();
textsecure.storage.axolotl.getIdentityKey(their_number).then(function(their_key) {
textsecure.storage.axolotl.getIdentityKey(our_number).then(function(our_key) {
var view = new Whisper.KeyVerificationView({
var view = new Whisper.KeyVerificationPanelView({
model: { their_key: their_key, your_key: our_key }
}).render();
this.listenBack(view);

44
js/views/key_conflict_dialogue_view.js
View file

@ -11,42 +11,48 @@
className: 'key-conflict-dialogue clearfix',
initialize: function(options) {
this.contact = options.contact;
this.conflict = options.conflict;
this.conversation = options.conversation;
textsecure.storage.axolotl.getIdentityKey(textsecure.storage.user.getNumber()).then(function(our_key) {
this.your_key = our_key;
this.render();
}.bind(this));
textsecure.storage.axolotl.getIdentityKey(textsecure.storage.user.getNumber()).then(function(our_key) {
var view = new Whisper.KeyVerificationView({
model: {
their_key : this.model.identityKey,
your_key : our_key
}
});
view.render().$el.appendTo(this.$('.keys'));
}.bind(this));
},
events: {
'click .conflict': 'showDialog',
'click .cancel' : 'cancel',
'click .verify' : 'triggerVerify',
'click .showKeys': 'showKeys',
'click .hideKeys': 'hideKeys',
'click .resolve' : 'resolve'
},
triggerVerify: function() {
this.trigger('verify', {identityKey: this.model.identityKey});
hideKeys: function() {
this.$('.keys, .hideKeys').hide();
this.$('.showKeys').show();
},
showKeys: function() {
this.$('.keys, .hideKeys').show();
this.$('.showKeys').hide();
},
resolve: function() {
this.trigger('resolve');
this.remove();
this.conversation.resolveConflicts(this.model);
},
showDialog: function() {
this.$('.conflict').hide();
this.$('.cancel, .content').show();
},
cancel: function() {
this.$('.cancel, .content').hide();
this.$('.conflict').show();
},
render_attributes: function() {
return {
name : this.contact.getTitle(),
avatar : this.contact.getAvatar(),
conflict : this.conflict,
verify : i18n('verify'),
cancel : i18n('cancel'),
conflict : this.model,
newIdentity : i18n('newIdentity'),
message : i18n('identityChanged'),
resolve : i18n('acceptNewKey'),
verifyContact: i18n('verifyContact')
showKeys : i18n('showMore'),
hideKeys : i18n('showLess')
};
}
});

8
js/views/key_verification_view.js
View file

@ -6,8 +6,8 @@
window.Whisper = window.Whisper || {};
Whisper.KeyVerificationView = Whisper.View.extend({
className: 'key-verification panel',
templateName: 'key-verification',
className: 'key-verification',
templateName: 'key_verification',
events: {
'click .back': 'goBack'
},
@ -36,4 +36,8 @@
};
}
});
Whisper.KeyVerificationPanelView = Whisper.KeyVerificationView.extend({
className: 'key-verification panel',
templateName: 'key_verification_panel',
});
})();

21
js/views/message_detail_view.js
View file

@ -43,19 +43,6 @@
goBack: function() {
this.trigger('back');
},
verify: function(their_key) {
textsecure.storage.axolotl.getIdentityKey(textsecure.storage.user.getNumber()).then(function(our_key) {
var view = new Whisper.KeyVerificationView({
model: { their_key: their_key, your_key: our_key }
});
this.$el.hide();
view.render().$el.insertAfter(this.el);
this.listenTo(view, 'back', function() {
view.remove();
this.$el.show();
}.bind(this));
}.bind(this));
},
contacts: function() {
if (this.model.isIncoming()) {
var number = this.model.get('source');
@ -83,14 +70,6 @@
conversation: this.conversation
}).render();
this.$('.conflicts').append(view.el);
this.listenTo(view, 'verify', function(data) {
this.verify(conflict.identityKey);
});
/*
this.listenTo(view, 'resolve', function() {
this.render();
});
*/
},
render: function() {
this.errors = _.groupBy(this.model.get('errors'), 'number');

58
stylesheets/_conversation.scss
View file

@ -47,17 +47,16 @@
}
.key-verification {
background: white;
&.panel {
padding: 20px 10px;
p {
padding: 1em;
}
.key, .placeholder {
padding: 0 1em;
-webkit-user-select: text;
}
.key {
display: inline-block;
font-family: monospace;
padding: 10px;
margin: 10px;
@ -71,39 +70,36 @@
}
.message-detail {
& > .container > * {
max-width: 800px;
margin: 0 auto;
}
.key-conflict-dialogue {
background: #F3F3A7;
border-radius: 5px;
padding: 1em;
margin: 1em;
padding: 20px;
margin: 20px;
button {
button.resolve {
outline: none;
border: none;
border-radius: 5px;
color: white;
padding: 0.5em 1em;
font-weight: bold;
line-height: 18px;
span {
vertical-align: middle;
}
}
line-height: 36px;
padding: 0 20px;
float: right;
background: $blue;
margin-left: 20px;
}
.key-conflict-dialogue {
.content p {
max-width: 40em;
margin: 1em auto;
}
.verify {
.hideKeys, .showKeys {
color: $blue;
text-decoration: underline;
cursor: pointer;
}
.resolve {
background: $blue;
float: right;
line-height: 36px;
}
}
@ -446,12 +442,6 @@
display: none;
}
.avatar {
height: 36px;
width: 36px;
line-height: 36px;
}
.end-session {
font: small;
font-style: italic;
@ -471,6 +461,16 @@
}
}
.message-list,
.message-container,
.key-conflict-dialogue {
.avatar {
height: 36px;
width: 36px;
line-height: 36px;
}
}
.bottom-bar {
box-sizing: content-box;
$button-width: 36px;

47
stylesheets/manifest.css
View file

@ -657,15 +657,13 @@ input.search {
padding: 2em 20px 0;
overflow-y: auto; }
.key-verification {
background: white;
.key-verification.panel {
padding: 20px 10px; }
.key-verification p {
padding: 1em; }
.key-verification .key, .key-verification .placeholder {
padding: 0 1em;
-webkit-user-select: text; }
.key-verification .key {
display: inline-block;
font-family: monospace;
padding: 10px;
margin: 10px;
@ -675,30 +673,31 @@ input.search {
.key-verification .placeholder {
font-weight: bold; }
.message-detail > .container > * {
max-width: 800px;
margin: 0 auto; }
.message-detail .key-conflict-dialogue {
background: #F3F3A7;
border-radius: 5px;
padding: 1em;
margin: 1em; }
.message-detail .key-conflict-dialogue button {
padding: 20px;
margin: 20px; }
.message-detail .key-conflict-dialogue button.resolve {
outline: none;
border: none;
border-radius: 5px;
color: white;
padding: 0.5em 1em;
font-weight: bold;
line-height: 18px; }
.message-detail .key-conflict-dialogue button span {
vertical-align: middle; }
.message-detail .key-conflict-dialogue .content p {
max-width: 40em;
margin: 1em auto; }
.message-detail .key-conflict-dialogue .verify {
line-height: 36px;
padding: 0 20px;
float: right;
background: #2090ea;
margin-left: 20px; }
.message-detail .key-conflict-dialogue .hideKeys, .message-detail .key-conflict-dialogue .showKeys {
color: #2090ea;
text-decoration: underline;
cursor: pointer; }
.message-detail .key-conflict-dialogue .resolve {
background: #2090ea; }
cursor: pointer;
float: right;
line-height: 36px; }
.message-detail .message-container {
background: white;
padding: 20px; }
@ -972,11 +971,6 @@ input.search {
.message-container .outgoing .avatar,
.message-list .outgoing .avatar {
display: none; }
.message-container .avatar,
.message-list .avatar {
height: 36px;
width: 36px;
line-height: 36px; }
.message-container .end-session,
.message-list .end-session {
font: small;
@ -992,6 +986,13 @@ input.search {
.message-list .key-conflict button {
margin-top: 5px; }
.message-list .avatar,
.message-container .avatar,
.key-conflict-dialogue .avatar {
height: 36px;
width: 36px;
line-height: 36px; }
.bottom-bar {
box-sizing: content-box;
padding: 5px 5px 5px 0;