3 files changed, 54 insertions, 5 deletions
diff --git a/public/scripts/chat.js b/public/scripts/chat.js
index 497349b..89bdff3 100644
--- a/public/scripts/chat.js
+++ b/public/scripts/chat.js
@@ -6,7 +6,8 @@
  */
 
 // general imports
-const $ = require('jquery');
+const $ = jQuery = require('jquery');
+require('jquery-ui-bundle');
 const swal = require('sweetalert');
 const xkcdPassword = require('xkcd-password');
 const encryption = require('./encryption');
@@ -296,14 +297,54 @@ function chat() {
    * Shows modal for adding a contact
    */
   function addContact() {
+    const observer = new MutationObserver(() => {
+      $('#contact_id_input')
+        .on('keydown', (event) => {
+          if (event.keyCode === $.ui.keyCode.TAB
+            && $(this)
+              .autocomplete('instance').menu.active) {
+            event.preventDefault();
+          }
+        })
+        .autocomplete({
+          minLength: 0,
+          source: (request, response) => {
+            response($.ui.autocomplete.filter(
+              wordList, request.term.split(/,\s*/)
+                .pop(),
+            ));
+          },
+          focus: () => false,
+          select: (event, ui) => {
+            const terms = this.value.split(/,\s*/);
+            terms.pop();
+            terms.push(ui.item.value);
+            terms.push('');
+            this.value = terms.join('-');
+            return false;
+          },
+        });
+    });
+
+    observer.observe($('body')
+      .get(0), {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    });
+
     swal('Add a contact', {
       buttons: true,
-      content: 'input',
-      attributes: {
-        placeholder: 'Contact ID',
+      content: {
+        element: 'input',
+        attributes: {
+          id: 'contact_id_input',
+          placeholder: 'Contact ID',
+        },
       },
     })
       .then((contactId) => {
+        observer.disconnect();
         if (contactId.match(/^([a-zA-Z]*-[a-zA-Z]*)+$/)) {
           connect(contactId)
             .then(() => swal({
diff --git a/public/scripts/encryption.js b/public/scripts/encryption.js
index 735cc33..415a355 100644
--- a/public/scripts/encryption.js
+++ b/public/scripts/encryption.js
@@ -326,7 +326,7 @@ const self = module.exports = {
     .then(async (components) => {
       const fingerprintHash = fingerprintJs.x64hash128(components.map(pair => pair.value)
         .join(), 31);
-      console.log(fingerprintHash);
+      console.log(`[LOG] Your fingerprint is: ${fingerprintHash}`);
       let shaObj = new JsSHA('SHA3-512', 'TEXT');
       shaObj.update(passphrase);
       const passphraseHash = shaObj.getHash('HEX');
diff --git a/public/styles/main.sass b/public/styles/main.sass
index a6f0d2e..94bfe56 100644
--- a/public/styles/main.sass
+++ b/public/styles/main.sass
@@ -1,4 +1,12 @@
+/*!
+ / main.sass
+ / Copyright (c) 2019, Texx
+ / License: MIT
+ /     See https://github.com/texxme/Texx/blob/master/LICENSE
+ /
+
 // Normal input doesn't work here for npm packages!
 @import "../../node_modules/bulma/bulma"
+@import "../../node_modules/jquery-ui-bundle/jquery-ui.min"
 @import "style"
 @import "pin"