From 01d26bffd890c08dfd374631c498fec614cdf430 Mon Sep 17 00:00:00 2001
From: Samuel Hand <samuel.hand@openmailbox.org>
Date: Fri, 3 Aug 2018 19:07:23 +0100
Subject: [PATCH] UI update: make the trust management interface more user
 friendly

---
 plugins/omemo/CMakeLists.txt                  |   2 +
 plugins/omemo/data/contact_details_dialog.ui  | 369 +++++++++---------
 plugins/omemo/data/manage_key_dialog.ui       | 156 ++++++++
 plugins/omemo/src/contact_details_dialog.vala | 322 +++++++--------
 plugins/omemo/src/manage_key_dialog.vala      | 193 +++++++++
 5 files changed, 695 insertions(+), 347 deletions(-)
 create mode 100644 plugins/omemo/data/manage_key_dialog.ui
 create mode 100644 plugins/omemo/src/manage_key_dialog.vala

diff --git a/plugins/omemo/CMakeLists.txt b/plugins/omemo/CMakeLists.txt
index 80665efd..5126d05b 100644
--- a/plugins/omemo/CMakeLists.txt
+++ b/plugins/omemo/CMakeLists.txt
@@ -13,6 +13,7 @@ find_packages(OMEMO_PACKAGES REQUIRED
 
 set(RESOURCE_LIST
     contact_details_dialog.ui
+    manage_key_dialog.ui
 )
 
 compile_gresources(
@@ -37,6 +38,7 @@ SOURCES
     src/own_notifications.vala
     src/encrypt_state.vala
     src/encryption_list_entry.vala
+    src/manage_key_dialog.vala
     src/manager.vala
     src/message_flag.vala
     src/plugin.vala
diff --git a/plugins/omemo/data/contact_details_dialog.ui b/plugins/omemo/data/contact_details_dialog.ui
index 4dadbb6a..856c7af4 100644
--- a/plugins/omemo/data/contact_details_dialog.ui
+++ b/plugins/omemo/data/contact_details_dialog.ui
@@ -2,205 +2,198 @@
 <interface>
     <template class="DinoPluginsOmemoContactDetailsDialog">
         <property name="modal">True</property>
-        <property name="title" translatable="yes">OMEMO Keys</property>
+        <property name="title">OMEMO Key Management</property>
         <property name="resizable">False</property>
         <child internal-child="vbox">
             <object class="GtkBox">
                 <property name="visible">True</property>
-                <property name="margin-left">40</property>
-                <property name="margin-right">40</property>
-                <child>
-                    <object class="GtkBox" id="own_fingerprint_label">
-                        <property name="margin-top">12</property>
-                        <property name="orientation">horizontal</property>
-                        <property name="visible">False</property>
-                        <child>
-                            <object class="GtkLabel">
-                                <property name="visible">True</property>
-                                <property name="label" translatable="yes">Own fingerprint</property>
-                                <property name="xalign">0</property>
-                                <property name="yalign">1</property>
-                                <property name="hexpand">True</property>
-                                <property name="margin-bottom">2</property>
-                                <attributes>
-                                    <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
-                                </attributes>
-                            </object>
-                        </child>
-                    </object>
-                </child>
-                <child>
-                    <object class="GtkFrame" id="own_fingerprint_container">
-                        <property name="visible">False</property>
-                        <property name="margin-bottom">18</property>
-                        <child>
-                            <object class="GtkScrolledWindow">
-                                <property name="hscrollbar_policy">never</property>
-                                <property name="vscrollbar_policy">automatic</property>
-                                <property name="visible">True</property>
-                                <property name="propagate_natural_height">True</property>
-                                <child>
-                                    <object class="GtkGrid" id="own_fingerprint">
-                                        <property name="visible">True</property>
-                                        <property name="vexpand">True</property>
-                                    </object>
-                                </child>
-                            </object>
-                        </child>
-                    </object>
-                </child>
-                <child>
-                    <object class="GtkBox">
-                        <property name="margin-top">12</property>
-                        <property name="orientation">horizontal</property>
-                        <property name="visible">True</property>
-                        <child>
-                            <object class="GtkLabel">
-                                <property name="visible">True</property>
-                                <property name="halign">start</property>
-                                <property name="hexpand">True</property>
-                                <property name="label" translatable="yes">Enable Key Management</property>
-                            </object>
-                        </child>
-                        <child>
-                            <object class="GtkSwitch" id="key_mgmnt">
-                                <property name="visible">True</property>
-                                <property name="halign">end</property>
-                            </object>
-                        </child>
-                    </object>
-                </child>
-                <child>
-                    <object class="GtkBox" id="fingerprints_prompt_label">
-                        <property name="margin-top">12</property>
-                        <property name="orientation">horizontal</property>
-                        <property name="visible">False</property>
-                        <child>
-                            <object class="GtkLabel">
-                                <property name="visible">True</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">True</property>
-                                <property name="label" translatable="yes">New Devices</property>
-                                <property name="margin-bottom">2</property>
-                                <attributes>
-                                    <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
-                                </attributes>
-                            </object>
-                        </child>
-                    </object>
-                </child>
-                <child>
-                    <object class="GtkFrame" id="fingerprints_prompt_container">
-                        <property name="visible">False</property>
-                        <property name="margin-bottom">18</property>
-                        <child>
-                            <object class="GtkScrolledWindow">
-                                <property name="hscrollbar_policy">never</property>
-                                <property name="vscrollbar_policy">automatic</property>
-                                <property name="visible">True</property>
-                                <property name="propagate_natural_height">True</property>
-                                <child>
-                                    <object class="GtkGrid" id="fingerprints_prompt">
-                                        <property name="visible">True</property>
-                                        <property name="vexpand">True</property>
-                                    </object>
-                                </child>
-                            </object>
-                        </child>
-                    </object>
-                </child>
-                <child>
-                    <object class="GtkBox" id="fingerprints_verified_label">
-                        <property name="margin-top">12</property>
-                        <property name="orientation">horizontal</property>
-                        <property name="visible">False</property>
-                        <child>
-                            <object class="GtkLabel">
-                                <property name="visible">True</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">True</property>
-                                <property name="label" translatable="yes">Verified Devices</property>
-                                <property name="margin-bottom">2</property>
-                                <attributes>
-                                    <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
-                                </attributes>
-                            </object>
-                        </child>
-                    </object>
-                </child>
-                <child>
-                    <object class="GtkFrame" id="fingerprints_verified_container">
-                        <property name="visible">False</property>
-                        <property name="margin-bottom">18</property>
-                        <child>
-                            <object class="GtkScrolledWindow">
-                                <property name="hscrollbar_policy">never</property>
-                                <property name="vscrollbar_policy">automatic</property>
-                                <property name="visible">True</property>
-                                <property name="propagate_natural_height">True</property>
-                                <child>
-                                    <object class="GtkGrid" id="fingerprints_verified">
-                                        <property name="visible">True</property>
-                                        <property name="vexpand">True</property>
-                                    </object>
-                                </child>
-                            </object>
-                        </child>
-                    </object>
-                </child>
-                <child>
-                    <object class="GtkBox">
-                        <property name="margin-top">12</property>
-                        <property name="orientation">horizontal</property>
-                        <property name="visible">True</property>
-                        <child>
-                            <object class="GtkLabel">
-                                <property name="visible">True</property>
-                                <property name="halign">start</property>
-                                <property name="valign">center</property>
-                                <property name="hexpand">True</property>
-                                <property name="label" translatable="yes">Devices</property>
-                                <property name="margin-bottom">2</property>
-                                <attributes>
-                                    <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
-                                </attributes>
-                            </object>
-                        </child>
-                        <!-- TODO: implement QR code verification !-->
-                        <!--<child>
-                            <object class="GtkButton" id="scan_button">
-                                <property name="visible">True</property>
-                                <property name="can-focus">False</property>
-                                <style>
-                                    <class name="flat"/>
-                                </style>
-                                <child>
-                                    <object class="GtkImage">
-                                        <property name="icon-name">camera-photo-symbolic</property>
-                                        <property name="icon-size">1</property>
-                                        <property name="visible">True</property>
-                                    </object>
-                                </child>
-                            </object>
-                        </child>!-->
-                    </object>
-                </child>
+                <property name="margin">12</property>
+                <property name="spacing">12</property>
                 <child>
                     <object class="GtkFrame">
                         <property name="visible">True</property>
-                        <property name="margin-bottom">18</property>
                         <child>
-                            <object class="GtkScrolledWindow">
-                                <property name="hscrollbar_policy">never</property>
-                                <property name="vscrollbar_policy">automatic</property>
+                            <object class="GtkListBox">
                                 <property name="visible">True</property>
-                                <property name="propagate_natural_height">True</property>
+                                <property name="selection-mode">none</property>
                                 <child>
-                                    <object class="GtkGrid" id="fingerprints">
+                                    <object class="GtkListBoxRow">
                                         <property name="visible">True</property>
-                                        <property name="vexpand">True</property>
+                                        <property name="activatable">False</property>
+                                        <child>
+                                            <object class="GtkBox">
+                                                <property name="visible">True</property>
+                                                <property name="orientation">horizontal</property>
+                                                <property name="margin-start">20</property>
+                                                <property name="margin-end">20</property>
+                                                <property name="margin-top">14</property>
+                                                <property name="margin-bottom">14</property>
+                                                <property name="spacing">40</property>
+                                                <child>
+                                                    <object class="GtkBox">
+                                                        <property name="visible">True</property>
+                                                        <property name="orientation">vertical</property>
+                                                        <property name="hexpand">True</property>
+                                                        <child>
+                                                            <object class="GtkLabel">
+                                                                <property name="visible">True</property>
+                                                                <property name="halign">start</property>
+                                                                <property name="label" translatable="yes">Automatically accept new keys</property>
+                                                                <attributes>
+                                                                    <attribute name="scale" value="1.1"/>
+                                                                </attributes>
+                                                            </object>
+                                                        </child>
+                                                        <child>
+                                                            <object class="GtkLabel">
+                                                                <property name="visible">True</property>
+                                                                <property name="max_width_chars">1</property>
+                                                                <property name="expand">True</property>
+                                                                <property name="xalign">0</property>
+                                                                <property name="wrap">True</property>
+                                                                <property name="label" translatable="yes">When this contact adds new encryption keys to their account, automatically accept them.</property>
+                                                                <attributes>
+                                                                    <attribute name="scale" value="0.8"/>
+                                                                </attributes>
+                                                                <style>
+                                                                    <class name="dim-label"/>
+                                                                </style>
+                                                            </object>
+                                                        </child>
+                                                    </object>
+                                                </child>
+                                                <child>
+                                                    <object class="GtkSwitch" id="auto_accept">
+                                                        <property name="visible">True</property>
+                                                        <property name="halign">end</property>
+                                                        <property name="valign">center</property>
+                                                    </object>
+                                                </child>
+                                            </object>
+                                        </child>
+                                    </object>
+                                </child>
+                            </object>
+                        </child>
+                    </object>
+                </child>
+                <child>
+                    <object class="GtkBox" id="own_fingerprint_container">
+                        <property name="visible">False</property>
+                        <property name="orientation">vertical</property>
+                        <property name="spacing">2</property>
+                        <child>
+                            <object class="GtkLabel">
+                                <property name="visible">True</property>
+                                <property name="halign">start</property>
+                                <property name="label" translatable="yes">Own key</property>
+                                <attributes>
+                                    <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
+                                </attributes>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkFrame">
+                                <property name="visible">True</property>
+                                <child>
+                                    <object class="GtkListBox">
+                                        <property name="visible">True</property>
+                                        <property name="selection-mode">none</property>
+                                        <child>
+                                            <object class="GtkListBoxRow">
+                                                <property name="visible">True</property>
+                                                <property name="activatable">False</property>
+                                                <property name="hexpand">True</property>
+                                                <child>
+                                                    <object class="GtkBox">
+                                                        <property name="visible">True</property>
+                                                        <property name="margin-start">20</property>
+                                                        <property name="margin-end">20</property>
+                                                        <property name="margin-top">14</property>
+                                                        <property name="margin-bottom">14</property>
+                                                        <property name="orientation">horizontal</property>
+                                                        <property name="hexpand">True</property>
+                                                        <child>
+                                                            <object class="GtkLabel" id="own_fingerprint">
+                                                                <property name="visible">True</property>
+                                                                <property name="halign">start</property>
+                                                                <property name="justify">right</property>
+                                                                <property name="hexpand">True</property>
+                                                            </object>
+                                                        </child>
+                                                        <child>
+                                                            <object class="GtkButton" id="copy">
+                                                                <property name="visible">True</property>
+                                                                <property name="halign">end</property>
+                                                                <child>
+                                                                    <object class="GtkImage">
+                                                                        <property name="visible">True</property>
+                                                                        <property name="icon-size">1</property>
+                                                                        <property name="icon-name">edit-copy-symbolic</property>
+                                                                    </object>
+                                                                </child>
+                                                            </object>
+                                                        </child>
+                                                    </object>
+                                                </child>
+                                            </object>
+                                        </child>
+                                    </object>
+                                </child>
+                            </object>
+                        </child>
+                    </object>
+                </child>
+                <child>
+                    <object class="GtkBox" id="new_keys_container">
+                        <property name="visible">False</property>
+                        <property name="orientation">vertical</property>
+                        <property name="spacing">2</property>
+                        <child>
+                            <object class="GtkLabel">
+                                <property name="visible">True</property>
+                                <property name="halign">start</property>
+                                <property name="label" translatable="yes">New keys</property>
+                                <attributes>
+                                    <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
+                                </attributes>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkFrame">
+                                <property name="visible">True</property>
+                                <child>
+                                    <object class="GtkListBox" id="new_keys">
+                                        <property name="visible">True</property>
+                                        <property name="selection-mode">none</property>
+                                    </object>
+                                </child>
+                            </object>
+                        </child>
+                    </object>
+                </child>
+                <child>
+                    <object class="GtkBox" id="keys_container">
+                        <property name="visible">False</property>
+                        <property name="orientation">vertical</property>
+                        <property name="spacing">2</property>
+                        <child>
+                            <object class="GtkLabel">
+                                <property name="visible">True</property>
+                                <property name="halign">start</property>
+                                <property name="label" translatable="yes">Associated keys</property>
+                                <attributes>
+                                    <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
+                                </attributes>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkFrame">
+                                <property name="visible">True</property>
+                                <child>
+                                    <object class="GtkListBox" id="keys">
+                                        <property name="visible">True</property>
+                                        <property name="selection-mode">none</property>
                                     </object>
                                 </child>
                             </object>
diff --git a/plugins/omemo/data/manage_key_dialog.ui b/plugins/omemo/data/manage_key_dialog.ui
new file mode 100644
index 00000000..cd14e16c
--- /dev/null
+++ b/plugins/omemo/data/manage_key_dialog.ui
@@ -0,0 +1,156 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+    <template class="DinoPluginsOmemoManageKeyDialog">
+        <property name="modal">True</property>
+        <property name="resizable">False</property>
+        <child type="titlebar">
+            <object class="GtkHeaderBar" id="header_bar">
+                <property name="visible">True</property>
+                <property name="title">Manage Key</property>
+                <property name="show_close_button">False</property>
+                <child>
+                    <object class="GtkButton" id="cancel_button">
+                        <property name="label" translatable="yes">Cancel</property>
+                        <property name="sensitive">True</property>
+                        <property name="visible">True</property>
+                    </object>
+                    <packing>
+                        <property name="pack_type">start</property>
+                    </packing>
+                </child>
+                <child>
+                    <object class="GtkButton" id="ok_button">
+                        <property name="has_default">True</property>
+                        <property name="can_default">True</property>
+                        <property name="label" translatable="yes">Confirm</property>
+                        <property name="sensitive">False</property>
+                        <property name="visible">True</property>
+                        <style>
+                            <class name="suggested-action"/>
+                        </style>
+                    </object>
+                    <packing>
+                        <property name="pack_type">end</property>
+                    </packing>
+                </child>
+            </object>
+        </child>
+        <child internal-child="vbox">
+            <object class="GtkBox">
+                <property name="visible">True</property>
+                <child>
+                    <object class="GtkBox" id="main_screen">
+                        <property name="visible">True</property>
+                        <property name="margin">12</property>
+                        <property name="spacing">12</property>
+                        <property name="orientation">vertical</property>
+                        <child>
+                            <object class="GtkLabel" id="main_desc">
+                                <property name="visible">True</property>
+                                <property name="wrap">True</property>
+                                <property name="xalign">0</property>
+                                <property name="max-width-chars">1</property>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkFrame">
+                                <property name="visible">True</property>
+                                <child>
+                                    <object class="GtkListBox" id="main_action_list">
+                                        <property name="visible">True</property>
+                                        <property name="selection-mode">none</property>
+                                    </object>
+                                </child>
+                            </object>
+                        </child>
+                    </object>
+                </child>
+                <child>
+                    <object class="GtkBox" id="confirm_screen">
+                        <property name="visible">False</property>
+                        <property name="margin">12</property>
+                        <property name="spacing">12</property>
+                        <property name="orientation">vertical</property>
+                        <child>
+                            <object class="GtkImage" id="confirm_image">
+                                <property name="visible">True</property>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkLabel" id="confirm_title">
+                                <property name="visible">True</property>
+                                <attributes>
+                                    <attribute name="scale" value="1.1"/>
+                                </attributes>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkLabel" id="confirm_desc">
+                                <property name="visible">True</property>
+                                <property name="justify">center</property>
+                                <property name="wrap">True</property>
+                                <property name="max-width-chars">40</property>
+                                <attributes>
+                                    <attribute name="scale" value="0.8"/>
+                                </attributes>
+                                <style>
+                                    <class name="dim-label"/>
+                                </style>
+                            </object>
+                        </child>
+                    </object>
+                </child>
+                <child>
+                    <object class="GtkBox" id="verify_screen">
+                        <property name="visible">False</property>
+                        <property name="margin">12</property>
+                        <property name="spacing">12</property>
+                        <property name="orientation">vertical</property>
+                        <child>
+                            <object class="GtkLabel">
+                                <property name="visible">True</property>
+                                <property name="label">Compare the fingerprint, character by character, with the one shown on your contacts device.</property>
+                                <property name="wrap">True</property>
+                                <property name="xalign">0</property>
+                                <property name="max-width-chars">45</property>
+                            </object>
+                        </child>
+                        <child>
+                            <object class="GtkBox">
+                                <property name="visible">True</property>
+                                <property name="orientation">vertical</property>
+                                <property name="margin-left">12</property>
+                                <property name="margin-right">12</property>
+                                <property name="spacing">12</property>
+                                <property name="hexpand">False</property>
+                                <property name="halign">center</property>
+                                <child>
+                                    <object class="GtkLabel" id="verify_label">
+                                        <property name="visible">True</property>
+                                        <property name="margin-top">12</property>
+                                        <property name="margin-bottom">12</property>
+                                        <property name="justify">right</property>
+                                    </object>
+                                </child>
+                                <child>
+                                    <object class="GtkButton" id="verify_no">
+                                        <property name="visible">True</property>
+                                        <property name="hexpand">True</property>
+                                        <property name="label">Not Matching</property>
+                                    </object>
+                                </child>
+                                <child>
+                                    <object class="GtkButton" id="verify_yes">
+                                        <property name="visible">True</property>
+                                        <property name="hexpand">True</property>
+                                        <property name="label">Matching</property>
+                                    </object>
+                                </child>
+                            </object>
+                        </child>
+                    </object>
+                </child>
+            </object>
+        </child>
+    </template>
+</interface>
diff --git a/plugins/omemo/src/contact_details_dialog.vala b/plugins/omemo/src/contact_details_dialog.vala
index 11bed0c1..326a1b79 100644
--- a/plugins/omemo/src/contact_details_dialog.vala
+++ b/plugins/omemo/src/contact_details_dialog.vala
@@ -15,20 +15,14 @@ public class ContactDetailsDialog : Gtk.Dialog {
     private bool own = false;
     private int own_id = 0;
 
-    private Gee.List<Widget> toggles;
-
-    [GtkChild] private Grid fingerprints;
-    [GtkChild] private Box own_fingerprint_label;
-    [GtkChild] private Frame own_fingerprint_container;
-    [GtkChild] private Grid own_fingerprint;
-    [GtkChild] private Box fingerprints_prompt_label;
-    [GtkChild] private Frame fingerprints_prompt_container;
-    [GtkChild] private Grid fingerprints_prompt;
-    [GtkChild] private Box fingerprints_verified_label;
-    [GtkChild] private Frame fingerprints_verified_container;
-    [GtkChild] private Grid fingerprints_verified;
-    [GtkChild] private Switch key_mgmnt;
-
+    [GtkChild] private Box own_fingerprint_container;
+    [GtkChild] private Label own_fingerprint;
+    [GtkChild] private Box new_keys_container;
+    [GtkChild] private ListBox new_keys;
+    [GtkChild] private Box keys_container;
+    [GtkChild] private ListBox keys;
+    [GtkChild] private Switch auto_accept;
+    [GtkChild] private Button copy;
 
     private void set_device_trust(Row device, bool trust) {
         Database.IdentityMetaTable.TrustLevel trust_level = trust ? Database.IdentityMetaTable.TrustLevel.TRUSTED : Database.IdentityMetaTable.TrustLevel.UNTRUSTED;
@@ -39,21 +33,136 @@ public class ContactDetailsDialog : Gtk.Dialog {
                 .set(plugin.db.identity_meta.trust_level, trust_level).perform();
     }
 
-    private void add_fingerprint(Row device, int row, Database.IdentityMetaTable.TrustLevel trust) {
+    private void add_fingerprint(Row device, Database.IdentityMetaTable.TrustLevel trust) {
+        keys_container.visible = true;
+
+        ListBoxRow lbr = new ListBoxRow() { visible = true, activatable = true, hexpand = true };
+        Box box = new Box(Gtk.Orientation.HORIZONTAL, 40) { visible = true, margin_start = 20, margin_end = 20, margin_top = 14, margin_bottom = 14, hexpand = true };
+
+        Box status = new Box(Gtk.Orientation.HORIZONTAL, 5) { visible = true, hexpand = true };
+        Label status_lbl = new Label(null) { visible = true, hexpand = true, xalign = 0 };
+
+        Image img = new Image() { visible = true, halign = Align.END, icon_size = IconSize.BUTTON };
+
         string res = fingerprint_markup(fingerprint_from_base64(device[plugin.db.identity_meta.identity_key_public_base64]));
         Label lbl = new Label(res)
-            { use_markup=true, justify=Justification.RIGHT, visible=true, margin = 8, halign = Align.START, valign = Align.CENTER };
-        //TODO: handle display of verified devices
-        Switch tgl = new Switch() {visible = true, halign = Align.END, valign = Align.CENTER, margin = 8, hexpand = true, active = (trust == Database.IdentityMetaTable.TrustLevel.TRUSTED) };
-        tgl.state_set.connect((active) => {
-            set_device_trust(device, active);
+            { use_markup=true, justify=Justification.RIGHT, visible=true, halign = Align.START, valign = Align.CENTER, hexpand = false };
 
-            return false;
+        switch(trust) {
+            case Database.IdentityMetaTable.TrustLevel.TRUSTED:
+                img.icon_name = "emblem-ok-symbolic";
+                status_lbl.set_markup("<span size='large' color='#1A63D9'>Accepted</span>");
+                break;
+            case Database.IdentityMetaTable.TrustLevel.UNTRUSTED:
+                img.icon_name = "action-unavailable-symbolic";
+                status_lbl.set_markup("<span size='large' color='#D91900'>Rejected</span>");
+                lbl.get_style_context().add_class("dim-label");
+                break;
+            case Database.IdentityMetaTable.TrustLevel.VERIFIED:
+                img.icon_name = "security-high-symbolic";
+                status_lbl.set_markup("<span size='large' color='#1A63D9'>Verified</span>");
+                break;
+        }
+
+        if (!device[plugin.db.identity_meta.now_active]) {
+            img.icon_name= "appointment-missed-symbolic";
+            status_lbl.set_markup("<span size='large' color='#8b8e8f'>Unused</span>");
+        }
+
+        box.add(lbl);
+        box.add(status);
+
+        status.add(status_lbl);
+        status.add(img);
+
+        lbr.add(box);
+        keys.add(lbr);
+
+        keys.row_activated.connect((row) => {
+            if(row == lbr) {
+                Row updated_device = plugin.db.identity_meta.with_address(device[plugin.db.identity_meta.identity_id], device[plugin.db.identity_meta.address_name]).with(plugin.db.identity_meta.device_id, "=", device[plugin.db.identity_meta.device_id]).single().row().inner;
+                ManageKeyDialog manage_dialog = new ManageKeyDialog(updated_device, plugin.db);
+                manage_dialog.set_transient_for((Window) get_toplevel());
+                manage_dialog.present();
+                manage_dialog.response.connect((response) => update_row(response, img, lbl, status_lbl, device));
+            }
         });
-        toggles.add(tgl);
+    }
 
-        fingerprints.attach(lbl, 0, row);
-        fingerprints.attach(tgl, 1, row);
+    private void update_row(int response, Image img, Label lbl, Label status_lbl, Row device){
+        switch (response) {
+            case Database.IdentityMetaTable.TrustLevel.TRUSTED:
+                img.icon_name = "emblem-ok-symbolic";
+                status_lbl.set_markup("<span size='large' color='#1A63D9'>Accepted</span>");
+                lbl.get_style_context().remove_class("dim-label");
+                set_device_trust(device, true);
+                break;
+            case Database.IdentityMetaTable.TrustLevel.UNTRUSTED:
+                img.icon_name = "action-unavailable-symbolic";
+                status_lbl.set_markup("<span size='large' color='#D91900'>Rejected</span>");
+                lbl.get_style_context().add_class("dim-label");
+                set_device_trust(device, false);
+                break;
+            case Database.IdentityMetaTable.TrustLevel.VERIFIED:
+                img.icon_name = "security-high-symbolic";
+                status_lbl.set_markup("<span size='large' color='#1A63D9'>Verified</span>");
+                lbl.get_style_context().remove_class("dim-label");
+                plugin.db.identity_meta.update()
+                    .with(plugin.db.identity_meta.identity_id, "=", account.id)
+                    .with(plugin.db.identity_meta.address_name, "=", device[plugin.db.identity_meta.address_name])
+                    .with(plugin.db.identity_meta.device_id, "=", device[plugin.db.identity_meta.device_id])
+                    .set(plugin.db.identity_meta.trust_level, Database.IdentityMetaTable.TrustLevel.VERIFIED).perform();
+                plugin.db.trust.update().with(plugin.db.trust.identity_id, "=", account.id).with(plugin.db.trust.address_name, "=", jid.bare_jid.to_string()).set(plugin.db.trust.blind_trust, false).perform();
+                auto_accept.set_active(false);
+                break;
+        }
+    }
+
+    private void add_new_fingerprint(Row device){
+        new_keys_container.visible = true;
+
+        ListBoxRow lbr = new ListBoxRow() { visible = true, activatable = false, hexpand = true };
+        Box box = new Box(Gtk.Orientation.HORIZONTAL, 40) { visible = true, margin_start = 20, margin_end = 20, margin_top = 14, margin_bottom = 14, hexpand = true };
+
+        Box control = new Box(Gtk.Orientation.HORIZONTAL, 0) { visible = true, hexpand = true };
+
+        Button yes = new Button() { visible = true, valign = Align.CENTER, hexpand = true };
+        yes.image = new Image.from_icon_name("emblem-ok-symbolic", IconSize.BUTTON);
+        yes.get_style_context().add_class("suggested-action");
+
+        Button no = new Button() { visible = true, valign = Align.CENTER, hexpand = true };
+        no.image = new Image.from_icon_name("action-unavailable-symbolic", IconSize.BUTTON);
+        no.get_style_context().add_class("destructive-action");
+
+        yes.clicked.connect(() => {
+            set_device_trust(device, true);
+            add_fingerprint(device, Database.IdentityMetaTable.TrustLevel.TRUSTED);
+            new_keys.remove(lbr);
+            if (new_keys.get_children().length() < 1) new_keys_container.visible = false;
+        });
+
+        no.clicked.connect(() => {
+            set_device_trust(device, false);
+            add_fingerprint(device, Database.IdentityMetaTable.TrustLevel.UNTRUSTED);
+            new_keys.remove(lbr);
+            if (new_keys.get_children().length() < 1) new_keys_container.visible = false;
+        });
+
+        string res = fingerprint_markup(fingerprint_from_base64(device[plugin.db.identity_meta.identity_key_public_base64]));
+        Label lbl = new Label(res)
+            { use_markup=true, justify=Justification.RIGHT, visible=true, halign = Align.START, valign = Align.CENTER, hexpand = false };
+
+
+        box.add(lbl);
+
+        control.add(yes);
+        control.add(no);
+        control.get_style_context().add_class("linked");
+
+        box.add(control);
+
+        lbr.add(box);
+        new_keys.add(lbr);
     }
 
     public ContactDetailsDialog(Plugin plugin, Account account, Jid jid) {
@@ -62,163 +171,58 @@ public class ContactDetailsDialog : Gtk.Dialog {
         this.account = account;
         this.jid = jid;
 
-        toggles = new ArrayList<Widget>();
+        (get_header_bar() as HeaderBar).set_subtitle(jid.bare_jid.to_string());
+
 
         if(jid.equals(account.bare_jid)) {
             own = true;
             own_id = plugin.db.identity.row_with(plugin.db.identity.account_id, account.id)[plugin.db.identity.device_id];
-            own_fingerprint_label.visible = true;
+
             own_fingerprint_container.visible = true;
+
             string own_b64 = plugin.db.identity.row_with(plugin.db.identity.account_id, account.id)[plugin.db.identity.identity_key_public_base64];
             string fingerprint = fingerprint_from_base64(own_b64);
-            Label lbl = new Label(fingerprint_markup(fingerprint))
-                { use_markup=true, justify=Justification.RIGHT, visible=true, margin = 8, halign = Align.START };
+            own_fingerprint.set_markup(fingerprint_markup(fingerprint));
 
-            Box box = new Box(Gtk.Orientation.HORIZONTAL, 0) { visible = true, valign = Align.CENTER, hexpand = true, margin = 8 };
-
-            Button copy = new Button() { visible = true, valign = Align.CENTER, halign = Align.END, hexpand = false };
-            copy.image = new Image.from_icon_name("edit-copy-symbolic", IconSize.BUTTON);
             copy.clicked.connect(() => {Clipboard.get_default(get_display()).set_text(fingerprint, fingerprint.length);});
-            box.pack_start(lbl);
-            box.pack_end(copy);
-            own_fingerprint.attach(box, 0, 0);
         }
 
-        int i = 0;
-        foreach (Row device in plugin.db.identity_meta.with_address(account.id, jid.to_string()).with(plugin.db.identity_meta.trust_level, "!=", Database.IdentityMetaTable.TrustLevel.UNKNOWN).with(plugin.db.identity_meta.trust_level, "!=", Database.IdentityMetaTable.TrustLevel.VERIFIED)) {
-            if (device[plugin.db.identity_meta.identity_key_public_base64] == null) {
-                continue;
+        new_keys.set_header_func((row, before_row) => {
+            if (row.get_header() == null && before_row != null) {
+                row.set_header(new Separator(Orientation.HORIZONTAL));
             }
+        });
+
+        keys.set_header_func((row, before_row) => {
+            if (row.get_header() == null && before_row != null) {
+                row.set_header(new Separator(Orientation.HORIZONTAL));
+            }
+        });
+
+        foreach (Row device in plugin.db.identity_meta.with_address(account.id, jid.to_string()).with(plugin.db.identity_meta.trust_level, "=", Database.IdentityMetaTable.TrustLevel.UNKNOWN).without_null(plugin.db.identity_meta.identity_key_public_base64)) {
+            add_new_fingerprint(device);
+        }
+
+        foreach (Row device in plugin.db.identity_meta.with_address(account.id, jid.to_string()).with(plugin.db.identity_meta.trust_level, "!=", Database.IdentityMetaTable.TrustLevel.UNKNOWN).without_null(plugin.db.identity_meta.identity_key_public_base64)) {
             if(own && device[plugin.db.identity_meta.device_id] == own_id) {
                 continue;
             }
-            add_fingerprint(device, i, (Database.IdentityMetaTable.TrustLevel) device[plugin.db.identity_meta.trust_level]);
-
-            i++;
+            add_fingerprint(device, (Database.IdentityMetaTable.TrustLevel) device[plugin.db.identity_meta.trust_level]);
 
         }
 
-        int j = 0;
-        foreach (Row device in plugin.db.identity_meta.with_address(account.id, jid.to_string()).with(plugin.db.identity_meta.trust_level, "=", Database.IdentityMetaTable.TrustLevel.UNKNOWN)) {
-            if (device[plugin.db.identity_meta.identity_key_public_base64] == null) {
-                continue;
-            }
-            if(own && device[plugin.db.identity_meta.device_id] == own_id) {
-                continue;
-            }
+        auto_accept.set_active(plugin.db.trust.get_blind_trust(account.id, jid.bare_jid.to_string()));
 
-            string res = fingerprint_markup(fingerprint_from_base64(device[plugin.db.identity_meta.identity_key_public_base64]));
-            Label lbl = new Label(res)
-                { use_markup=true, justify=Justification.RIGHT, visible=true, margin = 8, halign = Align.START };
+        auto_accept.state_set.connect((active) => {
+            plugin.db.trust.update().with(plugin.db.trust.identity_id, "=", account.id).with(plugin.db.trust.address_name, "=", jid.bare_jid.to_string()).set(plugin.db.trust.blind_trust, active).perform();
 
-            Box box = new Box(Gtk.Orientation.HORIZONTAL, 0) { visible = true, valign = Align.CENTER, hexpand = true, margin = 8 };
+            if (active) {
+                new_keys_container.visible = false;
 
-            Button yes = new Button() { visible = true, valign = Align.CENTER, hexpand = true};
-            yes.image = new Image.from_icon_name("list-add-symbolic", IconSize.BUTTON);
-
-            yes.clicked.connect(() => {
-                set_device_trust(device, true);
-                
-                fingerprints_prompt.remove(box);
-                fingerprints_prompt.remove(lbl);
-                toggles.remove(box);
-                j--;
-
-                add_fingerprint(device, i, Database.IdentityMetaTable.TrustLevel.TRUSTED);
-                i++;
-
-                if (j == 0) {
-                    fingerprints_prompt.attach(new Label("No more new devices") { visible = true, valign = Align.CENTER, halign = Align.CENTER, margin = 8, hexpand = true }, 0, 0);
+                foreach (Row device in plugin.db.identity_meta.with_address(account.id, jid.to_string()).with(plugin.db.identity_meta.trust_level, "=", Database.IdentityMetaTable.TrustLevel.UNKNOWN).without_null(plugin.db.identity_meta.identity_key_public_base64)) {
+                    set_device_trust(device, true);
+                    add_fingerprint(device, Database.IdentityMetaTable.TrustLevel.TRUSTED);
                 }
-            });
-
-            Button no = new Button() { visible = true, valign = Align.CENTER, hexpand = true};
-            no.image = new Image.from_icon_name("list-remove-symbolic", IconSize.BUTTON);
-
-            no.clicked.connect(() => {
-                set_device_trust(device, false);
-
-                fingerprints_prompt.remove(box);
-                fingerprints_prompt.remove(lbl);
-                toggles.remove(box);
-                j--;
-
-                add_fingerprint(device, i, Database.IdentityMetaTable.TrustLevel.UNTRUSTED);
-                i++;
-
-                if (j == 0) {
-                    fingerprints_prompt.attach(new Label("No more new devices") { visible = true, valign = Align.CENTER, halign = Align.CENTER, margin = 8, hexpand = true }, 0, 0);
-                }
-            });
-
-            box.pack_start(yes);
-            box.pack_start(no);
-
-            box.get_style_context().add_class("linked");
-            toggles.add(box);
-
-            fingerprints_prompt.attach(lbl, 0, j);
-            fingerprints_prompt.attach(box, 1, j);
-            j++;
-        }
-        if( j > 0 ){
-            fingerprints_prompt_label.visible = true;
-            fingerprints_prompt_container.visible = true;
-        }
-
-        int k = 0;
-        foreach (Row device in plugin.db.identity_meta.with_address(account.id, jid.to_string()).without_null(plugin.db.identity_meta.identity_key_public_base64).with(plugin.db.identity_meta.trust_level, "=", Database.IdentityMetaTable.TrustLevel.VERIFIED)) {
-            if(own && device[plugin.db.identity_meta.device_id] == own_id) {
-                continue;
-            }
-            string res = fingerprint_markup(fingerprint_from_base64(device[plugin.db.identity_meta.identity_key_public_base64]));
-            Label lbl = new Label(res)
-                { use_markup=true, justify=Justification.RIGHT, visible=true, margin = 8, halign = Align.START };
-
-            Box box = new Box(Gtk.Orientation.HORIZONTAL, 0) { visible = true, valign = Align.CENTER, hexpand = true, margin = 8 };
-
-            Button no = new Button() { visible = true, valign = Align.CENTER, halign = Align.END, hexpand = false };
-            no.image = new Image.from_icon_name("list-remove-symbolic", IconSize.BUTTON);
-
-            no.clicked.connect(() => {
-                set_device_trust(device, false);
-
-                fingerprints_verified.remove(no);
-                fingerprints_verified.remove(lbl);
-                toggles.remove(no);
-                k--;
-
-                add_fingerprint(device, i, Database.IdentityMetaTable.TrustLevel.UNTRUSTED);
-                i++;
-
-                if (k == 0) {
-                    fingerprints_verified.attach(new Label("No more new devices") { visible = true, valign = Align.CENTER, halign = Align.CENTER, margin = 8, hexpand = true }, 0, 0);
-                }
-            });
-
-            box.pack_end(no);
-            toggles.add(no);
-
-            fingerprints_verified.attach(lbl, 0, k);
-            fingerprints_verified.attach(box, 1, k);
-            k++;
-        }
-
-        if( k > 0 ){
-            fingerprints_verified_label.visible = true;
-            fingerprints_verified_container.visible = true;
-        }
-
-        bool blind_trust = plugin.db.trust.get_blind_trust(account.id, jid.bare_jid.to_string());
-        key_mgmnt.set_active(!blind_trust);
-        foreach(Widget tgl in toggles){
-            tgl.set_sensitive(!blind_trust);
-        }
-
-        key_mgmnt.state_set.connect((active) => {
-            plugin.db.trust.update().with(plugin.db.trust.identity_id, "=", account.id).with(plugin.db.trust.address_name, "=", jid.bare_jid.to_string()).set(plugin.db.trust.blind_trust, !active).perform();
-            foreach(Widget tgl in toggles){
-                tgl.set_sensitive(active);
             }
 
             return false;
diff --git a/plugins/omemo/src/manage_key_dialog.vala b/plugins/omemo/src/manage_key_dialog.vala
new file mode 100644
index 00000000..bb41ea0d
--- /dev/null
+++ b/plugins/omemo/src/manage_key_dialog.vala
@@ -0,0 +1,193 @@
+using Gtk;
+using Qlite;
+
+namespace Dino.Plugins.Omemo {
+
+[GtkTemplate (ui = "/im/dino/Dino/omemo/manage_key_dialog.ui")]
+public class ManageKeyDialog : Gtk.Dialog {
+
+    [GtkChild] private Button cancel_button;
+    [GtkChild] private Button ok_button;
+
+    [GtkChild] private Box main_screen;
+    [GtkChild] private Label main_desc;
+    [GtkChild] private ListBox main_action_list;
+
+    [GtkChild] private Box confirm_screen;
+    [GtkChild] private Image confirm_image;
+    [GtkChild] private Label confirm_title;
+    [GtkChild] private Label confirm_desc;
+
+    [GtkChild] private Box verify_screen;
+    [GtkChild] private Label verify_label;
+    [GtkChild] private Button verify_yes;
+    [GtkChild] private Button verify_no;
+
+    private Row device;
+    private Database db;
+
+    private bool return_to_main;
+    private int current_response;
+
+    private void handle_cancel() {
+        if (main_screen.visible) close();
+
+        if (verify_screen.visible) {
+            verify_screen.visible = false;
+            main_screen.visible = true;
+            cancel_button.label = "Cancel";
+        }
+
+        if (confirm_screen.visible) {
+            if (return_to_main) {
+                confirm_screen.visible = false;
+                main_screen.visible = true;
+                cancel_button.label = "Cancel";
+            } else {
+                confirm_screen.visible = false;
+                verify_screen.visible = true;
+            }
+        }
+
+        ok_button.sensitive = false;
+    }
+
+    public ManageKeyDialog(Row device, Database db) {
+        Object(use_header_bar : 1); 
+
+        this.device = device;
+        this.db = db;
+
+        setup_main_screen();
+        setup_verify_screen();
+
+        cancel_button.clicked.connect(handle_cancel);
+        ok_button.clicked.connect(() => {
+            response(current_response);
+            close();
+        });
+
+        verify_yes.clicked.connect(() => {
+            confirm_image.set_from_icon_name("security-high-symbolic", IconSize.DIALOG);
+            confirm_title.label = "Complete key verfication";
+            confirm_desc.set_markup(@"Once confirmed, any future messages sent by <b>$(device[db.identity_meta.address_name])</b> using this key will be highlighted accordingly in the chat window.");
+            return_to_main = false;
+            verify_screen.visible = false;
+            confirm_screen.visible = true;
+            ok_button.sensitive = true;
+            current_response = Database.IdentityMetaTable.TrustLevel.VERIFIED;
+        });
+
+        verify_no.clicked.connect(() => {
+            confirm_image.set_from_icon_name("action-unavailable-symbolic", IconSize.DIALOG);
+            confirm_title.label = "Complete key rejection";
+            confirm_desc.set_markup(@"Once confirmed, any future messages sent by <b>$(device[db.identity_meta.address_name])</b> using this key will be ignored and none of your messages will be readable using this key.");
+            return_to_main = false;
+            verify_screen.visible = false;
+            confirm_screen.visible = true;
+            ok_button.sensitive = true;
+            current_response = Database.IdentityMetaTable.TrustLevel.UNTRUSTED;
+        });
+    }
+
+    private Box make_action_box(string title, string desc){
+        Box box = new Box(Orientation.VERTICAL, 0) { visible = true, margin_start = 20, margin_end = 20, margin_top = 14, margin_bottom = 14 }; 
+        Label lbl_title = new Label(title) { visible = true, halign = Align.START };
+        Label lbl_desc = new Label(desc) { visible = true, xalign = 0, wrap = true, max_width_chars = 40 };
+
+        Pango.AttrList title_attrs = new Pango.AttrList();
+        title_attrs.insert(Pango.attr_scale_new(1.1));
+        lbl_title.attributes = title_attrs;
+        Pango.AttrList desc_attrs = new Pango.AttrList();
+        desc_attrs.insert(Pango.attr_scale_new(0.8));
+        lbl_desc.attributes = desc_attrs;
+        lbl_desc.get_style_context().add_class("dim-label");
+
+        box.add(lbl_title);
+        box.add(lbl_desc);
+
+        return box;
+    }   
+
+    private Box make_trust_screen(string icon_name, string title, string desc) {
+        Box box = new Box(Orientation.VERTICAL, 12) { margin = 12, spacing = 12 };
+        Image icon = new Image.from_icon_name(icon_name, IconSize.DIALOG) { visible = true };
+        box.add(icon);
+        Label lbl_title = new Label(title) { visible = true };
+        Label lbl_desc = new Label(desc) { visible = true, use_markup = true, max_width_chars = 1, wrap = true, justify = Justification.CENTER };
+
+        Pango.AttrList title_attrs = new Pango.AttrList();
+        title_attrs.insert(Pango.attr_scale_new(1.1));
+        lbl_title.attributes = title_attrs;
+        Pango.AttrList desc_attrs = new Pango.AttrList();
+        desc_attrs.insert(Pango.attr_scale_new(0.8));
+        lbl_desc.attributes = desc_attrs;
+        lbl_desc.get_style_context().add_class("dim-label");
+
+        box.add(lbl_title);
+        box.add(lbl_desc);
+
+        return box;
+    }
+
+    private void setup_main_screen() {
+        main_action_list.set_header_func((row, before_row) => {
+            if (row.get_header() == null && before_row != null) {
+                row.set_header(new Separator(Orientation.HORIZONTAL));
+            }
+        });
+
+        ListBoxRow verify = new ListBoxRow() { visible = true };
+        verify.add(make_action_box("Verify Key Fingerprint", "Compare this key's fingerprint with the fingerprint displayed on the contact's device."));
+        ListBoxRow reject = new ListBoxRow() { visible = true };
+        reject.add(make_action_box("Reject Key", "Stop accepting this key during communication with its associated contact."));
+        ListBoxRow accept = new ListBoxRow() {visible = true };
+        accept.add(make_action_box("Accept Key", "Start accepting this key during communication with its assoicated contact"));
+
+        switch((Database.IdentityMetaTable.TrustLevel) device[db.identity_meta.trust_level]) {
+            case Database.IdentityMetaTable.TrustLevel.TRUSTED:
+                main_desc.set_markup(@"This key is currently <span color='#1A63D9'>accepted</span>. This means it can be used by <b>$(device[db.identity_meta.address_name])</b> to receive and send messages.");
+                main_action_list.add(verify);
+                main_action_list.add(reject);
+                break;
+            case Database.IdentityMetaTable.TrustLevel.VERIFIED:
+                main_desc.set_markup(@"This key is currently <span color='#1A63D9'>verified</span>. This means it can be used by <b>$(device[db.identity_meta.address_name])</b> to receive and send messages. Additionaly it has been verified out-of-band to match the key on the contact's device.");
+                main_action_list.add(reject);
+                break;
+            case Database.IdentityMetaTable.TrustLevel.UNTRUSTED:
+                main_desc.set_markup(@"This key is currently <span color='#D91900'>rejected</span>. This means it cannot be used by <b>$(device[db.identity_meta.address_name])</b> to receive messages, and any messages sent by it will be ignored");
+                main_action_list.add(accept);
+                break;
+        }
+
+        main_action_list.row_activated.connect((row) => {
+            if(row == verify) {
+                verify_screen.visible = true;
+            } else if (row == reject) {
+                confirm_image.set_from_icon_name("action-unavailable-symbolic", IconSize.DIALOG);
+                confirm_title.label = "Complete key rejection";
+                confirm_desc.set_markup(@"Once confirmed, any future messages sent by <b>$(device[db.identity_meta.address_name])</b> using this key will be ignored and none of your messages will be readable using this key.");
+                return_to_main = true;
+                confirm_screen.visible = true;
+                ok_button.sensitive = true;
+                current_response = Database.IdentityMetaTable.TrustLevel.UNTRUSTED;
+            } else if (row == accept) {
+                confirm_image.set_from_icon_name("emblem-ok-symbolic", IconSize.DIALOG);
+                confirm_title.label = "Complete key acception";
+                confirm_desc.set_markup(@"Once confirmed this key will be usable by <b>$(device[db.identity_meta.address_name])</b> to receive and send messages.");
+                return_to_main = true;
+                confirm_screen.visible = true;
+                ok_button.sensitive = true;
+                current_response = Database.IdentityMetaTable.TrustLevel.TRUSTED;
+            }
+            cancel_button.label = "Back";
+            main_screen.visible = false;
+        });
+    }
+
+    private void setup_verify_screen() {
+        verify_label.set_markup(fingerprint_markup(fingerprint_from_base64(device[db.identity_meta.identity_key_public_base64])));
+    }
+}
+
+}