Improve identity key conflict ux

Clicking on a key conflict message opens the message detail view,
which displays the contact(s) in this conversation. If the message
contains a key conflict with any of these contacts, a button is
displayed which attempts to resolve that conflict and any other
conflicts in the conversation that are related to that contact.
This commit is contained in:
lilia 2015-02-17 18:03:05 -08:00
parent 857eee5003
commit 897d391817
11 changed files with 415 additions and 81 deletions

View file

@ -17,7 +17,30 @@
'use strict';
window.Whisper = window.Whisper || {};
Whisper.MessageDetailView = Whisper.View.extend({
var ContactView = Backbone.View.extend({
className: 'contact-detail',
initialize: function(options) {
this.template = $('#contact-detail').html();
Mustache.parse(this.template);
this.conflict = options.conflict;
},
events: {
'click .conflict': 'triggerConflict'
},
triggerConflict: function() {
this.$el.trigger('conflict', {conflict: this.conflict});
},
render: function() {
this.$el.html(Mustache.render(this.template, {
name : this.model.getTitle(),
avatar_url : this.model.getAvatarUrl(),
conflict : this.conflict
}));
return this;
}
});
Whisper.MessageDetailView = Backbone.View.extend({
className: 'message-detail',
template: $('#message-detail').html(),
initialize: function(options) {
@ -26,7 +49,7 @@
},
events: {
'click .back': 'goBack',
'verify': 'verify'
'conflict': 'conflictDialogue'
},
goBack: function() {
this.trigger('back');
@ -55,19 +78,33 @@
return this.conversation.contactCollection.models;
}
},
conflictDialogue: function(e, data) {
var view = new Whisper.KeyConflictDialogueView({
model: data.conflict,
conversation: this.conversation
});
view.render().$el.appendTo(this.$el);
this.listenTo(view, 'verify', function(data) {
this.verify(data.number);
});
this.listenTo(view, 'resolve', function() {
this.render();
});
},
render: function() {
this.$el.html(Mustache.render(this.template, {
sent_at: moment(this.model.get('sent_at')).toString(),
received_at: moment(this.model.get('received_at')).toString(),
tofrom: this.model.isIncoming() ? 'From' : 'To',
contacts: this.contacts().map(function(contact) {
return {
name : contact.getTitle(),
avatar_url : contact.getAvatarUrl()
};
}.bind(this))
sent_at : moment(this.model.get('sent_at')).toString(),
received_at : moment(this.model.get('received_at')).toString(),
tofrom : this.model.isIncoming() ? 'From' : 'To',
}));
this.view.render().$el.prependTo(this.$el.find('.message-container'));
this.conversation.contactCollection.each(function(contact) {
var v = new ContactView({
model: contact,
conflict: this.model.getKeyConflict(contact.id)
}).render().$el.appendTo(this.$el.find('.contacts'));
}.bind(this));
}
});