UX: Replace bootbox with a subtle message.

UX: Replace bootbox with a subtle message.

From a35e7645df9a766e6b50c57ca3b842066b200035 Mon Sep 17 00:00:00 2001
From: Dan Ungureanu <dan@ungureanu.me>
Date: Thu, 29 Nov 2018 19:10:18 +0200
Subject: [PATCH] UX: Replace bootbox with a subtle message.


diff --git a/assets/javascripts/discourse/connectors/composer-action-after/encrypt.hbs b/assets/javascripts/discourse/connectors/composer-action-after/encrypt.hbs
index 31bddcd..2d18d5b 100644
--- a/assets/javascripts/discourse/connectors/composer-action-after/encrypt.hbs
+++ b/assets/javascripts/discourse/connectors/composer-action-after/encrypt.hbs
@@ -1,5 +1,8 @@
 {{#if model.creatingPrivateMessage}}
   {{#if isEncryptActive}}
     {{encrypted-checkbox checked=model.isEncrypted disabled=model.isEncryptedDisabled}}
+    {{#if model.encryptError}}
+      <span class="error">{{model.encryptError}}</span>
+    {{/if}}
   {{/if}}
 {{/if}}
diff --git a/assets/javascripts/discourse/initializers/hook-composer.js.es6 b/assets/javascripts/discourse/initializers/hook-composer.js.es6
index 7fa0567..6c58338 100644
--- a/assets/javascripts/discourse/initializers/hook-composer.js.es6
+++ b/assets/javascripts/discourse/initializers/hook-composer.js.es6
@@ -167,6 +167,7 @@ export default {
       @on("init")
       initEncrypt() {
         this.setProperties({
+          encryptError: "",
           isEncryptedDisabled: false,
           isEncrypted: false
         });
@@ -177,6 +178,7 @@ export default {
         const usernames = this.get("recipients");
         if (usernames.length === 0) {
           this.setProperties({
+            encryptError: "",
             isEncryptedDisabled: false,
             isEncrypted: true
           });
@@ -190,8 +192,11 @@ export default {
           for (let i = 0; i < usernames.length; ++i) {
             const username = usernames[i];
             if (!userKeys[username]) {
+              // Show the error message only if user is interested in encrypting
+              // the message (i.e. filled the encrypt checkbox).
               if (this.get("isEncrypted")) {
-                bootbox.alert(
+                this.set(
+                  "encryptError",
                   I18n.t("encrypt.composer.user_has_no_key", { username })
                 );
               }
@@ -209,6 +214,7 @@ export default {
           // his uncheck.
           if (this.get("isEncryptedDisabled")) {
             this.setProperties({
+              encryptError: "",
               isEncryptedDisabled: false,
               isEncrypted: true
             });
diff --git a/assets/stylesheets/common/encrypt.scss b/assets/stylesheets/common/encrypt.scss
index 9cb4604..c00aab2 100644
--- a/assets/stylesheets/common/encrypt.scss
+++ b/assets/stylesheets/common/encrypt.scss
@@ -1,10 +1,14 @@
 #reply-control {
   .reply-to {
     .d-icon {
-      margin-left: 5px;
+      margin: 0 5px;
       &.disabled {
         color: $primary-low-mid;
       }
     }
+
+    .error {
+      color: $danger;
+    }
   }
 }

GitHub