Lock text input while waiting for friend request reply

background.html

@@ -129,16 +129,16 @@
             <form class='send clearfix'>
               <div class='attachment-previews'></div>
               <div class='flex'>
-                <button class='emoji'></button>
+                <button class='emoji' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
-                <textarea class='send-message' placeholder='{{ send-message }}' rows='1' dir='auto'></textarea>
+                <textarea class='send-message' placeholder='{{ send-message }}' rows='1' dir='auto' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></textarea>
                 <div class='capture-audio'>
-                    <button class='microphone'></button>
+                    <button class='microphone' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
                 </div>
                 <div class='android-length-warning'>
                     {{ android-length-warning }}
                 </div>
                 <div class='choose-file'>
-                    <button class='paperclip thumbnail'></button>
+                    <button class='paperclip thumbnail' {{#disable-inputs}} disabled="disabled" {{/disable-inputs}}></button>
                     <input type='file' class='file-input'>
                 </div>
               </div>

js/models/conversations.js

@@ -77,6 +77,7 @@
         unreadCount: 0,
         verified: textsecure.storage.protocol.VerifiedStatus.DEFAULT,
         keyExchangeCompleted: false,
+        friendRequestStatus: { allowSending: true, unlockTimestamp: null }
       };
     },
 
@@ -141,6 +142,10 @@
       this.on('read', this.updateAndMerge);
       this.on('expiration-change', this.updateAndMerge);
       this.on('expired', this.onExpired);
+
+      setTimeout(() => {
+        this.setFriendRequestTimer();
+      }, 0);
     },
 
     isMe() {
@@ -420,6 +425,50 @@
       
       this.set({ keyExchangeCompleted: completed });
     },
+    getFriendRequestStatus() {
+      return this.get('friendRequestStatus');
+    },
+    shouldDisableInputs() {
+      const status = this.getFriendRequestStatus();
+      if (!status) {
+        return false;
+      }
+      return !status.allowSending;
+    },
+    setFriendRequestTimer() {
+      const friendRequestStatus = this.getFriendRequestStatus();
+      if (friendRequestStatus) {
+        if (!friendRequestStatus.allowSending) {
+          const delay = Math.max(friendRequestStatus.unlockTimestamp - Date.now(), 0);
+          setTimeout(() => {
+            this.friendRequestTimedOut();
+          }, delay);
+        }
+      }
+    },
+    friendRequestTimedOut() {
+      let friendRequestStatus = this.getFriendRequestStatus();
+      friendRequestStatus.allowSending = true;
+      this.save({ friendRequestStatus })
+      this.trigger('disable:input', false);
+    },
+    friendRequestSent() {
+      const friendRequestLockDuration = 72; // hours
+
+      let friendRequestStatus = this.getFriendRequestStatus();
+      if (!friendRequestStatus) {
+        friendRequestStatus = {};
+      }
+
+      friendRequestStatus.allowSending = false;
+      const delayMs = 100 * 1000 ;//(60 * 60 * 1000 * friendRequestLockDuration);
+      friendRequestStatus.unlockTimestamp = Date.now() + delayMs;
+      this.trigger('disable:input', true);
+
+      setTimeout(() => { this.friendRequestTimedOut() }, delayMs);
+
+      this.save({ friendRequestStatus })
+    },
     isUnverified() {
       if (this.isPrivate()) {
         const verified = this.get('verified');

js/views/conversation_view.js

@@ -70,6 +70,7 @@
     template: $('#conversation').html(),
     render_attributes() {
       return {
+        'disable-inputs': this.model.shouldDisableInputs(),
         'send-message': i18n('sendMessage'),
         'android-length-warning': i18n('androidMessageLengthWarning'),
       };
@@ -80,6 +81,7 @@
       this.listenTo(this.model, 'newmessage', this.addMessage);
       this.listenTo(this.model, 'opened', this.onOpened);
       this.listenTo(this.model, 'prune', this.onPrune);
+      this.listenTo(this.model, 'disable:input', this.onDisableInput);
       this.listenTo(
         this.model.messageCollection,
         'show-identity',
@@ -277,6 +279,10 @@
       }
     },
 
+    onDisableInput(disable) {
+      this.$('button.emoji, button.microphone, button.paperclip, .send-message').attr('disabled', disable);
+    },
+
     unload(reason) {
       window.log.info(
         'unloading conversation',

libtextsecure/outgoing_message.js

@@ -368,15 +368,16 @@ OutgoingMessage.prototype = {
     return this.getStaleDeviceIdsForNumber(number).then(updateDevices =>
       this.getKeysForNumber(number, updateDevices)
         .then(async (keysFound) =>  {
+          const conversation = ConversationController.get(number);
           let attachPrekeys = false;
           if (!keysFound)
           {
             log.info("Fallback encryption enabled");
+            conversation.friendRequestSent();
             this.fallBackEncryption = true;
             attachPrekeys = true;
           } else {
             try {
-              const conversation = ConversationController.get(number);
               attachPrekeys = !conversation.isKeyExchangeCompleted();
             } catch(e) {
               // do nothing

stylesheets/_conversation.scss

@@ -283,7 +283,7 @@
     font-family: inherit;
 
     &[disabled='disabled'] {
-      background: transparent;
+      background: $color-light-35;
     }
   }
   .capture-audio {